@hypen-space/web 0.3.8 → 0.3.10

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

@@ -1,1715 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __moduleCache = /* @__PURE__ */ new WeakMap;
-var __toCommonJS = (from) => {
-  var entry = __moduleCache.get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function")
-    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    }));
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: (newValue) => all[name] = () => newValue
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/dom/applicators/padding.ts
-var exports_padding = {};
-__export(exports_padding, {
-  paddingHandler: () => paddingHandler
-});
-var paddingHandler = (el, value) => {
-  if (typeof value === "number") {
-    el.style.padding = `${value}px`;
-  } else if (typeof value === "object") {
-    if (value.left !== undefined)
-      el.style.paddingLeft = `${value.left}px`;
-    if (value.right !== undefined)
-      el.style.paddingRight = `${value.right}px`;
-    if (value.top !== undefined)
-      el.style.paddingTop = `${value.top}px`;
-    if (value.bottom !== undefined)
-      el.style.paddingBottom = `${value.bottom}px`;
-  } else {
-    el.style.padding = String(value);
-  }
-};
-
-// src/dom/applicators/margin.ts
-var exports_margin = {};
-__export(exports_margin, {
-  marginHandler: () => marginHandler
-});
-var marginHandler = (el, value) => {
-  if (typeof value === "number") {
-    el.style.margin = `${value}px`;
-  } else if (typeof value === "object") {
-    if (value.left !== undefined)
-      el.style.marginLeft = `${value.left}px`;
-    if (value.right !== undefined)
-      el.style.marginRight = `${value.right}px`;
-    if (value.top !== undefined)
-      el.style.marginTop = `${value.top}px`;
-    if (value.bottom !== undefined)
-      el.style.marginBottom = `${value.bottom}px`;
-  } else {
-    el.style.margin = String(value);
-  }
-};
-
-// src/dom/applicators/color.ts
-var exports_color = {};
-__export(exports_color, {
-  colorHandlers: () => colorHandlers
-});
-var colorHandlers;
-var init_color = __esm(() => {
-  colorHandlers = {
-    color: (el, value) => {
-      el.style.color = String(value);
-    },
-    backgroundColor: (el, value) => {
-      el.style.backgroundColor = String(value);
-    },
-    borderColor: (el, value) => {
-      el.style.borderColor = String(value);
-    },
-    opacity: (el, value) => {
-      el.style.opacity = String(value);
-    }
-  };
-});
-
-// src/dom/applicators/border.ts
-var exports_border = {};
-__export(exports_border, {
-  borderHandlers: () => borderHandlers
-});
-var borderHandlers;
-var init_border = __esm(() => {
-  borderHandlers = {
-    border: (el, value) => {
-      if (typeof value === "number") {
-        el.style.borderWidth = `${value}px`;
-        el.style.borderStyle = "solid";
-      } else if (typeof value === "object" && value !== null) {
-        const obj = value;
-        if (obj.width !== undefined) {
-          el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
-        }
-        if (obj.color !== undefined) {
-          el.style.borderColor = String(obj.color);
-        }
-        if (obj.style !== undefined) {
-          el.style.borderStyle = String(obj.style);
-        } else {
-          el.style.borderStyle = "solid";
-        }
-        if (obj.radius !== undefined) {
-          el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
-        }
-      } else if (typeof value === "string") {
-        el.style.border = value;
-      }
-    },
-    borderWidth: (el, value) => {
-      el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
-    },
-    borderStyle: (el, value) => {
-      el.style.borderStyle = String(value);
-    },
-    borderRadius: (el, value) => {
-      if (typeof value === "number") {
-        el.style.borderRadius = `${value}px`;
-      } else if (typeof value === "object" && value !== null) {
-        const obj = value;
-        const topLeft = obj.topLeft ?? obj.topStart ?? 0;
-        const topRight = obj.topRight ?? obj.topEnd ?? 0;
-        const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
-        const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
-        const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
-        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
-      } else {
-        el.style.borderRadius = String(value);
-      }
-    },
-    cornerRadius: (el, value) => {
-      if (typeof value === "number") {
-        el.style.borderRadius = `${value}px`;
-      } else if (typeof value === "object" && value !== null) {
-        const obj = value;
-        const topLeft = obj.topLeft ?? obj.topStart ?? 0;
-        const topRight = obj.topRight ?? obj.topEnd ?? 0;
-        const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
-        const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
-        const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
-        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
-      } else {
-        el.style.borderRadius = String(value);
-      }
-    }
-  };
-});
-
-// src/dom/applicators/size.ts
-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) => {
-      const size = parseSizeValue(value);
-      if (size)
-        el.style.width = size;
-    },
-    height: (el, value) => {
-      const size = parseSizeValue(value);
-      if (size)
-        el.style.height = size;
-    },
-    minWidth: (el, value) => {
-      const size = parseSizeValue(value);
-      if (size)
-        el.style.minWidth = size;
-    },
-    minHeight: (el, value) => {
-      const size = parseSizeValue(value);
-      if (size)
-        el.style.minHeight = size;
-    },
-    maxWidth: (el, value) => {
-      const size = parseSizeValue(value);
-      if (size)
-        el.style.maxWidth = size;
-    },
-    maxHeight: (el, value) => {
-      const size = parseSizeValue(value);
-      if (size)
-        el.style.maxHeight = size;
-    },
-    size: (el, value) => {
-      if (typeof value === "object" && value !== null) {
-        const obj = value;
-        if (obj.width !== undefined) {
-          const w = parseSizeValue(obj.width);
-          if (w)
-            el.style.width = w;
-        }
-        if (obj.height !== undefined) {
-          const h = parseSizeValue(obj.height);
-          if (h)
-            el.style.height = h;
-        }
-      } else {
-        const size = parseSizeValue(value);
-        if (size) {
-          el.style.width = size;
-          el.style.height = size;
-        }
-      }
-    },
-    fillMaxWidth: (el, value) => {
-      if (value === false)
-        return;
-      const fraction = typeof value === "number" ? value : 1;
-      el.style.width = `${fraction * 100}%`;
-    },
-    fillMaxHeight: (el, value) => {
-      if (value === false)
-        return;
-      const fraction = typeof value === "number" ? value : 1;
-      el.style.height = `${fraction * 100}%`;
-    },
-    fillMaxSize: (el, value) => {
-      if (value === false)
-        return;
-      const fraction = typeof value === "number" ? value : 1;
-      el.style.width = `${fraction * 100}%`;
-      el.style.height = `${fraction * 100}%`;
-    }
-  };
-});
-
-// src/dom/applicators/font.ts
-var exports_font = {};
-__export(exports_font, {
-  fontHandlers: () => fontHandlers,
-  GoogleFonts: () => GoogleFonts
-});
-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);
-    },
-    fontWeight: (el, value) => {
-      el.style.fontWeight = String(value);
-    },
-    fontFamily: (el, 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
-var exports_layout = {};
-__export(exports_layout, {
-  mapAlignmentValue: () => mapAlignmentValue,
-  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 = mapAlignmentValue(String(value));
-      const flexDirection = getComputedStyle(el).flexDirection;
-      if (flexDirection === "column" || flexDirection === "column-reverse") {
-        el.style.justifyContent = val;
-      } else {
-        el.style.alignItems = val;
-      }
-    },
-    horizontalAlignment: (el, value) => {
-      const val = mapAlignmentValue(String(value));
-      const flexDirection = getComputedStyle(el).flexDirection;
-      if (flexDirection === "column" || flexDirection === "column-reverse") {
-        el.style.alignItems = val;
-      } else {
-        el.style.justifyContent = val;
-      }
-    },
-    horizontalAlign: (el, value) => {
-      el.style.justifyContent = mapAlignmentValue(String(value));
-    },
-    verticalAlign: (el, value) => {
-      el.style.alignItems = mapAlignmentValue(String(value));
-    },
-    gap: (el, value) => {
-      el.style.gap = typeof value === "number" ? `${value}px` : String(value);
-    },
-    weight: (el, value) => {
-      el.style.flex = String(value);
-    },
-    flex: (el, value) => {
-      el.style.flex = String(value);
-    },
-    flexGrow: (el, value) => {
-      el.style.flexGrow = String(value);
-    },
-    flexShrink: (el, value) => {
-      el.style.flexShrink = String(value);
-    },
-    cursor: (el, value) => {
-      el.style.cursor = String(value);
-    },
-    overflow: (el, value) => {
-      el.style.overflow = String(value);
-    },
-    scrollable: (el, value) => {
-      if (value === true || value === "true") {
-        el.style.overflow = "auto";
-      } else if (value === false || value === "false") {
-        el.style.overflow = "hidden";
-      } else if (value === "vertical") {
-        el.style.overflowX = "hidden";
-        el.style.overflowY = "auto";
-      } else if (value === "horizontal") {
-        el.style.overflowX = "auto";
-        el.style.overflowY = "hidden";
-      } else if (value === "both") {
-        el.style.overflow = "auto";
-      } else {
-        el.style.overflow = String(value);
-      }
-    }
-  };
-});
-
-// 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 = {};
-    for (const [key, val] of value.entries()) {
-      obj[key] = toPlainObject(val);
-    }
-    return obj;
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => toPlainObject(item));
-  }
-  if (value && typeof value === "object") {
-    const obj = {};
-    for (const [key, val] of Object.entries(value)) {
-      obj[key] = toPlainObject(val);
-    }
-    return obj;
-  }
-  return value;
-}
-function extractActionDetails(value) {
-  if (typeof value === "string") {
-    if (!value.startsWith("@")) {
-      return { actionName: null, payload: {} };
-    }
-    let actionName = value.substring(1);
-    if (actionName.startsWith("actions.")) {
-      actionName = actionName.substring(8);
-    }
-    return { actionName, payload: {} };
-  }
-  if (value && typeof value === "object") {
-    const plain = toPlainObject(value);
-    const payload = {};
-    let actionName = null;
-    if (plain && typeof plain === "object") {
-      const actionValue = plain["0"];
-      if (typeof actionValue === "string" && actionValue.startsWith("@")) {
-        actionName = actionValue.substring(1);
-        if (actionName.startsWith("actions.")) {
-          actionName = actionName.substring(8);
-        }
-      }
-      for (const [key, val] of Object.entries(plain)) {
-        if (key !== "0") {
-          if (/^\d+$/.test(key) && val && typeof val === "object" && !Array.isArray(val)) {
-            for (const [innerKey, innerVal] of Object.entries(val)) {
-              payload[innerKey] = innerVal;
-            }
-          } else {
-            payload[key] = val;
-          }
-        }
-      }
-    }
-    return { actionName, payload };
-  }
-  return { actionName: null, payload: {} };
-}
-function extractEventData(event, element) {
-  const data = {
-    type: event.type,
-    timestamp: Date.now()
-  };
-  if (event instanceof MouseEvent) {
-    data.clientX = event.clientX;
-    data.clientY = event.clientY;
-    data.button = event.button;
-  }
-  if (event instanceof KeyboardEvent) {
-    data.key = event.key;
-    data.code = event.code;
-    data.ctrlKey = event.ctrlKey;
-    data.shiftKey = event.shiftKey;
-    data.altKey = event.altKey;
-    data.metaKey = event.metaKey;
-  }
-  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-    data.value = element.value;
-  }
-  if (element instanceof HTMLSelectElement) {
-    data.value = element.value;
-    data.selectedIndex = element.selectedIndex;
-  }
-  if (event.type === "submit" && element instanceof HTMLFormElement) {
-    data.formData = new FormData(element);
-  }
-  return data;
-}
-function createEventHandler(eventType, options = {}) {
-  return (element, value) => {
-    const { actionName, payload: customPayload } = extractActionDetails(value);
-    if (!actionName) {
-      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;
-      }
-      if (options.throttleMs) {
-        throttleTimer = disposableTimeout(() => {
-          throttleTimer = null;
-        }, options.throttleMs);
-      }
-      if (options.preventDefault) {
-        event.preventDefault();
-      }
-      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : options.extractPayload ? options.extractPayload(event, element) : extractEventData(event, element);
-      const engine = getEngine(element);
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      }
-    };
-    disposables.add(disposableListener(element, eventType, listener, {
-      passive: options.passive
-    }));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-      if (throttleTimer) {
-        throttleTimer.dispose();
-      }
-    });
-  };
-}
-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;
-      }
-      event.preventDefault();
-      const target = event.target;
-      const payload = Object.keys(customPayload).length > 0 ? { ...customPayload } : {
-        type: event.type,
-        timestamp: Date.now(),
-        key: keyEvent.key,
-        code: keyEvent.code,
-        value: target.value,
-        input: target.value,
-        ctrlKey: keyEvent.ctrlKey,
-        shiftKey: keyEvent.shiftKey,
-        altKey: keyEvent.altKey,
-        metaKey: keyEvent.metaKey
-      };
-      const engine = getEngine(element);
-      if (engine) {
-        engine.dispatchAction(actionName, payload);
-      }
-    };
-    disposables.add(disposableListener(element, "keydown", listener));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-    });
-  };
-}
-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: "longclick",
-          timestamp: Date.now(),
-          clientX: pointerEvent.clientX,
-          clientY: pointerEvent.clientY
-        };
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction(actionName, payload);
-        }
-        longClickTimer = null;
-      }, thresholdMs);
-    };
-    const cancelListener = () => {
-      if (longClickTimer) {
-        longClickTimer.dispose();
-        longClickTimer = null;
-      }
-    };
-    disposables.add(disposableListener(element, "pointerdown", downListener));
-    disposables.add(disposableListener(element, "pointerup", cancelListener));
-    disposables.add(disposableListener(element, "pointerleave", cancelListener));
-    disposables.addCallback(() => {
-      unregisterEvent(element, eventKey);
-      cancelListener();
-    });
-  };
-}
-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 })
-  };
-});
-
-// src/dom/applicators/typography.ts
-var exports_typography = {};
-__export(exports_typography, {
-  typographyHandlers: () => typographyHandlers
-});
-var typographyHandlers;
-var init_typography = __esm(() => {
-  typographyHandlers = {
-    textAlign: (el, value) => {
-      el.style.textAlign = String(value);
-    },
-    textTransform: (el, value) => {
-      el.style.textTransform = String(value);
-    },
-    textDecoration: (el, value) => {
-      el.style.textDecoration = String(value);
-    },
-    textDecorationColor: (el, value) => {
-      el.style.textDecorationColor = String(value);
-    },
-    textDecorationStyle: (el, value) => {
-      el.style.textDecorationStyle = String(value);
-    },
-    textDecorationThickness: (el, value) => {
-      el.style.textDecorationThickness = typeof value === "number" ? `${value}px` : String(value);
-    },
-    letterSpacing: (el, value) => {
-      el.style.letterSpacing = typeof value === "number" ? `${value}px` : String(value);
-    },
-    wordSpacing: (el, value) => {
-      el.style.wordSpacing = typeof value === "number" ? `${value}px` : String(value);
-    },
-    lineHeight: (el, value) => {
-      el.style.lineHeight = String(value);
-    },
-    textIndent: (el, value) => {
-      el.style.textIndent = typeof value === "number" ? `${value}px` : String(value);
-    },
-    textOverflow: (el, value) => {
-      el.style.textOverflow = String(value);
-    },
-    whiteSpace: (el, value) => {
-      el.style.whiteSpace = String(value);
-    },
-    wordBreak: (el, value) => {
-      el.style.wordBreak = String(value);
-    },
-    verticalAlign: (el, value) => {
-      el.style.verticalAlign = String(value);
-    },
-    fontVariant: (el, value) => {
-      el.style.fontVariant = String(value);
-    },
-    fontStretch: (el, value) => {
-      el.style.fontStretch = String(value);
-    },
-    fontStyle: (el, value) => {
-      el.style.fontStyle = String(value);
-    },
-    writingMode: (el, value) => {
-      el.style.writingMode = String(value);
-    },
-    maxLines: (el, value) => {
-      const lines = typeof value === "number" ? value : parseInt(String(value), 10);
-      if (!isNaN(lines) && lines > 0) {
-        el.style.display = "-webkit-box";
-        el.style.setProperty("-webkit-line-clamp", String(lines));
-        el.style.setProperty("-webkit-box-orient", "vertical");
-        el.style.overflow = "hidden";
-      }
-    }
-  };
-});
-
-// src/dom/applicators/transform.ts
-var exports_transform = {};
-__export(exports_transform, {
-  transformHandlers: () => transformHandlers
-});
-var transformHandlers;
-var init_transform = __esm(() => {
-  transformHandlers = {
-    transform: (el, value) => {
-      el.style.transform = String(value);
-    },
-    transformOrigin: (el, value) => {
-      el.style.transformOrigin = String(value);
-    },
-    translateX: (el, value) => {
-      const current = el.style.transform || "";
-      const val = typeof value === "number" ? `${value}px` : String(value);
-      el.style.transform = current ? `${current} translateX(${val})` : `translateX(${val})`;
-    },
-    translateY: (el, value) => {
-      const current = el.style.transform || "";
-      const val = typeof value === "number" ? `${value}px` : String(value);
-      el.style.transform = current ? `${current} translateY(${val})` : `translateY(${val})`;
-    },
-    translateZ: (el, value) => {
-      const current = el.style.transform || "";
-      const val = typeof value === "number" ? `${value}px` : String(value);
-      el.style.transform = current ? `${current} translateZ(${val})` : `translateZ(${val})`;
-    },
-    rotate: (el, value) => {
-      const current = el.style.transform || "";
-      const val = String(value);
-      el.style.transform = current ? `${current} rotate(${val})` : `rotate(${val})`;
-    },
-    rotateX: (el, value) => {
-      const current = el.style.transform || "";
-      const val = String(value);
-      el.style.transform = current ? `${current} rotateX(${val})` : `rotateX(${val})`;
-    },
-    rotateY: (el, value) => {
-      const current = el.style.transform || "";
-      const val = String(value);
-      el.style.transform = current ? `${current} rotateY(${val})` : `rotateY(${val})`;
-    },
-    rotateZ: (el, value) => {
-      const current = el.style.transform || "";
-      const val = String(value);
-      el.style.transform = current ? `${current} rotateZ(${val})` : `rotateZ(${val})`;
-    },
-    scale: (el, value) => {
-      const current = el.style.transform || "";
-      el.style.transform = current ? `${current} scale(${value})` : `scale(${value})`;
-    },
-    scaleX: (el, value) => {
-      const current = el.style.transform || "";
-      el.style.transform = current ? `${current} scaleX(${value})` : `scaleX(${value})`;
-    },
-    scaleY: (el, value) => {
-      const current = el.style.transform || "";
-      el.style.transform = current ? `${current} scaleY(${value})` : `scaleY(${value})`;
-    },
-    skew: (el, value) => {
-      const current = el.style.transform || "";
-      el.style.transform = current ? `${current} skew(${value})` : `skew(${value})`;
-    },
-    skewX: (el, value) => {
-      const current = el.style.transform || "";
-      el.style.transform = current ? `${current} skewX(${value})` : `skewX(${value})`;
-    },
-    skewY: (el, value) => {
-      const current = el.style.transform || "";
-      el.style.transform = current ? `${current} skewY(${value})` : `skewY(${value})`;
-    },
-    perspective: (el, value) => {
-      el.style.perspective = typeof value === "number" ? `${value}px` : String(value);
-    }
-  };
-});
-
-// src/dom/applicators/effects.ts
-var exports_effects = {};
-__export(exports_effects, {
-  effectsHandlers: () => effectsHandlers
-});
-var effectsHandlers;
-var init_effects = __esm(() => {
-  effectsHandlers = {
-    boxShadow: (el, 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);
-    },
-    filter: (el, value) => {
-      el.style.filter = String(value);
-    },
-    backdropFilter: (el, value) => {
-      el.style.backdropFilter = String(value);
-    },
-    blur: (el, value) => {
-      const val = typeof value === "number" ? `${value}px` : String(value);
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} blur(${val})` : `blur(${val})`;
-    },
-    brightness: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} brightness(${value})` : `brightness(${value})`;
-    },
-    contrast: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} contrast(${value})` : `contrast(${value})`;
-    },
-    grayscale: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} grayscale(${value})` : `grayscale(${value})`;
-    },
-    hueRotate: (el, value) => {
-      const val = String(value);
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} hue-rotate(${val})` : `hue-rotate(${val})`;
-    },
-    invert: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} invert(${value})` : `invert(${value})`;
-    },
-    saturate: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} saturate(${value})` : `saturate(${value})`;
-    },
-    sepia: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} sepia(${value})` : `sepia(${value})`;
-    },
-    dropShadow: (el, value) => {
-      const current = el.style.filter || "";
-      el.style.filter = current ? `${current} drop-shadow(${value})` : `drop-shadow(${value})`;
-    },
-    mixBlendMode: (el, value) => {
-      el.style.mixBlendMode = String(value);
-    },
-    backgroundBlendMode: (el, value) => {
-      el.style.backgroundBlendMode = String(value);
-    },
-    clipPath: (el, value) => {
-      el.style.clipPath = String(value);
-    },
-    mask: (el, value) => {
-      el.style.mask = String(value);
-    },
-    maskImage: (el, value) => {
-      el.style.maskImage = String(value);
-    }
-  };
-});
-
-// src/dom/applicators/advanced-layout.ts
-var exports_advanced_layout = {};
-__export(exports_advanced_layout, {
-  advancedLayoutHandlers: () => advancedLayoutHandlers
-});
-var advancedLayoutHandlers;
-var init_advanced_layout = __esm(() => {
-  init_layout();
-  advancedLayoutHandlers = {
-    flexDirection: (el, value) => {
-      el.style.flexDirection = String(value);
-    },
-    flexWrap: (el, value) => {
-      el.style.flexWrap = String(value);
-    },
-    flexBasis: (el, value) => {
-      el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
-    },
-    justifyContent: (el, value) => {
-      el.style.justifyContent = mapAlignmentValue(String(value));
-    },
-    alignItems: (el, value) => {
-      el.style.alignItems = mapAlignmentValue(String(value));
-    },
-    alignContent: (el, value) => {
-      el.style.alignContent = String(value);
-    },
-    alignSelf: (el, value) => {
-      el.style.alignSelf = String(value);
-    },
-    order: (el, value) => {
-      el.style.order = String(value);
-    },
-    gridTemplateColumns: (el, value) => {
-      el.style.gridTemplateColumns = String(value);
-    },
-    gridTemplateRows: (el, value) => {
-      el.style.gridTemplateRows = String(value);
-    },
-    gridColumns: (el, value) => {
-      if (typeof value === "number") {
-        el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
-      } else {
-        el.style.gridTemplateColumns = String(value);
-      }
-    },
-    gridRows: (el, value) => {
-      if (typeof value === "number") {
-        el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
-      } else {
-        el.style.gridTemplateRows = String(value);
-      }
-    },
-    gridTemplateAreas: (el, value) => {
-      el.style.gridTemplateAreas = String(value);
-    },
-    gridColumn: (el, value) => {
-      el.style.gridColumn = String(value);
-    },
-    gridRow: (el, value) => {
-      el.style.gridRow = String(value);
-    },
-    gridArea: (el, value) => {
-      el.style.gridArea = String(value);
-    },
-    gridAutoFlow: (el, value) => {
-      el.style.gridAutoFlow = String(value);
-    },
-    gridAutoColumns: (el, value) => {
-      el.style.gridAutoColumns = String(value);
-    },
-    gridAutoRows: (el, value) => {
-      el.style.gridAutoRows = String(value);
-    },
-    rowGap: (el, value) => {
-      el.style.rowGap = typeof value === "number" ? `${value}px` : String(value);
-    },
-    columnGap: (el, value) => {
-      el.style.columnGap = typeof value === "number" ? `${value}px` : String(value);
-    },
-    placeItems: (el, value) => {
-      el.style.placeItems = String(value);
-    },
-    placeContent: (el, value) => {
-      el.style.placeContent = String(value);
-    },
-    placeSelf: (el, value) => {
-      el.style.placeSelf = String(value);
-    },
-    position: (el, value) => {
-      el.style.position = String(value);
-    },
-    top: (el, value) => {
-      el.style.top = typeof value === "number" ? `${value}px` : String(value);
-    },
-    right: (el, value) => {
-      el.style.right = typeof value === "number" ? `${value}px` : String(value);
-    },
-    bottom: (el, value) => {
-      el.style.bottom = typeof value === "number" ? `${value}px` : String(value);
-    },
-    left: (el, value) => {
-      el.style.left = typeof value === "number" ? `${value}px` : String(value);
-    },
-    inset: (el, value) => {
-      el.style.inset = typeof value === "number" ? `${value}px` : String(value);
-    },
-    zIndex: (el, value) => {
-      el.style.zIndex = String(value);
-    }
-  };
-});
-
-// src/dom/applicators/background.ts
-var exports_background = {};
-__export(exports_background, {
-  backgroundHandlers: () => backgroundHandlers
-});
-var backgroundHandlers;
-var init_background = __esm(() => {
-  backgroundHandlers = {
-    backgroundImage: (el, value) => {
-      el.style.backgroundImage = String(value);
-    },
-    backgroundSize: (el, value) => {
-      el.style.backgroundSize = String(value);
-    },
-    backgroundPosition: (el, value) => {
-      el.style.backgroundPosition = String(value);
-    },
-    backgroundRepeat: (el, value) => {
-      el.style.backgroundRepeat = String(value);
-    },
-    backgroundAttachment: (el, value) => {
-      el.style.backgroundAttachment = String(value);
-    },
-    backgroundClip: (el, value) => {
-      el.style.backgroundClip = String(value);
-    },
-    backgroundOrigin: (el, value) => {
-      el.style.backgroundOrigin = String(value);
-    },
-    linearGradient: (el, value) => {
-      el.style.backgroundImage = `linear-gradient(${value})`;
-    },
-    radialGradient: (el, value) => {
-      el.style.backgroundImage = `radial-gradient(${value})`;
-    },
-    conicGradient: (el, value) => {
-      el.style.backgroundImage = `conic-gradient(${value})`;
-    }
-  };
-});
-
-// src/dom/applicators/display.ts
-var exports_display = {};
-__export(exports_display, {
-  displayHandlers: () => displayHandlers
-});
-var displayHandlers;
-var init_display = __esm(() => {
-  displayHandlers = {
-    display: (el, value) => {
-      el.style.display = String(value);
-    },
-    visibility: (el, value) => {
-      el.style.visibility = String(value);
-    },
-    overflowX: (el, value) => {
-      el.style.overflowX = String(value);
-    },
-    overflowY: (el, value) => {
-      el.style.overflowY = String(value);
-    },
-    pointerEvents: (el, value) => {
-      el.style.pointerEvents = String(value);
-    },
-    userSelect: (el, value) => {
-      el.style.userSelect = String(value);
-    },
-    resize: (el, value) => {
-      el.style.resize = String(value);
-    },
-    boxSizing: (el, value) => {
-      el.style.boxSizing = String(value);
-    },
-    aspectRatio: (el, value) => {
-      el.style.aspectRatio = String(value);
-    },
-    objectFit: (el, value) => {
-      el.style.objectFit = String(value);
-    },
-    objectPosition: (el, value) => {
-      el.style.objectPosition = String(value);
-    }
-  };
-});
-
-// src/dom/applicators/transition.ts
-var exports_transition = {};
-__export(exports_transition, {
-  transitionHandlers: () => transitionHandlers
-});
-var transitionHandlers;
-var init_transition = __esm(() => {
-  transitionHandlers = {
-    transition: (el, value) => {
-      el.style.transition = String(value);
-    },
-    transitionProperty: (el, value) => {
-      el.style.transitionProperty = String(value);
-    },
-    transitionDuration: (el, value) => {
-      el.style.transitionDuration = String(value);
-    },
-    transitionTimingFunction: (el, value) => {
-      el.style.transitionTimingFunction = String(value);
-    },
-    transitionDelay: (el, value) => {
-      el.style.transitionDelay = String(value);
-    },
-    animation: (el, value) => {
-      el.style.animation = String(value);
-    },
-    animationName: (el, value) => {
-      el.style.animationName = String(value);
-    },
-    animationDuration: (el, value) => {
-      el.style.animationDuration = String(value);
-    },
-    animationTimingFunction: (el, value) => {
-      el.style.animationTimingFunction = String(value);
-    },
-    animationDelay: (el, value) => {
-      el.style.animationDelay = String(value);
-    },
-    animationIterationCount: (el, value) => {
-      el.style.animationIterationCount = String(value);
-    },
-    animationDirection: (el, value) => {
-      el.style.animationDirection = String(value);
-    },
-    animationFillMode: (el, value) => {
-      el.style.animationFillMode = String(value);
-    },
-    animationPlayState: (el, value) => {
-      el.style.animationPlayState = String(value);
-    }
-  };
-});
-
-// 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;
-  constructor() {
-    this.registerDefaults();
-  }
-  register(name, handler) {
-    this.handlers.set(name, handler);
-  }
-  apply(element, name, value) {
-    const { handlerName, argKey, aggregate, fallbackName } = this.parseApplicatorName(name);
-    const handler = this.handlers.get(handlerName);
-    const state = this.getElementState(element);
-    const previous = state.get(handlerName);
-    if (aggregate && argKey !== null) {
-      const merged = this.mergeAggregateState(previous, argKey, this.normalizeValue(value));
-      state.set(handlerName, merged);
-      if (handler) {
-        handler(element, merged);
-      } else {
-        this.setStyleProperty(element, fallbackName, value);
-      }
-      return;
-    }
-    if (handler) {
-      if (this.isEventApplicator(handlerName)) {
-        const normalizedValue = this.normalizeEventValue(previous, value);
-        state.set(handlerName, normalizedValue);
-        handler(element, normalizedValue);
-      } else {
-        state.set(handlerName, value);
-        handler(element, value);
-      }
-    } else {
-      this.setStyleProperty(element, handlerName, value);
-    }
-  }
-  parseApplicatorName(name) {
-    const dotIndex = name.indexOf(".");
-    if (dotIndex === -1) {
-      return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };
-    }
-    const baseName = name.substring(0, dotIndex);
-    const argKey = name.substring(dotIndex + 1);
-    if (this.handlers.has(baseName) && this.isEventApplicator(baseName)) {
-      return { handlerName: baseName, argKey, aggregate: true, fallbackName: name };
-    }
-    if (/^\d+$/.test(argKey)) {
-      return { handlerName: baseName, argKey: null, aggregate: false, fallbackName: baseName };
-    }
-    return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };
-  }
-  getElementState(element) {
-    let state = this.elementState.get(element);
-    if (!state) {
-      state = new Map;
-      this.elementState.set(element, state);
-    }
-    return state;
-  }
-  mergeAggregateState(previous, argKey, value) {
-    const base = this.cloneAggregateState(previous);
-    if (value === undefined) {
-      delete base[argKey];
-    } else {
-      base[argKey] = value;
-    }
-    return base;
-  }
-  cloneAggregateState(previous) {
-    if (previous && typeof previous === "object" && !Array.isArray(previous)) {
-      return { ...previous };
-    }
-    if (typeof previous === "string") {
-      return { "0": previous };
-    }
-    return {};
-  }
-  normalizeEventValue(previous, value) {
-    const normalizedInput = this.normalizeValue(value);
-    const base = this.cloneAggregateState(previous);
-    if (normalizedInput && typeof normalizedInput === "object" && !Array.isArray(normalizedInput)) {
-      const next = { ...base, ...normalizedInput };
-      if (!Object.prototype.hasOwnProperty.call(next, "0") && base["0"] !== undefined) {
-        next["0"] = base["0"];
-      }
-      return next;
-    }
-    if (normalizedInput !== undefined) {
-      base["0"] = normalizedInput;
-    }
-    return base;
-  }
-  normalizeValue(value) {
-    if (value instanceof Map) {
-      const obj = {};
-      for (const [key, val] of value.entries()) {
-        obj[key] = this.normalizeValue(val);
-      }
-      return obj;
-    }
-    if (Array.isArray(value)) {
-      return value.map((item) => this.normalizeValue(item));
-    }
-    if (value && typeof value === "object") {
-      const obj = {};
-      for (const [key, val] of Object.entries(value)) {
-        obj[key] = this.normalizeValue(val);
-      }
-      return obj;
-    }
-    return value;
-  }
-  isEventApplicator(name) {
-    return /^on[A-Z]/.test(name);
-  }
-  applyAll(element, applicators) {
-    const grouped = new Map;
-    for (const [name, value] of Object.entries(applicators)) {
-      const dotIndex = name.indexOf(".");
-      const baseName = dotIndex !== -1 ? name.substring(0, dotIndex) : name;
-      const argKey = dotIndex !== -1 ? name.substring(dotIndex + 1) : null;
-      if (!grouped.has(baseName)) {
-        grouped.set(baseName, {});
-      }
-      const args = grouped.get(baseName);
-      if (argKey !== null) {
-        args[argKey] = value;
-      } else {
-        args["__value"] = value;
-      }
-    }
-    for (const [baseName, args] of grouped.entries()) {
-      if (Object.keys(args).length === 1) {
-        if ("__value" in args) {
-          this.apply(element, baseName, args["__value"]);
-        } else if ("0" in args) {
-          this.apply(element, baseName, args["0"]);
-        } else {
-          this.apply(element, baseName, args);
-        }
-      } else {
-        this.apply(element, baseName, args);
-      }
-    }
-  }
-  setStyleProperty(element, name, value) {
-    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)) {
-      return `${value}px`;
-    }
-    return String(value);
-  }
-  needsUnit(prop) {
-    const unitless = [
-      "opacity",
-      "z-index",
-      "font-weight",
-      "line-height",
-      "flex",
-      "flex-grow",
-      "flex-shrink",
-      "order"
-    ];
-    return !unitless.includes(prop);
-  }
-  registerDefaults() {
-    const { paddingHandler: paddingHandler2 } = __toCommonJS(exports_padding);
-    const { marginHandler: marginHandler2 } = __toCommonJS(exports_margin);
-    const { colorHandlers: colorHandlers2 } = (init_color(), __toCommonJS(exports_color));
-    const { borderHandlers: borderHandlers2 } = (init_border(), __toCommonJS(exports_border));
-    const { sizeHandlers: sizeHandlers2 } = (init_size(), __toCommonJS(exports_size));
-    const { fontHandlers: fontHandlers2 } = (init_font(), __toCommonJS(exports_font));
-    const { layoutHandlers: layoutHandlers2 } = (init_layout(), __toCommonJS(exports_layout));
-    const { eventHandlers: eventHandlers2 } = (init_events(), __toCommonJS(exports_events));
-    const { typographyHandlers: typographyHandlers2 } = (init_typography(), __toCommonJS(exports_typography));
-    const { transformHandlers: transformHandlers2 } = (init_transform(), __toCommonJS(exports_transform));
-    const { effectsHandlers: effectsHandlers2 } = (init_effects(), __toCommonJS(exports_effects));
-    const { advancedLayoutHandlers: advancedLayoutHandlers2 } = (init_advanced_layout(), __toCommonJS(exports_advanced_layout));
-    const { backgroundHandlers: backgroundHandlers2 } = (init_background(), __toCommonJS(exports_background));
-    const { displayHandlers: displayHandlers2 } = (init_display(), __toCommonJS(exports_display));
-    const { transitionHandlers: transitionHandlers2 } = (init_transition(), __toCommonJS(exports_transition));
-    this.register("padding", paddingHandler2);
-    this.register("margin", marginHandler2);
-    for (const [name, handler] of Object.entries(colorHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(borderHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(sizeHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(fontHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(layoutHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(eventHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(typographyHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(transformHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(effectsHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(advancedLayoutHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(backgroundHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(displayHandlers2)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(transitionHandlers2)) {
-      this.register(name, handler);
-    }
-  }
-}
-export {
-  ApplicatorRegistry
-};
-
-//# debugId=50A2AE96762A922B64756E2164756E21