@hypen-space/web 0.2.0

package/src/dom/applicators/events.ts

@@ -0,0 +1,689 @@
+/**
+ * Event Applicators
+ * 
+ * Handles event applicators like onClick, onPress, etc.
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+function toPlainObject(value: any): any {
+  if (value instanceof Map) {
+    const obj: Record<string, any> = {};
+    for (const [key, val] of value.entries()) {
+      obj[key] = toPlainObject(val);
+    }
+    return obj;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => toPlainObject(item));
+  }
+
+  if (value && typeof value === "object") {
+    const obj: Record<string, any> = {};
+    for (const [key, val] of Object.entries(value)) {
+      obj[key] = toPlainObject(val);
+    }
+    return obj;
+  }
+
+  return value;
+}
+
+function extractActionDetails(value: any): { actionName: string | null; payload: Record<string, any> } {
+  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: Record<string, any> = {};
+    let actionName: string | null = 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") {
+          payload[key] = val;
+        }
+      }
+    }
+
+    return { actionName, payload };
+  }
+
+  return { actionName: null, payload: {} };
+}
+
+export const eventHandlers: Record<string, ApplicatorHandler> = {
+  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;
+    }
+
+    // Remove existing click listener if any
+    const existingListener = (element as any).__hypenClickListener;
+    if (existingListener) {
+      element.removeEventListener("click", existingListener);
+    }
+
+    // Create new click listener
+    const listener = (event: Event) => {
+      console.log(`🔥 [EventApplicator] onClick fired, dispatching action: ${actionName}`);
+
+      // Use custom payload if provided, otherwise extract event data
+      const payload = Object.keys(customPayload).length > 0
+        ? { ...customPayload }
+        : extractEventData(event, element);
+
+      console.log(`[EventApplicator] onClick payload:`, payload);
+
+      // 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);
+
+    console.log(`[EventApplicator] onClick handler attached for action: ${actionName}`);
+  },
+
+  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);
+
+    if (!actionName) {
+      console.warn(`[EventApplicator] onChange value must be 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);
+
+    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);
+      return;
+    }
+
+    const existingListener = (element as any).__hypenSubmitListener;
+    if (existingListener) {
+      element.removeEventListener("submit", existingListener);
+    }
+
+    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`);
+      }
+    };
+
+    (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}`);
+
+      const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+      const payload = {
+        type: event.type,
+        timestamp: Date.now(),
+        value: target.value,
+        input: target.value,
+      };
+
+      console.log(`[EventApplicator] onInput payload:`, payload);
+
+      const engine = (element as any).__hypenEngine;
+      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);
+      }
+      
+      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);
+
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+
+    if (!actionName) {
+      console.warn(`[EventApplicator] onLongClick value must be an action reference, 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);
+    }
+
+    // Long click implementation using pointer events with 500ms threshold
+    let longClickTimer: ReturnType<typeof setTimeout> | null = null;
+    const LONG_CLICK_THRESHOLD = 500; // 500ms
+
+    const downListener = (event: PointerEvent) => {
+      longClickTimer = setTimeout(() => {
+        console.log(`🔥 [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 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;
+      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);
+
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+
+    if (!actionName) {
+      console.warn(`[EventApplicator] onBlur value must be an action reference, 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 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);
+      return;
+    }
+
+    // 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);
+
+    console.log(`[EventApplicator] onMouseEnter handler attached for action: ${actionName}`);
+  },
+
+  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;
+    }
+
+    // Remove existing listener if any
+    const existingListener = (element as any).__hypenMouseLeaveListener;
+    if (existingListener) {
+      element.removeEventListener("mouseleave", existingListener);
+    }
+
+    const listener = (event: MouseEvent) => {
+      console.log(`🔥 [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 as any).__hypenEngine;
+      if (engine) {
+        engine.dispatchAction(actionName, payload);
+      } else {
+        console.warn(`[EventApplicator] No engine attached to element for onMouseLeave`);
+      }
+    };
+
+    (element as any).__hypenMouseLeaveListener = listener;
+    element.addEventListener("mouseleave", listener);
+
+    console.log(`[EventApplicator] onMouseLeave handler attached for action: ${actionName}`);
+  },
+
+};
+
+/**
+ * Extract relevant data from an event
+ */
+function extractEventData(event: Event, element: HTMLElement): any {
+  const data: any = {
+    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;
+  }
+
+  // Input events (for form elements)
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    data.value = element.value;
+  }
+
+  // Select events
+  if (element instanceof HTMLSelectElement) {
+    data.value = element.value;
+    data.selectedIndex = element.selectedIndex;
+  }
+
+  // Form events
+  if (event.type === "submit" && element instanceof HTMLFormElement) {
+    data.formData = new FormData(element);
+  }
+
+  return data;
+}

package/src/dom/applicators/font.ts

@@ -0,0 +1,27 @@
+/**
+ * Font Applicators
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const fontHandlers: Record<string, ApplicatorHandler> = {
+  fontSize: (el, value) => {
+    el.style.fontSize = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  fontWeight: (el, value) => {
+    el.style.fontWeight = String(value);
+  },
+
+  fontFamily: (el, value) => {
+    el.style.fontFamily = String(value);
+  },
+
+  textAlign: (el, value) => {
+    el.style.textAlign = String(value);
+  },
+
+  lineHeight: (el, value) => {
+    el.style.lineHeight = String(value);
+  },
+};