@lmjs/core 1.0.6 → 2.0.0

package/src/_re.js

@@ -0,0 +1,2307 @@
+// `cl` is normally aliased in vendor/reconnecting-websocket.js (`var cl =
+// console.log;`), but that file is concatenated AFTER this one (see
+// build/bundle.js) — and this file's own Proxy traps below call `cl(e)` in
+// their catch handlers. That's reachable before the vendor file ever runs:
+// index-bootstrap.js (also after this file, before the vendor one) can
+// trigger _x()'s `set` trap (e.g. `_vt.Global.vars["x"] = ...` from a
+// compiled index.js) before any view exists, which throws internally
+// (`_vt.View._re` is undefined) and get caught right here — if `cl` isn't
+// defined yet at that point, the catch handler itself throws, aborting
+// whatever script called it (found 2026-09-14 testing against a real
+// running dev server). Harmless if vendor/reconnecting-websocket.js's own
+// `var cl = console.log;` runs later too — same value, redeclaration is a
+// no-op.
+var cl = console.log;
+
+class _v {
+    static name;
+    static type;
+    static vars;
+    static rvs;
+    static _pv;
+    static mx;
+    static views;
+    static hst;
+    static settings;
+    constructor(obj) {
+        this.name = obj.name ?? 'home';
+        this.type = obj.type ?? 'main';
+        this.hst = obj.hst ?? [];
+        this.views = obj.views ?? [];
+        this.vars = obj.vars ?? {};
+        this.rvs = obj.rvs ?? {};
+        this._pv = obj._pv ?? null;
+        this.mx = obj.mx ?? [];
+        this.settings = obj.settings ?? {
+            layout: "default",
+            requireAuth: false,
+        };
+    }
+}
+
+// Override console.log
+const consoleLogOriginal = console.log;
+console.log = function () {
+    for (let i = 0; i < arguments.length; i++) {
+        const arg = arguments[i];
+        if (arg && arg.hasOwnProperty('__isProxy') || arg?.target) {
+            arguments[i] = arguments[i].target;
+        }
+    }
+    consoleLogOriginal.apply(console, arguments);
+};
+
+// ---- Central error reporting (2026-09-13) ----------------------------------
+// Replaces scattered `catch(e){cl(e)}` sites that silently swallowed errors.
+// Wired into a representative, developer-facing subset for now: expression
+// evaluation (scopedEval/lookup/evalExp), the pre-rewrite validator in
+// walk.js, and a compiled <script> block's own runtime errors. Not yet wired
+// into every catch site in this file — that's a deliberate, incremental scope,
+// not an oversight; the ones above are where a developer's own .view mistake
+// actually surfaces, which is what this phase set out to fix.
+//
+// _lumenDevMode is a plain constant for now, not wired to a real build/env
+// flag yet — flip it by hand until that decision is made.
+var _lumenDevMode = true;
+var _lumenErrorLog = [];
+
+// HST wire-format version this runtime expects (2026-09-15) — must be
+// bumped in lockstep with packages/cli/lib/fcs.js's HST_FORMAT_VERSION
+// whenever this file's walk()/renderHST() changes what fields it reads
+// from the parser's output. See renderView()'s version check and fcs.js's
+// own HST_FORMAT_VERSION comment for the full rationale.
+var EXPECTED_HST_FORMAT_VERSION = 1;
+
+// `_vt.View.vars["x"]` is what a runtime error will mention after the
+// walk.js rewrite — this recovers the developer's original name `x` so the
+// message reads the way the developer would expect, not the compiled form.
+function _translateLumenError(message) {
+    if (!message) return message;
+    return message.replace(/_vt\.View\.vars\[["'`]([^"'`\]]+)["'`]\]/g, '$1');
+}
+
+function reportLumenError(info) {
+    info = info || {};
+    var rawMessage = info.message || (info.error && info.error.message) || 'Unknown error';
+    var entry = {
+        time: new Date().toISOString(),
+        stage: info.stage || 'runtime',
+        view: info.view || (typeof _vt !== 'undefined' && _vt.View ? _vt.View.name : undefined),
+        expr: info.expr,
+        message: _translateLumenError(rawMessage),
+        hint: info.hint
+    };
+    _lumenErrorLog.push(entry);
+
+    if (_lumenDevMode) {
+        console.error(
+            '[LumenJS] ' + entry.stage + ' error in "' + (entry.view || 'unknown') + '"' +
+            (entry.expr ? ' — ' + entry.expr : '') +
+            ': ' + entry.message +
+            (entry.hint ? '\n  ' + entry.hint : '')
+        );
+    }
+    // Production stays quiet on-screen by design (point 6: don't crash the
+    // page the way V1's uncaught errors did) — the entry is still kept in
+    // _lumenErrorLog for later inspection; no telemetry hook wired yet.
+    return entry;
+}
+
+
+function _x(_x) {
+    var currPath = [];
+    const handler = {
+        get(target, key) {
+            if (key == "__isProxy") return true;
+            // 2026-09-14: reset must fire on ANY root key, not just "View" —
+            // this closure's currPath is shared by the whole _vt proxy tree,
+            // so a stale tail from a prior _vt.Global read (which never hit
+            // "View" to reset it) would otherwise get prepended to the next
+            // chain and corrupt which key set()'s update(key) fires for.
+            if (key == "View" || key == "Global") currPath = [];
+            currPath.push(key);
+            if (typeof target[key] === 'object' && target[key] !== null && key != "_re") {
+                // cl("salsaa", target, key)
+                return new Proxy(target[key], handler);
+            } else {
+                // cl("tartat", target, key);
+                return target[key] ?? (key == 'target' ? target : undefined) ?? undefined;
+            }
+        },
+        set(target, key, value) {
+
+            // cl(["hiiiiii", key, value]);
+            // console.log(`${key} set from ${target[key]} to ${value}`, target, Object.keys({ target })[0]);
+            target[key] = value;
+            // var _View = currPath[1] == "views" ? currPath[2] : "";
+
+            try {
+                // cl(["hiiiiii", currPath, key, value]);
+                // `_vt.View._re` genuinely doesn't exist yet during
+                // index.js's own bootstrap (before any view has mounted —
+                // see index-bootstrap.js) — that's the normal case now,
+                // not an error, so it's guarded here rather than left to
+                // throw into the catch below on every such write.
+                if (currPath.length == 2 && currPath[1] == "vars") {
+                    if (_vt.View._re) _vt.View._re.update(key);
+                } else if (currPath.length > 2 && currPath[1] == "vars") {
+                    let ky = clone(currPath[2]);
+                    if (_vt.View._re) _vt.View._re.update(ky);
+                }
+                // if (currPath.length) {
+                // _vt.View._re.set(key, value);
+                // }
+                // cl(currPath, _View);
+                // eval("var kira = " + "_vt." + currPath.join("."));
+                // if (kira.__isProxy) {
+                //     currPath.push(key);
+                //     eval("kira = " + "_vt." + currPath.join("."));
+                // }
+
+                // if (kira) {
+                //     // if (_el.data('_re')) _el.data('_re').set(key, value);
+                // }
+            } catch (e) {
+                cl(e);
+            }
+
+            currPath = [];
+            return true;
+        },
+        deleteProperty(target, key) {
+            if (!(key in target)) {
+                return false;
+            }
+            delete target[key];
+
+            try {
+                // cl(["hiiiiii", currPath, key, value]);
+                // `_vt.View._re` genuinely doesn't exist yet during
+                // index.js's own bootstrap (before any view has mounted —
+                // see index-bootstrap.js) — that's the normal case now,
+                // not an error, so it's guarded here rather than left to
+                // throw into the catch below on every such write.
+                if (currPath.length == 2 && currPath[1] == "vars") {
+                    if (_vt.View._re) _vt.View._re.update(key);
+                } else if (currPath.length > 2 && currPath[1] == "vars") {
+                    let ky = clone(currPath[2]);
+                    if (_vt.View._re) _vt.View._re.update(ky);
+                }
+                // if (currPath.length) {
+                // _vt.View._re.set(key, value);
+                // }
+                // cl(currPath, _View);
+                // eval("var kira = " + "_vt." + currPath.join("."));
+                // if (kira.__isProxy) {
+                //     currPath.push(key);
+                //     eval("kira = " + "_vt." + currPath.join("."));
+                // }
+
+                // if (kira) {
+                //     // if (_el.data('_re')) _el.data('_re').set(key, value);
+                // }
+            } catch (e) {
+                cl(e);
+            }
+            return true;
+        },
+        ownKeys(target) {
+            return Reflect.ownKeys(target);
+        },
+        has(target, key) {
+            return key in target;
+        },
+        defineProperty(target, key, descriptor) {
+            if (descriptor && "value" in descriptor) {
+                target[key] = descriptor.value;
+            }
+            return target;
+        },
+        getOwnPropertyDescriptor(target, key) {
+            const value = target[key];
+            return key in target
+                ? {
+                    value,
+                    enumerable: true,
+                    configurable: true,
+                }
+                : undefined;
+        },
+    };
+    var x = new Proxy(_x, handler);
+    return x;
+}
+
+// "Global" (2026-09-14): a second, permanent root next to "View" — unlike
+// _vt.View (replaced wholesale by a fresh _v() on every main-view navigation,
+// see _lm's constructor below), this object is never reassigned, so state
+// written here survives navigation. This is the target walk.js now rewrites
+// index.js's top-level vars into, since index.js runs once at bootstrap and
+// its vars (V1's documented convention for app-wide state like `isAdmin`)
+// need to outlive any single view. concatVarsAtLevel() below merges it into
+// every scope lookup so ordinary view code can just reference the name.
+let _vt = _x({
+    "View": new _v({}),
+    "Global": { "vars": {} }
+});
+
+class _lm {
+    _RealDOM = [];
+    _effects = {};
+    _cc = {};
+    _jj = {};
+    _ready = false;
+    view = undefined;
+    sbscrbs = [];
+    reactiveVariables = [];
+    vrs = {};
+    _CXR = [];
+    _LXR = [];
+
+    constructor(view) {
+        this.view = view;
+        this.view._re = this;
+        this.reactiveVariables = view?.rvs ?? {};
+        this.init();
+        if (this.view.type == "main") _vt.View = this.view;
+
+        // this.reactiveVariables = this.view.vars ?? _vt.View.vars ?? [];
+
+        if (this.view._pv) {
+            // cl("Subscribing to " , this.view);
+            this.view._pv.subscribe(this.view);
+        }
+
+        return this;
+    }
+
+    init() {
+        var par = this;
+        this.view.hst.forEach(function (doc) {
+            par.walk(doc, null);
+        });
+    }
+
+    subscribe(view) {
+        this.sbscrbs.push(view);
+    }
+
+    scopedEval(context, expr, kk) {
+        // cl("Cleaning", expr, kk, context);
+        // 2026-09-14: `ctx` was read/deleted here before its own `let ctx =`
+        // declaration a few lines down — a real TDZ bug (ReferenceError:
+        // Cannot access 'ctx' before initialization), not something either
+        // of us introduced. Only triggers on the TypeError-retry path (a
+        // failed eval retrying with the offending property stripped), which
+        // is common enough — any expression touching a property of
+        // something momentarily undefined hits it. Fixed by computing `ctx`
+        // first, same effect, no TDZ violation.
+        let ctx = this.concatVarsAtLevel(context, this);
+        if (kk) {
+            if (!ctx.hasOwnProperty(kk)) return undefined;
+            delete ctx[kk];
+        }
+        // cl("CONTEXT");
+        // cl(context);
+        // cl(ctx);
+        try {
+            // cl(["LopIsMissing???", context, expr]);
+            const evaluator = Function.apply(null, [
+                ...Object.keys(ctx),
+                "expr",
+                "return eval(expr)",
+            ]);
+            // cl(evaluator.apply(null, [...Object.values(context), expr]));
+            // if(expr=="patientProfile['Gender']") alert([evaluator.apply(null, [...Object.values(context), expr]), expr, Object.keys(context), context['patientProfile'], Object.keys(context.patientProfile)]);
+            return evaluator.apply(null, [...Object.values(ctx), expr]);
+        } catch (e) {
+            // if (_debugMode)
+            // cl([expr, context, e]);
+            if (e instanceof TypeError) {
+                return this.scopedEval(ctx, expr, e.message.split(" ")[0]);
+            }
+            reportLumenError({ stage: 'expression', expr: expr, error: e });
+            return undefined;
+        }
+    }
+
+    getVals(effect) {
+        let val = '';
+        // let mss = [];
+        if (effect.type == "text") {
+            if (!effect.isSplit) {
+                for (let i = 0; i < effect.splits.length; i++) {
+                    let split = effect.splits[i];
+                    if (split.type == 'mustache') {
+                        val += this.getVal(split.content);
+                    } else {
+                        val += split.content;
+                    }
+                }
+            } else {
+                val = this.getVal(effect.content);
+            }
+        } else if (effect.type == "attr" || effect.type == "event") {
+            for (let i = 0; i < effect.splits.length; i++) {
+                let split = effect.splits[i];
+                if (split.type == 'mustache') {
+                    val += this.getVal(split.content);
+                } else {
+                    val += split.content;
+                }
+            }
+            // mss = effect.mss[effect.name];
+        }
+
+        // for (let i = 0; i < mss.length; i++) {
+        // const ms = "{{" + mss[i] + "}}";
+        // cl(ms, this.getVal(ms, _.cloneDeep(_vt.View.vars)));
+        // val = val.split(ms).join(this.getVal(ms, _.cloneDeep(this.reactiveVariables)));
+        // }
+
+        return val;
+    }
+
+    renderAll() {
+        if (this._ready) return; //CHECK APPLICABILITY
+        this._ready = true;
+
+
+        for (const rv in this._effects) {
+            if (Object.prototype.hasOwnProperty.call(this._effects, rv)) {
+                const effects = this._effects[rv];
+                for (let ei = 0; ei < effects.length; ei++) {
+                    const effect = effects[ei];
+                    // cl("Effect for " + rv, effect);
+                    // effect.nd.textContent = "1234";
+
+                    if (!effect.nd) continue;
+                    // if (!effect.nd.isConnected) continue;
+                    try {
+                        if (effect.type == "text") {
+                            // cl(k, effect);
+                            effect.nd.textContent = this.render(effect);
+                        } else if (effect.type == "attr") {
+                            // cl("Setting Attr", k, effect, effect.name, this.render(effect));
+                            if (effect.name == "value") {
+                                effect.nd.value = this.render(effect);
+                            } else {
+                                effect.nd.setAttribute(effect.name, this.render(effect));
+                                if (effect.name == "view") {
+                                    cl("We Must Trigger View Change", effect, this.render(effect));
+                                    effect.nd.subPath = this.render(effect);
+                                    renderView(this.render(effect), true, {});
+                                }
+                            }
+                        } else if (effect.type == "event") {
+                            effect.nd.events[effect.name] = this.render(effect);
+                        }
+                    } catch (e) {
+                        cl("Eeeeee", e);
+                    }
+                }
+            }
+        }
+
+
+        this.updateCXRs();
+        this.updateLXRs();
+        this.updateVXRs();
+    }
+
+    chainConnected(cx) {
+        for (let i = cx.chain.length - 1; i >= 0; i--) {
+            const cxs = cx.chain[i];
+            if (cxs.ref.isPreConnected) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    async updateVXRs(k) {
+        let subsNames = [];
+        for (let i = 0; i < this.view.views.length; i++) {
+            const _view = this.view.views[i];
+            cl("We Must Render A SubView", _view, subsNames.includes(_view.subPath), subsNames, _view.subPath);
+            if (!subsNames.includes(_view.subPath)) subsNames.push(_view.subPath);
+        }
+        // cl(subsNames);
+        for (let i = 0; i < subsNames.length; i++) {
+            const n = subsNames[i];
+            renderView(n, true, {});
+        }
+    }
+
+    async updateCXRs(k) {
+        for (let i = 0; i < this._CXR.length; i++) {
+            const cx = this._CXR[i];
+            if (cx.name == "if") {
+                let isTrue = this.evalExp(cx.content, this.reactiveVariables);
+                // cl("IF", isTrue, cx.content, this.reactiveVariables, cx);
+                if (isTrue) {
+                    await this.showSectionCX(cx, k);
+                } else {
+                    await this.hideSectionCX(cx);
+                }
+            } else if (cx.name == "else-if") {
+                if (!this.chainConnected(cx)) {
+                    let isTrue = this.evalExp(cx.content, this.reactiveVariables);
+                    // cl("ELSE-IF", isTrue, cx.content, this.reactiveVariables, cx);
+                    if (isTrue) {
+                        await this.showSectionCX(cx, k);
+                    } else {
+                        await this.hideSectionCX(cx);
+                    }
+                } else {
+                    await this.hideSectionCX(cx);
+                }
+            } else if (cx.name == "else") {
+                // cl("ELSE", !this.chainConnected(cx), cx);
+                if (!this.chainConnected(cx)) {
+                    await this.showSectionCX(cx, k);
+                } else {
+                    await this.hideSectionCX(cx);
+                }
+            }
+
+        }
+    }
+
+    // @before-render / @after-render for :if/:else-if/:else (2026-09-14) —
+    // shared by all three updateCXRs() branches above. This runs on EVERY
+    // reactive update those branches are eligible for, not just when the
+    // condition actually flips — `cx.ref.node.isConnected` (a real, always-
+    // accurate DOM property) is what gates hook firing to genuine
+    // hidden->visible / visible->hidden transitions, not `isPreConnected`
+    // (an internal bookkeeping flag with more edge cases across the
+    // if/else-if/else chain than is worth relying on here).
+    async showSectionCX(cx, k) {
+        let wasConnected = cx.ref.node.isConnected;
+        cx.ref.isPreConnected = true;
+        await renderSection(cx.ref, cx.doc, this, k);
+        if (!wasConnected) await fireRenderHook(cx, 'after-render', cx.ref.node, { visible: true });
+    }
+
+    async hideSectionCX(cx) {
+        if (cx.ref.node.isConnected) await fireRenderHook(cx, 'before-render', cx.ref.node, { visible: false });
+        cx.ref.isPreConnected = false;
+        cx.ref.node.replaceWith(cx.ref);
+    }
+
+    render(effect) {
+        let x = "";
+
+        try {
+            if (effect.type == "text" || effect.type == "attr" || effect.type == "event") {
+                x = this.getVals(effect);
+            }
+        } catch (e) {
+            cl(e);
+        }
+
+        return x;
+    }
+
+    update(k) {
+        if (!this._ready) return;
+        // cl("Hello", k);
+
+
+        // cl(k, this._effects.hasOwnProperty(k));
+
+        if (this._effects.hasOwnProperty(k)) {
+            const effects = this._effects[k];
+            // cl(effects);
+            for (let ei = 0; ei < effects.length; ei++) {
+                const effect = effects[ei];
+                // cl("Effect for " + k, effect);
+                // effect.nd.textContent = "1234";
+
+                if (!effect.nd) continue;
+                // if (!effect.nd.isConnected) continue;
+                try {
+                    if (effect.type == "text") {
+                        // cl(k, effect);
+                        effect.nd.textContent = this.render(effect);
+                    } else if (effect.type == "attr") {
+                        // cl("Setting Attr", k, effect, effect.name, this.render(effect));
+                        if (effect.name == "value") {
+                            effect.nd.value = this.render(effect);
+                        } else {
+                            effect.nd.setAttribute(effect.name, this.render(effect));
+                            if (effect.name == "view") {
+                                cl("We Must Trigger View Change", effect, this.render(effect));
+                                effect.nd.subPath = this.render(effect);
+                                renderView(this.render(effect), true, {});
+                            }
+                        }
+                    } else if (effect.type == "event") {
+                        effect.nd.events[effect.name] = this.render(effect);
+                    }
+                } catch (e) {
+                    cl("Eeeeee", e);
+                }
+            }
+        }
+
+        this.updateCXRs(k);
+        this.updateLXRs(k);
+        for (let sbscsi = 0; sbscsi < this.sbscrbs.length; sbscsi++) {
+            const sbscr = this.sbscrbs[sbscsi];
+            sbscr._re.update(k);
+        }
+    }
+
+    async updateLXRs(k) {
+        for (let i = 0; i < this._LXR.length; i++) {
+            var cx = this._LXR[i];
+
+            var forX = cx.forX;
+
+            if (k && k != forX['js']) continue;
+
+            var val = this.getVal(forX['js'], "");
+
+            // cl("FORR", cx, val);
+
+            var tempVal = [];
+            if (this.typeStr(val) == "number") {
+                for (let i = 0; i < val; i++) {
+                    tempVal.push(i);
+                }
+                val = tempVal;
+            }
+
+
+            let vals = [];
+            let isObj = false;
+            if (this.typeStr(val) == "object") {
+                isObj = true;
+
+                for (const oKey in val) {
+                    if (Object.hasOwnProperty.call(val, oKey)) {
+                        const item = val[oKey];
+                        let objj = {
+                            key: oKey,
+                            value: item,
+                        };
+                        vals.push(objj);
+                    }
+                }
+            } else vals = clone(val);
+
+            if (this.typeStr(vals) == "array" && vals.length > 0) {
+                // cl("ARRAY", cx.ref, vals);
+                let forIf = cx.cond;
+                let limit = vals.length;
+                let offset = 0;
+                if (cx.limit) limit = (isNaN(cx.limit) ? cx.limit : limit) > vals.length ? vals.length : cx.limit * 1;
+                if (cx.offset) offset = (isNaN(cx.offset) ? cx.offset : offset) < 0 ? 0 : cx.offset * 1;
+
+
+                let marray = [];
+                if (forIf) {
+                    marray = vals.slice(offset * 1, vals.length);
+                } else {
+                    marray = vals.slice(offset * 1, limit * 1 + offset * 1);
+                }
+
+                // cl(cx, vals, limit, offset, forIf, marray);
+
+                let myLimit = 0;
+                // let myClones = [];
+
+                let arrayToRender = [];
+                let arrayToRenderVXs = [];
+
+                for (var index = 0; index < marray.length; index++) {
+                    if (myLimit == limit * 1) break;
+                    try {
+                        let vx = {}; //clone(_vt.View.vars);
+                        vx['index'] = myLimit;
+                        if (forX['dx'] != "") vx[forX['dx']] = myLimit;
+                        if (isObj) {
+                            if (forX['as']['v'] != "") {
+                                if (forX['as']['k']) vx[forX['as']['k']] = marray[index]['key'];
+                                if (forX['as']['v']) vx[forX['as']['v']] = marray[index]['value'];
+                            } else {
+                                if (forX['as']['k']) vx[forX['as']['k']] = marray[index];
+                            }
+                            vx['key'] = marray[index]['key'];
+                            vx['value'] = marray[index]['value'];
+                        } else {
+                            if (forX['as']['k']) vx[forX['as']['k']] = marray[index];
+                        }
+                        // cl(forX, vx);
+                        // cl("VXXXX", vx, this);
+
+                        if (forIf) {
+                            let isTrue = this.evalExp(forIf, vx);
+                            if (!isTrue) continue;
+                        }
+
+                        let miIndexx = offset * 1 + index * 1;
+
+
+                        // let cln = this.createSection(cx, vx, forX, k);
+                        arrayToRender.push(marray[index]);
+                        arrayToRenderVXs.push(vx);
+                        // let basket = await renderSection(cx.ref, cx.doc, this, k, {
+                        //     cx, vx, forX, miIndexx
+                        // });
+                        // cl(basket);
+                        // cl([
+                        //     cx.ref.isConnected,
+                        //     cx.ref.node.isConnected,
+                        //     cx,
+                        //     "REAL INDEX: " + myLimit,
+                        //     miIndexx,
+                        //     forIf,
+                        //     isObj,
+                        //     forX,
+                        //     vx
+                        // ]);
+                        myLimit++;
+                    } catch (e) {
+                        cl(e);
+                    }
+                }
+
+                // cl("ATR", arrayToRender);
+                let oldATR = cx.atr;
+                cx.atr = arrayToRender;
+                // cl(oldATR, arrayToRender);
+
+                const actions = this.compareArrays(oldATR, arrayToRender);
+                // cl("ACTNS", actions);
+
+                // @before-render / @after-render (2026-09-14) — lets a
+                // developer tear down and re-initialize a DOM-owning plugin
+                // (a slider, for instance) around this :for loop's own
+                // diff-and-patch pass, instead of it silently breaking the
+                // next time the underlying data changes. Skipped entirely
+                // when nothing actually changed. Fires on the very first
+                // render too (`actions` is all "add" then), so one
+                // @after-render handler covers both "initialize" and
+                // "re-initialize after data changed" — no separate manual
+                // bootstrap call needed. See fireRenderHook()'s own comment.
+                if (actions.length) await fireRenderHook(cx, 'before-render', cx.ref.parentElement, { items: arrayToRender, actions });
+
+                for (let ai = 0; ai < actions.length; ai++) {
+                    const actn = actions[ai];
+                    if (actn.action == 'add') {
+                        //Add Items To The DOM at Index
+                        // actn = {
+                        //     "action": "add",
+                        //     "index": 0,
+                        //     "element": {
+                        //         "key": "Name",
+                        //         "value": "Abdul Rahman"
+                        //     }
+                        // };
+                        let vx = arrayToRenderVXs[actn.index];
+                        // cl([cx, vx, isObj, forX])
+                        let cln = await this.createSection(cx, vx, isObj, forX);
+                        cx.ref.before(cln);
+
+
+                        cln.replaceWith(cln.node);
+                        // cln.node.innerHTML = "";
+                        // cln.node.append(...cln._re._RealDOM);
+                        // cl(cln);
+
+                    } else if (actn.action == 'remove') {
+
+                        // cl("Remove", actn);
+                        // let vx = arrayToRenderVXs[actn.index];
+                        // let cln = await this.createSection(cx, vx);
+                        // cx.ref.before(cln);
+
+                        var keyed = cx.key + '_' + actn.index;
+
+                        let tx = cx.ref?.nodes[keyed];
+
+                        if (tx) {
+                            tx.remove();
+                            tx.node.remove();
+                            delete cx.tx?.nodes[keyed];
+                            // if(ref.isConnected){
+                            // } else if(ref.node.isConnected){
+
+                            // }
+                        }
+
+                        // cln.replaceWith(cln.node);
+                        // cln.node.innerHTML = "";
+                        // cln.node.append(...cln._re._RealDOM);
+                        // cl(cln);
+                    } else {
+                        // let vx = arrayToRenderVXs[actn.index];
+                        // let cln = await this.createSection(cx, vx);
+                        // cx.ref.before(cln);
+
+                        var keyed = cx.key + '_' + actn.index;
+
+                        let tx = cx.ref?.nodes[keyed];
+
+                        let vx = arrayToRenderVXs[actn.index];
+                        if (tx) {
+                            // tx._re.reactiveVariables = [...tx._re.reactiveVariables, ...Object.keys(vx)];
+                            // cl("UPDATE", [tx], vx, tx._re);
+                            tx._re.vrs = vx;
+                            if (tx.isObj) {
+                                if (tx.forX.as['k'] != "") tx._re.update(tx.forX.as['k']);
+                                else tx._re.update(tx.forX.js);
+                                if (tx.forX.as['v'] != "") tx._re.update(tx.forX.as['v']);
+                                // cl("Updating", tx.forX.as['k'], tx.forX.as['v']);
+                                for (let actnsi = 0; actnsi < actn.updates.length; actnsi++) {
+                                    const actnu = actn.updates[actnsi];
+                                    tx._re.update(actnu.property);
+                                }
+                            } else {
+                                if (tx.forX.as['k'] != "") tx._re.update(tx.forX.as['k']);
+                                else tx._re.update(tx.forX.js);
+                                // cl("Updating", tx.forX);
+                            }
+
+                            // tx._re.renderAll();
+                            // if(ref.isConnected){
+                            // } else if(ref.node.isConnected){
+
+                            // }
+                        }
+
+                        // cln.replaceWith(cln.node);
+
+                    }
+                }
+
+                if (actions.length) await fireRenderHook(cx, 'after-render', cx.ref.parentElement, { items: arrayToRender, actions });
+
+            } else {
+                // cl("NO ARRAY", cx.ref);
+                cx.nodes = [];
+            }
+            // if (cx.name == "if") {
+            //     let isTrue = this.evalExp(cx.value, this.reactiveVariables);
+            //     if (isTrue) {
+            //         await renderSection(cx.ref, cx.doc, this, k);
+            //     } else {
+            //         cx.ref.node.replaceWith(cx.ref);
+            //     }
+            // }
+
+        }
+    }
+
+
+    compareLogic(array1, array2) {
+        if (array1.length === array2.length) {
+            // Perform update-only algorithm when arrays have the same length
+            // ...
+            return 1;
+        } else {
+            if (array1.length > array2.length) {
+                // Array1 has more elements, indicating there are deleted items
+                // Use two-way comparison to find deleted indexes
+                // If successful, perform the necessary removals
+                // Otherwise, proceed with update and removal comparisons
+                // ...
+                return 2;
+            } else {
+                // Array2 has more elements, indicating there are added items
+                // Use two-way comparison to find added indexes
+                // If successful, perform the necessary additions
+                // Otherwise, proceed with update and addition comparisons
+                // ...
+                return 3;
+            }
+        }
+    }
+
+    compareArrays(array1, array2) {
+        const actions = [];
+        // let cpl = this.compareLogic(array1, array2);
+
+        // if (cpl == 2) {
+        //     cl("Deleted", this.findDeletedIndexes(array1, array2));
+        // } else if (cpl == 3) {
+        //     cl("Added", this.findAddedIndexes(array1, array2));
+        // }
+
+        const maxLength = Math.max(array1.length, array2.length);
+        for (let i = 0; i < maxLength; i++) {
+            const element1 = array1[i];
+            const element2 = array2[i];
+
+            if (!element2) {
+                actions.push({
+                    action: 'remove',
+                    index: i
+                });
+            } else if (!element1) {
+                actions.push({
+                    action: 'add',
+                    index: i,
+                    element: element2
+                });
+            } else if (!this.deepCompare(element1, element2)) {
+                actions.push({
+                    action: 'update',
+                    index: i,
+                    updates: this.getUpdates(element1, element2)
+                });
+            }
+        }
+
+        return actions;
+    }
+
+    findDeletedIndexes(array1, array2) {
+        const deletedIndexes = [];
+        let par = this;
+
+        array1.forEach((item, index) => {
+            const foundIndex = array2.findIndex((el) => par.deepCompare(el, item));
+            if (foundIndex === -1) {
+                deletedIndexes.push(index);
+            }
+        });
+
+        return deletedIndexes;
+    }
+
+    findAddedIndexes(array1, array2) {
+        const addedIndexes = [];
+        let par = this;
+
+        array2.forEach((item, index) => {
+            const foundIndex = array1.findIndex((el) => par.deepCompare(el, item));
+            if (foundIndex === -1) {
+                addedIndexes.push(index);
+            }
+        });
+
+        return addedIndexes;
+    }
+
+    deepCompare(obj1, obj2) {
+        // Compare objects by stringifying and comparing their JSON representation
+        return JSON.stringify(obj1) === JSON.stringify(obj2);
+    }
+
+    getUpdates(oldObj, newObj) {
+        const updates = [];
+        for (const key in newObj) {
+            if (newObj.hasOwnProperty(key) && newObj[key] !== oldObj[key]) {
+                updates.push({ property: key, value: newObj[key] });
+            }
+        }
+        return updates;
+    }
+
+
+    getVal(mo, indexName) {
+        let vars = {};
+        try {
+            for (let i = 0; i < this.reactiveVariables.length; i++) {
+                // 2026-09-14: fall back to _vt.Global.vars when a view
+                // doesn't declare this var itself — the real-world case of
+                // a mustache/:if referencing an index.js global (e.g.
+                // `isAdmin`) that this view's own script never assigns.
+                // concatVarsAtLevel() already does this merge for
+                // lookup()/scopedEval(); getVal() (what mustache text nodes
+                // actually call) had its own separate, unmerged read here
+                // and was silently rendering these as empty.
+                let __name = this.reactiveVariables[i];
+                vars[__name] = _vt.View.vars.hasOwnProperty(__name)
+                    ? _vt.View.vars[__name]
+                    : _vt.Global.vars[__name];
+            }
+            for (const ky in this.vrs) {
+                if (Object.prototype.hasOwnProperty.call(this.vrs, ky)) {
+                    vars[ky] = this.vrs[ky]
+                }
+            }
+        } catch (e) {
+            cl(e);
+        }
+
+        mo = (mo).trim();
+        // cl(["getVal", mo, vars, indexName]);
+        // if (mo == "patientProfile['Gender']") {
+        //   cl(["getVal", mo, vars, indexName]);
+        // }
+        if (mo.slice(0, 2) == "{{") {
+            mo = mo.slice(2, -2);
+        }
+        // if (mo == 'new Date(article.createdAt.split("T")[0]).getDate()')
+        // if(mo=="genders[`patientProfile['Gender']`]") cl(["getVal", mo, vars, indexName]);
+        let value = "";
+        let _mo = mo;
+
+        if (mo.indexOf("`") > -1) {
+            var matchesVal = _mo.match(/\.`[\s\S]*?`/g);
+            // cl(["shuuuu", matchesVal, _mo]);
+            if (matchesVal)
+                for (var y = 0; y < matchesVal.length; y++) {
+                    _mo = _mo
+                        .split(matchesVal[y])
+                        .join(
+                            "." +
+                            this.getVal(
+                                matchesVal[y].substr(1).slice(1, -1),
+                                indexName
+                            )
+                        );
+                }
+
+            var matchesVal = _mo.match(/`[\s\S]*?`/g);
+            // cl(["suuuu", matchesVal, _mo]);
+            if (matchesVal)
+                for (var y = 0; y < matchesVal.length; y++) {
+                    // cl([
+                    //   "3uuu",
+                    //   this.getVal(matchesVal[y].slice(1, -1), vars, indexName),
+                    //   matchesVal,
+                    //   y,
+                    //   matchesVal[y].slice(1, -1),
+                    //   vars,
+                    //   indexName,
+                    // ]);
+                    _mo = _mo
+                        .split(matchesVal[y])
+                        .join(
+                            "'" +
+                            this.getVal(matchesVal[y].slice(1, -1), indexName) +
+                            "'"
+                        );
+                }
+
+            // cl([this.getVal(_mo, vars, indexName), "kuuuuk", _mo, vars, indexName]);
+            return this.getVal(_mo, indexName);
+        }
+
+        if (mo.indexOf(";") > -1) {
+            let zxx = mo.split(";");
+            mo = $.trim(zxx[0]);
+        }
+
+        if (mo.indexOf(" as ") > -1) {
+            mo = mo.split(" as ");
+            return this.getVal(mo[0], indexName);
+        }
+
+        if (indexName) {
+            indexName = indexName.toString();
+            if (
+                mo.indexOf(indexName) > -1 &&
+                mo != indexName &&
+                vars.hasOwnProperty(indexName) &&
+                mo != "index"
+            ) {
+                mo = mo.split(indexName).join(vars[indexName]);
+                return this.getVal(mo, indexName);
+            }
+        }
+
+        var Ondex = mo.match(/\bindex\b/g);
+        if (Ondex && mo != "index" && vars.hasOwnProperty("index")) {
+            _mo = mo.replace(/\bindex\b/g, vars["index"]);
+            // cl(["Hassss",mo,vars["index"], vars, this.getVal(_mo, vars, indexName)]);
+            return this.getVal(_mo, indexName);
+        }
+
+        // if (this.isJS(mo, vars)) {
+        // cl("get",mo);
+        value = this.lookup(mo, vars);
+        // } else {
+        //     value = this.lookup(mo, vars);
+        //     // if (mo == "index") cl("kiki", value);
+        // }
+
+        // cl(["VALZZZZZZZZ", mo, vars, value, value ?? ""]);
+        return value ?? "";
+    }
+
+    concatVarsAtLevel(levelVars, parent) {
+
+        if (!parent.view._pv) {
+            var concatenatedVars = { ...levelVars };
+            if (parent.view.vars) {
+                // Global vars (index.js's top-level state, see _vt.Global
+                // above) sit at the lowest priority here — a view or a
+                // narrower scope declaring the same name shadows it, same
+                // as real JS scoping would.
+                concatenatedVars = { ..._vt.Global.vars, ...parent.view.vars, ...concatenatedVars };
+            }
+            return concatenatedVars;
+        }
+
+        var concatenatedVars = { ...levelVars };
+        if (parent.view.vars) {
+            // Object.assign(concatenatedVars, parent.view.vars);
+            concatenatedVars = { ...parent.view.vars, ...concatenatedVars };
+        }
+
+        return this.concatVarsAtLevel(concatenatedVars, parent.view._pv);
+    }
+
+    lookup(name, vaz) {
+
+        // for (const key in _vt.View.vars) {
+        //     if (Object.prototype.hasOwnProperty.call(_vt.View.vars, key)) {
+        //         vaz[key] = _vt.View.vars[key];
+        //     }
+        // }
+        // if(name == '{{new Date(article.createdAt.split("T")[0]).getDate()}}') 
+        // cl(["lookup", name, vaz]);
+        // cl(vaz);
+        // cl(this.concatVarsAtLevel(vaz, this));
+
+        let vars = this.concatVarsAtLevel(vaz, this);
+        // cl("VAAZZZ");
+        // cl(vaz);
+        // cl(vars);
+
+        try {
+            var value;
+            var names,
+                index,
+                lookupHit = false;
+
+            if (this.hasProperty(vars, name)) {
+                value = vars[name];
+                // cl(["luuuu", vars, name, value]);
+            } else if (name.indexOf(".") > -1 && name.indexOf("[") == -1) {
+                // cl(["laaaaaa", vars, name, value]);
+                var value = this.scopedEval(vars, name);
+                // cl(["liiii", vars, name, value]);
+                if (!(value || value == 0)) {
+                    value = vars;
+                    names = name.split(".");
+                    index = 0;
+                    while (value != null && index < names.length) {
+                        if (index === names.length - 1)
+                            lookupHit = this.hasProperty(value, names[index]);
+                        value = value[names[index++]];
+                        //{{v.0.kuku}} v then v.0 then v.0.kuku ...... iterate through nested chains
+                    }
+                }
+            } else {
+                var value = this.scopedEval(vars, name);
+                // if (name == "patientProfile['Gender']") {
+                // cl(["==zzzzzlookup", name, vaz, value, vars, name]);
+                // }
+                // if (name == 'new Date(article.createdAt.split("T")[0]).getDate()') cl(["laaa", vars, name, value]);
+                if (!(value || value == 0)) {
+                    if (name.indexOf(".") == -1 && name.indexOf("[") > -1) {
+                        let _name = name;
+                        var matchesVal = _name.match(/\[[\s\S]*?\]/g);
+                        for (var y = 0; y < matchesVal.length; y++) {
+                            if (
+                                matchesVal[y].indexOf("'") == -1 &&
+                                matchesVal[y].indexOf('"') == -1
+                            )
+                                _name = _name
+                                    .split(matchesVal[y])
+                                    .join("['" + matchesVal[y].slice(1, -1) + "']");
+                        }
+                        var value = this.scopedEval(vars, _name);
+                    }
+                }
+            }
+
+            if (this.isFunction(value)) value = value.call(value);
+
+            // if (name == "patientProfile['Gender']") {
+            // cl(["===========lookup", name, vaz, value]);
+            // }
+
+            // if (name == 'new Date(article.createdAt.split("T")[0]).getDate()') cl(["lookup", name, vaz, value]);
+
+            // if (value || value==0) return value;
+
+            // else {
+            //     value = this.scopedEval(vars, name);
+            // }
+
+            // cl("n: ",name," val: ",value," v: ",vaz)
+        } catch (e) {
+            reportLumenError({ stage: 'lookup', expr: name, error: e });
+            return "";
+        }
+        // if (name == 'new Date(article.createdAt.split("T")[0]).getDate()') cl("halaaaaaa", value);
+        // cl("halaaaaaa", value);
+        return value;
+    }
+
+
+    objectToString = Object.prototype.toString;
+    isArray =
+        Array.isArray ||
+        function isArrayPolyfill(object) {
+            return objectToString.call(object) === "[object Array]";
+        };
+    isFunction(object) {
+        return typeof object === "function";
+    }
+    typeStr(obj) {
+        return this.isArray(obj) ? "array" : typeof obj;
+    }
+    hasProperty(obj, propName) {
+        return obj != null && typeof obj === "object" && propName in obj;
+    }
+
+    createEl(tag, attrs, children, events, doc) {
+        const _el = document.createElement(tag);
+
+        _el.isSub = false;
+        if (attrs.hasOwnProperty('view')) {
+            _el.isSub = true;
+            _el.subPath = attrs['view'];
+            this.view.views.push(_el);
+        }
+
+        _el.events = {};
+        for (const prop in attrs) {
+            if (prop == "view" || prop == ":if" || prop == ":else-if" || prop == ":else" || prop == ":for" || prop == ":for-limit" || prop == ":for-offset" || prop == ":for-if") continue;
+            try {
+                // cl("DD", doc);
+                let val = (doc && doc.ax.hasOwnProperty(prop)) ? "" : attrs[prop];
+                if (prop == "value") {
+                    _el.value = val;
+                } else _el.setAttribute(prop, val);
+            } catch (e) {
+                cl(e);
+            }
+        }
+        for (const prop in events) {
+            try {
+                _el.events[prop] = events[prop];
+            } catch (e) {
+                cl(e);
+            }
+        }
+        if (children.length) _el.append(...children);
+
+        // 2026-09-16: @after-render generalized to fire on MOUNT for every
+        // element, not just :for items / :if sections. Those two already
+        // get their own batch-level hook fired elsewhere (updateLXRs() /
+        // showSectionCX() / hideSectionCX()) — with :items/:visible extra
+        // data a per-element mount fire here can't provide, and firing
+        // both would double-fire for them — so they're explicitly
+        // excluded here via the same directive-attribute check createEl()
+        // already does above. No @before-render equivalent for a generic
+        // mount: there's no prior DOM state to act on before an element
+        // exists for the first time (unlike :for/:if's before-render,
+        // which runs against DOM that's already connected).
+        if (events && events['@after-render'] && !(attrs && (attrs.hasOwnProperty(':for') || attrs.hasOwnProperty(':if') || attrs.hasOwnProperty(':else-if') || attrs.hasOwnProperty(':else')))) {
+            fireRenderHook({ doc: doc }, 'after-render', _el, {});
+        }
+
+        // 2026-09-16: V1's real automatic plugin-init pass, ported
+        // faithfully from bea.js's own renderPlugins()/dtp() (real source:
+        // SBEACDN/s.beacdn.com/beajs/core.js, not reverse-engineered from
+        // minified code) — [sl]/[color]/[time]/[date]/[datetime] elements
+        // become their respective widgets on mount, no explicit script
+        // call needed, matching V1's documented behavior (lumenjs-
+        // spec.md §5.6/§6.7). Built into core directly rather than living
+        // only in the --with-plugins bundle (explicit choice, 2026-09-16)
+        // — autoInitPlugins() itself guards every call on the matching
+        // $.fn.* method actually existing, so a plain (no --with-plugins)
+        // project's dom-shim-based bundle silently no-ops instead of
+        // throwing when it encounters one of these attributes.
+        autoInitPlugins(_el, attrs);
+
+        return _el;
+    }
+
+    // processAttr(n, v, res) {
+    //     if (n == 'scoped') {
+
+    //     } else if (n == 'binds') {
+    //         res.domNode.mxs = v.split(",").map((s) => s.trim());
+    //     } else {
+    //         if (n.substr(0, 1) == "@") {
+    //             res.domNode.setAttribute(n.substr(0,1), v);
+    //         } else res.domNode.setAttribute(n, v);
+    //     }
+    // }
+
+    // getPVsScope(par) {
+    //     let _vz = {};
+
+    //     if (par) {
+    //         cl("VZZZZ", par.view.vars);
+    //         _vz = this.getPVsScope(par.view._pv);
+    //     }
+
+    //     return _vz;
+    // }
+
+    // getScope() {
+    //     let vz = clone(_vt.View.vars) ?? {};
+    //     let _vz = this.getPVsScope(this.view._pv);
+    //     cl("VXXXX", vz, _vz);
+
+    //     return vz;
+    // }
+
+    evalExp(expr, vars) {
+        // let svs = this.getScope();
+        // cl("SVS", svs);
+        // cl("SVS", expr, vars);
+        let rvars = {};
+        try {
+            for (let i = 0; i < vars.length; i++) {
+                // 2026-09-14: same Global-vars fallback as getVal() above —
+                // without it this object always carries an explicit
+                // `name: undefined` for anything index.js declares (since
+                // it's never in _vt.View.vars), and because it's spread
+                // LAST in concatVarsAtLevel()'s merge (highest priority),
+                // that explicit undefined would silently clobber the real
+                // value scopedEval() would otherwise have found in
+                // _vt.Global.vars — breaking :if/:for conditions on any
+                // index.js-declared var, not just mustache text (getVal()).
+                let __name = vars[i];
+                rvars[__name] = _vt.View.vars.hasOwnProperty(__name)
+                    ? _vt.View.vars[__name]
+                    : _vt.Global.vars[__name];
+            }
+        } catch (e) {
+            cl(e);
+        }
+        //If Lookaup
+        // let value = this.lookup(expr, vars);
+        // if (value || value == 0) return false;
+        try {
+            var value = this.scopedEval(rvars, expr);
+            // cl("VV", value);
+            if (value && value != 0) return true;
+        } catch (e) {
+            reportLumenError({ stage: 'condition', expr: expr, error: e });
+            return false;
+        }
+        return false;
+    }
+
+    splitTextWithMustaches(text, mustaches) {
+        // Sort mustaches by start index to process in order
+        mustaches.sort((a, b) => a.start - b.start);
+
+        const elements = [];
+        let currentIndex = 0;
+
+        for (const mustache of mustaches) {
+            // Add static text before mustache if any
+            if (currentIndex < mustache.start) {
+                elements.push({
+                    type: 'static',
+                    content: text.substring(currentIndex, mustache.start)
+                });
+            }
+
+            // Add the mustache
+            elements.push({
+                type: 'mustache',
+                jst: mustache.jst,
+                rvs: mustache.rvs,
+                content: text.substring(mustache.start, mustache.end)
+            });
+
+            // Update current index
+            currentIndex = mustache.end;
+        }
+
+        // Add any remaining static text after the last mustache
+        if (currentIndex < text.length) {
+            elements.push({
+                type: 'static',
+                content: text.substring(currentIndex)
+            });
+        }
+
+        return elements;
+    }
+
+
+    walk(doc, parent) {
+        var par = this;
+        var tx, el;
+        switch (doc.type) {
+            case 'text':
+
+                if (doc.mss.length) {
+
+                    let splitIt = true;
+
+                    if (doc.tag == "textarea") {
+                        splitIt = false;
+                    }
+
+                    if (splitIt) {
+                        let splits = this.splitTextWithMustaches(doc.content, doc.mss);
+                        // cl(splits);
+                        for (let si = 0; si < splits.length; si++) {
+                            const split = splits[si];
+                            if (split.type == 'static') {
+                                let txnd = document.createTextNode(split.content);
+                                if (!parent) par._RealDOM.push(txnd);
+                                (tx ?? (tx = [])).push(txnd);
+                            } else {
+                                let txnd = document.createTextNode("");
+                                for (let ri = 0; ri < split.rvs.length; ri++) {
+                                    const element = split.rvs[ri];
+                                    (this._effects[element] ?? (this._effects[element] = [])).push({
+                                        "type": "text",
+                                        "content": split.content,
+                                        "jst": split.jst,
+                                        "rvs": split.rvs,
+                                        "isSplit": true,
+                                        "nd": txnd,
+                                        "tag": doc.tag
+                                    });
+                                }
+                                if (!parent) par._RealDOM.push(txnd);
+                                (tx ?? (tx = [])).push(txnd);
+                            }
+                        }
+                        return tx;
+                    } else {
+                        tx = document.createTextNode("");
+                        for (let mui = 0; mui < doc.mss.length; mui++) {
+                            const mus = doc.mss[mui];
+
+                            for (let ri = 0; ri < mus.rvs.length; ri++) {
+                                const element = mus.rvs[ri];
+                                (this._effects[element] ?? (this._effects[element] = [])).push({
+                                    "type": "text",
+                                    "content": doc.content,
+                                    "splits": this.splitTextWithMustaches(doc.content, doc.mss),
+                                    "jst": mus.jst,
+                                    "rvs": mus.rvs,
+                                    "isSplit": false,
+                                    "nd": tx,
+                                    "tag": doc.tag
+                                });
+                            }
+                        }
+
+                        if (!parent) par._RealDOM.push(tx);
+                        return tx;
+                    }
+
+
+                } else {
+                    tx = document.createTextNode(doc.content);
+                    if (!parent) par._RealDOM.push(tx);
+                    return tx;
+                }
+                break;
+            case 'sections':
+            case 'section':
+                var _dd = md5(new Date().getTime() / 1000 + "::" + Math.random());
+                tx = document.createTextNode("");
+                var typeN = null;
+                if (doc.attrs.hasOwnProperty(":else")) typeN = "else";
+                else if (doc.attrs.hasOwnProperty(":else-if")) typeN = "else-if";
+                else if (doc.attrs.hasOwnProperty(":if")) typeN = "if";
+                else typeN = 'for';
+
+                if (doc.type == "section") {
+
+                    var chain = [];
+                    if (typeN == "else-if" || typeN == "else") {
+                        try {
+                            let lastInChain = this._CXR.at(-1);
+                            if (lastInChain) {
+                                _dd = lastInChain.key;
+                                chain.push(...lastInChain.chain, lastInChain);
+                            }
+                        } catch (e) {
+
+                        }
+                    }
+
+                    el = par.createEl(doc.name, doc.attrs, [], doc.evs, doc);
+                    tx.node = el;
+
+                    // cl("SECCCCC", doc);
+                    // return;
+                    this._CXR.push({
+                        "type": "section",
+                        "name": typeN,
+                        "content": doc.cond,
+                        "doc": doc,
+                        "key": _dd,
+                        "chain": chain,
+                        "ref": tx
+                    });
+
+                    this.setEffects(doc, el);
+
+                } else if (doc.type == "sections") {
+
+                    tx.key = _dd;
+                    tx.node = null;
+                    tx.nodes = {};
+
+                    let docRaw = doc;
+                    // delete docRaw.attrs[':for'];
+                    // delete docRaw.attrs[':for-limit'];
+                    // delete docRaw.attrs[':for-if'];
+                    // delete docRaw.attrs[':for-offset'];
+                    // docRaw.type = 'tag';
+
+                    // cl("SECCCCCSSS", doc);
+                    // return;
+
+                    this._LXR.push({
+                        "type": "sections",
+                        "name": typeN,
+                        "cond": doc.attrs.hasOwnProperty(":for-if") ? doc.attrs[':for-if'] : null,
+                        "limit": doc.attrs.hasOwnProperty(":for-limit") ? doc.attrs[':for-limit'] : 0,
+                        "offset": doc.attrs.hasOwnProperty(":for-offset") ? doc.attrs[':for-offset'] : 0,
+                        "content": doc.content,
+                        "forX": doc.forX,
+                        "doc": docRaw,
+                        "key": _dd,
+                        "atr": [],
+                        "ref": tx
+                    });
+
+                    // cl(tx, doc);
+                }
+
+
+                if (!parent) par._RealDOM.push(tx);
+                return tx;
+                break;
+            case 'tag':
+                var _dd = md5(new Date().getTime() / 1000 + "::" + Math.random());
+
+                // cl("DOC", doc);
+
+                if (doc.name.toLowerCase() == "settings") {
+                    if (par.view.type == "main") {
+                        var defaultSettings = {
+                            layout: "default",
+                            requireAuth: false,
+                        };
+                        try {
+                            let settingsC = doc.children[0].content;
+                            let settings = {};
+                            eval("settings = " + settingsC + ";");
+                            if (settings) {
+                                if (settings.layout == null) settings.layout = "default";
+                                if (settings.requireAuth == null) settings.requireAuth = false;
+                                par.view.settings = settings;
+                            } else {
+                                par.view.settings = defaultSettings;
+                            }
+
+                        } catch (e) {
+                            setError(e, "Error in your settings tag inside the '" + par.view.name.toLowerCase() + "' main view!");
+                            par.view.settings = defaultSettings;
+                        }
+                    }
+                } else if (doc.name.toLowerCase() == "script" || doc.name.toLowerCase() == "js") {
+                    let child = doc.children[0];
+                    let js = child.content;
+                    let jst = child.jst;
+                    let isScoped = false;
+                    if (doc.attrs.hasOwnProperty('scoped')) {
+                        delete doc.attrs['scoped'];
+                        isScoped = true;
+                    }
+                    el = par.createEl("script", doc.attrs, [], doc.evs, doc);
+                    el._sc = isScoped;
+                    el._dd = _dd;
+                    // el._js = js;
+                    el._jst = jst;
+                    // cl(child);
+                    // _jswacrk.trigger('msg', {
+                    //     "code": js,
+                    //     "type": par.view.type,
+                    //     "key": _dd
+                    // });
+                    // _jsuid[_dd] = el;
+                    (par._jj[_dd] ?? (par._jj[_dd] = [])).push({
+                        "nd": el,
+                    });
+
+                } else if (doc.name.toLowerCase() == "style") {
+                    let css = doc.children[0].content;
+                    let isScoped = false;
+
+                    el = par.createEl("style", {}, [], doc.evs, doc);
+
+                    if (doc.attrs.hasOwnProperty('scoped')) {
+                        if (!parent) {
+                            if (par.view._dd) _dd = par.view._dd;
+                            else {
+                                par.view._dd = _dd;
+                                if (par.view.type == "main") $('[body]')[0].setAttribute('vuid', _dd);
+                            }
+                        } else {
+                            if (parent._dd) _dd = parent._dd;
+                            else {
+                                parent._dd = _dd;
+                                parent.setAttribute('vuid', _dd);
+                            }
+                        }
+                        delete doc.attrs['scoped'];
+                        isScoped = true;
+                        el._sc = isScoped;
+                        el._dd = _dd;
+                        el._css = css;
+                        (par._cc[_dd] ?? (par._cc[_dd] = [])).push({
+                            "nd": el,
+                            "_css": css
+                        });
+                    } else {
+                        el._sc = isScoped;
+                        el._dd = _dd;
+                        el.textContent = css;
+                    }
+
+
+                    for (const prop in doc.attrs) {
+                        try {
+                            _el.setAttribute(prop, doc.attrs[prop]);
+                        } catch (e) {
+                            cl(e);
+                        }
+                    }
+                } else if (doc.name.toLowerCase() == "icon") {
+                    let child = par.createEl("span", {
+                        "class": "iconify",
+                        "data-icon": doc?.icon ?? "mdi:home"
+                    }, [], {}, null);
+
+                    el = par.createEl("span", doc.attrs, [child], doc.evs, doc);
+
+                } else if (doc.name.toLowerCase() == "slot") {
+                    // Layout slot content (2026-09-15) — a view wraps
+                    // content meant for a named layout region (anything
+                    // other than the default `[body]` target) in
+                    // <slot name="...">...</slot>. Collected onto
+                    // par.view._slots[name] (an array of real, walked DOM
+                    // nodes) instead of being pushed into _RealDOM —
+                    // renderView() injects each populated slot into its
+                    // matching `[slot="name"]` layout element, after the
+                    // default content. Same non-participating-in-_RealDOM
+                    // shape as the `settings` branch above (no `el` gets
+                    // set here either) — but slot content needs to be
+                    // walked/rendered, unlike settings' raw config text, so
+                    // this uses a throwaway wrapper purely as a real DOM
+                    // parent for that walk; it's never attached anywhere.
+                    let slotName = doc.attrs && doc.attrs.name;
+                    if (slotName) {
+                        let tempWrapper = document.createElement('div');
+                        let childs = [];
+                        for (let i = 0; i < doc.children.length; i++) {
+                            const dc = doc.children[i];
+                            let chils = par.walk(dc, tempWrapper);
+                            if (chils) {
+                                if (Array.isArray(chils)) {
+                                    if (chils.length) childs = [...childs, ...chils];
+                                } else {
+                                    childs.push(chils);
+                                }
+                            }
+                        }
+                        (par.view._slots ?? (par.view._slots = {}))[slotName] = childs;
+                    }
+                } else {
+                    el = par.createEl(doc.name, doc.attrs, [], doc.evs, doc);
+
+                    if (!doc.isV && !el.isSub) {
+                        let childs = [];
+                        for (let i = 0; i < doc.children.length; i++) {
+                            const dc = doc.children[i];
+                            let chils = par.walk(dc, el);
+                            if (chils) {
+                                if (Array.isArray(chils)) {
+                                    if (chils.length) childs = [...childs, ...chils];
+                                } else {
+                                    childs.push(chils);
+                                }
+                            }
+                        }
+                        childs.length ? el.append(...childs) : null;
+                    }
+                }
+
+                this.setEffects(doc, el);
+
+                if (el) {
+                    if (!parent) par._RealDOM.push(el);
+                }
+                return el;
+
+                break;
+            case 'comment':
+
+                break;
+            default:
+                break;
+        }
+    }
+
+    setEffects(doc, el) {
+        let rvs = [];
+        if (Object.keys(doc.ax).length) {
+            for (const attrName in doc.ax) {
+                if (Object.hasOwnProperty.call(doc.ax, attrName)) {
+                    const attrMustaches = doc.ax[attrName];
+                    for (let i = 0; i < attrMustaches.length; i++) {
+                        const mus = attrMustaches[i];
+                        for (let ri = 0; ri < mus.rvs.length; ri++) {
+                            const element = mus.rvs[ri];
+                            rvs.push(element);
+                            (this._effects[element] ?? (this._effects[element] = [])).push({
+                                "type": "attr",
+                                "name": attrName,
+                                "content": doc.attrs[attrName],
+                                "splits": this.splitTextWithMustaches(doc.attrs[attrName], doc.ax[attrName]),
+                                "jst": mus.jst,
+                                "rvs": mus.rvs,
+                                "nd": el
+                            });
+                        }
+                    }
+                }
+            }
+        }
+
+        if (Object.keys(doc.ex).length) {
+            for (const ky in doc.ex) {
+                if (Object.hasOwnProperty.call(doc.ex, ky)) {
+                    const mss = doc.ex[ky];
+                    for (let i = 0; i < mss.length; i++) {
+                        const mus = mss[i];
+                        for (let ri = 0; ri < mus.rvs.length; ri++) {
+                            const element = mus.rvs[ri];
+                            rvs.push(element);
+                            (this._effects[element] ?? (this._effects[element] = [])).push({
+                                "type": "event",
+                                "name": ky,
+                                "content": doc.evs[ky],
+                                "splits": this.splitTextWithMustaches(doc.evs[ky], doc.ex[ky]),
+                                "jst": mus.jst,
+                                "rvs": mus.rvs,
+                                "nd": el
+                            });
+                        }
+                    }
+                }
+            }
+        }
+
+        return rvs.filter((value, index, self) => {
+            return self.indexOf(value) === index;
+        });
+    }
+
+    async createSection(cx, vx, isObj, forX) {
+        var keyed = cx.key + '_' + vx.index;
+        // cl("DD", cx, vx, keyed);
+        var tx = document.createTextNode("");
+        var typeN = null;
+        if (cx.doc.attrs.hasOwnProperty(":else")) typeN = "else";
+        else if (cx.doc.attrs.hasOwnProperty(":else-if")) typeN = "else-if";
+        else if (cx.doc.attrs.hasOwnProperty(":if")) typeN = "if";
+        else typeN = 'for';
+
+        // cl("CREATE", cx.doc.name, cx.doc.attrs, [], cx.doc.evs, cx.doc);
+
+        let el = this.createEl(cx.doc.name, cx.doc.attrs, [], cx.doc.evs, cx.doc);
+        tx.node = el;
+        tx.key = cx.key;
+        tx.keyed = keyed;
+        tx.isObj = isObj;
+        tx.forX = forX;
+        tx.vx = vx;
+
+        // cl("RENDERSECTION", tx, cx.doc, this, cx.key);
+
+        // this._CXR.push({
+        //     "type": "section",
+        //     "name": typeN,
+        //     "value": doc.cond,
+        //     "doc": doc,
+        //     "key": _dd,
+        //     "chain": chain,
+        //     "ref": tx
+        // });
+
+
+        let scsc = await renderSection(tx, cx.doc, this, cx.key);
+        // cl(23);
+        // cl(scsc);
+        scsc._re = scsc;
+
+
+
+        // let rvs = scsc._re.setEffects(cx.doc, el);
+        // // scsc._re.rvs = _vt.View.vars;
+        // // scsc._re.reactiveVariables = rvs;
+
+        // scsc._re.renderAll('sections');
+
+        cx.ref.nodes[keyed] = tx;
+
+
+        return tx;
+    }
+
+
+    attrString(attrs) {
+        var buff = [];
+        for (var key in attrs) {
+            // if(key != "@click") 
+            buff.push(key + '="' + attrs[key] + '"');
+        }
+        if (!buff.length) return '';
+        return ' ' + buff.join(' ');
+    }
+    _stringify(buff, doc) {
+        var par = this;
+        switch (doc.type) {
+            case 'text':
+                return buff + doc.content;
+            case 'tag':
+                buff += '<' + doc.name + (doc.attrs ? par.attrString(doc.attrs) : '') + (doc.isV ? '/>' : '>');
+                if (doc.isV) return buff;
+                for (let i = 0; i < doc.children.length; i++) {
+                    const dc = doc.children[i];
+                    buff = buff + (par._stringify('', dc));
+                }
+                return buff + '</' + doc.name + '>';
+            case 'comment':
+                // buff += '<!--' + doc.comment + '-->';
+                return buff;
+            default:
+                return '';
+        }
+    }
+    stringify(doc) {
+        var par = this;
+        return doc.reduce(function (token, rootEl) {
+            return token + par._stringify('', rootEl);
+        }, '');
+    };
+}
+
+
+async function renderHST(hst, n, type = 'main', tx, _pv = null) {
+
+    var reactiveVariables = hst.reactiveVars;
+    hst = hst.hst;
+
+    let _re = new _lm(new _v({
+        "name": n,
+        "type": type,
+        "hst": hst,
+        "vars": tx?.vx,
+        "rvs": reactiveVariables,
+        "_pv": _pv
+    }));
+
+    if (Object.keys(_re._cc).length) {
+
+        // let cssObjs = {};
+        // for (const ky in _re._cc) {
+        //     if (Object.hasOwnProperty.call(_re._cc, ky)) {
+        //         const csses = _re._cc[ky];
+        //         for (let inde = 0; inde < csses.length; inde++) {
+        //             const css = csses[inde];
+        //             let myKey = ky + "_::" + inde;
+        //             cssObjs[myKey] = css._css;
+        //         }
+        //     }
+        // }
+
+
+
+
+        for (const ky in _re._cc) {
+            if (Object.hasOwnProperty.call(_re._cc, ky)) {
+                const csses = _re._cc[ky];
+                for (let inde = 0; inde < csses.length; inde++) {
+                    let prom = new defer();
+                    const css = csses[inde];
+                    _csswrk.trigger('css-ready', {
+                        "csses": [css._css],
+                        "pre": "[vuid='" + ky + "']",
+                        "key": ky
+                    });
+                    _vuid[ky] = prom;
+                    let _csses = await prom;
+                    css.nd.textContent = _csses[0];
+
+                    // _jsuid[_dd] = el;
+                    // prom
+                }
+            }
+        }
+
+
+
+        // let prom = new defer();
+        // var _dd = md5(new Date().getTime() / 1000 + "::" + Math.random());
+        // _csswrk.trigger('css-ready', {
+        //     "csses": cssObjs,
+        //     "key": _dd,
+        //     "pre": _dd
+        // });
+        // _vuid[_dd] = prom;
+        // let _csses = await prom;
+
+        // cl(_csses);
+
+        // for (const ky in _re._cc) {
+        //     if (Object.hasOwnProperty.call(_re._cc, ky)) {
+        //         const csses = _re._cc[ky];
+        //         for (let inde = 0; inde < csses.length; inde++) {
+        //             const css = csses[inde];
+        //             let myKey = ky + "_::" + inde;
+        //             css.nd.textContent = _csses[myKey];
+        //         }
+        //     }
+        // }
+
+    }
+
+    if (Object.keys(_re._jj).length) {
+        for (const ky in _re._jj) {
+            if (Object.hasOwnProperty.call(_re._jj, ky)) {
+                const jses = _re._jj[ky];
+                for (let inde = 0; inde < jses.length; inde++) {
+                    const nd = jses[inde].nd;
+                    let code = getWatcher(nd._jst, _re.view, reactiveVariables).code;
+                    code = `try { ` + code + ` } catch (e) { reportLumenError({ stage: 'script', error: e }); }`;
+                    // sourceURL: DevTools shows this <script>'s errors against
+                    // "<viewname>.view" instead of an anonymous VM context.
+                    // 2026-09-14, real bug found testing a real project
+                    // end-to-end: this used to be appended BEFORE the
+                    // try/catch wrap above, landing the comment — and
+                    // everything after it on the same line, including the
+                    // wrap's own closing brace and catch clause — inside
+                    // the try block. A `//` comment eats the rest of its
+                    // line, so that silently commented out the catch
+                    // entirely and left an unterminated `try`, throwing
+                    // "Unexpected end of input" the moment any real
+                    // <script> block actually ran (about.view's real
+                    // script on roxyon.com, in this case). Must come after
+                    // the wrap, on its own trailing line.
+                    code = code + `\n//# sourceURL=` + (_re.view?.name || 'view') + `.view.generated.js`;
+                    nd.textContent = code;
+                }
+            }
+        }
+    }
+
+    return _re;
+}
+
+// @before-render / @after-render (2026-09-14) — a developer-facing
+// lifecycle hook fired around a :for loop's diff-and-patch pass
+// (updateLXRs) or a :if/:else-if/:else section's show/hide transition
+// (updateCXRs' showSectionCX/hideSectionCX), letting a DOM-owning plugin
+// (a slider, for instance) safely tear down before its content is
+// replaced and re-initialize once it's settled — instead of silently
+// breaking the next time the underlying data or condition changes.
+// Reuses lstnrs.js's own evalEvAttr() — the same handler-resolution logic
+// every other @-attribute already goes through (@click, @sl-select, ...:
+// a plain function name calls window[name](ev, el, ...), anything else is
+// eval'd as an inline expression) — rather than inventing a second one;
+// the only new part is WHEN this gets called. Errors inside the handler
+// itself are already swallowed by evalEvAttr — matches the established,
+// silent-on-error precedent every other @-attribute handler already has;
+// not changed here to keep this hook's error behavior consistent with them.
+async function fireRenderHook(cx, n, containerEl, extra) {
+    if (!containerEl) return;
+    let attrKey = '@' + n;
+    // The parser lifts @-prefixed attributes into `doc.evs` (its events
+    // map) at compile time, same as @click/@sl-select/etc — NOT into
+    // `doc.attrs` alongside plain attributes like :for/:if. Verified
+    // against real parser output (fcs.js's getAllFiles), not assumed.
+    if (!cx.doc || !cx.doc.evs || !cx.doc.evs.hasOwnProperty(attrKey)) return;
+    let attrVal = cx.doc.evs[attrKey];
+    if (!attrVal) return;
+    let ev = Object.assign({ cType: n }, extra || {});
+    let result = evalEvAttr(attrVal, ev, $(containerEl), n);
+    if (result && typeof result.then === 'function') {
+        try { await result; } catch (e) { }
+    }
+}
+
+// 2026-09-16: V1's real automatic plugin-init pass — [sl] (Select2),
+// [color] (bootstrap-colorpicker), [time]/[date]/[datetime]
+// (bootstrap-datetimepicker via dtp()) — ported faithfully from bea.js's
+// own real, un-minified renderPlugins()/dtp() source
+// (SBEACDN/s.beacdn.com/beajs/core.js:2846/3834, confirmed against the
+// real V1 build root this session already located, not reverse-engineered
+// from minified code). Called from createEl() on every element's mount.
+// Deliberately built into packages/core's own engine rather than kept
+// inside the --with-plugins bundle only — every call below is guarded on
+// the matching $.fn.* method actually existing, so a plain project (no
+// --with-plugins, dom-shim-based, none of these libraries loaded) safely
+// no-ops instead of throwing when a view happens to use one of these
+// attributes.
+function autoInitPlugins(el, attrs) {
+    if (!attrs) return;
+    try {
+        if (attrs.hasOwnProperty('sl') && typeof $.fn.select2 === 'function') {
+            initSl($(el));
+        }
+        if (attrs.hasOwnProperty('color') && typeof $.fn.colorpicker === 'function') {
+            $(el).removeAttr('color').colorpicker({ format: 'rgba' });
+        }
+        if (typeof $.fn.datetimepicker === 'function') {
+            if (attrs.hasOwnProperty('time')) dtp($(el), 'time');
+            if (attrs.hasOwnProperty('date')) dtp($(el), 'date');
+            if (attrs.hasOwnProperty('datetime')) dtp($(el), 'datetime');
+        }
+    } catch (e) { cl(e); }
+}
+
+// Real V1 source, ported as-is (SBEACDN core.js:3404-3518) — the `sl-*`
+// attribute family is documented in lumenjs-spec.md §6.7. `:not(.select2-
+// hidden-accessible)`-equivalent guard kept even though this only ever
+// runs once per element (on mount, never re-checked) — matches V1's own
+// idempotency guard exactly, cheap insurance if this is ever called from
+// anywhere else in the future.
+function initSl(t) {
+    if (t.hasClass('select2-hidden-accessible')) return;
+    try {
+        var plchldr = t.attr("placeholder") ? t.attr("placeholder") : "";
+        var dir = $("body").hasClass("rtl") ? "rtl" : "ltr";
+        var nr = t.attr("sl-nrmsg") ? t.attr("sl-nrmsg") : "No results found";
+        var minResultsForSearch = t.attr("sl-mins") ? t.attr("sl-mins") : 10;
+        var allowNewTags = t.attr("sl-ntgs") ? true : false;
+        var dropdownParent = t.attr("sl-prt") ? t.attr("sl-prt") : "body";
+        if (dropdownParent == "self") dropdownParent = t.parent();
+        else dropdownParent = $(dropdownParent);
+
+        var query = t.attr("sl-query") ? t.attr("sl-query") : null;
+        var uniquer = Date.now();
+
+        if (typeof window[query] === "function") {
+            t.select2.amd.define(
+                "adapt_" + uniquer,
+                ["select2/data/array", "select2/utils"],
+                function (ArrayAdapter, Utils) {
+                    function CustomDataAdapter($element, options) {
+                        CustomDataAdapter.__super__.constructor.call(this, $element, options);
+                    }
+                    Utils.Extend(CustomDataAdapter, ArrayAdapter);
+                    CustomDataAdapter.prototype.query = function (params, callback) {
+                        clearTimeout(_dbcrs[uniquer]);
+                        let _t = t;
+                        _dbcrs[uniquer] = setTimeout(function () {
+                            window[query](params, callback, _t);
+                        }, !_dbcrs.hasOwnProperty(uniquer) ? 0 : _dbcrsTime);
+                    };
+                    return CustomDataAdapter;
+                }
+            );
+
+            t.select2({
+                dropdownParent: dropdownParent,
+                minimumResultsForSearch: minResultsForSearch,
+                placeholder: plchldr,
+                dir: dir,
+                tags: allowNewTags,
+                allowClear: true,
+                language: { noResults: function () { return nr; } },
+                ...(t.select2.amd.require("adapt_" + uniquer)
+                    ? { ajax: {}, dataAdapter: t.select2.amd.require("adapt_" + uniquer) }
+                    : {}),
+            });
+        } else {
+            t.select2({
+                dropdownParent: dropdownParent,
+                minimumResultsForSearch: minResultsForSearch,
+                placeholder: plchldr,
+                dir: dir,
+                tags: allowNewTags,
+                allowClear: true,
+                language: { noResults: function () { return nr; } },
+            });
+        }
+
+        if (t.attr("sl-nosrch"))
+            t.on("select2:opening select2:closing", function (event) {
+                $(this).parent().find(".select2-search__field").prop("disabled", true);
+            });
+        if (t.attr("sl-class")) {
+            t.on("select2:opening", function (event) { dropdownParent.addClass(t.attr("sl-class")); });
+            t.on("select2:closing", function (event) { dropdownParent.removeClass(t.attr("sl-class")); });
+        }
+
+        if (t.attr("sl-id") || t.attr("sl-text")) {
+            let text = t.attr("sl-text");
+            let id = t.attr("sl-id");
+            if (!text) text = id;
+            if (!id) id = text;
+            let newOption = new Option(text, id, true, true);
+            t.append(newOption).trigger('select');
+        } else {
+            t.select2("val", "");
+        }
+
+        if (t.attr("sl-value")) t.val(t.attr("sl-value")).trigger('change');
+    } catch (e) { cl(e); }
+}
+var _dbcrs = {};
+var _dbcrsTime = 250;
+
+// Real V1 source, ported as-is (SBEACDN core.js:3834-3891) — bootstrap-
+// datetimepicker option builder + optional start/end date-linking. Not
+// documented in lumenjs-spec.md (see PROVENANCE.md's --with-plugins
+// section); this exact option shape was confirmed directly against V1's
+// real source once it was located this session, not reverse-engineered.
+function dtp(el, t) {
+    el.removeAttr(t);
+    let opts = {
+        format: t == "date" ? "yyyy-mm-dd" : t == "time" ? "hh:ii" : "yyyy-mm-dd hh:ii",
+        weekStart: el.attr("date-week-start") ?? 1,
+        startView: t == "time" ? 1 : (el.attr("startview") ? el.attr("startview") : 2),
+        minView: el.attr("minview") ? el.attr("minview") : t == "time" ? 0 : t == "datetime" ? 0 : 2,
+        maxView: el.attr("maxview") ? el.attr("maxview") : t == "time" ? 1 : 4,
+        todayBtn: t == "time" ? 0 : el.attr("date-today") == "false" ? 0 : 1,
+        todayHighlight: t == "time" ? 0 : el.attr("date-today") == "false" ? 0 : 1,
+        language: el.attr("date-lang") ?? "en",
+        minuteStep: el.attr("date-minute-step") ?? 5,
+        pickerPosition: el.attr("date-position") ?? "top-right",
+        autoclose: 1,
+        showMeridian: false,
+    };
+    if (el.attr("date-start")) opts["startDate"] = el.attr("date-start");
+    if (el.attr("date-end")) opts["endDate"] = el.attr("date-end");
+    if (el.attr("date-value")) opts["date"] = el.attr("date-value");
+
+    el.datetimepicker(opts);
+
+    if (t == "time") {
+        el.on("show", function (ev) {
+            $(".table-condensed > thead, .table-condensed > thead > tr > th, .table-condensed > thead > tr > th > i")
+                .attr("style", "visibility: hidden; font-size:0px !important; overflow: hidden; height: 0px;");
+        }).on("hide", function (ev) {
+            $(".table-condensed > thead, .table-condensed > thead > tr > th, .table-condensed > thead > tr > th > i")
+                .attr("style", "visibility: visible;");
+        });
+    }
+    if (el.attr("date-link-start")) {
+        el.on("change", function (e) {
+            let dp1 = el.data("datetimepicker");
+            let dp2 = $(el.attr("date-link-start")).data("datetimepicker");
+            dp2.setStartDate(dp1.getFormattedDate());
+            if (dp2.getFormattedDate() < dp1.getFormattedDate() || dp2.getFormattedDate() == "")
+                $(el.attr("date-link-start")).val(dp1.getFormattedDate());
+        });
+    } else if (el.attr("date-link-end")) {
+        el.on("change", function (e) {
+            let dp1 = $(el.attr("date-link-end")).data("datetimepicker");
+            let dp2 = el.data("datetimepicker");
+            dp1.setEndDate(dp2.getFormattedDate());
+        });
+        opts["useCurrent"] = false;
+    }
+}
+
+async function renderSection(tx, doc, par, k, sectionsData) {
+    if (tx.node.isConnected) {
+        if (k) {
+            tx._re.update(k);
+        }
+        return tx._re;
+    }
+
+
+    var hst = doc.children;
+
+    let _re = await renderHST({ hst, mxes: [] }, tx.key, 'section', tx, par);
+    // if(par) {
+    //     _re.reactiveVariables = par.reactiveVariables;
+    // }
+    tx._re = _re;
+
+    // if (doc.type == "sections") {
+
+    //     return _re;
+    // }
+    // cl(tx.key);
+    // cl(par);
+    // cl(hst);
+    // cl(tx);
+    // cl(doc);
+    // cl(_re);
+
+    // cl("section", _re, par);
+
+    if (tx.node) {
+        tx.replaceWith(tx.node);
+        tx.node.innerHTML = "";
+        tx.node.append(..._re._RealDOM);
+
+        _re.setEffects(doc, tx.node);
+
+        _re.renderAll('section');
+    }
+    return _re;
+}
+
+async function renderView(n, isSub, d, type = 'views') {
+    let filePath = "src/views/" + n + ".view"
+    if (type == 'layouts') filePath = "src/layouts/" + n + ".layout";
+
+    cl(arguments);
+    let fileKey = btoa(filePath);
+    if (!isSub) {
+        View.props = d ?? {};
+        var _queryParams = window.location.href.split("?");
+        var nn = _queryParams.shift();
+        View.params = paraToObj(_queryParams) ?? {};
+    }
+    n = prepareNode(n);
+    var _queryParams = n.split("?");
+    n = _queryParams.shift();
+
+    // 2026-09-15, real bug found implementing HST versioning: `_vcD` is
+    // only ever assigned by ws.js's syncViewFiles() (dev-only, gated on
+    // `!_beaTn`) — production never runs that, so `_vcD` itself stays
+    // undefined forever in a real prod build, even though the SAME data
+    // (views/layouts) is already sitting in the embedded `_vcData` global
+    // (baked directly into the bundle at build time — see fcs.js's `vt`).
+    // Resolved fresh on every call, not cached at module-load time: fcs.js
+    // hands `vt` (which declares `_vcData`) to a remote endpoint that
+    // weaves it into the final bundle at a position this code can't see or
+    // control, so there's no reliable "by now it's definitely defined"
+    // point earlier than an actual function call like this one — by the
+    // time any event-driven code (this function) runs, all synchronous
+    // top-level script content, wherever the remote endpoint placed it,
+    // has already executed.
+    let _payload = _vcD || (typeof _vcData !== 'undefined' ? _vcData : undefined);
+
+    // HST wire-format version check (2026-09-15) — see fcs.js's own
+    // HST_FORMAT_VERSION comment for the full rationale. Checked once per
+    // payload object (not once per call) via a property stamped directly
+    // onto it, so a hot-reloaded payload during dev gets re-checked too.
+    if (_payload && !_payload.__hstVersionChecked) {
+        _payload.__hstVersionChecked = true;
+        if (_payload.hstFormatVersion !== undefined && _payload.hstFormatVersion !== EXPECTED_HST_FORMAT_VERSION) {
+            reportLumenError({
+                stage: 'hst-version-mismatch',
+                error: new Error('This project was compiled for HST format v' + _payload.hstFormatVersion + ', but this LumenJS runtime expects v' + EXPECTED_HST_FORMAT_VERSION + '. @lmjs/cli and @lmjs/core are out of sync — reinstall/upgrade both together.'),
+            });
+            return;
+        }
+    }
+
+    if ((_payload && _payload[type].hasOwnProperty(fileKey)) /*&& _jswacrk.isStarted()*/ && _csswrk.isStarted()) {
+        if (isSub) cl("Rendering", n, fileKey);
+        var hst = _payload[type][fileKey];
+        // var mxes = hst.mxes;
+        // hst = hst.hst;
+        // cl("HHHSSSTTT", hst);
+        // return;
+
+        if (isSub) {
+            let els = [];
+            for (let i = 0; i < _vt.View.views.length; i++) {
+                let _el = _vt.View.views[i];
+                if (_el.__isProxy) _el = _el.target;
+                if (_el.subPath == n) els.push(_el);
+            }
+            if (els.length) {
+                // cl(els);
+                for (let i = 0; i < els.length; i++) {
+                    let _re = await renderHST(hst, n, 'sub');
+                    const el = els[i];
+                    el.innerHTML = "";
+                    // cl(el);
+                    el.append(..._re._RealDOM);
+                    _re.renderAll();
+                }
+                // _re._RealDOM.forEach(_el => el[0].appendChild(_el)) 
+                // cl(_re);
+            }
+        } else {
+            if (type == 'layouts') {
+                let appSelector = appSettings.App ?? "[app]";
+                var appContainer = $(appSelector);
+                if (appContainer.length) {
+                    let _rel = await renderHST(hst, n, 'layout');
+                    appContainer.data('layout', n).html(_rel._RealDOM);
+                    _rel.renderAll();
+                    goToNode();
+                }
+            } else {
+                let _re = await renderHST(hst, n, 'main');
+                // cl("RRR", _re);
+                let layout = _re.view.settings.layout;
+
+                let filePathL = "src/layouts/" + layout + ".layout";
+                let fileKeyL = btoa(filePathL);
+                let hstL = _payload['layouts'][fileKeyL];
+                // cl(_rel);
+
+
+                let appSelector = appSettings.App ?? "[app]";
+                var appContainer = $(appSelector);
+                if (appContainer.length) {
+                    let currentLayout = $(appSelector).data('layout');
+                    if (currentLayout != layout) {
+                        let _rel = await renderHST(hstL, layout, 'layout');
+                        appContainer.data('layout', layout).html(_rel._RealDOM);
+                        _rel.renderAll();
+                    } else {
+                        // cl("Same Layout");
+                    }
+                } else {
+                    $("body").prepend("<div " + (appSelector) + "></div>");
+                    let _rel = await renderHST(hstL, layout, 'layout');
+                    appContainer = $(appSelector);
+                    appContainer.data('layout', layout).html(_rel._RealDOM);
+                    _rel.renderAll();
+                }
+
+                // return;
+                // setLayout();
+                $('[body]').html(_re._RealDOM);
+
+                // Layout slots (2026-09-15) — see walk()'s "slot" branch
+                // above for how _re.view._slots gets populated. Injected
+                // the same way [body] is, right above — .html() moves the
+                // already-walked real DOM nodes (doesn't clone them), so
+                // this can run before or after renderAll() without
+                // affecting which node each reactive effect targets;
+                // matching [body]'s own ordering here just for consistency.
+                // A view targeting a slot name no loaded layout declares
+                // is a legitimate, silent no-op (the layout may simply not
+                // have that optional region) — $('[slot="x"]') matching
+                // nothing is real jQuery/dom-shim behavior already, not a
+                // new case to handle.
+                if (_re.view._slots) {
+                    for (const slotName in _re.view._slots) {
+                        if (Object.prototype.hasOwnProperty.call(_re.view._slots, slotName)) {
+                            $('[slot="' + slotName + '"]').html(_re.view._slots[slotName]);
+                        }
+                    }
+                }
+
+                _re.renderAll();
+            }
+        }
+    } else {
+        setTimeout(() => {
+            renderView(n, isSub, d);
+        }, 10);
+    }
+}