@hypen-space/web 0.4.36 → 0.4.37

package/dist/hypen.js

@@ -1,3909 +1,414 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/dom/components/column.ts
-var exports_column = {};
-__export(exports_column, {
-  columnHandler: () => columnHandler
-});
-var columnHandler;
-var init_column = __esm(() => {
-  columnHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.alignItems = "flex-start";
-      el.dataset.hypenType = "column";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/row.ts
-var exports_row = {};
-__export(exports_row, {
-  rowHandler: () => rowHandler
-});
-function ensureRowStyles() {
-  if (rowStylesInjected)
-    return;
-  rowStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-row-styles";
-  style.textContent = `
-    /* Row expands to fill width when it has children with flex/weight */
-    /* This matches iOS/Android behavior where weighted children cause parent to expand */
-    [data-hypen-type="row"]:has(> [data-hypen-flex]) {
-      width: 100%;
-    }
-  `;
-  document.head.appendChild(style);
-}
-var rowStylesInjected = false, rowHandler;
-var init_row = __esm(() => {
-  rowHandler = {
-    create() {
-      ensureRowStyles();
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "row";
-      el.style.alignItems = "flex-start";
-      el.dataset.hypenType = "row";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/text.ts
-var exports_text = {};
-__export(exports_text, {
-  textHandler: () => textHandler
-});
-var textHandler;
-var init_text = __esm(() => {
-  textHandler = {
-    create() {
-      const el = document.createElement("span");
-      el.style.display = "inline-block";
-      el.style.lineHeight = "1";
-      el.style.verticalAlign = "top";
-      el.style.margin = "0";
-      el.style.padding = "0";
-      el.dataset.hypenType = "text";
-      return el;
-    },
-    applyProps(el, props) {
-      const text = props["0"] || props.text;
-      if (text !== undefined) {
-        el.dataset.textTemplate = String(text);
-        el.textContent = String(text);
-      }
-    }
-  };
-});
-
-// src/dom/components/image.ts
-var exports_image = {};
-__export(exports_image, {
-  imageHandler: () => imageHandler
-});
-var imageHandler;
-var init_image = __esm(() => {
-  imageHandler = {
-    create() {
-      const el = document.createElement("img");
-      el.dataset.hypenType = "image";
-      return el;
-    },
-    applyProps(el, props) {
-      const img = el;
-      const src = props["0"] || props.url || props.src;
-      if (src !== undefined) {
-        img.src = String(src);
-      }
-      if (props.alt !== undefined) {
-        img.alt = String(props.alt);
-      }
-    }
-  };
-});
-
-// src/dom/components/button.ts
-var exports_button = {};
-__export(exports_button, {
-  buttonHandler: () => buttonHandler
-});
-var buttonHandler;
-var init_button = __esm(() => {
-  buttonHandler = {
-    create() {
-      const el = document.createElement("button");
-      el.style.border = "none";
-      el.style.background = "none";
-      el.style.padding = "0";
-      el.style.margin = "0";
-      el.style.font = "inherit";
-      el.style.color = "inherit";
-      el.style.cursor = "pointer";
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.alignItems = "flex-start";
-      el.dataset.hypenType = "button";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/container.ts
-var exports_container = {};
-__export(exports_container, {
-  containerHandler: () => containerHandler
-});
-var containerHandler;
-var init_container = __esm(() => {
-  containerHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.dataset.hypenType = "container";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/center.ts
-var exports_center = {};
-__export(exports_center, {
-  centerHandler: () => centerHandler
-});
-var centerHandler;
-var init_center = __esm(() => {
-  centerHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.alignItems = "center";
-      el.style.justifyContent = "center";
-      el.style.width = "100%";
-      el.style.height = "100%";
-      el.style.alignSelf = "stretch";
-      el.dataset.hypenType = "center";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/list.ts
-var exports_list = {};
-__export(exports_list, {
-  listHandler: () => listHandler
-});
-var listHandler;
-var init_list = __esm(() => {
-  listHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.alignItems = "flex-start";
-      el.style.overflow = "auto";
-      el.dataset.hypenType = "list";
-      return el;
-    },
-    applyProps(el, props) {
-      const direction = props.direction || props["1"] || "vertical";
-      if (direction === "vertical") {
-        el.style.flexDirection = "column";
-      } else {
-        el.style.flexDirection = "row";
-      }
-      if (props.gap !== undefined) {
-        el.style.gap = typeof props.gap === "number" ? `${props.gap}px` : String(props.gap);
-      }
-    }
-  };
-});
-
-// src/dom/components/input.ts
-var exports_input = {};
-__export(exports_input, {
-  inputHandler: () => inputHandler
-});
-var inputHandler;
-var init_input = __esm(() => {
-  inputHandler = {
-    create() {
-      const el = document.createElement("input");
-      el.dataset.hypenType = "input";
-      return el;
-    },
-    applyProps(el, props) {
-      const input = el;
-      if (props.type !== undefined) {
-        input.type = String(props.type);
-      }
-      if (props.placeholder !== undefined) {
-        input.placeholder = String(props.placeholder);
-      }
-      if (props.value !== undefined) {
-        input.value = String(props.value);
-      }
-    }
-  };
-});
-
-// src/dom/components/link.ts
-var exports_link = {};
-__export(exports_link, {
-  linkHandler: () => linkHandler
-});
-var linkHandler;
-var init_link = __esm(() => {
-  linkHandler = {
-    create() {
-      const el = document.createElement("a");
-      el.dataset.hypenType = "link";
-      return el;
-    },
-    applyProps(el, props) {
-      const anchor = el;
-      const href = props["0"] || props.href;
-      if (href !== undefined) {
-        anchor.href = String(href);
-      }
-      if (props.target !== undefined) {
-        anchor.target = String(props.target);
-      }
-      if (props.rel !== undefined) {
-        anchor.rel = String(props.rel);
-      }
-    }
-  };
-});
-
-// src/dom/components/textarea.ts
-var exports_textarea = {};
-__export(exports_textarea, {
-  textareaHandler: () => textareaHandler
-});
-var textareaHandler;
-var init_textarea = __esm(() => {
-  textareaHandler = {
-    create() {
-      const el = document.createElement("textarea");
-      el.dataset.hypenType = "textarea";
-      return el;
-    },
-    applyProps(el, props) {
-      const textarea = el;
-      const value = props.value ?? props["0"];
-      if (value !== undefined) {
-        textarea.value = String(value);
-      }
-      if (props.placeholder !== undefined) {
-        textarea.placeholder = String(props.placeholder);
-      }
-      if (props.rows !== undefined) {
-        textarea.rows = Number(props.rows);
-      }
-      if (props.cols !== undefined) {
-        textarea.cols = Number(props.cols);
-      }
-      if (props.disabled !== undefined) {
-        textarea.disabled = Boolean(props.disabled);
-      }
-      if (props.readonly !== undefined) {
-        textarea.readOnly = Boolean(props.readonly);
-      }
-    }
-  };
-});
-
-// src/dom/components/checkbox.ts
-var exports_checkbox = {};
-__export(exports_checkbox, {
-  checkboxHandler: () => checkboxHandler
-});
-var checkboxHandler;
-var init_checkbox = __esm(() => {
-  checkboxHandler = {
-    create() {
-      const wrapper = document.createElement("label");
-      wrapper.dataset.hypenType = "checkbox";
-      wrapper.style.display = "inline-flex";
-      wrapper.style.alignItems = "center";
-      wrapper.style.gap = "8px";
-      wrapper.style.cursor = "pointer";
-      const input = document.createElement("input");
-      input.type = "checkbox";
-      input.dataset.hypenCheckbox = "true";
-      wrapper.appendChild(input);
-      return wrapper;
-    },
-    applyProps(el, props) {
-      const input = el.querySelector('input[type="checkbox"]');
-      if (!input)
-        return;
-      if (props.checked !== undefined) {
-        input.checked = Boolean(props.checked);
-      }
-      if (props.disabled !== undefined) {
-        input.disabled = Boolean(props.disabled);
-      }
-      const label = props["0"] || props.label;
-      if (label !== undefined) {
-        const textNodes = Array.from(el.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
-        textNodes.forEach((node) => node.remove());
-        el.appendChild(document.createTextNode(String(label)));
-      }
-    }
-  };
-});
-
-// src/dom/components/select.ts
-var exports_select = {};
-__export(exports_select, {
-  selectHandler: () => selectHandler
-});
-var selectHandler;
-var init_select = __esm(() => {
-  selectHandler = {
-    create() {
-      const el = document.createElement("select");
-      el.dataset.hypenType = "select";
-      return el;
-    },
-    applyProps(el, props) {
-      const select = el;
-      if (props.value !== undefined) {
-        select.value = String(props.value);
-      }
-      if (props.disabled !== undefined) {
-        select.disabled = Boolean(props.disabled);
-      }
-      if (props.multiple !== undefined) {
-        select.multiple = Boolean(props.multiple);
-      }
-      if (props.options && Array.isArray(props.options)) {
-        select.innerHTML = "";
-        props.options.forEach((opt) => {
-          const option = document.createElement("option");
-          if (typeof opt === "string") {
-            option.value = opt;
-            option.textContent = opt;
-          } else if (typeof opt === "object") {
-            option.value = String(opt.value ?? opt.label ?? "");
-            option.textContent = String(opt.label ?? opt.value ?? "");
-            if (opt.disabled)
-              option.disabled = true;
-          }
-          select.appendChild(option);
-        });
-      }
-    }
-  };
-});
-
-// src/dom/components/spacer.ts
-var exports_spacer = {};
-__export(exports_spacer, {
-  spacerHandler: () => spacerHandler
-});
-var spacerHandler;
-var init_spacer = __esm(() => {
-  spacerHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.flex = "1";
-      el.dataset.hypenType = "spacer";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/stack.ts
-var exports_stack = {};
-__export(exports_stack, {
-  stackHandler: () => stackHandler
-});
-function ensureStackStyles() {
-  if (stackStylesInjected)
-    return;
-  stackStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-stack-styles";
-  style.textContent = `
-    [data-hypen-type="stack"] {
-      position: relative;
-      display: grid;
-      grid-template-areas: "stack";
-      /* Default alignment: top-left (matching iOS/Android ZStack default) */
-      justify-items: start;
-      align-items: start;
-      /* Ensure Stack participates properly in flex layouts (Row/Column) */
-      min-width: 0;
-      min-height: 0;
-    }
-    [data-hypen-type="stack"] > * {
-      grid-area: stack;
-      /* Don't set justify-self/align-self here - let parent's justify-items/align-items control */
-    }
-  `;
-  document.head.appendChild(style);
-}
-var stackStylesInjected = false, stackHandler;
-var init_stack = __esm(() => {
-  stackHandler = {
-    create() {
-      ensureStackStyles();
-      const el = document.createElement("div");
-      el.dataset.hypenType = "stack";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/divider.ts
-var exports_divider = {};
-__export(exports_divider, {
-  dividerHandler: () => dividerHandler
-});
-var dividerHandler;
-var init_divider = __esm(() => {
-  dividerHandler = {
-    create() {
-      const el = document.createElement("hr");
-      el.dataset.hypenType = "divider";
-      el.style.border = "none";
-      el.style.borderTop = "1px solid #e0e0e0";
-      el.style.margin = "0";
-      return el;
-    },
-    applyProps(el, props) {
-      if (props.thickness !== undefined) {
-        const thickness = typeof props.thickness === "number" ? `${props.thickness}px` : String(props.thickness);
-        el.style.borderTopWidth = thickness;
-      }
-      if (props.orientation === "vertical") {
-        el.style.borderTop = "none";
-        el.style.borderLeft = "1px solid #e0e0e0";
-        el.style.height = "100%";
-        el.style.width = "0";
-        el.style.display = "inline-block";
-      }
-    }
-  };
-});
-
-// src/dom/components/grid.ts
-var exports_grid = {};
-__export(exports_grid, {
-  gridHandler: () => gridHandler
-});
-function ensureGridStyles() {
-  if (gridStylesInjected)
-    return;
-  gridStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-grid-styles";
-  style.textContent = `
-    /* Grid children stretch to fill cells by default (matches Android behavior) */
-    [data-hypen-type="grid"] > * {
-      justify-self: stretch;
-      align-self: stretch;
-    }
-  `;
-  document.head.appendChild(style);
-}
-var gridStylesInjected = false, gridHandler;
-var init_grid = __esm(() => {
-  gridHandler = {
-    create() {
-      ensureGridStyles();
-      const el = document.createElement("div");
-      el.style.display = "grid";
-      el.dataset.hypenType = "grid";
-      return el;
-    },
-    applyProps(el, props) {
-      if (props.columns !== undefined) {
-        const columns = typeof props.columns === "number" ? `repeat(${props.columns}, 1fr)` : String(props.columns);
-        el.style.gridTemplateColumns = columns;
-      }
-      if (props.rows !== undefined) {
-        const rows = typeof props.rows === "number" ? `repeat(${props.rows}, 1fr)` : String(props.rows);
-        el.style.gridTemplateRows = rows;
-      }
-      if (props.gap !== undefined) {
-        const gap = typeof props.gap === "number" ? `${props.gap}px` : String(props.gap);
-        el.style.gap = gap;
-      }
-    }
-  };
-});
-
-// src/dom/components/card.ts
-var exports_card = {};
-__export(exports_card, {
-  cardHandler: () => cardHandler
-});
-var cardHandler;
-var init_card = __esm(() => {
-  cardHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.dataset.hypenType = "card";
-      el.style.backgroundColor = "#ffffff";
-      el.style.borderRadius = "8px";
-      el.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
-      el.style.padding = "16px";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/heading.ts
-var exports_heading = {};
-__export(exports_heading, {
-  headingHandler: () => headingHandler
-});
-var headingHandler;
-var init_heading = __esm(() => {
-  headingHandler = {
-    create() {
-      const el = document.createElement("h2");
-      el.dataset.hypenType = "heading";
-      return el;
-    },
-    applyProps(el, props) {
-      if (props.level !== undefined) {
-        const level = Math.max(1, Math.min(6, Number(props.level)));
-        const newEl = document.createElement(`h${level}`);
-        newEl.dataset.hypenType = "heading";
-        newEl.innerHTML = el.innerHTML;
-        Array.from(el.attributes).forEach((attr) => {
-          newEl.setAttribute(attr.name, attr.value);
-        });
-        if (el.parentNode) {
-          el.parentNode.replaceChild(newEl, el);
-        }
-      }
-      const text = props["0"] || props.text;
-      if (text !== undefined) {
-        el.textContent = String(text);
-      }
-    }
-  };
-});
-
-// src/dom/components/switch.ts
-var exports_switch = {};
-__export(exports_switch, {
-  switchHandler: () => switchHandler
-});
-var switchHandler;
-var init_switch = __esm(() => {
-  switchHandler = {
-    create() {
-      const wrapper = document.createElement("label");
-      wrapper.dataset.hypenType = "switch";
-      wrapper.style.display = "inline-flex";
-      wrapper.style.alignItems = "center";
-      wrapper.style.gap = "8px";
-      wrapper.style.cursor = "pointer";
-      const input = document.createElement("input");
-      input.type = "checkbox";
-      input.dataset.hypenSwitch = "true";
-      input.style.appearance = "none";
-      input.style.width = "44px";
-      input.style.height = "24px";
-      input.style.backgroundColor = "#ccc";
-      input.style.borderRadius = "12px";
-      input.style.position = "relative";
-      input.style.cursor = "pointer";
-      input.style.transition = "background-color 0.2s";
-      const style = document.createElement("style");
-      style.textContent = `
-      input[data-hypen-switch="true"]::before {
-        content: "";
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        background-color: white;
-        border-radius: 50%;
-        top: 2px;
-        left: 2px;
-        transition: transform 0.2s;
-      }
-      input[data-hypen-switch="true"]:checked {
-        background-color: #4CAF50;
-      }
-      input[data-hypen-switch="true"]:checked::before {
-        transform: translateX(20px);
-      }
-    `;
-      wrapper.appendChild(style);
-      wrapper.appendChild(input);
-      return wrapper;
-    },
-    applyProps(el, props) {
-      const input = el.querySelector('input[type="checkbox"]');
-      if (!input)
-        return;
-      if (props.on !== undefined) {
-        input.checked = Boolean(props.on);
-      }
-      if (props.disabled !== undefined) {
-        input.disabled = Boolean(props.disabled);
-      }
-      const label = props["0"] || props.label;
-      if (label !== undefined) {
-        const textNodes = Array.from(el.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
-        textNodes.forEach((node) => node.remove());
-        el.appendChild(document.createTextNode(String(label)));
-      }
-    }
-  };
-});
-
-// src/dom/components/slider.ts
-var exports_slider = {};
-__export(exports_slider, {
-  sliderHandler: () => sliderHandler
-});
-var sliderHandler;
-var init_slider = __esm(() => {
-  sliderHandler = {
-    create() {
-      const el = document.createElement("input");
-      el.type = "range";
-      el.dataset.hypenType = "slider";
-      return el;
-    },
-    applyProps(el, props) {
-      const input = el;
-      if (props.value !== undefined) {
-        input.value = String(props.value);
-      }
-      if (props.min !== undefined) {
-        input.min = String(props.min);
-      }
-      if (props.max !== undefined) {
-        input.max = String(props.max);
-      }
-      if (props.step !== undefined) {
-        input.step = String(props.step);
-      }
-      if (props.disabled !== undefined) {
-        input.disabled = Boolean(props.disabled);
-      }
-    }
-  };
-});
-
-// src/dom/components/spinner.ts
-var exports_spinner = {};
-__export(exports_spinner, {
-  spinnerHandler: () => spinnerHandler
-});
-var spinnerHandler;
-var init_spinner = __esm(() => {
-  spinnerHandler = {
-    create() {
-      const wrapper = document.createElement("div");
-      wrapper.dataset.hypenType = "spinner";
-      wrapper.style.display = "inline-block";
-      const spinner = document.createElement("div");
-      spinner.style.width = "40px";
-      spinner.style.height = "40px";
-      spinner.style.border = "4px solid #f3f3f3";
-      spinner.style.borderTop = "4px solid #3498db";
-      spinner.style.borderRadius = "50%";
-      spinner.style.animation = "spin 1s linear infinite";
-      const style = document.createElement("style");
-      style.textContent = `
-      @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-      }
-    `;
-      wrapper.appendChild(style);
-      wrapper.appendChild(spinner);
-      return wrapper;
-    },
-    applyProps(el, props) {
-      const spinner = el.querySelector("div:not(style)");
-      if (!spinner)
-        return;
-      if (props.size !== undefined) {
-        const size = String(props.size);
-        const sizeMap = {
-          small: "24px",
-          medium: "40px",
-          large: "60px"
-        };
-        const actualSize = sizeMap[size] || size;
-        spinner.style.width = actualSize;
-        spinner.style.height = actualSize;
-      }
-      if (props.color !== undefined) {
-        spinner.style.borderTopColor = String(props.color);
-      }
-    }
-  };
-});
-
-// src/dom/components/badge.ts
-var exports_badge = {};
-__export(exports_badge, {
-  badgeHandler: () => badgeHandler
-});
-var badgeHandler;
-var init_badge = __esm(() => {
-  badgeHandler = {
-    create() {
-      const el = document.createElement("span");
-      el.dataset.hypenType = "badge";
-      el.style.display = "inline-block";
-      el.style.padding = "4px 8px";
-      el.style.borderRadius = "4px";
-      el.style.fontSize = "12px";
-      el.style.fontWeight = "600";
-      el.style.backgroundColor = "#e0e0e0";
-      el.style.color = "#333";
-      return el;
-    },
-    applyProps(el, props) {
-      if (props.theme !== undefined) {
-        const theme = String(props.theme);
-        const themeColors = {
-          success: { bg: "#4CAF50", color: "#fff" },
-          error: { bg: "#f44336", color: "#fff" },
-          warning: { bg: "#ff9800", color: "#fff" },
-          info: { bg: "#2196F3", color: "#fff" },
-          default: { bg: "#e0e0e0", color: "#333" }
+/**
+ * Hypen - High-Level API for Web Applications
+ *
+ * Simple API for rendering Hypen applications (like ReactDOM.render)
+ */
+import { Engine } from "@hypen-space/core/engine/browser";
+import { HypenModuleInstance } from "@hypen-space/core/app";
+import { HypenRouter } from "@hypen-space/core/router";
+import { HypenGlobalContext } from "@hypen-space/core/context";
+import { componentLoader } from "@hypen-space/core/loader";
+import { Router, Route, Link } from "@hypen-space/core/components";
+import { frameworkLoggers, setDebugMode } from "@hypen-space/core/logger";
+import { DOMRenderer } from "./dom/renderer.js";
+const log = frameworkLoggers.hypen;
+export class Hypen {
+    engine = null;
+    renderer = null;
+    moduleInstance = null;
+    container = null;
+    config;
+    router;
+    globalContext;
+    moduleInstances = new Map();
+    constructor(config = {}) {
+        this.config = {
+            componentsDir: "./src/components",
+            debug: false,
+            ...config,
         };
-        const colors = themeColors[theme] || themeColors.default;
-        el.style.backgroundColor = colors.bg;
-        el.style.color = colors.color;
-      }
-      const text = props["0"] || props.text;
-      if (text !== undefined) {
-        el.textContent = String(text);
-      }
-    }
-  };
-});
-
-// src/dom/components/avatar.ts
-var exports_avatar = {};
-__export(exports_avatar, {
-  avatarHandler: () => avatarHandler
-});
-var avatarHandler;
-var init_avatar = __esm(() => {
-  avatarHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.dataset.hypenType = "avatar";
-      el.style.display = "inline-flex";
-      el.style.alignItems = "center";
-      el.style.justifyContent = "center";
-      el.style.width = "40px";
-      el.style.height = "40px";
-      el.style.borderRadius = "50%";
-      el.style.backgroundColor = "#9e9e9e";
-      el.style.color = "#fff";
-      el.style.fontSize = "16px";
-      el.style.fontWeight = "600";
-      el.style.overflow = "hidden";
-      return el;
-    },
-    applyProps(el, props) {
-      const src = props["src.0"] || props["0"] || props.src || props.source;
-      if (src !== undefined) {
-        const img = document.createElement("img");
-        img.src = String(src);
-        img.style.width = "100%";
-        img.style.height = "100%";
-        img.style.objectFit = "cover";
-        el.innerHTML = "";
-        el.appendChild(img);
-      } else if (props.initials !== undefined) {
-        el.textContent = String(props.initials).toUpperCase();
-      }
-      if (props.size !== undefined) {
-        const size = typeof props.size === "number" ? `${props.size}px` : String(props.size);
-        el.style.width = size;
-        el.style.height = size;
-      }
-    }
-  };
-});
-
-// src/dom/components/progressbar.ts
-var exports_progressbar = {};
-__export(exports_progressbar, {
-  progressBarHandler: () => progressBarHandler
-});
-var progressBarHandler;
-var init_progressbar = __esm(() => {
-  progressBarHandler = {
-    create() {
-      const wrapper = document.createElement("div");
-      wrapper.dataset.hypenType = "progressbar";
-      wrapper.style.width = "100%";
-      wrapper.style.height = "8px";
-      wrapper.style.backgroundColor = "#e0e0e0";
-      wrapper.style.borderRadius = "4px";
-      wrapper.style.overflow = "hidden";
-      const bar = document.createElement("div");
-      bar.dataset.hypenBar = "true";
-      bar.style.height = "100%";
-      bar.style.backgroundColor = "#2196F3";
-      bar.style.transition = "width 0.3s ease";
-      bar.style.width = "0%";
-      wrapper.appendChild(bar);
-      return wrapper;
-    },
-    applyProps(el, props) {
-      const bar = el.querySelector('[data-hypen-bar="true"]');
-      if (!bar)
-        return;
-      const value = Number(props.value || 0);
-      const max = Number(props.max || 100);
-      const percentage = Math.min(100, Math.max(0, value / max * 100));
-      bar.style.width = `${percentage}%`;
-      if (props.color !== undefined) {
-        bar.style.backgroundColor = String(props.color);
-      }
-      if (props.height !== undefined) {
-        const height = typeof props.height === "number" ? `${props.height}px` : String(props.height);
-        el.style.height = height;
-      }
-    }
-  };
-});
-
-// src/dom/components/video.ts
-var exports_video = {};
-__export(exports_video, {
-  videoHandler: () => videoHandler
-});
-var videoHandler;
-var init_video = __esm(() => {
-  videoHandler = {
-    create() {
-      const el = document.createElement("video");
-      el.dataset.hypenType = "video";
-      return el;
-    },
-    applyProps(el, props) {
-      const video = el;
-      const src = props["0"] || props.src;
-      if (src !== undefined) {
-        video.src = String(src);
-      }
-      if (props.controls !== undefined) {
-        video.controls = Boolean(props.controls);
-      }
-      if (props.autoplay !== undefined) {
-        video.autoplay = Boolean(props.autoplay);
-      }
-      if (props.loop !== undefined) {
-        video.loop = Boolean(props.loop);
-      }
-      if (props.muted !== undefined) {
-        video.muted = Boolean(props.muted);
-      }
-      if (props.poster !== undefined) {
-        video.poster = String(props.poster);
-      }
-    }
-  };
-});
-
-// src/dom/components/audio.ts
-var exports_audio = {};
-__export(exports_audio, {
-  audioHandler: () => audioHandler
-});
-var audioHandler;
-var init_audio = __esm(() => {
-  audioHandler = {
-    create() {
-      const el = document.createElement("audio");
-      el.dataset.hypenType = "audio";
-      return el;
-    },
-    applyProps(el, props) {
-      const audio = el;
-      const src = props["0"] || props.src;
-      if (src !== undefined) {
-        audio.src = String(src);
-      }
-      if (props.controls !== undefined) {
-        audio.controls = Boolean(props.controls);
-      }
-      if (props.autoplay !== undefined) {
-        audio.autoplay = Boolean(props.autoplay);
-      }
-      if (props.loop !== undefined) {
-        audio.loop = Boolean(props.loop);
-      }
-      if (props.muted !== undefined) {
-        audio.muted = Boolean(props.muted);
-      }
-    }
-  };
-});
-
-// src/dom/components/paragraph.ts
-var exports_paragraph = {};
-__export(exports_paragraph, {
-  paragraphHandler: () => paragraphHandler
-});
-var paragraphHandler;
-var init_paragraph = __esm(() => {
-  paragraphHandler = {
-    create() {
-      const el = document.createElement("p");
-      el.dataset.hypenType = "paragraph";
-      return el;
-    },
-    applyProps(el, props) {
-      const text = props["0"] || props.text;
-      if (text !== undefined) {
-        el.textContent = String(text);
-      }
-    }
-  };
-});
-
-// src/dom/components/router.ts
-var exports_router = {};
-__export(exports_router, {
-  routerHandler: () => routerHandler
-});
-var routerHandler;
-var init_router = __esm(() => {
-  routerHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.width = "100%";
-      el.dataset.hypenType = "router";
-      return el;
-    },
-    applyProps(el, props) {}
-  };
-});
-
-// src/dom/components/route.ts
-var exports_route = {};
-__export(exports_route, {
-  routeHandler: () => routeHandler
-});
-import { frameworkLoggers } from "@hypen-space/core/logger";
-var log, routeHandler;
-var init_route = __esm(() => {
-  log = frameworkLoggers.router;
-  routeHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.width = "100%";
-      el.dataset.hypenType = "route";
-      el.dataset.routeRendered = "false";
-      return el;
-    },
-    applyProps(el, props) {
-      const path = props.path || props["0"] || "/";
-      el.dataset.routePath = String(path);
-      const isLazy = props.__lazy === true;
-      el.dataset.routeLazy = String(isLazy);
-      const componentName = props.component || props.__lazy_child;
-      if (componentName) {
-        el.dataset.routeComponent = String(componentName);
-      }
-      log.debug(`Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || "none"}"`);
-    }
-  };
-});
-
-// src/dom/components/hypenapp.ts
-var exports_hypenapp = {};
-__export(exports_hypenapp, {
-  hypenAppHandler: () => hypenAppHandler,
-  disconnectHypenApp: () => disconnectHypenApp
-});
-import { RemoteEngine } from "@hypen-space/core/remote/client";
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
-function applyPatches(container, nodes, patches, engine, onRoot) {
-  for (const patch of patches) {
-    switch (patch.type) {
-      case "create": {
-        const el = createElement(patch.elementType, patch.props || {});
-        el.dataset.hypenId = patch.id;
-        el.__hypenEngine = engine;
-        nodes.set(patch.id, el);
-        break;
-      }
-      case "setProp": {
-        const el = nodes.get(patch.id);
-        if (el) {
-          applyProp(el, patch.name, patch.value);
+        // Enable debug mode if configured
+        if (this.config.debug) {
+            setDebugMode(true);
         }
-        break;
-      }
-      case "setText": {
-        const el = nodes.get(patch.id);
-        if (el) {
-          el.textContent = patch.text;
+        // Initialize router and global context
+        this.router = new HypenRouter();
+        this.globalContext = new HypenGlobalContext();
+        // Register built-in components
+        componentLoader.register("Router", Router, "");
+        componentLoader.register("Route", Route, "");
+        componentLoader.register("Link", Link, "");
+        // Store hypen engine instance in global context for built-in component access
+        this.globalContext.__hypenEngine = this;
+    }
+    /**
+     * Initialize the Hypen runtime
+     * Must be called before render()
+     */
+    async init() {
+        log.debug("Initializing...");
+        // Initialize engine
+        this.engine = new Engine();
+        await this.engine.init({
+            wasmUrl: this.config.wasmUrl,
+            jsUrl: this.config.jsUrl,
+        });
+        log.debug("Engine initialized");
+    }
+    /**
+     * Load all components from the components directory
+     */
+    async loadComponents(componentsDir) {
+        const dir = componentsDir || this.config.componentsDir;
+        log.debug(`Loading components from ${dir}...`);
+        await componentLoader.loadFromComponentsDir(dir);
+        log.debug(`Loaded ${componentLoader.getNames().length} components`);
+    }
+    /**
+     * Render a component to a DOM container
+     *
+     * @param componentName - Name of the component to render (e.g., "HomePage")
+     * @param containerSelector - CSS selector or HTMLElement for the mount point
+     */
+    async render(componentName, containerSelector) {
+        if (!this.engine) {
+            throw new Error("[Hypen] Engine not initialized. Call init() first.");
         }
-        break;
-      }
-      case "insert": {
-        const parentId = patch.parentId;
-        const parent = parentId === "root" ? container : nodes.get(parentId);
-        const child = nodes.get(patch.id);
-        const beforeId = patch.beforeId;
-        if (parent && child) {
-          if (parentId === "root") {
-            onRoot(patch.id);
-          }
-          if (beforeId) {
-            const before = nodes.get(beforeId);
-            if (before && before.parentNode === parent) {
-              parent.insertBefore(child, before);
-            } else if (!parent.contains(child)) {
-              parent.appendChild(child);
+        // Get the container element
+        if (typeof containerSelector === "string") {
+            const element = document.querySelector(containerSelector);
+            if (!element) {
+                throw new Error(`[Hypen] Container not found: ${containerSelector}`);
             }
-          } else if (!parent.contains(child)) {
-            parent.appendChild(child);
-          }
+            this.container = element;
         }
-        break;
-      }
-      case "move": {
-        const parentId = patch.parentId;
-        const parent = parentId === "root" ? container : nodes.get(parentId);
-        const child = nodes.get(patch.id);
-        const beforeId = patch.beforeId;
-        if (parent && child) {
-          if (beforeId) {
-            const before = nodes.get(beforeId);
-            if (before && before.parentNode === parent) {
-              parent.insertBefore(child, before);
-            }
-          } else {
-            parent.appendChild(child);
-          }
+        else {
+            this.container = containerSelector;
         }
-        break;
-      }
-      case "remove": {
-        const el = nodes.get(patch.id);
-        if (el && el.parentNode) {
-          el.parentNode.removeChild(el);
+        // Get the component definition
+        const component = componentLoader.get(componentName);
+        if (!component) {
+            throw new Error(`[Hypen] Component "${componentName}" not found. Available: ${componentLoader.getNames().join(", ")}`);
         }
-        nodes.delete(patch.id);
-        break;
-      }
-    }
-  }
-}
-function createElement(type, props) {
-  const normalizedType = type.toLowerCase();
-  const tagMap = {
-    column: "div",
-    row: "div",
-    text: "span",
-    button: "button",
-    input: "input",
-    image: "img",
-    container: "div",
-    box: "div",
-    center: "div",
-    list: "div",
-    spacer: "div",
-    stack: "div",
-    divider: "hr",
-    grid: "div",
-    card: "div",
-    heading: "h2",
-    link: "a",
-    textarea: "textarea",
-    checkbox: "input",
-    select: "select",
-    slider: "input",
-    switch: "input",
-    spinner: "div",
-    badge: "span",
-    avatar: "img",
-    progressbar: "div",
-    video: "video",
-    audio: "audio"
-  };
-  const tag = tagMap[normalizedType] || "div";
-  const el = document.createElement(tag);
-  el.dataset.hypenType = normalizedType;
-  if (normalizedType === "column") {
-    el.style.display = "flex";
-    el.style.flexDirection = "column";
-  } else if (normalizedType === "row") {
-    el.style.display = "flex";
-    el.style.flexDirection = "row";
-  } else if (normalizedType === "center") {
-    el.style.display = "flex";
-    el.style.alignItems = "center";
-    el.style.justifyContent = "center";
-  } else if (normalizedType === "text") {
-    if (props["0"]) {
-      el.textContent = String(props["0"]);
-    }
-  } else if (normalizedType === "button") {
-    el.style.cursor = "pointer";
-  } else if (normalizedType === "checkbox" || normalizedType === "switch") {
-    el.type = "checkbox";
-  } else if (normalizedType === "slider") {
-    el.type = "range";
-  }
-  return el;
-}
-function applyProp(el, name, value) {
-  if (name === "0" || name === "text") {
-    el.textContent = String(value);
-    return;
-  }
-  const styleProps = {
-    padding: "padding",
-    margin: "margin",
-    backgroundColor: "backgroundColor",
-    background: "background",
-    color: "color",
-    fontSize: "fontSize",
-    fontWeight: "fontWeight",
-    width: "width",
-    height: "height",
-    minWidth: "minWidth",
-    minHeight: "minHeight",
-    maxWidth: "maxWidth",
-    maxHeight: "maxHeight",
-    borderRadius: "borderRadius",
-    border: "border",
-    gap: "gap",
-    flex: "flex",
-    opacity: "opacity",
-    overflow: "overflow"
-  };
-  if (styleProps[name]) {
-    const cssValue = typeof value === "number" ? `${value}px` : String(value);
-    el.style[styleProps[name]] = cssValue;
-    return;
-  }
-  if (name === "onClick" || name === "onclick") {
-    el.onclick = () => {
-      const engine = el.__hypenEngine;
-      if (engine && typeof value === "string" && value.startsWith("@actions.")) {
-        const action = value.replace("@actions.", "");
-        engine.dispatchAction(action);
-      }
-    };
-    return;
-  }
-  el.setAttribute(name, String(value));
-}
-function disconnectHypenApp(element) {
-  const instance = activeInstances.get(element);
-  if (instance) {
-    instance.engine.disconnect();
-    activeInstances.delete(element);
-  }
-}
-var log2, activeInstances, hypenAppHandler;
-var init_hypenapp = __esm(() => {
-  log2 = frameworkLoggers2.remote;
-  activeInstances = new WeakMap;
-  hypenAppHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.dataset.hypenType = "hypenapp";
-      el.style.display = "contents";
-      return el;
-    },
-    applyProps(element, props) {
-      const url = props["0"] || props.url;
-      if (!url || typeof url !== "string") {
-        log2.error("HypenApp: URL is required");
-        element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
-        return;
-      }
-      const existing = activeInstances.get(element);
-      if (existing) {
-        return;
-      }
-      const engine = new RemoteEngine(url, {
-        autoReconnect: props.autoReconnect ?? true,
-        reconnectInterval: props.reconnectInterval ?? 3000,
-        maxReconnectAttempts: props.maxReconnectAttempts ?? 10
-      });
-      const nodes = new Map;
-      let rootId = null;
-      activeInstances.set(element, { engine, nodes });
-      engine.onPatches((patches) => {
-        applyPatches(element, nodes, patches, engine, (id) => {
-          if (!rootId)
-            rootId = id;
+        log.debug(`Rendering ${componentName} to`, this.container);
+        // Create renderer with debug config
+        this.renderer = new DOMRenderer(this.container, this.engine, {
+            enabled: this.config.debugHeatmap || false,
+            showHeatmap: this.config.debugHeatmap || false,
+            heatmapIncrement: this.config.heatmapIncrement || 5,
+            fadeOutDuration: this.config.heatmapFadeOut || 2000,
+            maxOpacity: 0.8,
         });
-      });
-      element.innerHTML = '<div class="hypen-app-loading">Connecting...</div>';
-      engine.connect().then(() => {
-        element.innerHTML = "";
-        log2.debug(`HypenApp connected to ${url}`);
-      }).catch((error) => {
-        element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
-        log2.error("HypenApp connection failed:", error);
-      });
-      engine.onDisconnect(() => {
-        log2.debug("HypenApp disconnected");
-      });
-      engine.onError((error) => {
-        log2.error("HypenApp error:", error);
-      });
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          for (const removedNode of mutation.removedNodes) {
-            if (removedNode === element || removedNode.contains?.(element)) {
-              engine.disconnect();
-              activeInstances.delete(element);
-              observer.disconnect();
-              log2.debug("HypenApp cleaned up");
-              return;
-            }
-          }
+        // Set render callback
+        this.engine.setRenderCallback((patches) => {
+            log.debug(`Applying ${patches.length} patches`);
+            this.renderer.applyPatches(patches);
+        });
+        // Set context on renderer for component composition
+        this.renderer.setContext(this.router, this.globalContext);
+        // Extract module ID from component name or .id() applicator
+        const moduleId = this.extractModuleId(componentName, component.template);
+        // Create module instance with router and global context
+        this.moduleInstance = new HypenModuleInstance(this.engine, component.module, this.router, this.globalContext);
+        // Register module in global context
+        this.globalContext.registerModule(moduleId, this.moduleInstance);
+        this.moduleInstances.set(moduleId, this.moduleInstance);
+        // Connect module state changes to renderer
+        this.moduleInstance.onStateChange(() => {
+            const mergedState = this.getMergedState();
+            log.debug(`State changed, merged state:`, mergedState);
+            this.renderer.updateState(mergedState);
+        });
+        // Set up component resolver for dynamic component composition
+        this.setupComponentResolver();
+        // Create module instances for ALL components that have state
+        this.createNestedModuleInstances();
+        // Render the UI template
+        this.engine.renderSource(component.template);
+        // Update renderer with initial state
+        this.renderer.updateState(this.getMergedState());
+        log.debug(`${componentName} rendered successfully`);
+    }
+    /**
+     * Unmount and cleanup
+     */
+    async unmount() {
+        log.debug("Unmounting...");
+        if (this.moduleInstance) {
+            await this.moduleInstance.destroy();
+            this.moduleInstance = null;
         }
-      });
-      if (element.parentNode) {
-        observer.observe(element.parentNode, { childList: true, subtree: true });
-      }
-    }
-  };
-});
-
-// src/dom/components/app.ts
-var exports_app = {};
-__export(exports_app, {
-  appHandler: () => appHandler
-});
-var appHandler;
-var init_app = __esm(() => {
-  appHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.minHeight = "100vh";
-      el.style.width = "100%";
-      el.dataset.hypenType = "app";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/index.ts
-class ComponentRegistry {
-  handlers = new Map;
-  constructor() {
-    this.registerDefaults();
-  }
-  register(type, handler) {
-    this.handlers.set(type.toLowerCase(), handler);
-  }
-  get(type) {
-    if (!type)
-      return;
-    return this.handlers.get(type.toLowerCase());
-  }
-  createElement(type, props = {}) {
-    if (!type)
-      return null;
-    const handler = this.get(type);
-    if (!handler)
-      return null;
-    const element = handler.create();
-    if (handler.applyProps) {
-      handler.applyProps(element, props);
-    }
-    return element;
-  }
-  registerDefaults() {
-    const { columnHandler: columnHandler2 } = (init_column(), __toCommonJS(exports_column));
-    const { rowHandler: rowHandler2 } = (init_row(), __toCommonJS(exports_row));
-    const { textHandler: textHandler2 } = (init_text(), __toCommonJS(exports_text));
-    const { imageHandler: imageHandler2 } = (init_image(), __toCommonJS(exports_image));
-    const { buttonHandler: buttonHandler2 } = (init_button(), __toCommonJS(exports_button));
-    const { containerHandler: containerHandler2 } = (init_container(), __toCommonJS(exports_container));
-    const { centerHandler: centerHandler2 } = (init_center(), __toCommonJS(exports_center));
-    const { listHandler: listHandler2 } = (init_list(), __toCommonJS(exports_list));
-    const { inputHandler: inputHandler2 } = (init_input(), __toCommonJS(exports_input));
-    const { linkHandler: linkHandler2 } = (init_link(), __toCommonJS(exports_link));
-    const { textareaHandler: textareaHandler2 } = (init_textarea(), __toCommonJS(exports_textarea));
-    const { checkboxHandler: checkboxHandler2 } = (init_checkbox(), __toCommonJS(exports_checkbox));
-    const { selectHandler: selectHandler2 } = (init_select(), __toCommonJS(exports_select));
-    const { spacerHandler: spacerHandler2 } = (init_spacer(), __toCommonJS(exports_spacer));
-    const { stackHandler: stackHandler2 } = (init_stack(), __toCommonJS(exports_stack));
-    const { dividerHandler: dividerHandler2 } = (init_divider(), __toCommonJS(exports_divider));
-    const { gridHandler: gridHandler2 } = (init_grid(), __toCommonJS(exports_grid));
-    const { cardHandler: cardHandler2 } = (init_card(), __toCommonJS(exports_card));
-    const { headingHandler: headingHandler2 } = (init_heading(), __toCommonJS(exports_heading));
-    const { switchHandler: switchHandler2 } = (init_switch(), __toCommonJS(exports_switch));
-    const { sliderHandler: sliderHandler2 } = (init_slider(), __toCommonJS(exports_slider));
-    const { spinnerHandler: spinnerHandler2 } = (init_spinner(), __toCommonJS(exports_spinner));
-    const { badgeHandler: badgeHandler2 } = (init_badge(), __toCommonJS(exports_badge));
-    const { avatarHandler: avatarHandler2 } = (init_avatar(), __toCommonJS(exports_avatar));
-    const { progressBarHandler: progressBarHandler2 } = (init_progressbar(), __toCommonJS(exports_progressbar));
-    const { videoHandler: videoHandler2 } = (init_video(), __toCommonJS(exports_video));
-    const { audioHandler: audioHandler2 } = (init_audio(), __toCommonJS(exports_audio));
-    const { paragraphHandler: paragraphHandler2 } = (init_paragraph(), __toCommonJS(exports_paragraph));
-    const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
-    const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
-    const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
-    const { appHandler: appHandler2 } = (init_app(), __toCommonJS(exports_app));
-    this.register("app", appHandler2);
-    this.register("column", columnHandler2);
-    this.register("row", rowHandler2);
-    this.register("text", textHandler2);
-    this.register("image", imageHandler2);
-    this.register("button", buttonHandler2);
-    this.register("container", containerHandler2);
-    this.register("box", containerHandler2);
-    this.register("center", centerHandler2);
-    this.register("list", listHandler2);
-    this.register("input", inputHandler2);
-    this.register("link", linkHandler2);
-    this.register("textarea", textareaHandler2);
-    this.register("checkbox", checkboxHandler2);
-    this.register("select", selectHandler2);
-    this.register("spacer", spacerHandler2);
-    this.register("stack", stackHandler2);
-    this.register("divider", dividerHandler2);
-    this.register("grid", gridHandler2);
-    this.register("card", cardHandler2);
-    this.register("heading", headingHandler2);
-    this.register("switch", switchHandler2);
-    this.register("slider", sliderHandler2);
-    this.register("spinner", spinnerHandler2);
-    this.register("badge", badgeHandler2);
-    this.register("avatar", avatarHandler2);
-    this.register("progressbar", progressBarHandler2);
-    this.register("video", videoHandler2);
-    this.register("audio", audioHandler2);
-    this.register("paragraph", paragraphHandler2);
-    this.register("router", routerHandler2);
-    this.register("route", routeHandler2);
-    this.register("hypenapp", hypenAppHandler2);
-  }
-}
-
-// src/dom/applicators/padding.ts
-var getNumericValue = (value) => {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "object" && value["0"] !== undefined)
-    return Number(value["0"]);
-  if (typeof value === "string")
-    return parseFloat(value);
-  return null;
-};
-var paddingHandler = (el, value) => {
-  if (typeof value === "number") {
-    el.style.padding = `${value}px`;
-  } else if (typeof value === "object") {
-    if (value["0"] !== undefined && Object.keys(value).length === 1) {
-      el.style.padding = `${value["0"]}px`;
-    } else {
-      if (value.left !== undefined)
-        el.style.paddingLeft = `${value.left}px`;
-      if (value.right !== undefined)
-        el.style.paddingRight = `${value.right}px`;
-      if (value.top !== undefined)
-        el.style.paddingTop = `${value.top}px`;
-      if (value.bottom !== undefined)
-        el.style.paddingBottom = `${value.bottom}px`;
-    }
-  } else {
-    el.style.padding = String(value);
-  }
-};
-var paddingTopHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingTop = `${v}px`;
-};
-var paddingBottomHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingBottom = `${v}px`;
-};
-var paddingLeftHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingLeft = `${v}px`;
-};
-var paddingRightHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingRight = `${v}px`;
-};
-var paddingHorizontalHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.paddingLeft = `${v}px`;
-    el.style.paddingRight = `${v}px`;
-  }
-};
-var paddingVerticalHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.paddingTop = `${v}px`;
-    el.style.paddingBottom = `${v}px`;
-  }
-};
-
-// src/dom/applicators/margin.ts
-var getNumericValue2 = (value) => {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "object" && value["0"] !== undefined)
-    return Number(value["0"]);
-  if (typeof value === "string")
-    return parseFloat(value);
-  return null;
-};
-var marginHandler = (el, value) => {
-  if (typeof value === "number") {
-    el.style.margin = `${value}px`;
-  } else if (typeof value === "object") {
-    if (value["0"] !== undefined && Object.keys(value).length === 1) {
-      el.style.margin = `${value["0"]}px`;
-    } else {
-      if (value.left !== undefined)
-        el.style.marginLeft = `${value.left}px`;
-      if (value.right !== undefined)
-        el.style.marginRight = `${value.right}px`;
-      if (value.top !== undefined)
-        el.style.marginTop = `${value.top}px`;
-      if (value.bottom !== undefined)
-        el.style.marginBottom = `${value.bottom}px`;
-    }
-  } else {
-    el.style.margin = String(value);
-  }
-};
-var marginTopHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginTop = `${v}px`;
-};
-var marginBottomHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginBottom = `${v}px`;
-};
-var marginLeftHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginLeft = `${v}px`;
-};
-var marginRightHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginRight = `${v}px`;
-};
-var marginHorizontalHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null) {
-    el.style.marginLeft = `${v}px`;
-    el.style.marginRight = `${v}px`;
-  }
-};
-var marginVerticalHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null) {
-    el.style.marginTop = `${v}px`;
-    el.style.marginBottom = `${v}px`;
-  }
-};
-
-// src/dom/applicators/color.ts
-var colorHandlers = {
-  color: (el, value) => {
-    el.style.color = String(value);
-  },
-  backgroundColor: (el, value) => {
-    el.style.backgroundColor = String(value);
-  },
-  borderColor: (el, value) => {
-    el.style.borderColor = String(value);
-  },
-  opacity: (el, value) => {
-    el.style.opacity = String(value);
-  }
-};
-
-// src/dom/applicators/border.ts
-var borderHandlers = {
-  border: (el, value) => {
-    if (typeof value === "number") {
-      el.style.borderWidth = `${value}px`;
-      el.style.borderStyle = "solid";
-    } else if (typeof value === "object" && value !== null) {
-      const obj = value;
-      if (obj.width !== undefined) {
-        el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
-      }
-      if (obj.color !== undefined) {
-        el.style.borderColor = String(obj.color);
-      }
-      if (obj.style !== undefined) {
-        el.style.borderStyle = String(obj.style);
-      } else {
-        el.style.borderStyle = "solid";
-      }
-      if (obj.radius !== undefined) {
-        el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
-      }
-    } else if (typeof value === "string") {
-      el.style.border = value;
-    }
-  },
-  borderWidth: (el, value) => {
-    el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
-  },
-  borderStyle: (el, value) => {
-    el.style.borderStyle = String(value);
-  },
-  borderRadius: (el, value) => {
-    if (typeof value === "number") {
-      el.style.borderRadius = `${value}px`;
-    } else if (typeof value === "object" && value !== null) {
-      const obj = value;
-      const topLeft = obj.topLeft ?? obj.topStart ?? 0;
-      const topRight = obj.topRight ?? obj.topEnd ?? 0;
-      const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
-      const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
-      const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
-      el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
-    } else {
-      el.style.borderRadius = String(value);
-    }
-  },
-  cornerRadius: (el, value) => {
-    if (typeof value === "number") {
-      el.style.borderRadius = `${value}px`;
-    } else if (typeof value === "object" && value !== null) {
-      const obj = value;
-      const topLeft = obj.topLeft ?? obj.topStart ?? 0;
-      const topRight = obj.topRight ?? obj.topEnd ?? 0;
-      const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
-      const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
-      const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
-      el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
-    } else {
-      el.style.borderRadius = String(value);
-    }
-  }
-};
-
-// src/dom/applicators/size.ts
-function parseSizeValue(value) {
-  if (value === null || value === undefined)
-    return null;
-  if (typeof value === "number") {
-    return `${value}px`;
-  }
-  const str = String(value).trim().toLowerCase();
-  switch (str) {
-    case "fill":
-    case "match_parent":
-      return "100%";
-    case "wrap":
-    case "wrap_content":
-    case "auto":
-      return "auto";
-    case "infinity":
-    case "inf":
-    case "max":
-      return "100%";
-  }
-  const match = str.match(/^(-?[\d.]+)\s*(px|dp|pt|%|vw|vh|vmin|vmax|em|rem)?$/);
-  if (!match) {
-    return str;
-  }
-  const num = parseFloat(match[1]);
-  const unit = match[2] || "px";
-  switch (unit) {
-    case "px":
-      return `${num}px`;
-    case "dp":
-    case "pt":
-      return `${num}px`;
-    case "%":
-      return `${num}%`;
-    case "vw":
-      return `${num}vw`;
-    case "vh":
-      return `${num}vh`;
-    case "vmin":
-      return `${num}vmin`;
-    case "vmax":
-      return `${num}vmax`;
-    case "em":
-      return `${num}em`;
-    case "rem":
-      return `${num}rem`;
-    default:
-      return `${num}px`;
-  }
-}
-var sizeHandlers = {
-  width: (el, value) => {
-    const size = parseSizeValue(value);
-    if (size)
-      el.style.width = size;
-  },
-  height: (el, value) => {
-    const size = parseSizeValue(value);
-    if (size)
-      el.style.height = size;
-  },
-  minWidth: (el, value) => {
-    const size = parseSizeValue(value);
-    if (size)
-      el.style.minWidth = size;
-  },
-  minHeight: (el, value) => {
-    const size = parseSizeValue(value);
-    if (size)
-      el.style.minHeight = size;
-  },
-  maxWidth: (el, value) => {
-    const size = parseSizeValue(value);
-    if (size)
-      el.style.maxWidth = size;
-  },
-  maxHeight: (el, value) => {
-    const size = parseSizeValue(value);
-    if (size)
-      el.style.maxHeight = size;
-  },
-  size: (el, value) => {
-    if (typeof value === "object" && value !== null) {
-      const obj = value;
-      if (obj.width !== undefined) {
-        const w = parseSizeValue(obj.width);
-        if (w)
-          el.style.width = w;
-      }
-      if (obj.height !== undefined) {
-        const h = parseSizeValue(obj.height);
-        if (h)
-          el.style.height = h;
-      }
-    } else {
-      const size = parseSizeValue(value);
-      if (size) {
-        el.style.width = size;
-        el.style.height = size;
-      }
-    }
-  },
-  fillMaxWidth: (el, value) => {
-    if (value === false)
-      return;
-    const fraction = typeof value === "number" ? value : 1;
-    if (fraction === 1) {
-      el.style.alignSelf = "stretch";
-      el.style.width = "100%";
-      el.style.minWidth = "0";
-    } else {
-      el.style.width = `${fraction * 100}%`;
-    }
-    el.style.justifySelf = "stretch";
-  },
-  fillMaxHeight: (el, value) => {
-    if (value === false)
-      return;
-    const fraction = typeof value === "number" ? value : 1;
-    el.style.height = `${fraction * 100}%`;
-  },
-  fillMaxSize: (el, value) => {
-    if (value === false)
-      return;
-    const fraction = typeof value === "number" ? value : 1;
-    el.style.width = `${fraction * 100}%`;
-    el.style.height = `${fraction * 100}%`;
-    el.style.alignSelf = "stretch";
-    el.style.minWidth = "0";
-  }
-};
-
-// src/dom/applicators/font.ts
-var loadedGoogleFonts = new Set;
-var systemFontKeywords = new Set([
-  "default",
-  "system",
-  "system-ui",
-  "inherit",
-  "initial",
-  "unset",
-  "serif",
-  "sans-serif",
-  "monospace",
-  "cursive",
-  "fantasy",
-  "-apple-system",
-  "BlinkMacSystemFont",
-  "Segoe UI",
-  "Arial",
-  "Helvetica",
-  "Times New Roman",
-  "Georgia",
-  "Courier New",
-  "Verdana",
-  "Tahoma"
-]);
-function isSystemFont(fontName) {
-  const normalized = fontName.toLowerCase().trim();
-  return systemFontKeywords.has(normalized) || normalized.startsWith("-") || normalized.startsWith("ui-");
-}
-function loadGoogleFont(fontName) {
-  const normalized = fontName.trim();
-  if (loadedGoogleFonts.has(normalized) || isSystemFont(normalized)) {
-    return;
-  }
-  loadedGoogleFonts.add(normalized);
-  const link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(normalized)}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
-  document.head.appendChild(link);
-}
-function processFontFamily(value) {
-  const fonts = value.split(",").map((f) => f.trim().replace(/["']/g, ""));
-  for (const font of fonts) {
-    if (!isSystemFont(font)) {
-      loadGoogleFont(font);
-    }
-  }
-  return fonts.map((f) => {
-    if (f.includes(" ") && !f.startsWith('"') && !f.startsWith("'")) {
-      return `"${f}"`;
-    }
-    return f;
-  }).join(", ");
-}
-var fontHandlers = {
-  fontSize: (el, value) => {
-    el.style.fontSize = typeof value === "number" ? `${value}px` : String(value);
-  },
-  fontWeight: (el, value) => {
-    el.style.fontWeight = String(value);
-  },
-  fontFamily: (el, value) => {
-    const fontValue = String(value);
-    el.style.fontFamily = processFontFamily(fontValue);
-  },
-  textAlign: (el, value) => {
-    el.style.textAlign = String(value);
-  },
-  lineHeight: (el, value) => {
-    el.style.lineHeight = String(value);
-  },
-  fontStyle: (el, value) => {
-    el.style.fontStyle = String(value);
-  },
-  textTransform: (el, value) => {
-    el.style.textTransform = String(value);
-  }
-};
-var GoogleFonts = {
-  preload: loadGoogleFont,
-  isLoaded: (fontName) => loadedGoogleFonts.has(fontName.trim()),
-  getLoadedFonts: () => Array.from(loadedGoogleFonts),
-  popular: [
-    "Roboto",
-    "Open Sans",
-    "Lato",
-    "Montserrat",
-    "Poppins",
-    "Inter",
-    "Nunito",
-    "Playfair Display",
-    "Merriweather",
-    "Source Code Pro",
-    "Fira Code",
-    "JetBrains Mono",
-    "Raleway",
-    "Ubuntu",
-    "Oswald",
-    "Quicksand",
-    "Work Sans",
-    "Rubik",
-    "Karla",
-    "DM Sans"
-  ]
-};
-
-// src/dom/applicators/layout.ts
-function mapAlignmentValue(value) {
-  const v = String(value).toLowerCase();
-  switch (v) {
-    case "top":
-    case "start":
-    case "leading":
-    case "left":
-      return "flex-start";
-    case "bottom":
-    case "end":
-    case "trailing":
-    case "right":
-      return "flex-end";
-    case "center":
-      return "center";
-    case "spacebetween":
-    case "space-between":
-      return "space-between";
-    case "spacearound":
-    case "space-around":
-      return "space-around";
-    case "spaceevenly":
-    case "space-evenly":
-      return "space-evenly";
-    default:
-      return v;
-  }
-}
-var layoutHandlers = {
-  verticalAlignment: (el, value) => {
-    const val = mapAlignmentValue(String(value));
-    const display = el.style.display || getComputedStyle(el).display;
-    const flexDirection = el.style.flexDirection || getComputedStyle(el).flexDirection;
-    if (display === "grid") {
-      el.style.alignItems = val;
-    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
-      el.style.justifyContent = val;
-    } else {
-      el.style.alignItems = val;
-    }
-  },
-  horizontalAlignment: (el, value) => {
-    const val = mapAlignmentValue(String(value));
-    const display = el.style.display || getComputedStyle(el).display;
-    const flexDirection = el.style.flexDirection || getComputedStyle(el).flexDirection;
-    if (display === "grid") {
-      el.style.justifyItems = val;
-    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
-      el.style.alignItems = val;
-    } else if (flexDirection === "row" || flexDirection === "row-reverse") {
-      el.style.justifyContent = val;
-      if (val !== "flex-start" && el.style.overflow !== "auto" && el.style.overflowX !== "auto") {
-        el.style.width = "100%";
-      }
-    } else {
-      el.style.justifyContent = val;
-    }
-  },
-  horizontalAlign: (el, value) => {
-    el.style.justifyContent = mapAlignmentValue(String(value));
-  },
-  verticalAlign: (el, value) => {
-    el.style.alignItems = mapAlignmentValue(String(value));
-  },
-  gap: (el, value) => {
-    el.style.gap = typeof value === "number" ? `${value}px` : String(value);
-  },
-  weight: (el, value) => {
-    el.style.flex = String(value);
-    el.dataset.hypenFlex = "true";
-  },
-  flex: (el, value) => {
-    el.style.flex = String(value);
-    el.dataset.hypenFlex = "true";
-  },
-  flexGrow: (el, value) => {
-    el.style.flexGrow = String(value);
-  },
-  flexShrink: (el, value) => {
-    el.style.flexShrink = String(value);
-  },
-  cursor: (el, value) => {
-    el.style.cursor = String(value);
-  },
-  overflow: (el, value) => {
-    el.style.overflow = String(value);
-  },
-  scrollable: (el, value) => {
-    if (value === true || value === "true") {
-      el.style.overflow = "auto";
-    } else if (value === false || value === "false") {
-      el.style.overflow = "hidden";
-    } else if (value === "vertical") {
-      el.style.overflowX = "hidden";
-      el.style.overflowY = "auto";
-    } else if (value === "horizontal") {
-      el.style.overflowX = "auto";
-      el.style.overflowY = "hidden";
-    } else if (value === "both") {
-      el.style.overflow = "auto";
-    } else {
-      el.style.overflow = String(value);
-    }
-  }
-};
-
-// src/dom/element-data.ts
-import { getElementDisposables } from "@hypen-space/core/disposable";
-var elementDataMap = new WeakMap;
-function getHypenData(element) {
-  let data = elementDataMap.get(element);
-  if (!data) {
-    data = {};
-    elementDataMap.set(element, data);
-  }
-  return data;
-}
-function hasHypenData(element) {
-  return elementDataMap.has(element);
-}
-function clearHypenData(element) {
-  elementDataMap.delete(element);
-}
-function getEngine(element) {
-  return getHypenData(element).engine;
-}
-function setEngine(element, engine) {
-  getHypenData(element).engine = engine;
-}
-function findEngine(element) {
-  let current = element;
-  while (current) {
-    const engine = getEngine(current);
-    if (engine)
-      return engine;
-    current = current.parentElement;
-  }
-  return;
-}
-function getRegisteredEvents(element) {
-  const data = getHypenData(element);
-  if (!data.registeredEvents) {
-    data.registeredEvents = new Set;
-  }
-  return data.registeredEvents;
-}
-function isEventRegistered(element, eventKey) {
-  return getRegisteredEvents(element).has(eventKey);
-}
-function registerEvent(element, eventKey) {
-  getRegisteredEvents(element).add(eventKey);
-}
-function unregisterEvent(element, eventKey) {
-  getRegisteredEvents(element).delete(eventKey);
-}
-function getKeyTarget(element) {
-  return getHypenData(element).keyTarget;
-}
-function setKeyTarget(element, key) {
-  getHypenData(element).keyTarget = key;
-}
-function getMeta(element, key) {
-  return getHypenData(element).meta?.[key];
-}
-function setMeta(element, key, value) {
-  const data = getHypenData(element);
-  if (!data.meta) {
-    data.meta = {};
-  }
-  data.meta[key] = value;
-}
-function disposeHypenElement(element) {
-  try {
-    const disposables = getElementDisposables(element);
-    disposables.dispose();
-  } catch {}
-  clearHypenData(element);
-}
-var HYPEN_ENGINE_SYMBOL = Symbol.for("hypen.engine");
-var REGISTERED_EVENTS_SYMBOL = Symbol.for("hypen.registeredEvents");
-var KEY_TARGET_SYMBOL = Symbol.for("hypen.keyTarget");
-function getLegacyEngine(element) {
-  const engine = getEngine(element);
-  if (engine)
-    return engine;
-  return element[HYPEN_ENGINE_SYMBOL] ?? element.__hypenEngine;
-}
-function setLegacyEngine(element, engine) {
-  setEngine(element, engine);
-  element.__hypenEngine = engine;
-}
-
-// src/dom/applicators/events.ts
-import {
-  getElementDisposables as getElementDisposables2,
-  disposableListener,
-  disposableTimeout
-} from "@hypen-space/core/disposable";
-import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core/logger";
-var log3 = frameworkLoggers3.events;
-function toPlainObject(value) {
-  if (value instanceof Map) {
-    const obj = {};
-    for (const [key, val] of value.entries()) {
-      obj[key] = toPlainObject(val);
-    }
-    return obj;
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => toPlainObject(item));
-  }
-  if (value && typeof value === "object") {
-    const obj = {};
-    for (const [key, val] of Object.entries(value)) {
-      obj[key] = toPlainObject(val);
-    }
-    return obj;
-  }
-  return value;
-}
-function extractActionDetails(value) {
-  if (typeof value === "string") {
-    if (!value.startsWith("@")) {
-      return { actionName: null, payload: {} };
-    }
-    let actionName = value.substring(1);
-    if (actionName.startsWith("actions.")) {
-      actionName = actionName.substring(8);
-    }
-    return { actionName, payload: {} };
-  }
-  if (value && typeof value === "object") {
-    const plain = toPlainObject(value);
-    const payload = {};
-    let actionName = null;
-    if (plain && typeof plain === "object") {
-      const actionValue = plain["0"];
-      if (typeof actionValue === "string" && actionValue.startsWith("@")) {
-        actionName = actionValue.substring(1);
-        if (actionName.startsWith("actions.")) {
-          actionName = actionName.substring(8);
+        if (this.container) {
+            this.container.innerHTML = "";
+            this.container = null;
         }
-      }
-      for (const [key, val] of Object.entries(plain)) {
-        if (key !== "0") {
-          if (/^\d+$/.test(key) && val && typeof val === "object" && !Array.isArray(val)) {
-            for (const [innerKey, innerVal] of Object.entries(val)) {
-              payload[innerKey] = innerVal;
-            }
-          } else {
-            payload[key] = val;
-          }
+        this.renderer = null;
+        log.debug("Unmounted");
+    }
+    /**
+     * Get the current module instance
+     */
+    getModuleInstance() {
+        return this.moduleInstance;
+    }
+    /**
+     * Get the current state
+     */
+    getState() {
+        return this.moduleInstance?.getState() ?? null;
+    }
+    /**
+     * Get the router instance
+     */
+    getRouter() {
+        return this.router;
+    }
+    /**
+     * Get the global context
+     */
+    getGlobalContext() {
+        return this.globalContext;
+    }
+    /**
+     * Enable or disable debug heatmap mode
+     */
+    setDebugHeatmap(enabled) {
+        if (this.renderer) {
+            this.renderer.setDebugConfig({ enabled, showHeatmap: enabled });
+            log.debug(`Debug heatmap ${enabled ? "enabled" : "disabled"}`);
         }
-      }
-    }
-    return { actionName, payload };
-  }
-  return { actionName: null, payload: {} };
-}
-function extractEventData(event, element) {
-  const data = {
-    type: event.type,
-    timestamp: Date.now()
-  };
-  if (event instanceof MouseEvent) {
-    data.clientX = event.clientX;
-    data.clientY = event.clientY;
-    data.button = event.button;
-  }
-  if (event instanceof KeyboardEvent) {
-    data.key = event.key;
-    data.code = event.code;
-    data.ctrlKey = event.ctrlKey;
-    data.shiftKey = event.shiftKey;
-    data.altKey = event.altKey;
-    data.metaKey = event.metaKey;
-  }
-  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-    data.value = element.value;
-  }
-  if (element instanceof HTMLSelectElement) {
-    data.value = element.value;
-    data.selectedIndex = element.selectedIndex;
-  }
-  if (event.type === "submit" && element instanceof HTMLFormElement) {
-    data.formData = new FormData(element);
-  }
-  return data;
-}
-function createEventHandler(eventType, options = {}) {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      log3.warn(`${eventType} requires an action reference starting with @, got:`, value);
-      return;
-    }
-    const disposables = getElementDisposables2(element);
-    const eventKey = `${eventType}:${actionName}`;
-    if (getRegisteredEvents(element).has(eventKey)) {
-      return;
     }
-    registerEvent(element, eventKey);
-    let throttleTimer = null;
-    const listener = (event) => {
-      if (options.throttleMs && throttleTimer) {
-        return;
-      }
-      if (options.throttleMs) {
-        throttleTimer = disposableTimeout(() => {
-          throttleTimer = null;
-        }, options.throttleMs);
-      }
-      if (options.preventDefault) {
-        event.preventDefault();
-      }
-      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : options.extractPayload ? options.extractPayload(event, element) : extractEventData(event, element);
-      const engine = getEngine(element);
-      if (engine) {
-        try {
-          engine.dispatchAction(actionName, payload);
-        } catch (err) {
-          log3.error(`Error dispatching action "${actionName}":`, err);
+    /**
+     * Reset debug tracking for all elements
+     */
+    resetDebugTracking() {
+        if (this.renderer) {
+            this.renderer.resetDebugTracking();
+            log.debug("Debug tracking reset");
         }
-      }
-    };
-    disposables.add(disposableListener(element, eventType, listener, {
-      passive: options.passive
-    }));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-      if (throttleTimer) {
-        throttleTimer.dispose();
-      }
-    });
-  };
-}
-function createKeyHandler(defaultKey = "Enter") {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      log3.warn(`onKey requires an action reference starting with @, got:`, value);
-      return;
     }
-    const disposables = getElementDisposables2(element);
-    const eventKey = `keydown:${actionName}:${defaultKey}`;
-    if (getRegisteredEvents(element).has(eventKey)) {
-      return;
-    }
-    registerEvent(element, eventKey);
-    const targetKey = getKeyTarget(element) || defaultKey;
-    const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
-    const listener = (event) => {
-      const keyEvent = event;
-      if (keyEvent.key !== keyToMatch) {
-        return;
-      }
-      event.preventDefault();
-      const target = event.target;
-      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-        type: event.type,
-        timestamp: Date.now(),
-        key: keyEvent.key,
-        code: keyEvent.code,
-        value: target.value,
-        input: target.value,
-        ctrlKey: keyEvent.ctrlKey,
-        shiftKey: keyEvent.shiftKey,
-        altKey: keyEvent.altKey,
-        metaKey: keyEvent.metaKey
-      };
-      const engine = getEngine(element);
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      }
-    };
-    disposables.add(disposableListener(element, "keydown", listener));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-    });
-  };
-}
-function createLongClickHandler(thresholdMs = 500) {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      log3.warn(`onLongClick requires an action reference starting with @, got:`, value);
-      return;
-    }
-    const disposables = getElementDisposables2(element);
-    const eventKey = `longclick:${actionName}`;
-    if (getRegisteredEvents(element).has(eventKey)) {
-      return;
-    }
-    registerEvent(element, eventKey);
-    let longClickTimer = null;
-    const downListener = (event) => {
-      const pointerEvent = event;
-      longClickTimer = disposableTimeout(() => {
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "longclick",
-          timestamp: Date.now(),
-          clientX: pointerEvent.clientX,
-          clientY: pointerEvent.clientY
-        };
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
+    /**
+     * Get debug statistics
+     */
+    getDebugStats() {
+        return this.renderer?.getDebugStats() || null;
+    }
+    /**
+     * Render a lazy route component into a specific route element
+     * This is called by the Router when a route becomes active
+     */
+    async renderLazyRoute(routePath, componentName, routeElement) {
+        if (!this.engine || !this.renderer) {
+            throw new Error("Engine not initialized");
         }
-        longClickTimer = null;
-      }, thresholdMs);
-    };
-    const cancelListener = () => {
-      if (longClickTimer) {
-        longClickTimer.dispose();
-        longClickTimer = null;
-      }
-    };
-    disposables.add(disposableListener(element, "pointerdown", downListener));
-    disposables.add(disposableListener(element, "pointerup", cancelListener));
-    disposables.add(disposableListener(element, "pointerleave", cancelListener));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-      cancelListener();
-    });
-  };
-}
-var inputPayload = (event, element) => {
-  const target = element;
-  return {
-    type: event.type,
-    timestamp: Date.now(),
-    value: target.value,
-    input: target.value
-  };
-};
-var scrollPayload = (_event, element) => {
-  const scrollTop = element.scrollTop;
-  const scrollHeight = element.scrollHeight;
-  const clientHeight = element.clientHeight;
-  const scrollPercentage = scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) * 100 : 0;
-  const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
-  return {
-    type: "scroll",
-    timestamp: Date.now(),
-    scrollTop,
-    scrollLeft: element.scrollLeft,
-    scrollHeight,
-    scrollWidth: element.scrollWidth,
-    clientHeight,
-    clientWidth: element.clientWidth,
-    scrollPercentage: Math.round(scrollPercentage),
-    nearBottom,
-    atBottom: scrollHeight - scrollTop === clientHeight,
-    atTop: scrollTop === 0
-  };
-};
-var focusPayload = (event, element) => ({
-  type: event.type,
-  timestamp: Date.now(),
-  value: element.value ?? undefined
-});
-var mousePayload = (event, _element) => {
-  const mouseEvent = event;
-  return {
-    type: event.type,
-    timestamp: Date.now(),
-    clientX: mouseEvent.clientX,
-    clientY: mouseEvent.clientY
-  };
-};
-var eventHandlers = {
-  onClick: createEventHandler("click"),
-  onPress: createEventHandler("click"),
-  onChange: createEventHandler("change"),
-  onSubmit: createEventHandler("submit", { preventDefault: true }),
-  onInput: createEventHandler("input", { extractPayload: inputPayload }),
-  onKey: createKeyHandler("Enter"),
-  "onKey.key": (element, value) => {
-    setKeyTarget(element, String(value));
-  },
-  "onKey.action": createKeyHandler("Enter"),
-  onScroll: createEventHandler("scroll", {
-    throttleMs: 100,
-    passive: true,
-    extractPayload: scrollPayload
-  }),
-  onLongClick: createLongClickHandler(500),
-  onLongPress: createLongClickHandler(500),
-  onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
-  onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
-  onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
-  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
-  bind: (element, value) => {
-    const bindPath = typeof value === "string" ? value : null;
-    if (!bindPath)
-      return;
-    const disposables = getElementDisposables2(element);
-    const eventKey = `bind:${bindPath}`;
-    if (getRegisteredEvents(element).has(eventKey))
-      return;
-    registerEvent(element, eventKey);
-    const hypenType = element.dataset?.hypenType;
-    if (hypenType === "checkbox" || hypenType === "switch") {
-      const input = element.querySelector('input[type="checkbox"]');
-      if (!input)
-        return;
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: input.checked
-          });
+        // Get the component from the loader
+        const component = componentLoader.get(componentName);
+        if (!component) {
+            throw new Error(`Component ${componentName} not found`);
         }
-      };
-      disposables.add(disposableListener(input, "change", listener, { passive: true }));
-    } else if (element instanceof HTMLSelectElement) {
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: element.value
-          });
+        // Get the component template
+        const template = component.template;
+        if (!template) {
+            throw new Error(`Component ${componentName} has no template`);
         }
-      };
-      disposables.add(disposableListener(element, "change", listener, { passive: true }));
-    } else if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: element.value
-          });
+        // Create module instance for this component if it has state
+        if (component.module && !this.moduleInstances.has(componentName)) {
+            const moduleId = this.extractModuleId(componentName, template);
+            const moduleInstance = new HypenModuleInstance(this.engine, component.module, this.router, this.globalContext);
+            this.globalContext.registerModule(moduleId, moduleInstance);
+            this.moduleInstances.set(componentName, moduleInstance);
+            // Listen to state changes
+            moduleInstance.onStateChange(() => {
+                const mergedState = this.getMergedState();
+                log.debug(`Lazy component ${componentName} state changed:`, mergedState);
+                this.renderer.updateState(mergedState);
+            });
         }
-      };
-      disposables.add(disposableListener(element, "input", listener, { passive: true }));
-    } else {
-      log3.warn(`.bind() is not supported on element type "${element.dataset?.hypenType || element.tagName}". ` + `Supported types: input, textarea, checkbox, switch, select.`);
-      unregisterEvent(element, eventKey);
-      return;
-    }
-    disposables.addCallback(() => unregisterEvent(element, eventKey));
-  }
-};
-
-// src/dom/applicators/typography.ts
-var typographyHandlers = {
-  textAlign: (el, value) => {
-    el.style.textAlign = String(value);
-  },
-  textTransform: (el, value) => {
-    el.style.textTransform = String(value);
-  },
-  textDecoration: (el, value) => {
-    el.style.textDecoration = String(value);
-  },
-  textDecorationColor: (el, value) => {
-    el.style.textDecorationColor = String(value);
-  },
-  textDecorationStyle: (el, value) => {
-    el.style.textDecorationStyle = String(value);
-  },
-  textDecorationThickness: (el, value) => {
-    el.style.textDecorationThickness = typeof value === "number" ? `${value}px` : String(value);
-  },
-  letterSpacing: (el, value) => {
-    el.style.letterSpacing = typeof value === "number" ? `${value}px` : String(value);
-  },
-  wordSpacing: (el, value) => {
-    el.style.wordSpacing = typeof value === "number" ? `${value}px` : String(value);
-  },
-  lineHeight: (el, value) => {
-    el.style.lineHeight = String(value);
-  },
-  textIndent: (el, value) => {
-    el.style.textIndent = typeof value === "number" ? `${value}px` : String(value);
-  },
-  textOverflow: (el, value) => {
-    el.style.textOverflow = String(value);
-  },
-  whiteSpace: (el, value) => {
-    el.style.whiteSpace = String(value);
-  },
-  wordBreak: (el, value) => {
-    el.style.wordBreak = String(value);
-  },
-  verticalAlign: (el, value) => {
-    el.style.verticalAlign = String(value);
-  },
-  fontVariant: (el, value) => {
-    el.style.fontVariant = String(value);
-  },
-  fontStretch: (el, value) => {
-    el.style.fontStretch = String(value);
-  },
-  fontStyle: (el, value) => {
-    el.style.fontStyle = String(value);
-  },
-  writingMode: (el, value) => {
-    el.style.writingMode = String(value);
-  },
-  maxLines: (el, value) => {
-    const lines = typeof value === "number" ? value : parseInt(String(value), 10);
-    if (!isNaN(lines) && lines > 0) {
-      el.style.display = "-webkit-box";
-      el.style.setProperty("-webkit-line-clamp", String(lines));
-      el.style.setProperty("-webkit-box-orient", "vertical");
-      el.style.overflow = "hidden";
-    }
-  }
-};
-
-// src/dom/applicators/transform.ts
-var transformHandlers = {
-  transform: (el, value) => {
-    el.style.transform = String(value);
-  },
-  transformOrigin: (el, value) => {
-    el.style.transformOrigin = String(value);
-  },
-  translateX: (el, value) => {
-    const current = el.style.transform || "";
-    const val = typeof value === "number" ? `${value}px` : String(value);
-    el.style.transform = current ? `${current} translateX(${val})` : `translateX(${val})`;
-  },
-  translateY: (el, value) => {
-    const current = el.style.transform || "";
-    const val = typeof value === "number" ? `${value}px` : String(value);
-    el.style.transform = current ? `${current} translateY(${val})` : `translateY(${val})`;
-  },
-  translateZ: (el, value) => {
-    const current = el.style.transform || "";
-    const val = typeof value === "number" ? `${value}px` : String(value);
-    el.style.transform = current ? `${current} translateZ(${val})` : `translateZ(${val})`;
-  },
-  rotate: (el, value) => {
-    const current = el.style.transform || "";
-    const val = String(value);
-    el.style.transform = current ? `${current} rotate(${val})` : `rotate(${val})`;
-  },
-  rotateX: (el, value) => {
-    const current = el.style.transform || "";
-    const val = String(value);
-    el.style.transform = current ? `${current} rotateX(${val})` : `rotateX(${val})`;
-  },
-  rotateY: (el, value) => {
-    const current = el.style.transform || "";
-    const val = String(value);
-    el.style.transform = current ? `${current} rotateY(${val})` : `rotateY(${val})`;
-  },
-  rotateZ: (el, value) => {
-    const current = el.style.transform || "";
-    const val = String(value);
-    el.style.transform = current ? `${current} rotateZ(${val})` : `rotateZ(${val})`;
-  },
-  scale: (el, value) => {
-    const current = el.style.transform || "";
-    el.style.transform = current ? `${current} scale(${value})` : `scale(${value})`;
-  },
-  scaleX: (el, value) => {
-    const current = el.style.transform || "";
-    el.style.transform = current ? `${current} scaleX(${value})` : `scaleX(${value})`;
-  },
-  scaleY: (el, value) => {
-    const current = el.style.transform || "";
-    el.style.transform = current ? `${current} scaleY(${value})` : `scaleY(${value})`;
-  },
-  skew: (el, value) => {
-    const current = el.style.transform || "";
-    el.style.transform = current ? `${current} skew(${value})` : `skew(${value})`;
-  },
-  skewX: (el, value) => {
-    const current = el.style.transform || "";
-    el.style.transform = current ? `${current} skewX(${value})` : `skewX(${value})`;
-  },
-  skewY: (el, value) => {
-    const current = el.style.transform || "";
-    el.style.transform = current ? `${current} skewY(${value})` : `skewY(${value})`;
-  },
-  perspective: (el, value) => {
-    el.style.perspective = typeof value === "number" ? `${value}px` : String(value);
-  }
-};
-
-// src/dom/applicators/effects.ts
-var effectsHandlers = {
-  boxShadow: (el, value) => {
-    if (typeof value === "string") {
-      el.style.boxShadow = value;
-    } else if (typeof value === "object" && value !== null) {
-      const obj = value;
-      const x = typeof obj.x === "number" ? `${obj.x}px` : obj.x ?? obj.offsetX ?? "0px";
-      const y = typeof obj.y === "number" ? `${obj.y}px` : obj.y ?? obj.offsetY ?? "0px";
-      const blur = typeof obj.blur === "number" ? `${obj.blur}px` : obj.blur ?? obj.radius ?? "0px";
-      const spread = typeof obj.spread === "number" ? `${obj.spread}px` : obj.spread ?? "0px";
-      const color = obj.color ?? "rgba(0,0,0,0.2)";
-      const inset = obj.inset ? "inset " : "";
-      el.style.boxShadow = `${inset}${x} ${y} ${blur} ${spread} ${color}`;
-    } else if (typeof value === "number") {
-      el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
-    }
-  },
-  shadow: (el, value) => {
-    if (typeof value === "object" && value !== null) {
-      const obj = value;
-      const x = typeof obj.x === "number" ? `${obj.x}px` : obj.x ?? obj.offsetX ?? "0px";
-      const y = typeof obj.y === "number" ? `${obj.y}px` : obj.y ?? obj.offsetY ?? "0px";
-      const blur = typeof obj.blur === "number" ? `${obj.blur}px` : obj.blur ?? obj.radius ?? "4px";
-      const color = obj.color ?? "rgba(0,0,0,0.2)";
-      el.style.boxShadow = `${x} ${y} ${blur} ${color}`;
-    } else if (typeof value === "number") {
-      el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
-    } else {
-      el.style.boxShadow = String(value);
-    }
-  },
-  elevation: (el, value) => {
-    const level = typeof value === "number" ? value : parseInt(String(value), 10);
-    if (!isNaN(level) && level >= 0) {
-      const y = level * 0.5;
-      const blur = level * 1.5;
-      const opacity = Math.min(0.1 + level * 0.02, 0.4);
-      el.style.boxShadow = `0 ${y}px ${blur}px rgba(0,0,0,${opacity})`;
-    }
-  },
-  textShadow: (el, value) => {
-    el.style.textShadow = String(value);
-  },
-  filter: (el, value) => {
-    el.style.filter = String(value);
-  },
-  backdropFilter: (el, value) => {
-    el.style.backdropFilter = String(value);
-  },
-  blur: (el, value) => {
-    const val = typeof value === "number" ? `${value}px` : String(value);
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} blur(${val})` : `blur(${val})`;
-  },
-  brightness: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} brightness(${value})` : `brightness(${value})`;
-  },
-  contrast: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} contrast(${value})` : `contrast(${value})`;
-  },
-  grayscale: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} grayscale(${value})` : `grayscale(${value})`;
-  },
-  hueRotate: (el, value) => {
-    const val = String(value);
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} hue-rotate(${val})` : `hue-rotate(${val})`;
-  },
-  invert: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} invert(${value})` : `invert(${value})`;
-  },
-  saturate: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} saturate(${value})` : `saturate(${value})`;
-  },
-  sepia: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} sepia(${value})` : `sepia(${value})`;
-  },
-  dropShadow: (el, value) => {
-    const current = el.style.filter || "";
-    el.style.filter = current ? `${current} drop-shadow(${value})` : `drop-shadow(${value})`;
-  },
-  mixBlendMode: (el, value) => {
-    el.style.mixBlendMode = String(value);
-  },
-  backgroundBlendMode: (el, value) => {
-    el.style.backgroundBlendMode = String(value);
-  },
-  clipPath: (el, value) => {
-    el.style.clipPath = String(value);
-  },
-  mask: (el, value) => {
-    el.style.mask = String(value);
-  },
-  maskImage: (el, value) => {
-    el.style.maskImage = String(value);
-  }
-};
-
-// src/dom/applicators/advanced-layout.ts
-var advancedLayoutHandlers = {
-  flexDirection: (el, value) => {
-    el.style.flexDirection = String(value);
-  },
-  flexWrap: (el, value) => {
-    el.style.flexWrap = String(value);
-  },
-  flexBasis: (el, value) => {
-    el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
-  },
-  alignContent: (el, value) => {
-    el.style.alignContent = String(value);
-  },
-  order: (el, value) => {
-    el.style.order = String(value);
-  },
-  gridTemplateColumns: (el, value) => {
-    el.style.gridTemplateColumns = String(value);
-  },
-  gridTemplateRows: (el, value) => {
-    el.style.gridTemplateRows = String(value);
-  },
-  gridColumns: (el, value) => {
-    if (typeof value === "number") {
-      el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
-    } else {
-      el.style.gridTemplateColumns = String(value);
-    }
-  },
-  gridRows: (el, value) => {
-    if (typeof value === "number") {
-      el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
-    } else {
-      el.style.gridTemplateRows = String(value);
-    }
-  },
-  gridTemplateAreas: (el, value) => {
-    el.style.gridTemplateAreas = String(value);
-  },
-  gridColumn: (el, value) => {
-    el.style.gridColumn = String(value);
-  },
-  gridRow: (el, value) => {
-    el.style.gridRow = String(value);
-  },
-  gridArea: (el, value) => {
-    el.style.gridArea = String(value);
-  },
-  gridAutoFlow: (el, value) => {
-    el.style.gridAutoFlow = String(value);
-  },
-  gridAutoColumns: (el, value) => {
-    el.style.gridAutoColumns = String(value);
-  },
-  gridAutoRows: (el, value) => {
-    el.style.gridAutoRows = String(value);
-  },
-  rowGap: (el, value) => {
-    el.style.rowGap = typeof value === "number" ? `${value}px` : String(value);
-  },
-  columnGap: (el, value) => {
-    el.style.columnGap = typeof value === "number" ? `${value}px` : String(value);
-  },
-  placeItems: (el, value) => {
-    el.style.placeItems = String(value);
-  },
-  placeContent: (el, value) => {
-    el.style.placeContent = String(value);
-  },
-  placeSelf: (el, value) => {
-    el.style.placeSelf = String(value);
-  },
-  position: (el, value) => {
-    el.style.position = String(value);
-  },
-  top: (el, value) => {
-    el.style.top = typeof value === "number" ? `${value}px` : String(value);
-  },
-  right: (el, value) => {
-    el.style.right = typeof value === "number" ? `${value}px` : String(value);
-  },
-  bottom: (el, value) => {
-    el.style.bottom = typeof value === "number" ? `${value}px` : String(value);
-  },
-  left: (el, value) => {
-    el.style.left = typeof value === "number" ? `${value}px` : String(value);
-  },
-  inset: (el, value) => {
-    el.style.inset = typeof value === "number" ? `${value}px` : String(value);
-  },
-  zIndex: (el, value) => {
-    el.style.zIndex = String(value);
-  }
-};
-
-// src/dom/applicators/background.ts
-var backgroundHandlers = {
-  backgroundImage: (el, value) => {
-    el.style.backgroundImage = String(value);
-  },
-  backgroundSize: (el, value) => {
-    el.style.backgroundSize = String(value);
-  },
-  backgroundPosition: (el, value) => {
-    el.style.backgroundPosition = String(value);
-  },
-  backgroundRepeat: (el, value) => {
-    el.style.backgroundRepeat = String(value);
-  },
-  backgroundAttachment: (el, value) => {
-    el.style.backgroundAttachment = String(value);
-  },
-  backgroundClip: (el, value) => {
-    el.style.backgroundClip = String(value);
-  },
-  backgroundOrigin: (el, value) => {
-    el.style.backgroundOrigin = String(value);
-  },
-  linearGradient: (el, value) => {
-    el.style.backgroundImage = `linear-gradient(${value})`;
-  },
-  radialGradient: (el, value) => {
-    el.style.backgroundImage = `radial-gradient(${value})`;
-  },
-  conicGradient: (el, value) => {
-    el.style.backgroundImage = `conic-gradient(${value})`;
-  }
-};
-
-// src/dom/applicators/display.ts
-var displayHandlers = {
-  display: (el, value) => {
-    el.style.display = String(value);
-  },
-  visibility: (el, value) => {
-    el.style.visibility = String(value);
-  },
-  overflowX: (el, value) => {
-    el.style.overflowX = String(value);
-  },
-  overflowY: (el, value) => {
-    el.style.overflowY = String(value);
-  },
-  pointerEvents: (el, value) => {
-    el.style.pointerEvents = String(value);
-  },
-  userSelect: (el, value) => {
-    el.style.userSelect = String(value);
-  },
-  resize: (el, value) => {
-    el.style.resize = String(value);
-  },
-  boxSizing: (el, value) => {
-    el.style.boxSizing = String(value);
-  },
-  aspectRatio: (el, value) => {
-    el.style.aspectRatio = String(value);
-  },
-  objectFit: (el, value) => {
-    el.style.objectFit = String(value);
-  },
-  objectPosition: (el, value) => {
-    el.style.objectPosition = String(value);
-  }
-};
-
-// src/dom/applicators/transition.ts
-var transitionHandlers = {
-  transition: (el, value) => {
-    el.style.transition = String(value);
-  },
-  transitionProperty: (el, value) => {
-    el.style.transitionProperty = String(value);
-  },
-  transitionDuration: (el, value) => {
-    el.style.transitionDuration = String(value);
-  },
-  transitionTimingFunction: (el, value) => {
-    el.style.transitionTimingFunction = String(value);
-  },
-  transitionDelay: (el, value) => {
-    el.style.transitionDelay = String(value);
-  },
-  animation: (el, value) => {
-    el.style.animation = String(value);
-  },
-  animationName: (el, value) => {
-    el.style.animationName = String(value);
-  },
-  animationDuration: (el, value) => {
-    el.style.animationDuration = String(value);
-  },
-  animationTimingFunction: (el, value) => {
-    el.style.animationTimingFunction = String(value);
-  },
-  animationDelay: (el, value) => {
-    el.style.animationDelay = String(value);
-  },
-  animationIterationCount: (el, value) => {
-    el.style.animationIterationCount = String(value);
-  },
-  animationDirection: (el, value) => {
-    el.style.animationDirection = String(value);
-  },
-  animationFillMode: (el, value) => {
-    el.style.animationFillMode = String(value);
-  },
-  animationPlayState: (el, value) => {
-    el.style.animationPlayState = String(value);
-  }
-};
-
-// src/dom/applicators/index.ts
-var BREAKPOINTS = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px"
-};
-var variantStyleSheet = null;
-var insertedRules = new Set;
-function getVariantStyleSheet() {
-  if (!variantStyleSheet) {
-    const style = document.createElement("style");
-    style.id = "hypen-variants";
-    document.head.appendChild(style);
-    variantStyleSheet = style.sheet;
-  }
-  return variantStyleSheet;
-}
-function hashValue(value) {
-  return String(value).replace(/[^a-zA-Z0-9]/g, "").slice(0, 8);
-}
-
-class ApplicatorRegistry {
-  handlers = new Map;
-  elementState = new WeakMap;
-  constructor() {
-    this.registerDefaults();
-  }
-  register(name, handler) {
-    this.handlers.set(name, handler);
-  }
-  apply(element, name, value) {
-    const { handlerName, argKey, aggregate, fallbackName } = this.parseApplicatorName(name);
-    const handler = this.handlers.get(handlerName);
-    const state = this.getElementState(element);
-    const previous = state.get(handlerName);
-    if (aggregate && argKey !== null) {
-      const merged = this.mergeAggregateState(previous, argKey, this.normalizeValue(value));
-      state.set(handlerName, merged);
-      if (handler) {
-        handler(element, merged);
-      } else {
-        this.setStyleProperty(element, fallbackName, value);
-      }
-      return;
-    }
-    if (handler) {
-      if (this.isEventApplicator(handlerName)) {
-        const normalizedValue = this.normalizeEventValue(previous, value);
-        state.set(handlerName, normalizedValue);
-        handler(element, normalizedValue);
-      } else {
-        state.set(handlerName, value);
-        handler(element, value);
-      }
-    } else {
-      this.setStyleProperty(element, handlerName, value);
-    }
-  }
-  parseApplicatorName(name) {
-    const dotIndex = name.indexOf(".");
-    if (dotIndex === -1) {
-      return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };
-    }
-    const baseName = name.substring(0, dotIndex);
-    const argKey = name.substring(dotIndex + 1);
-    if (this.handlers.has(baseName) && this.isEventApplicator(baseName)) {
-      return { handlerName: baseName, argKey, aggregate: true, fallbackName: name };
-    }
-    if (/^\d+$/.test(argKey)) {
-      return { handlerName: baseName, argKey: null, aggregate: false, fallbackName: baseName };
-    }
-    return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };
-  }
-  getElementState(element) {
-    let state = this.elementState.get(element);
-    if (!state) {
-      state = new Map;
-      this.elementState.set(element, state);
-    }
-    return state;
-  }
-  mergeAggregateState(previous, argKey, value) {
-    const base = this.cloneAggregateState(previous);
-    if (value === undefined) {
-      delete base[argKey];
-    } else {
-      base[argKey] = value;
-    }
-    return base;
-  }
-  cloneAggregateState(previous) {
-    if (previous && typeof previous === "object" && !Array.isArray(previous)) {
-      return { ...previous };
-    }
-    if (typeof previous === "string") {
-      return { "0": previous };
-    }
-    return {};
-  }
-  normalizeEventValue(previous, value) {
-    const normalizedInput = this.normalizeValue(value);
-    const base = this.cloneAggregateState(previous);
-    if (normalizedInput && typeof normalizedInput === "object" && !Array.isArray(normalizedInput)) {
-      const next = { ...base, ...normalizedInput };
-      if (!Object.prototype.hasOwnProperty.call(next, "0") && base["0"] !== undefined) {
-        next["0"] = base["0"];
-      }
-      return next;
-    }
-    if (normalizedInput !== undefined) {
-      base["0"] = normalizedInput;
-    }
-    return base;
-  }
-  normalizeValue(value) {
-    if (value instanceof Map) {
-      const obj = {};
-      for (const [key, val] of value.entries()) {
-        obj[key] = this.normalizeValue(val);
-      }
-      return obj;
-    }
-    if (Array.isArray(value)) {
-      return value.map((item) => this.normalizeValue(item));
-    }
-    if (value && typeof value === "object") {
-      const obj = {};
-      for (const [key, val] of Object.entries(value)) {
-        obj[key] = this.normalizeValue(val);
-      }
-      return obj;
-    }
-    return value;
-  }
-  isEventApplicator(name) {
-    return /^on[A-Z]/.test(name);
-  }
-  applyAll(element, applicators) {
-    const grouped = new Map;
-    for (const [name, value] of Object.entries(applicators)) {
-      const dotIndex = name.indexOf(".");
-      const baseName = dotIndex !== -1 ? name.substring(0, dotIndex) : name;
-      const argKey = dotIndex !== -1 ? name.substring(dotIndex + 1) : null;
-      if (!grouped.has(baseName)) {
-        grouped.set(baseName, {});
-      }
-      const args = grouped.get(baseName);
-      if (argKey !== null) {
-        args[argKey] = value;
-      } else {
-        args["__value"] = value;
-      }
-    }
-    for (const [baseName, args] of grouped.entries()) {
-      if (Object.keys(args).length === 1) {
-        if ("__value" in args) {
-          this.apply(element, baseName, args["__value"]);
-        } else if ("0" in args) {
-          this.apply(element, baseName, args["0"]);
-        } else {
-          this.apply(element, baseName, args);
+        // Wait a tick for module instance to initialize and fetch data
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        // Get the route element's node ID from the renderer
+        const routeNodeId = routeElement.dataset.hypenId;
+        if (!routeNodeId) {
+            throw new Error(`Route element is missing data-hypen-id attribute`);
         }
-      } else {
-        this.apply(element, baseName, args);
-      }
+        // Get the current merged state
+        const mergedState = this.getMergedState();
+        // Render into the Route element
+        this.engine.renderInto(template, routeNodeId, mergedState);
+        // Ensure freshly created text nodes are interpolated with current state
+        this.renderer.updateState(mergedState);
     }
-  }
-  setStyleProperty(element, name, value) {
-    const atIndex = name.indexOf("@");
-    const colonIndex = name.indexOf(":");
-    if (atIndex !== -1) {
-      const prop = name.slice(0, atIndex);
-      const breakpoint = name.slice(atIndex + 1);
-      const minWidth = BREAKPOINTS[breakpoint];
-      if (minWidth) {
-        const cssName2 = this.toKebabCase(prop);
-        const cssValue = this.formatCssValue(cssName2, value);
-        const className = `hypen-${cssName2.replace(/[^a-zA-Z0-9-]/g, "")}-${breakpoint}-${hashValue(value)}`;
-        const ruleKey = `${className}:${cssValue}`;
-        if (!insertedRules.has(ruleKey)) {
-          const sheet = getVariantStyleSheet();
-          sheet.insertRule(`@media (min-width: ${minWidth}) { .${className} { ${cssName2}: ${cssValue}; } }`, sheet.cssRules.length);
-          insertedRules.add(ruleKey);
+    /**
+     * Extract module ID from component name or .id() applicator
+     */
+    extractModuleId(componentName, template) {
+        // Look for .id("CustomName") or .id('CustomName') in the template
+        const idMatch = template.match(/\.id\(["']([^"']+)["']\)/);
+        const matchedId = idMatch?.[1];
+        if (matchedId) {
+            return matchedId;
         }
-        element.classList.add(className);
-      }
-      return;
-    }
-    if (colonIndex !== -1) {
-      const prop = name.slice(0, colonIndex);
-      const state = name.slice(colonIndex + 1);
-      const validStates = ["hover", "focus", "active", "disabled", "focus-visible", "focus-within"];
-      if (validStates.includes(state)) {
-        const cssName2 = this.toKebabCase(prop);
-        const cssValue = this.formatCssValue(cssName2, value);
-        const className = `hypen-${cssName2.replace(/[^a-zA-Z0-9-]/g, "")}-${state}-${hashValue(value)}`;
-        const ruleKey = `${className}:${cssValue}`;
-        if (!insertedRules.has(ruleKey)) {
-          const sheet = getVariantStyleSheet();
-          sheet.insertRule(`.${className}:${state} { ${cssName2}: ${cssValue}; }`, sheet.cssRules.length);
-          insertedRules.add(ruleKey);
+        // Default to component name
+        return componentName;
+    }
+    /**
+     * Create module instances for all components that have state
+     */
+    createNestedModuleInstances() {
+        // Create built-in Router module instance
+        if (Router && !this.moduleInstances.has("Router")) {
+            const routerInstance = new HypenModuleInstance(this.engine, Router, this.router, this.globalContext);
+            this.globalContext.registerModule("Router", routerInstance);
+            this.moduleInstances.set("Router", routerInstance);
+            routerInstance.onStateChange(() => {
+                const mergedState = this.getMergedState();
+                log.debug("Router state changed:", mergedState);
+                this.renderer.updateState(mergedState);
+            });
         }
-        element.classList.add(className);
-      }
-      return;
-    }
-    const cssName = this.toKebabCase(name);
-    element.style.setProperty(cssName, this.formatCssValue(cssName, value));
-  }
-  toKebabCase(name) {
-    return name.replace(/([A-Z])/g, "-$1").toLowerCase();
-  }
-  formatCssValue(cssName, value) {
-    if (typeof value === "number" && this.needsUnit(cssName)) {
-      return `${value}px`;
-    }
-    return String(value);
-  }
-  needsUnit(prop) {
-    const unitless = [
-      "opacity",
-      "z-index",
-      "font-weight",
-      "line-height",
-      "flex",
-      "flex-grow",
-      "flex-shrink",
-      "order"
-    ];
-    return !unitless.includes(prop);
-  }
-  registerDefaults() {
-    this.register("padding", paddingHandler);
-    this.register("paddingTop", paddingTopHandler);
-    this.register("paddingBottom", paddingBottomHandler);
-    this.register("paddingLeft", paddingLeftHandler);
-    this.register("paddingRight", paddingRightHandler);
-    this.register("paddingHorizontal", paddingHorizontalHandler);
-    this.register("paddingVertical", paddingVerticalHandler);
-    this.register("margin", marginHandler);
-    this.register("marginTop", marginTopHandler);
-    this.register("marginBottom", marginBottomHandler);
-    this.register("marginLeft", marginLeftHandler);
-    this.register("marginRight", marginRightHandler);
-    this.register("marginHorizontal", marginHorizontalHandler);
-    this.register("marginVertical", marginVerticalHandler);
-    for (const [name, handler] of Object.entries(colorHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(borderHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(sizeHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(fontHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(layoutHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(eventHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(typographyHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(transformHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(effectsHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(advancedLayoutHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(backgroundHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(displayHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(transitionHandlers)) {
-      this.register(name, handler);
-    }
-  }
-}
-
-// src/dom/canvas/index.ts
-var canvasHandler = {
-  create() {
-    const el = document.createElement("canvas");
-    el.dataset.hypenType = "canvas";
-    return el;
-  },
-  applyProps(el, props) {
-    const canvas = el;
-    if (props.width !== undefined) {
-      canvas.width = Number(props.width);
-    }
-    if (props.height !== undefined) {
-      canvas.height = Number(props.height);
-    }
-  }
-};
-var canvasApplicators = {
-  fillStyle: (el, value) => {
-    const canvas = el;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      ctx.fillStyle = String(value);
-    }
-  },
-  strokeStyle: (el, value) => {
-    const canvas = el;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      ctx.strokeStyle = String(value);
-    }
-  },
-  lineWidth: (el, value) => {
-    const canvas = el;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      ctx.lineWidth = Number(value);
-    }
-  }
-};
-
-// src/dom/debug.ts
-import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core/logger";
-var log4 = frameworkLoggers4.debug;
-var defaultDebugConfig = {
-  enabled: false,
-  showHeatmap: true,
-  heatmapIncrement: 5,
-  maxOpacity: 0.8,
-  fadeOutDuration: 2000
-};
-
-class RerenderTracker {
-  renderCounts = new Map;
-  overlays = new Map;
-  config;
-  constructor(config = defaultDebugConfig) {
-    this.config = config;
-  }
-  setConfig(config) {
-    this.config = { ...this.config, ...config };
-    if (!this.config.enabled) {
-      this.cleanup();
-    }
-  }
-  trackRerender(id, element, patchType) {
-    if (!this.config.enabled || !this.config.showHeatmap) {
-      return;
-    }
-    log4.debug(`Tracking re-render: ${id} - ${patchType}`);
-    const currentCount = this.renderCounts.get(id) || 0;
-    const newCount = currentCount + 1;
-    this.renderCounts.set(id, newCount);
-    this.updateHeatmap(id, element, newCount, patchType);
-  }
-  updateHeatmap(id, element, renderCount, patchType) {
-    const opacity = Math.min(renderCount * this.config.heatmapIncrement / 100, this.config.maxOpacity);
-    log4.debug(`Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);
-    const isInline = window.getComputedStyle(element).display.includes("inline");
-    if (isInline || element.tagName === "SPAN") {
-      if (!element.dataset.hypenDebugOriginalBg) {
-        element.dataset.hypenDebugOriginalBg = element.style.backgroundColor || "";
-        element.dataset.hypenDebugOriginalOutline = element.style.outline || "";
-        element.dataset.hypenDebugOriginalPosition = element.style.position || "";
-      }
-      element.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;
-      element.style.outline = `2px solid rgba(255, 0, 0, ${Math.max(opacity + 0.2, 0.3)})`;
-      element.style.outlineOffset = "2px";
-      element.style.position = "relative";
-      element.setAttribute("data-hypen-renders", `${renderCount}× ${patchType}`);
-      if (!document.getElementById("hypen-debug-styles")) {
-        const style = document.createElement("style");
-        style.id = "hypen-debug-styles";
-        style.textContent = `
-          [data-hypen-renders]::before {
-            content: attr(data-hypen-renders);
-            position: absolute;
-            top: -18px;
-            left: 0;
-            background: rgba(255, 0, 0, 0.9);
-            color: white;
-            padding: 2px 6px;
-            font-size: 10px;
-            font-family: 'Courier New', monospace;
-            font-weight: bold;
-            border-radius: 3px;
-            z-index: 999999;
-            pointer-events: none;
-            white-space: nowrap;
-            text-shadow: none;
-          }
-        `;
-        document.head.appendChild(style);
-      }
-      this.overlays.set(id, element);
-      if (this.config.fadeOutDuration > 0) {
-        setTimeout(() => {
-          const originalBg = element.dataset.hypenDebugOriginalBg || "";
-          const originalOutline = element.dataset.hypenDebugOriginalOutline || "";
-          element.style.backgroundColor = originalBg;
-          element.style.outline = originalOutline;
-          element.style.opacity = "1";
-        }, this.config.fadeOutDuration);
-      }
-    } else {
-      let overlay = this.overlays.get(id);
-      if (!overlay) {
-        overlay = document.createElement("div");
-        overlay.className = "hypen-debug-overlay";
-        overlay.style.cssText = `
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          pointer-events: none;
-          z-index: 999999 !important;
-          transition: opacity ${this.config.fadeOutDuration}ms ease-out;
-          border: 2px solid rgba(255, 0, 0, 0.7) !important;
-          box-sizing: border-box;
-          font-size: 11px;
-          color: white;
-          text-shadow: 0 0 3px black, 0 0 5px black;
-          padding: 4px;
-          font-family: 'Courier New', monospace;
-          font-weight: bold;
-          display: block !important;
-          visibility: visible !important;
-        `;
-        const currentPosition = window.getComputedStyle(element).position;
-        if (currentPosition === "static") {
-          element.style.position = "relative";
+        // Get all registered components
+        const componentNames = componentLoader.getNames();
+        for (const name of componentNames) {
+            // Skip if already created
+            if (this.moduleInstances.has(name)) {
+                continue;
+            }
+            const comp = componentLoader.get(name);
+            if (!comp || !comp.module) {
+                continue;
+            }
+            // Create module instance
+            log.debug(`Creating nested module instance for: ${name}`);
+            const moduleInstance = new HypenModuleInstance(this.engine, comp.module, this.router, this.globalContext);
+            this.globalContext.registerModule(name, moduleInstance);
+            this.moduleInstances.set(name, moduleInstance);
+            // Connect state changes to renderer
+            moduleInstance.onStateChange(() => {
+                const mergedState = this.getMergedState();
+                log.debug(`Nested component ${name} state changed:`, mergedState);
+                this.renderer.updateState(mergedState);
+            });
         }
-        element.appendChild(overlay);
-        this.overlays.set(id, overlay);
-      }
-      overlay.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;
-      overlay.style.opacity = "1";
-      overlay.textContent = `${renderCount}× ${patchType}`;
-      if (this.config.fadeOutDuration > 0) {
-        setTimeout(() => {
-          if (overlay) {
-            overlay.style.opacity = "0.2";
-          }
-        }, this.config.fadeOutDuration);
-      }
-    }
-  }
-  reset(id) {
-    this.renderCounts.delete(id);
-    const overlay = this.overlays.get(id);
-    if (overlay) {
-      overlay.remove();
-      this.overlays.delete(id);
-    }
-  }
-  resetAll() {
-    this.renderCounts.clear();
-    for (const overlay of this.overlays.values()) {
-      overlay.remove();
-    }
-    this.overlays.clear();
-  }
-  getRenderCount(id) {
-    return this.renderCounts.get(id) || 0;
-  }
-  cleanup() {
-    for (const overlay of this.overlays.values()) {
-      overlay.remove();
     }
-    this.overlays.clear();
-  }
-  getStats() {
-    const totalRerenders = Array.from(this.renderCounts.values()).reduce((sum, count) => sum + count, 0);
-    const elementCount = this.renderCounts.size;
-    const avgRerenders = elementCount > 0 ? totalRerenders / elementCount : 0;
-    return {
-      totalRerenders,
-      elementCount,
-      avgRerenders: Math.round(avgRerenders * 100) / 100
-    };
-  }
-}
-
-// src/dom/renderer.ts
-import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core/logger";
-var log5 = frameworkLoggers5.renderer;
-
-class DOMRenderer {
-  container;
-  nodes = new Map;
-  rootId = null;
-  components;
-  applicators;
-  engine;
-  currentState = {};
-  router = null;
-  globalContext = null;
-  componentInstances = new Map;
-  debugTracker;
-  constructor(container, engine, debugConfig) {
-    this.container = container;
-    this.engine = engine;
-    this.components = new ComponentRegistry;
-    this.applicators = new ApplicatorRegistry;
-    this.debugTracker = new RerenderTracker({ ...defaultDebugConfig, ...debugConfig });
-    this.components.register("canvas", canvasHandler);
-    for (const [name, handler] of Object.entries(canvasApplicators)) {
-      this.applicators.register(name, handler);
-    }
-  }
-  setContext(router, globalContext) {
-    this.router = router;
-    this.globalContext = globalContext;
-  }
-  applyPatches(patches) {
-    for (const patch of patches) {
-      this.applyPatch(patch);
-    }
-  }
-  updateState(state) {
-    log5.debug("Updating state:", state);
-    this.currentState = state;
-    this.interpolateAllText();
-  }
-  mergeComponentState(componentState) {
-    this.currentState = { ...this.currentState, ...componentState };
-    log5.debug("Merged state:", this.currentState);
-    this.interpolateAllText();
-  }
-  interpolateAllText() {
-    for (const [id, element] of this.nodes.entries()) {
-      if (element.dataset.hypenType === "text" && element.dataset.textTemplate) {
-        const template = element.dataset.textTemplate;
-        const interpolated = this.interpolateText(template, this.currentState);
-        const currentText = element.textContent;
-        if (currentText !== interpolated) {
-          this.debugTracker.trackRerender(id, element, "interpolate");
+    /**
+     * Get merged state from all module instances
+     */
+    getMergedState() {
+        const merged = {};
+        // Include main module state
+        if (this.moduleInstance) {
+            const mainState = this.moduleInstance.getState();
+            Object.assign(merged, mainState);
         }
-        element.textContent = interpolated;
-      }
-    }
-  }
-  interpolateText(template, state) {
-    return template.replace(/\$\{([^}]+)\}/g, (match, path) => {
-      try {
-        const value = path.split(".").reduce((obj, key) => {
-          if (key === "state")
-            return state;
-          return obj?.[key];
-        }, state);
-        return value !== undefined ? String(value) : match;
-      } catch {
-        return match;
-      }
-    });
-  }
-  applyPatch(patch) {
-    const p = patch;
-    const id = patch.id ?? p.id;
-    const elementType = patch.elementType ?? p.element_type;
-    const parentId = patch.parentId ?? p.parent_id;
-    const beforeId = patch.beforeId ?? p.before_id;
-    const eventName = patch.eventName ?? p.event_name;
-    switch (patch.type) {
-      case "create":
-        this.onCreate(id, elementType ?? "container", patch.props || {});
-        break;
-      case "setProp":
-        this.onSetProp(id, patch.name, patch.value);
-        break;
-      case "removeProp":
-        this.onRemoveProp(id, patch.name);
-        break;
-      case "setText":
-        this.onSetText(id, patch.text);
-        break;
-      case "insert":
-        this.onInsert(parentId, id, beforeId);
-        break;
-      case "move":
-        this.onMove(parentId, id, beforeId);
-        break;
-      case "remove":
-        this.onRemove(id);
-        break;
-    }
-  }
-  onCreate(id, elementType, props) {
-    const propsObj = props instanceof Map ? Object.fromEntries(props) : props;
-    let element = this.components.createElement(elementType, propsObj);
-    if (!element) {
-      const fallback = document.createElement("div");
-      fallback.dataset.hypenType = elementType.toLowerCase();
-      fallback.style.display = "contents";
-      element = fallback;
-      log5.debug(`Unknown component "${elementType}" - using transparent container`);
-    }
-    element.dataset.hypenType = elementType.toLowerCase();
-    element.dataset.hypenId = id;
-    setEngine(element, this.engine);
-    this.applicators.applyAll(element, propsObj);
-    this.nodes.set(id, element);
-    this.debugTracker.trackRerender(id, element, `create:${elementType}`);
-    if (!this.rootId) {
-      this.rootId = id;
-      if (!this.container.contains(element)) {
-        this.container.appendChild(element);
-      }
-    }
-  }
-  onSetProp(id, name, value) {
-    const element = this.nodes.get(id);
-    if (!element)
-      return;
-    this.debugTracker.trackRerender(id, element, `setProp:${name}`);
-    if (name === "0" || name === "text") {
-      const elementType = element.dataset.hypenType;
-      if (elementType === "input") {
-        const inputEl = element;
-        inputEl.value = String(value);
-        log5.debug(`Updated input value: "${value}"`);
-        return;
-      }
-      const nextText = String(value);
-      element.textContent = nextText;
-      const currentTemplate = element.dataset.textTemplate;
-      const nextLooksLikeTemplate = nextText.includes("${");
-      const currentLooksLikeTemplate = typeof currentTemplate === "string" && currentTemplate.includes("${");
-      if (nextLooksLikeTemplate) {
-        element.dataset.textTemplate = nextText;
-      } else if (currentTemplate === undefined) {
-        element.dataset.textTemplate = nextText;
-      } else if (!currentLooksLikeTemplate) {
-        element.dataset.textTemplate = nextText;
-      }
-      log5.debug(`Updated text content: "${value}"`);
-      return;
-    }
-    this.applicators.apply(element, name, value);
-  }
-  onRemoveProp(id, name) {
-    const element = this.nodes.get(id);
-    if (!element)
-      return;
-    this.debugTracker.trackRerender(id, element, `removeProp:${name}`);
-    this.applicators.apply(element, name, undefined);
-  }
-  onSetText(id, text) {
-    const element = this.nodes.get(id);
-    if (!element)
-      return;
-    this.debugTracker.trackRerender(id, element, "setText");
-    element.textContent = text;
-  }
-  onInsert(parentId, id, beforeId) {
-    const parent = parentId === "root" ? this.container : this.nodes.get(parentId);
-    const child = this.nodes.get(id);
-    log5.debug(`Inserting ${id} into ${parentId}`, {
-      parent: parent ? `${parent.tagName}#${parent.id || "no-id"}` : "null",
-      child: child ? `${child.tagName}#${child.id || "no-id"}` : "null",
-      childText: child?.textContent?.substring(0, 20)
-    });
-    if (!parent || !child)
-      return;
-    if (parentId === "root") {
-      this.rootId = id;
-    }
-    if (beforeId) {
-      const before = this.nodes.get(beforeId);
-      if (before && before.parentNode === parent) {
-        parent.insertBefore(child, before);
-      } else if (!parent.contains(child)) {
-        parent.appendChild(child);
-      }
-    } else {
-      if (!parent.contains(child)) {
-        parent.appendChild(child);
-      }
-    }
-  }
-  onMove(parentId, id, beforeId) {
-    this.onInsert(parentId, id, beforeId);
-  }
-  onRemove(id) {
-    const element = this.nodes.get(id);
-    if (!element)
-      return;
-    disposeHypenElement(element);
-    if (element.parentNode) {
-      element.parentNode.removeChild(element);
-    }
-    this.nodes.delete(id);
-    if (this.rootId === id) {
-      this.rootId = null;
-    }
-  }
-  getNode(id) {
-    return this.nodes.get(id);
-  }
-  clear() {
-    for (const element of this.nodes.values()) {
-      disposeHypenElement(element);
-    }
-    this.container.innerHTML = "";
-    this.nodes.clear();
-    this.rootId = null;
-  }
-  getComponentRegistry() {
-    return this.components;
-  }
-  getApplicatorRegistry() {
-    return this.applicators;
-  }
-  setDebugConfig(config) {
-    this.debugTracker.setConfig(config);
-  }
-  resetDebugTracking() {
-    this.debugTracker.resetAll();
-  }
-  getDebugStats() {
-    return this.debugTracker.getStats();
-  }
-}
-
-// src/hypen.ts
-import { Engine } from "@hypen-space/core/engine/browser";
-import { HypenModuleInstance } from "@hypen-space/core/app";
-import { HypenRouter } from "@hypen-space/core/router";
-import { HypenGlobalContext } from "@hypen-space/core/context";
-import { componentLoader } from "@hypen-space/core/loader";
-import { Router, Route, Link } from "@hypen-space/core/components";
-import { frameworkLoggers as frameworkLoggers6, setDebugMode } from "@hypen-space/core/logger";
-var log6 = frameworkLoggers6.hypen;
-
-class Hypen {
-  engine = null;
-  renderer = null;
-  moduleInstance = null;
-  container = null;
-  config;
-  router;
-  globalContext;
-  moduleInstances = new Map;
-  constructor(config = {}) {
-    this.config = {
-      componentsDir: "./src/components",
-      debug: false,
-      ...config
-    };
-    if (this.config.debug) {
-      setDebugMode(true);
-    }
-    this.router = new HypenRouter;
-    this.globalContext = new HypenGlobalContext;
-    componentLoader.register("Router", Router, "");
-    componentLoader.register("Route", Route, "");
-    componentLoader.register("Link", Link, "");
-    this.globalContext.__hypenEngine = this;
-  }
-  async init() {
-    log6.debug("Initializing...");
-    this.engine = new Engine;
-    await this.engine.init({
-      wasmUrl: this.config.wasmUrl,
-      jsUrl: this.config.jsUrl
-    });
-    log6.debug("Engine initialized");
-  }
-  async loadComponents(componentsDir) {
-    const dir = componentsDir || this.config.componentsDir;
-    log6.debug(`Loading components from ${dir}...`);
-    await componentLoader.loadFromComponentsDir(dir);
-    log6.debug(`Loaded ${componentLoader.getNames().length} components`);
-  }
-  async render(componentName, containerSelector) {
-    if (!this.engine) {
-      throw new Error("[Hypen] Engine not initialized. Call init() first.");
-    }
-    if (typeof containerSelector === "string") {
-      const element = document.querySelector(containerSelector);
-      if (!element) {
-        throw new Error(`[Hypen] Container not found: ${containerSelector}`);
-      }
-      this.container = element;
-    } else {
-      this.container = containerSelector;
-    }
-    const component = componentLoader.get(componentName);
-    if (!component) {
-      throw new Error(`[Hypen] Component "${componentName}" not found. Available: ${componentLoader.getNames().join(", ")}`);
-    }
-    log6.debug(`Rendering ${componentName} to`, this.container);
-    this.renderer = new DOMRenderer(this.container, this.engine, {
-      enabled: this.config.debugHeatmap || false,
-      showHeatmap: this.config.debugHeatmap || false,
-      heatmapIncrement: this.config.heatmapIncrement || 5,
-      fadeOutDuration: this.config.heatmapFadeOut || 2000,
-      maxOpacity: 0.8
-    });
-    this.engine.setRenderCallback((patches) => {
-      log6.debug(`Applying ${patches.length} patches`);
-      this.renderer.applyPatches(patches);
-    });
-    this.renderer.setContext(this.router, this.globalContext);
-    const moduleId = this.extractModuleId(componentName, component.template);
-    this.moduleInstance = new HypenModuleInstance(this.engine, component.module, this.router, this.globalContext);
-    this.globalContext.registerModule(moduleId, this.moduleInstance);
-    this.moduleInstances.set(moduleId, this.moduleInstance);
-    this.moduleInstance.onStateChange(() => {
-      const mergedState = this.getMergedState();
-      log6.debug(`State changed, merged state:`, mergedState);
-      this.renderer.updateState(mergedState);
-    });
-    this.setupComponentResolver();
-    this.createNestedModuleInstances();
-    this.engine.renderSource(component.template);
-    this.renderer.updateState(this.getMergedState());
-    log6.debug(`${componentName} rendered successfully`);
-  }
-  async unmount() {
-    log6.debug("Unmounting...");
-    if (this.moduleInstance) {
-      await this.moduleInstance.destroy();
-      this.moduleInstance = null;
-    }
-    if (this.container) {
-      this.container.innerHTML = "";
-      this.container = null;
-    }
-    this.renderer = null;
-    log6.debug("Unmounted");
-  }
-  getModuleInstance() {
-    return this.moduleInstance;
-  }
-  getState() {
-    return this.moduleInstance?.getState() ?? null;
-  }
-  getRouter() {
-    return this.router;
-  }
-  getGlobalContext() {
-    return this.globalContext;
-  }
-  setDebugHeatmap(enabled) {
-    if (this.renderer) {
-      this.renderer.setDebugConfig({ enabled, showHeatmap: enabled });
-      log6.debug(`Debug heatmap ${enabled ? "enabled" : "disabled"}`);
-    }
-  }
-  resetDebugTracking() {
-    if (this.renderer) {
-      this.renderer.resetDebugTracking();
-      log6.debug("Debug tracking reset");
-    }
-  }
-  getDebugStats() {
-    return this.renderer?.getDebugStats() || null;
-  }
-  async renderLazyRoute(routePath, componentName, routeElement) {
-    if (!this.engine || !this.renderer) {
-      throw new Error("Engine not initialized");
-    }
-    const component = componentLoader.get(componentName);
-    if (!component) {
-      throw new Error(`Component ${componentName} not found`);
-    }
-    const template = component.template;
-    if (!template) {
-      throw new Error(`Component ${componentName} has no template`);
-    }
-    if (component.module && !this.moduleInstances.has(componentName)) {
-      const moduleId = this.extractModuleId(componentName, template);
-      const moduleInstance = new HypenModuleInstance(this.engine, component.module, this.router, this.globalContext);
-      this.globalContext.registerModule(moduleId, moduleInstance);
-      this.moduleInstances.set(componentName, moduleInstance);
-      moduleInstance.onStateChange(() => {
-        const mergedState2 = this.getMergedState();
-        log6.debug(`Lazy component ${componentName} state changed:`, mergedState2);
-        this.renderer.updateState(mergedState2);
-      });
-    }
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    const routeNodeId = routeElement.dataset.hypenId;
-    if (!routeNodeId) {
-      throw new Error(`Route element is missing data-hypen-id attribute`);
-    }
-    const mergedState = this.getMergedState();
-    this.engine.renderInto(template, routeNodeId, mergedState);
-    this.renderer.updateState(mergedState);
-  }
-  extractModuleId(componentName, template) {
-    const idMatch = template.match(/\.id\(["']([^"']+)["']\)/);
-    const matchedId = idMatch?.[1];
-    if (matchedId) {
-      return matchedId;
-    }
-    return componentName;
-  }
-  createNestedModuleInstances() {
-    if (Router && !this.moduleInstances.has("Router")) {
-      const routerInstance = new HypenModuleInstance(this.engine, Router, this.router, this.globalContext);
-      this.globalContext.registerModule("Router", routerInstance);
-      this.moduleInstances.set("Router", routerInstance);
-      routerInstance.onStateChange(() => {
-        const mergedState = this.getMergedState();
-        log6.debug("Router state changed:", mergedState);
-        this.renderer.updateState(mergedState);
-      });
-    }
-    const componentNames = componentLoader.getNames();
-    for (const name of componentNames) {
-      if (this.moduleInstances.has(name)) {
-        continue;
-      }
-      const comp = componentLoader.get(name);
-      if (!comp || !comp.module) {
-        continue;
-      }
-      log6.debug(`Creating nested module instance for: ${name}`);
-      const moduleInstance = new HypenModuleInstance(this.engine, comp.module, this.router, this.globalContext);
-      this.globalContext.registerModule(name, moduleInstance);
-      this.moduleInstances.set(name, moduleInstance);
-      moduleInstance.onStateChange(() => {
-        const mergedState = this.getMergedState();
-        log6.debug(`Nested component ${name} state changed:`, mergedState);
-        this.renderer.updateState(mergedState);
-      });
-    }
-  }
-  getMergedState() {
-    const merged = {};
-    if (this.moduleInstance) {
-      const mainState = this.moduleInstance.getState();
-      Object.assign(merged, mainState);
-    }
-    for (const [name, instance] of this.moduleInstances.entries()) {
-      const nestedState = instance.getState();
-      Object.assign(merged, nestedState);
+        // Include all nested component states
+        for (const [name, instance] of this.moduleInstances.entries()) {
+            const nestedState = instance.getState();
+            Object.assign(merged, nestedState);
+        }
+        return merged;
+    }
+    /**
+     * Set up component resolver for the engine
+     */
+    setupComponentResolver() {
+        if (!this.engine)
+            return;
+        // List of built-in DOM elements that should NOT be resolved
+        const builtInElements = new Set([
+            "Column",
+            "Row",
+            "Text",
+            "Button",
+            "Image",
+            "Input",
+            "Container",
+            "Box",
+            "Center",
+            "List",
+            "Canvas",
+            "Spacer",
+            "Divider",
+            "ScrollView",
+        ]);
+        this.engine.setComponentResolver((componentName, contextPath) => {
+            // Don't try to resolve built-in DOM elements
+            if (builtInElements.has(componentName)) {
+                return null;
+            }
+            log.debug(`Resolving component: ${componentName} (context: ${contextPath})`);
+            // Check if component is registered
+            const componentDef = componentLoader.get(componentName);
+            if (!componentDef) {
+                log.debug(`Component not found: ${componentName}`);
+                return null;
+            }
+            // Router is passthrough, Route is lazy
+            const isPassthrough = componentName === "Router";
+            const isLazy = componentName === "Route";
+            const resolved = {
+                source: componentDef.template,
+                path: componentDef.path || componentName,
+                passthrough: isPassthrough,
+                lazy: isLazy,
+            };
+            const flags = [];
+            if (isPassthrough)
+                flags.push("passthrough");
+            if (isLazy)
+                flags.push("lazy");
+            const flagStr = flags.length > 0 ? ` (${flags.join(", ")})` : "";
+            log.debug(`Resolved ${componentName} -> ${resolved.path}${flagStr}`);
+            return resolved;
+        });
     }
-    return merged;
-  }
-  setupComponentResolver() {
-    if (!this.engine)
-      return;
-    const builtInElements = new Set([
-      "Column",
-      "Row",
-      "Text",
-      "Button",
-      "Image",
-      "Input",
-      "Container",
-      "Box",
-      "Center",
-      "List",
-      "Canvas",
-      "Spacer",
-      "Divider",
-      "ScrollView"
-    ]);
-    this.engine.setComponentResolver((componentName, contextPath) => {
-      if (builtInElements.has(componentName)) {
-        return null;
-      }
-      log6.debug(`Resolving component: ${componentName} (context: ${contextPath})`);
-      const componentDef = componentLoader.get(componentName);
-      if (!componentDef) {
-        log6.debug(`Component not found: ${componentName}`);
-        return null;
-      }
-      const isPassthrough = componentName === "Router";
-      const isLazy = componentName === "Route";
-      const resolved = {
-        source: componentDef.template,
-        path: componentDef.path || componentName,
-        passthrough: isPassthrough,
-        lazy: isLazy
-      };
-      const flags = [];
-      if (isPassthrough)
-        flags.push("passthrough");
-      if (isLazy)
-        flags.push("lazy");
-      const flagStr = flags.length > 0 ? ` (${flags.join(", ")})` : "";
-      log6.debug(`Resolved ${componentName} -> ${resolved.path}${flagStr}`);
-      return resolved;
-    });
-  }
-}
-async function render(componentName, containerSelector, config) {
-  const hypen = new Hypen(config);
-  await hypen.init();
-  await hypen.loadComponents();
-  await hypen.render(componentName, containerSelector);
-  return hypen;
 }
-async function renderWithComponents(components, componentName, containerSelector, config) {
-  const hypen = new Hypen(config);
-  await hypen.init();
-  for (const [name, { module, template }] of Object.entries(components)) {
-    let processedTemplate = template;
-    const moduleMatch = template.match(/^\s*module\s+\w+\s*\{([\s\S]*)\}\s*$/);
-    if (moduleMatch && moduleMatch[1]) {
-      processedTemplate = moduleMatch[1].trim();
+/**
+ * Quick render function (like ReactDOM.render)
+ *
+ * @example
+ * ```typescript
+ * import { render } from "@hypen-space/web/client";
+ *
+ * await render("HomePage", "#app");
+ * ```
+ */
+export async function render(componentName, containerSelector, config) {
+    const hypen = new Hypen(config);
+    await hypen.init();
+    await hypen.loadComponents();
+    await hypen.render(componentName, containerSelector);
+    return hypen;
+}
+/**
+ * Render with explicit component loading
+ *
+ * @example
+ * ```typescript
+ * import { renderWithComponents } from "@hypen-space/web/client";
+ * import HomePage from "./components/HomePage/component";
+ * import homePageTemplate from "./components/HomePage/component.hypen";
+ *
+ * await renderWithComponents(
+ *   { HomePage: { module: HomePage, template: homePageTemplate } },
+ *   "HomePage",
+ *   "#app"
+ * );
+ * ```
+ */
+export async function renderWithComponents(components, componentName, containerSelector, config) {
+    const hypen = new Hypen(config);
+    await hypen.init();
+    // Register components manually
+    for (const [name, { module, template }] of Object.entries(components)) {
+        let processedTemplate = template;
+        // If template starts with "module ComponentName {", extract just the children
+        const moduleMatch = template.match(/^\s*module\s+\w+\s*\{([\s\S]*)\}\s*$/);
+        if (moduleMatch && moduleMatch[1]) {
+            processedTemplate = moduleMatch[1].trim();
+        }
+        componentLoader.register(name, module, processedTemplate);
     }
-    componentLoader.register(name, module, processedTemplate);
-  }
-  await hypen.render(componentName, containerSelector);
-  return hypen;
+    await hypen.render(componentName, containerSelector);
+    return hypen;
 }
-export {
-  renderWithComponents,
-  render,
-  Hypen
-};
-
-//# debugId=3DCF8179C4B1004C64756E2164756E21
+//# sourceMappingURL=hypen.js.map