@adaas/are-html 0.0.2

package/dist/browser/index.mjs

@@ -0,0 +1,1782 @@
+import { AreStore, AreScene, AreSyntax, AreCompiler, AreInterpreter, AreInstructionDefaultNames, AreNodeFeatures, AreContext, AreLifecycle, AreSignalsContext, AreAttributeFeatures, Are, AreNode, AreAttribute, AreCompilerError, AreMutation, AreDeclaration, AreSignal, AreInterpreterError, AreTokenizer, AreTransformer, AreEngine, AreRoute as AreRoute$1, AreSignals, AreEvent } from '@adaas/are';
+import { A_Inject, A_Caller, A_Feature, A_Meta, A_Scope, A_Dependency, A_Component, A_Context, A_ComponentMeta, A_FormatterHelper, A_Fragment } from '@adaas/a-concept';
+import { A_Logger } from '@adaas/a-utils/a-logger';
+import { A_Frame } from '@adaas/a-frame';
+import { A_ExecutionContext } from '@adaas/a-utils/a-execution';
+import { A_Route } from '@adaas/a-utils/a-route';
+import { A_ServiceFeatures } from '@adaas/a-utils/a-service';
+import { A_SignalVector } from '@adaas/a-utils/a-signal';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
+var AreHTMLAttribute = class extends AreAttribute {
+  get owner() {
+    return this.scope.issuer();
+  }
+};
+
+// src/attributes/AreBinding.attribute.ts
+var AreBindingAttribute = class extends AreHTMLAttribute {
+  // get value(): string {
+  //     const [firstPart, ...pathPart] = this.content.split('.');
+  //     const primaryObject = this.owner.store.get(firstPart);
+  //     return AreCommonHelper.extractPropertyByPath(primaryObject, pathPart.join('.')) as string;
+  // }
+};
+var AreDirectiveAttribute = class extends AreHTMLAttribute {
+  /**
+   * Returns a custom directive component associated with this attribute, if available.
+   * 
+   * The method uses the attribute's name to resolve the corresponding directive component from the scope. It constructs the expected directive name by converting the attribute name to PascalCase and prefixing it with "AreDirective". If a matching directive component is found in the scope, it is returned; otherwise, the method returns undefined.
+   */
+  get component() {
+    const component = this.scope.resolve(`AreDirective${A_FormatterHelper.toPascalCase(this.name)}`);
+    return component;
+  }
+};
+
+// src/attributes/AreEvent.attribute.ts
+var AreEventAttribute = class extends AreHTMLAttribute {
+};
+
+// src/attributes/AreStatic.attribute.ts
+var AreStaticAttribute = class extends AreHTMLAttribute {
+};
+var AreDirectiveMeta = class extends A_ComponentMeta {
+  constructor() {
+    super(...arguments);
+    this.priority = 0;
+  }
+};
+
+// src/lib/AreDirective/AreDirective.constants.ts
+var AreDirectiveFeatures = {
+  /**
+   * Feature that should transform the tree based on the directive attribute. This method is called during the transformation phase of the ARE component and should perform any necessary transformations on the AreNode tree based on the directive's content and context. This can include tasks such as adding or removing nodes, modifying node properties, or restructuring the tree to ensure that the directive is applied correctly during rendering.
+   */
+  Transform: "_AreDirective_Transform",
+  /**
+   * Feature that should convert a directiveAttribute definition into a set of SceneInstructions to be rendered correctly
+   */
+  Compile: "_AreDirective_Compile",
+  /**
+   * Feature that should update the directiveAttribute based on the changes in the store or other dependencies. 
+   */
+  Update: "_AreDirective_Update"
+};
+
+// src/lib/AreDirective/AreDirective.component.ts
+var AreDirective = class extends A_Component {
+  //==================================================================================
+  //======================== LIFECYCLE DECORATORS ====================================
+  //==================================================================================
+  /**
+   * Allows to define a compilation order for directives, which is necessary when we have multiple directives on the same node and we want to control the order of their compilation and application. The directive with the highest priority will be compiled and applied first, and the directive with the lowest priority will be compiled and applied last. This is important because some directives may depend on the output of other directives, so we need to ensure that they are compiled and applied in the correct order to avoid errors and ensure the expected behavior.
+   * 
+   * @param priority 
+   * @returns 
+   */
+  static Priority(priority) {
+    return function(target) {
+      const meta = A_Context.meta(target);
+      meta.priority = priority;
+      return target;
+    };
+  }
+  /**
+   * Allows to define a custom method for transforming the AreNode tree based on the directive attribute. This method is called during the transformation phase of the ARE component and should perform any necessary transformations on the AreNode tree based on the directive's content and context. This can include tasks such as adding or removing nodes, modifying node properties, or restructuring the tree to ensure that the directive is applied correctly during rendering.
+   */
+  static get Transform() {
+    return (target, propertyKey, descriptor) => {
+      return A_Feature.Extend({
+        name: AreDirectiveFeatures.Transform,
+        scope: [target.constructor]
+      })(target, propertyKey, descriptor);
+    };
+  }
+  /**
+   * Allows to define a custom method for compiling a directive attribute into a set of SceneInstructions. 
+   * Can be used at any component to extend this logic not only for a AreDirective inherited.
+   */
+  static get Compile() {
+    return (target, propertyKey, descriptor) => {
+      return A_Feature.Extend({
+        name: AreDirectiveFeatures.Compile,
+        scope: [target.constructor]
+      })(target, propertyKey, descriptor);
+    };
+  }
+  /**
+   * Allows to define a custom method for updating a directive attribute based on changes in the store or other dependencies.
+   * Can be used at any component to extend this logic not only for a AreDirective inherited.
+   */
+  static get Update() {
+    return (target, propertyKey, descriptor) => {
+      return A_Feature.Extend({
+        name: AreDirectiveFeatures.Update,
+        scope: [target.constructor]
+      })(target, propertyKey, descriptor);
+    };
+  }
+  /**
+   * Default transform method for directives, which can be overridden by specific directive implementations. This method is called during the transformation phase of the ARE component and should perform any necessary transformations on the AreNode tree based on the directive's content and context. This can include tasks such as adding or removing nodes, modifying node properties, or restructuring the tree to ensure that the directive is applied correctly during rendering.
+   * 
+   * @param attribute - The directive attribute to transform, which contains all the information about the directive as defined in the template (e.g. name, raw content, evaluated value, etc.)
+   * @param args - Additional arguments that may be required for the transformation process.
+   */
+  transform(attribute, ...args) {
+    const logger = A_Context.scope(this).resolve(A_Logger);
+    if (logger) {
+      logger.warning(`No transforming logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
+    }
+  }
+  compile(attribute, ...args) {
+    const logger = A_Context.scope(this).resolve(A_Logger);
+    if (logger) {
+      logger.warning(`No compiling logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
+    }
+  }
+  update(attribute, ...args) {
+    const logger = A_Context.scope(this).resolve(A_Logger);
+    if (logger) {
+      logger.warning(`No update logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
+    }
+  }
+};
+__decorateClass([
+  __decorateParam(0, A_Inject(A_Caller))
+], AreDirective.prototype, "transform", 1);
+__decorateClass([
+  A_Feature.Extend({
+    name: AreDirectiveFeatures.Compile,
+    scope: [AreDirective]
+  }),
+  __decorateParam(0, A_Inject(A_Caller))
+], AreDirective.prototype, "compile", 1);
+__decorateClass([
+  A_Feature.Extend({
+    name: AreDirectiveFeatures.Update,
+    scope: [AreDirective]
+  }),
+  __decorateParam(0, A_Inject(A_Caller))
+], AreDirective.prototype, "update", 1);
+AreDirective = __decorateClass([
+  A_Meta.Define(AreDirectiveMeta)
+], AreDirective);
+
+// src/instructions/AreHTML.instructions.constants.ts
+var AreHTMLInstructions = {
+  AddElement: "_AreHTML_AddElement",
+  AddText: "_AreHTML_AddText",
+  AddAttribute: "_AreHTML_AddAttribute",
+  AddStyle: "_AreHTML_AddStyle",
+  AddListener: "_AreHTML_AddListener",
+  AddInterpolation: "_AreHTML_AddInterpolation",
+  AddComment: "_AreHTML_AddComment"
+};
+
+// src/instructions/AddComment.instruction.ts
+var AddCommentInstruction = class extends AreDeclaration {
+  get content() {
+    return this.payload.content;
+  }
+  constructor(props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddComment, props);
+    }
+  }
+};
+AddCommentInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddCommentInstruction",
+    description: "Appends a comment node to an element. Apply creates the comment node; revert removes it. Content can be a static string or a dynamic getter for interpolations."
+  })
+], AddCommentInstruction);
+var AreDirectiveContext = class extends A_ExecutionContext {
+  constructor(aseid) {
+    super(aseid.toString());
+    this.scope = {};
+  }
+};
+
+// src/directives/AreDirectiveFor.directive.ts
+var AreDirectiveFor = class extends AreDirective {
+  transform(attribute, scope, store, scene, logger, ...args) {
+    logger.debug(`[Transform] directive $FOR for <${attribute.owner.aseid.toString()}>`);
+    const node = attribute.owner;
+    const forTemplate = node.cloneWithScope();
+    const forAttr = forTemplate.attributes.find((d) => d.name === attribute.name);
+    if (forAttr) {
+      forTemplate.scope.deregister(forAttr);
+      node.scope.register(forAttr);
+    }
+    node.init();
+    attribute.template = forTemplate;
+    const { key, index, arrayExpr } = this.parseExpression(attribute.content);
+    const array = this.resolveArray(store, arrayExpr, attribute.content);
+    attribute.value = array;
+    console.log('Initial array for "for" directive:', scene);
+    for (let i = 0; i < array.length; i++) {
+      this.spawnItemNode(attribute.template, attribute.owner, key, index, array[i], i);
+    }
+    console.log('Template for "for" directive:', forTemplate);
+  }
+  compile(attribute, store, scene, ...args) {
+    const hostInstruction = scene.host;
+    const commentIdentifier = ` --- for: ${attribute.template.id} --- `;
+    const declaration = new AddCommentInstruction({ content: commentIdentifier });
+    scene.setHost(declaration);
+    scene.planBefore(declaration, hostInstruction);
+    scene.unPlan(hostInstruction);
+  }
+  update(attribute, store, scene, ...args) {
+    const { key, index, arrayExpr } = this.parseExpression(attribute.content);
+    const newArray = this.resolveArray(store, arrayExpr, attribute.content);
+    const owner = attribute.owner;
+    const currentChildren = [...owner.children];
+    attribute.value = newArray;
+    const newLen = newArray.length;
+    const newItemSet = new Set(newArray);
+    const keptChildren = [];
+    const removedChildren = [];
+    for (const child of currentChildren) {
+      const ctx = child.scope.resolveFlat(AreDirectiveContext);
+      if (ctx && newItemSet.has(ctx.scope[key])) {
+        keptChildren.push(child);
+      } else {
+        removedChildren.push(child);
+      }
+    }
+    for (const child of removedChildren) {
+      child.unmount();
+      owner.removeChild(child);
+    }
+    for (let i = 0; i < keptChildren.length; i++) {
+      let directiveContext = keptChildren[i].scope.resolveFlat(AreDirectiveContext);
+      if (!directiveContext) {
+        directiveContext = new AreDirectiveContext(keptChildren[i].aseid);
+        keptChildren[i].scope.register(directiveContext);
+      }
+      directiveContext.scope = {
+        ...directiveContext.scope,
+        [key]: newArray[i],
+        [index || "index"]: i
+      };
+    }
+    for (let i = keptChildren.length; i < newLen; i++) {
+      const itemNode = this.spawnItemNode(attribute.template, owner, key, index, newArray[i], i);
+      itemNode.transform();
+      itemNode.compile();
+      itemNode.mount();
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // ── Helpers ──────────────────────────────────────────────────────────────────
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Parses the $for expression string into its constituent parts.
+   *
+   * Supported formats:
+   *   item in items
+   *   item, index in items
+   *   (item, index) in items
+   *   item in filter(items)
+   *   item, index in filter(items, 'active')
+   */
+  parseExpression(content) {
+    const inIndex = content.lastIndexOf(" in ");
+    const keyAndIndex = content.slice(0, inIndex).trim().replace(/^\(|\)$/g, "");
+    const arrayExpr = content.slice(inIndex + 4).trim();
+    const keyParts = keyAndIndex.split(",").map((p) => p.trim());
+    return {
+      key: keyParts[0],
+      index: keyParts[1] || void 0,
+      arrayExpr
+    };
+  }
+  /**
+   * Resolves the array expression against the store.
+   * Supports both plain key lookups and function-call expressions:
+   *   items          → store.get('items')
+   *   filter(items)  → store.get('filter')(store.get('items'))
+   */
+  resolveArray(store, arrayExpr, fullContent) {
+    let result;
+    const callMatch = arrayExpr.match(/^([^(]+)\((.+)\)$/);
+    if (callMatch) {
+      const fnName = callMatch[1].trim();
+      const fn = store.get(fnName);
+      if (typeof fn !== "function")
+        throw new AreCompilerError({
+          title: 'Invalid "for" Directive Function',
+          description: `The expression "${fnName}" in the "for" directive does not resolve to a function in the store. Received: ${typeof fn}`
+        });
+      const rawArgs = callMatch[2].split(",").map((a) => a.trim());
+      const resolvedArgs = rawArgs.map((arg) => {
+        if (arg.startsWith("'") && arg.endsWith("'")) return arg.slice(1, -1);
+        if (arg.startsWith('"') && arg.endsWith('"')) return arg.slice(1, -1);
+        if (!isNaN(Number(arg))) return Number(arg);
+        return store.get(arg);
+      });
+      result = fn(...resolvedArgs);
+    } else {
+      result = store.get(arrayExpr);
+    }
+    if (!Array.isArray(result))
+      throw new AreCompilerError({
+        title: 'Invalid "for" Directive Value',
+        description: `The "for" directive expects an array but got ${typeof result}. Expression: "${fullContent}". Received: ${JSON.stringify(result)}`
+      });
+    return result;
+  }
+  /**
+   * Creates a single item node from the template, registers it as a child of
+   * the owner, initialises it, injects item-scoped store values, and activates
+   * its scene so the mount/compile cycle will include it.
+   *
+   * NOTE: This method does NOT call compile() or mount() — the caller is
+   * responsible for doing so when the main lifecycle cycle won't cover it
+   * (i.e. during update, but not during the initial compile phase).
+   */
+  spawnItemNode(template, owner, key, index, item, i) {
+    const itemNode = template.clone();
+    owner.addChild(itemNode);
+    const queue = [itemNode];
+    while (queue.length > 0) {
+      const current = queue.shift();
+      current.init();
+      queue.push(...current.children);
+    }
+    let directiveContext = itemNode.scope.resolveFlat(AreDirectiveContext);
+    if (!directiveContext) {
+      directiveContext = new AreDirectiveContext(itemNode.aseid);
+      itemNode.scope.register(directiveContext);
+    }
+    directiveContext.scope = {
+      ...directiveContext.scope,
+      [key]: item,
+      [index || "index"]: i
+    };
+    itemNode.scene.activate();
+    return itemNode;
+  }
+};
+__decorateClass([
+  AreDirective.Transform,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreScene)),
+  __decorateParam(4, A_Inject(A_Logger))
+], AreDirectiveFor.prototype, "transform", 1);
+__decorateClass([
+  AreDirective.Compile,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreStore)),
+  __decorateParam(2, A_Inject(AreScene))
+], AreDirectiveFor.prototype, "compile", 1);
+__decorateClass([
+  AreDirective.Update,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreStore)),
+  __decorateParam(2, A_Inject(AreScene))
+], AreDirectiveFor.prototype, "update", 1);
+AreDirectiveFor = __decorateClass([
+  AreDirective.Priority(1)
+], AreDirectiveFor);
+var AreDirectiveIf = class extends AreDirective {
+  transform(attribute, scope, store, scene, logger, ...args) {
+    logger.debug(`[Transform] directive $IF for <${attribute.owner.aseid.toString()}>`);
+    const node = attribute.owner;
+    const ifTemplate = node.cloneWithScope();
+    const ifAttr = ifTemplate.attributes.find((d) => d.name === attribute.name);
+    if (ifAttr) {
+      ifTemplate.scope.deregister(ifAttr);
+      node.scope.register(ifAttr);
+    }
+    node.init();
+    node.addChild(ifTemplate);
+    ifTemplate.scene.deactivate();
+    attribute.template = ifTemplate;
+  }
+  compile(attribute, store, scene, syntax, directiveContext, ...args) {
+    console.log('Compiling directive "if" with attribute content:', attribute);
+    attribute.value = syntax.evaluate(attribute.content, store, {
+      ...directiveContext?.scope || {}
+    });
+    const hostInstruction = scene.host;
+    const commentIdentifier = ` --- if: ${attribute.template.id} --- `;
+    const declaration = new AddCommentInstruction({ content: commentIdentifier });
+    scene.setHost(declaration);
+    scene.planBefore(declaration, hostInstruction);
+    scene.unPlan(hostInstruction);
+    if (attribute.value)
+      attribute.template.scene.activate();
+    else
+      attribute.template.scene.deactivate();
+  }
+  update(attribute, store, scope, syntax, scene, ...args) {
+    attribute.value = syntax.evaluate(attribute.content, store);
+    if (attribute.value) {
+      attribute.template.scene.activate();
+      attribute.template.mount();
+    } else {
+      attribute.template.unmount();
+      attribute.template.scene.deactivate();
+    }
+  }
+};
+__decorateClass([
+  AreDirective.Transform,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreScene)),
+  __decorateParam(4, A_Inject(A_Logger))
+], AreDirectiveIf.prototype, "transform", 1);
+__decorateClass([
+  AreDirective.Compile,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreStore)),
+  __decorateParam(2, A_Inject(AreScene)),
+  __decorateParam(3, A_Inject(AreSyntax)),
+  __decorateParam(4, A_Inject(AreDirectiveContext))
+], AreDirectiveIf.prototype, "compile", 1);
+__decorateClass([
+  AreDirective.Update,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreStore)),
+  __decorateParam(2, A_Inject(A_Scope)),
+  __decorateParam(3, A_Inject(AreSyntax)),
+  __decorateParam(4, A_Inject(AreScene))
+], AreDirectiveIf.prototype, "update", 1);
+AreDirectiveIf = __decorateClass([
+  AreDirective.Priority(2)
+], AreDirectiveIf);
+var AddAttributeInstruction = class extends AreMutation {
+  constructor(parent, props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddAttribute, parent, props);
+    }
+  }
+};
+AddAttributeInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddAttributeInstruction",
+    description: "Sets an attribute on an HTML element. Apply calls setAttribute; revert calls removeAttribute."
+  })
+], AddAttributeInstruction);
+var AddElementInstruction = class extends AreDeclaration {
+  constructor(props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddElement, props);
+    }
+  }
+};
+AddElementInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddElementInstruction",
+    description: "Creates a new HTML element in the DOM. Apply creates the element; revert removes it."
+  })
+], AddElementInstruction);
+var AddInterpolationInstruction = class extends AreMutation {
+  constructor(parent, props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddInterpolation, parent, props);
+    }
+  }
+};
+AddInterpolationInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddInterpolationInstruction",
+    description: "Appends a reactive text node whose content is resolved dynamically from the store. Apply creates the text node with the getter; revert removes it."
+  })
+], AddInterpolationInstruction);
+var AddListenerInstruction = class extends AreMutation {
+  constructor(parent, props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddListener, parent, props);
+    }
+  }
+};
+AddListenerInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddListenerInstruction",
+    description: "Attaches a DOM event listener to an element. Apply calls addEventListener; revert calls removeEventListener."
+  })
+], AddListenerInstruction);
+var AddStyleInstruction = class extends AreMutation {
+  constructor(parent, props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddStyle, parent, props);
+    }
+  }
+};
+AddStyleInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddStyleInstruction",
+    description: "Sets an inline CSS style property on an element. Apply sets the property; revert removes it."
+  })
+], AddStyleInstruction);
+var AddTextInstruction = class extends AreDeclaration {
+  constructor(props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddText, props);
+    }
+  }
+};
+AddTextInstruction = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AddTextInstruction",
+    description: "Appends a text node to an element. Apply creates the text node; revert removes it. Content can be a static string or a dynamic getter for interpolations."
+  })
+], AddTextInstruction);
+var AreStyle = class extends A_Fragment {
+  constructor(styles, aseid) {
+    super({
+      name: aseid ? aseid.toString() : "default-style"
+    });
+    this.styles = styles;
+  }
+};
+
+// src/lib/AreHTMLNode/AreHTMLNode.ts
+var AreHTMLNode = class extends AreNode {
+  /**
+   * Actual node type. 
+   * By default it's a tag name
+   */
+  get tag() {
+    return this.aseid.entity;
+  }
+  /**
+    * The static attributes defined for the node, which are typically used to represent static properties or characteristics of the node that do not change based on the context or state. These attributes are usually defined in the template and are not reactive.
+    * 
+    * Example: For a node defined as `<div class="static-class">`, the static attribute would be `class="static-class"`.
+    */
+  get staticAttributes() {
+    return this.scope.resolveFlatAll(AreStaticAttribute);
+  }
+  /**
+   * The binding attributes defined for the node, which are typically used to represent dynamic properties or characteristics of the node that can change based on the context or state. These attributes are usually defined in the template with a specific syntax (e.g., `:prop="value"` or `v-bind:prop="value"`) and are reactive, meaning that they will update automatically when the underlying data changes.
+   * 
+   * Example: For a node defined as `<div :class="dynamicClass">`, the binding attribute would be `:class="dynamicClass"`.
+   */
+  get bindings() {
+    return this.scope.resolveFlatAll(AreBindingAttribute);
+  }
+  /**
+   * The directive attributes defined for the node, which are typically used to represent special instructions or behaviors that should be applied to the node. These attributes are usually defined in the template with a specific syntax (e.g., `v-if="condition"` or `v-for="item in list"`) and are processed by the rendering engine to apply the corresponding logic or behavior to the node.
+   * 
+   * Example: For a node defined as `<div v-if="isVisible">`, the directive attribute would be `v-if="isVisible"`.
+   */
+  get directives() {
+    const directives = this.scope.resolveFlatAll(AreDirectiveAttribute);
+    return directives.filter((d) => d.component).sort((a, b) => {
+      const aMeta = A_Context.meta(a.component);
+      const bMeta = A_Context.meta(b.component);
+      const aPriority = aMeta.priority ?? 0;
+      const bPriority = bMeta.priority ?? 0;
+      return bPriority - aPriority;
+    });
+  }
+  /**
+   * The event attributes defined for the node, which are typically used to represent event listeners or handlers that should be attached to the node. These attributes are usually defined in the template with a specific syntax (e.g., `@click="handleClick"` or `v-on:click="handleClick"`) and are processed by the rendering engine to attach the corresponding event listeners to the node.
+   * 
+   * Example: For a node defined as `<button @click="handleClick">`, the event attribute would be `@click="handleClick"`.
+   */
+  get events() {
+    return this.scope.resolveFlatAll(AreEventAttribute);
+  }
+  /**
+   * The styles defined for the node, which can include inline styles or styles defined in a separate stylesheet that are applied to the node. These styles can be used to control the visual appearance of the node and can be defined using standard CSS syntax.
+   */
+  get styles() {
+    return this.scope.resolveFlat(AreStyle);
+  }
+};
+AreHTMLNode = __decorateClass([
+  A_Frame.Entity({
+    namespace: "A-ARE",
+    name: "AreHTMLNode",
+    description: "AreHTMLNode represents a node in the HTML structure. It extends the base AreNode and includes properties and methods specific to HTML nodes, such as handling attributes, directives, events, and styles."
+  })
+], AreHTMLNode);
+
+// src/nodes/AreComment.ts
+var AreComment = class extends AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-comment"
+      }
+    });
+  }
+};
+var AreComponentNode = class extends AreHTMLNode {
+  /**
+   * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+   * 
+   * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+   * 
+   * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+   */
+  get component() {
+    return this.scope.resolve(A_FormatterHelper.toPascalCase(this.aseid.entity));
+  }
+};
+AreComponentNode = __decorateClass([
+  A_Frame.Entity({
+    namespace: "A-ARE",
+    name: "AreComponentNode",
+    description: "AreComponentNode represents a node in the scene graph that corresponds to a component. It extends the base AreNode and includes additional properties and methods specific to component nodes, such as handling attributes, bindings, directives, events, styles, and interpolations associated with the component."
+  })
+], AreComponentNode);
+
+// src/nodes/AreInterpolation.ts
+var AreInterpolation = class extends AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-interpolation"
+      }
+    });
+  }
+};
+var AreRootNode = class extends AreHTMLNode {
+  /**
+   * For the root node, we can default to a generic container element like <div> since it serves as the root of the component tree and does not correspond to a specific HTML tag defined in the markup. The actual content and structure of the root node will be determined by the child nodes and components that are rendered within it, allowing for flexibility in how the root node is used and what it contains.
+   */
+  get tag() {
+    return "div";
+  }
+  /**
+   * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+   * 
+   * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+   * 
+   * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+   */
+  get component() {
+    return this.scope.resolve(A_FormatterHelper.toPascalCase(this.aseid.entity));
+  }
+};
+AreRootNode = __decorateClass([
+  A_Frame.Entity({
+    namespace: "A-ARE",
+    name: "AreRootNode",
+    description: "AreRootNode represents the root node in the scene graph. It extends the base AreHTMLNode and includes additional properties and methods specific to the root node, such as handling the root element and its associated component."
+  })
+], AreRootNode);
+
+// src/nodes/AreText.ts
+var AreText = class extends AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-text"
+      }
+    });
+  }
+};
+var AreRoute = class _AreRoute extends AreSignal {
+  constructor(path) {
+    super({
+      data: new A_Route(path)
+    });
+  }
+  get route() {
+    return this.data;
+  }
+  static default() {
+    return new _AreRoute(document.location.pathname || "/");
+  }
+  compare(other) {
+    return this.route.toRegExp().test(other.data.toString());
+  }
+};
+var AreHTMLEngineContext = class extends AreContext {
+  constructor(props) {
+    super(props.container?.body.innerHTML || props.source || "");
+    /**
+     * Index structure mapping:
+     * 
+     *        Node                ->       Group ID        ->  Element
+     * -----------------------------------------------------------------------------------
+     *  | - Attribute             |   group: string       |   Node
+     *  | - Directive (e.g. for)  |                       |   Node
+     */
+    this.index = {
+      /**
+       * 1 AreNode = 1 Dom Node
+       * 
+       * uses ASEID
+       */
+      nodeToHostElements: /* @__PURE__ */ new Map(),
+      /**
+       * 1 Group Instruction = MANY Dom Nodes (e.g. for loop)
+       * 
+       * uses ASEID
+       */
+      groupToElements: /* @__PURE__ */ new Map(),
+      /**
+       * 1 Dom Node = 1 Instruction 
+       * 
+       * uses ASEID
+       */
+      elementToInstruction: /* @__PURE__ */ new WeakMap(),
+      /**
+       * 1 Instruction = 1 Dom Node (for CreateElement instructions, for example)
+       * 
+       * uses ASEID
+       */
+      instructionToElement: /* @__PURE__ */ new Map(),
+      /**
+       * Event listeners attached to elements, used for proper cleanup when reverting instructions. Maps a DOM element to a map of event names and their corresponding listeners, allowing the engine to track which listeners are attached to which elements and remove them when necessary (e.g., when an instruction is reverted).
+       */
+      elementListeners: /* @__PURE__ */ new WeakMap()
+    };
+    this._container = props.container;
+  }
+  get container() {
+    return this._container;
+  }
+  getNodeElement(node) {
+    if (typeof node === "string") {
+      return this.index.nodeToHostElements.get(node);
+    } else {
+      return this.index.nodeToHostElements.get(node.aseid.toString());
+    }
+  }
+  /**
+   * Associates a DOM element with a given instruction and its owner node. This method updates the context's index to map the instruction's ASEID to the provided DOM element, and also maps the element back to the instruction's ASEID for reverse lookup. If the instruction has an owner node, it also maps the node's ASEID to the element. Additionally, if the instruction belongs to a group, it adds the element to the set of elements associated with that group. This indexing allows the engine to efficiently manage and update DOM elements based on instructions and their corresponding nodes, enabling dynamic rendering and interaction in response to application state changes.
+   * 
+   * @param instruction 
+   * @param element 
+   */
+  setInstructionElement(instruction, element) {
+    const node = instruction.owner;
+    this.index.instructionToElement.set(instruction.aseid.toString(), element);
+    this.index.elementToInstruction.set(element, instruction.aseid.toString());
+    if (node) {
+      this.index.nodeToHostElements.set(node.aseid.toString(), element);
+    }
+    if (instruction.group) {
+      const groupId = instruction.group;
+      if (!this.index.groupToElements.has(groupId)) {
+        this.index.groupToElements.set(groupId, /* @__PURE__ */ new Set());
+      }
+      this.index.groupToElements.get(groupId).add(element);
+    }
+  }
+  getElementByInstruction(instruction) {
+    if (typeof instruction === "string") {
+      return this.index.instructionToElement.get(instruction);
+    } else {
+      return this.index.instructionToElement.get(instruction.aseid.toString());
+    }
+  }
+  /**
+   * Removes the association between a given instruction and its corresponding DOM element. This method looks up the instruction's ASEID to find the associated DOM element, and if found, it deletes the mapping from both instructionToElement and elementToInstruction. If the instruction has an owner node, it also removes the mapping from nodeToHostElements. Additionally, if the instruction belongs to a group, it removes the element from the set of elements associated with that group, and if the group has no more elements, it deletes the group from the index. This cleanup is essential for maintaining an accurate and efficient mapping of instructions to DOM elements, especially when instructions are reverted or when nodes are removed from the DOM.
+   * 
+   * @param instruction 
+   */
+  removeInstructionElement(instruction) {
+    const element = this.index.instructionToElement.get(instruction.aseid.toString());
+    if (element) {
+      this.index.instructionToElement.delete(instruction.aseid.toString());
+      this.index.elementToInstruction.delete(element);
+      const node = instruction.owner;
+      if (node) {
+        this.index.nodeToHostElements.delete(node.aseid.toString());
+      }
+      if (instruction.group) {
+        const groupId = instruction.group;
+        const groupElements = this.index.groupToElements.get(groupId);
+        if (groupElements) {
+          groupElements.delete(element);
+          if (groupElements.size === 0) {
+            this.index.groupToElements.delete(groupId);
+          }
+        }
+      }
+    }
+  }
+  getElementsByGroup(instruction) {
+    if (typeof instruction === "string") {
+      return this.index.groupToElements.get(instruction);
+    } else {
+      return this.index.groupToElements.get(instruction.aseid.toString());
+    }
+  }
+  /**
+   * Adds an event listener to a specific DOM element and keeps track of it in the context's index for proper cleanup later. This method takes a DOM element, an event name, and a listener function or object, and stores this information in the elementListeners map. This allows the engine to efficiently manage event listeners attached to dynamically created elements, ensuring that they can be removed when the associated instructions are reverted or when nodes are removed from the DOM, preventing memory leaks and unintended behavior.
+   * 
+   * @param element 
+   * @param eventName 
+   * @param listener 
+   */
+  addListener(element, eventName, listener) {
+    if (!this.index.elementListeners.has(element)) {
+      this.index.elementListeners.set(element, /* @__PURE__ */ new Map());
+    }
+    this.index.elementListeners.get(element).set(eventName, listener);
+  }
+  /**
+   * Retrieves the event listener associated with a specific DOM element and event name from the context's index. This method looks up the element in the elementListeners map and then retrieves the listener for the specified event name. If no listener is found for the given element and event, it returns undefined. This allows the engine to efficiently access and manage event listeners that have been attached to dynamically created elements, enabling proper cleanup when instructions are reverted or when nodes are removed from the DOM.
+   * 
+   * @param element 
+   * @param eventName 
+   * @returns 
+   */
+  getListener(element, eventName) {
+    return this.index.elementListeners.get(element)?.get(eventName);
+  }
+  /**
+   * Removes an event listener from a specific DOM element and updates the context's index accordingly. This method looks up the element in the elementListeners map and deletes the listener for the specified event name. This is typically called when an instruction is reverted or when a node is removed from the DOM, ensuring that any attached event listeners are properly cleaned up to prevent memory leaks and unintended behavior.
+   * 
+   * @param element 
+   * @param eventName 
+   */
+  removeListener(element, eventName) {
+    this.index.elementListeners.get(element)?.delete(eventName);
+  }
+};
+var AreHTMLCompiler = class extends AreCompiler {
+  compileInterpolation(interpolation, scene, store, logger, ...args) {
+    scene.plan(new AddTextInstruction({ content: interpolation.content, evaluate: true }));
+  }
+  compileText(text, scene, logger, ...args) {
+    logger?.debug("cyan", `AreHTMLCompiler: compile text node <${text.aseid.toString()}> with content: "${text.content}"`);
+    if (scene.host)
+      scene.unPlan(scene.host);
+    scene.plan(new AddTextInstruction({ content: text.content }));
+  }
+  compileStaticAttribute(attribute, scene, ...args) {
+    if (!scene.host)
+      throw new AreCompilerError({
+        title: "Scene Host Not Found",
+        description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`
+      });
+    scene.plan(new AddAttributeInstruction(scene.host, {
+      name: attribute.name,
+      content: attribute.content
+    }));
+  }
+  compileDirectiveAttribute(directive, store, feature, logger, ...args) {
+    store.watch(directive);
+    if (directive.component) {
+      feature.chain(directive.component, AreDirectiveFeatures.Compile, directive.owner.scope);
+    } else {
+      logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named "AreDirective${A_FormatterHelper.toPascalCase(directive.name)}" to handle this directive.`);
+    }
+    store.unwatch(directive);
+  }
+  compileEventAttribute(attribute, scene, ...args) {
+    if (!scene.host)
+      throw new AreCompilerError({
+        title: "Scene Host Not Found",
+        description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`
+      });
+    scene.plan(new AddListenerInstruction(scene.host, {
+      name: attribute.name,
+      handler: attribute.content
+    }));
+  }
+  compileBindingAttribute(attribute, scene, parentStore, store, ...args) {
+    if (!scene.host)
+      throw new AreCompilerError({
+        title: "Scene Host Not Found",
+        description: `No host found for the scene with id: ${scene.id}. Please ensure that the scene is properly initialized and has a host before compiling binding attributes.`
+      });
+    const node = attribute.owner;
+    if (node.component && node.component.props[attribute.name]) {
+      const propDefinition = node.component.props[attribute.name];
+      let value = parentStore.get(attribute.content);
+      if (propDefinition.type) {
+        switch (propDefinition.type) {
+          case "string":
+            value = String(value);
+            break;
+          case "number":
+            value = Number(value);
+            break;
+          case "boolean":
+            value = Boolean(value);
+            break;
+        }
+      }
+      store.set(attribute.name, value);
+    } else {
+      const instruction = new AddAttributeInstruction(scene.host, {
+        name: attribute.name,
+        content: attribute.content,
+        evaluate: true
+      });
+      scene.plan(instruction);
+    }
+  }
+};
+__decorateClass([
+  AreCompiler.Compile(AreInterpolation),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreScene)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLCompiler.prototype, "compileInterpolation", 1);
+__decorateClass([
+  AreCompiler.Compile(AreText),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreScene)),
+  __decorateParam(2, A_Inject(A_Logger))
+], AreHTMLCompiler.prototype, "compileText", 1);
+__decorateClass([
+  AreCompiler.Compile(AreStaticAttribute),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreScene))
+], AreHTMLCompiler.prototype, "compileStaticAttribute", 1);
+__decorateClass([
+  AreCompiler.Compile(AreDirectiveAttribute),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreStore)),
+  __decorateParam(2, A_Inject(A_Feature)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLCompiler.prototype, "compileDirectiveAttribute", 1);
+__decorateClass([
+  AreCompiler.Compile(AreEventAttribute),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreScene))
+], AreHTMLCompiler.prototype, "compileEventAttribute", 1);
+__decorateClass([
+  AreCompiler.Compile(AreBindingAttribute),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreScene)),
+  __decorateParam(2, A_Dependency.Parent()),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreStore))
+], AreHTMLCompiler.prototype, "compileBindingAttribute", 1);
+AreHTMLCompiler = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AreHTMLCompiler",
+    description: "HTML-specific compiler for A-Concept Rendering Engine (ARE) components, extending the base AreCompiler to handle HTML templates, styles, and rendering logic tailored for web environments."
+  })
+], AreHTMLCompiler);
+var AreHTMLInterpreter = class extends AreInterpreter {
+  addElement(declaration, context, logger) {
+    try {
+      const node = declaration.owner;
+      let currentNode = node;
+      let parent = node.parent;
+      while (parent) {
+        if (context.getNodeElement(parent)) {
+          break;
+        }
+        currentNode = parent;
+        parent = parent.parent;
+      }
+      const tag = node.tag;
+      if (parent) {
+        const mountPoint = context.getNodeElement(parent);
+        if (!mountPoint) {
+          throw new AreInterpreterError({
+            title: "Mount Point Not Found",
+            description: `Could not find a mount point for the node with id "${node.id}". Ensure that the parent node is rendered before its children, or that a valid root element with the corresponding id exists in the DOM.`
+          });
+        }
+        const element = context.container.createElement(tag);
+        if (mountPoint.nodeType === Node.ELEMENT_NODE) {
+          mountPoint.appendChild(element);
+        } else {
+          mountPoint.parentNode?.insertBefore(element, mountPoint);
+        }
+        context.setInstructionElement(declaration, element);
+      } else {
+        const mountPoint = context.container.getElementById(node.id);
+        if (!mountPoint) {
+          throw new AreInterpreterError({
+            title: "Mount Point Not Found",
+            description: `Could not find a mount point for the node with id "${node.id}". Ensure that the parent node is rendered before its children, or that a valid root element with the corresponding id exists in the DOM.`
+          });
+        }
+        const element = context.container.createElement(tag);
+        element.setAttribute("data-aseid", node.aseid.toString());
+        mountPoint.parentNode?.replaceChild(element, mountPoint);
+        context.setInstructionElement(declaration, element);
+      }
+      logger?.debug("green", `Element ${node.aseid.toString()} added to Context:`);
+    } catch (error) {
+      logger?.error(error);
+      throw error;
+    }
+  }
+  removeElement(declaration, context) {
+    const element = context.getElementByInstruction(declaration);
+    if (element && element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    context.removeInstructionElement(declaration);
+  }
+  addAttribute(mutation, context, store, syntax, directiveContext, logger) {
+    const element = context.getElementByInstruction(mutation.parent);
+    if (!element) {
+      throw new AreInterpreterError({
+        title: "Element Not Found",
+        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 applying attribute mutations.`
+      });
+    }
+    const { name, content, evaluate } = mutation.payload;
+    const value = 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;
+    } 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;
+    }
+  }
+  removeAttribute(mutation, context) {
+    try {
+      const element = context.getElementByInstruction(mutation.parent);
+      if (!element) return;
+      const { name } = mutation.payload;
+      if (name && element.nodeType === Node.ELEMENT_NODE) {
+        element?.removeAttribute(name);
+      }
+    } catch (error) {
+      console.log("Error removing attribute:", error);
+    }
+  }
+  addEventListener(mutation, context, store, syntax, directiveContext, logger) {
+    const element = context.getElementByInstruction(mutation.parent);
+    if (!element) {
+      throw new AreInterpreterError({
+        title: "Element Not Found",
+        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 handlers = syntax.extractEmitHandlers(mutation.payload.handler);
+    const handlerScope = {};
+    for (const handler of handlers) {
+      const handlerFn = (...args) => {
+        const event = new AreEvent(handler);
+        event.set("args", args);
+        event.set("element", element);
+        event.set("instruction", mutation);
+        mutation.owner.emit(event);
+      };
+      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);
+    };
+    if (callback) {
+      element.addEventListener(mutation.payload.name, 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);
+    if (listener) {
+      element.removeEventListener(name, listener);
+      context.removeListener(element, name);
+    }
+  }
+  addText(declaration, context, store, syntax, directiveContext, logger) {
+    const node = declaration.owner.parent;
+    const { content, evaluate } = declaration.payload;
+    const value = evaluate ? syntax.evaluate(content, store, {
+      ...directiveContext?.scope || {}
+    }) : content;
+    if (!node) {
+      const textNode = context.container.createTextNode(value);
+      context.container.body.appendChild(textNode);
+      context.setInstructionElement(declaration, textNode);
+    } else {
+      const element = context.getNodeElement(node);
+      if (!element) {
+        throw new AreInterpreterError({
+          title: "Element Not Found",
+          description: `Could not find a DOM element associated with the instruction ASEID "${declaration.owner.parent.aseid}". Ensure that the parent instruction is properly rendered and associated with a DOM element before applying attribute mutations.`
+        });
+      }
+      const existingNode = context.getElementByInstruction(declaration);
+      if (existingNode) {
+        existingNode.textContent = value;
+      } else {
+        const textNode = context.container.createTextNode(value);
+        element.appendChild(textNode);
+        context.setInstructionElement(declaration, textNode);
+      }
+    }
+    logger?.debug("green", `Text ${node?.aseid.toString()} added to Context:`);
+  }
+  removeText(declaration, context) {
+    const element = context.getElementByInstruction(declaration);
+    if (!element) return;
+    element.parentNode?.removeChild(element);
+    context.removeInstructionElement(declaration);
+  }
+  addComment(declaration, context, store, syntax, directiveContext, logger) {
+    const node = declaration.owner.parent;
+    const { content, evaluate } = declaration.payload;
+    const value = evaluate ? syntax.evaluate(content, store, {
+      ...directiveContext?.scope || {}
+    }) : content;
+    if (!node) {
+      const commentNode = context.container.createComment(value);
+      context.container.body.appendChild(commentNode);
+      context.setInstructionElement(declaration, commentNode);
+    } else {
+      const element = context.getNodeElement(node);
+      if (!element) {
+        throw new AreInterpreterError({
+          title: "Element Not Found",
+          description: `Could not find a DOM element associated with the instruction ASEID "${declaration.owner.parent.aseid}". Ensure that the parent instruction is properly rendered and associated with a DOM element before applying attribute mutations.`
+        });
+      }
+      const existingNode = context.getElementByInstruction(declaration);
+      if (existingNode) {
+        existingNode.textContent = value;
+      } else {
+        const commentNode = context.container.createComment(value);
+        element.appendChild(commentNode);
+        context.setInstructionElement(declaration, commentNode);
+      }
+    }
+    logger?.debug("green", `Comment ${node?.aseid.toString()} added to Context:`);
+  }
+  removeComment(declaration, context) {
+    const element = context.getElementByInstruction(declaration);
+    if (!element) return;
+    element.parentNode?.removeChild(element);
+    context.removeInstructionElement(declaration);
+  }
+};
+__decorateClass([
+  A_Frame.Method({
+    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."
+  }),
+  AreInterpreter.Apply(AreInstructionDefaultNames.Default),
+  AreInterpreter.Apply(AreHTMLInstructions.AddElement),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(2, A_Inject(A_Logger))
+], AreHTMLInterpreter.prototype, "addElement", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Remove an HTML element that was created by a CreateElement declaration. Cleans up the DOM and the context index."
+  }),
+  AreInterpreter.Revert(AreInstructionDefaultNames.Default),
+  AreInterpreter.Revert(AreHTMLInstructions.AddElement),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeElement", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Add an attribute to an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Apply(AreHTMLInstructions.AddAttribute),
+  AreInterpreter.Update(AreHTMLInstructions.AddAttribute),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreSyntax)),
+  __decorateParam(4, A_Inject(AreDirectiveContext)),
+  __decorateParam(5, A_Inject(A_Logger))
+], AreHTMLInterpreter.prototype, "addAttribute", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Remove an attribute from an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddAttribute),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeAttribute", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Add an event listener to an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Apply(AreHTMLInstructions.AddListener),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreSyntax)),
+  __decorateParam(4, A_Inject(AreDirectiveContext)),
+  __decorateParam(5, A_Inject(A_Logger))
+], AreHTMLInterpreter.prototype, "addEventListener", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Remove an event listener from an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddListener),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeEventListener", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Add text content to an HTML element based on the provided declaration instruction."
+  }),
+  AreInterpreter.Apply(AreHTMLInstructions.AddText),
+  AreInterpreter.Update(AreHTMLInstructions.AddText),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreSyntax)),
+  __decorateParam(4, A_Inject(AreDirectiveContext)),
+  __decorateParam(5, A_Inject(A_Logger))
+], AreHTMLInterpreter.prototype, "addText", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Remove text content from an HTML element based on the provided declaration instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddText),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeText", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Add a comment node to the DOM based on the provided declaration instruction."
+  }),
+  AreInterpreter.Apply(AreHTMLInstructions.AddComment),
+  AreInterpreter.Update(AreHTMLInstructions.AddComment),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(AreSyntax)),
+  __decorateParam(4, A_Inject(AreDirectiveContext)),
+  __decorateParam(5, A_Inject(A_Logger))
+], AreHTMLInterpreter.prototype, "addComment", 1);
+__decorateClass([
+  A_Frame.Method({
+    description: "Remove a comment node from the DOM based on the provided declaration instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddComment),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeComment", 1);
+AreHTMLInterpreter = __decorateClass([
+  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."
+  })
+], AreHTMLInterpreter);
+var AreHTMLTokenizer = class extends AreTokenizer {
+  constructor() {
+    super(...arguments);
+    this.ATTR_PATTERN = /([$:@]?[\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>/"'=]+)))?/g;
+  }
+  tokenize(node, context, logger) {
+    super.tokenize(node, context, logger);
+    context.startPerformance("attributeExtraction");
+    const attributes = this.extractAttributes(node.markup);
+    for (const attr of attributes) {
+      node.scope.register(attr);
+    }
+    context.endPerformance("attributeExtraction");
+  }
+  extractAttributes(markup) {
+    const withoutTag = markup.replace(/^<[a-zA-Z][a-zA-Z0-9-]*\s*/, "");
+    let inSingle = false;
+    let inDouble = false;
+    let endIdx = withoutTag.length;
+    for (let i = 0; i < withoutTag.length; i++) {
+      const ch = withoutTag[i];
+      if (ch === '"' && !inSingle) inDouble = !inDouble;
+      else if (ch === "'" && !inDouble) inSingle = !inSingle;
+      else if (ch === ">" && !inSingle && !inDouble) {
+        endIdx = i;
+        break;
+      }
+    }
+    const attrString = withoutTag.slice(0, endIdx).replace(/\s*\/?\s*$/, "").trim();
+    const results = [];
+    for (const match of attrString.matchAll(this.ATTR_PATTERN)) {
+      const raw = match[0];
+      const full = match[1];
+      if (!full) continue;
+      const value = match[2] ?? match[3] ?? match[4] ?? "true";
+      const prefix = full[0];
+      const isSpecial = prefix === ":" || prefix === "@" || prefix === "$";
+      const name = isSpecial ? full.slice(1) : full;
+      const meta = { name, content: value, raw, prefix: isSpecial ? prefix : "" };
+      if (prefix === ":") results.push(new AreBindingAttribute(meta));
+      else if (prefix === "@") results.push(new AreEventAttribute(meta));
+      else if (prefix === "$") results.push(new AreDirectiveAttribute(meta));
+      else results.push(new AreStaticAttribute(meta));
+    }
+    return results;
+  }
+};
+__decorateClass([
+  A_Feature.Extend({
+    name: AreNodeFeatures.onTokenize,
+    scope: [AreComponentNode, AreRootNode]
+  }),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreContext)),
+  __decorateParam(2, A_Inject(A_Logger))
+], AreHTMLTokenizer.prototype, "tokenize", 1);
+var AreHTMLLifecycle = class extends AreLifecycle {
+  initComponent(node, scope, context, logger, ...args) {
+    super.init(node, scope, context, logger, ...args);
+  }
+  initRoot(node, scope, context, signalsContext, logger, ...args) {
+    signalsContext?.subscribe(node);
+    super.init(node, scope, context, logger, ...args);
+  }
+  initText(node, scope, context, logger, ...args) {
+    const scene = new AreScene(node.aseid);
+    scope.register(scene);
+  }
+  initInterpolation(node, scope, context, logger, ...args) {
+    const scene = new AreScene(node.aseid);
+    scope.register(scene);
+  }
+  updateDirectiveAttribute(directive, scope, feature, logger, ...args) {
+    if (directive.component) {
+      feature.chain(directive.component, AreDirectiveFeatures.Update, directive.owner.scope);
+    } else {
+      logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named "AreDirective${A_FormatterHelper.toPascalCase(directive.name)}" to handle this directive.`);
+    }
+  }
+};
+__decorateClass([
+  AreLifecycle.Init(AreComponentNode),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLLifecycle.prototype, "initComponent", 1);
+__decorateClass([
+  AreLifecycle.Init(AreRootNode),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(3, A_Inject(AreSignalsContext)),
+  __decorateParam(4, A_Inject(A_Logger))
+], AreHTMLLifecycle.prototype, "initRoot", 1);
+__decorateClass([
+  AreLifecycle.Init(AreText),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLLifecycle.prototype, "initText", 1);
+__decorateClass([
+  AreLifecycle.Init(AreInterpolation),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(AreHTMLEngineContext)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLLifecycle.prototype, "initInterpolation", 1);
+__decorateClass([
+  A_Feature.Extend({
+    name: AreAttributeFeatures.Update,
+    scope: [AreDirectiveAttribute]
+  }),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Scope)),
+  __decorateParam(2, A_Inject(A_Feature)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLLifecycle.prototype, "updateDirectiveAttribute", 1);
+var AreHTMLTransformer = class extends AreTransformer {
+  transformDirectiveAttribute(directive, store, feature, logger, ...args) {
+    store.watch(directive);
+    if (directive.component) {
+      feature.chain(directive.component, AreDirectiveFeatures.Transform, directive.owner.scope);
+    } else {
+      logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named "AreDirective${A_FormatterHelper.toPascalCase(directive.name)}" to handle this directive.`);
+    }
+    store.unwatch(directive);
+  }
+};
+__decorateClass([
+  A_Feature.Extend({
+    name: AreAttributeFeatures.Transform,
+    scope: [AreDirectiveAttribute]
+  }),
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(AreStore)),
+  __decorateParam(2, A_Inject(A_Feature)),
+  __decorateParam(3, A_Inject(A_Logger))
+], AreHTMLTransformer.prototype, "transformDirectiveAttribute", 1);
+
+// src/engine/AreHTML.engine.ts
+var AreHTMLEngine = class extends AreEngine {
+  get DefaultSyntax() {
+    return new AreSyntax({
+      trimWhitespace: true,
+      strictMode: true,
+      rules: [
+        // HTML comments
+        {
+          opening: "<!--",
+          closing: "-->",
+          component: AreComment,
+          priority: 10,
+          nested: false,
+          extract: (raw) => ({ content: raw.slice(4, -3).trim() })
+        },
+        // interpolations
+        {
+          opening: "{{",
+          closing: "}}",
+          component: AreInterpolation,
+          priority: 9,
+          nested: false,
+          extract: (_, match) => ({ key: match.content })
+        },
+        // are-root — matched before generic elements, produces AreRootNode
+        {
+          matcher: this.rootElementMatcher.bind(this),
+          component: AreRootNode,
+          priority: 5
+        },
+        // generic HTML elements
+        {
+          matcher: this.htmlElementMatcher.bind(this),
+          component: AreComponentNode,
+          priority: 4
+        },
+        // plain text fallback
+        {
+          component: AreText,
+          priority: 0
+        }
+      ]
+    });
+  }
+  async init(scope) {
+    this.package(scope, {
+      context: new AreHTMLEngineContext({}),
+      syntax: this.DefaultSyntax,
+      compiler: AreHTMLCompiler,
+      interpreter: AreHTMLInterpreter,
+      tokenizer: AreHTMLTokenizer,
+      lifecycle: AreHTMLLifecycle,
+      transformer: AreHTMLTransformer
+    });
+  }
+  rootElementMatcher(source, from, to, build) {
+    const rootTag = "are-root";
+    const tagStart = source.indexOf("<", from);
+    if (tagStart === -1 || tagStart >= to) return null;
+    const tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/);
+    if (!tagNameMatch || tagNameMatch[1].toLowerCase() !== rootTag) return null;
+    return this.htmlElementMatcher(source, from, to, build);
+  }
+  htmlElementMatcher(source, from, to, build) {
+    let index = from;
+    while (index < to) {
+      const tagStart = source.indexOf("<", index);
+      if (tagStart === -1 || tagStart >= to) return null;
+      if (source.startsWith("<!--", tagStart)) {
+        index = tagStart + 1;
+        continue;
+      }
+      if (source[tagStart + 1] === "/") {
+        index = tagStart + 1;
+        continue;
+      }
+      if (source[tagStart + 1] === "!" || source[tagStart + 1] === "?") {
+        index = tagStart + 1;
+        continue;
+      }
+      const tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/);
+      if (!tagNameMatch) {
+        index = tagStart + 1;
+        continue;
+      }
+      const tagName = tagNameMatch[1];
+      const openingTagEnd = AreHTMLEngine.findTagClose(source, tagStart);
+      if (openingTagEnd === -1) return null;
+      const openingTagStr = source.slice(tagStart, openingTagEnd + 1);
+      const idMatch = openingTagStr.match(/\bid=["']([^"']*)["']/);
+      const id = idMatch ? idMatch[1] : void 0;
+      if (source[openingTagEnd - 1] === "/") {
+        const raw = source.slice(tagStart, openingTagEnd + 1);
+        const content2 = source.slice(tagStart + tagNameMatch[0].length, openingTagEnd - 1);
+        const match2 = build(raw, content2, tagStart, "/>");
+        match2.payload = { entity: tagName, selfClose: true, id };
+        return match2;
+      }
+      const closingTag = `</${tagName}>`;
+      let level = 0;
+      let searchIndex = openingTagEnd + 1;
+      let closingStart = -1;
+      while (searchIndex < to) {
+        const nextOpen = source.indexOf(`<${tagName}`, searchIndex);
+        const nextClose = source.indexOf(closingTag, searchIndex);
+        if (nextClose === -1) break;
+        if (nextOpen !== -1 && nextOpen < nextClose) {
+          const charAfter = source[nextOpen + tagName.length + 1];
+          if (charAfter === " " || charAfter === ">" || charAfter === "/") {
+            level++;
+            searchIndex = nextOpen + tagName.length + 1;
+            continue;
+          }
+        }
+        if (level === 0) {
+          closingStart = nextClose;
+          break;
+        }
+        level--;
+        searchIndex = nextClose + closingTag.length;
+      }
+      if (closingStart === -1) return null;
+      const fullTag = source.slice(tagStart, closingStart + closingTag.length);
+      const content = source.slice(openingTagEnd + 1, closingStart);
+      const match = build(fullTag, content, tagStart, closingTag);
+      match.payload = { entity: tagName, selfClose: false, id };
+      return match;
+    }
+    return null;
+  }
+  /**
+   * Find the index of the closing `>` of an opening tag, skipping over
+   * `>` characters that appear inside quoted attribute values.
+   */
+  static findTagClose(source, from) {
+    let inSingle = false;
+    let inDouble = false;
+    for (let i = from; i < source.length; i++) {
+      const ch = source[i];
+      if (ch === '"' && !inSingle) inDouble = !inDouble;
+      else if (ch === "'" && !inDouble) inSingle = !inSingle;
+      else if (ch === ">" && !inSingle && !inDouble) return i;
+    }
+    return -1;
+  }
+};
+__decorateClass([
+  A_Feature.Extend({
+    name: A_ServiceFeatures.onBeforeLoad,
+    before: /.*/
+  }),
+  __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."
+  })
+], AreHTMLEngine);
+var AreRoot = class extends Are {
+  constructor() {
+    super(...arguments);
+    this.props = {
+      default: {
+        type: "string",
+        default: ""
+      }
+    };
+  }
+  async template(root, logger, signalsContext) {
+    const rootId = root.id;
+    if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      return;
+    }
+    const currentRoute = AreRoute$1.default();
+    let componentName;
+    if (currentRoute) {
+      const initialVector = new A_SignalVector([currentRoute]);
+      let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);
+      if (!renderTarget) {
+        const signalsMeta = A_Context.meta(AreSignals);
+        renderTarget = signalsMeta?.findComponentByVector(initialVector);
+      }
+      if (renderTarget?.name) {
+        componentName = A_FormatterHelper.toKebabCase(renderTarget.name);
+      }
+    }
+    if (!componentName) {
+      const defaultAttr = root.attributes.find((attr) => attr.name === "default");
+      componentName = defaultAttr?.content;
+    }
+    if (!componentName) {
+      logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or "default" attribute is set.');
+      return;
+    }
+    root.setContent(`<${componentName}></${componentName}>`);
+  }
+  async onSignal(root, vector, store, logger, signalsContext) {
+    console.log("Received signal vector in AreRoot:", root, vector);
+    const rootId = root.id;
+    if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      return;
+    }
+    let renderTarget = signalsContext?.findComponentByVector(rootId, vector);
+    if (!renderTarget) {
+      const signalsMeta = A_Context.meta(AreSignals);
+      renderTarget = signalsMeta?.findComponentByVector(vector);
+    }
+    const componentName = renderTarget?.name ? A_FormatterHelper.toKebabCase(renderTarget.name) : store.get("default");
+    if (!componentName) {
+      logger.warning("No component found for rendering in AreRoot. Please ensure that the signal vector matches at least one component or that a default component name is provided in the store.");
+      return;
+    }
+    root.setContent(`<${componentName}></${componentName}>`);
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      child.unmount();
+      child.destroy();
+      root.removeChild(child);
+    }
+    root.tokenize();
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      child.init();
+      const res = child.load();
+      if (res instanceof Promise) {
+        await res;
+      }
+      child.transform();
+      child.compile();
+      child.mount();
+    }
+  }
+};
+__decorateClass([
+  Are.Template,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Logger)),
+  __decorateParam(2, A_Inject(AreSignalsContext))
+], AreRoot.prototype, "template", 1);
+__decorateClass([
+  Are.Signal,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_SignalVector)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(A_Logger)),
+  __decorateParam(4, A_Inject(AreSignalsContext))
+], AreRoot.prototype, "onSignal", 1);
+AreRoot = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AreRoot",
+    description: "The AreRoot component serves as the foundational entry point for the A-Concept Rendering Engine (ARE). It is responsible for initializing the rendering process, managing the root node of the component tree, and handling signal-based rendering logic. The AreRoot component processes incoming signals to determine which child components to render, allowing for dynamic and responsive UI updates based on application state and user interactions."
+  })
+], AreRoot);
+var AreWatcher = class extends A_Component {
+  constructor() {
+    super();
+    this.handlers = /* @__PURE__ */ new Set();
+    this.current = new URL(window.location.href);
+    // ── Listeners ─────────────────────────────────────────────────────────────
+    this.onPopState = () => {
+      this.notify();
+    };
+    this.onHashChange = () => {
+      this.notify();
+    };
+    this.onURLChange = () => {
+      this.notify();
+    };
+    this.patchHistory();
+    this.attachListeners();
+  }
+  // ── Public ────────────────────────────────────────────────────────────────
+  onChange(handler) {
+    this.handlers.add(handler);
+    return () => this.handlers.delete(handler);
+  }
+  get url() {
+    return this.current;
+  }
+  destroy() {
+    window.removeEventListener("popstate", this.onPopState);
+    window.removeEventListener("hashchange", this.onHashChange);
+    window.removeEventListener("urlchange", this.onURLChange);
+    this.handlers.clear();
+  }
+  attachListeners() {
+    window.addEventListener("popstate", this.onPopState);
+    window.addEventListener("hashchange", this.onHashChange);
+    window.addEventListener("urlchange", this.onURLChange);
+  }
+  // ── Patch pushState / replaceState ────────────────────────────────────────
+  patchHistory() {
+    const patch = (original) => function(...args) {
+      original.apply(this, args);
+      window.dispatchEvent(new Event("urlchange"));
+    };
+    history.pushState = patch(history.pushState);
+    history.replaceState = patch(history.replaceState);
+  }
+  // ── Notify ────────────────────────────────────────────────────────────────
+  notify() {
+    const next = new URL(window.location.href);
+    if (next.href === this.current.href) return;
+    this.current = next;
+    for (const handler of this.handlers) {
+      handler(this.current);
+    }
+  }
+};
+AreWatcher = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AreWatcher",
+    description: "AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework."
+  })
+], AreWatcher);
+
+export { AddAttributeInstruction, AddElementInstruction, AddInterpolationInstruction, AddListenerInstruction, AddStyleInstruction, AddTextInstruction, AreBindingAttribute, AreComment, AreComponentNode, AreDirective, AreDirectiveAttribute, AreDirectiveContext, AreDirectiveFeatures, AreDirectiveFor, AreDirectiveIf, AreDirectiveMeta, AreEventAttribute, AreHTMLAttribute, AreHTMLCompiler, AreHTMLEngine, AreHTMLEngineContext, AreHTMLInstructions, AreHTMLInterpreter, AreHTMLLifecycle, AreHTMLNode, AreHTMLTokenizer, AreHTMLTransformer, AreInterpolation, AreRoot, AreRootNode, AreRoute, AreStaticAttribute, AreStyle, AreText, AreWatcher };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map