@hypen-space/web 0.3.8 → 0.3.9

package/dist/src/dom/index.js

@@ -51,25 +51,10 @@ var exports_row = {};
 __export(exports_row, {
   rowHandler: () => rowHandler
 });
-function ensureRowStyles() {
-  if (rowStylesInjected)
-    return;
-  rowStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-row-styles";
-  style.textContent = `
-    [data-hypen-type="row"] > * {
-      flex: 1 1 0%;
-      min-width: 0;
-    }
-  `;
-  document.head.appendChild(style);
-}
-var rowStylesInjected = false, rowHandler;
+var rowHandler;
 var init_row = __esm(() => {
   rowHandler = {
     create() {
-      ensureRowStyles();
       const el = document.createElement("div");
       el.style.display = "flex";
       el.style.flexDirection = "row";
@@ -140,6 +125,16 @@ var init_button = __esm(() => {
   buttonHandler = {
     create() {
       const el = document.createElement("button");
+      el.style.border = "none";
+      el.style.background = "none";
+      el.style.padding = "0";
+      el.style.margin = "0";
+      el.style.font = "inherit";
+      el.style.color = "inherit";
+      el.style.cursor = "pointer";
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.alignItems = "flex-start";
       el.dataset.hypenType = "button";
       return el;
     }
@@ -791,9 +786,10 @@ var init_avatar = __esm(() => {
       return el;
     },
     applyProps(el, props) {
-      if (props.src !== undefined) {
+      const src = props["src.0"] || props["0"] || props.src || props.source;
+      if (src !== undefined) {
         const img = document.createElement("img");
-        img.src = String(props.src);
+        img.src = String(src);
         img.style.width = "100%";
         img.style.height = "100%";
         img.style.objectFit = "cover";
@@ -1261,11 +1257,96 @@ var init_hypenapp = __esm(() => {
   };
 });
 
+// src/dom/components/index.ts
+class ComponentRegistry {
+  handlers = new Map;
+  constructor() {
+    this.registerDefaults();
+  }
+  register(type, handler) {
+    this.handlers.set(type.toLowerCase(), handler);
+  }
+  get(type) {
+    return this.handlers.get(type.toLowerCase());
+  }
+  createElement(type, props = {}) {
+    const handler = this.get(type);
+    if (!handler)
+      return null;
+    const element = handler.create();
+    if (handler.applyProps) {
+      handler.applyProps(element, props);
+    }
+    return element;
+  }
+  registerDefaults() {
+    const { columnHandler: columnHandler2 } = (init_column(), __toCommonJS(exports_column));
+    const { rowHandler: rowHandler2 } = (init_row(), __toCommonJS(exports_row));
+    const { textHandler: textHandler2 } = (init_text(), __toCommonJS(exports_text));
+    const { imageHandler: imageHandler2 } = (init_image(), __toCommonJS(exports_image));
+    const { buttonHandler: buttonHandler2 } = (init_button(), __toCommonJS(exports_button));
+    const { containerHandler: containerHandler2 } = (init_container(), __toCommonJS(exports_container));
+    const { centerHandler: centerHandler2 } = (init_center(), __toCommonJS(exports_center));
+    const { listHandler: listHandler2 } = (init_list(), __toCommonJS(exports_list));
+    const { inputHandler: inputHandler2 } = (init_input(), __toCommonJS(exports_input));
+    const { linkHandler: linkHandler2 } = (init_link(), __toCommonJS(exports_link));
+    const { textareaHandler: textareaHandler2 } = (init_textarea(), __toCommonJS(exports_textarea));
+    const { checkboxHandler: checkboxHandler2 } = (init_checkbox(), __toCommonJS(exports_checkbox));
+    const { selectHandler: selectHandler2 } = (init_select(), __toCommonJS(exports_select));
+    const { spacerHandler: spacerHandler2 } = (init_spacer(), __toCommonJS(exports_spacer));
+    const { stackHandler: stackHandler2 } = (init_stack(), __toCommonJS(exports_stack));
+    const { dividerHandler: dividerHandler2 } = (init_divider(), __toCommonJS(exports_divider));
+    const { gridHandler: gridHandler2 } = (init_grid(), __toCommonJS(exports_grid));
+    const { cardHandler: cardHandler2 } = (init_card(), __toCommonJS(exports_card));
+    const { headingHandler: headingHandler2 } = (init_heading(), __toCommonJS(exports_heading));
+    const { switchHandler: switchHandler2 } = (init_switch(), __toCommonJS(exports_switch));
+    const { sliderHandler: sliderHandler2 } = (init_slider(), __toCommonJS(exports_slider));
+    const { spinnerHandler: spinnerHandler2 } = (init_spinner(), __toCommonJS(exports_spinner));
+    const { badgeHandler: badgeHandler2 } = (init_badge(), __toCommonJS(exports_badge));
+    const { avatarHandler: avatarHandler2 } = (init_avatar(), __toCommonJS(exports_avatar));
+    const { progressBarHandler: progressBarHandler2 } = (init_progressbar(), __toCommonJS(exports_progressbar));
+    const { videoHandler: videoHandler2 } = (init_video(), __toCommonJS(exports_video));
+    const { audioHandler: audioHandler2 } = (init_audio(), __toCommonJS(exports_audio));
+    const { paragraphHandler: paragraphHandler2 } = (init_paragraph(), __toCommonJS(exports_paragraph));
+    const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
+    const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
+    const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
+    this.register("column", columnHandler2);
+    this.register("row", rowHandler2);
+    this.register("text", textHandler2);
+    this.register("image", imageHandler2);
+    this.register("button", buttonHandler2);
+    this.register("container", containerHandler2);
+    this.register("box", containerHandler2);
+    this.register("center", centerHandler2);
+    this.register("list", listHandler2);
+    this.register("input", inputHandler2);
+    this.register("link", linkHandler2);
+    this.register("textarea", textareaHandler2);
+    this.register("checkbox", checkboxHandler2);
+    this.register("select", selectHandler2);
+    this.register("spacer", spacerHandler2);
+    this.register("stack", stackHandler2);
+    this.register("divider", dividerHandler2);
+    this.register("grid", gridHandler2);
+    this.register("card", cardHandler2);
+    this.register("heading", headingHandler2);
+    this.register("switch", switchHandler2);
+    this.register("slider", sliderHandler2);
+    this.register("spinner", spinnerHandler2);
+    this.register("badge", badgeHandler2);
+    this.register("avatar", avatarHandler2);
+    this.register("progressbar", progressBarHandler2);
+    this.register("video", videoHandler2);
+    this.register("audio", audioHandler2);
+    this.register("paragraph", paragraphHandler2);
+    this.register("router", routerHandler2);
+    this.register("route", routeHandler2);
+    this.register("hypenapp", hypenAppHandler2);
+  }
+}
+
 // 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`;
@@ -1284,10 +1365,6 @@ var paddingHandler = (el, 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`;
@@ -1306,104 +1383,86 @@ var marginHandler = (el, 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);
-    }
-  };
-});
+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 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)}`;
+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.borderRadius = String(value);
+        el.style.borderStyle = "solid";
       }
-    },
-    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);
+      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;
@@ -1454,88 +1513,105 @@ function parseSizeValue(value) {
       return `${num}px`;
   }
 }
-var sizeHandlers;
-var init_size = __esm(() => {
-  sizeHandlers = {
-    width: (el, value) => {
+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)
+      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}%`;
     }
-  };
-});
+  },
+  fillMaxWidth: (el, value) => {
+    if (value === false)
+      return;
+    const fraction = typeof value === "number" ? value : 1;
+    el.style.width = `${fraction * 100}%`;
+    el.style.alignSelf = "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}%`;
+  }
+};
 
 // src/dom/applicators/font.ts
-var exports_font = {};
-__export(exports_font, {
-  fontHandlers: () => fontHandlers,
-  GoogleFonts: () => GoogleFonts
-});
+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-");
@@ -1565,91 +1641,59 @@ function processFontFamily(value) {
     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"
-    ]
-  };
-});
+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
-var exports_layout = {};
-__export(exports_layout, {
-  mapAlignmentValue: () => mapAlignmentValue,
-  layoutHandlers: () => layoutHandlers
-});
 function mapAlignmentValue(value) {
   const v = String(value).toLowerCase();
   switch (v) {
@@ -1678,76 +1722,74 @@ function mapAlignmentValue(value) {
       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) => {
+var layoutHandlers = {
+  verticalAlignment: (el, value) => {
+    const val = mapAlignmentValue(String(value));
+    const flexDirection = el.style.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 = el.style.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);
-    },
-    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";
+import { getElementDisposables } from "@hypen-space/core/disposable";
+var elementDataMap = new WeakMap;
 function getHypenData(element) {
   let data = elementDataMap.get(element);
   if (!data) {
@@ -1817,6 +1859,9 @@ function disposeHypenElement(element) {
   } 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)
@@ -1827,24 +1872,13 @@ 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";
+} from "@hypen-space/core/disposable";
 function toPlainObject(value) {
   if (value instanceof Map) {
     const obj = {};
@@ -2075,7 +2109,8 @@ var inputPayload = (event, element) => {
     value: target.value,
     input: target.value
   };
-}, scrollPayload = (_event, element) => {
+};
+var scrollPayload = (_event, element) => {
   const scrollTop = element.scrollTop;
   const scrollHeight = element.scrollHeight;
   const clientHeight = element.clientHeight;
@@ -2095,11 +2130,13 @@ var inputPayload = (event, element) => {
     atBottom: scrollHeight - scrollTop === clientHeight,
     atTop: scrollTop === 0
   };
-}, focusPayload = (event, element) => ({
+};
+var focusPayload = (event, element) => ({
   type: event.type,
   timestamp: Date.now(),
   value: element.value ?? undefined
-}), mousePayload = (event, _element) => {
+});
+var mousePayload = (event, _element) => {
   const mouseEvent = event;
   return {
     type: event.type,
@@ -2107,637 +2144,495 @@ var inputPayload = (event, element) => {
     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 })
-  };
-});
+};
+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),
+  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";
-      }
+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 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);
-    }
-  };
-});
+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 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);
+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 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) => {
+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);
+  },
+  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);
-    },
-    gridTemplateRows: (el, value) => {
+    }
+  },
+  gridRows: (el, value) => {
+    if (typeof value === "number") {
+      el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
+    } else {
       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);
     }
-  };
-});
+  },
+  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})`;
-    }
-  };
-});
+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 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);
-    }
-  };
-});
+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 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/components/index.ts
-class ComponentRegistry {
-  handlers = new Map;
-  constructor() {
-    this.registerDefaults();
-  }
-  register(type, handler) {
-    this.handlers.set(type.toLowerCase(), handler);
-  }
-  get(type) {
-    return this.handlers.get(type.toLowerCase());
-  }
-  createElement(type, props = {}) {
-    const handler = this.get(type);
-    if (!handler)
-      return null;
-    const element = handler.create();
-    if (handler.applyProps) {
-      handler.applyProps(element, props);
-    }
-    return element;
-  }
-  registerDefaults() {
-    const { columnHandler: columnHandler2 } = (init_column(), __toCommonJS(exports_column));
-    const { rowHandler: rowHandler2 } = (init_row(), __toCommonJS(exports_row));
-    const { textHandler: textHandler2 } = (init_text(), __toCommonJS(exports_text));
-    const { imageHandler: imageHandler2 } = (init_image(), __toCommonJS(exports_image));
-    const { buttonHandler: buttonHandler2 } = (init_button(), __toCommonJS(exports_button));
-    const { containerHandler: containerHandler2 } = (init_container(), __toCommonJS(exports_container));
-    const { centerHandler: centerHandler2 } = (init_center(), __toCommonJS(exports_center));
-    const { listHandler: listHandler2 } = (init_list(), __toCommonJS(exports_list));
-    const { inputHandler: inputHandler2 } = (init_input(), __toCommonJS(exports_input));
-    const { linkHandler: linkHandler2 } = (init_link(), __toCommonJS(exports_link));
-    const { textareaHandler: textareaHandler2 } = (init_textarea(), __toCommonJS(exports_textarea));
-    const { checkboxHandler: checkboxHandler2 } = (init_checkbox(), __toCommonJS(exports_checkbox));
-    const { selectHandler: selectHandler2 } = (init_select(), __toCommonJS(exports_select));
-    const { spacerHandler: spacerHandler2 } = (init_spacer(), __toCommonJS(exports_spacer));
-    const { stackHandler: stackHandler2 } = (init_stack(), __toCommonJS(exports_stack));
-    const { dividerHandler: dividerHandler2 } = (init_divider(), __toCommonJS(exports_divider));
-    const { gridHandler: gridHandler2 } = (init_grid(), __toCommonJS(exports_grid));
-    const { cardHandler: cardHandler2 } = (init_card(), __toCommonJS(exports_card));
-    const { headingHandler: headingHandler2 } = (init_heading(), __toCommonJS(exports_heading));
-    const { switchHandler: switchHandler2 } = (init_switch(), __toCommonJS(exports_switch));
-    const { sliderHandler: sliderHandler2 } = (init_slider(), __toCommonJS(exports_slider));
-    const { spinnerHandler: spinnerHandler2 } = (init_spinner(), __toCommonJS(exports_spinner));
-    const { badgeHandler: badgeHandler2 } = (init_badge(), __toCommonJS(exports_badge));
-    const { avatarHandler: avatarHandler2 } = (init_avatar(), __toCommonJS(exports_avatar));
-    const { progressBarHandler: progressBarHandler2 } = (init_progressbar(), __toCommonJS(exports_progressbar));
-    const { videoHandler: videoHandler2 } = (init_video(), __toCommonJS(exports_video));
-    const { audioHandler: audioHandler2 } = (init_audio(), __toCommonJS(exports_audio));
-    const { paragraphHandler: paragraphHandler2 } = (init_paragraph(), __toCommonJS(exports_paragraph));
-    const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
-    const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
-    const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
-    this.register("column", columnHandler2);
-    this.register("row", rowHandler2);
-    this.register("text", textHandler2);
-    this.register("image", imageHandler2);
-    this.register("button", buttonHandler2);
-    this.register("container", containerHandler2);
-    this.register("box", containerHandler2);
-    this.register("center", centerHandler2);
-    this.register("list", listHandler2);
-    this.register("input", inputHandler2);
-    this.register("link", linkHandler2);
-    this.register("textarea", textareaHandler2);
-    this.register("checkbox", checkboxHandler2);
-    this.register("select", selectHandler2);
-    this.register("spacer", spacerHandler2);
-    this.register("stack", stackHandler2);
-    this.register("divider", dividerHandler2);
-    this.register("grid", gridHandler2);
-    this.register("card", cardHandler2);
-    this.register("heading", headingHandler2);
-    this.register("switch", switchHandler2);
-    this.register("slider", sliderHandler2);
-    this.register("spinner", spinnerHandler2);
-    this.register("badge", badgeHandler2);
-    this.register("avatar", avatarHandler2);
-    this.register("progressbar", progressBarHandler2);
-    this.register("video", videoHandler2);
-    this.register("audio", audioHandler2);
-    this.register("paragraph", paragraphHandler2);
-    this.register("router", routerHandler2);
-    this.register("route", routeHandler2);
-    this.register("hypenapp", hypenAppHandler2);
+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 = {
@@ -2973,60 +2868,45 @@ class ApplicatorRegistry {
     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("padding", paddingHandler);
+    this.register("margin", marginHandler);
+    for (const [name, handler] of Object.entries(colorHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(borderHandlers2)) {
+    for (const [name, handler] of Object.entries(borderHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(sizeHandlers2)) {
+    for (const [name, handler] of Object.entries(sizeHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(fontHandlers2)) {
+    for (const [name, handler] of Object.entries(fontHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(layoutHandlers2)) {
+    for (const [name, handler] of Object.entries(layoutHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(eventHandlers2)) {
+    for (const [name, handler] of Object.entries(eventHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(typographyHandlers2)) {
+    for (const [name, handler] of Object.entries(typographyHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(transformHandlers2)) {
+    for (const [name, handler] of Object.entries(transformHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(effectsHandlers2)) {
+    for (const [name, handler] of Object.entries(effectsHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(advancedLayoutHandlers2)) {
+    for (const [name, handler] of Object.entries(advancedLayoutHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(backgroundHandlers2)) {
+    for (const [name, handler] of Object.entries(backgroundHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(displayHandlers2)) {
+    for (const [name, handler] of Object.entries(displayHandlers)) {
       this.register(name, handler);
     }
-    for (const [name, handler] of Object.entries(transitionHandlers2)) {
+    for (const [name, handler] of Object.entries(transitionHandlers)) {
       this.register(name, handler);
     }
   }
@@ -3235,8 +3115,6 @@ class RerenderTracker {
 }
 
 // src/dom/renderer.ts
-init_element_data();
-
 class DOMRenderer {
   container;
   nodes = new Map;
@@ -3566,4 +3444,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=DAAB42C61CF69F0464756E2164756E21
+//# debugId=7F19F4748F45582064756E2164756E21