@hypen-space/web 0.2.12 → 0.3.1

package/dist/src/dom/applicators/events.js

@@ -27,11 +27,105 @@ var __export = (target, all) => {
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 
+// src/dom/element-data.ts
+import { getElementDisposables } from "@hypen-space/core";
+function getHypenData(element) {
+  let data = elementDataMap.get(element);
+  if (!data) {
+    data = {};
+    elementDataMap.set(element, data);
+  }
+  return data;
+}
+function hasHypenData(element) {
+  return elementDataMap.has(element);
+}
+function clearHypenData(element) {
+  elementDataMap.delete(element);
+}
+function getEngine(element) {
+  return getHypenData(element).engine;
+}
+function setEngine(element, engine) {
+  getHypenData(element).engine = engine;
+}
+function findEngine(element) {
+  let current = element;
+  while (current) {
+    const engine = getEngine(current);
+    if (engine)
+      return engine;
+    current = current.parentElement;
+  }
+  return;
+}
+function getRegisteredEvents(element) {
+  const data = getHypenData(element);
+  if (!data.registeredEvents) {
+    data.registeredEvents = new Set;
+  }
+  return data.registeredEvents;
+}
+function isEventRegistered(element, eventKey) {
+  return getRegisteredEvents(element).has(eventKey);
+}
+function registerEvent(element, eventKey) {
+  getRegisteredEvents(element).add(eventKey);
+}
+function unregisterEvent(element, eventKey) {
+  getRegisteredEvents(element).delete(eventKey);
+}
+function getKeyTarget(element) {
+  return getHypenData(element).keyTarget;
+}
+function setKeyTarget(element, key) {
+  getHypenData(element).keyTarget = key;
+}
+function getMeta(element, key) {
+  return getHypenData(element).meta?.[key];
+}
+function setMeta(element, key, value) {
+  const data = getHypenData(element);
+  if (!data.meta) {
+    data.meta = {};
+  }
+  data.meta[key] = value;
+}
+function disposeHypenElement(element) {
+  try {
+    const disposables = getElementDisposables(element);
+    disposables.dispose();
+  } catch {}
+  clearHypenData(element);
+}
+function getLegacyEngine(element) {
+  const engine = getEngine(element);
+  if (engine)
+    return engine;
+  return element[HYPEN_ENGINE_SYMBOL] ?? element.__hypenEngine;
+}
+function setLegacyEngine(element, engine) {
+  setEngine(element, engine);
+  element.__hypenEngine = engine;
+}
+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";
 function toPlainObject(value) {
   if (value instanceof Map) {
     const obj = {};
@@ -77,7 +171,13 @@ function extractActionDetails(value) {
       }
       for (const [key, val] of Object.entries(plain)) {
         if (key !== "0") {
-          payload[key] = val;
+          if (/^\d+$/.test(key) && val && typeof val === "object" && !Array.isArray(val)) {
+            for (const [innerKey, innerVal] of Object.entries(val)) {
+              payload[innerKey] = innerVal;
+            }
+          } else {
+            payload[key] = val;
+          }
         }
       }
     }
@@ -115,420 +215,203 @@ function extractEventData(event, element) {
   }
   return data;
 }
-var eventHandlers;
-var init_events = __esm(() => {
-  eventHandlers = {
-    onClick: (element, value) => {
-      console.log(`[EventApplicator] onClick called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onClick value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenClickListener;
-      if (existingListener) {
-        element.removeEventListener("click", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onClick fired, dispatching action: ${actionName}`);
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : extractEventData(event, element);
-        console.log(`[EventApplicator] onClick payload:`, payload);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onClick`);
-        }
-      };
-      element.__hypenClickListener = listener;
-      element.addEventListener("click", listener);
-      console.log(`[EventApplicator] onClick handler attached for action: ${actionName}`);
-    },
-    onPress: (element, value) => {
-      eventHandlers.onClick(element, value);
-    },
-    onChange: (element, value) => {
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onChange value must be an action reference starting with @, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenChangeListener;
-      if (existingListener) {
-        element.removeEventListener("change", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onChange fired, dispatching action: ${actionName}`);
-        const payload = extractEventData(event, element);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onChange`);
-        }
-      };
-      element.__hypenChangeListener = listener;
-      element.addEventListener("change", listener);
-      console.log(`[EventApplicator] onChange handler attached for action: ${actionName}`);
-    },
-    onSubmit: (element, value) => {
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onSubmit value must be an action reference starting with @, got:`, value);
+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);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `${eventType}:${actionName}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    let throttleTimer = null;
+    const listener = (event) => {
+      if (options.throttleMs && throttleTimer) {
         return;
       }
-      const existingListener = element.__hypenSubmitListener;
-      if (existingListener) {
-        element.removeEventListener("submit", existingListener);
+      if (options.throttleMs) {
+        throttleTimer = disposableTimeout(() => {
+          throttleTimer = null;
+        }, options.throttleMs);
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onSubmit fired, dispatching action: ${actionName}`);
+      if (options.preventDefault) {
         event.preventDefault();
-        const payload = extractEventData(event, element);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onSubmit`);
-        }
-      };
-      element.__hypenSubmitListener = listener;
-      element.addEventListener("submit", listener);
-      console.log(`[EventApplicator] onSubmit handler attached for action: ${actionName}`);
-    },
-    onInput: (element, value) => {
-      console.log(`[EventApplicator] onInput called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onInput value must be an action reference starting with @, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenInputListener;
-      if (existingListener) {
-        element.removeEventListener("input", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onInput fired, dispatching action: ${actionName}`);
-        const target = event.target;
-        const payload = {
-          type: event.type,
-          timestamp: Date.now(),
-          value: target.value,
-          input: target.value
-        };
-        console.log(`[EventApplicator] onInput payload:`, payload);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onInput`);
-        }
-      };
-      element.__hypenInputListener = listener;
-      element.addEventListener("input", listener);
-      console.log(`[EventApplicator] onInput handler attached for action: ${actionName}`);
-    },
-    onKey: (element, value) => {
-      console.log(`[EventApplicator] onKey called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const existingListener = element.__hypenKeyListener;
-        if (existingListener) {
-          element.removeEventListener("keydown", existingListener);
-        }
-        const listener = (event) => {
-          if (event.key === "Enter") {
-            console.log(`\uD83D\uDD25 [EventApplicator] onKey fired (Enter), dispatching action: ${actionName}`);
-            event.preventDefault();
-            const target = event.target;
-            const payload = {
-              type: event.type,
-              timestamp: Date.now(),
-              key: event.key,
-              code: event.code,
-              value: target.value,
-              input: target.value,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              metaKey: event.metaKey
-            };
-            const engine = element.__hypenEngine;
-            if (engine) {
-              engine.dispatchAction(actionName, payload);
-            } else {
-              console.warn(`[EventApplicator] No engine attached to element for onKey`);
-            }
-          }
-        };
-        element.__hypenKeyListener = listener;
-        element.addEventListener("keydown", listener);
-        console.log(`[EventApplicator] onKey handler attached for action: ${actionName} (triggers on Enter)`);
-      } else {
-        console.warn(`[EventApplicator] onKey value must be an action reference starting with @, got: ${value}`);
-      }
-    },
-    "onKey.key": (element, keyValue) => {
-      console.log(`[EventApplicator] onKey.key called with value:`, keyValue);
-      element.__hypenKeyTarget = keyValue;
-    },
-    "onKey.action": (element, value) => {
-      console.log(`[EventApplicator] onKey.action called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const targetKey = element.__hypenKeyTarget || "Enter";
-        const existingListener = element.__hypenKeyListener;
-        if (existingListener) {
-          element.removeEventListener("keydown", existingListener);
-        }
-        const listener = (event) => {
-          const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
-          if (event.key === keyToMatch) {
-            console.log(`\uD83D\uDD25 [EventApplicator] onKey fired (${keyToMatch}), dispatching action: ${actionName}`);
-            event.preventDefault();
-            const target = event.target;
-            const payload = {
-              type: event.type,
-              timestamp: Date.now(),
-              key: event.key,
-              code: event.code,
-              value: target.value,
-              input: target.value,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              metaKey: event.metaKey
-            };
-            const engine = element.__hypenEngine;
-            if (engine) {
-              engine.dispatchAction(actionName, payload);
-            }
-          }
-        };
-        element.__hypenKeyListener = listener;
-        element.addEventListener("keydown", listener);
-        console.log(`[EventApplicator] onKey handler attached for action: ${actionName} on key: ${targetKey}`);
-      }
-    },
-    onScroll: (element, value) => {
-      console.log(`[EventApplicator] onScroll called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const existingListener = element.__hypenScrollListener;
-        if (existingListener) {
-          element.removeEventListener("scroll", existingListener);
-        }
-        let throttleTimer = null;
-        const listener = (event) => {
-          if (throttleTimer)
-            return;
-          throttleTimer = setTimeout(() => {
-            throttleTimer = null;
-          }, 100);
-          const target = event.target;
-          const scrollTop = target.scrollTop;
-          const scrollHeight = target.scrollHeight;
-          const clientHeight = target.clientHeight;
-          const scrollPercentage = scrollTop / (scrollHeight - clientHeight) * 100;
-          const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
-          console.log(`\uD83D\uDD25 [EventApplicator] onScroll fired, scrollTop: ${scrollTop}, nearBottom: ${nearBottom}`);
-          const payload = {
-            type: "scroll",
-            timestamp: Date.now(),
-            scrollTop,
-            scrollLeft: target.scrollLeft,
-            scrollHeight,
-            scrollWidth: target.scrollWidth,
-            clientHeight,
-            clientWidth: target.clientWidth,
-            scrollPercentage: Math.round(scrollPercentage),
-            nearBottom,
-            atBottom: scrollHeight - scrollTop === clientHeight,
-            atTop: scrollTop === 0
-          };
-          const engine = element.__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          } else {
-            console.warn(`[EventApplicator] No engine attached to element for onScroll`);
-          }
-        };
-        element.__hypenScrollListener = listener;
-        element.addEventListener("scroll", listener, { passive: true });
-        console.log(`[EventApplicator] onScroll handler attached for action: ${actionName}`);
-      } else {
-        console.warn(`[EventApplicator] onScroll value must be an action reference starting with @, got: ${value}`);
       }
-    },
-    onLongClick: (element, value) => {
-      console.log(`[EventApplicator] onLongClick called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onLongClick value must be an action reference, got:`, value);
-        return;
-      }
-      const existingDownListener = element.__hypenLongClickDownListener;
-      const existingUpListener = element.__hypenLongClickUpListener;
-      if (existingDownListener) {
-        element.removeEventListener("pointerdown", existingDownListener);
+      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : options.extractPayload ? options.extractPayload(event, element) : extractEventData(event, element);
+      const engine = getEngine(element);
+      if (engine) {
+        engine.dispatchAction(actionName, payload);
       }
-      if (existingUpListener) {
-        element.removeEventListener("pointerup", existingUpListener);
-        element.removeEventListener("pointerleave", existingUpListener);
+    };
+    disposables.add(disposableListener(element, eventType, listener, {
+      passive: options.passive
+    }));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+      if (throttleTimer) {
+        throttleTimer.dispose();
       }
-      let longClickTimer = null;
-      const LONG_CLICK_THRESHOLD = 500;
-      const downListener = (event) => {
-        longClickTimer = setTimeout(() => {
-          console.log(`\uD83D\uDD25 [EventApplicator] onLongClick fired, dispatching action: ${actionName}`);
-          const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-            type: "longclick",
-            timestamp: Date.now(),
-            clientX: event.clientX,
-            clientY: event.clientY
-          };
-          const engine = element.__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          } else {
-            console.warn(`[EventApplicator] No engine attached to element for onLongClick`);
-          }
-          longClickTimer = null;
-        }, LONG_CLICK_THRESHOLD);
-      };
-      const upListener = () => {
-        if (longClickTimer) {
-          clearTimeout(longClickTimer);
-          longClickTimer = null;
-        }
-      };
-      element.__hypenLongClickDownListener = downListener;
-      element.__hypenLongClickUpListener = upListener;
-      element.addEventListener("pointerdown", downListener);
-      element.addEventListener("pointerup", upListener);
-      element.addEventListener("pointerleave", upListener);
-      console.log(`[EventApplicator] onLongClick handler attached for action: ${actionName}`);
-    },
-    onFocus: (element, value) => {
-      console.log(`[EventApplicator] onFocus called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onFocus value must be an action reference, got:`, value);
+    });
+  };
+}
+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);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `keydown:${actionName}:${defaultKey}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    const targetKey = getKeyTarget(element) || defaultKey;
+    const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
+    const listener = (event) => {
+      const keyEvent = event;
+      if (keyEvent.key !== keyToMatch) {
         return;
       }
-      const existingListener = element.__hypenFocusListener;
-      if (existingListener) {
-        element.removeEventListener("focus", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onFocus fired, dispatching action: ${actionName}`);
-        const target = event.target;
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "focus",
-          timestamp: Date.now(),
-          value: target.value ?? undefined
-        };
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onFocus`);
-        }
+      event.preventDefault();
+      const target = event.target;
+      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
+        type: event.type,
+        timestamp: Date.now(),
+        key: keyEvent.key,
+        code: keyEvent.code,
+        value: target.value,
+        input: target.value,
+        ctrlKey: keyEvent.ctrlKey,
+        shiftKey: keyEvent.shiftKey,
+        altKey: keyEvent.altKey,
+        metaKey: keyEvent.metaKey
       };
-      element.__hypenFocusListener = listener;
-      element.addEventListener("focus", listener);
-      console.log(`[EventApplicator] onFocus handler attached for action: ${actionName}`);
-    },
-    onBlur: (element, value) => {
-      console.log(`[EventApplicator] onBlur called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onBlur value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenBlurListener;
-      if (existingListener) {
-        element.removeEventListener("blur", existingListener);
+      const engine = getEngine(element);
+      if (engine) {
+        engine.dispatchAction(actionName, payload);
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onBlur fired, dispatching action: ${actionName}`);
-        const target = event.target;
+    };
+    disposables.add(disposableListener(element, "keydown", listener));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+    });
+  };
+}
+function createLongClickHandler(thresholdMs = 500) {
+  return (element, value) => {
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+    if (!actionName) {
+      console.warn(`[EventApplicator] onLongClick requires an action reference starting with @, got:`, value);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `longclick:${actionName}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    let longClickTimer = null;
+    const downListener = (event) => {
+      const pointerEvent = event;
+      longClickTimer = disposableTimeout(() => {
         const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "blur",
+          type: "longclick",
           timestamp: Date.now(),
-          value: target.value ?? undefined
+          clientX: pointerEvent.clientX,
+          clientY: pointerEvent.clientY
         };
-        const engine = element.__hypenEngine;
+        const engine = getEngine(element);
         if (engine) {
           engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onBlur`);
         }
-      };
-      element.__hypenBlurListener = listener;
-      element.addEventListener("blur", listener);
-      console.log(`[EventApplicator] onBlur handler attached for action: ${actionName}`);
-    },
-    onMouseEnter: (element, value) => {
-      console.log(`[EventApplicator] onMouseEnter called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onMouseEnter value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenMouseEnterListener;
-      if (existingListener) {
-        element.removeEventListener("mouseenter", existingListener);
+        longClickTimer = null;
+      }, thresholdMs);
+    };
+    const cancelListener = () => {
+      if (longClickTimer) {
+        longClickTimer.dispose();
+        longClickTimer = null;
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onMouseEnter fired, dispatching action: ${actionName}`);
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "mouseenter",
-          timestamp: Date.now(),
-          clientX: event.clientX,
-          clientY: event.clientY
-        };
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onMouseEnter`);
-        }
-      };
-      element.__hypenMouseEnterListener = listener;
-      element.addEventListener("mouseenter", listener);
-      console.log(`[EventApplicator] onMouseEnter handler attached for action: ${actionName}`);
+    };
+    disposables.add(disposableListener(element, "pointerdown", downListener));
+    disposables.add(disposableListener(element, "pointerup", cancelListener));
+    disposables.add(disposableListener(element, "pointerleave", cancelListener));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+      cancelListener();
+    });
+  };
+}
+var inputPayload = (event, element) => {
+  const target = element;
+  return {
+    type: event.type,
+    timestamp: Date.now(),
+    value: target.value,
+    input: target.value
+  };
+}, scrollPayload = (_event, element) => {
+  const scrollTop = element.scrollTop;
+  const scrollHeight = element.scrollHeight;
+  const clientHeight = element.clientHeight;
+  const scrollPercentage = scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) * 100 : 0;
+  const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
+  return {
+    type: "scroll",
+    timestamp: Date.now(),
+    scrollTop,
+    scrollLeft: element.scrollLeft,
+    scrollHeight,
+    scrollWidth: element.scrollWidth,
+    clientHeight,
+    clientWidth: element.clientWidth,
+    scrollPercentage: Math.round(scrollPercentage),
+    nearBottom,
+    atBottom: scrollHeight - scrollTop === clientHeight,
+    atTop: scrollTop === 0
+  };
+}, focusPayload = (event, element) => ({
+  type: event.type,
+  timestamp: Date.now(),
+  value: element.value ?? undefined
+}), mousePayload = (event, _element) => {
+  const mouseEvent = event;
+  return {
+    type: event.type,
+    timestamp: Date.now(),
+    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));
     },
-    onMouseLeave: (element, value) => {
-      console.log(`[EventApplicator] onMouseLeave called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onMouseLeave value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenMouseLeaveListener;
-      if (existingListener) {
-        element.removeEventListener("mouseleave", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onMouseLeave fired, dispatching action: ${actionName}`);
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "mouseleave",
-          timestamp: Date.now(),
-          clientX: event.clientX,
-          clientY: event.clientY
-        };
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onMouseLeave`);
-        }
-      };
-      element.__hypenMouseLeaveListener = listener;
-      element.addEventListener("mouseleave", listener);
-      console.log(`[EventApplicator] onMouseLeave handler attached for action: ${actionName}`);
-    }
+    "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 })
   };
 });
 init_events();
@@ -537,4 +420,4 @@ export {
   eventHandlers
 };
 
-//# debugId=86E1367389759DD764756E2164756E21
+//# debugId=436C6B268F7401DA64756E2164756E21