@hypen-space/web 0.2.12 → 0.3.0

package/dist/src/dom/index.js

@@ -973,6 +973,266 @@ var init_route = __esm(() => {
   };
 });
 
+// src/dom/components/hypenapp.ts
+var exports_hypenapp = {};
+__export(exports_hypenapp, {
+  hypenAppHandler: () => hypenAppHandler,
+  disconnectHypenApp: () => disconnectHypenApp
+});
+import { RemoteEngine } from "@hypen-space/core/remote/client";
+function applyPatches(container, nodes, patches, engine, onRoot) {
+  for (const patch of patches) {
+    switch (patch.type) {
+      case "create": {
+        const el = createElement(patch.element_type, patch.props || {});
+        el.dataset.hypenId = patch.id;
+        el.__hypenEngine = engine;
+        nodes.set(patch.id, el);
+        break;
+      }
+      case "setProp": {
+        const el = nodes.get(patch.id);
+        if (el) {
+          applyProp(el, patch.name, patch.value);
+        }
+        break;
+      }
+      case "setText": {
+        const el = nodes.get(patch.id);
+        if (el) {
+          el.textContent = patch.text;
+        }
+        break;
+      }
+      case "insert": {
+        const parentId = patch.parent_id;
+        const parent = parentId === "root" ? container : nodes.get(parentId);
+        const child = nodes.get(patch.id);
+        const beforeId = patch.before_id;
+        if (parent && child) {
+          if (parentId === "root") {
+            onRoot(patch.id);
+          }
+          if (beforeId) {
+            const before = nodes.get(beforeId);
+            if (before && before.parentNode === parent) {
+              parent.insertBefore(child, before);
+            } else if (!parent.contains(child)) {
+              parent.appendChild(child);
+            }
+          } else if (!parent.contains(child)) {
+            parent.appendChild(child);
+          }
+        }
+        break;
+      }
+      case "move": {
+        const parentId = patch.parent_id;
+        const parent = parentId === "root" ? container : nodes.get(parentId);
+        const child = nodes.get(patch.id);
+        const beforeId = patch.before_id;
+        if (parent && child) {
+          if (beforeId) {
+            const before = nodes.get(beforeId);
+            if (before && before.parentNode === parent) {
+              parent.insertBefore(child, before);
+            }
+          } else {
+            parent.appendChild(child);
+          }
+        }
+        break;
+      }
+      case "remove": {
+        const el = nodes.get(patch.id);
+        if (el && el.parentNode) {
+          el.parentNode.removeChild(el);
+        }
+        nodes.delete(patch.id);
+        break;
+      }
+    }
+  }
+}
+function createElement(type, props) {
+  const normalizedType = type.toLowerCase();
+  const tagMap = {
+    column: "div",
+    row: "div",
+    text: "span",
+    button: "button",
+    input: "input",
+    image: "img",
+    container: "div",
+    box: "div",
+    center: "div",
+    list: "div",
+    spacer: "div",
+    stack: "div",
+    divider: "hr",
+    grid: "div",
+    card: "div",
+    heading: "h2",
+    link: "a",
+    textarea: "textarea",
+    checkbox: "input",
+    select: "select",
+    slider: "input",
+    switch: "input",
+    spinner: "div",
+    badge: "span",
+    avatar: "img",
+    progressbar: "div",
+    video: "video",
+    audio: "audio"
+  };
+  const tag = tagMap[normalizedType] || "div";
+  const el = document.createElement(tag);
+  el.dataset.hypenType = normalizedType;
+  if (normalizedType === "column") {
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+  } else if (normalizedType === "row") {
+    el.style.display = "flex";
+    el.style.flexDirection = "row";
+  } else if (normalizedType === "center") {
+    el.style.display = "flex";
+    el.style.alignItems = "center";
+    el.style.justifyContent = "center";
+  } else if (normalizedType === "text") {
+    if (props["0"]) {
+      el.textContent = String(props["0"]);
+    }
+  } else if (normalizedType === "button") {
+    el.style.cursor = "pointer";
+  } else if (normalizedType === "checkbox" || normalizedType === "switch") {
+    el.type = "checkbox";
+  } else if (normalizedType === "slider") {
+    el.type = "range";
+  }
+  return el;
+}
+function applyProp(el, name, value) {
+  if (name === "0" || name === "text") {
+    el.textContent = String(value);
+    return;
+  }
+  const styleProps = {
+    padding: "padding",
+    margin: "margin",
+    backgroundColor: "backgroundColor",
+    background: "background",
+    color: "color",
+    fontSize: "fontSize",
+    fontWeight: "fontWeight",
+    width: "width",
+    height: "height",
+    minWidth: "minWidth",
+    minHeight: "minHeight",
+    maxWidth: "maxWidth",
+    maxHeight: "maxHeight",
+    borderRadius: "borderRadius",
+    border: "border",
+    gap: "gap",
+    flex: "flex",
+    alignItems: "alignItems",
+    justifyContent: "justifyContent",
+    opacity: "opacity",
+    overflow: "overflow"
+  };
+  if (styleProps[name]) {
+    const cssValue = typeof value === "number" ? `${value}px` : String(value);
+    el.style[styleProps[name]] = cssValue;
+    return;
+  }
+  if (name === "onClick" || name === "onclick") {
+    el.onclick = () => {
+      const engine = el.__hypenEngine;
+      if (engine && typeof value === "string" && value.startsWith("@actions.")) {
+        const action = value.replace("@actions.", "");
+        engine.dispatchAction(action);
+      }
+    };
+    return;
+  }
+  el.setAttribute(name, String(value));
+}
+function disconnectHypenApp(element) {
+  const instance = activeInstances.get(element);
+  if (instance) {
+    instance.engine.disconnect();
+    activeInstances.delete(element);
+  }
+}
+var activeInstances, hypenAppHandler;
+var init_hypenapp = __esm(() => {
+  activeInstances = new WeakMap;
+  hypenAppHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.dataset.hypenType = "hypenapp";
+      el.style.display = "contents";
+      return el;
+    },
+    applyProps(element, props) {
+      const url = props["0"] || props.url;
+      if (!url || typeof url !== "string") {
+        console.error("[HypenApp] URL is required");
+        element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
+        return;
+      }
+      const existing = activeInstances.get(element);
+      if (existing) {
+        return;
+      }
+      const engine = new RemoteEngine(url, {
+        autoReconnect: props.autoReconnect ?? true,
+        reconnectInterval: props.reconnectInterval ?? 3000,
+        maxReconnectAttempts: props.maxReconnectAttempts ?? 10
+      });
+      const nodes = new Map;
+      let rootId = null;
+      activeInstances.set(element, { engine, nodes });
+      engine.onPatches((patches) => {
+        applyPatches(element, nodes, patches, engine, (id) => {
+          if (!rootId)
+            rootId = id;
+        });
+      });
+      element.innerHTML = '<div class="hypen-app-loading">Connecting...</div>';
+      engine.connect().then(() => {
+        element.innerHTML = "";
+        console.log(`[HypenApp] Connected to ${url}`);
+      }).catch((error) => {
+        element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
+        console.error("[HypenApp] Connection failed:", error);
+      });
+      engine.onDisconnect(() => {
+        console.log("[HypenApp] Disconnected");
+      });
+      engine.onError((error) => {
+        console.error("[HypenApp] Error:", error);
+      });
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const removedNode of mutation.removedNodes) {
+            if (removedNode === element || removedNode.contains?.(element)) {
+              engine.disconnect();
+              activeInstances.delete(element);
+              observer.disconnect();
+              console.log("[HypenApp] Cleaned up");
+              return;
+            }
+          }
+        }
+      });
+      if (element.parentNode) {
+        observer.observe(element.parentNode, { childList: true, subtree: true });
+      }
+    }
+  };
+});
+
 // src/dom/applicators/padding.ts
 var exports_padding = {};
 __export(exports_padding, {
@@ -1116,43 +1376,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) => {
@@ -1180,10 +1505,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);
@@ -1192,15 +1571,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
@@ -1208,11 +1621,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;
@@ -1221,7 +1662,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;
@@ -1230,10 +1671,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);
@@ -1276,11 +1717,105 @@ var init_layout = __esm(() => {
   };
 });
 
+// src/dom/element-data.ts
+import { getElementDisposables } from "@hypen/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/core";
 function toPlainObject(value) {
   if (value instanceof Map) {
     const obj = {};
@@ -1326,7 +1861,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;
+          }
         }
       }
     }
@@ -1364,420 +1905,203 @@ function extractEventData(event, element) {
   }
   return data;
 }
-var eventHandlers;
-var init_events = __esm(() => {
-  eventHandlers = {
-    onClick: (element, value) => {
-      console.log(`[EventApplicator] onClick called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onClick value must be an action reference, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenClickListener;
-      if (existingListener) {
-        element.removeEventListener("click", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onClick fired, dispatching action: ${actionName}`);
-        const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : extractEventData(event, element);
-        console.log(`[EventApplicator] onClick payload:`, payload);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onClick`);
-        }
-      };
-      element.__hypenClickListener = listener;
-      element.addEventListener("click", listener);
-      console.log(`[EventApplicator] onClick handler attached for action: ${actionName}`);
-    },
-    onPress: (element, value) => {
-      eventHandlers.onClick(element, value);
-    },
-    onChange: (element, value) => {
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onChange value must be an action reference starting with @, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenChangeListener;
-      if (existingListener) {
-        element.removeEventListener("change", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onChange fired, dispatching action: ${actionName}`);
-        const payload = extractEventData(event, element);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onChange`);
-        }
-      };
-      element.__hypenChangeListener = listener;
-      element.addEventListener("change", listener);
-      console.log(`[EventApplicator] onChange handler attached for action: ${actionName}`);
-    },
-    onSubmit: (element, value) => {
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onSubmit value must be an action reference starting with @, got:`, value);
+function createEventHandler(eventType, options = {}) {
+  return (element, value) => {
+    const { actionName, payload: customPayload } = extractActionDetails(value);
+    if (!actionName) {
+      console.warn(`[EventApplicator] ${eventType} requires an action reference starting with @, got:`, value);
+      return;
+    }
+    const disposables = getElementDisposables2(element);
+    const eventKey = `${eventType}:${actionName}`;
+    if (getRegisteredEvents(element).has(eventKey)) {
+      return;
+    }
+    registerEvent(element, eventKey);
+    let throttleTimer = null;
+    const listener = (event) => {
+      if (options.throttleMs && throttleTimer) {
         return;
       }
-      const existingListener = element.__hypenSubmitListener;
-      if (existingListener) {
-        element.removeEventListener("submit", existingListener);
+      if (options.throttleMs) {
+        throttleTimer = disposableTimeout(() => {
+          throttleTimer = null;
+        }, options.throttleMs);
       }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onSubmit fired, dispatching action: ${actionName}`);
+      if (options.preventDefault) {
         event.preventDefault();
-        const payload = extractEventData(event, element);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onSubmit`);
-        }
-      };
-      element.__hypenSubmitListener = listener;
-      element.addEventListener("submit", listener);
-      console.log(`[EventApplicator] onSubmit handler attached for action: ${actionName}`);
-    },
-    onInput: (element, value) => {
-      console.log(`[EventApplicator] onInput called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onInput value must be an action reference starting with @, got:`, value);
-        return;
-      }
-      const existingListener = element.__hypenInputListener;
-      if (existingListener) {
-        element.removeEventListener("input", existingListener);
-      }
-      const listener = (event) => {
-        console.log(`\uD83D\uDD25 [EventApplicator] onInput fired, dispatching action: ${actionName}`);
-        const target = event.target;
-        const payload = {
-          type: event.type,
-          timestamp: Date.now(),
-          value: target.value,
-          input: target.value
-        };
-        console.log(`[EventApplicator] onInput payload:`, payload);
-        const engine = element.__hypenEngine;
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        } else {
-          console.warn(`[EventApplicator] No engine attached to element for onInput`);
-        }
-      };
-      element.__hypenInputListener = listener;
-      element.addEventListener("input", listener);
-      console.log(`[EventApplicator] onInput handler attached for action: ${actionName}`);
-    },
-    onKey: (element, value) => {
-      console.log(`[EventApplicator] onKey called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const existingListener = element.__hypenKeyListener;
-        if (existingListener) {
-          element.removeEventListener("keydown", existingListener);
-        }
-        const listener = (event) => {
-          if (event.key === "Enter") {
-            console.log(`\uD83D\uDD25 [EventApplicator] onKey fired (Enter), dispatching action: ${actionName}`);
-            event.preventDefault();
-            const target = event.target;
-            const payload = {
-              type: event.type,
-              timestamp: Date.now(),
-              key: event.key,
-              code: event.code,
-              value: target.value,
-              input: target.value,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              metaKey: event.metaKey
-            };
-            const engine = element.__hypenEngine;
-            if (engine) {
-              engine.dispatchAction(actionName, payload);
-            } else {
-              console.warn(`[EventApplicator] No engine attached to element for onKey`);
-            }
-          }
-        };
-        element.__hypenKeyListener = listener;
-        element.addEventListener("keydown", listener);
-        console.log(`[EventApplicator] onKey handler attached for action: ${actionName} (triggers on Enter)`);
-      } else {
-        console.warn(`[EventApplicator] onKey value must be an action reference starting with @, got: ${value}`);
-      }
-    },
-    "onKey.key": (element, keyValue) => {
-      console.log(`[EventApplicator] onKey.key called with value:`, keyValue);
-      element.__hypenKeyTarget = keyValue;
-    },
-    "onKey.action": (element, value) => {
-      console.log(`[EventApplicator] onKey.action called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const targetKey = element.__hypenKeyTarget || "Enter";
-        const existingListener = element.__hypenKeyListener;
-        if (existingListener) {
-          element.removeEventListener("keydown", existingListener);
-        }
-        const listener = (event) => {
-          const keyToMatch = targetKey.toLowerCase() === "return" ? "Enter" : targetKey;
-          if (event.key === keyToMatch) {
-            console.log(`\uD83D\uDD25 [EventApplicator] onKey fired (${keyToMatch}), dispatching action: ${actionName}`);
-            event.preventDefault();
-            const target = event.target;
-            const payload = {
-              type: event.type,
-              timestamp: Date.now(),
-              key: event.key,
-              code: event.code,
-              value: target.value,
-              input: target.value,
-              ctrlKey: event.ctrlKey,
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              metaKey: event.metaKey
-            };
-            const engine = element.__hypenEngine;
-            if (engine) {
-              engine.dispatchAction(actionName, payload);
-            }
-          }
-        };
-        element.__hypenKeyListener = listener;
-        element.addEventListener("keydown", listener);
-        console.log(`[EventApplicator] onKey handler attached for action: ${actionName} on key: ${targetKey}`);
-      }
-    },
-    onScroll: (element, value) => {
-      console.log(`[EventApplicator] onScroll called with value:`, value);
-      const { actionName } = extractActionDetails(value);
-      if (actionName) {
-        const existingListener = element.__hypenScrollListener;
-        if (existingListener) {
-          element.removeEventListener("scroll", existingListener);
-        }
-        let throttleTimer = null;
-        const listener = (event) => {
-          if (throttleTimer)
-            return;
-          throttleTimer = setTimeout(() => {
-            throttleTimer = null;
-          }, 100);
-          const target = event.target;
-          const scrollTop = target.scrollTop;
-          const scrollHeight = target.scrollHeight;
-          const clientHeight = target.clientHeight;
-          const scrollPercentage = scrollTop / (scrollHeight - clientHeight) * 100;
-          const nearBottom = scrollHeight - scrollTop - clientHeight < 100 || scrollPercentage > 90;
-          console.log(`\uD83D\uDD25 [EventApplicator] onScroll fired, scrollTop: ${scrollTop}, nearBottom: ${nearBottom}`);
-          const payload = {
-            type: "scroll",
-            timestamp: Date.now(),
-            scrollTop,
-            scrollLeft: target.scrollLeft,
-            scrollHeight,
-            scrollWidth: target.scrollWidth,
-            clientHeight,
-            clientWidth: target.clientWidth,
-            scrollPercentage: Math.round(scrollPercentage),
-            nearBottom,
-            atBottom: scrollHeight - scrollTop === clientHeight,
-            atTop: scrollTop === 0
-          };
-          const engine = element.__hypenEngine;
-          if (engine) {
-            engine.dispatchAction(actionName, payload);
-          } else {
-            console.warn(`[EventApplicator] No engine attached to element for onScroll`);
-          }
-        };
-        element.__hypenScrollListener = listener;
-        element.addEventListener("scroll", listener, { passive: true });
-        console.log(`[EventApplicator] onScroll handler attached for action: ${actionName}`);
-      } else {
-        console.warn(`[EventApplicator] onScroll value must be an action reference starting with @, got: ${value}`);
       }
-    },
-    onLongClick: (element, value) => {
-      console.log(`[EventApplicator] onLongClick called with value:`, value);
-      const { actionName, payload: customPayload } = extractActionDetails(value);
-      if (!actionName) {
-        console.warn(`[EventApplicator] onLongClick value must be an action reference, got:`, value);
-        return;
+      const 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);
       }
-      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 engine = getEngine(element);
+      if (engine) {
+        engine.dispatchAction(actionName, payload);
       }
-      const existingListener = element.__hypenMouseEnterListener;
-      if (existingListener) {
-        element.removeEventListener("mouseenter", existingListener);
-      }
-      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;
-      }
-      const existingListener = element.__hypenMouseLeaveListener;
-      if (existingListener) {
-        element.removeEventListener("mouseleave", existingListener);
+        longClickTimer = null;
+      }, thresholdMs);
+    };
+    const cancelListener = () => {
+      if (longClickTimer) {
+        longClickTimer.dispose();
+        longClickTimer = null;
       }
-      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 })
   };
 });
 
@@ -1943,7 +2267,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);
@@ -2313,6 +2673,7 @@ class ComponentRegistry {
     const { paragraphHandler: paragraphHandler2 } = (init_paragraph(), __toCommonJS(exports_paragraph));
     const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
     const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
+    const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
     this.register("column", columnHandler2);
     this.register("row", rowHandler2);
     this.register("text", textHandler2);
@@ -2344,10 +2705,33 @@ class ComponentRegistry {
     this.register("paragraph", paragraphHandler2);
     this.register("router", routerHandler2);
     this.register("route", routeHandler2);
+    this.register("hypenapp", hypenAppHandler2);
   }
 }
 
 // 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;
@@ -2495,12 +2879,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 = [
@@ -2871,13 +3298,13 @@ class DOMRenderer {
   }
   onCreate(id, elementType, props) {
     const propsObj = props instanceof Map ? Object.fromEntries(props) : props;
-    const element = this.components.createElement(elementType, propsObj);
+    let element = this.components.createElement(elementType, propsObj);
     if (!element) {
       const fallback = document.createElement("div");
-      fallback.dataset.hypenType = elementType;
-      fallback.textContent = `Unknown component: ${elementType}`;
-      this.nodes.set(id, fallback);
-      return;
+      fallback.dataset.hypenType = elementType.toLowerCase();
+      fallback.style.display = "contents";
+      element = fallback;
+      console.log(`[Renderer] Unknown component "${elementType}" - using transparent container`);
     }
     element.dataset.hypenType = elementType.toLowerCase();
     element.dataset.hypenId = id;
@@ -3107,4 +3534,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=18866530C09B344A64756E2164756E21
+//# debugId=8AAA0D290328E56B64756E2164756E21