@adaas/are-html 0.0.2 → 0.0.4

package/examples/{dashboard/dist/mnzfypsd-6zjt7w.js → jumpstart/dist/mor90p6y-0plg7g.js}

@@ -8998,7 +8998,7 @@ AreEngine = __decorateClass3([
   })
 ], AreEngine);
 var _a109;
-var AreWatcher = (_a109 = class extends v {
+var AreRouteWatcher = (_a109 = class extends v {
   /**
    * Initialize the watcher. This method is called once when the watcher is first created. Use this to set up any necessary state or start observing changes.
    */
@@ -9011,17 +9011,17 @@ var AreWatcher = (_a109 = class extends v {
   }
   destroy() {
   }
-}, __name(_a109, "AreWatcher"), _a109);
+}, __name(_a109, "AreRouteWatcher"), _a109);
 __decorateClass3([
   Ce.Stop()
-], AreWatcher.prototype, "destroy", 1);
-AreWatcher = __decorateClass3([
+], AreRouteWatcher.prototype, "destroy", 1);
+AreRouteWatcher = __decorateClass3([
   c2.Component({
     namespace: "A-ARE",
-    name: "AreWatcher",
-    description: "AreWatcher is a component that observes changes and produces A_Signals Depending on the actual handlers"
+    name: "AreRouteWatcher",
+    description: "AreRouteWatcher is a component that observes changes and produces A_Signals Depending on the actual handlers"
   })
-], AreWatcher);
+], AreRouteWatcher);
 var _a110;
 var _a111;
 var AreContainer = (_a111 = class extends A_Service {
@@ -9060,7 +9060,7 @@ __decorateClass3([
   __decorateParam3(1, ke(AreContext)),
   __decorateParam3(2, F.All()),
   __decorateParam3(2, F.Flat()),
-  __decorateParam3(2, ke(AreWatcher)),
+  __decorateParam3(2, ke(AreRouteWatcher)),
   __decorateParam3(3, ke(A_Logger))
 ], AreContainer.prototype, _a110, 1);
 var _a112;
@@ -9104,1105 +9104,960 @@ var AreRoute = (_a117 = class extends AreSignal {
   }
 }, __name(_a117, "_AreRoute"), _a117);
 
-// examples/dashboard/src/components/DashboardApp.component.ts
-var _DashboardApp = class _DashboardApp extends Are {
-  template(node) {
-    node.setContent(`
-            <div class="dashboard">
-                <dashboard-header></dashboard-header>
-                <dashboard-sidebar></dashboard-sidebar>
-                <dashboard-main></dashboard-main>
-            </div>
-        `);
-  }
-  data(store) {
-    store.set({
-      appName: "ARE Dashboard"
-    });
-  }
-};
-__name(_DashboardApp, "DashboardApp");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardApp.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardApp.prototype, "data", 1);
-var DashboardApp = _DashboardApp;
-
-// examples/dashboard/src/components/DashboardHeader.component.ts
-var _DashboardHeader = class _DashboardHeader extends Are {
-  template(node) {
-    node.setContent(`
-            <header class="header">
-                <dashboard-logo></dashboard-logo>
-                <dashboard-nav></dashboard-nav>
-                <div class="header-actions">
-                    <div class="header-search">
-                        <span class="header-search-icon">\u2315</span>
-                        <span class="header-search-text">{{searchPlaceholder}}</span>
-                    </div>
-                    <div class="header-notification">
-                        \u{1F514}
-                        <span class="header-notification-badge"></span>
-                    </div>
-                </div>
-            </header>
-        `);
-  }
-  data(store) {
-    store.set({
-      title: "Dashboard",
-      searchPlaceholder: "Search\u2026"
-    });
+// examples/jumpstart/src/components/A-Btn.component.ts
+var _ABtn = class _ABtn extends Are {
+  constructor() {
+    super(...arguments);
+    this.props = {
+      name: {
+        type: "string",
+        default: "A_Button Element"
+      }
+    };
   }
-};
-__name(_DashboardHeader, "DashboardHeader");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardHeader.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardHeader.prototype, "data", 1);
-var DashboardHeader = _DashboardHeader;
-
-// examples/dashboard/src/components/DashboardLogo.component.ts
-var _DashboardLogo = class _DashboardLogo extends Are {
-  async template(node) {
+  async template(node, store) {
     node.setContent(`
-            <div class="logo">
-                <div class="logo-icon">A</div>
-                <span class="logo-text">{{brandName}}</span>
-            </div>
+                <button class="a-btn" @click="handleClick"> Make it:  {{name}} {{number}}</button> 
         `);
   }
-  async data(store) {
-    store.set({
-      brandName: "ARE Platform"
-    });
+  filter(test) {
+    console.log("test", test);
   }
-};
-__name(_DashboardLogo, "DashboardLogo");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardLogo.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardLogo.prototype, "data", 1);
-var DashboardLogo = _DashboardLogo;
-
-// examples/dashboard/src/components/DashboardNav.component.ts
-var _DashboardNav = class _DashboardNav extends Are {
-  template(node) {
-    node.setContent(`
-            <nav class="nav">
-                <dashboard-nav-item></dashboard-nav-item>
-            </nav>
-        `);
+  async styles(node) {
   }
-  data(store) {
+  async data(node, store) {
     store.set({
-      section: "navigation"
+      name: "A_Button Element",
+      showInput: false,
+      bgColor: "#007BFF",
+      btn2: "Button 2",
+      showInput2: false,
+      number: 0
     });
   }
-};
-__name(_DashboardNav, "DashboardNav");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardNav.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardNav.prototype, "data", 1);
-var DashboardNav = _DashboardNav;
-
-// examples/dashboard/src/components/DashboardNavItem.component.ts
-var _DashboardNavItem = class _DashboardNavItem extends Are {
-  template(node) {
-    node.setContent(`
-            <span class="nav-item nav-item-active">{{label1}}</span>
-            <span class="nav-item">{{label2}}</span>
-            <span class="nav-item">{{label3}}</span>
-            <span class="nav-item">{{label4}}</span>
-        `);
-  }
-  data(store) {
-    store.set({
-      label1: "Overview",
-      label2: "Analytics",
-      label3: "Reports",
-      label4: "Settings"
-    });
+  async handleClick(scope, node, store, logger, event, scene) {
+    store.set("number", Math.floor(Math.random() * 1e3));
+    store.set("name", `Clicked! `);
+    console.log("Changing ShowInput from ", store.get("showInput"));
+    store.set("showInput", !store.get("showInput"));
+    console.log("Changing ShowInput to ", store.get("showInput"), store);
+    store.set("bgColor", "#ff5733");
+    console.log("event data:", event);
+    await node.update();
+  }
+  async handleClick2(scope, node, store, logger, event, scene) {
+    store.set("btn2", `Button 2 Clicked! `);
+    store.set("showInput2", !store.get("showInput2"));
+    console.log("event data:", event);
+    await node.update();
   }
 };
-__name(_DashboardNavItem, "DashboardNavItem");
+__name(_ABtn, "ABtn");
 __decorateClass([
   Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardNavItem.prototype, "template", 1);
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreStore))
+], _ABtn.prototype, "template", 1);
 __decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardNavItem.prototype, "data", 1);
-var DashboardNavItem = _DashboardNavItem;
-
-// examples/dashboard/src/components/DashboardSidebar.component.ts
-var _DashboardSidebar = class _DashboardSidebar extends Are {
-  template(node) {
-    node.setContent(`
-            <aside class="sidebar">
-            {{section}}
-                <dashboard-user-card></dashboard-user-card>
-                <dashboard-menu></dashboard-menu>
-            </aside>
-        `);
-  }
-  data(store) {
-    store.set({
-      section: "sidebar"
-    });
-  }
-  async menuItemClicked(node, event, store) {
-    console.log("Sidebar clicked!", event.get("section"));
-    store.set("section", event.get("section"));
-  }
-};
-__name(_DashboardSidebar, "DashboardSidebar");
+  AreStore.Function
+], _ABtn.prototype, "filter", 1);
 __decorateClass([
-  Are.Template,
+  Are.Styles,
   __decorateParam(0, ke(G))
-], _DashboardSidebar.prototype, "template", 1);
+], _ABtn.prototype, "styles", 1);
 __decorateClass([
   Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardSidebar.prototype, "data", 1);
-__decorateClass([
-  Are.EventHandler,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreEvent)),
-  __decorateParam(2, ke(AreStore))
-], _DashboardSidebar.prototype, "menuItemClicked", 1);
-var DashboardSidebar = _DashboardSidebar;
-
-// examples/dashboard/src/components/DashboardUserCard.component.ts
-var _DashboardUserCard = class _DashboardUserCard extends Are {
-  template(node) {
-    node.setContent(`
-            <div class="user-card">
-                <div class="user-avatar">{{initials}}</div>
-                <div class="user-info">
-                    <div class="user-name">{{fullName}}</div>
-                    <div class="user-role">{{role}}</div>
-                </div>
-                <div class="user-status">
-                    <span class="user-status-dot"></span>
-                    {{status}}
-                </div>
-            </div>
-        `);
-  }
-  data(store) {
-    store.set({
-      initials: "JD",
-      fullName: "John Doe",
-      role: "Administrator",
-      status: "Online"
-    });
-  }
-};
-__name(_DashboardUserCard, "DashboardUserCard");
+  __decorateParam(1, ke(AreStore))
+], _ABtn.prototype, "data", 1);
 __decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardUserCard.prototype, "template", 1);
+  Are.EventHandler,
+  __decorateParam(0, ke(D)),
+  __decorateParam(1, ke(G)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(A_Logger)),
+  __decorateParam(4, ke(AreEvent)),
+  __decorateParam(5, ke(AreScene))
+], _ABtn.prototype, "handleClick", 1);
 __decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardUserCard.prototype, "data", 1);
-var DashboardUserCard = _DashboardUserCard;
+  Are.EventHandler,
+  __decorateParam(0, ke(D)),
+  __decorateParam(1, ke(G)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(A_Logger)),
+  __decorateParam(4, ke(AreEvent)),
+  __decorateParam(5, ke(AreScene))
+], _ABtn.prototype, "handleClick2", 1);
+var ABtn = _ABtn;
 
-// examples/dashboard/src/components/DashboardMenu.component.ts
-var _DashboardMenu = class _DashboardMenu extends Are {
-  template(node) {
-    node.setContent(`
-            <div class="menu-section">Main</div>
-            <ul class="menu">
-                <li @click="$handleClick('Dashboard')" :class="active==='Dashboard' ? 'menu-item-active' : ''" class="menu-item "><span class="menu-icon">\u229E</span> <span class="menu-text">{{item1}}</span></li>
-                <li @click="$handleClick('Users')" :class="active==='Users' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">\u22A1</span> <span class="menu-text">{{item2}}</span> <span class="menu-badge">{{usersBadge}}</span></li>
-                <li @click="$handleClick('Products')" :class="active==='Products' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">\u22A0</span> <span class="menu-text">{{item3}}</span></li>
-                <li @click="$handleClick('Orders')" :class="active==='Orders' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">\u229F</span> <span class="menu-text">{{item4}}</span></li>
-            </ul>
-            <div class="menu-section">System</div>
-            <ul class="menu">
-                <li 
-                $for="item in items" @click="$handleClick(item.name)" 
-                :class="active===item.name ? 'menu-item-active' : ''" 
-                class="menu-item">
-                <span class="menu-icon">\u2299</span> 
-                <span class="menu-text">{{item.name}}</span> 
-                <span $if="!item.badge" class="menu-badge">{{item.badge}}</span>
-                {{item.badge}}
-                </li>
-            </ul>
-        `);
+// src/lib/AreRoot/AreRoot.component.ts
+var AreRoot = class extends Are {
+  constructor() {
+    super(...arguments);
+    this.props = {
+      default: {
+        type: "string",
+        default: ""
+      }
+    };
   }
-  data(store) {
-    store.set({
-      active: "Dashboard",
-      item1: "Dashboard",
-      item2: "Users",
-      item3: "Products",
-      item4: "Orders",
-      item5: "Messages",
-      item6: "Settings",
-      usersBadge: "24",
-      msgBadge: "3",
-      items: [
-        { name: "Messages", badge: "3" },
-        { name: "Settings", badge: "0" }
-      ]
-    });
+  async template(root, logger, signalsContext) {
+    const rootId = root.id;
+    if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      return;
+    }
+    const currentRoute = AreRoute.default();
+    let componentName;
+    if (currentRoute) {
+      const initialVector = new A_SignalVector([currentRoute]);
+      let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);
+      if (!renderTarget) {
+        const signalsMeta = c.meta(AreSignals);
+        renderTarget = signalsMeta?.findComponentByVector(initialVector);
+      }
+      if (renderTarget?.name) {
+        componentName = h.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 handleClick(node, event, context, store, logger) {
-    try {
-      console.log("Menu item clicked!", event.get("args"), store);
-      const item = event.get("args")?.[0] || "Dashboard";
-      store.set("active", item);
-      context.endPerformance("Click");
-      logger.info(`Menu item clicked: ${item}`, ...context.performance);
-    } catch (error) {
-      logger.error(error);
+  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 = c.meta(AreSignals);
+      renderTarget = signalsMeta?.findComponentByVector(vector);
+    }
+    const componentName = renderTarget?.name ? h.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();
     }
   }
 };
-__name(_DashboardMenu, "DashboardMenu");
+__name(AreRoot, "AreRoot");
 __decorateClass([
   Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardMenu.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardMenu.prototype, "data", 1);
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(A_Logger)),
+  __decorateParam(2, ke(AreSignalsContext))
+], AreRoot.prototype, "template", 1);
 __decorateClass([
-  Are.EventHandler,
+  Are.Signal,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreEvent)),
-  __decorateParam(2, ke(AreContext)),
-  __decorateParam(3, ke(AreStore)),
-  __decorateParam(4, ke(A_Logger))
-], _DashboardMenu.prototype, "handleClick", 1);
-var DashboardMenu = _DashboardMenu;
+  __decorateParam(1, ke(A_SignalVector)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(A_Logger)),
+  __decorateParam(4, ke(AreSignalsContext))
+], AreRoot.prototype, "onSignal", 1);
+AreRoot = __decorateClass([
+  c2.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);
 
-// examples/dashboard/src/components/DashboardMain.component.ts
-var _DashboardMain = class _DashboardMain extends Are {
-  template(node) {
-    node.setContent(`
-            <main class="main">
-                <div class="main-header">
-                    <div>
-                        <h1 class="main-title">{{pageTitle}}</h1>
-                        <div class="main-subtitle">{{pageSubtitle}}</div>
-                    </div>
-                    <div class="main-actions">
-                        <button class="btn btn-outline"><span class="btn-icon">\u2B07</span> {{exportLabel}}</button>
-                        <button class="btn btn-primary" @click="(e)=>!!pageTitle? $testHandler(e,'item'):null"><span class="btn-icon">+</span>  {{addLabel}}</button>
-                    </div>
-                </div>
-                <dashboard-stats></dashboard-stats>
-                <dashboard-table></dashboard-table>
-            </main>
-        `);
-  }
-  data(store) {
-    store.set({
-      pageTitle: "Overview",
-      pageSubtitle: "Welcome back, John. Here's what's happening today.",
-      exportLabel: "Export",
-      addLabel: "New Record"
-    });
-  }
-  async testHandler(node, store, logger, event, scene) {
-    console.log("Button clicked! This is a test event handler.", event);
-  }
+// 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"
 };
-__name(_DashboardMain, "DashboardMain");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardMain.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardMain.prototype, "data", 1);
-__decorateClass([
-  Are.EventHandler,
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreStore)),
-  __decorateParam(2, ke(A_Logger)),
-  __decorateParam(3, ke(AreEvent)),
-  __decorateParam(4, ke(AreScene))
-], _DashboardMain.prototype, "testHandler", 1);
-var DashboardMain = _DashboardMain;
 
-// examples/dashboard/src/components/DashboardStats.component.ts
-var _DashboardStats = class _DashboardStats extends Are {
-  template(node) {
-    node.setContent(`
-            <div class="stats">
-                <dashboard-stat-card></dashboard-stat-card>
-            </div>
-        `);
-  }
-  data(store) {
-    store.set({
-      section: "stats"
-    });
-  }
-};
-__name(_DashboardStats, "DashboardStats");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardStats.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardStats.prototype, "data", 1);
-var DashboardStats = _DashboardStats;
-
-// examples/dashboard/src/components/DashboardStatCard.component.ts
-var _DashboardStatCard = class _DashboardStatCard extends Are {
-  template(node) {
-    node.setContent(`
-            <div class="stat-card">
-                <div class="stat-card-header">
-                    <div class="stat-label">{{label1}}</div>
-                    <div class="stat-icon stat-icon-purple">\u{1F464}</div>
-                </div>
-                <div class="stat-value">{{value1}}</div>
-                <div class="stat-change"><span class="stat-change-icon">\u2191</span> {{change1}}</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-card-header">
-                    <div class="stat-label">{{label2}}</div>
-                    <div class="stat-icon stat-icon-green">\u{1F4B0}</div>
-                </div>
-                <div class="stat-value">{{value2}}</div>
-                <div class="stat-change"><span class="stat-change-icon">\u2191</span> {{change2}}</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-card-header">
-                    <div class="stat-label">{{label3}}</div>
-                    <div class="stat-icon stat-icon-red">\u{1F4CA}</div>
-                </div>
-                <div class="stat-value">{{value3}}</div>
-                <div class="stat-change stat-change-down"><span class="stat-change-icon">\u2193</span> {{change3}}</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-card-header">
-                    <div class="stat-label">{{label4}}</div>
-                    <div class="stat-icon stat-icon-blue">\u{1F3AF}</div>
-                </div>
-                <div class="stat-value">{{value4}}</div>
-                <div class="stat-change"><span class="stat-change-icon">\u2191</span> {{change4}}</div>
-            </div>
-        `);
-  }
-  data(store) {
-    store.set({
-      label1: "Total Users",
-      value1: "24,521",
-      change1: "+12.5% from last month",
-      label2: "Revenue",
-      value2: "$48,390",
-      change2: "+8.2% from last month",
-      label3: "Active Sessions",
-      value3: "1,429",
-      change3: "-3.1% from last hour",
-      label4: "Conversion Rate",
-      value4: "3.24%",
-      change4: "+0.8% from last week"
-    });
+// src/lib/AreDirective/AreDirective.context.ts
+var _AreDirectiveContext = class _AreDirectiveContext extends A_ExecutionContext {
+  constructor(aseid) {
+    super(aseid.toString());
+    this.scope = {};
   }
 };
-__name(_DashboardStatCard, "DashboardStatCard");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardStatCard.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardStatCard.prototype, "data", 1);
-var DashboardStatCard = _DashboardStatCard;
+__name(_AreDirectiveContext, "AreDirectiveContext");
+var AreDirectiveContext = _AreDirectiveContext;
 
-// examples/dashboard/src/components/DashboardTable.component.ts
-var _DashboardTable = class _DashboardTable extends Are {
-  template(node) {
-    node.setContent(`
-            <div class="table-container">
-                <div class="table-header">
-                    <div>
-                        <div class="table-title">{{tableTitle}}</div>
-                        <div class="table-subtitle">{{tableSubtitle}}</div>
-                    </div>
-                    <div class="table-filter">
-                        <button class="table-filter-btn table-filter-btn-active">{{filterAll}}</button>
-                        <button class="table-filter-btn">{{filterActive}}</button>
-                        <button class="table-filter-btn">{{filterPending}}</button>
-                    </div>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>{{col1}}</th>
-                            <th>{{col2}}</th>
-                            <th>{{col3}}</th>
-                            <th>{{col4}}</th>
-                            <th>{{col5}}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td class="table-cell-primary">{{r1c1}}</td>
-                            <td>{{r1c2}}</td>
-                            <td>{{r1c3}}</td>
-                            <td><span class="status-badge status-active"><span class="status-dot"></span> {{r1c4}}</span></td>
-                            <td class="table-cell-secondary">{{r1c5}}</td>
-                        </tr>
-                        <tr>
-                            <td class="table-cell-primary">{{r2c1}}</td>
-                            <td>{{r2c2}}</td>
-                            <td>{{r2c3}}</td>
-                            <td><span class="status-badge status-pending"><span class="status-dot"></span> {{r2c4}}</span></td>
-                            <td class="table-cell-secondary">{{r2c5}}</td>
-                        </tr>
-                        <tr>
-                            <td class="table-cell-primary">{{r3c1}}</td>
-                            <td>{{r3c2}}</td>
-                            <td>{{r3c3}}</td>
-                            <td><span class="status-badge status-active"><span class="status-dot"></span> {{r3c4}}</span></td>
-                            <td class="table-cell-secondary">{{r3c5}}</td>
-                        </tr>
-                        <tr>
-                            <td class="table-cell-primary">{{r4c1}}</td>
-                            <td>{{r4c2}}</td>
-                            <td>{{r4c3}}</td>
-                            <td><span class="status-badge status-inactive"><span class="status-dot"></span> {{r4c4}}</span></td>
-                            <td class="table-cell-secondary">{{r4c5}}</td>
-                        </tr>
-                        <tr>
-                            <td class="table-cell-primary">{{r5c1}}</td>
-                            <td>{{r5c2}}</td>
-                            <td>{{r5c3}}</td>
-                            <td><span class="status-badge status-active"><span class="status-dot"></span> {{r5c4}}</span></td>
-                            <td class="table-cell-secondary">{{r5c5}}</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <div class="table-footer">
-                    <span>{{footerText}}</span>
-                    <div class="table-pagination">
-                        <button class="table-page-btn table-page-btn-active">1</button>
-                        <button class="table-page-btn">2</button>
-                        <button class="table-page-btn">3</button>
-                        <button class="table-page-btn">\u2192</button>
-                    </div>
-                </div>
-            </div>
-        `);
+// src/engine/AreHTML.context.ts
+var _AreHTMLEngineContext = class _AreHTMLEngineContext 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;
   }
-  data(store) {
-    store.set({
-      tableTitle: "Recent Transactions",
-      tableSubtitle: "Last 30 days activity",
-      filterAll: "All",
-      filterActive: "Active",
-      filterPending: "Pending",
-      col1: "Transaction",
-      col2: "Customer",
-      col3: "Amount",
-      col4: "Status",
-      col5: "Date",
-      r1c1: "INV-001",
-      r1c2: "Alice Johnson",
-      r1c3: "$1,250.00",
-      r1c4: "Active",
-      r1c5: "Mar 28, 2026",
-      r2c1: "INV-002",
-      r2c2: "Bob Williams",
-      r2c3: "$890.00",
-      r2c4: "Pending",
-      r2c5: "Mar 27, 2026",
-      r3c1: "INV-003",
-      r3c2: "Carol Davis",
-      r3c3: "$2,100.00",
-      r3c4: "Active",
-      r3c5: "Mar 26, 2026",
-      r4c1: "INV-004",
-      r4c2: "Dan Martinez",
-      r4c3: "$450.00",
-      r4c4: "Inactive",
-      r4c5: "Mar 25, 2026",
-      r5c1: "INV-005",
-      r5c2: "Eve Thompson",
-      r5c3: "$3,400.00",
-      r5c4: "Active",
-      r5c5: "Mar 24, 2026",
-      footerText: "Showing 1-5 of 24 results"
-    });
+  get container() {
+    return this._container;
   }
-};
-__name(_DashboardTable, "DashboardTable");
-__decorateClass([
-  Are.Template,
-  __decorateParam(0, ke(G))
-], _DashboardTable.prototype, "template", 1);
-__decorateClass([
-  Are.Data,
-  __decorateParam(0, ke(AreStore))
-], _DashboardTable.prototype, "data", 1);
-var DashboardTable = _DashboardTable;
-
-// src/lib/AreHTMLAttribute/AreHTML.attribute.ts
-var _AreHTMLAttribute = class _AreHTMLAttribute extends AreAttribute {
-  get owner() {
-    return this.scope.issuer();
+  getNodeElement(node) {
+    if (typeof node === "string") {
+      return this.index.nodeToHostElements.get(node);
+    } else {
+      return this.index.nodeToHostElements.get(node.aseid.toString());
+    }
   }
-};
-__name(_AreHTMLAttribute, "AreHTMLAttribute");
-var AreHTMLAttribute = _AreHTMLAttribute;
-
-// src/attributes/AreBinding.attribute.ts
-var _AreBindingAttribute = class _AreBindingAttribute 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;
-  // }
-};
-__name(_AreBindingAttribute, "AreBindingAttribute");
-var AreBindingAttribute = _AreBindingAttribute;
-
-// src/attributes/AreDirective.attribute.ts
-var _AreDirectiveAttribute = class _AreDirectiveAttribute extends AreHTMLAttribute {
   /**
-   * Returns a custom directive component associated with this attribute, if available.
+   * 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.
    * 
-   * 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.
+   * @param instruction 
+   * @param element 
    */
-  get component() {
-    const component = this.scope.resolve(`AreDirective${h.toPascalCase(this.name)}`);
-    return component;
+  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);
+    }
   }
-};
-__name(_AreDirectiveAttribute, "AreDirectiveAttribute");
-var AreDirectiveAttribute = _AreDirectiveAttribute;
-
-// src/attributes/AreEvent.attribute.ts
-var _AreEventAttribute = class _AreEventAttribute extends AreHTMLAttribute {
-};
-__name(_AreEventAttribute, "AreEventAttribute");
-var AreEventAttribute = _AreEventAttribute;
-
-// src/attributes/AreStatic.attribute.ts
-var _AreStaticAttribute = class _AreStaticAttribute extends AreHTMLAttribute {
-};
-__name(_AreStaticAttribute, "AreStaticAttribute");
-var AreStaticAttribute = _AreStaticAttribute;
-
-// src/lib/AreDirective/AreDirective.meta.ts
-var _AreDirectiveMeta = class _AreDirectiveMeta extends R {
-  constructor() {
-    super(...arguments);
-    this.priority = 0;
+  getElementByInstruction(instruction) {
+    if (typeof instruction === "string") {
+      return this.index.instructionToElement.get(instruction);
+    } else {
+      return this.index.instructionToElement.get(instruction.aseid.toString());
+    }
   }
-};
-__name(_AreDirectiveMeta, "AreDirectiveMeta");
-var AreDirectiveMeta = _AreDirectiveMeta;
-
-// 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
+   * 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 
    */
-  Compile: "_AreDirective_Compile",
+  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());
+    }
+  }
   /**
-   * Feature that should update the directiveAttribute based on the changes in the store or other dependencies. 
+   * 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 
    */
-  Update: "_AreDirective_Update"
-};
-
-// src/lib/AreDirective/AreDirective.component.ts
-var AreDirective = class extends v {
-  //==================================================================================
-  //======================== LIFECYCLE DECORATORS ====================================
-  //==================================================================================
+  addListener(element, eventName, listener) {
+    if (!this.index.elementListeners.has(element)) {
+      this.index.elementListeners.set(element, /* @__PURE__ */ new Map());
+    }
+    const byEvent = this.index.elementListeners.get(element);
+    if (!byEvent.has(eventName)) {
+      byEvent.set(eventName, /* @__PURE__ */ new Set());
+    }
+    byEvent.get(eventName).add(listener);
+  }
   /**
-   * 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.
+   * 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 priority 
+   * @param element 
+   * @param eventName 
    * @returns 
    */
-  static Priority(priority) {
-    return function(target) {
-      const meta = c.meta(target);
-      meta.priority = priority;
-      return target;
-    };
+  getListener(element, eventName) {
+    const set = this.index.elementListeners.get(element)?.get(eventName);
+    if (!set || set.size === 0) return void 0;
+    return set.values().next().value;
   }
   /**
-   * 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.
+   * Returns all listeners registered for a given element + event name.
    */
-  static get Transform() {
-    return (target, propertyKey, descriptor) => {
-      return w.Extend({
-        name: AreDirectiveFeatures.Transform,
-        scope: [target.constructor]
-      })(target, propertyKey, descriptor);
-    };
+  getListeners(element, eventName) {
+    return this.index.elementListeners.get(element)?.get(eventName);
   }
   /**
-   * 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.
+   * 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 
    */
-  static get Compile() {
-    return (target, propertyKey, descriptor) => {
-      return w.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 w.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 = c.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 = c.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 = c.scope(this).resolve(A_Logger);
-    if (logger) {
-      logger.warning(`No update logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
+  removeListener(element, eventName, listener) {
+    const byEvent = this.index.elementListeners.get(element);
+    if (!byEvent) return;
+    if (listener) {
+      const set = byEvent.get(eventName);
+      if (set) {
+        set.delete(listener);
+        if (set.size === 0) byEvent.delete(eventName);
+      }
+    } else {
+      byEvent.delete(eventName);
     }
   }
 };
-__name(AreDirective, "AreDirective");
-__decorateClass([
-  __decorateParam(0, ke(G))
-], AreDirective.prototype, "transform", 1);
-__decorateClass([
-  w.Extend({
-    name: AreDirectiveFeatures.Compile,
-    scope: [AreDirective]
-  }),
-  __decorateParam(0, ke(G))
-], AreDirective.prototype, "compile", 1);
-__decorateClass([
-  w.Extend({
-    name: AreDirectiveFeatures.Update,
-    scope: [AreDirective]
-  }),
-  __decorateParam(0, ke(G))
-], AreDirective.prototype, "update", 1);
-AreDirective = __decorateClass([
-  m.Define(AreDirectiveMeta)
-], AreDirective);
+__name(_AreHTMLEngineContext, "AreHTMLEngineContext");
+var AreHTMLEngineContext = _AreHTMLEngineContext;
 
-// 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/engine/AreHTML.constants.ts
+var BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "allowfullscreen",
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "inert",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+function isBooleanAttribute(name) {
+  return BOOLEAN_ATTRIBUTES.has(name.toLowerCase());
+}
+__name(isBooleanAttribute, "isBooleanAttribute");
+var IDL_FORM_PROPERTIES = {
+  INPUT: /* @__PURE__ */ new Set(["value", "checked", "indeterminate"]),
+  TEXTAREA: /* @__PURE__ */ new Set(["value"]),
+  SELECT: /* @__PURE__ */ new Set(["value"]),
+  OPTION: /* @__PURE__ */ new Set(["selected"])
 };
-
-// src/instructions/AddComment.instruction.ts
-var AddCommentInstruction = class extends AreDeclaration {
-  get content() {
-    return this.payload.content;
+function isIDLFormProperty(tagName, attrName) {
+  const set = IDL_FORM_PROPERTIES[tagName.toUpperCase()];
+  return !!set && set.has(attrName);
+}
+__name(isIDLFormProperty, "isIDLFormProperty");
+function normalizeClassValue(value) {
+  if (value === null || value === void 0 || value === false) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  if (Array.isArray(value)) {
+    return value.map(normalizeClassValue).filter(Boolean).join(" ");
+  }
+  if (typeof value === "object") {
+    const parts = [];
+    for (const key of Object.keys(value)) {
+      if (value[key]) parts.push(key);
+    }
+    return parts.join(" ");
+  }
+  return "";
+}
+__name(normalizeClassValue, "normalizeClassValue");
+function normalizeStyleValue(value) {
+  if (value === null || value === void 0 || value === false) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  if (Array.isArray(value)) {
+    return value.map(normalizeStyleValue).filter(Boolean).join("; ");
+  }
+  if (typeof value === "object") {
+    const parts = [];
+    for (const key of Object.keys(value)) {
+      const v2 = value[key];
+      if (v2 === null || v2 === void 0 || v2 === false) continue;
+      const kebab = key.replace(/[A-Z]/g, (m2) => "-" + m2.toLowerCase());
+      parts.push(`${kebab}: ${v2}`);
+    }
+    return parts.join("; ");
+  }
+  return "";
+}
+__name(normalizeStyleValue, "normalizeStyleValue");
+function parseEventName(raw) {
+  const [event, ...modifiers] = raw.split(".");
+  return { event, modifiers: new Set(modifiers) };
+}
+__name(parseEventName, "parseEventName");
+function toDOMString(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
   }
-  constructor(props) {
-    if ("aseid" in props) {
-      super(props);
-    } else {
-      super(AreHTMLInstructions.AddComment, props);
+}
+__name(toDOMString, "toDOMString");
+
+// src/engine/AreHTML.interpreter.ts
+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);
+        element.setAttribute("data-aseid", node.aseid.toString());
+        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;
     }
   }
-};
-__name(AddCommentInstruction, "AddCommentInstruction");
-AddCommentInstruction = __decorateClass([
-  c2.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);
-
-// src/lib/AreDirective/AreDirective.context.ts
-var _AreDirectiveContext = class _AreDirectiveContext extends A_ExecutionContext {
-  constructor(aseid) {
-    super(aseid.toString());
-    this.scope = {};
+  removeElement(declaration, context) {
+    const element = context.getElementByInstruction(declaration);
+    if (element && element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    context.removeInstructionElement(declaration);
   }
-};
-__name(_AreDirectiveContext, "AreDirectiveContext");
-var AreDirectiveContext = _AreDirectiveContext;
-
-// 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((d2) => d2.name === attribute.name);
-    if (forAttr) {
-      forTemplate.scope.deregister(forAttr);
-      node.scope.register(forAttr);
+  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.`
+      });
     }
-    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);
+    const { name, content, evaluate } = mutation.payload;
+    const rawValue = evaluate ? syntax.evaluate(content, store, {
+      ...directiveContext?.scope || {}
+    }) : content;
+    const el = element;
+    const lowerName = name.toLowerCase();
+    if (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;
     }
-    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);
+    if (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] = toDOMString(rawValue);
+        }
+      } catch {
+      }
+      if (propName !== "value") {
+        if (rawValue) el.setAttribute(name, "");
+        else el.removeAttribute(name);
       } else {
-        removedChildren.push(child);
+        el.setAttribute(name, toDOMString(rawValue));
       }
+      mutation.cache = toDOMString(rawValue);
+      return;
     }
-    for (const child of removedChildren) {
-      child.unmount();
-      owner.removeChild(child);
+    if (lowerName === "class") {
+      const newValue = 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;
     }
-    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
-      };
+    if (lowerName === "style") {
+      const newValue = normalizeStyleValue(rawValue);
+      if (newValue) el.setAttribute("style", newValue);
+      else el.removeAttribute("style");
+      mutation.cache = newValue;
+      return;
     }
-    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();
+    const stringValue = toDOMString(rawValue);
+    if (stringValue === "" && evaluate && (rawValue === false || rawValue === null || rawValue === void 0)) {
+      el.removeAttribute(name);
+    } else {
+      el.setAttribute(name, stringValue);
     }
+    mutation.cache = stringValue;
   }
-  // ─────────────────────────────────────────────────────────────────────────────
-  // ── 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((a2) => a2.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);
+  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);
     }
-    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);
+  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.`
+      });
     }
-    let directiveContext = itemNode.scope.resolveFlat(AreDirectiveContext);
-    if (!directiveContext) {
-      directiveContext = new AreDirectiveContext(itemNode.aseid);
-      itemNode.scope.register(directiveContext);
+    const { event: eventName, modifiers } = 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 = /* @__PURE__ */ __name((...args) => {
+        const event = new AreEvent(handler);
+        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);
+      }, "handlerFn");
+      handlerScope[`$${handler}`] = handlerFn;
     }
-    directiveContext.scope = {
-      ...directiveContext.scope,
-      [key]: item,
-      [index || "index"]: i
-    };
-    itemNode.scene.activate();
-    return itemNode;
+    const callback = /* @__PURE__ */ __name((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((m2) => m2 in KEY_ALIASES || m2 === "ctrl" || m2 === "alt" || m2 === "shift" || m2 === "meta");
+          if (keyMods.length > 0) {
+            const keyMatch = keyMods.some((m2) => {
+              if (m2 === "ctrl") return e.ctrlKey;
+              if (m2 === "alt") return e.altKey;
+              if (m2 === "shift") return e.shiftKey;
+              if (m2 === "meta") return e.metaKey;
+              const aliases = KEY_ALIASES[m2];
+              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;
+      }
+    }, "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);
   }
-};
-__name(AreDirectiveFor, "AreDirectiveFor");
-__decorateClass([
-  AreDirective.Transform,
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreScene)),
-  __decorateParam(4, ke(A_Logger))
-], AreDirectiveFor.prototype, "transform", 1);
-__decorateClass([
-  AreDirective.Compile,
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreStore)),
-  __decorateParam(2, ke(AreScene))
-], AreDirectiveFor.prototype, "compile", 1);
-__decorateClass([
-  AreDirective.Update,
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreStore)),
-  __decorateParam(2, ke(AreScene))
-], AreDirectiveFor.prototype, "update", 1);
-AreDirectiveFor = __decorateClass([
-  AreDirective.Priority(1)
-], AreDirectiveFor);
-
-// src/directives/AreDirectiveIf.directive.ts
-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((d2) => d2.name === attribute.name);
-    if (ifAttr) {
-      ifTemplate.scope.deregister(ifAttr);
-      node.scope.register(ifAttr);
+  removeEventListener(mutation, context) {
+    const element = context.getElementByInstruction(mutation.parent);
+    if (!element) return;
+    const { name } = mutation.payload;
+    const { event: eventName } = parseEventName(name);
+    const listener = mutation.payload._callback;
+    if (listener) {
+      element.removeEventListener(eventName, listener);
+      context.removeListener(element, name, listener);
+      mutation.payload._callback = void 0;
     }
-    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, {
+  addText(declaration, context, store, syntax, directiveContext, logger) {
+    const node = declaration.owner.parent;
+    const { content, evaluate } = declaration.payload;
+    const rawValue = evaluate ? syntax.evaluate(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();
+    }) : content;
+    const value = toDOMString(rawValue);
+    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:`);
   }
-  update(attribute, store, scope, syntax, scene, ...args) {
-    attribute.value = syntax.evaluate(attribute.content, store);
-    if (attribute.value) {
-      attribute.template.scene.activate();
-      attribute.template.mount();
+  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 rawValue = evaluate ? syntax.evaluate(content, store, {
+      ...directiveContext?.scope || {}
+    }) : content;
+    const value = toDOMString(rawValue);
+    if (!node) {
+      const commentNode = context.container.createComment(value);
+      context.container.body.appendChild(commentNode);
+      context.setInstructionElement(declaration, commentNode);
     } else {
-      attribute.template.unmount();
-      attribute.template.scene.deactivate();
+      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);
   }
 };
-__name(AreDirectiveIf, "AreDirectiveIf");
+__name(AreHTMLInterpreter, "AreHTMLInterpreter");
 __decorateClass([
-  AreDirective.Transform,
+  c2.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, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreScene)),
-  __decorateParam(4, ke(A_Logger))
-], AreDirectiveIf.prototype, "transform", 1);
+  __decorateParam(1, ke(AreHTMLEngineContext)),
+  __decorateParam(2, ke(A_Logger))
+], AreHTMLInterpreter.prototype, "addElement", 1);
 __decorateClass([
-  AreDirective.Compile,
+  c2.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, ke(G)),
-  __decorateParam(1, ke(AreStore)),
-  __decorateParam(2, ke(AreScene)),
-  __decorateParam(3, ke(AreSyntax)),
-  __decorateParam(4, ke(AreDirectiveContext))
-], AreDirectiveIf.prototype, "compile", 1);
+  __decorateParam(1, ke(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeElement", 1);
 __decorateClass([
-  AreDirective.Update,
+  c2.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, ke(G)),
-  __decorateParam(1, ke(AreStore)),
-  __decorateParam(2, ke(D)),
+  __decorateParam(1, ke(AreHTMLEngineContext)),
+  __decorateParam(2, ke(AreStore)),
   __decorateParam(3, ke(AreSyntax)),
-  __decorateParam(4, ke(AreScene))
-], AreDirectiveIf.prototype, "update", 1);
-AreDirectiveIf = __decorateClass([
-  AreDirective.Priority(2)
-], AreDirectiveIf);
-
-// src/instructions/AddAttribute.instruction.ts
-var AddAttributeInstruction = class extends AreMutation {
-  constructor(parent, props) {
-    if ("aseid" in props) {
-      super(props);
-    } else {
-      super(AreHTMLInstructions.AddAttribute, parent, props);
-    }
-  }
-};
-__name(AddAttributeInstruction, "AddAttributeInstruction");
-AddAttributeInstruction = __decorateClass([
+  __decorateParam(4, ke(AreDirectiveContext)),
+  __decorateParam(5, ke(A_Logger))
+], AreHTMLInterpreter.prototype, "addAttribute", 1);
+__decorateClass([
+  c2.Method({
+    description: "Remove an attribute from an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddAttribute),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeAttribute", 1);
+__decorateClass([
+  c2.Method({
+    description: "Add an event listener to an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Apply(AreHTMLInstructions.AddListener),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(AreSyntax)),
+  __decorateParam(4, ke(AreDirectiveContext)),
+  __decorateParam(5, ke(A_Logger))
+], AreHTMLInterpreter.prototype, "addEventListener", 1);
+__decorateClass([
+  c2.Method({
+    description: "Remove an event listener from an HTML element based on the provided mutation instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddListener),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeEventListener", 1);
+__decorateClass([
+  c2.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, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(AreSyntax)),
+  __decorateParam(4, ke(AreDirectiveContext)),
+  __decorateParam(5, ke(A_Logger))
+], AreHTMLInterpreter.prototype, "addText", 1);
+__decorateClass([
+  c2.Method({
+    description: "Remove text content from an HTML element based on the provided declaration instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddText),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeText", 1);
+__decorateClass([
+  c2.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, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(AreSyntax)),
+  __decorateParam(4, ke(AreDirectiveContext)),
+  __decorateParam(5, ke(A_Logger))
+], AreHTMLInterpreter.prototype, "addComment", 1);
+__decorateClass([
+  c2.Method({
+    description: "Remove a comment node from the DOM based on the provided declaration instruction."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.AddComment),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "removeComment", 1);
+AreHTMLInterpreter = __decorateClass([
   c2.Component({
     namespace: "A-ARE",
-    name: "AddAttributeInstruction",
-    description: "Sets an attribute on an HTML element. Apply calls setAttribute; revert calls removeAttribute."
+    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."
   })
-], AddAttributeInstruction);
+], AreHTMLInterpreter);
 
-// src/instructions/AddListener.instruction.ts
-var AddListenerInstruction = class extends AreMutation {
-  constructor(parent, props) {
-    if ("aseid" in props) {
-      super(props);
-    } else {
-      super(AreHTMLInstructions.AddListener, parent, props);
-    }
+// src/lib/AreHTMLAttribute/AreHTML.attribute.ts
+var _AreHTMLAttribute = class _AreHTMLAttribute extends AreAttribute {
+  get owner() {
+    return this.scope.issuer();
   }
 };
-__name(AddListenerInstruction, "AddListenerInstruction");
-AddListenerInstruction = __decorateClass([
-  c2.Component({
-    namespace: "A-ARE",
-    name: "AddListenerInstruction",
-    description: "Attaches a DOM event listener to an element. Apply calls addEventListener; revert calls removeEventListener."
-  })
-], AddListenerInstruction);
+__name(_AreHTMLAttribute, "AreHTMLAttribute");
+var AreHTMLAttribute = _AreHTMLAttribute;
 
-// src/instructions/AddText.instruction.ts
-var AddTextInstruction = class extends AreDeclaration {
-  constructor(props) {
-    if ("aseid" in props) {
-      super(props);
-    } else {
-      super(AreHTMLInstructions.AddText, props);
-    }
+// src/attributes/AreBinding.attribute.ts
+var _AreBindingAttribute = class _AreBindingAttribute 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;
+  // }
+};
+__name(_AreBindingAttribute, "AreBindingAttribute");
+var AreBindingAttribute = _AreBindingAttribute;
+
+// src/attributes/AreDirective.attribute.ts
+var _AreDirectiveAttribute = class _AreDirectiveAttribute 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${h.toPascalCase(this.name)}`);
+    return component;
   }
 };
-__name(AddTextInstruction, "AddTextInstruction");
-AddTextInstruction = __decorateClass([
-  c2.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);
+__name(_AreDirectiveAttribute, "AreDirectiveAttribute");
+var AreDirectiveAttribute = _AreDirectiveAttribute;
+
+// src/attributes/AreEvent.attribute.ts
+var _AreEventAttribute = class _AreEventAttribute extends AreHTMLAttribute {
+};
+__name(_AreEventAttribute, "AreEventAttribute");
+var AreEventAttribute = _AreEventAttribute;
+
+// src/attributes/AreStatic.attribute.ts
+var _AreStaticAttribute = class _AreStaticAttribute extends AreHTMLAttribute {
+};
+__name(_AreStaticAttribute, "AreStaticAttribute");
+var AreStaticAttribute = _AreStaticAttribute;
 
 // src/lib/AreStyle/AreStyle.context.ts
 var _AreStyle = class _AreStyle extends L {
@@ -10280,6 +10135,36 @@ AreHTMLNode = __decorateClass([
   })
 ], AreHTMLNode);
 
+// src/nodes/AreInterpolation.ts
+var _AreInterpolation = class _AreInterpolation extends AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-interpolation"
+      }
+    });
+  }
+};
+__name(_AreInterpolation, "AreInterpolation");
+var AreInterpolation = _AreInterpolation;
+
+// src/nodes/AreText.ts
+var _AreText = class _AreText extends AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-text"
+      }
+    });
+  }
+};
+__name(_AreText, "AreText");
+var AreText = _AreText;
+
 // src/nodes/AreComment.ts
 var _AreComment = class _AreComment extends AreHTMLNode {
   fromNew(newEntity) {
@@ -10317,21 +10202,6 @@ AreComponentNode = __decorateClass([
   })
 ], AreComponentNode);
 
-// src/nodes/AreInterpolation.ts
-var _AreInterpolation = class _AreInterpolation extends AreHTMLNode {
-  fromNew(newEntity) {
-    super.fromNew({
-      ...newEntity,
-      payload: {
-        ...newEntity.payload || {},
-        entity: "are-interpolation"
-      }
-    });
-  }
-};
-__name(_AreInterpolation, "AreInterpolation");
-var AreInterpolation = _AreInterpolation;
-
 // src/nodes/AreRoot.ts
 var AreRootNode = class extends AreHTMLNode {
   /**
@@ -10360,268 +10230,353 @@ AreRootNode = __decorateClass([
   })
 ], AreRootNode);
 
-// src/nodes/AreText.ts
-var _AreText = class _AreText extends AreHTMLNode {
-  fromNew(newEntity) {
-    super.fromNew({
-      ...newEntity,
-      payload: {
-        ...newEntity.payload || {},
-        entity: "are-text"
-      }
-    });
+// src/engine/AreHTML.tokenizer.ts
+var _AreHTMLTokenizer = class _AreHTMLTokenizer extends AreTokenizer {
+  constructor() {
+    super(...arguments);
+    this.ATTR_PATTERN = /([$:@]?[\w.-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>/"'=]+)))?/g;
   }
-};
-__name(_AreText, "AreText");
-var AreText = _AreText;
-
-// src/engine/AreHTML.context.ts
-var _AreHTMLEngineContext = class _AreHTMLEngineContext 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());
+  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");
   }
-  /**
-   * 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);
-          }
-        }
+  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;
       }
     }
-  }
-  getElementsByGroup(instruction) {
-    if (typeof instruction === "string") {
-      return this.index.groupToElements.get(instruction);
-    } else {
-      return this.index.groupToElements.get(instruction.aseid.toString());
+    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;
   }
+};
+__name(_AreHTMLTokenizer, "AreHTMLTokenizer");
+__decorateClass([
+  w.Extend({
+    name: AreNodeFeatures.onTokenize,
+    scope: [AreComponentNode, AreRootNode]
+  }),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreContext)),
+  __decorateParam(2, ke(A_Logger))
+], _AreHTMLTokenizer.prototype, "tokenize", 1);
+var AreHTMLTokenizer = _AreHTMLTokenizer;
+
+// src/lib/AreDirective/AreDirective.constants.ts
+var AreDirectiveFeatures = {
   /**
-   * 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 
+   * 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.
    */
-  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);
-  }
+  Transform: "_AreDirective_Transform",
   /**
-   * 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 
+   * Feature that should convert a directiveAttribute definition into a set of SceneInstructions to be rendered correctly
    */
-  getListener(element, eventName) {
-    return this.index.elementListeners.get(element)?.get(eventName);
-  }
+  Compile: "_AreDirective_Compile",
   /**
-   * 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 
+   * Feature that should update the directiveAttribute based on the changes in the store or other dependencies. 
    */
-  removeListener(element, eventName) {
-    this.index.elementListeners.get(element)?.delete(eventName);
-  }
+  Update: "_AreDirective_Update"
 };
-__name(_AreHTMLEngineContext, "AreHTMLEngineContext");
-var AreHTMLEngineContext = _AreHTMLEngineContext;
 
-// src/engine/AreHTML.compiler.ts
-var AreHTMLCompiler = class extends AreCompiler {
-  compileInterpolation(interpolation, scene, store, logger, ...args) {
-    scene.plan(new AddTextInstruction({ content: interpolation.content, evaluate: true }));
+// src/engine/AreHTML.lifecycle.ts
+var _AreHTMLLifecycle = class _AreHTMLLifecycle extends AreLifecycle {
+  initComponent(node, scope, context, logger, ...args) {
+    super.init(node, scope, context, logger, ...args);
   }
-  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 }));
+  initRoot(node, scope, context, signalsContext, logger, ...args) {
+    signalsContext?.subscribe(node);
+    super.init(node, scope, context, logger, ...args);
   }
-  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
-    }));
+  initText(node, scope, context, logger, ...args) {
+    const scene = new AreScene(node.aseid);
+    scope.register(scene);
   }
-  compileDirectiveAttribute(directive, store, feature, logger, ...args) {
-    store.watch(directive);
+  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.Compile, directive.owner.scope);
+      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${h.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;
-          default:
-            break;
-        }
-      }
-      store.set(attribute.name, value);
-    } else {
-      const instruction = new AddAttributeInstruction(scene.host, {
-        name: attribute.name,
-        content: attribute.content,
-        evaluate: true
-      });
-      scene.plan(instruction);
-    }
   }
 };
-__name(AreHTMLCompiler, "AreHTMLCompiler");
+__name(_AreHTMLLifecycle, "AreHTMLLifecycle");
 __decorateClass([
-  AreCompiler.Compile(AreInterpolation),
+  AreLifecycle.Init(AreComponentNode),
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreScene)),
-  __decorateParam(2, ke(AreStore)),
+  __decorateParam(1, ke(D)),
+  __decorateParam(2, ke(AreHTMLEngineContext)),
   __decorateParam(3, ke(A_Logger))
-], AreHTMLCompiler.prototype, "compileInterpolation", 1);
+], _AreHTMLLifecycle.prototype, "initComponent", 1);
 __decorateClass([
-  AreCompiler.Compile(AreText),
+  AreLifecycle.Init(AreRootNode),
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreScene)),
-  __decorateParam(2, ke(A_Logger))
-], AreHTMLCompiler.prototype, "compileText", 1);
+  __decorateParam(1, ke(D)),
+  __decorateParam(2, ke(AreHTMLEngineContext)),
+  __decorateParam(3, ke(AreSignalsContext)),
+  __decorateParam(4, ke(A_Logger))
+], _AreHTMLLifecycle.prototype, "initRoot", 1);
 __decorateClass([
-  AreCompiler.Compile(AreStaticAttribute),
+  AreLifecycle.Init(AreText),
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreScene))
+  __decorateParam(1, ke(D)),
+  __decorateParam(2, ke(AreHTMLEngineContext)),
+  __decorateParam(3, ke(A_Logger))
+], _AreHTMLLifecycle.prototype, "initText", 1);
+__decorateClass([
+  AreLifecycle.Init(AreInterpolation),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(D)),
+  __decorateParam(2, ke(AreHTMLEngineContext)),
+  __decorateParam(3, ke(A_Logger))
+], _AreHTMLLifecycle.prototype, "initInterpolation", 1);
+__decorateClass([
+  w.Extend({
+    name: AreAttributeFeatures.Update,
+    scope: [AreDirectiveAttribute]
+  }),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(D)),
+  __decorateParam(2, ke(w)),
+  __decorateParam(3, ke(A_Logger))
+], _AreHTMLLifecycle.prototype, "updateDirectiveAttribute", 1);
+var AreHTMLLifecycle = _AreHTMLLifecycle;
+
+// src/engine/AreHTML.transformer.ts
+var _AreHTMLTransformer = class _AreHTMLTransformer 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${h.toPascalCase(directive.name)}" to handle this directive.`);
+    }
+    store.unwatch(directive);
+  }
+};
+__name(_AreHTMLTransformer, "AreHTMLTransformer");
+__decorateClass([
+  w.Extend({
+    name: AreAttributeFeatures.Transform,
+    scope: [AreDirectiveAttribute]
+  }),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreStore)),
+  __decorateParam(2, ke(w)),
+  __decorateParam(3, ke(A_Logger))
+], _AreHTMLTransformer.prototype, "transformDirectiveAttribute", 1);
+var AreHTMLTransformer = _AreHTMLTransformer;
+
+// src/instructions/AddAttribute.instruction.ts
+var AddAttributeInstruction = class extends AreMutation {
+  constructor(parent, props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddAttribute, parent, props);
+    }
+  }
+};
+__name(AddAttributeInstruction, "AddAttributeInstruction");
+AddAttributeInstruction = __decorateClass([
+  c2.Component({
+    namespace: "A-ARE",
+    name: "AddAttributeInstruction",
+    description: "Sets an attribute on an HTML element. Apply calls setAttribute; revert calls removeAttribute."
+  })
+], AddAttributeInstruction);
+
+// src/instructions/AddText.instruction.ts
+var AddTextInstruction = class extends AreDeclaration {
+  constructor(props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddText, props);
+    }
+  }
+};
+__name(AddTextInstruction, "AddTextInstruction");
+AddTextInstruction = __decorateClass([
+  c2.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);
+
+// src/instructions/AddListener.instruction.ts
+var AddListenerInstruction = class extends AreMutation {
+  constructor(parent, props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddListener, parent, props);
+    }
+  }
+};
+__name(AddListenerInstruction, "AddListenerInstruction");
+AddListenerInstruction = __decorateClass([
+  c2.Component({
+    namespace: "A-ARE",
+    name: "AddListenerInstruction",
+    description: "Attaches a DOM event listener to an element. Apply calls addEventListener; revert calls removeEventListener."
+  })
+], AddListenerInstruction);
+
+// src/engine/AreHTML.compiler.ts
+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${h.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, syntax, ...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;
+    const props = node.component?.props;
+    let propName;
+    if (props) {
+      if (props[attribute.name]) {
+        propName = attribute.name;
+      } else {
+        const camel = h.toCamelCase(attribute.name);
+        if (props[camel]) propName = camel;
+      }
+    }
+    if (propName && props) {
+      const propDefinition = props[propName];
+      const coerce = /* @__PURE__ */ __name((raw) => {
+        let value = raw;
+        if (propDefinition.type) {
+          switch (propDefinition.type) {
+            case "string":
+              value = value === void 0 || value === null ? "" : String(value);
+              break;
+            case "number":
+              value = Number(value);
+              break;
+            case "boolean":
+              value = Boolean(value);
+              break;
+          }
+        }
+        return value;
+      }, "coerce");
+      const watcher = {
+        update: /* @__PURE__ */ __name(() => {
+          try {
+            parentStore.watch(watcher);
+            const next = coerce(syntax.evaluate(attribute.content, parentStore));
+            parentStore.unwatch(watcher);
+            store.set(propName, next);
+          } catch (e) {
+            parentStore.unwatch(watcher);
+          }
+        }, "update")
+      };
+      parentStore.watch(watcher);
+      const initial = coerce(syntax.evaluate(attribute.content, parentStore));
+      parentStore.unwatch(watcher);
+      store.set(propName, initial);
+      return;
+    }
+    const instruction = new AddAttributeInstruction(scene.host, {
+      name: attribute.name,
+      content: attribute.content,
+      evaluate: true
+    });
+    scene.plan(instruction);
+  }
+};
+__name(AreHTMLCompiler, "AreHTMLCompiler");
+__decorateClass([
+  AreCompiler.Compile(AreInterpolation),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreScene)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(A_Logger))
+], AreHTMLCompiler.prototype, "compileInterpolation", 1);
+__decorateClass([
+  AreCompiler.Compile(AreText),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreScene)),
+  __decorateParam(2, ke(A_Logger))
+], AreHTMLCompiler.prototype, "compileText", 1);
+__decorateClass([
+  AreCompiler.Compile(AreStaticAttribute),
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreScene))
 ], AreHTMLCompiler.prototype, "compileStaticAttribute", 1);
 __decorateClass([
   AreCompiler.Compile(AreDirectiveAttribute),
@@ -10641,7 +10596,8 @@ __decorateClass([
   __decorateParam(1, ke(AreScene)),
   __decorateParam(2, F.Parent()),
   __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreStore))
+  __decorateParam(3, ke(AreStore)),
+  __decorateParam(4, ke(AreSyntax))
 ], AreHTMLCompiler.prototype, "compileBindingAttribute", 1);
 AreHTMLCompiler = __decorateClass([
   c2.Component({
@@ -10651,781 +10607,766 @@ AreHTMLCompiler = __decorateClass([
   })
 ], AreHTMLCompiler);
 
-// src/engine/AreHTML.interpreter.ts
-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);
+// 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: /* @__PURE__ */ __name((raw) => ({ content: raw.slice(4, -3).trim() }), "extract")
+        },
+        // interpolations
+        {
+          opening: "{{",
+          closing: "}}",
+          component: AreInterpolation,
+          priority: 9,
+          nested: false,
+          extract: /* @__PURE__ */ __name((_, match) => ({ key: match.content }), "extract")
+        },
+        // 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
         }
-        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);
+  async init(scope) {
+    this.package(scope, {
+      context: new AreHTMLEngineContext({}),
+      syntax: this.DefaultSyntax,
+      compiler: AreHTMLCompiler,
+      interpreter: AreHTMLInterpreter,
+      tokenizer: AreHTMLTokenizer,
+      lifecycle: AreHTMLLifecycle,
+      transformer: AreHTMLTransformer
+    });
   }
-  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;
-    }
+  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);
   }
-  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);
+  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;
       }
-    } 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 = /* @__PURE__ */ __name((...args) => {
-        const event = new AreEvent(handler);
-        event.set("args", args);
-        event.set("element", element);
-        event.set("instruction", mutation);
-        mutation.owner.emit(event);
-      }, "handlerFn");
-      handlerScope[`$${handler}`] = handlerFn;
-    }
-    const callback = /* @__PURE__ */ __name((e) => {
-      context.startPerformance("Click");
-      const result = syntax.evaluate(mutation.payload.handler, store, {
-        ...handlerScope,
-        ...directiveContext?.scope || {}
-      });
-      if (typeof result === "function") result(e);
-    }, "callback");
-    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.`
-        });
+      if (source[tagStart + 1] === "/") {
+        index = tagStart + 1;
+        continue;
       }
-      const existingNode = context.getElementByInstruction(declaration);
-      if (existingNode) {
-        existingNode.textContent = value;
-      } else {
-        const textNode = context.container.createTextNode(value);
-        element.appendChild(textNode);
-        context.setInstructionElement(declaration, textNode);
+      if (source[tagStart + 1] === "!" || source[tagStart + 1] === "?") {
+        index = tagStart + 1;
+        continue;
       }
-    }
-    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 tagNameMatch = source.slice(tagStart).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/);
+      if (!tagNameMatch) {
+        index = tagStart + 1;
+        continue;
       }
-      const existingNode = context.getElementByInstruction(declaration);
-      if (existingNode) {
-        existingNode.textContent = value;
-      } else {
-        const commentNode = context.container.createComment(value);
-        element.appendChild(commentNode);
-        context.setInstructionElement(declaration, commentNode);
+      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 === "/") {
+            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;
+          }
+        }
+        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;
     }
-    logger?.debug("green", `Comment ${node?.aseid.toString()} added to Context:`);
+    return null;
   }
-  removeComment(declaration, context) {
-    const element = context.getElementByInstruction(declaration);
-    if (!element) return;
-    element.parentNode?.removeChild(element);
-    context.removeInstructionElement(declaration);
+  /**
+   * 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;
   }
 };
-__name(AreHTMLInterpreter, "AreHTMLInterpreter");
-__decorateClass([
-  c2.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, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext)),
-  __decorateParam(2, ke(A_Logger))
-], AreHTMLInterpreter.prototype, "addElement", 1);
-__decorateClass([
-  c2.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, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext))
-], AreHTMLInterpreter.prototype, "removeElement", 1);
-__decorateClass([
-  c2.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, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreSyntax)),
-  __decorateParam(4, ke(AreDirectiveContext)),
-  __decorateParam(5, ke(A_Logger))
-], AreHTMLInterpreter.prototype, "addAttribute", 1);
-__decorateClass([
-  c2.Method({
-    description: "Remove an attribute from an HTML element based on the provided mutation instruction."
-  }),
-  AreInterpreter.Revert(AreHTMLInstructions.AddAttribute),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext))
-], AreHTMLInterpreter.prototype, "removeAttribute", 1);
+__name(AreHTMLEngine, "AreHTMLEngine");
 __decorateClass([
-  c2.Method({
-    description: "Add an event listener to an HTML element based on the provided mutation instruction."
+  w.Extend({
+    name: A_ServiceFeatures.onBeforeLoad,
+    before: /.*/
   }),
-  AreInterpreter.Apply(AreHTMLInstructions.AddListener),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreSyntax)),
-  __decorateParam(4, ke(AreDirectiveContext)),
-  __decorateParam(5, ke(A_Logger))
-], AreHTMLInterpreter.prototype, "addEventListener", 1);
+  __decorateParam(0, ke(D))
+], AreHTMLEngine.prototype, "init", 1);
+AreHTMLEngine = __decorateClass([
+  c2.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);
+
+// examples/jumpstart/src/components/List.component.ts
+var _ListComponent = class _ListComponent extends Are {
+  async template(node) {
+    node.setContent(`
+         <div class="menu-section">Main</div>
+        <ul class="menu">
+            <li @click="$handleClick('Dashboard')" :class="active==='Dashboard' ? 'menu-item-active' : ''" class="menu-item "><span class="menu-icon">\u229E</span> <span class="menu-text">{{item1}}</span></li>
+            <li $if="active=='Dashboard'" @click="$handleClick('Users')" :class="active==='Users' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">\u22A1</span> <span class="menu-text">{{item2}}</span> <span class="menu-badge">{{usersBadge}}</span></li>
+            <li @click="$handleClick('Products')" :class="active==='Products' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">\u22A0</span> <span class="menu-text">{{item3}}</span></li>
+            <li @click="$handleClick('Orders')" :class="active==='Orders' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">\u229F</span> <span class="menu-text">{{item4}}</span></li>
+        </ul>
+        <div class="menu-section">System</div>
+            <button @click="$add">Add +</button>
+            <div $if="active=='Dashboard'">
+                <ul class="menu">
+                    <li
+                    $for="item in items track item.name" @click="$handleClick(item.name)"
+                    :class="active===item.name ? 'menu-item-active' : ''"
+                    class="menu-item">
+                    <span class="menu-icon">\u2299</span>
+                    <span class="menu-text">{{item.name}}</span>
+                    <span $if="item.badge > 0" class="menu-badge">{{item.badge}}</span>
+                    <button @click.stop="$remove(item)">+</button>
+                    </li>
+                </ul>
+            </div>
+        `);
+  }
+  async data(store) {
+    store.set({
+      active: "Dashboard",
+      item1: "Dashboard",
+      item2: "Users",
+      item3: "Products",
+      item4: "Orders",
+      item5: "Messages",
+      item6: "Settings",
+      usersBadge: "24",
+      msgBadge: "3",
+      items: [
+        { name: "Messages", badge: 3 },
+        { name: "Settings", badge: 0 }
+      ]
+    });
+  }
+  add(node, event, context, store, logger) {
+    const currentItems = store.get("items") || [];
+    currentItems.push({
+      name: `Item ${currentItems.length + 1}`,
+      badge: 0
+    });
+    store.set("items", currentItems);
+  }
+  remove(node, event, context, store, logger) {
+    const itemToRemove = event.get("args")?.[0];
+    console.log("Removing item:", itemToRemove, "from store:", store);
+    if (!itemToRemove) {
+      logger.warning("No item specified for removal");
+      return;
+    }
+    const currentItems = store.get("items") || [];
+    const updatedItems = currentItems.filter((item) => item.name !== itemToRemove.name);
+    store.set("items", updatedItems);
+  }
+  async handleClick(node, event, context, store, logger) {
+    try {
+      console.log("Menu item clicked!", event.get("args"), store);
+      const item = event.get("args")?.[0] || "Dashboard";
+      store.set("active", item);
+      context.endPerformance("Click");
+      logger.info(`Menu item clicked: ${item}`, ...context.performance);
+    } catch (error) {
+      logger.error(error);
+    }
+  }
+};
+__name(_ListComponent, "ListComponent");
 __decorateClass([
-  c2.Method({
-    description: "Remove an event listener from an HTML element based on the provided mutation instruction."
-  }),
-  AreInterpreter.Revert(AreHTMLInstructions.AddListener),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext))
-], AreHTMLInterpreter.prototype, "removeEventListener", 1);
+  Are.Template,
+  __decorateParam(0, ke(G))
+], _ListComponent.prototype, "template", 1);
 __decorateClass([
-  c2.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, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreSyntax)),
-  __decorateParam(4, ke(AreDirectiveContext)),
-  __decorateParam(5, ke(A_Logger))
-], AreHTMLInterpreter.prototype, "addText", 1);
+  Are.Data,
+  __decorateParam(0, ke(AreStore))
+], _ListComponent.prototype, "data", 1);
 __decorateClass([
-  c2.Method({
-    description: "Remove text content from an HTML element based on the provided declaration instruction."
-  }),
-  AreInterpreter.Revert(AreHTMLInstructions.AddText),
+  Are.EventHandler,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext))
-], AreHTMLInterpreter.prototype, "removeText", 1);
+  __decorateParam(1, ke(AreEvent)),
+  __decorateParam(2, ke(AreContext)),
+  __decorateParam(3, ke(AreStore)),
+  __decorateParam(4, ke(A_Logger))
+], _ListComponent.prototype, "add", 1);
 __decorateClass([
-  c2.Method({
-    description: "Add a comment node to the DOM based on the provided declaration instruction."
-  }),
-  AreInterpreter.Apply(AreHTMLInstructions.AddComment),
-  AreInterpreter.Update(AreHTMLInstructions.AddComment),
+  Are.EventHandler,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(AreSyntax)),
-  __decorateParam(4, ke(AreDirectiveContext)),
-  __decorateParam(5, ke(A_Logger))
-], AreHTMLInterpreter.prototype, "addComment", 1);
+  __decorateParam(1, ke(AreEvent)),
+  __decorateParam(2, ke(AreContext)),
+  __decorateParam(3, ke(AreStore)),
+  __decorateParam(4, ke(A_Logger))
+], _ListComponent.prototype, "remove", 1);
 __decorateClass([
-  c2.Method({
-    description: "Remove a comment node from the DOM based on the provided declaration instruction."
-  }),
-  AreInterpreter.Revert(AreHTMLInstructions.AddComment),
+  Are.EventHandler,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreHTMLEngineContext))
-], AreHTMLInterpreter.prototype, "removeComment", 1);
-AreHTMLInterpreter = __decorateClass([
-  c2.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);
+  __decorateParam(1, ke(AreEvent)),
+  __decorateParam(2, ke(AreContext)),
+  __decorateParam(3, ke(AreStore)),
+  __decorateParam(4, ke(A_Logger))
+], _ListComponent.prototype, "handleClick", 1);
+var ListComponent = _ListComponent;
 
-// src/engine/AreHTML.tokenizer.ts
-var _AreHTMLTokenizer = class _AreHTMLTokenizer extends AreTokenizer {
+// src/lib/AreDirective/AreDirective.meta.ts
+var _AreDirectiveMeta = class _AreDirectiveMeta extends R {
   constructor() {
     super(...arguments);
-    this.ATTR_PATTERN = /([$:@]?[\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>/"'=]+)))?/g;
+    this.priority = 0;
   }
-  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);
+};
+__name(_AreDirectiveMeta, "AreDirectiveMeta");
+var AreDirectiveMeta = _AreDirectiveMeta;
+
+// src/lib/AreDirective/AreDirective.component.ts
+var AreDirective = class extends v {
+  //==================================================================================
+  //======================== 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 = c.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 w.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 w.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 w.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 = c.scope(this).resolve(A_Logger);
+    if (logger) {
+      logger.warning(`No transforming logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
     }
-    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;
-      }
+  compile(attribute, ...args) {
+    const logger = c.scope(this).resolve(A_Logger);
+    if (logger) {
+      logger.warning(`No compiling logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
     }
-    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));
+  }
+  update(attribute, ...args) {
+    const logger = c.scope(this).resolve(A_Logger);
+    if (logger) {
+      logger.warning(`No update logic defined for directive: ${attribute.name} with content: ${attribute.content}`);
     }
-    return results;
   }
 };
-__name(_AreHTMLTokenizer, "AreHTMLTokenizer");
+__name(AreDirective, "AreDirective");
+__decorateClass([
+  __decorateParam(0, ke(G))
+], AreDirective.prototype, "transform", 1);
 __decorateClass([
   w.Extend({
-    name: AreNodeFeatures.onTokenize,
-    scope: [AreComponentNode, AreRootNode]
+    name: AreDirectiveFeatures.Compile,
+    scope: [AreDirective]
   }),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(AreContext)),
-  __decorateParam(2, ke(A_Logger))
-], _AreHTMLTokenizer.prototype, "tokenize", 1);
-var AreHTMLTokenizer = _AreHTMLTokenizer;
+  __decorateParam(0, ke(G))
+], AreDirective.prototype, "compile", 1);
+__decorateClass([
+  w.Extend({
+    name: AreDirectiveFeatures.Update,
+    scope: [AreDirective]
+  }),
+  __decorateParam(0, ke(G))
+], AreDirective.prototype, "update", 1);
+AreDirective = __decorateClass([
+  m.Define(AreDirectiveMeta)
+], AreDirective);
 
-// src/engine/AreHTML.lifecycle.ts
-var _AreHTMLLifecycle = class _AreHTMLLifecycle extends AreLifecycle {
-  initComponent(node, scope, context, logger, ...args) {
-    super.init(node, scope, context, logger, ...args);
+// src/instructions/AddComment.instruction.ts
+var AddCommentInstruction = class extends AreDeclaration {
+  get content() {
+    return this.payload.content;
   }
-  initRoot(node, scope, context, signalsContext, logger, ...args) {
-    signalsContext?.subscribe(node);
-    super.init(node, scope, context, logger, ...args);
+  constructor(props) {
+    if ("aseid" in props) {
+      super(props);
+    } else {
+      super(AreHTMLInstructions.AddComment, props);
+    }
   }
-  initText(node, scope, context, logger, ...args) {
-    const scene = new AreScene(node.aseid);
-    scope.register(scene);
+};
+__name(AddCommentInstruction, "AddCommentInstruction");
+AddCommentInstruction = __decorateClass([
+  c2.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);
+
+// src/directives/AreDirectiveIf.directive.ts
+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((d2) => d2.name === attribute.name);
+    if (ifAttr) {
+      ifTemplate.scope.deregister(ifAttr);
+      node.scope.register(ifAttr);
+    }
+    node.init();
+    node.addChild(ifTemplate);
+    ifTemplate.scene.deactivate();
+    attribute.template = ifTemplate;
   }
-  initInterpolation(node, scope, context, logger, ...args) {
-    const scene = new AreScene(node.aseid);
-    scope.register(scene);
+  compile(attribute, store, scene, syntax, directiveContext, ...args) {
+    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();
   }
-  updateDirectiveAttribute(directive, scope, feature, logger, ...args) {
-    if (directive.component) {
-      feature.chain(directive.component, AreDirectiveFeatures.Update, directive.owner.scope);
+  update(attribute, store, scope, syntax, scene, ...args) {
+    const previous = !!attribute.value;
+    const next = !!syntax.evaluate(attribute.content, store);
+    attribute.value = next;
+    if (previous === next) return;
+    if (next) {
+      attribute.template.scene.activate();
+      attribute.template.mount();
     } else {
-      logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named "AreDirective${h.toPascalCase(directive.name)}" to handle this directive.`);
+      attribute.template.unmount();
+      attribute.template.scene.deactivate();
     }
   }
 };
-__name(_AreHTMLLifecycle, "AreHTMLLifecycle");
-__decorateClass([
-  AreLifecycle.Init(AreComponentNode),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreHTMLEngineContext)),
-  __decorateParam(3, ke(A_Logger))
-], _AreHTMLLifecycle.prototype, "initComponent", 1);
+__name(AreDirectiveIf, "AreDirectiveIf");
 __decorateClass([
-  AreLifecycle.Init(AreRootNode),
+  AreDirective.Transform,
   __decorateParam(0, ke(G)),
   __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreHTMLEngineContext)),
-  __decorateParam(3, ke(AreSignalsContext)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(AreScene)),
   __decorateParam(4, ke(A_Logger))
-], _AreHTMLLifecycle.prototype, "initRoot", 1);
-__decorateClass([
-  AreLifecycle.Init(AreText),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreHTMLEngineContext)),
-  __decorateParam(3, ke(A_Logger))
-], _AreHTMLLifecycle.prototype, "initText", 1);
-__decorateClass([
-  AreLifecycle.Init(AreInterpolation),
-  __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(AreHTMLEngineContext)),
-  __decorateParam(3, ke(A_Logger))
-], _AreHTMLLifecycle.prototype, "initInterpolation", 1);
+], AreDirectiveIf.prototype, "transform", 1);
 __decorateClass([
-  w.Extend({
-    name: AreAttributeFeatures.Update,
-    scope: [AreDirectiveAttribute]
-  }),
+  AreDirective.Compile,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(D)),
-  __decorateParam(2, ke(w)),
-  __decorateParam(3, ke(A_Logger))
-], _AreHTMLLifecycle.prototype, "updateDirectiveAttribute", 1);
-var AreHTMLLifecycle = _AreHTMLLifecycle;
-
-// src/engine/AreHTML.transformer.ts
-var _AreHTMLTransformer = class _AreHTMLTransformer 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${h.toPascalCase(directive.name)}" to handle this directive.`);
-    }
-    store.unwatch(directive);
-  }
-};
-__name(_AreHTMLTransformer, "AreHTMLTransformer");
+  __decorateParam(1, ke(AreStore)),
+  __decorateParam(2, ke(AreScene)),
+  __decorateParam(3, ke(AreSyntax)),
+  __decorateParam(4, ke(AreDirectiveContext))
+], AreDirectiveIf.prototype, "compile", 1);
 __decorateClass([
-  w.Extend({
-    name: AreAttributeFeatures.Transform,
-    scope: [AreDirectiveAttribute]
-  }),
+  AreDirective.Update,
   __decorateParam(0, ke(G)),
   __decorateParam(1, ke(AreStore)),
-  __decorateParam(2, ke(w)),
-  __decorateParam(3, ke(A_Logger))
-], _AreHTMLTransformer.prototype, "transformDirectiveAttribute", 1);
-var AreHTMLTransformer = _AreHTMLTransformer;
+  __decorateParam(2, ke(D)),
+  __decorateParam(3, ke(AreSyntax)),
+  __decorateParam(4, ke(AreScene))
+], AreDirectiveIf.prototype, "update", 1);
+AreDirectiveIf = __decorateClass([
+  AreDirective.Priority(2)
+], AreDirectiveIf);
 
-// 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: /* @__PURE__ */ __name((raw) => ({ content: raw.slice(4, -3).trim() }), "extract")
-        },
-        // interpolations
-        {
-          opening: "{{",
-          closing: "}}",
-          component: AreInterpolation,
-          priority: 9,
-          nested: false,
-          extract: /* @__PURE__ */ __name((_, match) => ({ key: match.content }), "extract")
-        },
-        // 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;
+// 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((d2) => d2.name === attribute.name);
+    if (forAttr) {
+      forTemplate.scope.deregister(forAttr);
+      node.scope.register(forAttr);
     }
-    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;
+    node.init();
+    attribute.template = forTemplate;
+    const { key, index, arrayExpr } = this.parseExpression(attribute.content);
+    const array = this.resolveArray(store, arrayExpr, attribute.content);
+    attribute.value = array;
+    for (let i = 0; i < array.length; i++) {
+      this.spawnItemNode(attribute.template, attribute.owner, key, index, array[i], i);
     }
-    return -1;
   }
-};
-__name(AreHTMLEngine, "AreHTMLEngine");
-__decorateClass([
-  w.Extend({
-    name: A_ServiceFeatures.onBeforeLoad,
-    before: /.*/
-  }),
-  __decorateParam(0, ke(D))
-], AreHTMLEngine.prototype, "init", 1);
-AreHTMLEngine = __decorateClass([
-  c2.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);
-
-// src/lib/AreRoot/AreRoot.component.ts
-var AreRoot = class extends Are {
-  constructor() {
-    super(...arguments);
-    this.props = {
-      default: {
-        type: "string",
-        default: ""
-      }
-    };
+  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);
   }
-  async template(root, logger, signalsContext) {
-    const rootId = root.id;
-    if (signalsContext && !signalsContext.hasRoot(rootId)) {
-      return;
-    }
-    const currentRoute = AreRoute.default();
-    let componentName;
-    if (currentRoute) {
-      const initialVector = new A_SignalVector([currentRoute]);
-      let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);
-      if (!renderTarget) {
-        const signalsMeta = c.meta(AreSignals);
-        renderTarget = signalsMeta?.findComponentByVector(initialVector);
-      }
-      if (renderTarget?.name) {
-        componentName = h.toKebabCase(renderTarget.name);
+  update(attribute, store, scene, ...args) {
+    const { key, index, arrayExpr, trackExpr } = this.parseExpression(attribute.content);
+    const newArray = this.resolveArray(store, arrayExpr, attribute.content);
+    const owner = attribute.owner;
+    const currentChildren = [...owner.children];
+    attribute.value = newArray;
+    const computeKey = this.makeKeyFn(key, index, trackExpr);
+    const childByKey = /* @__PURE__ */ new Map();
+    const remaining = /* @__PURE__ */ new Set();
+    for (let i = 0; i < currentChildren.length; i++) {
+      const child = currentChildren[i];
+      const ctx = child.scope.resolveFlat(AreDirectiveContext);
+      const k2 = ctx ? computeKey(ctx.scope[key], ctx.scope[index || "index"]) : /* @__PURE__ */ Symbol("orphan");
+      childByKey.set(k2, child);
+      remaining.add(child);
+    }
+    const desired = [];
+    const newOnes = [];
+    for (let i = 0; i < newArray.length; i++) {
+      const item = newArray[i];
+      const k2 = computeKey(item, i);
+      const existing = childByKey.get(k2);
+      if (existing) {
+        remaining.delete(existing);
+        let directiveContext = existing.scope.resolveFlat(AreDirectiveContext);
+        if (!directiveContext) {
+          directiveContext = new AreDirectiveContext(existing.aseid);
+          existing.scope.register(directiveContext);
+        }
+        directiveContext.scope = {
+          ...directiveContext.scope,
+          [key]: item,
+          [index || "index"]: i
+        };
+        desired.push(existing);
+      } else {
+        const itemNode = this.spawnItemNode(attribute.template, owner, key, index, item, i);
+        desired.push(itemNode);
+        newOnes.push(itemNode);
       }
     }
-    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 = c.meta(AreSignals);
-      renderTarget = signalsMeta?.findComponentByVector(vector);
-    }
-    const componentName = renderTarget?.name ? h.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];
+    for (const child of remaining) {
       child.unmount();
-      child.destroy();
-      root.removeChild(child);
+      owner.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;
-      }
+    for (const child of newOnes) {
       child.transform();
       child.compile();
       child.mount();
     }
   }
+  // ─────────────────────────────────────────────────────────────────────────────
+  // ── Helpers ──────────────────────────────────────────────────────────────────
+  // ─────────────────────────────────────────────────────────────────────────────
+  /**
+   * Build a key-function that derives a stable identity from each item.
+   * If the user provided a `track <expr>` clause, evaluate it as a path on
+   * the item; otherwise fall back to the item identity (reference equality).
+   */
+  makeKeyFn(key, index, trackExpr) {
+    if (!trackExpr) {
+      return (item, i) => item ?? i;
+    }
+    const path = trackExpr.startsWith(key + ".") ? trackExpr.slice(key.length + 1) : trackExpr;
+    return (item, i) => {
+      if (item == null) return i;
+      if (path === key || path === "$index") return path === "$index" ? i : item;
+      const parts = path.split(".");
+      let v2 = item;
+      for (const p of parts) {
+        if (v2 == null) return i;
+        v2 = v2[p];
+      }
+      return v2 ?? i;
+    };
+  }
+  /**
+   * 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')
+   *   item in items track item.id
+   *   (item, i) in items track item.id
+   */
+  parseExpression(content) {
+    let trackExpr;
+    const trackIdx = content.search(/\s+track\s+/);
+    let body = content;
+    if (trackIdx !== -1) {
+      const m2 = content.slice(trackIdx).match(/\s+track\s+(.+)$/);
+      if (m2) {
+        trackExpr = m2[1].trim();
+        body = content.slice(0, trackIdx).trim();
+      }
+    }
+    const inIndex = body.lastIndexOf(" in ");
+    const keyAndIndex = body.slice(0, inIndex).trim().replace(/^\(|\)$/g, "");
+    const arrayExpr = body.slice(inIndex + 4).trim();
+    const keyParts = keyAndIndex.split(",").map((p) => p.trim());
+    return {
+      key: keyParts[0],
+      index: keyParts[1] || void 0,
+      arrayExpr,
+      trackExpr
+    };
+  }
+  /**
+   * 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((a2) => a2.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;
+  }
 };
-__name(AreRoot, "AreRoot");
+__name(AreDirectiveFor, "AreDirectiveFor");
 __decorateClass([
-  Are.Template,
+  AreDirective.Transform,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(A_Logger)),
-  __decorateParam(2, ke(AreSignalsContext))
-], AreRoot.prototype, "template", 1);
+  __decorateParam(1, ke(D)),
+  __decorateParam(2, ke(AreStore)),
+  __decorateParam(3, ke(AreScene)),
+  __decorateParam(4, ke(A_Logger))
+], AreDirectiveFor.prototype, "transform", 1);
 __decorateClass([
-  Are.Signal,
+  AreDirective.Compile,
   __decorateParam(0, ke(G)),
-  __decorateParam(1, ke(A_SignalVector)),
-  __decorateParam(2, ke(AreStore)),
-  __decorateParam(3, ke(A_Logger)),
-  __decorateParam(4, ke(AreSignalsContext))
-], AreRoot.prototype, "onSignal", 1);
-AreRoot = __decorateClass([
-  c2.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);
+  __decorateParam(1, ke(AreStore)),
+  __decorateParam(2, ke(AreScene))
+], AreDirectiveFor.prototype, "compile", 1);
+__decorateClass([
+  AreDirective.Update,
+  __decorateParam(0, ke(G)),
+  __decorateParam(1, ke(AreStore)),
+  __decorateParam(2, ke(AreScene))
+], AreDirectiveFor.prototype, "update", 1);
+AreDirectiveFor = __decorateClass([
+  AreDirective.Priority(1)
+], AreDirectiveFor);
 
-// examples/dashboard/src/concept.ts
+// examples/jumpstart/src/concept.ts
 (async () => {
   try {
     const container = new AreContainer({
-      name: "ARE Dashboard",
+      name: "ARE Jumpstart",
       components: [
+        // ----------------------------------
+        // Allowed Entities 
+        // ----------------------------------
+        // ............
+        // ----------------------------------
+        // Allowed Commands 
+        // ----------------------------------
+        // ............
         // ----------------------------------
         // UI Components 
         // ----------------------------------
-        DashboardApp,
-        DashboardHeader,
-        DashboardLogo,
-        DashboardNav,
-        DashboardNavItem,
-        DashboardSidebar,
-        DashboardUserCard,
-        DashboardMenu,
-        DashboardMain,
-        DashboardStats,
-        DashboardStatCard,
-        DashboardTable,
+        ABtn,
+        ListComponent,
         // ----------------------------------
-        // Directives
+        // Directives 
         // ----------------------------------
         AreDirectiveIf,
         AreDirectiveFor,
         // ----------------------------------
-        // Addons 
+        // Engine Components 
         // ----------------------------------
         A_SignalBus,
+        // ----------------------------------
+        // Addons 
+        // ----------------------------------
         AreRoot,
         ConfigReader,
         AreHTMLEngine,
         A_Logger
       ],
       entities: [
+        // ............
         AreInit,
         AreRoute
       ],
       fragments: [
-        new AreHTMLEngineContext({ container: document }),
+        new A_SignalState([AreRoute]),
+        new AreHTMLEngineContext({
+          container: document
+        }),
         new A_Config({
           defaults: {
             [A_LOGGER_ENV_KEYS.LOG_LEVEL]: "info"
@@ -11434,7 +11375,7 @@ AreRoot = __decorateClass([
       ]
     });
     const concept = new Ce({
-      name: "adaas-are-example-dashboard",
+      name: "adaas-are-example-jumpstart",
       fragments: [new A_Config({
         variables: ["CONFIG_VERBOSE", "DEV_MODE"],
         defaults: {
@@ -11445,7 +11386,9 @@ AreRoot = __decorateClass([
       components: [A_Logger, ConfigReader, A_Polyfill],
       containers: [container]
     });
+    console.log("Building Concept...");
     await concept.load();
+    console.log("\u2713 Concept loaded successfully.");
     await concept.start();
   } catch (error) {
     const logger = c.root.resolve(A_Logger);