Page refers to body, add ZStack, add h1 h2 h3, add positioning validation

index.js

@@ -244,10 +244,25 @@ class ObservedObject {
 }
 
 window.Page = class Page {
-    appendChild(el) {
+    constructor() {
-        document.body.appendChild(el)
+        return new Proxy(this, {
+            get(target, prop) {
+                if (prop in target) {
+                    return target[prop];
+                }
+                
+                if (prop in document.body) {
+                    if (typeof document.body[prop] === 'function') {
+                        return document.body[prop].bind(document.body);
+                    }
+                    return document.body[prop];
+                }
+
+                return undefined;
+            }
+        });
     }
-}
+};
 
 window.Shadow = class Shadow extends HTMLElement {
     constructor() {
@@ -635,6 +650,30 @@ window.p = function p(innerText) {
     return para
 }
 
+window.h1 = function h1(innerText) {
+    let header = document.createElement("h1")
+    header.innerText = innerText
+    Registry.initReactivity(header, "innerText", innerText)
+    Registry.render(header)
+    return header
+}
+
+window.h2 = function h2(innerText) {
+    let header = document.createElement("h2")
+    header.innerText = innerText
+    Registry.initReactivity(header, "innerText", innerText)
+    Registry.render(header)
+    return header
+}
+
+window.h3 = function h3(innerText) {
+    let header = document.createElement("h3")
+    header.innerText = innerText
+    Registry.initReactivity(header, "innerText", innerText)
+    Registry.render(header)
+    return header
+}
+
 window.div = function (innerText) {
     let div = document.createElement("div")
     div.innerText = innerText ?? ""
@@ -702,9 +741,15 @@ window.HStack = function (cb = () => {}) {
 
 window.ZStack = function (cb = () => {}) {
     let nowRendering = window.rendering.last()
-    if(nowRendering.innerHTML === "") {
+    if(nowRendering.innerHTML.trim() === "") { // Parent is Empty, make it a ZStack
         cb()
         return nowRendering
+    } else {
+        let div = document.createElement("div")
+        div.classList.add("ZStack")
+        div.render = cb
+        Registry.render(div)
+        return div
     }
 }
 
@@ -852,6 +897,8 @@ function checkStyle(el) {
 }
 
 HTMLElement.prototype.x = function(value, unit = "px") {
+    if (typeof value !== 'number' || isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
     checkStyle(this)
     this.style.left = value + unit
     Registry.initReactivity(this, ["style", "left"], value);
@@ -859,6 +906,8 @@ HTMLElement.prototype.x = function(value, unit = "px") {
 }
 
 HTMLElement.prototype.y = function(value, unit = "px") {
+    if (typeof value !== 'number' || isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
     checkStyle(this)
     this.style.top = value + unit
     Registry.initReactivity(this, ["style", "top"], value);
@@ -866,6 +915,8 @@ HTMLElement.prototype.y = function(value, unit = "px") {
 }
 
 HTMLElement.prototype.xRight = function(value, unit = "px") {
+    if (typeof value !== 'number' || isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
     checkStyle(this)
     this.style.right = value + unit
     Registry.initReactivity(this, ["style", "right"], value);
@@ -873,6 +924,8 @@ HTMLElement.prototype.xRight = function(value, unit = "px") {
 }
 
 HTMLElement.prototype.yBottom = function(value, unit = "px") {
+    if (typeof value !== 'number' || isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
     checkStyle(this)
     this.style.bottom = value + unit
     Registry.initReactivity(this, ["style", "bottom"], value);