@hypen-space/web 0.3.9 → 0.3.11

package/dist/{src/dom/renderer.js → dom/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)
@@ -3331,8 +3509,120 @@ class DOMRenderer {
     return this.debugTracker.getStats();
   }
 }
+
+// src/dom/events.ts
+import { frameworkLoggers as frameworkLoggers6 } from "@hypen-space/core";
+var log6 = frameworkLoggers6.events;
+
+class EventManager {
+  engine;
+  bindings = new Map;
+  constructor(engine) {
+    this.engine = engine;
+  }
+  attach(elementId, element, eventName, actionName) {
+    const domEventName = eventName === "onClick" ? "click" : eventName;
+    log6.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
+    const listener = (event) => {
+      log6.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
+      log6.debug(`Event object:`, event);
+      log6.debug(`Element:`, element);
+      if (eventName === "submit" || eventName === "click" && element.tagName === "A") {
+        event.preventDefault();
+      }
+      const payload = this.extractEventData(event, element);
+      log6.debug(`Event payload:`, payload);
+      log6.debug(`Calling engine.dispatchAction(${actionName})`);
+      try {
+        this.engine.dispatchAction(actionName, payload);
+        log6.debug(`dispatchAction succeeded`);
+      } catch (error) {
+        log6.error(`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);
+    log6.debug(`Listener attached to DOM for ${domEventName}`);
+    log6.debug(`Element details:`, {
+      tagName: element.tagName,
+      id: element.id,
+      dataset: element.dataset,
+      textContent: element.textContent?.substring(0, 50)
+    });
+    if (domEventName === "click") {
+      element.addEventListener("click", (e) => {
+        log6.debug(`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 {
-  DOMRenderer
+  defaultDebugConfig,
+  RerenderTracker,
+  EventManager,
+  DOMRenderer,
+  ComponentRegistry,
+  ApplicatorRegistry
 };
 
-//# debugId=59360259C9BC50B664756E2164756E21
+//# debugId=B4E923D0EBE0B01664756E2164756E21