@adaas/are-html 0.0.2 → 0.0.4

package/dist/node/engine/AreHTML.engine.mjs

@@ -1,6 +1,6 @@
 import { __decorateClass, __decorateParam } from '../chunk-EQQGB2QZ.mjs';
 import { A_Feature, A_Inject, A_Scope } from '@adaas/a-concept';
-import { A_Frame } from '@adaas/a-frame';
+import { A_Frame } from '@adaas/a-frame/core';
 import { A_ServiceFeatures } from '@adaas/a-utils/a-service';
 import { AreEngine, AreSyntax } from '@adaas/are';
 import { AreHTMLInterpreter } from '@adaas/are-html/interpreter';
@@ -124,8 +124,12 @@ let AreHTMLEngine = class extends AreEngine {
         if (nextOpen !== -1 && nextOpen < nextClose) {
           const charAfter = source[nextOpen + tagName.length + 1];
           if (charAfter === " " || charAfter === ">" || charAfter === "/") {
-            level++;
-            searchIndex = nextOpen + tagName.length + 1;
+            const innerEnd = AreHTMLEngine.findTagClose(source, nextOpen);
+            const isSelfClose = innerEnd !== -1 && source[innerEnd - 1] === "/";
+            if (!isSelfClose) {
+              level++;
+            }
+            searchIndex = innerEnd === -1 ? nextOpen + tagName.length + 1 : innerEnd + 1;
             continue;
           }
         }
@@ -169,10 +173,9 @@ __decorateClass([
   __decorateParam(0, A_Inject(A_Scope))
 ], AreHTMLEngine.prototype, "init", 1);
 AreHTMLEngine = __decorateClass([
-  A_Frame.Component({
-    namespace: "A-ARE",
-    name: "AreHTMLEngine",
-    description: "HTML Rendering Engine for A-Concept Rendering Engine (ARE), responsible for processing and rendering HTML templates within the ARE framework."
+  A_Frame.Define({
+    namespace: "a-are-html",
+    description: "Concrete HTML rendering engine that assembles the full ARE pipeline for web environments. Bootstraps and wires AreHTMLTokenizer, AreHTMLTransformer, AreHTMLCompiler, AreHTMLInterpreter, and AreHTMLLifecycle; mounts root nodes from inline or fetched templates; and drives reactive re-renders via the AreSignals bus."
   })
 ], AreHTMLEngine);
 

package/dist/node/engine/AreHTML.engine.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/engine/AreHTML.engine.ts"],"names":["content","match"],"mappings":"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","file":"AreHTML.engine.mjs","sourcesContent":["import { A_Feature, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame\";\nimport { A_ServiceFeatures } from \"@adaas/a-utils/a-service\";\nimport { AreEngine, AreSyntaxTokenMatch, AreSyntax } from \"@adaas/are\";\nimport { AreHTMLInterpreter } from \"@adaas/are-html/interpreter\";\nimport { AreHTMLEngineContext } from \"./AreHTML.context\";\nimport { AreInterpolation } from \"@adaas/are-html/nodes/AreInterpolation\";\nimport { AreText } from \"@adaas/are-html/nodes/AreText\";\nimport { AreComment } from \"@adaas/are-html/nodes/AreComment\";\nimport { AreComponentNode } from \"@adaas/are-html/nodes/AreComponent\";\nimport { AreHTMLTokenizer } from \"@adaas/are-html/tokenizer\";\nimport { AreRootNode } from \"@adaas/are-html/nodes/AreRoot\";\nimport { AreHTMLLifecycle } from \"@adaas/are-html/lifecycle\";\nimport { AreHTMLTransformer } from \"@adaas/are-html/transformer\";\nimport { AreHTMLCompiler } from \"./AreHTML.compiler\";\n\n\n\n@A_Frame.Component({\n    namespace: 'A-ARE',\n    name: 'AreHTMLEngine',\n    description: 'HTML Rendering Engine for A-Concept Rendering Engine (ARE), responsible for processing and rendering HTML templates within the ARE framework.'\n})\nexport class AreHTMLEngine extends AreEngine {\n\n\n\n    get DefaultSyntax() {\n        return new AreSyntax({\n            trimWhitespace: true,\n            strictMode: true,\n            rules: [\n                // HTML comments\n                {\n                    opening: '<!--',\n                    closing: '-->',\n                    component: AreComment,\n                    priority: 10,\n                    nested: false,\n                    extract: (raw) => ({ content: raw.slice(4, -3).trim() }),\n                },\n                // interpolations\n                {\n                    opening: '{{',\n                    closing: '}}',\n                    component: AreInterpolation,\n                    priority: 9,\n                    nested: false,\n                    extract: (_, match) => ({ key: match.content }),\n                },\n                // are-root — matched before generic elements, produces AreRootNode\n                {\n                    matcher: this.rootElementMatcher.bind(this),\n                    component: AreRootNode,\n                    priority: 5,\n                },\n                // generic HTML elements\n                {\n                    matcher: this.htmlElementMatcher.bind(this),\n                    component: AreComponentNode,\n                    priority: 4,\n                },\n                // plain text fallback\n                {\n                    component: AreText,\n                    priority: 0,\n                },\n            ],\n        })\n    }\n\n\n    /**\n     * Inject AreHTMLSyntax into the container scope before loading\n     * \n     * @param container \n     */\n    @A_Feature.Extend({\n        name: A_ServiceFeatures.onBeforeLoad,\n        before: /.*/\n    })\n    async init(\n        @A_Inject(A_Scope) scope: A_Scope,\n    ) {\n        this.package(scope, {\n            context: new AreHTMLEngineContext({}),\n            syntax: this.DefaultSyntax,\n            compiler: AreHTMLCompiler,\n            interpreter: AreHTMLInterpreter,\n            tokenizer: AreHTMLTokenizer,\n            lifecycle: AreHTMLLifecycle,\n            transformer: AreHTMLTransformer,\n        });\n    }\n\n\n    protected rootElementMatcher(\n        source: string,\n        from: number,\n        to: number,\n        build: (raw: string, content: string, position: number, closing: string) => AreSyntaxTokenMatch\n    ): AreSyntaxTokenMatch | null {\n\n        // const rootTag = this.config.rootTag\n        const rootTag = 'are-root';\n\n        const tagStart = source.indexOf('<', from)\n        if (tagStart === -1 || tagStart >= to) return null\n\n        // only match if the tag name is exactly the configured root tag\n        const tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/)\n        if (!tagNameMatch || tagNameMatch[1].toLowerCase() !== rootTag) return null\n\n        // delegate the actual matching to the shared HTML element logic\n        return this.htmlElementMatcher(source, from, to, build)\n    }\n\n    protected htmlElementMatcher(\n        source: string,\n        from: number,\n        to: number,\n        build: (raw: string, content: string, position: number, closing: string) => AreSyntaxTokenMatch\n    ): AreSyntaxTokenMatch | null {\n        let index = from\n\n        while (index < to) {\n            const tagStart = source.indexOf('<', index)\n            if (tagStart === -1 || tagStart >= to) return null\n\n            // skip comments, closing tags, doctype, processing instructions\n            if (source.startsWith('<!--', tagStart)) { index = tagStart + 1; continue }\n            if (source[tagStart + 1] === '/') { index = tagStart + 1; continue }\n            if (source[tagStart + 1] === '!' || source[tagStart + 1] === '?') { index = tagStart + 1; continue }\n\n            const tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/)\n            if (!tagNameMatch) { index = tagStart + 1; continue }\n\n            const tagName = tagNameMatch[1]\n            const openingTagEnd = AreHTMLEngine.findTagClose(source, tagStart)\n            if (openingTagEnd === -1) return null\n\n            // extract id attribute if present in the opening tag\n            const openingTagStr = source.slice(tagStart, openingTagEnd + 1)\n            const idMatch = openingTagStr.match(/\\bid=[\"']([^\"']*)[\"']/)\n            const id = idMatch ? idMatch[1] : undefined\n\n            // self-closing: <br/> or <input/>\n            if (source[openingTagEnd - 1] === '/') {\n                const raw = source.slice(tagStart, openingTagEnd + 1)\n                const content = source.slice(tagStart + tagNameMatch[0].length, openingTagEnd - 1)\n                const match = build(raw, content, tagStart, '/>')\n                match.payload = { entity: tagName, selfClose: true, id }\n                return match\n            }\n\n            // find matching closing tag respecting nesting\n            const closingTag = `</${tagName}>`\n            let level = 0\n            let searchIndex = openingTagEnd + 1\n            let closingStart = -1\n\n            while (searchIndex < to) {\n                const nextOpen = source.indexOf(`<${tagName}`, searchIndex)\n                const nextClose = source.indexOf(closingTag, searchIndex)\n                if (nextClose === -1) break\n\n                if (nextOpen !== -1 && nextOpen < nextClose) {\n                    const charAfter = source[nextOpen + tagName.length + 1]\n                    if (charAfter === ' ' || charAfter === '>' || charAfter === '/') {\n                        level++\n                        searchIndex = nextOpen + tagName.length + 1\n                        continue\n                    }\n                }\n\n                if (level === 0) { closingStart = nextClose; break }\n                level--\n                searchIndex = nextClose + closingTag.length\n            }\n\n            if (closingStart === -1) return null\n\n            const fullTag = source.slice(tagStart, closingStart + closingTag.length)\n            const content = source.slice(openingTagEnd + 1, closingStart)\n            const match = build(fullTag, content, tagStart, closingTag)\n            match.payload = { entity: tagName, selfClose: false, id }\n            return match\n        }\n        return null\n    }\n\n    /**\n     * Find the index of the closing `>` of an opening tag, skipping over\n     * `>` characters that appear inside quoted attribute values.\n     */\n    private static findTagClose(source: string, from: number): number {\n        let inSingle = false\n        let inDouble = false\n\n        for (let i = from; i < source.length; i++) {\n            const ch = source[i]\n            if (ch === '\"' && !inSingle) inDouble = !inDouble\n            else if (ch === \"'\" && !inDouble) inSingle = !inSingle\n            else if (ch === '>' && !inSingle && !inDouble) return i\n        }\n\n        return -1\n    }\n\n}"]}
+{"version":3,"sources":["../../../src/engine/AreHTML.engine.ts"],"names":["content","match"],"mappings":"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","file":"AreHTML.engine.mjs","sourcesContent":["import { A_Feature, A_Inject, A_Scope } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\"\nimport { A_ServiceFeatures } from \"@adaas/a-utils/a-service\";\nimport { AreEngine, AreSyntaxTokenMatch, AreSyntax } from \"@adaas/are\";\nimport { AreHTMLInterpreter } from \"@adaas/are-html/interpreter\";\nimport { AreHTMLEngineContext } from \"./AreHTML.context\";\nimport { AreInterpolation } from \"@adaas/are-html/nodes/AreInterpolation\";\nimport { AreText } from \"@adaas/are-html/nodes/AreText\";\nimport { AreComment } from \"@adaas/are-html/nodes/AreComment\";\nimport { AreComponentNode } from \"@adaas/are-html/nodes/AreComponent\";\nimport { AreHTMLTokenizer } from \"@adaas/are-html/tokenizer\";\nimport { AreRootNode } from \"@adaas/are-html/nodes/AreRoot\";\nimport { AreHTMLLifecycle } from \"@adaas/are-html/lifecycle\";\nimport { AreHTMLTransformer } from \"@adaas/are-html/transformer\";\nimport { AreHTMLCompiler } from \"./AreHTML.compiler\";\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'Concrete HTML rendering engine that assembles the full ARE pipeline for web environments. Bootstraps and wires AreHTMLTokenizer, AreHTMLTransformer, AreHTMLCompiler, AreHTMLInterpreter, and AreHTMLLifecycle; mounts root nodes from inline or fetched templates; and drives reactive re-renders via the AreSignals bus.'\n})\nexport class AreHTMLEngine extends AreEngine {\n\n\n\n    get DefaultSyntax() {\n        return new AreSyntax({\n            trimWhitespace: true,\n            strictMode: true,\n            rules: [\n                // HTML comments\n                {\n                    opening: '<!--',\n                    closing: '-->',\n                    component: AreComment,\n                    priority: 10,\n                    nested: false,\n                    extract: (raw) => ({ content: raw.slice(4, -3).trim() }),\n                },\n                // interpolations\n                {\n                    opening: '{{',\n                    closing: '}}',\n                    component: AreInterpolation,\n                    priority: 9,\n                    nested: false,\n                    extract: (_, match) => ({ key: match.content }),\n                },\n                // are-root — matched before generic elements, produces AreRootNode\n                {\n                    matcher: this.rootElementMatcher.bind(this),\n                    component: AreRootNode,\n                    priority: 5,\n                },\n                // generic HTML elements\n                {\n                    matcher: this.htmlElementMatcher.bind(this),\n                    component: AreComponentNode,\n                    priority: 4,\n                },\n                // plain text fallback\n                {\n                    component: AreText,\n                    priority: 0,\n                },\n            ],\n        })\n    }\n\n\n    /**\n     * Inject AreHTMLSyntax into the container scope before loading\n     * \n     * @param container \n     */\n    @A_Feature.Extend({\n        name: A_ServiceFeatures.onBeforeLoad,\n        before: /.*/\n    })\n    async init(\n        @A_Inject(A_Scope) scope: A_Scope,\n    ) {\n        this.package(scope, {\n            context: new AreHTMLEngineContext({}),\n            syntax: this.DefaultSyntax,\n            compiler: AreHTMLCompiler,\n            interpreter: AreHTMLInterpreter,\n            tokenizer: AreHTMLTokenizer,\n            lifecycle: AreHTMLLifecycle,\n            transformer: AreHTMLTransformer,\n        });\n    }\n\n\n    protected rootElementMatcher(\n        source: string,\n        from: number,\n        to: number,\n        build: (raw: string, content: string, position: number, closing: string) => AreSyntaxTokenMatch\n    ): AreSyntaxTokenMatch | null {\n\n        // const rootTag = this.config.rootTag\n        const rootTag = 'are-root';\n\n        const tagStart = source.indexOf('<', from)\n        if (tagStart === -1 || tagStart >= to) return null\n\n        // only match if the tag name is exactly the configured root tag\n        const tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/)\n        if (!tagNameMatch || tagNameMatch[1].toLowerCase() !== rootTag) return null\n\n        // delegate the actual matching to the shared HTML element logic\n        return this.htmlElementMatcher(source, from, to, build)\n    }\n\n    protected htmlElementMatcher(\n        source: string,\n        from: number,\n        to: number,\n        build: (raw: string, content: string, position: number, closing: string) => AreSyntaxTokenMatch\n    ): AreSyntaxTokenMatch | null {\n        let index = from\n\n        while (index < to) {\n            const tagStart = source.indexOf('<', index)\n            if (tagStart === -1 || tagStart >= to) return null\n\n            // skip comments, closing tags, doctype, processing instructions\n            if (source.startsWith('<!--', tagStart)) { index = tagStart + 1; continue }\n            if (source[tagStart + 1] === '/') { index = tagStart + 1; continue }\n            if (source[tagStart + 1] === '!' || source[tagStart + 1] === '?') { index = tagStart + 1; continue }\n\n            const tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/)\n            if (!tagNameMatch) { index = tagStart + 1; continue }\n\n            const tagName = tagNameMatch[1]\n            const openingTagEnd = AreHTMLEngine.findTagClose(source, tagStart)\n            if (openingTagEnd === -1) return null\n\n            // extract id attribute if present in the opening tag\n            const openingTagStr = source.slice(tagStart, openingTagEnd + 1)\n            const idMatch = openingTagStr.match(/\\bid=[\"']([^\"']*)[\"']/)\n            const id = idMatch ? idMatch[1] : undefined\n\n            // self-closing: <br/> or <input/>\n            if (source[openingTagEnd - 1] === '/') {\n                const raw = source.slice(tagStart, openingTagEnd + 1)\n                const content = source.slice(tagStart + tagNameMatch[0].length, openingTagEnd - 1)\n                const match = build(raw, content, tagStart, '/>')\n                match.payload = { entity: tagName, selfClose: true, id }\n                return match\n            }\n\n            // find matching closing tag respecting nesting\n            const closingTag = `</${tagName}>`\n            let level = 0\n            let searchIndex = openingTagEnd + 1\n            let closingStart = -1\n\n            while (searchIndex < to) {\n                const nextOpen = source.indexOf(`<${tagName}`, searchIndex)\n                const nextClose = source.indexOf(closingTag, searchIndex)\n                if (nextClose === -1) break\n\n                if (nextOpen !== -1 && nextOpen < nextClose) {\n                    const charAfter = source[nextOpen + tagName.length + 1]\n                    if (charAfter === ' ' || charAfter === '>' || charAfter === '/') {\n                        // Skip self-closing nested occurrences, e.g. <div/> inside <div>...</div>.\n                        const innerEnd = AreHTMLEngine.findTagClose(source, nextOpen)\n                        const isSelfClose = innerEnd !== -1 && source[innerEnd - 1] === '/'\n\n                        if (!isSelfClose) {\n                            level++\n                        }\n                        searchIndex = (innerEnd === -1 ? nextOpen + tagName.length + 1 : innerEnd + 1)\n                        continue\n                    }\n                }\n\n                if (level === 0) { closingStart = nextClose; break }\n                level--\n                searchIndex = nextClose + closingTag.length\n            }\n\n            if (closingStart === -1) return null\n\n            const fullTag = source.slice(tagStart, closingStart + closingTag.length)\n            const content = source.slice(openingTagEnd + 1, closingStart)\n            const match = build(fullTag, content, tagStart, closingTag)\n            match.payload = { entity: tagName, selfClose: false, id }\n            return match\n        }\n        return null\n    }\n\n    /**\n     * Find the index of the closing `>` of an opening tag, skipping over\n     * `>` characters that appear inside quoted attribute values.\n     */\n    private static findTagClose(source: string, from: number): number {\n        let inSingle = false\n        let inDouble = false\n\n        for (let i = from; i < source.length; i++) {\n            const ch = source[i]\n            if (ch === '\"' && !inSingle) inDouble = !inDouble\n            else if (ch === \"'\" && !inDouble) inSingle = !inSingle\n            else if (ch === '>' && !inSingle && !inDouble) return i\n        }\n\n        return -1\n    }\n\n}"]}

package/dist/node/engine/AreHTML.interpreter.js

@@ -1,12 +1,13 @@
 'use strict';
 
 var aConcept = require('@adaas/a-concept');
-var aFrame = require('@adaas/a-frame');
+var core = require('@adaas/a-frame/core');
 var aLogger = require('@adaas/a-utils/a-logger');
 var are = require('@adaas/are');
 var AreHTML_instructions_constants = require('@adaas/are-html/instructions/AreHTML.instructions.constants');
 var AreDirective_context = require('@adaas/are-html/directive/AreDirective.context');
 var AreHTML_context = require('./AreHTML.context');
+var AreHTML_constants = require('./AreHTML.constants');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -42,6 +43,7 @@ exports.AreHTMLInterpreter = class AreHTMLInterpreter extends are.AreInterpreter
           });
         }
         const element = context.container.createElement(tag);
+        element.setAttribute("data-aseid", node.aseid.toString());
         if (mountPoint.nodeType === Node.ELEMENT_NODE) {
           mountPoint.appendChild(element);
         } else {
@@ -83,23 +85,80 @@ exports.AreHTMLInterpreter = class AreHTMLInterpreter extends are.AreInterpreter
       });
     }
     const { name, content, evaluate } = mutation.payload;
-    const value = evaluate ? syntax.evaluate(content, store, {
+    const rawValue = evaluate ? syntax.evaluate(content, store, {
       ...directiveContext?.scope || {}
     }) : content;
-    if (mutation.cache === void 0) {
-      const existingValue = element.getAttribute(name);
-      const result = existingValue ? `${existingValue} ${value}` : value;
-      element.setAttribute(name, result);
-      mutation.cache = value;
+    const el = element;
+    const lowerName = name.toLowerCase();
+    if (AreHTML_constants.isBooleanAttribute(lowerName)) {
+      if (rawValue) {
+        el.setAttribute(lowerName, "");
+        try {
+          el[lowerName] = true;
+        } catch {
+        }
+      } else {
+        el.removeAttribute(lowerName);
+        try {
+          el[lowerName] = false;
+        } catch {
+        }
+      }
+      mutation.cache = rawValue ? "true" : "";
+      return;
+    }
+    if (AreHTML_constants.isIDLFormProperty(el.tagName, name)) {
+      const propName = name === "value" ? "value" : name === "checked" ? "checked" : name === "selected" ? "selected" : name === "indeterminate" ? "indeterminate" : name;
+      try {
+        if (propName === "checked" || propName === "selected" || propName === "indeterminate") {
+          el[propName] = !!rawValue;
+        } else {
+          el[propName] = AreHTML_constants.toDOMString(rawValue);
+        }
+      } catch {
+      }
+      if (propName !== "value") {
+        if (rawValue) el.setAttribute(name, "");
+        else el.removeAttribute(name);
+      } else {
+        el.setAttribute(name, AreHTML_constants.toDOMString(rawValue));
+      }
+      mutation.cache = AreHTML_constants.toDOMString(rawValue);
+      return;
+    }
+    if (lowerName === "class") {
+      const newValue = AreHTML_constants.normalizeClassValue(rawValue);
+      if (mutation.cache === void 0) {
+        const existingValue = el.getAttribute("class");
+        const merged = existingValue ? `${existingValue} ${newValue}`.trim() : newValue;
+        if (merged) el.setAttribute("class", merged);
+        else el.removeAttribute("class");
+      } else {
+        const existingValue = el.getAttribute("class");
+        const existingParts = existingValue ? existingValue.split(/\s+/).filter(Boolean) : [];
+        const oldParts = new Set(mutation.cache.split(/\s+/).filter(Boolean));
+        const newParts = newValue ? newValue.split(/\s+/).filter(Boolean) : [];
+        const merged = [...existingParts.filter((p) => !oldParts.has(p)), ...newParts].join(" ");
+        if (merged) el.setAttribute("class", merged);
+        else el.removeAttribute("class");
+      }
+      mutation.cache = newValue;
+      return;
+    }
+    if (lowerName === "style") {
+      const newValue = AreHTML_constants.normalizeStyleValue(rawValue);
+      if (newValue) el.setAttribute("style", newValue);
+      else el.removeAttribute("style");
+      mutation.cache = newValue;
+      return;
+    }
+    const stringValue = AreHTML_constants.toDOMString(rawValue);
+    if (stringValue === "" && evaluate && (rawValue === false || rawValue === null || rawValue === void 0)) {
+      el.removeAttribute(name);
     } else {
-      const existingValue = element.getAttribute(name);
-      const existingParts = existingValue ? existingValue.split(/\s+/).filter(Boolean) : [];
-      const oldParts = new Set(mutation.cache.split(/\s+/).filter(Boolean));
-      const newParts = value ? value.split(/\s+/).filter(Boolean) : [];
-      const result = [...existingParts.filter((part) => !oldParts.has(part)), ...newParts].join(" ");
-      element.setAttribute(name, result);
-      mutation.cache = value;
+      el.setAttribute(name, stringValue);
     }
+    mutation.cache = stringValue;
   }
   removeAttribute(mutation, context) {
     try {
@@ -121,12 +180,19 @@ exports.AreHTMLInterpreter = class AreHTMLInterpreter extends are.AreInterpreter
         description: `Could not find a DOM element associated with the instruction ASEID "${mutation.parent}". Ensure that the parent instruction is properly rendered and associated with a DOM element before adding event listeners.`
       });
     }
+    const { event: eventName, modifiers } = AreHTML_constants.parseEventName(mutation.payload.name);
+    const listenerOptions = {};
+    if (modifiers.has("capture")) listenerOptions.capture = true;
+    if (modifiers.has("once")) listenerOptions.once = true;
+    if (modifiers.has("passive")) listenerOptions.passive = true;
     const handlers = syntax.extractEmitHandlers(mutation.payload.handler);
+    let liveEvent = null;
     const handlerScope = {};
     for (const handler of handlers) {
       const handlerFn = (...args) => {
         const event = new are.AreEvent(handler);
-        event.set("args", args);
+        const effectiveArgs = args.length === 0 && liveEvent ? [liveEvent] : liveEvent ? [...args, liveEvent] : args;
+        event.set("args", effectiveArgs);
         event.set("element", element);
         event.set("instruction", mutation);
         mutation.owner.emit(event);
@@ -134,34 +200,80 @@ exports.AreHTMLInterpreter = class AreHTMLInterpreter extends are.AreInterpreter
       handlerScope[`$${handler}`] = handlerFn;
     }
     const callback = (e) => {
-      context.startPerformance("Click");
-      const result = syntax.evaluate(mutation.payload.handler, store, {
-        ...handlerScope,
-        ...directiveContext?.scope || {}
-      });
-      if (typeof result === "function") result(e);
+      try {
+        liveEvent = e;
+        if (modifiers.has("self") && e.target !== element) return;
+        if (modifiers.has("stop")) e.stopPropagation();
+        if (modifiers.has("prevent")) e.preventDefault();
+        if (e instanceof KeyboardEvent && modifiers.size > 0) {
+          const key = (e.key || "").toLowerCase();
+          const KEY_ALIASES = {
+            enter: ["enter"],
+            esc: ["escape"],
+            escape: ["escape"],
+            tab: ["tab"],
+            space: [" ", "spacebar"],
+            up: ["arrowup"],
+            down: ["arrowdown"],
+            left: ["arrowleft"],
+            right: ["arrowright"],
+            delete: ["delete", "backspace"]
+          };
+          const keyMods = [...modifiers].filter((m) => m in KEY_ALIASES || m === "ctrl" || m === "alt" || m === "shift" || m === "meta");
+          if (keyMods.length > 0) {
+            const keyMatch = keyMods.some((m) => {
+              if (m === "ctrl") return e.ctrlKey;
+              if (m === "alt") return e.altKey;
+              if (m === "shift") return e.shiftKey;
+              if (m === "meta") return e.metaKey;
+              const aliases = KEY_ALIASES[m];
+              return aliases && aliases.includes(key);
+            });
+            if (!keyMatch) return;
+          }
+        }
+        context.startPerformance("event:" + eventName);
+        const result = syntax.evaluate(mutation.payload.handler, store, {
+          ...handlerScope,
+          $event: e,
+          ...directiveContext?.scope || {}
+        });
+        if (typeof result === "function") result(e);
+        context.endPerformance("event:" + eventName);
+      } catch (err) {
+        logger?.error(err);
+      } finally {
+        liveEvent = null;
+      }
     };
-    if (callback) {
-      element.addEventListener(mutation.payload.name, callback);
-      context.addListener(element, mutation.payload.name, callback);
+    const useOptions = listenerOptions.capture || listenerOptions.once || listenerOptions.passive;
+    if (useOptions) {
+      element.addEventListener(eventName, callback, listenerOptions);
+    } else {
+      element.addEventListener(eventName, callback);
     }
+    mutation.payload._callback = callback;
+    context.addListener(element, mutation.payload.name, callback);
   }
   removeEventListener(mutation, context) {
     const element = context.getElementByInstruction(mutation.parent);
     if (!element) return;
     const { name } = mutation.payload;
-    const listener = context.getListener(element, name);
+    const { event: eventName } = AreHTML_constants.parseEventName(name);
+    const listener = mutation.payload._callback;
     if (listener) {
-      element.removeEventListener(name, listener);
-      context.removeListener(element, name);
+      element.removeEventListener(eventName, listener);
+      context.removeListener(element, name, listener);
+      mutation.payload._callback = void 0;
     }
   }
   addText(declaration, context, store, syntax, directiveContext, logger) {
     const node = declaration.owner.parent;
     const { content, evaluate } = declaration.payload;
-    const value = evaluate ? syntax.evaluate(content, store, {
+    const rawValue = evaluate ? syntax.evaluate(content, store, {
       ...directiveContext?.scope || {}
     }) : content;
+    const value = AreHTML_constants.toDOMString(rawValue);
     if (!node) {
       const textNode = context.container.createTextNode(value);
       context.container.body.appendChild(textNode);
@@ -194,9 +306,10 @@ exports.AreHTMLInterpreter = class AreHTMLInterpreter extends are.AreInterpreter
   addComment(declaration, context, store, syntax, directiveContext, logger) {
     const node = declaration.owner.parent;
     const { content, evaluate } = declaration.payload;
-    const value = evaluate ? syntax.evaluate(content, store, {
+    const rawValue = evaluate ? syntax.evaluate(content, store, {
       ...directiveContext?.scope || {}
     }) : content;
+    const value = AreHTML_constants.toDOMString(rawValue);
     if (!node) {
       const commentNode = context.container.createComment(value);
       context.container.body.appendChild(commentNode);
@@ -228,7 +341,7 @@ exports.AreHTMLInterpreter = class AreHTMLInterpreter extends are.AreInterpreter
   }
 };
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Create an HTML element based on the provided declaration instruction. Handles both root-level mounting and child element creation based on the structural parent hierarchy."
   }),
   are.AreInterpreter.Apply(are.AreInstructionDefaultNames.Default),
@@ -238,7 +351,7 @@ __decorateClass([
   __decorateParam(2, aConcept.A_Inject(aLogger.A_Logger))
 ], exports.AreHTMLInterpreter.prototype, "addElement", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Remove an HTML element that was created by a CreateElement declaration. Cleans up the DOM and the context index."
   }),
   are.AreInterpreter.Revert(are.AreInstructionDefaultNames.Default),
@@ -247,7 +360,7 @@ __decorateClass([
   __decorateParam(1, aConcept.A_Inject(AreHTML_context.AreHTMLEngineContext))
 ], exports.AreHTMLInterpreter.prototype, "removeElement", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Add an attribute to an HTML element based on the provided mutation instruction."
   }),
   are.AreInterpreter.Apply(AreHTML_instructions_constants.AreHTMLInstructions.AddAttribute),
@@ -260,7 +373,7 @@ __decorateClass([
   __decorateParam(5, aConcept.A_Inject(aLogger.A_Logger))
 ], exports.AreHTMLInterpreter.prototype, "addAttribute", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Remove an attribute from an HTML element based on the provided mutation instruction."
   }),
   are.AreInterpreter.Revert(AreHTML_instructions_constants.AreHTMLInstructions.AddAttribute),
@@ -268,7 +381,7 @@ __decorateClass([
   __decorateParam(1, aConcept.A_Inject(AreHTML_context.AreHTMLEngineContext))
 ], exports.AreHTMLInterpreter.prototype, "removeAttribute", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Add an event listener to an HTML element based on the provided mutation instruction."
   }),
   are.AreInterpreter.Apply(AreHTML_instructions_constants.AreHTMLInstructions.AddListener),
@@ -280,7 +393,7 @@ __decorateClass([
   __decorateParam(5, aConcept.A_Inject(aLogger.A_Logger))
 ], exports.AreHTMLInterpreter.prototype, "addEventListener", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Remove an event listener from an HTML element based on the provided mutation instruction."
   }),
   are.AreInterpreter.Revert(AreHTML_instructions_constants.AreHTMLInstructions.AddListener),
@@ -288,7 +401,7 @@ __decorateClass([
   __decorateParam(1, aConcept.A_Inject(AreHTML_context.AreHTMLEngineContext))
 ], exports.AreHTMLInterpreter.prototype, "removeEventListener", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Add text content to an HTML element based on the provided declaration instruction."
   }),
   are.AreInterpreter.Apply(AreHTML_instructions_constants.AreHTMLInstructions.AddText),
@@ -301,7 +414,7 @@ __decorateClass([
   __decorateParam(5, aConcept.A_Inject(aLogger.A_Logger))
 ], exports.AreHTMLInterpreter.prototype, "addText", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Remove text content from an HTML element based on the provided declaration instruction."
   }),
   are.AreInterpreter.Revert(AreHTML_instructions_constants.AreHTMLInstructions.AddText),
@@ -309,7 +422,7 @@ __decorateClass([
   __decorateParam(1, aConcept.A_Inject(AreHTML_context.AreHTMLEngineContext))
 ], exports.AreHTMLInterpreter.prototype, "removeText", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Add a comment node to the DOM based on the provided declaration instruction."
   }),
   are.AreInterpreter.Apply(AreHTML_instructions_constants.AreHTMLInstructions.AddComment),
@@ -322,7 +435,7 @@ __decorateClass([
   __decorateParam(5, aConcept.A_Inject(aLogger.A_Logger))
 ], exports.AreHTMLInterpreter.prototype, "addComment", 1);
 __decorateClass([
-  aFrame.A_Frame.Method({
+  core.A_Frame.Define({
     description: "Remove a comment node from the DOM based on the provided declaration instruction."
   }),
   are.AreInterpreter.Revert(AreHTML_instructions_constants.AreHTMLInstructions.AddComment),
@@ -330,10 +443,9 @@ __decorateClass([
   __decorateParam(1, aConcept.A_Inject(AreHTML_context.AreHTMLEngineContext))
 ], exports.AreHTMLInterpreter.prototype, "removeComment", 1);
 exports.AreHTMLInterpreter = __decorateClass([
-  aFrame.A_Frame.Component({
-    namespace: "A-ARE",
-    name: "AreHTMLInterpreter",
-    description: "AreHTMLInterpreter is a component that serves as a host for rendering AreNodes into HTML. It provides the necessary context and environment for AreNodes to be rendered and interact with the DOM."
+  core.A_Frame.Define({
+    namespace: "a-are-html",
+    description: "DOM interpreter for the HTML rendering pipeline. Extends AreInterpreter to apply and revert each ARE instruction type directly against the browser DOM \u2014 creating and removing elements, setting and removing attributes and event listeners, managing inline styles, and inserting text and comment nodes. Driven by the scene diff computed per render cycle."
   })
 ], exports.AreHTMLInterpreter);
 //# sourceMappingURL=AreHTML.interpreter.js.map