@hypen-space/web 0.3.9 → 0.3.11

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

@@ -51,10 +51,26 @@ var exports_row = {};
 __export(exports_row, {
   rowHandler: () => rowHandler
 });
-var rowHandler;
+function ensureRowStyles() {
+  if (rowStylesInjected)
+    return;
+  rowStylesInjected = true;
+  const style = document.createElement("style");
+  style.id = "hypen-row-styles";
+  style.textContent = `
+    /* Row expands to fill width when it has children with flex/weight */
+    /* This matches iOS/Android behavior where weighted children cause parent to expand */
+    [data-hypen-type="row"]:has(> [data-hypen-flex]) {
+      width: 100%;
+    }
+  `;
+  document.head.appendChild(style);
+}
+var rowStylesInjected = false, rowHandler;
 var init_row = __esm(() => {
   rowHandler = {
     create() {
+      ensureRowStyles();
       const el = document.createElement("div");
       el.style.display = "flex";
       el.style.flexDirection = "row";
@@ -76,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;
     },
@@ -151,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;
     }
@@ -173,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;
     }
@@ -423,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);
@@ -482,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";
@@ -971,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");
@@ -992,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"}"`);
     }
   };
 });
@@ -1004,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);
@@ -1029,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);
@@ -1051,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);
@@ -1188,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() {
@@ -1201,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;
       }
@@ -1226,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) {
@@ -1244,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;
             }
           }
@@ -1347,40 +1391,134 @@ class ComponentRegistry {
 }
 
 // src/dom/applicators/padding.ts
+var getNumericValue = (value) => {
+  if (typeof value === "number")
+    return value;
+  if (typeof value === "object" && value["0"] !== undefined)
+    return Number(value["0"]);
+  if (typeof value === "string")
+    return parseFloat(value);
+  return null;
+};
 var paddingHandler = (el, value) => {
   if (typeof value === "number") {
     el.style.padding = `${value}px`;
   } else if (typeof value === "object") {
-    if (value.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 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 colorHandlers = {
@@ -1569,8 +1707,14 @@ var sizeHandlers = {
     if (value === false)
       return;
     const fraction = typeof value === "number" ? value : 1;
-    el.style.width = `${fraction * 100}%`;
-    el.style.alignSelf = "stretch";
+    if (fraction === 1) {
+      el.style.alignSelf = "stretch";
+      el.style.width = "100%";
+      el.style.minWidth = "0";
+    } else {
+      el.style.width = `${fraction * 100}%`;
+    }
+    el.style.justifySelf = "stretch";
   },
   fillMaxHeight: (el, value) => {
     if (value === false)
@@ -1584,6 +1728,8 @@ var sizeHandlers = {
     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";
   }
 };
 
@@ -1725,8 +1871,11 @@ function mapAlignmentValue(value) {
 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 (flexDirection === "column" || flexDirection === "column-reverse") {
+    if (display === "grid") {
+      el.style.alignItems = val;
+    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
       el.style.justifyContent = val;
     } else {
       el.style.alignItems = val;
@@ -1734,9 +1883,17 @@ var layoutHandlers = {
   },
   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 (flexDirection === "column" || flexDirection === "column-reverse") {
+    if (display === "grid") {
+      el.style.justifyItems = val;
+    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
       el.style.alignItems = val;
+    } else if (flexDirection === "row" || flexDirection === "row-reverse") {
+      el.style.justifyContent = val;
+      if (val !== "flex-start" && el.style.overflow !== "auto" && el.style.overflowX !== "auto") {
+        el.style.width = "100%";
+      }
     } else {
       el.style.justifyContent = val;
     }
@@ -1752,9 +1909,11 @@ var layoutHandlers = {
   },
   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);
@@ -1879,6 +2038,8 @@ import {
   disposableListener,
   disposableTimeout
 } 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 = {};
@@ -1972,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);
@@ -2015,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);
@@ -2060,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);
@@ -2869,7 +3030,19 @@ class ApplicatorRegistry {
   }
   registerDefaults() {
     this.register("padding", paddingHandler);
+    this.register("paddingTop", paddingTopHandler);
+    this.register("paddingBottom", paddingBottomHandler);
+    this.register("paddingLeft", paddingLeftHandler);
+    this.register("paddingRight", paddingRightHandler);
+    this.register("paddingHorizontal", paddingHorizontalHandler);
+    this.register("paddingVertical", paddingVerticalHandler);
     this.register("margin", marginHandler);
+    this.register("marginTop", marginTopHandler);
+    this.register("marginBottom", marginBottomHandler);
+    this.register("marginLeft", marginLeftHandler);
+    this.register("marginRight", marginRightHandler);
+    this.register("marginHorizontal", marginHorizontalHandler);
+    this.register("marginVertical", marginVerticalHandler);
     for (const [name, handler] of Object.entries(colorHandlers)) {
       this.register(name, handler);
     }
@@ -2954,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,
@@ -2979,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);
@@ -2987,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) {
@@ -3115,6 +3290,9 @@ class RerenderTracker {
 }
 
 // src/dom/renderer.ts
+import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core";
+var log5 = frameworkLoggers5.renderer;
+
 class DOMRenderer {
   container;
   nodes = new Map;
@@ -3148,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() {
@@ -3187,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);
@@ -3196,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);
@@ -3214,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;
@@ -3239,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);
@@ -3254,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);
@@ -3269,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)
@@ -3341,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;
@@ -3358,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, "");
@@ -3367,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) {
@@ -3406,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,
@@ -3417,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 = {
@@ -3433,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;
@@ -3459,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;
@@ -3478,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() {
@@ -3517,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);
       });
     }
@@ -3551,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);
       });
     }
@@ -3566,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);
       });
     }
@@ -3616,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";
@@ -3634,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;
     });
   }
@@ -3670,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;
@@ -3678,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);
@@ -3703,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,
@@ -3712,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);
       });
     }
   }
@@ -3897,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"}`;
@@ -3996,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);
   }
 }
 
@@ -5611,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",
@@ -5675,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);
@@ -5684,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);
@@ -5818,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();
       }
@@ -5879,4 +6033,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=30D2770CF269AB4D64756E2164756E21
+//# debugId=4FAEC1A16542965464756E2164756E21