@hypen-space/web 0.4.36 → 0.4.38

package/dist/dom/applicators/index.js

@@ -1,1787 +1,403 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/dom/applicators/padding.ts
-var getNumericValue = (value) => {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "object" && value["0"] !== undefined)
-    return Number(value["0"]);
-  if (typeof value === "string")
-    return parseFloat(value);
-  return null;
-};
-var paddingHandler = (el, value) => {
-  if (typeof value === "number") {
-    el.style.padding = `${value}px`;
-  } else if (typeof value === "object") {
-    if (value["0"] !== undefined && Object.keys(value).length === 1) {
-      el.style.padding = `${value["0"]}px`;
-    } else {
-      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);
-  }
-};
-var paddingTopHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingTop = `${v}px`;
-};
-var paddingBottomHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingBottom = `${v}px`;
-};
-var paddingLeftHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingLeft = `${v}px`;
-};
-var paddingRightHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null)
-    el.style.paddingRight = `${v}px`;
-};
-var paddingHorizontalHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.paddingLeft = `${v}px`;
-    el.style.paddingRight = `${v}px`;
-  }
-};
-var paddingVerticalHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.paddingTop = `${v}px`;
-    el.style.paddingBottom = `${v}px`;
-  }
-};
-
-// src/dom/applicators/margin.ts
-var getNumericValue2 = (value) => {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "object" && value["0"] !== undefined)
-    return Number(value["0"]);
-  if (typeof value === "string")
-    return parseFloat(value);
-  return null;
-};
-var marginHandler = (el, value) => {
-  if (typeof value === "number") {
-    el.style.margin = `${value}px`;
-  } else if (typeof value === "object") {
-    if (value["0"] !== undefined && Object.keys(value).length === 1) {
-      el.style.margin = `${value["0"]}px`;
-    } else {
-      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);
-  }
-};
-var marginTopHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginTop = `${v}px`;
-};
-var marginBottomHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginBottom = `${v}px`;
-};
-var marginLeftHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginLeft = `${v}px`;
-};
-var marginRightHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null)
-    el.style.marginRight = `${v}px`;
-};
-var marginHorizontalHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null) {
-    el.style.marginLeft = `${v}px`;
-    el.style.marginRight = `${v}px`;
-  }
-};
-var marginVerticalHandler = (el, value) => {
-  const v = getNumericValue2(value);
-  if (v !== null) {
-    el.style.marginTop = `${v}px`;
-    el.style.marginBottom = `${v}px`;
-  }
-};
-
-// src/dom/applicators/color.ts
-var 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 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
-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 = {
-  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;
-    if (fraction === 1) {
-      el.style.alignSelf = "stretch";
-      el.style.width = "100%";
-      el.style.minWidth = "0";
-    } else {
-      el.style.width = `${fraction * 100}%`;
-    }
-    el.style.justifySelf = "stretch";
-  },
-  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}%`;
-    el.style.alignSelf = "stretch";
-    el.style.minWidth = "0";
-  }
-};
-
-// src/dom/applicators/font.ts
-var loadedGoogleFonts = new Set;
-var 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"
-]);
-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 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);
-  }
-};
-var 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
-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 = {
-  verticalAlignment: (el, value) => {
-    const val = mapAlignmentValue(String(value));
-    const display = el.style.display || getComputedStyle(el).display;
-    const flexDirection = el.style.flexDirection || getComputedStyle(el).flexDirection;
-    if (display === "grid") {
-      el.style.alignItems = val;
-    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
-      el.style.justifyContent = val;
-    } else {
-      el.style.alignItems = val;
-    }
-  },
-  horizontalAlignment: (el, value) => {
-    const val = mapAlignmentValue(String(value));
-    const display = el.style.display || getComputedStyle(el).display;
-    const flexDirection = el.style.flexDirection || getComputedStyle(el).flexDirection;
-    if (display === "grid") {
-      el.style.justifyItems = val;
-    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
-      el.style.alignItems = val;
-    } else if (flexDirection === "row" || flexDirection === "row-reverse") {
-      el.style.justifyContent = val;
-      if (val !== "flex-start" && el.style.overflow !== "auto" && el.style.overflowX !== "auto") {
-        el.style.width = "100%";
-      }
-    } 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);
-    el.dataset.hypenFlex = "true";
-  },
-  flex: (el, value) => {
-    el.style.flex = String(value);
-    el.dataset.hypenFlex = "true";
-  },
-  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/disposable";
-var elementDataMap = new WeakMap;
-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);
-}
-var HYPEN_ENGINE_SYMBOL = Symbol.for("hypen.engine");
-var REGISTERED_EVENTS_SYMBOL = Symbol.for("hypen.registeredEvents");
-var KEY_TARGET_SYMBOL = Symbol.for("hypen.keyTarget");
-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;
-}
-
-// src/dom/applicators/events.ts
-import {
-  getElementDisposables as getElementDisposables2,
-  disposableListener,
-  disposableTimeout
-} from "@hypen-space/core/disposable";
-import { frameworkLoggers } from "@hypen-space/core/logger";
-var log = frameworkLoggers.events;
-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);
+/**
+ * Applicator Registry
+ *
+ * Handles style applicators (modifiers) for Hypen components
+ */
+// Static imports for all applicator handlers (avoids circular dependency)
+import { paddingHandler, paddingTopHandler, paddingBottomHandler, paddingLeftHandler, paddingRightHandler, paddingHorizontalHandler, paddingVerticalHandler, } from "./padding.js";
+import { marginHandler, marginTopHandler, marginBottomHandler, marginLeftHandler, marginRightHandler, marginHorizontalHandler, marginVerticalHandler, } from "./margin.js";
+import { colorHandlers } from "./color.js";
+import { borderHandlers } from "./border.js";
+import { sizeHandlers } from "./size.js";
+import { fontHandlers } from "./font.js";
+import { layoutHandlers } from "./layout.js";
+import { eventHandlers } from "./events.js";
+import { typographyHandlers } from "./typography.js";
+import { transformHandlers } from "./transform.js";
+import { effectsHandlers } from "./effects.js";
+import { advancedLayoutHandlers } from "./advanced-layout.js";
+import { backgroundHandlers } from "./background.js";
+import { displayHandlers } from "./display.js";
+import { transitionHandlers } from "./transition.js";
+/**
+ * Tailwind breakpoint values for responsive variants
+ */
+const BREAKPOINTS = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+};
+/**
+ * Singleton stylesheet for variant CSS rules
+ */
+let variantStyleSheet = null;
+/**
+ * Track inserted rules to avoid duplicates
+ */
+const insertedRules = new Set();
+/**
+ * Get or create the variant stylesheet
+ */
+function getVariantStyleSheet() {
+    if (!variantStyleSheet) {
+        const style = document.createElement('style');
+        style.id = 'hypen-variants';
+        document.head.appendChild(style);
+        variantStyleSheet = style.sheet;
     }
-    return obj;
-  }
-  return value;
+    return variantStyleSheet;
 }
-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);
+/**
+ * Generate a simple hash for deduplication
+ */
+function hashValue(value) {
+    return String(value).replace(/[^a-zA-Z0-9]/g, '').slice(0, 8);
+}
+export class ApplicatorRegistry {
+    handlers = new Map();
+    elementState = new WeakMap();
+    constructor() {
+        this.registerDefaults();
+    }
+    /**
+     * Register an applicator handler
+     */
+    register(name, handler) {
+        this.handlers.set(name, handler);
+    }
+    /**
+     * Apply an applicator to an element
+     */
+    apply(element, name, value) {
+        // Parse applicator metadata so we can normalize event arguments and retain legacy behavior
+        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) {
+            // Merge event payload updates with the previously applied arguments so handlers
+            // always receive the full payload object (prevents stale dispatch data)
+            const merged = this.mergeAggregateState(previous, argKey, this.normalizeValue(value));
+            state.set(handlerName, merged);
+            if (handler) {
+                handler(element, merged);
+            }
+            else {
+                // Fallback: set as CSS property using the original name if no handler exists
+                this.setStyleProperty(element, fallbackName, value);
+            }
+            return;
         }
-      }
-      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;
+        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 {
-            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) {
-      log.warn(`${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) {
-        try {
-          engine.dispatchAction(actionName, payload);
-        } catch (err) {
-          log.error(`Error dispatching action "${actionName}":`, err);
+        else {
+            // Fallback: set as CSS property
+            this.setStyleProperty(element, handlerName, value);
         }
-      }
-    };
-    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) {
-      log.warn(`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) {
-      log.warn(`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);
+    /**
+     * Parse applicator name to handle indexed and event argument formats
+     * e.g., "fontSize.0" -> { handlerName: "fontSize" }
+     *       "onClick.id" -> { handlerName: "onClick", aggregate: true, argKey: "id" }
+     * Keeps compound names like "padding.top" as-is so they can fall back to CSS.
+     */
+    parseApplicatorName(name) {
+        const dotIndex = name.indexOf('.');
+        if (dotIndex === -1) {
+            return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };
         }
-        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
-  };
-};
-var 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
-  };
-};
-var focusPayload = (event, element) => ({
-  type: event.type,
-  timestamp: Date.now(),
-  value: element.value ?? undefined
-});
-var mousePayload = (event, _element) => {
-  const mouseEvent = event;
-  return {
-    type: event.type,
-    timestamp: Date.now(),
-    clientX: mouseEvent.clientX,
-    clientY: mouseEvent.clientY
-  };
-};
-var 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),
-  onLongPress: createLongClickHandler(500),
-  onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
-  onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
-  onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
-  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
-  bind: (element, value) => {
-    const bindPath = typeof value === "string" ? value : null;
-    if (!bindPath)
-      return;
-    const disposables = getElementDisposables2(element);
-    const eventKey = `bind:${bindPath}`;
-    if (getRegisteredEvents(element).has(eventKey))
-      return;
-    registerEvent(element, eventKey);
-    const hypenType = element.dataset?.hypenType;
-    if (hypenType === "checkbox" || hypenType === "switch") {
-      const input = element.querySelector('input[type="checkbox"]');
-      if (!input)
-        return;
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: input.checked
-          });
+        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 };
         }
-      };
-      disposables.add(disposableListener(input, "change", listener, { passive: true }));
-    } else if (element instanceof HTMLSelectElement) {
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: element.value
-          });
+        if (/^\d+$/.test(argKey)) {
+            return { handlerName: baseName, argKey: null, aggregate: false, fallbackName: baseName };
         }
-      };
-      disposables.add(disposableListener(element, "change", listener, { passive: true }));
-    } else if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-      const listener = () => {
-        const engine = getEngine(element);
-        if (engine) {
-          engine.dispatchAction("__hypen_bind", {
-            path: bindPath,
-            value: element.value
-          });
+        return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };
+    }
+    /**
+     * Get or initialize per-element applicator state used for merging event payloads
+     */
+    getElementState(element) {
+        let state = this.elementState.get(element);
+        if (!state) {
+            state = new Map();
+            this.elementState.set(element, state);
         }
-      };
-      disposables.add(disposableListener(element, "input", listener, { passive: true }));
-    } else {
-      log.warn(`.bind() is not supported on element type "${element.dataset?.hypenType || element.tagName}". ` + `Supported types: input, textarea, checkbox, switch, select.`);
-      unregisterEvent(element, eventKey);
-      return;
-    }
-    disposables.addCallback(() => unregisterEvent(element, eventKey));
-  }
-};
-
-// src/dom/applicators/typography.ts
-var 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 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 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 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);
-  },
-  alignContent: (el, value) => {
-    el.style.alignContent = 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 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 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 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);
+        return state;
+    }
+    /**
+     * Merge updated event argument into previously stored payload snapshot
+     */
+    mergeAggregateState(previous, argKey, value) {
+        const base = this.cloneAggregateState(previous);
+        if (value === undefined) {
+            delete base[argKey];
         }
-      } 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);
+        else {
+            base[argKey] = value;
         }
-        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);
+        return base;
+    }
+    /**
+     * Convert stored state into a mutable payload object we can merge into
+     */
+    cloneAggregateState(previous) {
+        if (previous && typeof previous === "object" && !Array.isArray(previous)) {
+            return { ...previous };
+        }
+        if (typeof previous === "string") {
+            return { "0": previous };
+        }
+        return {};
+    }
+    /**
+     * Normalize event value updates so action payload arguments persist across SetProp orderings
+     */
+    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;
+    }
+    /**
+     * Convert Maps (from WASM) and nested structures into plain JS values we can merge safely
+     */
+    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;
+    }
+    /**
+     * Determine if a handler name follows the event applicator naming convention
+     */
+    isEventApplicator(name) {
+        return /^on[A-Z]/.test(name);
+    }
+    /**
+     * Apply multiple applicators
+     */
+    applyAll(element, applicators) {
+        //console.log(`[ApplicatorRegistry] Applying applicators:`, applicators);
+        // Group applicators by their base name (treat applicators like components with arguments)
+        // e.g., "onClick.0", "onClick.id", "onClick.title" -> onClick: {0: ..., id: ..., title: ...}
+        const grouped = new Map();
+        for (const [name, value] of Object.entries(applicators)) {
+            // Extract base name and argument key
+            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) {
+                // This is an argument (e.g., "onClick.0" or "onClick.id")
+                args[argKey] = value;
+            }
+            else {
+                // This is a single-value applicator (e.g., "padding")
+                args['__value'] = value;
+            }
+        }
+        // Apply each applicator with its arguments
+        for (const [baseName, args] of grouped.entries()) {
+            // If it's a single value (either __value or just "0"), pass just the value
+            if (Object.keys(args).length === 1) {
+                if ('__value' in args) {
+                    this.apply(element, baseName, args['__value']);
+                }
+                else if ('0' in args) {
+                    // Single positional argument (e.g., padding.0 -> just pass the value)
+                    this.apply(element, baseName, args['0']);
+                }
+                else {
+                    // Single named argument? Pass the whole object
+                    this.apply(element, baseName, args);
+                }
+            }
+            else {
+                // Multiple arguments - pass the entire args object
+                this.apply(element, baseName, args);
+            }
         }
-        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() {
-    this.register("padding", paddingHandler);
-    this.register("paddingTop", paddingTopHandler);
-    this.register("paddingBottom", paddingBottomHandler);
-    this.register("paddingLeft", paddingLeftHandler);
-    this.register("paddingRight", paddingRightHandler);
-    this.register("paddingHorizontal", paddingHorizontalHandler);
-    this.register("paddingVertical", paddingVerticalHandler);
-    this.register("margin", marginHandler);
-    this.register("marginTop", marginTopHandler);
-    this.register("marginBottom", marginBottomHandler);
-    this.register("marginLeft", marginLeftHandler);
-    this.register("marginRight", marginRightHandler);
-    this.register("marginHorizontal", marginHorizontalHandler);
-    this.register("marginVertical", marginVerticalHandler);
-    for (const [name, handler] of Object.entries(colorHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(borderHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(sizeHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(fontHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(layoutHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(eventHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(typographyHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(transformHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(effectsHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(advancedLayoutHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(backgroundHandlers)) {
-      this.register(name, handler);
-    }
-    for (const [name, handler] of Object.entries(displayHandlers)) {
-      this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(transitionHandlers)) {
-      this.register(name, handler);
+    /**
+     * Set a CSS property with automatic unit handling and variant support
+     */
+    setStyleProperty(element, name, value) {
+        const atIndex = name.indexOf('@');
+        const colonIndex = name.indexOf(':');
+        // Responsive variant: padding@md, width@lg, etc.
+        if (atIndex !== -1) {
+            const prop = name.slice(0, atIndex);
+            const breakpoint = name.slice(atIndex + 1);
+            const minWidth = BREAKPOINTS[breakpoint];
+            if (minWidth) {
+                const cssName = this.toKebabCase(prop);
+                const cssValue = this.formatCssValue(cssName, value);
+                const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${breakpoint}-${hashValue(value)}`;
+                const ruleKey = `${className}:${cssValue}`;
+                // Avoid duplicate rule insertion
+                if (!insertedRules.has(ruleKey)) {
+                    const sheet = getVariantStyleSheet();
+                    sheet.insertRule(`@media (min-width: ${minWidth}) { .${className} { ${cssName}: ${cssValue}; } }`, sheet.cssRules.length);
+                    insertedRules.add(ruleKey);
+                }
+                element.classList.add(className);
+            }
+            return;
+        }
+        // State variant: background-color:hover, border-color:focus, etc.
+        if (colonIndex !== -1) {
+            const prop = name.slice(0, colonIndex);
+            const state = name.slice(colonIndex + 1);
+            // Only handle known CSS pseudo-states
+            const validStates = ['hover', 'focus', 'active', 'disabled', 'focus-visible', 'focus-within'];
+            if (validStates.includes(state)) {
+                const cssName = this.toKebabCase(prop);
+                const cssValue = this.formatCssValue(cssName, value);
+                const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${state}-${hashValue(value)}`;
+                const ruleKey = `${className}:${cssValue}`;
+                // Avoid duplicate rule insertion
+                if (!insertedRules.has(ruleKey)) {
+                    const sheet = getVariantStyleSheet();
+                    sheet.insertRule(`.${className}:${state} { ${cssName}: ${cssValue}; }`, sheet.cssRules.length);
+                    insertedRules.add(ruleKey);
+                }
+                element.classList.add(className);
+            }
+            return;
+        }
+        // Normal property: convert camelCase to kebab-case and apply
+        const cssName = this.toKebabCase(name);
+        element.style.setProperty(cssName, this.formatCssValue(cssName, value));
+    }
+    /**
+     * Convert camelCase to kebab-case
+     */
+    toKebabCase(name) {
+        return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+    }
+    /**
+     * Format a CSS value with automatic unit handling
+     */
+    formatCssValue(cssName, value) {
+        if (typeof value === "number" && this.needsUnit(cssName)) {
+            return `${value}px`;
+        }
+        return String(value);
+    }
+    /**
+     * Check if a property needs a unit
+     */
+    needsUnit(prop) {
+        const unitless = [
+            "opacity",
+            "z-index",
+            "font-weight",
+            "line-height",
+            "flex",
+            "flex-grow",
+            "flex-shrink",
+            "order",
+        ];
+        return !unitless.includes(prop);
+    }
+    /**
+     * Register default applicator handlers
+     * Uses statically imported handlers (defined at top of file) to avoid circular dependencies
+     */
+    registerDefaults() {
+        this.register("padding", paddingHandler);
+        this.register("paddingTop", paddingTopHandler);
+        this.register("paddingBottom", paddingBottomHandler);
+        this.register("paddingLeft", paddingLeftHandler);
+        this.register("paddingRight", paddingRightHandler);
+        this.register("paddingHorizontal", paddingHorizontalHandler);
+        this.register("paddingVertical", paddingVerticalHandler);
+        this.register("margin", marginHandler);
+        this.register("marginTop", marginTopHandler);
+        this.register("marginBottom", marginBottomHandler);
+        this.register("marginLeft", marginLeftHandler);
+        this.register("marginRight", marginRightHandler);
+        this.register("marginHorizontal", marginHorizontalHandler);
+        this.register("marginVertical", marginVerticalHandler);
+        for (const [name, handler] of Object.entries(colorHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(borderHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(sizeHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(fontHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(layoutHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(eventHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(typographyHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(transformHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(effectsHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(advancedLayoutHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(backgroundHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(displayHandlers)) {
+            this.register(name, handler);
+        }
+        for (const [name, handler] of Object.entries(transitionHandlers)) {
+            this.register(name, handler);
+        }
     }
-  }
 }
-export {
-  ApplicatorRegistry
-};
-
-//# debugId=B381B58060F7445564756E2164756E21
+//# sourceMappingURL=index.js.map