@hypen-space/web 0.3.8 → 0.3.10

package/dist/{src/index.js → index.js}

@@ -58,9 +58,10 @@ function ensureRowStyles() {
   const style = document.createElement("style");
   style.id = "hypen-row-styles";
   style.textContent = `
-    [data-hypen-type="row"] > * {
-      flex: 1 1 0%;
-      min-width: 0;
+    /* 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);
@@ -91,6 +92,10 @@ var init_text = __esm(() => {
     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;
     },
@@ -140,6 +145,16 @@ 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;
     }
@@ -156,9 +171,6 @@ var init_container = __esm(() => {
   containerHandler = {
     create() {
       const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.alignItems = "stretch";
       el.dataset.hypenType = "container";
       return el;
     }
@@ -178,6 +190,9 @@ var init_center = __esm(() => {
       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;
     }
@@ -428,12 +443,16 @@ function ensureStackStyles() {
       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);
@@ -487,10 +506,26 @@ var exports_grid = {};
 __export(exports_grid, {
   gridHandler: () => gridHandler
 });
-var 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";
@@ -791,9 +826,10 @@ var init_avatar = __esm(() => {
       return el;
     },
     applyProps(el, props) {
-      if (props.src !== undefined) {
+      const src = props["src.0"] || props["0"] || props.src || props.source;
+      if (src !== undefined) {
         const img = document.createElement("img");
-        img.src = String(props.src);
+        img.src = String(src);
         img.style.width = "100%";
         img.style.height = "100%";
         img.style.objectFit = "cover";
@@ -975,8 +1011,10 @@ var exports_route = {};
 __export(exports_route, {
   routeHandler: () => routeHandler
 });
-var routeHandler;
+import { frameworkLoggers } from "@hypen-space/core";
+var log, routeHandler;
 var init_route = __esm(() => {
+  log = frameworkLoggers.router;
   routeHandler = {
     create() {
       const el = document.createElement("div");
@@ -996,7 +1034,7 @@ var init_route = __esm(() => {
       if (componentName) {
         el.dataset.routeComponent = String(componentName);
       }
-      console.log(`\uD83D\uDEE3️ Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || "none"}"`);
+      log.debug(`Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || "none"}"`);
     }
   };
 });
@@ -1008,11 +1046,12 @@ __export(exports_hypenapp, {
   disconnectHypenApp: () => disconnectHypenApp
 });
 import { RemoteEngine } from "@hypen-space/core/remote/client";
+import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core";
 function applyPatches(container, nodes, patches, engine, onRoot) {
   for (const patch of patches) {
     switch (patch.type) {
       case "create": {
-        const el = createElement(patch.element_type, patch.props || {});
+        const el = createElement(patch.elementType, patch.props || {});
         el.dataset.hypenId = patch.id;
         el.__hypenEngine = engine;
         nodes.set(patch.id, el);
@@ -1033,10 +1072,10 @@ function applyPatches(container, nodes, patches, engine, onRoot) {
         break;
       }
       case "insert": {
-        const parentId = patch.parent_id;
+        const parentId = patch.parentId;
         const parent = parentId === "root" ? container : nodes.get(parentId);
         const child = nodes.get(patch.id);
-        const beforeId = patch.before_id;
+        const beforeId = patch.beforeId;
         if (parent && child) {
           if (parentId === "root") {
             onRoot(patch.id);
@@ -1055,10 +1094,10 @@ function applyPatches(container, nodes, patches, engine, onRoot) {
         break;
       }
       case "move": {
-        const parentId = patch.parent_id;
+        const parentId = patch.parentId;
         const parent = parentId === "root" ? container : nodes.get(parentId);
         const child = nodes.get(patch.id);
-        const beforeId = patch.before_id;
+        const beforeId = patch.beforeId;
         if (parent && child) {
           if (beforeId) {
             const before = nodes.get(beforeId);
@@ -1192,8 +1231,9 @@ function disconnectHypenApp(element) {
     activeInstances.delete(element);
   }
 }
-var activeInstances, hypenAppHandler;
+var log2, activeInstances, hypenAppHandler;
 var init_hypenapp = __esm(() => {
+  log2 = frameworkLoggers2.remote;
   activeInstances = new WeakMap;
   hypenAppHandler = {
     create() {
@@ -1205,7 +1245,7 @@ var init_hypenapp = __esm(() => {
     applyProps(element, props) {
       const url = props["0"] || props.url;
       if (!url || typeof url !== "string") {
-        console.error("[HypenApp] URL is required");
+        log2.error("HypenApp: URL is required");
         element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
         return;
       }
@@ -1230,16 +1270,16 @@ var init_hypenapp = __esm(() => {
       element.innerHTML = '<div class="hypen-app-loading">Connecting...</div>';
       engine.connect().then(() => {
         element.innerHTML = "";
-        console.log(`[HypenApp] Connected to ${url}`);
+        log2.debug(`HypenApp connected to ${url}`);
       }).catch((error) => {
         element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
-        console.error("[HypenApp] Connection failed:", error);
+        log2.error("HypenApp connection failed:", error);
       });
       engine.onDisconnect(() => {
-        console.log("[HypenApp] Disconnected");
+        log2.debug("HypenApp disconnected");
       });
       engine.onError((error) => {
-        console.error("[HypenApp] Error:", error);
+        log2.error("HypenApp error:", error);
       });
       const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
@@ -1248,7 +1288,7 @@ var init_hypenapp = __esm(() => {
               engine.disconnect();
               activeInstances.delete(element);
               observer.disconnect();
-              console.log("[HypenApp] Cleaned up");
+              log2.debug("HypenApp cleaned up");
               return;
             }
           }
@@ -1261,149 +1301,306 @@ var init_hypenapp = __esm(() => {
   };
 });
 
+// src/dom/components/index.ts
+class ComponentRegistry {
+  handlers = new Map;
+  constructor() {
+    this.registerDefaults();
+  }
+  register(type, handler) {
+    this.handlers.set(type.toLowerCase(), handler);
+  }
+  get(type) {
+    return this.handlers.get(type.toLowerCase());
+  }
+  createElement(type, props = {}) {
+    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));
+    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 exports_padding = {};
-__export(exports_padding, {
-  paddingHandler: () => paddingHandler
-});
+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.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`;
+    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 exports_margin = {};
-__export(exports_margin, {
-  marginHandler: () => marginHandler
-});
+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.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`;
+    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 exports_color = {};
-__export(exports_color, {
-  colorHandlers: () => colorHandlers
-});
-var colorHandlers;
-var init_color = __esm(() => {
-  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);
-    }
-  };
-});
+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 exports_border = {};
-__export(exports_border, {
-  borderHandlers: () => borderHandlers
-});
-var borderHandlers;
-var init_border = __esm(() => {
-  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)}`;
+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.borderRadius = String(value);
+        el.style.borderStyle = "solid";
       }
-    },
-    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);
+      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
-var exports_size = {};
-__export(exports_size, {
-  sizeHandlers: () => sizeHandlers
-});
 function parseSizeValue(value) {
   if (value === null || value === undefined)
     return null;
@@ -1454,88 +1651,113 @@ function parseSizeValue(value) {
       return `${num}px`;
   }
 }
-var sizeHandlers;
-var init_size = __esm(() => {
-  sizeHandlers = {
-    width: (el, value) => {
+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)
+      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;
-      el.style.width = `${fraction * 100}%`;
-    },
-    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;
+    }
+  },
+  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.height = `${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 exports_font = {};
-__export(exports_font, {
-  fontHandlers: () => fontHandlers,
-  GoogleFonts: () => GoogleFonts
-});
+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-");
@@ -1565,91 +1787,59 @@ function processFontFamily(value) {
     return f;
   }).join(", ");
 }
-var loadedGoogleFonts, systemFontKeywords, fontHandlers, GoogleFonts;
-var init_font = __esm(() => {
-  loadedGoogleFonts = new Set;
-  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"
-  ]);
-  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);
-    }
-  };
-  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"
-    ]
-  };
-});
+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
-var exports_layout = {};
-__export(exports_layout, {
-  mapAlignmentValue: () => mapAlignmentValue,
-  layoutHandlers: () => layoutHandlers
-});
 function mapAlignmentValue(value) {
   const v = String(value).toLowerCase();
   switch (v) {
@@ -1678,76 +1868,87 @@ function mapAlignmentValue(value) {
       return v;
   }
 }
-var layoutHandlers;
-var init_layout = __esm(() => {
-  layoutHandlers = {
-    verticalAlignment: (el, value) => {
-      const val = mapAlignmentValue(String(value));
-      const flexDirection = getComputedStyle(el).flexDirection;
-      if (flexDirection === "column" || flexDirection === "column-reverse") {
-        el.style.justifyContent = val;
-      } else {
-        el.style.alignItems = val;
-      }
-    },
-    horizontalAlignment: (el, value) => {
-      const val = mapAlignmentValue(String(value));
-      const flexDirection = getComputedStyle(el).flexDirection;
-      if (flexDirection === "column" || flexDirection === "column-reverse") {
-        el.style.alignItems = val;
-      } else {
-        el.style.justifyContent = val;
+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%";
       }
-    },
-    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);
-    },
-    flex: (el, value) => {
-      el.style.flex = String(value);
-    },
-    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) => {
+    } 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);
-    },
-    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";
+import { getElementDisposables } from "@hypen-space/core/disposable";
+var elementDataMap = new WeakMap;
 function getHypenData(element) {
   let data = elementDataMap.get(element);
   if (!data) {
@@ -1817,6 +2018,9 @@ function disposeHypenElement(element) {
   } 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)
@@ -1827,24 +2031,15 @@ function setLegacyEngine(element, engine) {
   setEngine(element, engine);
   element.__hypenEngine = engine;
 }
-var elementDataMap, HYPEN_ENGINE_SYMBOL, REGISTERED_EVENTS_SYMBOL, KEY_TARGET_SYMBOL;
-var init_element_data = __esm(() => {
-  elementDataMap = new WeakMap;
-  HYPEN_ENGINE_SYMBOL = Symbol.for("hypen.engine");
-  REGISTERED_EVENTS_SYMBOL = Symbol.for("hypen.registeredEvents");
-  KEY_TARGET_SYMBOL = Symbol.for("hypen.keyTarget");
-});
 
 // src/dom/applicators/events.ts
-var exports_events = {};
-__export(exports_events, {
-  eventHandlers: () => eventHandlers
-});
 import {
   getElementDisposables as getElementDisposables2,
   disposableListener,
   disposableTimeout
-} from "@hypen-space/core";
+} from "@hypen-space/core/disposable";
+import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core";
+var log3 = frameworkLoggers3.events;
 function toPlainObject(value) {
   if (value instanceof Map) {
     const obj = {};
@@ -1938,7 +2133,7 @@ function createEventHandler(eventType, options = {}) {
   return (element, value) => {
     const { actionName, payload: customPayload } = extractActionDetails(value);
     if (!actionName) {
-      console.warn(`[EventApplicator] ${eventType} requires an action reference starting with @, got:`, value);
+      log3.warn(`${eventType} requires an action reference starting with @, got:`, value);
       return;
     }
     const disposables = getElementDisposables2(element);
@@ -1981,7 +2176,7 @@ function createKeyHandler(defaultKey = "Enter") {
   return (element, value) => {
     const { actionName, payload: customPayload } = extractActionDetails(value);
     if (!actionName) {
-      console.warn(`[EventApplicator] onKey requires an action reference starting with @, got:`, value);
+      log3.warn(`onKey requires an action reference starting with @, got:`, value);
       return;
     }
     const disposables = getElementDisposables2(element);
@@ -2026,7 +2221,7 @@ function createLongClickHandler(thresholdMs = 500) {
   return (element, value) => {
     const { actionName, payload: customPayload } = extractActionDetails(value);
     if (!actionName) {
-      console.warn(`[EventApplicator] onLongClick requires an action reference starting with @, got:`, value);
+      log3.warn(`onLongClick requires an action reference starting with @, got:`, value);
       return;
     }
     const disposables = getElementDisposables2(element);
@@ -2075,7 +2270,8 @@ var inputPayload = (event, element) => {
     value: target.value,
     input: target.value
   };
-}, scrollPayload = (_event, element) => {
+};
+var scrollPayload = (_event, element) => {
   const scrollTop = element.scrollTop;
   const scrollHeight = element.scrollHeight;
   const clientHeight = element.clientHeight;
@@ -2095,11 +2291,13 @@ var inputPayload = (event, element) => {
     atBottom: scrollHeight - scrollTop === clientHeight,
     atTop: scrollTop === 0
   };
-}, focusPayload = (event, element) => ({
+};
+var focusPayload = (event, element) => ({
   type: event.type,
   timestamp: Date.now(),
   value: element.value ?? undefined
-}), mousePayload = (event, _element) => {
+});
+var mousePayload = (event, _element) => {
   const mouseEvent = event;
   return {
     type: event.type,
@@ -2107,637 +2305,495 @@ var inputPayload = (event, element) => {
     clientX: mouseEvent.clientX,
     clientY: mouseEvent.clientY
   };
-}, eventHandlers;
-var init_events = __esm(() => {
-  init_element_data();
-  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),
-    onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
-    onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
-    onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
-    onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload })
-  };
-});
+};
+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),
+  onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
+  onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
+  onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
+  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload })
+};
 
 // src/dom/applicators/typography.ts
-var exports_typography = {};
-__export(exports_typography, {
-  typographyHandlers: () => typographyHandlers
-});
-var typographyHandlers;
-var init_typography = __esm(() => {
-  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";
-      }
+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 exports_transform = {};
-__export(exports_transform, {
-  transformHandlers: () => transformHandlers
-});
-var transformHandlers;
-var init_transform = __esm(() => {
-  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);
-    }
-  };
-});
+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 exports_effects = {};
-__export(exports_effects, {
-  effectsHandlers: () => effectsHandlers
-});
-var effectsHandlers;
-var init_effects = __esm(() => {
-  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);
+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 exports_advanced_layout = {};
-__export(exports_advanced_layout, {
-  advancedLayoutHandlers: () => advancedLayoutHandlers
-});
-var advancedLayoutHandlers;
-var init_advanced_layout = __esm(() => {
-  init_layout();
-  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);
-    },
-    justifyContent: (el, value) => {
-      el.style.justifyContent = mapAlignmentValue(String(value));
-    },
-    alignItems: (el, value) => {
-      el.style.alignItems = mapAlignmentValue(String(value));
-    },
-    alignContent: (el, value) => {
-      el.style.alignContent = String(value);
-    },
-    alignSelf: (el, value) => {
-      el.style.alignSelf = String(value);
-    },
-    order: (el, value) => {
-      el.style.order = String(value);
-    },
-    gridTemplateColumns: (el, value) => {
+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);
+  },
+  justifyContent: (el, value) => {
+    el.style.justifyContent = mapAlignmentValue(String(value));
+  },
+  alignItems: (el, value) => {
+    el.style.alignItems = mapAlignmentValue(String(value));
+  },
+  alignContent: (el, value) => {
+    el.style.alignContent = String(value);
+  },
+  alignSelf: (el, value) => {
+    el.style.alignSelf = 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);
-    },
-    gridTemplateRows: (el, value) => {
+    }
+  },
+  gridRows: (el, value) => {
+    if (typeof value === "number") {
+      el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
+    } else {
       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);
     }
-  };
-});
+  },
+  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 exports_background = {};
-__export(exports_background, {
-  backgroundHandlers: () => backgroundHandlers
-});
-var backgroundHandlers;
-var init_background = __esm(() => {
-  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})`;
-    }
-  };
-});
+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 exports_display = {};
-__export(exports_display, {
-  displayHandlers: () => displayHandlers
-});
-var displayHandlers;
-var init_display = __esm(() => {
-  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);
-    }
-  };
-});
+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 exports_transition = {};
-__export(exports_transition, {
-  transitionHandlers: () => transitionHandlers
-});
-var transitionHandlers;
-var init_transition = __esm(() => {
-  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/components/index.ts
-class ComponentRegistry {
-  handlers = new Map;
-  constructor() {
-    this.registerDefaults();
-  }
-  register(type, handler) {
-    this.handlers.set(type.toLowerCase(), handler);
-  }
-  get(type) {
-    return this.handlers.get(type.toLowerCase());
-  }
-  createElement(type, props = {}) {
-    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));
-    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);
+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 = {
@@ -2973,60 +3029,57 @@ class ApplicatorRegistry {
     return !unitless.includes(prop);
   }
   registerDefaults() {
-    const { paddingHandler: paddingHandler2 } = __toCommonJS(exports_padding);
-    const { marginHandler: marginHandler2 } = __toCommonJS(exports_margin);
-    const { colorHandlers: colorHandlers2 } = (init_color(), __toCommonJS(exports_color));
-    const { borderHandlers: borderHandlers2 } = (init_border(), __toCommonJS(exports_border));
-    const { sizeHandlers: sizeHandlers2 } = (init_size(), __toCommonJS(exports_size));
-    const { fontHandlers: fontHandlers2 } = (init_font(), __toCommonJS(exports_font));
-    const { layoutHandlers: layoutHandlers2 } = (init_layout(), __toCommonJS(exports_layout));
-    const { eventHandlers: eventHandlers2 } = (init_events(), __toCommonJS(exports_events));
-    const { typographyHandlers: typographyHandlers2 } = (init_typography(), __toCommonJS(exports_typography));
-    const { transformHandlers: transformHandlers2 } = (init_transform(), __toCommonJS(exports_transform));
-    const { effectsHandlers: effectsHandlers2 } = (init_effects(), __toCommonJS(exports_effects));
-    const { advancedLayoutHandlers: advancedLayoutHandlers2 } = (init_advanced_layout(), __toCommonJS(exports_advanced_layout));
-    const { backgroundHandlers: backgroundHandlers2 } = (init_background(), __toCommonJS(exports_background));
-    const { displayHandlers: displayHandlers2 } = (init_display(), __toCommonJS(exports_display));
-    const { transitionHandlers: transitionHandlers2 } = (init_transition(), __toCommonJS(exports_transition));
-    this.register("padding", paddingHandler2);
-    this.register("margin", marginHandler2);
-    for (const [name, handler] of Object.entries(colorHandlers2)) {
+    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(borderHandlers2)) {
+    for (const [name, handler] of Object.entries(borderHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(sizeHandlers2)) {
+    for (const [name, handler] of Object.entries(sizeHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(fontHandlers2)) {
+    for (const [name, handler] of Object.entries(fontHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(layoutHandlers2)) {
+    for (const [name, handler] of Object.entries(layoutHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(eventHandlers2)) {
+    for (const [name, handler] of Object.entries(eventHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(typographyHandlers2)) {
+    for (const [name, handler] of Object.entries(typographyHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(transformHandlers2)) {
+    for (const [name, handler] of Object.entries(transformHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(effectsHandlers2)) {
+    for (const [name, handler] of Object.entries(effectsHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(advancedLayoutHandlers2)) {
+    for (const [name, handler] of Object.entries(advancedLayoutHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(backgroundHandlers2)) {
+    for (const [name, handler] of Object.entries(backgroundHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(displayHandlers2)) {
+    for (const [name, handler] of Object.entries(displayHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(transitionHandlers2)) {
+    for (const [name, handler] of Object.entries(transitionHandlers)) {
       this.register(name, handler);
     }
   }
@@ -3074,6 +3127,8 @@ var canvasApplicators = {
 };
 
 // src/dom/debug.ts
+import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core";
+var log4 = frameworkLoggers4.debug;
 var defaultDebugConfig = {
   enabled: false,
   showHeatmap: true,
@@ -3099,7 +3154,7 @@ class RerenderTracker {
     if (!this.config.enabled || !this.config.showHeatmap) {
       return;
     }
-    console.log(`\uD83D\uDD25 [Debug] Tracking re-render: ${id} - ${patchType}`);
+    log4.debug(`Tracking re-render: ${id} - ${patchType}`);
     const currentCount = this.renderCounts.get(id) || 0;
     const newCount = currentCount + 1;
     this.renderCounts.set(id, newCount);
@@ -3107,7 +3162,7 @@ class RerenderTracker {
   }
   updateHeatmap(id, element, renderCount, patchType) {
     const opacity = Math.min(renderCount * this.config.heatmapIncrement / 100, this.config.maxOpacity);
-    console.log(`\uD83D\uDD25 [Debug] Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);
+    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) {
@@ -3235,7 +3290,8 @@ class RerenderTracker {
 }
 
 // src/dom/renderer.ts
-init_element_data();
+import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core";
+var log5 = frameworkLoggers5.renderer;
 
 class DOMRenderer {
   container;
@@ -3270,13 +3326,13 @@ class DOMRenderer {
     }
   }
   updateState(state) {
-    console.log(`[Renderer] Updating state:`, state);
+    log5.debug("Updating state:", state);
     this.currentState = state;
     this.interpolateAllText();
   }
   mergeComponentState(componentState) {
     this.currentState = { ...this.currentState, ...componentState };
-    console.log(`[Renderer] Merged state:`, this.currentState);
+    log5.debug("Merged state:", this.currentState);
     this.interpolateAllText();
   }
   interpolateAllText() {
@@ -3309,7 +3365,7 @@ class DOMRenderer {
   applyPatch(patch) {
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id, patch.element_type, patch.props || {});
+        this.onCreate(patch.id, patch.elementType, patch.props || {});
         break;
       case "setProp":
         this.onSetProp(patch.id, patch.name, patch.value);
@@ -3318,10 +3374,10 @@ class DOMRenderer {
         this.onSetText(patch.id, patch.text);
         break;
       case "insert":
-        this.onInsert(patch.parent_id, patch.id, patch.before_id);
+        this.onInsert(patch.parentId, patch.id, patch.beforeId);
         break;
       case "move":
-        this.onMove(patch.parent_id, patch.id, patch.before_id);
+        this.onMove(patch.parentId, patch.id, patch.beforeId);
         break;
       case "remove":
         this.onRemove(patch.id);
@@ -3336,7 +3392,7 @@ class DOMRenderer {
       fallback.dataset.hypenType = elementType.toLowerCase();
       fallback.style.display = "contents";
       element = fallback;
-      console.log(`[Renderer] Unknown component "${elementType}" - using transparent container`);
+      log5.debug(`Unknown component "${elementType}" - using transparent container`);
     }
     element.dataset.hypenType = elementType.toLowerCase();
     element.dataset.hypenId = id;
@@ -3361,7 +3417,7 @@ class DOMRenderer {
       if (elementType === "input") {
         const inputEl = element;
         inputEl.value = String(value);
-        console.log(`[Renderer] Updated input value: "${value}"`);
+        log5.debug(`Updated input value: "${value}"`);
         return;
       }
       const nextText = String(value);
@@ -3376,7 +3432,7 @@ class DOMRenderer {
       } else if (!currentLooksLikeTemplate) {
         element.dataset.textTemplate = nextText;
       }
-      console.log(`[Renderer] Updated text content: "${value}"`);
+      log5.debug(`Updated text content: "${value}"`);
       return;
     }
     this.applicators.apply(element, name, value);
@@ -3391,7 +3447,7 @@ class DOMRenderer {
   onInsert(parentId, id, beforeId) {
     const parent = parentId === "root" ? this.container : this.nodes.get(parentId);
     const child = this.nodes.get(id);
-    console.log(`[Renderer] Inserting ${id} into ${parentId}`, {
+    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)
@@ -3463,8 +3519,12 @@ import {
   componentLoader,
   Router,
   Route,
-  Link
+  Link,
+  frameworkLoggers as frameworkLoggers6,
+  setDebugMode
 } from "@hypen-space/core";
+var log6 = frameworkLoggers6.hypen;
+
 class Hypen {
   engine = null;
   renderer = null;
@@ -3480,6 +3540,9 @@ class Hypen {
       debug: false,
       ...config
     };
+    if (this.config.debug) {
+      setDebugMode(true);
+    }
     this.router = new HypenRouter;
     this.globalContext = new HypenGlobalContext;
     componentLoader.register("Router", Router, "");
@@ -3489,27 +3552,19 @@ class Hypen {
     this.globalContext.__hypenEngine = this;
   }
   async init() {
-    if (this.config.debug) {
-      console.log("[Hypen] Initializing...");
-    }
+    log6.debug("Initializing...");
     this.engine = new Engine;
     await this.engine.init({
       wasmUrl: this.config.wasmUrl,
       jsUrl: this.config.jsUrl
     });
-    if (this.config.debug) {
-      console.log("[Hypen] Engine initialized");
-    }
+    log6.debug("Engine initialized");
   }
   async loadComponents(componentsDir) {
     const dir = componentsDir || this.config.componentsDir;
-    if (this.config.debug) {
-      console.log(`[Hypen] Loading components from ${dir}...`);
-    }
+    log6.debug(`Loading components from ${dir}...`);
     await componentLoader.loadFromComponentsDir(dir);
-    if (this.config.debug) {
-      console.log(`[Hypen] Loaded ${componentLoader.getNames().length} components`);
-    }
+    log6.debug(`Loaded ${componentLoader.getNames().length} components`);
   }
   async render(componentName, containerSelector) {
     if (!this.engine) {
@@ -3528,9 +3583,7 @@ class Hypen {
     if (!component) {
       throw new Error(`[Hypen] Component "${componentName}" not found. Available: ${componentLoader.getNames().join(", ")}`);
     }
-    if (this.config.debug) {
-      console.log(`[Hypen] Rendering ${componentName} to`, this.container);
-    }
+    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,
@@ -3539,9 +3592,7 @@ class Hypen {
       maxOpacity: 0.8
     });
     this.engine.setRenderCallback((patches) => {
-      if (this.config.debug) {
-        console.log(`[Hypen] Applying ${patches.length} patches`);
-      }
+      log6.debug(`Applying ${patches.length} patches`);
       this.renderer.applyPatches(patches);
     });
     const routerContext = {
@@ -3555,23 +3606,17 @@ class Hypen {
     this.moduleInstances.set(moduleId, this.moduleInstance);
     this.moduleInstance.onStateChange(() => {
       const mergedState = this.getMergedState();
-      if (this.config.debug) {
-        console.log(`[Hypen] State changed, merged state:`, mergedState);
-      }
+      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());
-    if (this.config.debug) {
-      console.log(`[Hypen] ${componentName} rendered successfully`);
-    }
+    log6.debug(`${componentName} rendered successfully`);
   }
   async unmount() {
-    if (this.config.debug) {
-      console.log("[Hypen] Unmounting...");
-    }
+    log6.debug("Unmounting...");
     if (this.moduleInstance) {
       await this.moduleInstance.destroy();
       this.moduleInstance = null;
@@ -3581,9 +3626,7 @@ class Hypen {
       this.container = null;
     }
     this.renderer = null;
-    if (this.config.debug) {
-      console.log("[Hypen] Unmounted");
-    }
+    log6.debug("Unmounted");
   }
   getModuleInstance() {
     return this.moduleInstance;
@@ -3600,17 +3643,13 @@ class Hypen {
   setDebugHeatmap(enabled) {
     if (this.renderer) {
       this.renderer.setDebugConfig({ enabled, showHeatmap: enabled });
-      if (this.config.debug) {
-        console.log(`[Hypen] Debug heatmap ${enabled ? "enabled" : "disabled"}`);
-      }
+      log6.debug(`Debug heatmap ${enabled ? "enabled" : "disabled"}`);
     }
   }
   resetDebugTracking() {
     if (this.renderer) {
       this.renderer.resetDebugTracking();
-      if (this.config.debug) {
-        console.log(`[Hypen] Debug tracking reset`);
-      }
+      log6.debug("Debug tracking reset");
     }
   }
   getDebugStats() {
@@ -3639,9 +3678,7 @@ class Hypen {
       this.moduleInstances.set(componentName, moduleInstance);
       moduleInstance.onStateChange(() => {
         const mergedState2 = this.getMergedState();
-        if (this.config.debug) {
-          console.log(`[Hypen] Lazy component ${componentName} state changed:`, mergedState2);
-        }
+        log6.debug(`Lazy component ${componentName} state changed:`, mergedState2);
         this.renderer.updateState(mergedState2);
       });
     }
@@ -3673,9 +3710,7 @@ class Hypen {
       this.moduleInstances.set("Router", routerInstance);
       routerInstance.onStateChange(() => {
         const mergedState = this.getMergedState();
-        if (this.config.debug) {
-          console.log(`[Hypen] Router state changed:`, mergedState);
-        }
+        log6.debug("Router state changed:", mergedState);
         this.renderer.updateState(mergedState);
       });
     }
@@ -3688,17 +3723,13 @@ class Hypen {
       if (!comp || !comp.module) {
         continue;
       }
-      if (this.config.debug) {
-        console.log(`[Hypen] Creating nested module instance for: ${name}`);
-      }
+      log6.debug(`Creating nested module instance for: ${name}`);
       const moduleInstance = new HypenModuleInstance(this.engine, comp.module, routerContext, this.globalContext);
       this.globalContext.registerModule(name, moduleInstance);
       this.moduleInstances.set(name, moduleInstance);
       moduleInstance.onStateChange(() => {
         const mergedState = this.getMergedState();
-        if (this.config.debug) {
-          console.log(`[Hypen] Nested component ${name} state changed:`, mergedState);
-        }
+        log6.debug(`Nested component ${name} state changed:`, mergedState);
         this.renderer.updateState(mergedState);
       });
     }
@@ -3738,14 +3769,10 @@ class Hypen {
       if (builtInElements.has(componentName)) {
         return null;
       }
-      if (this.config.debug) {
-        console.log(`[Hypen] Resolving component: ${componentName} (context: ${contextPath})`);
-      }
+      log6.debug(`Resolving component: ${componentName} (context: ${contextPath})`);
       const componentDef = componentLoader.get(componentName);
       if (!componentDef) {
-        if (this.config.debug) {
-          console.log(`[Hypen] Component not found: ${componentName}`);
-        }
+        log6.debug(`Component not found: ${componentName}`);
         return null;
       }
       const isPassthrough = componentName === "Router";
@@ -3756,15 +3783,13 @@ class Hypen {
         passthrough: isPassthrough,
         lazy: isLazy
       };
-      if (this.config.debug) {
-        const flags = [];
-        if (isPassthrough)
-          flags.push("passthrough");
-        if (isLazy)
-          flags.push("lazy");
-        const flagStr = flags.length > 0 ? ` (${flags.join(", ")})` : "";
-        console.log(`[Hypen] Resolved ${componentName} -> ${resolved.path}${flagStr}`);
-      }
+      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;
     });
   }
@@ -3792,6 +3817,9 @@ async function renderWithComponents(components, componentName, containerSelector
 }
 
 // src/dom/events.ts
+import { frameworkLoggers as frameworkLoggers7 } from "@hypen-space/core";
+var log7 = frameworkLoggers7.events;
+
 class EventManager {
   engine;
   bindings = new Map;
@@ -3800,22 +3828,22 @@ class EventManager {
   }
   attach(elementId, element, eventName, actionName) {
     const domEventName = eventName === "onClick" ? "click" : eventName;
-    console.log(`[EventManager] Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
+    log7.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
     const listener = (event) => {
-      console.log(`\uD83D\uDD25 [EventManager] Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
-      console.log(`\uD83D\uDD25 [EventManager] Event object:`, event);
-      console.log(`\uD83D\uDD25 [EventManager] Element:`, element);
+      log7.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
+      log7.debug(`Event object:`, event);
+      log7.debug(`Element:`, element);
       if (eventName === "submit" || eventName === "click" && element.tagName === "A") {
         event.preventDefault();
       }
       const payload = this.extractEventData(event, element);
-      console.log(`\uD83D\uDD25 [EventManager] Event payload:`, payload);
-      console.log(`\uD83D\uDD25 [EventManager] Calling engine.dispatchAction(${actionName})`);
+      log7.debug(`Event payload:`, payload);
+      log7.debug(`Calling engine.dispatchAction(${actionName})`);
       try {
         this.engine.dispatchAction(actionName, payload);
-        console.log(`\uD83D\uDD25 [EventManager] ✅ dispatchAction succeeded`);
+        log7.debug(`dispatchAction succeeded`);
       } catch (error) {
-        console.error(`\uD83D\uDD25 [EventManager] ❌ dispatchAction failed:`, error);
+        log7.error(`dispatchAction failed:`, error);
       }
     };
     let elementBindings = this.bindings.get(elementId);
@@ -3825,8 +3853,8 @@ class EventManager {
     }
     elementBindings.set(eventName, listener);
     element.addEventListener(domEventName, listener);
-    console.log(`[EventManager] Listener attached to DOM for ${domEventName}`);
-    console.log(`[EventManager] Element details:`, {
+    log7.debug(`Listener attached to DOM for ${domEventName}`);
+    log7.debug(`Element details:`, {
       tagName: element.tagName,
       id: element.id,
       dataset: element.dataset,
@@ -3834,7 +3862,7 @@ class EventManager {
     });
     if (domEventName === "click") {
       element.addEventListener("click", (e) => {
-        console.log(`\uD83E\uDDEA [TEST] Raw DOM click detected on ${element.tagName}`, e);
+        log7.debug(`Raw DOM click detected on ${element.tagName}`, e);
       });
     }
   }
@@ -4019,6 +4047,8 @@ function getAbsoluteBounds(node) {
 }
 
 // src/canvas/text.ts
+import { frameworkLoggers as frameworkLoggers8 } from "@hypen-space/core";
+var log8 = frameworkLoggers8.canvas;
 var textMetricsCache = new Map;
 function getCacheKey(text, fontStyle, maxWidth) {
   return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || "auto"}`;
@@ -4118,7 +4148,7 @@ async function loadFont(fontFamily, fontWeight = "normal") {
   try {
     await document.fonts.load(font);
   } catch (error) {
-    console.warn(`Failed to load font: ${font}`, error);
+    log8.warn(`Failed to load font: ${font}`, error);
   }
 }
 
@@ -5733,6 +5763,8 @@ class AccessibilityLayer {
 }
 
 // src/canvas/renderer.ts
+import { frameworkLoggers as frameworkLoggers9 } from "@hypen-space/core";
+var log9 = frameworkLoggers9.canvas;
 var DEFAULT_OPTIONS = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
   backgroundColor: "#ffffff",
@@ -5797,7 +5829,7 @@ class CanvasRenderer {
   applyPatch(patch) {
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id, patch.element_type, patch.props || {});
+        this.onCreate(patch.id, patch.elementType, patch.props || {});
         break;
       case "setProp":
         this.onSetProp(patch.id, patch.name, patch.value);
@@ -5806,10 +5838,10 @@ class CanvasRenderer {
         this.onSetText(patch.id, patch.text);
         break;
       case "insert":
-        this.onInsert(patch.parent_id, patch.id, patch.before_id);
+        this.onInsert(patch.parentId, patch.id, patch.beforeId);
         break;
       case "move":
-        this.onMove(patch.parent_id, patch.id, patch.before_id);
+        this.onMove(patch.parentId, patch.id, patch.beforeId);
         break;
       case "remove":
         this.onRemove(patch.id);
@@ -5940,7 +5972,7 @@ class CanvasRenderer {
       const elapsed = performance.now() - startTime;
       this.frameCount++;
       if (performance.now() - this.lastFrameTime > 1000) {
-        console.log(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
+        log9.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
         this.frameCount = 0;
         this.lastFrameTime = performance.now();
       }
@@ -6001,4 +6033,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=84FDE1811854F3EC64756E2164756E21
+//# debugId=4FAEC1A16542965464756E2164756E21