@hypen-space/web 0.3.9 → 0.3.11

package/dist/{src/dom/index.js → dom/renderer.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)
@@ -3331,117 +3509,8 @@ class DOMRenderer {
     return this.debugTracker.getStats();
   }
 }
-
-// src/dom/events.ts
-class EventManager {
-  engine;
-  bindings = new Map;
-  constructor(engine) {
-    this.engine = engine;
-  }
-  attach(elementId, element, eventName, actionName) {
-    const domEventName = eventName === "onClick" ? "click" : eventName;
-    console.log(`[EventManager] 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);
-      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})`);
-      try {
-        this.engine.dispatchAction(actionName, payload);
-        console.log(`\uD83D\uDD25 [EventManager] ✅ dispatchAction succeeded`);
-      } catch (error) {
-        console.error(`\uD83D\uDD25 [EventManager] ❌ dispatchAction failed:`, error);
-      }
-    };
-    let elementBindings = this.bindings.get(elementId);
-    if (!elementBindings) {
-      elementBindings = new Map;
-      this.bindings.set(elementId, elementBindings);
-    }
-    elementBindings.set(eventName, listener);
-    element.addEventListener(domEventName, listener);
-    console.log(`[EventManager] Listener attached to DOM for ${domEventName}`);
-    console.log(`[EventManager] Element details:`, {
-      tagName: element.tagName,
-      id: element.id,
-      dataset: element.dataset,
-      textContent: element.textContent?.substring(0, 50)
-    });
-    if (domEventName === "click") {
-      element.addEventListener("click", (e) => {
-        console.log(`\uD83E\uDDEA [TEST] Raw DOM click detected on ${element.tagName}`, e);
-      });
-    }
-  }
-  detach(elementId, element, eventName) {
-    const elementBindings = this.bindings.get(elementId);
-    if (!elementBindings)
-      return;
-    const listener = elementBindings.get(eventName);
-    if (listener) {
-      element.removeEventListener(eventName, listener);
-      elementBindings.delete(eventName);
-    }
-    if (elementBindings.size === 0) {
-      this.bindings.delete(elementId);
-    }
-  }
-  extractEventData(event, element) {
-    const data = {
-      type: event.type,
-      timestamp: Date.now()
-    };
-    if (event instanceof MouseEvent) {
-      data.clientX = event.clientX;
-      data.clientY = event.clientY;
-      data.button = event.button;
-    }
-    if (event instanceof KeyboardEvent) {
-      data.key = event.key;
-      data.code = event.code;
-      data.ctrlKey = event.ctrlKey;
-      data.shiftKey = event.shiftKey;
-      data.altKey = event.altKey;
-      data.metaKey = event.metaKey;
-    }
-    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-      data.value = element.value;
-    }
-    if (element instanceof HTMLSelectElement) {
-      data.value = element.value;
-      data.selectedIndex = element.selectedIndex;
-    }
-    if (event.type === "submit" && element instanceof HTMLFormElement) {
-      data.formData = new FormData(element);
-    }
-    return data;
-  }
-  clearElement(elementId, element) {
-    const elementBindings = this.bindings.get(elementId);
-    if (!elementBindings)
-      return;
-    for (const [eventName, listener] of elementBindings) {
-      element.removeEventListener(eventName, listener);
-    }
-    this.bindings.delete(elementId);
-  }
-  clearAll() {
-    this.bindings.clear();
-  }
-}
 export {
-  defaultDebugConfig,
-  RerenderTracker,
-  EventManager,
-  DOMRenderer,
-  ComponentRegistry,
-  ApplicatorRegistry
+  DOMRenderer
 };
 
-//# debugId=7F19F4748F45582064756E2164756E21
+//# debugId=2DB804639EB78B3764756E2164756E21