@hypen-space/web 0.4.36 → 0.4.37

package/dist/dom/applicators/events.js

@@ -1,484 +1,447 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/dom/element-data.ts
-import { getElementDisposables } from "@hypen-space/core/disposable";
-var elementDataMap = new WeakMap;
-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);
-}
-var HYPEN_ENGINE_SYMBOL = Symbol.for("hypen.engine");
-var REGISTERED_EVENTS_SYMBOL = Symbol.for("hypen.registeredEvents");
-var KEY_TARGET_SYMBOL = Symbol.for("hypen.keyTarget");
-function getLegacyEngine(element) {
-  const engine = getEngine(element);
-  if (engine)
-    return engine;
-  return element[HYPEN_ENGINE_SYMBOL] ?? element.__hypenEngine;
-}
-function setLegacyEngine(element, engine) {
-  setEngine(element, engine);
-  element.__hypenEngine = engine;
-}
-
-// src/dom/applicators/events.ts
-import {
-  getElementDisposables as getElementDisposables2,
-  disposableListener,
-  disposableTimeout
-} from "@hypen-space/core/disposable";
+/**
+ * Event Applicators
+ *
+ * Handles event applicators like onClick, onPress, etc.
+ * Uses a factory pattern to reduce boilerplate and ensure consistency.
+ */
+import { getElementDisposables, disposableListener, disposableTimeout, } from "@hypen-space/core/disposable";
 import { frameworkLoggers } from "@hypen-space/core/logger";
-var log = frameworkLoggers.events;
+import { getEngine, getRegisteredEvents, registerEvent, unregisterEvent, getKeyTarget, setKeyTarget, } from "../element-data.js";
+const log = frameworkLoggers.events;
+// ============================================================================
+// Utility Functions
+// ============================================================================
+/**
+ * Convert Map or nested objects to plain objects
+ */
 function toPlainObject(value) {
-  if (value instanceof Map) {
-    const obj = {};
-    for (const [key, val] of value.entries()) {
-      obj[key] = toPlainObject(val);
+    if (value instanceof Map) {
+        const obj = {};
+        for (const [key, val] of value.entries()) {
+            obj[key] = toPlainObject(val);
+        }
+        return obj;
     }
-    return obj;
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => toPlainObject(item));
-  }
-  if (value && typeof value === "object") {
-    const obj = {};
-    for (const [key, val] of Object.entries(value)) {
-      obj[key] = toPlainObject(val);
+    if (Array.isArray(value)) {
+        return value.map((item) => toPlainObject(item));
     }
-    return obj;
-  }
-  return value;
+    if (value && typeof value === "object") {
+        const obj = {};
+        for (const [key, val] of Object.entries(value)) {
+            obj[key] = toPlainObject(val);
+        }
+        return obj;
+    }
+    return value;
 }
+/**
+ * Extract action name and custom payload from an applicator value
+ */
 function extractActionDetails(value) {
-  if (typeof value === "string") {
-    if (!value.startsWith("@")) {
-      return { actionName: null, payload: {} };
-    }
-    let actionName = value.substring(1);
-    if (actionName.startsWith("actions.")) {
-      actionName = actionName.substring(8);
-    }
-    return { actionName, payload: {} };
-  }
-  if (value && typeof value === "object") {
-    const plain = toPlainObject(value);
-    const payload = {};
-    let actionName = null;
-    if (plain && typeof plain === "object") {
-      const actionValue = plain["0"];
-      if (typeof actionValue === "string" && actionValue.startsWith("@")) {
-        actionName = actionValue.substring(1);
+    // String format: "@actions.doSomething" or "@doSomething"
+    if (typeof value === "string") {
+        if (!value.startsWith("@")) {
+            return { actionName: null, payload: {} };
+        }
+        let actionName = value.substring(1);
         if (actionName.startsWith("actions.")) {
-          actionName = actionName.substring(8);
+            actionName = actionName.substring(8);
         }
-      }
-      for (const [key, val] of Object.entries(plain)) {
-        if (key !== "0") {
-          if (/^\d+$/.test(key) && val && typeof val === "object" && !Array.isArray(val)) {
-            for (const [innerKey, innerVal] of Object.entries(val)) {
-              payload[innerKey] = innerVal;
+        return { actionName, payload: {} };
+    }
+    // Object format: { "0": "@actions.doSomething", "customKey": "value" }
+    if (value && typeof value === "object") {
+        const plain = toPlainObject(value);
+        const payload = {};
+        let actionName = null;
+        if (plain && typeof plain === "object") {
+            const actionValue = plain["0"];
+            if (typeof actionValue === "string" && actionValue.startsWith("@")) {
+                actionName = actionValue.substring(1);
+                if (actionName.startsWith("actions.")) {
+                    actionName = actionName.substring(8);
+                }
+            }
+            for (const [key, val] of Object.entries(plain)) {
+                if (key !== "0") {
+                    // If the key is numeric (like "1", "2") and the value is an object,
+                    // merge the object's keys into the payload directly.
+                    // This handles: .onClick("@actions.foo", { id: "123" })
+                    // where the second positional arg becomes "1": { id: "123" }
+                    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;
+                    }
+                }
             }
-          } else {
-            payload[key] = val;
-          }
         }
-      }
+        return { actionName, payload };
     }
-    return { actionName, payload };
-  }
-  return { actionName: null, payload: {} };
+    return { actionName: null, payload: {} };
 }
+/**
+ * Extract relevant data from a DOM event
+ */
 function 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;
-}
-function createEventHandler(eventType, options = {}) {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      log.warn(`${eventType} requires an action reference starting with @, got:`, value);
-      return;
+    const data = {
+        type: event.type,
+        timestamp: Date.now(),
+    };
+    // Mouse events
+    if (event instanceof MouseEvent) {
+        data.clientX = event.clientX;
+        data.clientY = event.clientY;
+        data.button = event.button;
+    }
+    // Keyboard events
+    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;
     }
-    const disposables = getElementDisposables2(element);
-    const eventKey = `${eventType}:${actionName}`;
-    if (getRegisteredEvents(element).has(eventKey)) {
-      return;
+    // Input element values
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+        data.value = element.value;
     }
-    registerEvent(element, eventKey);
-    let throttleTimer = null;
-    const listener = (event) => {
-      if (options.throttleMs && throttleTimer) {
-        return;
-      }
-      if (options.throttleMs) {
-        throttleTimer = disposableTimeout(() => {
-          throttleTimer = null;
-        }, options.throttleMs);
-      }
-      if (options.preventDefault) {
-        event.preventDefault();
-      }
-      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : options.extractPayload ? options.extractPayload(event, element) : extractEventData(event, element);
-      const engine = getEngine(element);
-      if (engine) {
-        try {
-          engine.dispatchAction(actionName, payload);
-        } catch (err) {
-          log.error(`Error dispatching action "${actionName}":`, err);
+    // Select element values
+    if (element instanceof HTMLSelectElement) {
+        data.value = element.value;
+        data.selectedIndex = element.selectedIndex;
+    }
+    // Form data
+    if (event.type === "submit" && element instanceof HTMLFormElement) {
+        data.formData = new FormData(element);
+    }
+    return data;
+}
+/**
+ * Capitalize first letter of a string
+ */
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+// ============================================================================
+// Event Handler Factory
+// ============================================================================
+/**
+ * Create an event handler applicator with common boilerplate
+ */
+function createEventHandler(eventType, options = {}) {
+    return (element, value) => {
+        const { actionName, payload: customPayload } = extractActionDetails(value);
+        if (!actionName) {
+            log.warn(`${eventType} requires an action reference starting with @, got:`, value);
+            return;
+        }
+        const disposables = getElementDisposables(element);
+        // Track that we've registered this event type
+        // The disposable stack handles cleanup automatically
+        const eventKey = `${eventType}:${actionName}`;
+        if (getRegisteredEvents(element).has(eventKey)) {
+            // Already registered - skip to avoid duplicates
+            // This can happen during re-renders
+            return;
         }
-      }
+        registerEvent(element, eventKey);
+        // Create throttle state if needed
+        let throttleTimer = null;
+        // Create the event listener
+        const listener = (event) => {
+            // Handle throttling
+            if (options.throttleMs && throttleTimer) {
+                return;
+            }
+            if (options.throttleMs) {
+                throttleTimer = disposableTimeout(() => {
+                    throttleTimer = null;
+                }, options.throttleMs);
+            }
+            // Handle preventDefault
+            if (options.preventDefault) {
+                event.preventDefault();
+            }
+            // Build payload
+            const payload = Object.keys(customPayload).length > 0
+                ? { ...customPayload }
+                : options.extractPayload
+                    ? options.extractPayload(event, element)
+                    : extractEventData(event, element);
+            // Dispatch to engine, catching any async rejections
+            const engine = getEngine(element);
+            if (engine) {
+                try {
+                    engine.dispatchAction(actionName, payload);
+                }
+                catch (err) {
+                    log.error(`Error dispatching action "${actionName}":`, err);
+                }
+            }
+        };
+        // Register the listener using disposable pattern
+        disposables.add(disposableListener(element, eventType, listener, {
+            passive: options.passive,
+        }));
+        // Clean up registered events tracking on dispose
+        disposables.addCallback(() => {
+            unregisterEvent(element, eventKey);
+            if (throttleTimer) {
+                throttleTimer.dispose();
+            }
+        });
     };
-    disposables.add(disposableListener(element, eventType, listener, {
-      passive: options.passive
-    }));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-      if (throttleTimer) {
-        throttleTimer.dispose();
-      }
-    });
-  };
 }
+/**
+ * Create a keyboard event handler that filters by key
+ */
 function createKeyHandler(defaultKey = "Enter") {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      log.warn(`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;
-      }
-      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
-      };
-      const engine = getEngine(element);
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      }
+    return (element, value) => {
+        const { actionName, payload: customPayload } = extractActionDetails(value);
+        if (!actionName) {
+            log.warn(`onKey requires an action reference starting with @, got:`, value);
+            return;
+        }
+        const disposables = getElementDisposables(element);
+        const eventKey = `keydown:${actionName}:${defaultKey}`;
+        if (getRegisteredEvents(element).has(eventKey)) {
+            return;
+        }
+        registerEvent(element, eventKey);
+        // Get target key from element data or use default
+        const targetKey = getKeyTarget(element) || defaultKey;
+        const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
+        const listener = (event) => {
+            const keyEvent = event;
+            if (keyEvent.key !== keyToMatch) {
+                return;
+            }
+            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,
+                };
+            const engine = getEngine(element);
+            if (engine) {
+                engine.dispatchAction(actionName, payload);
+            }
+        };
+        disposables.add(disposableListener(element, "keydown", listener));
+        disposables.addCallback(() => {
+            unregisterEvent(element, eventKey);
+        });
     };
-    disposables.add(disposableListener(element, "keydown", listener));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-    });
-  };
 }
+/**
+ * Create a long-click/long-press handler
+ */
 function createLongClickHandler(thresholdMs = 500) {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      log.warn(`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: "longclick",
-          timestamp: Date.now(),
-          clientX: pointerEvent.clientX,
-          clientY: pointerEvent.clientY
-        };
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
+    return (element, value) => {
+        const { actionName, payload: customPayload } = extractActionDetails(value);
+        if (!actionName) {
+            log.warn(`onLongClick requires an action reference starting with @, got:`, value);
+            return;
         }
-        longClickTimer = null;
-      }, thresholdMs);
-    };
-    const cancelListener = () => {
-      if (longClickTimer) {
-        longClickTimer.dispose();
-        longClickTimer = null;
-      }
+        const disposables = getElementDisposables(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: "longclick",
+                        timestamp: Date.now(),
+                        clientX: pointerEvent.clientX,
+                        clientY: pointerEvent.clientY,
+                    };
+                const engine = getEngine(element);
+                if (engine) {
+                    engine.dispatchAction(actionName, payload);
+                }
+                longClickTimer = null;
+            }, thresholdMs);
+        };
+        const cancelListener = () => {
+            if (longClickTimer) {
+                longClickTimer.dispose();
+                longClickTimer = null;
+            }
+        };
+        disposables.add(disposableListener(element, "pointerdown", downListener));
+        disposables.add(disposableListener(element, "pointerup", cancelListener));
+        disposables.add(disposableListener(element, "pointerleave", cancelListener));
+        disposables.addCallback(() => {
+            unregisterEvent(element, eventKey);
+            cancelListener();
+        });
     };
-    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
-  };
+// ============================================================================
+// Payload Extractors
+// ============================================================================
+const inputPayload = (event, element) => {
+    const target = element;
+    return {
+        type: event.type,
+        timestamp: Date.now(),
+        value: target.value,
+        input: target.value,
+    };
 };
-var 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
-  };
+const 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,
+    };
 };
-var focusPayload = (event, element) => ({
-  type: event.type,
-  timestamp: Date.now(),
-  value: element.value ?? undefined
-});
-var mousePayload = (event, _element) => {
-  const mouseEvent = event;
-  return {
+const focusPayload = (event, element) => ({
     type: event.type,
     timestamp: Date.now(),
-    clientX: mouseEvent.clientX,
-    clientY: mouseEvent.clientY
-  };
+    value: element.value ?? undefined,
+});
+const mousePayload = (event, _element) => {
+    const mouseEvent = event;
+    return {
+        type: event.type,
+        timestamp: Date.now(),
+        clientX: mouseEvent.clientX,
+        clientY: mouseEvent.clientY,
+    };
 };
-var eventHandlers = {
-  onClick: createEventHandler("click"),
-  onPress: createEventHandler("click"),
-  onChange: createEventHandler("change"),
-  onSubmit: createEventHandler("submit", { preventDefault: true }),
-  onInput: createEventHandler("input", { extractPayload: inputPayload }),
-  onKey: createKeyHandler("Enter"),
-  "onKey.key": (element, value) => {
-    setKeyTarget(element, String(value));
-  },
-  "onKey.action": createKeyHandler("Enter"),
-  onScroll: createEventHandler("scroll", {
-    throttleMs: 100,
-    passive: true,
-    extractPayload: scrollPayload
-  }),
-  onLongClick: createLongClickHandler(500),
-  onLongPress: createLongClickHandler(500),
-  onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
-  onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
-  onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
-  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
-  bind: (element, value) => {
-    const bindPath = typeof value === "string" ? value : null;
-    if (!bindPath)
-      return;
-    const disposables = getElementDisposables2(element);
-    const eventKey = `bind:${bindPath}`;
-    if (getRegisteredEvents(element).has(eventKey))
-      return;
-    registerEvent(element, eventKey);
-    const hypenType = element.dataset?.hypenType;
-    if (hypenType === "checkbox" || hypenType === "switch") {
-      const input = element.querySelector('input[type="checkbox"]');
-      if (!input)
-        return;
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: input.checked
-          });
+// ============================================================================
+// Event Handlers Export
+// ============================================================================
+export const eventHandlers = {
+    // Basic click/press
+    onClick: createEventHandler("click"),
+    onPress: createEventHandler("click"), // Alias for mobile-style naming
+    // Form events
+    onChange: createEventHandler("change"),
+    onSubmit: createEventHandler("submit", { preventDefault: true }),
+    onInput: createEventHandler("input", { extractPayload: inputPayload }),
+    // Keyboard events
+    onKey: createKeyHandler("Enter"),
+    "onKey.key": (element, value) => {
+        // Store the target key for the action handler to use
+        setKeyTarget(element, String(value));
+    },
+    "onKey.action": createKeyHandler("Enter"),
+    // Scroll (throttled)
+    onScroll: createEventHandler("scroll", {
+        throttleMs: 100,
+        passive: true,
+        extractPayload: scrollPayload,
+    }),
+    // Long click/press
+    onLongClick: createLongClickHandler(500),
+    onLongPress: createLongClickHandler(500), // Alias for mobile-style naming
+    // Focus events
+    onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
+    onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
+    // Mouse hover events
+    onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
+    onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
+    // Two-way binding for .bind(@state.x)
+    bind: ((element, value) => {
+        const bindPath = typeof value === "string" ? value : null;
+        if (!bindPath)
+            return;
+        const disposables = getElementDisposables(element);
+        const eventKey = `bind:${bindPath}`;
+        if (getRegisteredEvents(element).has(eventKey))
+            return;
+        registerEvent(element, eventKey);
+        // Determine the target element, event type, and value extractor based on component type
+        const hypenType = element.dataset?.hypenType;
+        if (hypenType === "checkbox" || hypenType === "switch") {
+            // Checkbox/Switch: wrapper <label> containing <input type="checkbox">
+            const input = element.querySelector('input[type="checkbox"]');
+            if (!input)
+                return;
+            const listener = () => {
+                const engine = getEngine(element);
+                if (engine) {
+                    engine.dispatchAction("__hypen_bind", {
+                        path: bindPath,
+                        value: input.checked,
+                    });
+                }
+            };
+            disposables.add(disposableListener(input, "change", listener, { passive: true }));
         }
-      };
-      disposables.add(disposableListener(input, "change", listener, { passive: true }));
-    } else if (element instanceof HTMLSelectElement) {
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: element.value
-          });
+        else if (element instanceof HTMLSelectElement) {
+            // Select: listen to change event, read .value
+            const listener = () => {
+                const engine = getEngine(element);
+                if (engine) {
+                    engine.dispatchAction("__hypen_bind", {
+                        path: bindPath,
+                        value: element.value,
+                    });
+                }
+            };
+            disposables.add(disposableListener(element, "change", listener, { passive: true }));
         }
-      };
-      disposables.add(disposableListener(element, "change", listener, { passive: true }));
-    } else if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: element.value
-          });
+        else if (element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement) {
+            // Input/Textarea: listen to input event, read .value
+            const listener = () => {
+                const engine = getEngine(element);
+                if (engine) {
+                    engine.dispatchAction("__hypen_bind", {
+                        path: bindPath,
+                        value: element.value,
+                    });
+                }
+            };
+            disposables.add(disposableListener(element, "input", listener, { passive: true }));
         }
-      };
-      disposables.add(disposableListener(element, "input", listener, { passive: true }));
-    } else {
-      log.warn(`.bind() is not supported on element type "${element.dataset?.hypenType || element.tagName}". ` + `Supported types: input, textarea, checkbox, switch, select.`);
-      unregisterEvent(element, eventKey);
-      return;
-    }
-    disposables.addCallback(() => unregisterEvent(element, eventKey));
-  }
-};
-export {
-  eventHandlers
+        else {
+            log.warn(`.bind() is not supported on element type "${element.dataset?.hypenType || element.tagName}". ` +
+                `Supported types: input, textarea, checkbox, switch, select.`);
+            unregisterEvent(element, eventKey);
+            return;
+        }
+        disposables.addCallback(() => unregisterEvent(element, eventKey));
+    }),
 };
-
-//# debugId=7925A87B5F9F454264756E2164756E21
+//# sourceMappingURL=events.js.map