@hypen-space/web 0.2.12 → 0.3.0

package/src/dom/applicators/events.ts

@@ -1,14 +1,55 @@
 /**
  * Event Applicators
- * 
+ *
  * Handles event applicators like onClick, onPress, etc.
+ * Uses a factory pattern to reduce boilerplate and ensure consistency.
  */
 
 import type { ApplicatorHandler } from "./index.js";
+import {
+  getElementDisposables,
+  disposableListener,
+  disposableTimeout,
+  type Disposable,
+} from "@hypen/core";
+import {
+  type IEngine,
+  getEngine,
+  getRegisteredEvents,
+  registerEvent,
+  unregisterEvent,
+  getKeyTarget,
+  setKeyTarget,
+} from "../element-data.js";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface EventHandlerOptions {
+  /** Custom payload extractor for this event type */
+  extractPayload?: (event: Event, element: HTMLElement) => Record<string, unknown>;
+  /** Throttle events to max one per N milliseconds */
+  throttleMs?: number;
+  /** Prevent default behavior */
+  preventDefault?: boolean;
+  /** Use passive listener (for scroll, touch) */
+  passive?: boolean;
+  /** Key to listen for (keyboard events) */
+  key?: string;
+}
+
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
 
-function toPlainObject(value: any): any {
+/**
+ * Convert Map or nested objects to plain objects
+ */
+function toPlainObject(value: unknown): unknown {
   if (value instanceof Map) {
-    const obj: Record<string, any> = {};
+    const obj: Record<string, unknown> = {};
     for (const [key, val] of value.entries()) {
       obj[key] = toPlainObject(val);
     }
@@ -20,7 +61,7 @@ function toPlainObject(value: any): any {
   }
 
   if (value && typeof value === "object") {
-    const obj: Record<string, any> = {};
+    const obj: Record<string, unknown> = {};
     for (const [key, val] of Object.entries(value)) {
       obj[key] = toPlainObject(val);
     }
@@ -30,7 +71,14 @@ function toPlainObject(value: any): any {
   return value;
 }
 
-function extractActionDetails(value: any): { actionName: string | null; payload: Record<string, any> } {
+/**
+ * Extract action name and custom payload from an applicator value
+ */
+function extractActionDetails(value: unknown): {
+  actionName: string | null;
+  payload: Record<string, unknown>;
+} {
+  // String format: "@actions.doSomething" or "@doSomething"
   if (typeof value === "string") {
     if (!value.startsWith("@")) {
       return { actionName: null, payload: {} };
@@ -43,9 +91,10 @@ function extractActionDetails(value: any): { actionName: string | null; payload:
     return { actionName, payload: {} };
   }
 
+  // Object format: { "0": "@actions.doSomething", "customKey": "value" }
   if (value && typeof value === "object") {
-    const plain = toPlainObject(value);
-    const payload: Record<string, any> = {};
+    const plain = toPlainObject(value) as Record<string, unknown>;
+    const payload: Record<string, unknown> = {};
     let actionName: string | null = null;
 
     if (plain && typeof plain === "object") {
@@ -59,7 +108,17 @@ function extractActionDetails(value: any): { actionName: string | null; payload:
 
       for (const [key, val] of Object.entries(plain)) {
         if (key !== "0") {
-          payload[key] = val;
+          // 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;
+          }
         }
       }
     }
@@ -70,620 +129,372 @@ function extractActionDetails(value: any): { actionName: string | null; payload:
   return { actionName: null, payload: {} };
 }
 
-export const eventHandlers: Record<string, ApplicatorHandler> = {
-  onClick: (element, value) => {
-    console.log(`[EventApplicator] onClick called with value:`, value);
+/**
+ * Extract relevant data from a DOM event
+ */
+function extractEventData(event: Event, element: HTMLElement): Record<string, unknown> {
+  const data: Record<string, unknown> = {
+    type: event.type,
+    timestamp: Date.now(),
+  };
 
-    const { actionName, payload: customPayload } = extractActionDetails(value);
+  // Mouse events
+  if (event instanceof MouseEvent) {
+    data.clientX = event.clientX;
+    data.clientY = event.clientY;
+    data.button = event.button;
+  }
 
-    if (!actionName) {
-      console.warn(`[EventApplicator] onClick value must be an action reference, got:`, value);
-      return;
-    }
+  // 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;
+  }
 
-    // Remove existing click listener if any
-    const existingListener = (element as any).__hypenClickListener;
-    if (existingListener) {
-      element.removeEventListener("click", existingListener);
-    }
+  // Input element values
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    data.value = element.value;
+  }
 
-    // Create new click listener
-    const listener = (event: Event) => {
-      console.log(`🔥 [EventApplicator] onClick fired, dispatching action: ${actionName}`);
+  // Select element values
+  if (element instanceof HTMLSelectElement) {
+    data.value = element.value;
+    data.selectedIndex = element.selectedIndex;
+  }
 
-      // Use custom payload if provided, otherwise extract event data
-      const payload = Object.keys(customPayload).length > 0
-        ? { ...customPayload }
-        : extractEventData(event, element);
+  // Form data
+  if (event.type === "submit" && element instanceof HTMLFormElement) {
+    data.formData = new FormData(element);
+  }
 
-      console.log(`[EventApplicator] onClick payload:`, payload);
+  return data;
+}
 
-      // Dispatch action to engine
-      const engine = (element as any).__hypenEngine;
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onClick`);
-      }
-    };
 
-    // Store listener reference and attach to DOM
-    (element as any).__hypenClickListener = listener;
-    element.addEventListener("click", listener);
+/**
+ * Capitalize first letter of a string
+ */
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 
-    console.log(`[EventApplicator] onClick handler attached for action: ${actionName}`);
-  },
+// ============================================================================
+// Event Handler Factory
+// ============================================================================
 
-  onPress: (element, value) => {
-    // For now, treat onPress same as onClick
-    // In the future, this could handle touch events differently
-    eventHandlers.onClick(element, value);
-  },
 
-  onChange: (element, value) => {
-    const { actionName } = extractActionDetails(value);
+/**
+ * Create an event handler applicator with common boilerplate
+ */
+function createEventHandler(
+  eventType: string,
+  options: EventHandlerOptions = {}
+): ApplicatorHandler {
+  return (element: HTMLElement, value: unknown) => {
+    const { actionName, payload: customPayload } = extractActionDetails(value);
 
     if (!actionName) {
-      console.warn(`[EventApplicator] onChange value must be an action reference starting with @, got:`, value);
+      console.warn(
+        `[EventApplicator] ${eventType} requires an action reference starting with @, got:`,
+        value
+      );
       return;
     }
 
-    const existingListener = (element as any).__hypenChangeListener;
-    if (existingListener) {
-      element.removeEventListener("change", existingListener);
-    }
-
-    const listener = (event: Event) => {
-      console.log(`🔥 [EventApplicator] onChange fired, dispatching action: ${actionName}`);
-
-      const payload = extractEventData(event, element);
-
-      const engine = (element as any).__hypenEngine;
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onChange`);
-      }
-    };
-
-    (element as any).__hypenChangeListener = listener;
-    element.addEventListener("change", listener);
+    const disposables = getElementDisposables(element);
 
-    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);
+    // 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);
 
-    const existingListener = (element as any).__hypenSubmitListener;
-    if (existingListener) {
-      element.removeEventListener("submit", existingListener);
-    }
+    // Create throttle state if needed
+    let throttleTimer: Disposable | null = null;
 
+    // Create the event listener
     const listener = (event: Event) => {
-      console.log(`🔥 [EventApplicator] onSubmit fired, dispatching action: ${actionName}`);
-
-      event.preventDefault();
-
-      const payload = extractEventData(event, element);
-
-      const engine = (element as any).__hypenEngine;
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onSubmit`);
+      // Handle throttling
+      if (options.throttleMs && throttleTimer) {
+        return;
       }
-    };
-
-    (element as any).__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 as any).__hypenInputListener;
-    if (existingListener) {
-      element.removeEventListener("input", existingListener);
-    }
-
-    const listener = (event: Event) => {
-      console.log(`🔥 [EventApplicator] onInput fired, dispatching action: ${actionName}`);
+      if (options.throttleMs) {
+        throttleTimer = disposableTimeout(() => {
+          throttleTimer = null;
+        }, options.throttleMs);
+      }
 
-      const target = event.target as HTMLInputElement | HTMLTextAreaElement;
-      const payload = {
-        type: event.type,
-        timestamp: Date.now(),
-        value: target.value,
-        input: target.value,
-      };
+      // Handle preventDefault
+      if (options.preventDefault) {
+        event.preventDefault();
+      }
 
-      console.log(`[EventApplicator] onInput payload:`, payload);
+      // Build payload
+      const payload =
+        Object.keys(customPayload).length > 0
+          ? { ...customPayload }
+          : options.extractPayload
+            ? options.extractPayload(event, element)
+            : extractEventData(event, element);
 
-      const engine = (element as any).__hypenEngine;
+      // Dispatch to engine
+      const engine = getEngine(element);
       if (engine) {
         engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onInput`);
       }
     };
 
-    (element as any).__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);
-    
-    // onKey can receive either:
-    // 1. Just an action: "@action.submit"
-    // 2. Key-specific format from props like onKey.key = "return", onKey.action = "@action.submit"
-    
-    // For now, we'll handle the simple case where onKey receives the action directly
-    // and triggers on Enter key by default
-    const { actionName } = extractActionDetails(value);
-
-    if (actionName) {
-      
-      const existingListener = (element as any).__hypenKeyListener;
-      if (existingListener) {
-        element.removeEventListener("keydown", existingListener);
+    // 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();
       }
-      
-      const listener = (event: KeyboardEvent) => {
-        // Default to Enter key
-        if (event.key === "Enter") {
-          console.log(`🔥 [EventApplicator] onKey fired (Enter), dispatching action: ${actionName}`);
-          
-          event.preventDefault();
-          
-          const target = event.target as HTMLInputElement | HTMLTextAreaElement;
-          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 as any).__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          } else {
-            console.warn(`[EventApplicator] No engine attached to element for onKey`);
-          }
-        }
-      };
-      
-      (element as any).__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}`);
-    }
-  },
-
-  // Handle key-specific applicator: onKey.key for specifying which key
-  "onKey.key": (element, keyValue) => {
-    console.log(`[EventApplicator] onKey.key called with value:`, keyValue);
-    // Store the key to check in the listener
-    (element as any).__hypenKeyTarget = keyValue;
-  },
-
-  // Handle action for specific key: onKey.action
-  "onKey.action": (element, value) => {
-    console.log(`[EventApplicator] onKey.action called with value:`, value);
-    
-    const { actionName } = extractActionDetails(value);
-
-    if (actionName) {
-      
-      const targetKey = (element as any).__hypenKeyTarget || "Enter";
-      
-      const existingListener = (element as any).__hypenKeyListener;
-      if (existingListener) {
-        element.removeEventListener("keydown", existingListener);
-      }
-      
-      const listener = (event: KeyboardEvent) => {
-        const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
-        
-        if (event.key === keyToMatch) {
-          console.log(`🔥 [EventApplicator] onKey fired (${keyToMatch}), dispatching action: ${actionName}`);
-          
-          event.preventDefault();
-          
-          const target = event.target as HTMLInputElement | HTMLTextAreaElement;
-          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 as any).__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          }
-        }
-      };
-      
-      (element as any).__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) {
-
-      // Remove existing scroll listener if any
-      const existingListener = (element as any).__hypenScrollListener;
-      if (existingListener) {
-        element.removeEventListener("scroll", existingListener);
-      }
-
-      // Create new scroll listener with throttling to avoid too many events
-      let throttleTimer: number | null = null;
-      const listener = (event: Event) => {
-        if (throttleTimer) return;
-
-        throttleTimer = setTimeout(() => {
-          throttleTimer = null;
-        }, 100) as unknown as number; // Throttle to max 10 events/second
-
-        const target = event.target as HTMLElement;
-        const scrollTop = target.scrollTop;
-        const scrollHeight = target.scrollHeight;
-        const clientHeight = target.clientHeight;
-        const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
-
-        // Calculate if near bottom (within 100px or 90% scrolled)
-        const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
-
-        console.log(`🔥 [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 as any).__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onScroll`);
-        }
-      };
-
-      (element as any).__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);
+    });
+  };
+}
 
+/**
+ * Create a keyboard event handler that filters by key
+ */
+function createKeyHandler(defaultKey: string = "Enter"): ApplicatorHandler {
+  return (element: HTMLElement, value: unknown) => {
     const { actionName, payload: customPayload } = extractActionDetails(value);
 
     if (!actionName) {
-      console.warn(`[EventApplicator] onLongClick value must be an action reference, got:`, value);
+      console.warn(
+        `[EventApplicator] onKey requires an action reference starting with @, got:`,
+        value
+      );
       return;
     }
 
-    // Remove existing long click listeners if any
-    const existingDownListener = (element as any).__hypenLongClickDownListener;
-    const existingUpListener = (element as any).__hypenLongClickUpListener;
-    if (existingDownListener) {
-      element.removeEventListener("pointerdown", existingDownListener);
-    }
-    if (existingUpListener) {
-      element.removeEventListener("pointerup", existingUpListener);
-      element.removeEventListener("pointerleave", existingUpListener);
+    const disposables = getElementDisposables(element);
+
+    const eventKey = `keydown:${actionName}:${defaultKey}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
     }
+    registerEvent(element, eventKey);
 
-    // Long click implementation using pointer events with 500ms threshold
-    let longClickTimer: ReturnType<typeof setTimeout> | null = null;
-    const LONG_CLICK_THRESHOLD = 500; // 500ms
+    // Get target key from element data or use default
+    const targetKey = getKeyTarget(element) || defaultKey;
+    const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
 
-    const downListener = (event: PointerEvent) => {
-      longClickTimer = setTimeout(() => {
-        console.log(`🔥 [EventApplicator] onLongClick fired, dispatching action: ${actionName}`);
+    const listener = (event: Event) => {
+      const keyEvent = event as KeyboardEvent;
+      if (keyEvent.key !== keyToMatch) {
+        return;
+      }
+
+      event.preventDefault();
 
-        const payload = Object.keys(customPayload).length > 0
+      const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+      const payload =
+        Object.keys(customPayload).length > 0
           ? { ...customPayload }
           : {
-              type: "longclick",
+              type: event.type,
               timestamp: Date.now(),
-              clientX: event.clientX,
-              clientY: event.clientY,
+              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 = (element as any).__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 as any).__hypenLongClickDownListener = downListener;
-    (element as any).__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);
-      return;
-    }
-
-    // Remove existing focus listener if any
-    const existingListener = (element as any).__hypenFocusListener;
-    if (existingListener) {
-      element.removeEventListener("focus", existingListener);
-    }
-
-    const listener = (event: FocusEvent) => {
-      console.log(`🔥 [EventApplicator] onFocus fired, dispatching action: ${actionName}`);
-
-      const target = event.target as HTMLElement;
-      const payload = Object.keys(customPayload).length > 0
-        ? { ...customPayload }
-        : {
-            type: "focus",
-            timestamp: Date.now(),
-            value: (target as HTMLInputElement).value ?? undefined,
-          };
-
-      const engine = (element as any).__hypenEngine;
+      const engine = getEngine(element);
       if (engine) {
         engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onFocus`);
       }
     };
 
-    (element as any).__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);
+    disposables.add(disposableListener(element, "keydown", listener));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+    });
+  };
+}
 
+/**
+ * Create a long-click/long-press handler
+ */
+function createLongClickHandler(thresholdMs: number = 500): ApplicatorHandler {
+  return (element: HTMLElement, value: unknown) => {
     const { actionName, payload: customPayload } = extractActionDetails(value);
 
     if (!actionName) {
-      console.warn(`[EventApplicator] onBlur value must be an action reference, got:`, value);
+      console.warn(
+        `[EventApplicator] onLongClick requires an action reference starting with @, got:`,
+        value
+      );
       return;
     }
 
-    // Remove existing blur listener if any
-    const existingListener = (element as any).__hypenBlurListener;
-    if (existingListener) {
-      element.removeEventListener("blur", existingListener);
-    }
-
-    const listener = (event: FocusEvent) => {
-      console.log(`🔥 [EventApplicator] onBlur fired, dispatching action: ${actionName}`);
-
-      const target = event.target as HTMLElement;
-      const payload = Object.keys(customPayload).length > 0
-        ? { ...customPayload }
-        : {
-            type: "blur",
-            timestamp: Date.now(),
-            value: (target as HTMLInputElement).value ?? undefined,
-          };
+    const disposables = getElementDisposables(element);
 
-      const engine = (element as any).__hypenEngine;
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onBlur`);
-      }
-    };
-
-    (element as any).__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);
+    const eventKey = `longclick:${actionName}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
       return;
     }
+    registerEvent(element, eventKey);
 
-    // Remove existing listener if any
-    const existingListener = (element as any).__hypenMouseEnterListener;
-    if (existingListener) {
-      element.removeEventListener("mouseenter", existingListener);
-    }
-
-    const listener = (event: MouseEvent) => {
-      console.log(`🔥 [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 as any).__hypenEngine;
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onMouseEnter`);
-      }
-    };
-
-    (element as any).__hypenMouseEnterListener = listener;
-    element.addEventListener("mouseenter", listener);
+    let longClickTimer: Disposable | null = null;
 
-    console.log(`[EventApplicator] onMouseEnter handler attached for action: ${actionName}`);
-  },
+    const downListener = (event: Event) => {
+      const pointerEvent = event as PointerEvent;
 
-  onMouseLeave: (element, value) => {
-    console.log(`[EventApplicator] onMouseLeave called with value:`, value);
+      longClickTimer = disposableTimeout(() => {
+        const payload =
+          Object.keys(customPayload).length > 0
+            ? { ...customPayload }
+            : {
+                type: "longclick",
+                timestamp: Date.now(),
+                clientX: pointerEvent.clientX,
+                clientY: pointerEvent.clientY,
+              };
 
-    const { actionName, payload: customPayload } = extractActionDetails(value);
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction(actionName, payload);
+        }
 
-    if (!actionName) {
-      console.warn(`[EventApplicator] onMouseLeave value must be an action reference, got:`, value);
-      return;
-    }
+        longClickTimer = null;
+      }, thresholdMs);
+    };
 
-    // Remove existing listener if any
-    const existingListener = (element as any).__hypenMouseLeaveListener;
-    if (existingListener) {
-      element.removeEventListener("mouseleave", existingListener);
-    }
+    const cancelListener = () => {
+      if (longClickTimer) {
+        longClickTimer.dispose();
+        longClickTimer = null;
+      }
+    };
 
-    const listener = (event: MouseEvent) => {
-      console.log(`🔥 [EventApplicator] onMouseLeave fired, dispatching 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();
+    });
+  };
+}
 
-      const payload = Object.keys(customPayload).length > 0
-        ? { ...customPayload }
-        : {
-            type: "mouseleave",
-            timestamp: Date.now(),
-            clientX: event.clientX,
-            clientY: event.clientY,
-          };
+// ============================================================================
+// Payload Extractors
+// ============================================================================
 
-      const engine = (element as any).__hypenEngine;
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      } else {
-        console.warn(`[EventApplicator] No engine attached to element for onMouseLeave`);
-      }
-    };
+const inputPayload = (event: Event, element: HTMLElement): Record<string, unknown> => {
+  const target = element as HTMLInputElement | HTMLTextAreaElement;
+  return {
+    type: event.type,
+    timestamp: Date.now(),
+    value: target.value,
+    input: target.value,
+  };
+};
 
-    (element as any).__hypenMouseLeaveListener = listener;
-    element.addEventListener("mouseleave", listener);
+const scrollPayload = (_event: Event, element: HTMLElement): Record<string, unknown> => {
+  const scrollTop = element.scrollTop;
+  const scrollHeight = element.scrollHeight;
+  const clientHeight = element.clientHeight;
+  const scrollPercentage =
+    scrollHeight - clientHeight > 0
+      ? (scrollTop / (scrollHeight - clientHeight)) * 100
+      : 0;
 
-    console.log(`[EventApplicator] onMouseLeave handler attached for action: ${actionName}`);
-  },
+  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,
+  };
 };
 
-/**
- * Extract relevant data from an event
- */
-function extractEventData(event: Event, element: HTMLElement): any {
-  const data: any = {
+const focusPayload = (event: Event, element: HTMLElement): Record<string, unknown> => ({
+  type: event.type,
+  timestamp: Date.now(),
+  value: (element as HTMLInputElement).value ?? undefined,
+});
+
+const mousePayload = (event: Event, _element: HTMLElement): Record<string, unknown> => {
+  const mouseEvent = event as MouseEvent;
+  return {
     type: event.type,
     timestamp: Date.now(),
+    clientX: mouseEvent.clientX,
+    clientY: mouseEvent.clientY,
   };
+};
 
-  // Mouse events
-  if (event instanceof MouseEvent) {
-    data.clientX = event.clientX;
-    data.clientY = event.clientY;
-    data.button = event.button;
-  }
+// ============================================================================
+// Event Handlers Export
+// ============================================================================
+
+export const eventHandlers: Record<string, ApplicatorHandler> = {
+  // 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
-  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;
-  }
+  onKey: createKeyHandler("Enter"),
+  "onKey.key": (element: HTMLElement, value: unknown) => {
+    // Store the target key for the action handler to use
+    setKeyTarget(element, String(value));
+  },
+  "onKey.action": createKeyHandler("Enter"),
 
-  // Input events (for form elements)
-  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-    data.value = element.value;
-  }
+  // Scroll (throttled)
+  onScroll: createEventHandler("scroll", {
+    throttleMs: 100,
+    passive: true,
+    extractPayload: scrollPayload,
+  }),
 
-  // Select events
-  if (element instanceof HTMLSelectElement) {
-    data.value = element.value;
-    data.selectedIndex = element.selectedIndex;
-  }
+  // Long click/press
+  onLongClick: createLongClickHandler(500),
 
-  // Form events
-  if (event.type === "submit" && element instanceof HTMLFormElement) {
-    data.formData = new FormData(element);
-  }
+  // Focus events
+  onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
+  onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
 
-  return data;
-}
+  // Mouse hover events
+  onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
+  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
+};