@hypen-space/web 0.2.12 → 0.3.1

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

@@ -170,43 +170,108 @@ var exports_size = {};
 __export(exports_size, {
   sizeHandlers: () => sizeHandlers
 });
+function parseSizeValue(value) {
+  if (value === null || value === undefined)
+    return null;
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  const str = String(value).trim().toLowerCase();
+  switch (str) {
+    case "fill":
+    case "match_parent":
+      return "100%";
+    case "wrap":
+    case "wrap_content":
+    case "auto":
+      return "auto";
+    case "infinity":
+    case "inf":
+    case "max":
+      return "100%";
+  }
+  const match = str.match(/^(-?[\d.]+)\s*(px|dp|pt|%|vw|vh|vmin|vmax|em|rem)?$/);
+  if (!match) {
+    return str;
+  }
+  const num = parseFloat(match[1]);
+  const unit = match[2] || "px";
+  switch (unit) {
+    case "px":
+      return `${num}px`;
+    case "dp":
+    case "pt":
+      return `${num}px`;
+    case "%":
+      return `${num}%`;
+    case "vw":
+      return `${num}vw`;
+    case "vh":
+      return `${num}vh`;
+    case "vmin":
+      return `${num}vmin`;
+    case "vmax":
+      return `${num}vmax`;
+    case "em":
+      return `${num}em`;
+    case "rem":
+      return `${num}rem`;
+    default:
+      return `${num}px`;
+  }
+}
 var sizeHandlers;
 var init_size = __esm(() => {
   sizeHandlers = {
     width: (el, value) => {
-      el.style.width = typeof value === "number" ? `${value}px` : String(value);
+      const size = parseSizeValue(value);
+      if (size)
+        el.style.width = size;
     },
     height: (el, value) => {
-      el.style.height = typeof value === "number" ? `${value}px` : String(value);
+      const size = parseSizeValue(value);
+      if (size)
+        el.style.height = size;
     },
     minWidth: (el, value) => {
-      el.style.minWidth = typeof value === "number" ? `${value}px` : String(value);
+      const size = parseSizeValue(value);
+      if (size)
+        el.style.minWidth = size;
     },
     minHeight: (el, value) => {
-      el.style.minHeight = typeof value === "number" ? `${value}px` : String(value);
+      const size = parseSizeValue(value);
+      if (size)
+        el.style.minHeight = size;
     },
     maxWidth: (el, value) => {
-      el.style.maxWidth = typeof value === "number" ? `${value}px` : String(value);
+      const size = parseSizeValue(value);
+      if (size)
+        el.style.maxWidth = size;
     },
     maxHeight: (el, value) => {
-      el.style.maxHeight = typeof value === "number" ? `${value}px` : String(value);
+      const size = parseSizeValue(value);
+      if (size)
+        el.style.maxHeight = size;
     },
     size: (el, value) => {
-      if (typeof value === "number") {
-        el.style.width = `${value}px`;
-        el.style.height = `${value}px`;
-      } else if (typeof value === "object" && value !== null) {
+      if (typeof value === "object" && value !== null) {
         const obj = value;
         if (obj.width !== undefined) {
-          el.style.width = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+          const w = parseSizeValue(obj.width);
+          if (w)
+            el.style.width = w;
         }
         if (obj.height !== undefined) {
-          el.style.height = typeof obj.height === "number" ? `${obj.height}px` : String(obj.height);
+          const h = parseSizeValue(obj.height);
+          if (h)
+            el.style.height = h;
         }
       } else {
-        const size = String(value);
-        el.style.width = size;
-        el.style.height = size;
+        const size = parseSizeValue(value);
+        if (size) {
+          el.style.width = size;
+          el.style.height = size;
+        }
       }
     },
     fillMaxWidth: (el, value) => {
@@ -234,10 +299,64 @@ var init_size = __esm(() => {
 // src/dom/applicators/font.ts
 var exports_font = {};
 __export(exports_font, {
-  fontHandlers: () => fontHandlers
+  fontHandlers: () => fontHandlers,
+  GoogleFonts: () => GoogleFonts
 });
-var fontHandlers;
+function isSystemFont(fontName) {
+  const normalized = fontName.toLowerCase().trim();
+  return systemFontKeywords.has(normalized) || normalized.startsWith("-") || normalized.startsWith("ui-");
+}
+function loadGoogleFont(fontName) {
+  const normalized = fontName.trim();
+  if (loadedGoogleFonts.has(normalized) || isSystemFont(normalized)) {
+    return;
+  }
+  loadedGoogleFonts.add(normalized);
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(normalized)}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
+  document.head.appendChild(link);
+}
+function processFontFamily(value) {
+  const fonts = value.split(",").map((f) => f.trim().replace(/["']/g, ""));
+  for (const font of fonts) {
+    if (!isSystemFont(font)) {
+      loadGoogleFont(font);
+    }
+  }
+  return fonts.map((f) => {
+    if (f.includes(" ") && !f.startsWith('"') && !f.startsWith("'")) {
+      return `"${f}"`;
+    }
+    return f;
+  }).join(", ");
+}
+var loadedGoogleFonts, systemFontKeywords, fontHandlers, GoogleFonts;
 var init_font = __esm(() => {
+  loadedGoogleFonts = new Set;
+  systemFontKeywords = new Set([
+    "default",
+    "system",
+    "system-ui",
+    "inherit",
+    "initial",
+    "unset",
+    "serif",
+    "sans-serif",
+    "monospace",
+    "cursive",
+    "fantasy",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Arial",
+    "Helvetica",
+    "Times New Roman",
+    "Georgia",
+    "Courier New",
+    "Verdana",
+    "Tahoma"
+  ]);
   fontHandlers = {
     fontSize: (el, value) => {
       el.style.fontSize = typeof value === "number" ? `${value}px` : String(value);
@@ -246,15 +365,49 @@ var init_font = __esm(() => {
       el.style.fontWeight = String(value);
     },
     fontFamily: (el, value) => {
-      el.style.fontFamily = String(value);
+      const fontValue = String(value);
+      el.style.fontFamily = processFontFamily(fontValue);
     },
     textAlign: (el, value) => {
       el.style.textAlign = String(value);
     },
     lineHeight: (el, value) => {
       el.style.lineHeight = String(value);
+    },
+    fontStyle: (el, value) => {
+      el.style.fontStyle = String(value);
+    },
+    textTransform: (el, value) => {
+      el.style.textTransform = String(value);
     }
   };
+  GoogleFonts = {
+    preload: loadGoogleFont,
+    isLoaded: (fontName) => loadedGoogleFonts.has(fontName.trim()),
+    getLoadedFonts: () => Array.from(loadedGoogleFonts),
+    popular: [
+      "Roboto",
+      "Open Sans",
+      "Lato",
+      "Montserrat",
+      "Poppins",
+      "Inter",
+      "Nunito",
+      "Playfair Display",
+      "Merriweather",
+      "Source Code Pro",
+      "Fira Code",
+      "JetBrains Mono",
+      "Raleway",
+      "Ubuntu",
+      "Oswald",
+      "Quicksand",
+      "Work Sans",
+      "Rubik",
+      "Karla",
+      "DM Sans"
+    ]
+  };
 });
 
 // src/dom/applicators/layout.ts
@@ -262,11 +415,39 @@ var exports_layout = {};
 __export(exports_layout, {
   layoutHandlers: () => layoutHandlers
 });
+function mapAlignmentValue(value) {
+  const v = String(value).toLowerCase();
+  switch (v) {
+    case "top":
+    case "start":
+    case "leading":
+    case "left":
+      return "flex-start";
+    case "bottom":
+    case "end":
+    case "trailing":
+    case "right":
+      return "flex-end";
+    case "center":
+      return "center";
+    case "spacebetween":
+    case "space-between":
+      return "space-between";
+    case "spacearound":
+    case "space-around":
+      return "space-around";
+    case "spaceevenly":
+    case "space-evenly":
+      return "space-evenly";
+    default:
+      return v;
+  }
+}
 var layoutHandlers;
 var init_layout = __esm(() => {
   layoutHandlers = {
     verticalAlignment: (el, value) => {
-      const val = String(value);
+      const val = mapAlignmentValue(String(value));
       const flexDirection = getComputedStyle(el).flexDirection;
       if (flexDirection === "column" || flexDirection === "column-reverse") {
         el.style.justifyContent = val;
@@ -275,7 +456,7 @@ var init_layout = __esm(() => {
       }
     },
     horizontalAlignment: (el, value) => {
-      const val = String(value);
+      const val = mapAlignmentValue(String(value));
       const flexDirection = getComputedStyle(el).flexDirection;
       if (flexDirection === "column" || flexDirection === "column-reverse") {
         el.style.alignItems = val;
@@ -284,10 +465,10 @@ var init_layout = __esm(() => {
       }
     },
     horizontalAlign: (el, value) => {
-      el.style.justifyContent = String(value);
+      el.style.justifyContent = mapAlignmentValue(String(value));
     },
     verticalAlign: (el, value) => {
-      el.style.alignItems = String(value);
+      el.style.alignItems = mapAlignmentValue(String(value));
     },
     gap: (el, value) => {
       el.style.gap = typeof value === "number" ? `${value}px` : String(value);
@@ -330,11 +511,105 @@ var init_layout = __esm(() => {
   };
 });
 
+// src/dom/element-data.ts
+import { getElementDisposables } from "@hypen-space/core";
+function getHypenData(element) {
+  let data = elementDataMap.get(element);
+  if (!data) {
+    data = {};
+    elementDataMap.set(element, data);
+  }
+  return data;
+}
+function hasHypenData(element) {
+  return elementDataMap.has(element);
+}
+function clearHypenData(element) {
+  elementDataMap.delete(element);
+}
+function getEngine(element) {
+  return getHypenData(element).engine;
+}
+function setEngine(element, engine) {
+  getHypenData(element).engine = engine;
+}
+function findEngine(element) {
+  let current = element;
+  while (current) {
+    const engine = getEngine(current);
+    if (engine)
+      return engine;
+    current = current.parentElement;
+  }
+  return;
+}
+function getRegisteredEvents(element) {
+  const data = getHypenData(element);
+  if (!data.registeredEvents) {
+    data.registeredEvents = new Set;
+  }
+  return data.registeredEvents;
+}
+function isEventRegistered(element, eventKey) {
+  return getRegisteredEvents(element).has(eventKey);
+}
+function registerEvent(element, eventKey) {
+  getRegisteredEvents(element).add(eventKey);
+}
+function unregisterEvent(element, eventKey) {
+  getRegisteredEvents(element).delete(eventKey);
+}
+function getKeyTarget(element) {
+  return getHypenData(element).keyTarget;
+}
+function setKeyTarget(element, key) {
+  getHypenData(element).keyTarget = key;
+}
+function getMeta(element, key) {
+  return getHypenData(element).meta?.[key];
+}
+function setMeta(element, key, value) {
+  const data = getHypenData(element);
+  if (!data.meta) {
+    data.meta = {};
+  }
+  data.meta[key] = value;
+}
+function disposeHypenElement(element) {
+  try {
+    const disposables = getElementDisposables(element);
+    disposables.dispose();
+  } catch {}
+  clearHypenData(element);
+}
+function getLegacyEngine(element) {
+  const engine = getEngine(element);
+  if (engine)
+    return engine;
+  return element[HYPEN_ENGINE_SYMBOL] ?? element.__hypenEngine;
+}
+function setLegacyEngine(element, engine) {
+  setEngine(element, engine);
+  element.__hypenEngine = engine;
+}
+var elementDataMap, HYPEN_ENGINE_SYMBOL, REGISTERED_EVENTS_SYMBOL, KEY_TARGET_SYMBOL;
+var init_element_data = __esm(() => {
+  elementDataMap = new WeakMap;
+  HYPEN_ENGINE_SYMBOL = Symbol.for("hypen.engine");
+  REGISTERED_EVENTS_SYMBOL = Symbol.for("hypen.registeredEvents");
+  KEY_TARGET_SYMBOL = Symbol.for("hypen.keyTarget");
+});
+
 // src/dom/applicators/events.ts
 var exports_events = {};
 __export(exports_events, {
   eventHandlers: () => eventHandlers
 });
+import {
+  getElementDisposables as getElementDisposables2,
+  disposableListener,
+  disposableTimeout
+} from "@hypen-space/core";
 function toPlainObject(value) {
   if (value instanceof Map) {
     const obj = {};
@@ -380,7 +655,13 @@ function extractActionDetails(value) {
       }
       for (const [key, val] of Object.entries(plain)) {
         if (key !== "0") {
-          payload[key] = val;
+          if (/^\d+$/.test(key) && val && typeof val === "object" && !Array.isArray(val)) {
+            for (const [innerKey, innerVal] of Object.entries(val)) {
+              payload[innerKey] = innerVal;
+            }
+          } else {
+            payload[key] = val;
+          }
         }
       }
     }
@@ -418,420 +699,203 @@ function extractEventData(event, element) {
   }
   return data;
 }
-var eventHandlers;
-var init_events = __esm(() => {
-  eventHandlers = {
-    onClick: (element, value) => {
-      console.log(`[EventApplicator] onClick called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onClick value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenClickListener;
-      if (existingListener) {
-        element.removeEventListener("click", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onClick fired, dispatching action: ${actionName}`);
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : extractEventData(event, element);
-        console.log(`[EventApplicator] onClick payload:`, payload);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onClick`);
-        }
-      };
-      element.__hypenClickListener = listener;
-      element.addEventListener("click", listener);
-      console.log(`[EventApplicator] onClick handler attached for action: ${actionName}`);
-    },
-    onPress: (element, value) => {
-      eventHandlers.onClick(element, value);
-    },
-    onChange: (element, value) => {
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onChange value must be an action reference starting with @, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenChangeListener;
-      if (existingListener) {
-        element.removeEventListener("change", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onChange fired, dispatching action: ${actionName}`);
-        const payload = extractEventData(event, element);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onChange`);
-        }
-      };
-      element.__hypenChangeListener = listener;
-      element.addEventListener("change", listener);
-      console.log(`[EventApplicator] onChange handler attached for action: ${actionName}`);
-    },
-    onSubmit: (element, value) => {
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onSubmit value must be an action reference starting with @, got:`, value);
+function createEventHandler(eventType, options = {}) {
+  return (element, value) => {
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+    if (!actionName) {
+      console.warn(`[EventApplicator] ${eventType} requires an action reference starting with @, got:`, value);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `${eventType}:${actionName}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    let throttleTimer = null;
+    const listener = (event) => {
+      if (options.throttleMs && throttleTimer) {
         return;
       }
-      const existingListener = element.__hypenSubmitListener;
-      if (existingListener) {
-        element.removeEventListener("submit", existingListener);
+      if (options.throttleMs) {
+        throttleTimer = disposableTimeout(() => {
+          throttleTimer = null;
+        }, options.throttleMs);
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onSubmit fired, dispatching action: ${actionName}`);
+      if (options.preventDefault) {
         event.preventDefault();
-        const payload = extractEventData(event, element);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onSubmit`);
-        }
-      };
-      element.__hypenSubmitListener = listener;
-      element.addEventListener("submit", listener);
-      console.log(`[EventApplicator] onSubmit handler attached for action: ${actionName}`);
-    },
-    onInput: (element, value) => {
-      console.log(`[EventApplicator] onInput called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onInput value must be an action reference starting with @, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenInputListener;
-      if (existingListener) {
-        element.removeEventListener("input", existingListener);
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onInput fired, dispatching action: ${actionName}`);
-        const target = event.target;
-        const payload = {
-          type: event.type,
-          timestamp: Date.now(),
-          value: target.value,
-          input: target.value
-        };
-        console.log(`[EventApplicator] onInput payload:`, payload);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onInput`);
-        }
-      };
-      element.__hypenInputListener = listener;
-      element.addEventListener("input", listener);
-      console.log(`[EventApplicator] onInput handler attached for action: ${actionName}`);
-    },
-    onKey: (element, value) => {
-      console.log(`[EventApplicator] onKey called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const existingListener = element.__hypenKeyListener;
-        if (existingListener) {
-          element.removeEventListener("keydown", existingListener);
-        }
-        const listener = (event) => {
-          if (event.key === "Enter") {
-            console.log(`\uD83D\uDD25 [EventApplicator] onKey fired (Enter), dispatching action: ${actionName}`);
-            event.preventDefault();
-            const target = event.target;
-            const payload = {
-              type: event.type,
-              timestamp: Date.now(),
-              key: event.key,
-              code: event.code,
-              value: target.value,
-              input: target.value,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              metaKey: event.metaKey
-            };
-            const engine = element.__hypenEngine;
-            if (engine) {
-              engine.dispatchAction(actionName, payload);
-            } else {
-              console.warn(`[EventApplicator] No engine attached to element for onKey`);
-            }
-          }
-        };
-        element.__hypenKeyListener = listener;
-        element.addEventListener("keydown", listener);
-        console.log(`[EventApplicator] onKey handler attached for action: ${actionName} (triggers on Enter)`);
-      } else {
-        console.warn(`[EventApplicator] onKey value must be an action reference starting with @, got: ${value}`);
+      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : options.extractPayload ? options.extractPayload(event, element) : extractEventData(event, element);
+      const engine = getEngine(element);
+      if (engine) {
+        engine.dispatchAction(actionName, payload);
       }
-    },
-    "onKey.key": (element, keyValue) => {
-      console.log(`[EventApplicator] onKey.key called with value:`, keyValue);
-      element.__hypenKeyTarget = keyValue;
-    },
-    "onKey.action": (element, value) => {
-      console.log(`[EventApplicator] onKey.action called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const targetKey = element.__hypenKeyTarget || "Enter";
-        const existingListener = element.__hypenKeyListener;
-        if (existingListener) {
-          element.removeEventListener("keydown", existingListener);
-        }
-        const listener = (event) => {
-          const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
-          if (event.key === keyToMatch) {
-            console.log(`\uD83D\uDD25 [EventApplicator] onKey fired (${keyToMatch}), dispatching action: ${actionName}`);
-            event.preventDefault();
-            const target = event.target;
-            const payload = {
-              type: event.type,
-              timestamp: Date.now(),
-              key: event.key,
-              code: event.code,
-              value: target.value,
-              input: target.value,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              metaKey: event.metaKey
-            };
-            const engine = element.__hypenEngine;
-            if (engine) {
-              engine.dispatchAction(actionName, payload);
-            }
-          }
-        };
-        element.__hypenKeyListener = listener;
-        element.addEventListener("keydown", listener);
-        console.log(`[EventApplicator] onKey handler attached for action: ${actionName} on key: ${targetKey}`);
-      }
-    },
-    onScroll: (element, value) => {
-      console.log(`[EventApplicator] onScroll called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const existingListener = element.__hypenScrollListener;
-        if (existingListener) {
-          element.removeEventListener("scroll", existingListener);
-        }
-        let throttleTimer = null;
-        const listener = (event) => {
-          if (throttleTimer)
-            return;
-          throttleTimer = setTimeout(() => {
-            throttleTimer = null;
-          }, 100);
-          const target = event.target;
-          const scrollTop = target.scrollTop;
-          const scrollHeight = target.scrollHeight;
-          const clientHeight = target.clientHeight;
-          const scrollPercentage = scrollTop / (scrollHeight - clientHeight) * 100;
-          const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
-          console.log(`\uD83D\uDD25 [EventApplicator] onScroll fired, scrollTop: ${scrollTop}, nearBottom: ${nearBottom}`);
-          const payload = {
-            type: "scroll",
-            timestamp: Date.now(),
-            scrollTop,
-            scrollLeft: target.scrollLeft,
-            scrollHeight,
-            scrollWidth: target.scrollWidth,
-            clientHeight,
-            clientWidth: target.clientWidth,
-            scrollPercentage: Math.round(scrollPercentage),
-            nearBottom,
-            atBottom: scrollHeight - scrollTop === clientHeight,
-            atTop: scrollTop === 0
-          };
-          const engine = element.__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          } else {
-            console.warn(`[EventApplicator] No engine attached to element for onScroll`);
-          }
-        };
-        element.__hypenScrollListener = listener;
-        element.addEventListener("scroll", listener, { passive: true });
-        console.log(`[EventApplicator] onScroll handler attached for action: ${actionName}`);
-      } else {
-        console.warn(`[EventApplicator] onScroll value must be an action reference starting with @, got: ${value}`);
-      }
-    },
-    onLongClick: (element, value) => {
-      console.log(`[EventApplicator] onLongClick called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onLongClick value must be an action reference, got:`, value);
-        return;
-      }
-      const existingDownListener = element.__hypenLongClickDownListener;
-      const existingUpListener = element.__hypenLongClickUpListener;
-      if (existingDownListener) {
-        element.removeEventListener("pointerdown", existingDownListener);
-      }
-      if (existingUpListener) {
-        element.removeEventListener("pointerup", existingUpListener);
-        element.removeEventListener("pointerleave", existingUpListener);
-      }
-      let longClickTimer = null;
-      const LONG_CLICK_THRESHOLD = 500;
-      const downListener = (event) => {
-        longClickTimer = setTimeout(() => {
-          console.log(`\uD83D\uDD25 [EventApplicator] onLongClick fired, dispatching action: ${actionName}`);
-          const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-            type: "longclick",
-            timestamp: Date.now(),
-            clientX: event.clientX,
-            clientY: event.clientY
-          };
-          const engine = element.__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          } else {
-            console.warn(`[EventApplicator] No engine attached to element for onLongClick`);
-          }
-          longClickTimer = null;
-        }, LONG_CLICK_THRESHOLD);
-      };
-      const upListener = () => {
-        if (longClickTimer) {
-          clearTimeout(longClickTimer);
-          longClickTimer = null;
-        }
-      };
-      element.__hypenLongClickDownListener = downListener;
-      element.__hypenLongClickUpListener = upListener;
-      element.addEventListener("pointerdown", downListener);
-      element.addEventListener("pointerup", upListener);
-      element.addEventListener("pointerleave", upListener);
-      console.log(`[EventApplicator] onLongClick handler attached for action: ${actionName}`);
-    },
-    onFocus: (element, value) => {
-      console.log(`[EventApplicator] onFocus called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onFocus value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenFocusListener;
-      if (existingListener) {
-        element.removeEventListener("focus", existingListener);
+    };
+    disposables.add(disposableListener(element, eventType, listener, {
+      passive: options.passive
+    }));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+      if (throttleTimer) {
+        throttleTimer.dispose();
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onFocus fired, dispatching action: ${actionName}`);
-        const target = event.target;
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "focus",
-          timestamp: Date.now(),
-          value: target.value ?? undefined
-        };
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onFocus`);
-        }
-      };
-      element.__hypenFocusListener = listener;
-      element.addEventListener("focus", listener);
-      console.log(`[EventApplicator] onFocus handler attached for action: ${actionName}`);
-    },
-    onBlur: (element, value) => {
-      console.log(`[EventApplicator] onBlur called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onBlur value must be an action reference, got:`, value);
+    });
+  };
+}
+function createKeyHandler(defaultKey = "Enter") {
+  return (element, value) => {
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+    if (!actionName) {
+      console.warn(`[EventApplicator] onKey requires an action reference starting with @, got:`, value);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `keydown:${actionName}:${defaultKey}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    const targetKey = getKeyTarget(element) || defaultKey;
+    const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
+    const listener = (event) => {
+      const keyEvent = event;
+      if (keyEvent.key !== keyToMatch) {
         return;
       }
-      const existingListener = element.__hypenBlurListener;
-      if (existingListener) {
-        element.removeEventListener("blur", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onBlur fired, dispatching action: ${actionName}`);
-        const target = event.target;
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "blur",
-          timestamp: Date.now(),
-          value: target.value ?? undefined
-        };
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onBlur`);
-        }
+      event.preventDefault();
+      const target = event.target;
+      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
+        type: event.type,
+        timestamp: Date.now(),
+        key: keyEvent.key,
+        code: keyEvent.code,
+        value: target.value,
+        input: target.value,
+        ctrlKey: keyEvent.ctrlKey,
+        shiftKey: keyEvent.shiftKey,
+        altKey: keyEvent.altKey,
+        metaKey: keyEvent.metaKey
       };
-      element.__hypenBlurListener = listener;
-      element.addEventListener("blur", listener);
-      console.log(`[EventApplicator] onBlur handler attached for action: ${actionName}`);
-    },
-    onMouseEnter: (element, value) => {
-      console.log(`[EventApplicator] onMouseEnter called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onMouseEnter value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenMouseEnterListener;
-      if (existingListener) {
-        element.removeEventListener("mouseenter", existingListener);
+      const engine = getEngine(element);
+      if (engine) {
+        engine.dispatchAction(actionName, payload);
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onMouseEnter fired, dispatching action: ${actionName}`);
+    };
+    disposables.add(disposableListener(element, "keydown", listener));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+    });
+  };
+}
+function createLongClickHandler(thresholdMs = 500) {
+  return (element, value) => {
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+    if (!actionName) {
+      console.warn(`[EventApplicator] onLongClick requires an action reference starting with @, got:`, value);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `longclick:${actionName}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    let longClickTimer = null;
+    const downListener = (event) => {
+      const pointerEvent = event;
+      longClickTimer = disposableTimeout(() => {
         const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "mouseenter",
+          type: "longclick",
           timestamp: Date.now(),
-          clientX: event.clientX,
-          clientY: event.clientY
+          clientX: pointerEvent.clientX,
+          clientY: pointerEvent.clientY
         };
-        const engine = element.__hypenEngine;
+        const engine = getEngine(element);
         if (engine) {
           engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onMouseEnter`);
         }
-      };
-      element.__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;
+        longClickTimer = null;
+      }, thresholdMs);
+    };
+    const cancelListener = () => {
+      if (longClickTimer) {
+        longClickTimer.dispose();
+        longClickTimer = null;
       }
-      const existingListener = element.__hypenMouseLeaveListener;
-      if (existingListener) {
-        element.removeEventListener("mouseleave", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onMouseLeave fired, dispatching action: ${actionName}`);
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-          type: "mouseleave",
-          timestamp: Date.now(),
-          clientX: event.clientX,
-          clientY: event.clientY
-        };
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onMouseLeave`);
-        }
-      };
-      element.__hypenMouseLeaveListener = listener;
-      element.addEventListener("mouseleave", listener);
-      console.log(`[EventApplicator] onMouseLeave handler attached for action: ${actionName}`);
-    }
+    };
+    disposables.add(disposableListener(element, "pointerdown", downListener));
+    disposables.add(disposableListener(element, "pointerup", cancelListener));
+    disposables.add(disposableListener(element, "pointerleave", cancelListener));
+    disposables.addCallback(() => {
+      unregisterEvent(element, eventKey);
+      cancelListener();
+    });
+  };
+}
+var inputPayload = (event, element) => {
+  const target = element;
+  return {
+    type: event.type,
+    timestamp: Date.now(),
+    value: target.value,
+    input: target.value
+  };
+}, scrollPayload = (_event, element) => {
+  const scrollTop = element.scrollTop;
+  const scrollHeight = element.scrollHeight;
+  const clientHeight = element.clientHeight;
+  const scrollPercentage = scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) * 100 : 0;
+  const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
+  return {
+    type: "scroll",
+    timestamp: Date.now(),
+    scrollTop,
+    scrollLeft: element.scrollLeft,
+    scrollHeight,
+    scrollWidth: element.scrollWidth,
+    clientHeight,
+    clientWidth: element.clientWidth,
+    scrollPercentage: Math.round(scrollPercentage),
+    nearBottom,
+    atBottom: scrollHeight - scrollTop === clientHeight,
+    atTop: scrollTop === 0
+  };
+}, focusPayload = (event, element) => ({
+  type: event.type,
+  timestamp: Date.now(),
+  value: element.value ?? undefined
+}), mousePayload = (event, _element) => {
+  const mouseEvent = event;
+  return {
+    type: event.type,
+    timestamp: Date.now(),
+    clientX: mouseEvent.clientX,
+    clientY: mouseEvent.clientY
+  };
+}, eventHandlers;
+var init_events = __esm(() => {
+  init_element_data();
+  eventHandlers = {
+    onClick: createEventHandler("click"),
+    onPress: createEventHandler("click"),
+    onChange: createEventHandler("change"),
+    onSubmit: createEventHandler("submit", { preventDefault: true }),
+    onInput: createEventHandler("input", { extractPayload: inputPayload }),
+    onKey: createKeyHandler("Enter"),
+    "onKey.key": (element, value) => {
+      setKeyTarget(element, String(value));
+    },
+    "onKey.action": createKeyHandler("Enter"),
+    onScroll: createEventHandler("scroll", {
+      throttleMs: 100,
+      passive: true,
+      extractPayload: scrollPayload
+    }),
+    onLongClick: createLongClickHandler(500),
+    onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
+    onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
+    onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
+    onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload })
   };
 });
 
@@ -997,7 +1061,43 @@ var effectsHandlers;
 var init_effects = __esm(() => {
   effectsHandlers = {
     boxShadow: (el, value) => {
-      el.style.boxShadow = String(value);
+      if (typeof value === "string") {
+        el.style.boxShadow = value;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        const x = typeof obj.x === "number" ? `${obj.x}px` : obj.x ?? obj.offsetX ?? "0px";
+        const y = typeof obj.y === "number" ? `${obj.y}px` : obj.y ?? obj.offsetY ?? "0px";
+        const blur = typeof obj.blur === "number" ? `${obj.blur}px` : obj.blur ?? obj.radius ?? "0px";
+        const spread = typeof obj.spread === "number" ? `${obj.spread}px` : obj.spread ?? "0px";
+        const color = obj.color ?? "rgba(0,0,0,0.2)";
+        const inset = obj.inset ? "inset " : "";
+        el.style.boxShadow = `${inset}${x} ${y} ${blur} ${spread} ${color}`;
+      } else if (typeof value === "number") {
+        el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
+      }
+    },
+    shadow: (el, value) => {
+      if (typeof value === "object" && value !== null) {
+        const obj = value;
+        const x = typeof obj.x === "number" ? `${obj.x}px` : obj.x ?? obj.offsetX ?? "0px";
+        const y = typeof obj.y === "number" ? `${obj.y}px` : obj.y ?? obj.offsetY ?? "0px";
+        const blur = typeof obj.blur === "number" ? `${obj.blur}px` : obj.blur ?? obj.radius ?? "4px";
+        const color = obj.color ?? "rgba(0,0,0,0.2)";
+        el.style.boxShadow = `${x} ${y} ${blur} ${color}`;
+      } else if (typeof value === "number") {
+        el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
+      } else {
+        el.style.boxShadow = String(value);
+      }
+    },
+    elevation: (el, value) => {
+      const level = typeof value === "number" ? value : parseInt(String(value), 10);
+      if (!isNaN(level) && level >= 0) {
+        const y = level * 0.5;
+        const blur = level * 1.5;
+        const opacity = Math.min(0.1 + level * 0.02, 0.4);
+        el.style.boxShadow = `0 ${y}px ${blur}px rgba(0,0,0,${opacity})`;
+      }
     },
     textShadow: (el, value) => {
       el.style.textShadow = String(value);
@@ -1315,6 +1415,28 @@ var init_transition = __esm(() => {
 });
 
 // src/dom/applicators/index.ts
+var BREAKPOINTS = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+var variantStyleSheet = null;
+var insertedRules = new Set;
+function getVariantStyleSheet() {
+  if (!variantStyleSheet) {
+    const style = document.createElement("style");
+    style.id = "hypen-variants";
+    document.head.appendChild(style);
+    variantStyleSheet = style.sheet;
+  }
+  return variantStyleSheet;
+}
+function hashValue(value) {
+  return String(value).replace(/[^a-zA-Z0-9]/g, "").slice(0, 8);
+}
+
 class ApplicatorRegistry {
   handlers = new Map;
   elementState = new WeakMap;
@@ -1462,12 +1584,55 @@ class ApplicatorRegistry {
     }
   }
   setStyleProperty(element, name, value) {
-    const cssName = name.replace(/([A-Z])/g, "-$1").toLowerCase();
+    const atIndex = name.indexOf("@");
+    const colonIndex = name.indexOf(":");
+    if (atIndex !== -1) {
+      const prop = name.slice(0, atIndex);
+      const breakpoint = name.slice(atIndex + 1);
+      const minWidth = BREAKPOINTS[breakpoint];
+      if (minWidth) {
+        const cssName2 = this.toKebabCase(prop);
+        const cssValue = this.formatCssValue(cssName2, value);
+        const className = `hypen-${cssName2.replace(/[^a-zA-Z0-9-]/g, "")}-${breakpoint}-${hashValue(value)}`;
+        const ruleKey = `${className}:${cssValue}`;
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
+          sheet.insertRule(`@media (min-width: ${minWidth}) { .${className} { ${cssName2}: ${cssValue}; } }`, sheet.cssRules.length);
+          insertedRules.add(ruleKey);
+        }
+        element.classList.add(className);
+      }
+      return;
+    }
+    if (colonIndex !== -1) {
+      const prop = name.slice(0, colonIndex);
+      const state = name.slice(colonIndex + 1);
+      const validStates = ["hover", "focus", "active", "disabled", "focus-visible", "focus-within"];
+      if (validStates.includes(state)) {
+        const cssName2 = this.toKebabCase(prop);
+        const cssValue = this.formatCssValue(cssName2, value);
+        const className = `hypen-${cssName2.replace(/[^a-zA-Z0-9-]/g, "")}-${state}-${hashValue(value)}`;
+        const ruleKey = `${className}:${cssValue}`;
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
+          sheet.insertRule(`.${className}:${state} { ${cssName2}: ${cssValue}; }`, sheet.cssRules.length);
+          insertedRules.add(ruleKey);
+        }
+        element.classList.add(className);
+      }
+      return;
+    }
+    const cssName = this.toKebabCase(name);
+    element.style.setProperty(cssName, this.formatCssValue(cssName, value));
+  }
+  toKebabCase(name) {
+    return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+  formatCssValue(cssName, value) {
     if (typeof value === "number" && this.needsUnit(cssName)) {
-      element.style.setProperty(cssName, `${value}px`);
-    } else {
-      element.style.setProperty(cssName, String(value));
+      return `${value}px`;
     }
+    return String(value);
   }
   needsUnit(prop) {
     const unitless = [
@@ -1545,4 +1710,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=4E66FE319E3D673364756E2164756E21
+//# debugId=FA4B7415966A312264756E2164756E21