@symbo.ls/create 2.11.221 → 2.11.230

package/dist/cjs/bundle/index.js

@@ -31,9 +31,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/@domql/utils/dist/cjs/key.js
+// ../../../domql/packages/utils/dist/cjs/key.js
 var require_key = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -70,9 +70,9 @@ var require_key = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/env.js
+// ../../../domql/packages/utils/dist/cjs/env.js
 var require_env = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -108,9 +108,9 @@ var require_env = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/globals.js
+// ../../../domql/packages/utils/dist/cjs/globals.js
 var require_globals = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -144,9 +144,9 @@ var require_globals = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/node.js
+// ../../../domql/packages/utils/dist/cjs/node.js
 var require_node = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -181,9 +181,9 @@ var require_node = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/types.js
+// ../../../domql/packages/utils/dist/cjs/types.js
 var require_types = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -208,6 +208,7 @@ var require_types = __commonJS({
       is: () => is,
       isArray: () => isArray6,
       isBoolean: () => isBoolean,
+      isDate: () => isDate,
       isDefined: () => isDefined2,
       isFunction: () => isFunction4,
       isNot: () => isNot2,
@@ -215,7 +216,7 @@ var require_types = __commonJS({
       isNumber: () => isNumber,
       isObject: () => isObject12,
       isObjectLike: () => isObjectLike3,
-      isString: () => isString9,
+      isString: () => isString10,
       isUndefined: () => isUndefined4
     });
     module2.exports = __toCommonJS2(types_exports);
@@ -225,19 +226,20 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString9 = (arg) => typeof arg === "string";
+    var isString10 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction4 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
     var isArray6 = (arg) => Array.isArray(arg);
+    var isDate = (d) => d instanceof Date;
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject12(arg) || isObjectLike3(arg) || isString9(arg) || isNumber(arg) || isFunction4(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject12(arg) || isObjectLike3(arg) || isString10(arg) || isNumber(arg) || isFunction4(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
     var isUndefined4 = (arg) => {
       return arg === void 0;
@@ -246,7 +248,8 @@ var require_types = __commonJS({
       boolean: isBoolean,
       array: isArray6,
       object: isObject12,
-      string: isString9,
+      string: isString10,
+      date: isDate,
       number: isNumber,
       null: isNull,
       function: isFunction4,
@@ -268,9 +271,9 @@ var require_types = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/array.js
+// ../../../domql/packages/utils/dist/cjs/array.js
 var require_array = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -299,6 +302,8 @@ var require_array = __commonJS({
       mergeAndCloneIfArray: () => mergeAndCloneIfArray,
       mergeArray: () => mergeArray,
       removeFromArray: () => removeFromArray,
+      removeValueFromArray: () => removeValueFromArray,
+      removeValueFromArrayAll: () => removeValueFromArrayAll,
       swapItemsInArray: () => swapItemsInArray
     });
     module2.exports = __toCommonJS2(array_exports);
@@ -364,12 +369,24 @@ var require_array = __commonJS({
       }, nestedObject);
       return nestedObject;
     };
+    var removeValueFromArray = (arr, value2) => {
+      const index = arr.indexOf(value2);
+      if (index > -1) {
+        const newArray = [...arr];
+        newArray.splice(index, 1);
+        return newArray;
+      }
+      return arr.slice();
+    };
+    var removeValueFromArrayAll = (arr, value2) => {
+      return arr.filter((item) => item !== value2);
+    };
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/string.js
+// ../../../domql/packages/utils/dist/cjs/string.js
 var require_string = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -427,9 +444,9 @@ var require_string = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/object.js
+// ../../../domql/packages/utils/dist/cjs/object.js
 var require_object = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -455,6 +472,7 @@ var require_object = __commonJS({
       deepCloneExclude: () => deepCloneExclude,
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
+      deepDiff: () => deepDiff2,
       deepMerge: () => deepMerge4,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
@@ -463,7 +481,11 @@ var require_object = __commonJS({
       diffObjects: () => diffObjects,
       exec: () => exec4,
       flattenRecursive: () => flattenRecursive,
+      hasOwnProperty: () => hasOwnProperty,
+      isEmpty: () => isEmpty,
+      isEmptyObject: () => isEmptyObject,
       isEqualDeep: () => isEqualDeep2,
+      makeObjectWithoutPrototype: () => makeObjectWithoutPrototype,
       map: () => map2,
       merge: () => merge4,
       mergeArrayExclude: () => mergeArrayExclude,
@@ -497,8 +519,8 @@ var require_object = __commonJS({
     };
     var merge4 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, e);
-        if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
+        if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const objProp = obj[e];
@@ -510,8 +532,8 @@ var require_object = __commonJS({
     };
     var deepMerge4 = (element, extend, excludeFrom = []) => {
       for (const e in extend) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(extend, e);
-        if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
+        if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const extendProp = extend[e];
@@ -526,8 +548,8 @@ var require_object = __commonJS({
     var clone = (obj, excludeFrom = []) => {
       const o = {};
       for (const prop in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-        if (!hasOwnProperty || excludeFrom.includes(prop) || prop.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+        if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         o[prop] = obj[prop];
       }
@@ -539,8 +561,8 @@ var require_object = __commonJS({
       }
       const o = {};
       for (const k in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, k);
-        if (!hasOwnProperty || excludeFrom.includes(k) || k.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, k);
+        if (!hasOwnProperty2 || excludeFrom.includes(k) || k.startsWith("__"))
           continue;
         let v = obj[k];
         if (k === "extend" && (0, import_types.isArray)(v)) {
@@ -558,7 +580,7 @@ var require_object = __commonJS({
     var mergeArrayExclude = (arr, excl = []) => {
       return arr.reduce((acc, curr) => deepMerge4(acc, deepCloneExclude(curr, excl)), {});
     };
-    var deepClone4 = (obj, excludeFrom = []) => {
+    var deepClone4 = (obj, excludeFrom = [], cleanUndefined = false) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
         if (prop === "__proto__")
@@ -566,11 +588,13 @@ var require_object = __commonJS({
         if (excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         let objProp = obj[prop];
+        if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+          continue;
         if (prop === "extend" && (0, import_types.isArray)(objProp)) {
           objProp = (0, import_array.mergeArray)(objProp);
         }
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepClone4(objProp, excludeFrom);
+          o[prop] = deepClone4(objProp, excludeFrom, cleanUndefined);
         } else
           o[prop] = objProp;
       }
@@ -624,7 +648,7 @@ var require_object = __commonJS({
             }
           }
           str += `${spaces}  ]`;
-        } else if ((0, import_types.isObject)(value2)) {
+        } else if ((0, import_types.isObjectLike)(value2)) {
           str += objectToString(value2, indent + 1);
         } else if ((0, import_types.isString)(value2)) {
           str += (0, import_string.stringIncludesAny)(value2, ["\n", "'"]) ? `\`${value2}\`` : `'${value2}'`;
@@ -664,8 +688,8 @@ var require_object = __commonJS({
     };
     var deepDestringify = (obj, destringified = {}) => {
       for (const prop in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-        if (!hasOwnProperty)
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+        if (!hasOwnProperty2)
           continue;
         const objProp = obj[prop];
         if ((0, import_types.isString)(objProp)) {
@@ -758,6 +782,39 @@ var require_object = __commonJS({
       }
       return cache2;
     };
+    var hasOwnProperty = (o, ...args) => Object.prototype.hasOwnProperty.call(o, ...args);
+    var isEmpty = (o) => Object.keys(o).length === 0;
+    var isEmptyObject = (o) => (0, import_types.isObject)(o) && isEmpty(o);
+    var makeObjectWithoutPrototype = () => /* @__PURE__ */ Object.create(null);
+    var deepDiff2 = (lhs, rhs) => {
+      if (lhs === rhs)
+        return {};
+      if (!(0, import_types.isObjectLike)(lhs) || !(0, import_types.isObjectLike)(rhs))
+        return rhs;
+      const deletedValues = Object.keys(lhs).reduce((acc, key) => {
+        if (!hasOwnProperty(rhs, key)) {
+          acc[key] = void 0;
+        }
+        return acc;
+      }, makeObjectWithoutPrototype());
+      if ((0, import_types.isDate)(lhs) || (0, import_types.isDate)(rhs)) {
+        if (lhs.valueOf() === rhs.valueOf())
+          return {};
+        return rhs;
+      }
+      return Object.keys(rhs).reduce((acc, key) => {
+        if (!hasOwnProperty(lhs, key)) {
+          acc[key] = rhs[key];
+          return acc;
+        }
+        const difference = diff(lhs[key], rhs[key]);
+        if (isEmptyObject(difference) && !(0, import_types.isDate)(difference) && (isEmptyObject(lhs[key]) || !isEmptyObject(rhs[key]))) {
+          return acc;
+        }
+        acc[key] = difference;
+        return acc;
+      }, deletedValues);
+    };
     var overwrite = (element, params, excludeFrom = []) => {
       const { ref } = element;
       const changes = {};
@@ -853,8 +910,8 @@ var require_object = __commonJS({
           }
         } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
           for (const key in obj1) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
-            if (!hasOwnProperty || !deepContains(obj1[key], obj2[key])) {
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj2, key);
+            if (!hasOwnProperty2 || !deepContains(obj1[key], obj2[key])) {
               return false;
             }
           }
@@ -879,9 +936,9 @@ var require_object = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/function.js
+// ../../../domql/packages/utils/dist/cjs/function.js
 var require_function = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -954,9 +1011,9 @@ var require_function = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/log.js
+// ../../../domql/packages/utils/dist/cjs/log.js
 var require_log = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -995,9 +1052,9 @@ var require_log = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/cookie.js
+// ../../../domql/packages/utils/dist/cjs/cookie.js
 var require_cookie = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1051,9 +1108,9 @@ var require_cookie = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/tags.js
+// ../../../domql/packages/utils/dist/cjs/tags.js
 var require_tags = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1216,9 +1273,9 @@ var require_tags = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/index.js
+// ../../../domql/packages/utils/dist/cjs/index.js
 var require_cjs = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1251,9 +1308,9 @@ var require_cjs = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/report/dist/cjs/index.js
+// ../../../domql/plugins/report/dist/cjs/index.js
 var require_cjs2 = __commonJS({
-  "../../node_modules/@domql/report/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/plugins/report/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1348,9 +1405,9 @@ ${element}` : ""
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/tree.js
+// ../../../domql/packages/element/dist/cjs/tree.js
 var require_tree = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/tree.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/tree.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1385,9 +1442,9 @@ var require_tree = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/event/dist/cjs/on.js
+// ../../../domql/packages/event/dist/cjs/on.js
 var require_on = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/on.js"(exports, module2) {
+  "../../../domql/packages/event/dist/cjs/on.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1441,17 +1498,19 @@ var require_on = __commonJS({
           continue;
         const appliedFunction = element.on[param];
         if ((0, import_utils24.isFunction)(appliedFunction)) {
-          const { state, context } = element;
-          node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
+          node2.addEventListener(param, (event) => {
+            const { state, context } = element;
+            appliedFunction(event, element, state, context);
+          });
         }
       }
     };
   }
 });
 
-// ../../node_modules/@domql/event/dist/cjs/can.js
+// ../../../domql/packages/event/dist/cjs/can.js
 var require_can = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/can.js"(exports, module2) {
+  "../../../domql/packages/event/dist/cjs/can.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1484,9 +1543,9 @@ var require_can = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/event/dist/cjs/index.js
+// ../../../domql/packages/event/dist/cjs/index.js
 var require_cjs3 = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/event/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1509,9 +1568,9 @@ var require_cjs3 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/render/dist/cjs/create.js
+// ../../../domql/packages/render/dist/cjs/create.js
 var require_create = __commonJS({
-  "../../node_modules/@domql/render/dist/cjs/create.js"(exports, module2) {
+  "../../../domql/packages/render/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1540,9 +1599,9 @@ var require_create = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/render/dist/cjs/cache.js
+// ../../../domql/packages/render/dist/cjs/cache.js
 var require_cache = __commonJS({
-  "../../node_modules/@domql/render/dist/cjs/cache.js"(exports, module2) {
+  "../../../domql/packages/render/dist/cjs/cache.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1588,10 +1647,15 @@ var require_cache = __commonJS({
       }
     };
     var detectTag = (element) => {
-      let { tag, key } = element;
+      let { tag, key, props: props4 } = element;
       tag = (0, import_utils24.exec)(tag, element);
       if (tag === true)
         tag = key;
+      if ((0, import_utils24.isObject)(props4) && (0, import_utils24.isString)(props4.tag)) {
+        const tagExists = (0, import_utils24.isValidHtmlTag)(props4.tag);
+        if (tagExists)
+          return props4.tag;
+      }
       if ((0, import_utils24.isString)(tag)) {
         const tagExists = (0, import_utils24.isValidHtmlTag)(tag);
         if (tagExists)
@@ -1619,9 +1683,9 @@ var require_cache = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/render/dist/cjs/append.js
+// ../../../domql/packages/render/dist/cjs/append.js
 var require_append = __commonJS({
-  "../../node_modules/@domql/render/dist/cjs/append.js"(exports, module2) {
+  "../../../domql/packages/render/dist/cjs/append.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1644,29 +1708,43 @@ var require_append = __commonJS({
     __export2(append_exports, {
       appendNode: () => appendNode,
       assignNode: () => assignNode,
-      insertNodeAfter: () => insertNodeAfter
+      insertNodeAfter: () => insertNodeAfter,
+      insertNodeBefore: () => insertNodeBefore
     });
     module2.exports = __toCommonJS2(append_exports);
     var appendNode = (node2, parentNode) => {
       parentNode.appendChild(node2);
       return node2;
     };
-    var insertNodeAfter = (node2, siblingNode) => {
-      siblingNode.parentNode.insertBefore(node2, siblingNode.nextSibling);
+    var insertNodeAfter = (node2, siblingNode, parentNode) => {
+      const parent = parentNode || siblingNode.parentNode;
+      if (siblingNode.nextSibling) {
+        parent == null ? void 0 : parent.insertBefore(node2, siblingNode.nextSibling);
+      } else {
+        siblingNode == null ? void 0 : siblingNode.insertAdjacentElement("afterend", node2);
+      }
     };
-    var assignNode = (element, parent, key, insertAfter) => {
+    var insertNodeBefore = (node2, siblingNode, parentNode) => {
+      var _a;
+      (_a = parentNode || siblingNode.parentNode) == null ? void 0 : _a.insertBefore(node2, siblingNode);
+    };
+    var assignNode = (element, parent, key, attachOptions) => {
       parent[key || element.key] = element;
       if (element.tag !== "shadow") {
-        (insertAfter ? insertNodeAfter : appendNode)(element.node, parent.node);
+        if (attachOptions && attachOptions.position) {
+          (attachOptions.position === "before" ? insertNodeBefore : insertNodeAfter)(element.node, attachOptions.node || parent.node);
+        } else {
+          appendNode(element.node, parent.node);
+        }
       }
       return element;
     };
   }
 });
 
-// ../../node_modules/@domql/render/dist/cjs/index.js
+// ../../../domql/packages/render/dist/cjs/index.js
 var require_cjs4 = __commonJS({
-  "../../node_modules/@domql/render/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/render/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1690,9 +1768,9 @@ var require_cjs4 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/attr.js
+// ../../../domql/packages/element/dist/cjs/mixins/attr.js
 var require_attr = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/attr.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/attr.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1738,9 +1816,9 @@ var require_attr = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/classList.js
+// ../../../domql/packages/element/dist/cjs/mixins/classList.js
 var require_classList = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/classList.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/classList.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1817,9 +1895,9 @@ var require_classList = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/cache/options.js
+// ../../../domql/packages/element/dist/cjs/cache/options.js
 var require_options = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/cache/options.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/cache/options.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1847,9 +1925,9 @@ var require_options = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/set.js
+// ../../../domql/packages/element/dist/cjs/set.js
 var require_set = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/set.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/set.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -1890,22 +1968,31 @@ var require_set = __commonJS({
     var import_content = require_content();
     var set5 = function(params, options = {}, el) {
       const element = el || this;
-      const __contentRef = element.content && element.content.__ref;
-      if (__contentRef && __contentRef.__cached && (0, import_utils24.deepContains)(params, element.content)) {
-        console.log("is content equal");
-        return element.content.update();
+      const { __ref: ref, content } = element;
+      const __contentRef = content && content.__ref;
+      const lazyLoad = element.props && element.props.lazyLoad;
+      if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils24.deepContains)(params, content)) {
+        return content.update();
       }
-      (0, import_content.removeContent)(element);
-      if (params) {
-        const { childExtend } = params;
-        if (!childExtend && element.childExtend)
-          params.childExtend = element.childExtend;
+      if (options.preventContentUpdate === true)
+        return;
+      const setAsync = () => {
+        (0, import_content.removeContent)(element);
         (0, import_create.default)(params, element, "content", {
           ignoreChildExtend: true,
           ...import_mixins.registry.defaultOptions,
           ...import_options3.default.create,
           ...options
         });
+      };
+      if (params) {
+        const { childExtend } = params;
+        if (!childExtend && element.childExtend)
+          params.childExtend = element.childExtend;
+        if (lazyLoad) {
+          window.requestAnimationFrame(setAsync);
+        } else
+          setAsync();
       }
       return element;
     };
@@ -1913,9 +2000,9 @@ var require_set = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/content.js
+// ../../../domql/packages/element/dist/cjs/mixins/content.js
 var require_content = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/content.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/content.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -1994,9 +2081,9 @@ var require_content = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/data.js
+// ../../../domql/packages/element/dist/cjs/mixins/data.js
 var require_data = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/data.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/data.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2036,9 +2123,9 @@ var require_data = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/html.js
+// ../../../domql/packages/element/dist/cjs/mixins/html.js
 var require_html = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/html.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/html.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2077,9 +2164,9 @@ var require_html = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/style.js
+// ../../../domql/packages/element/dist/cjs/mixins/style.js
 var require_style = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/style.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/style.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2116,9 +2203,9 @@ var require_style = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/text.js
+// ../../../domql/packages/element/dist/cjs/mixins/text.js
 var require_text = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/text.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/text.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2139,34 +2226,17 @@ var require_text = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var text_exports = {};
     __export2(text_exports, {
-      asd: () => asd,
       default: () => text_default
     });
     module2.exports = __toCommonJS2(text_exports);
-    var import__2 = require_cjs7();
+    var import__2 = require_cjs8();
     var import_utils24 = require_cjs();
-    var asd = (param, element, node2) => {
-      const prop = (0, import_utils24.exec)(param, element);
-      if (element.tag === "string") {
-        node2.nodeValue = prop;
-      } else if (param !== void 0 || param !== null) {
-        if (element.__text && element.__text.text !== prop)
-          return;
-        element.__text.text = prop;
-        if (element.__text.node)
-          element.__text.node.nodeValue = prop;
-        else
-          (0, import__2.create)({ tag: "string", text: prop }, element, "__text");
-      }
-    };
     var text_default = (param, element, node2) => {
       let prop = (0, import_utils24.exec)(param, element);
       if ((0, import_utils24.isString)(prop) && prop.includes("{{")) {
         prop = (0, import_utils24.replaceLiteralsWithObjectFields)(prop, element.state);
       }
       if (element.tag === "string") {
-        if (element.text === prop)
-          return;
         node2.nodeValue = prop;
       } else if (param !== void 0 || param !== null) {
         if (element.__text) {
@@ -2182,9 +2252,9 @@ var require_text = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/ignore.js
+// ../../../domql/packages/state/dist/cjs/ignore.js
 var require_ignore = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/ignore.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/ignore.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2219,6 +2289,7 @@ var require_ignore = __commonJS({
       "remove",
       "apply",
       "set",
+      "reset",
       "rootUpdate",
       "parentUpdate",
       "parent",
@@ -2231,9 +2302,9 @@ var require_ignore = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/methods.js
+// ../../../domql/packages/state/dist/cjs/methods.js
 var require_methods = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/methods.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/methods.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2261,6 +2332,7 @@ var require_methods = __commonJS({
       parentUpdate: () => parentUpdate,
       parse: () => parse3,
       remove: () => remove,
+      reset: () => reset,
       rootUpdate: () => rootUpdate,
       set: () => set5,
       toggle: () => toggle
@@ -2290,7 +2362,7 @@ var require_methods = __commonJS({
         }
       }
       if (!options.preventStateUpdate) {
-        state.update(state, { replace: true, options });
+        state.update(state, { replace: true, ...options });
       }
       return state;
     };
@@ -2311,7 +2383,19 @@ var require_methods = __commonJS({
         for (const key in state.__children) {
           const child = state.__children[key];
           if (child.state) {
-            child.parent = state.parent;
+            if ((0, import_utils24.isArray)(child.state)) {
+              Object.defineProperty(child.state, "parent", {
+                value: state.parent,
+                enumerable: false,
+                // Set this to true if you want the method to appear in for...in loops
+                configurable: true,
+                // Set this to true if you want to allow redefining/removing the property later
+                writable: true
+                // Set this to true if you want to allow changing the function later
+              });
+            } else {
+              Object.setPrototypeOf(child, { parent: state.parent });
+            }
           }
         }
       }
@@ -2353,23 +2437,29 @@ var require_methods = __commonJS({
         (0, import_utils24.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
-    var set5 = function(value2, options = {}) {
+    var set5 = function(val, options = {}) {
+      const state = this;
+      const value2 = (0, import_utils24.deepClone)(val);
+      return state.clean({ preventStateUpdate: true, ...options }).update(value2, { replace: true, ...options });
+    };
+    var reset = function(options = {}) {
       const state = this;
-      return state.clean({ preventStateUpdate: true }).update(value2, { replace: true, ...options });
+      const value2 = (0, import_utils24.deepClone)(state.parse());
+      return state.set(value2, { replace: true, ...options });
     };
     var apply = function(func, options = {}) {
       const state = this;
       if ((0, import_utils24.isFunction)(func)) {
         func(state);
-        return state.update(state, { replace: true, ...options });
+        return state.update(state.parse(), { replace: true, ...options });
       }
     };
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/inherit.js
+// ../../../domql/packages/state/dist/cjs/inherit.js
 var require_inherit = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/inherit.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/inherit.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2489,9 +2579,9 @@ var require_inherit = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/updateState.js
+// ../../../domql/packages/state/dist/cjs/updateState.js
 var require_updateState = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/updateState.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/updateState.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2525,8 +2615,7 @@ var require_updateState = __commonJS({
       preventHoistElementUpdate: false,
       updateByState: true,
       isHoisted: true,
-      execStateFunction: true,
-      stateFunctionOverwrite: true
+      execStateFunction: true
     };
     var updateState = function(obj, options = STATE_UPDATE_OPTIONS) {
       const state = this;
@@ -2587,10 +2676,9 @@ var require_updateState = __commonJS({
       const changesValue = (0, import_inherit.createChangesByKey)(stateKey, passedValue);
       const targetParent = findGrandParentState || parent.state;
       if (options.replace)
-        targetParent[stateKey] = value2;
+        (0, import_utils24.overwriteDeep)(targetParent, changesValue || value2);
       targetParent.update(changesValue, {
         execStateFunction: false,
-        stateFunctionOverwrite: false,
         isHoisted: true,
         ...options,
         preventUpdate: options.preventHoistElementUpdate,
@@ -2629,9 +2717,9 @@ var require_updateState = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/create.js
+// ../../../domql/packages/state/dist/cjs/create.js
 var require_create2 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/create.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2742,6 +2830,7 @@ var require_create2 = __commonJS({
         remove: import_methods.remove.bind(state),
         apply: import_methods.apply.bind(state),
         set: import_methods.set.bind(state),
+        reset: import_methods.reset.bind(state),
         parent: element.parent.state,
         __element: element,
         __children: {},
@@ -2759,9 +2848,9 @@ var require_create2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/index.js
+// ../../../domql/packages/state/dist/cjs/index.js
 var require_cjs5 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2787,9 +2876,9 @@ var require_cjs5 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/state.js
+// ../../../domql/packages/element/dist/cjs/mixins/state.js
 var require_state = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/state.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/state.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2833,9 +2922,51 @@ var require_state = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/registry.js
+// ../../../domql/packages/element/dist/cjs/mixins/scope.js
+var require_scope = __commonJS({
+  "../../../domql/packages/element/dist/cjs/mixins/scope.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var scope_exports = {};
+    __export2(scope_exports, {
+      default: () => scope_default
+    });
+    module2.exports = __toCommonJS2(scope_exports);
+    var import_utils24 = require_cjs();
+    var scope_default = (params, element, node2) => {
+      if (!(0, import_utils24.isObject)(params))
+        return;
+      for (const scopeItem in params) {
+        const value2 = params[scopeItem];
+        if ((0, import_utils24.isFunction)(value2)) {
+          element.scope[scopeItem] = value2.bind(element);
+        } else {
+          element.scope[scopeItem] = value2;
+        }
+      }
+    };
+  }
+});
+
+// ../../../domql/packages/element/dist/cjs/mixins/registry.js
 var require_registry = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/registry.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/registry.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2870,6 +3001,7 @@ var require_registry = __commonJS({
       data: import__2.data,
       class: import__2.classList,
       state: import__2.state,
+      scope: import__2.scope,
       deps: (param, el) => param || el.parent.deps,
       extend: {},
       childExtend: {},
@@ -2930,9 +3062,9 @@ var require_registry = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/mixins/index.js
+// ../../../domql/packages/element/dist/cjs/mixins/index.js
 var require_mixins = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/mixins/index.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/mixins/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -2970,6 +3102,7 @@ var require_mixins = __commonJS({
       data: () => import_data.default,
       html: () => import_html.default,
       registry: () => import_registry.default,
+      scope: () => import_scope.default,
       state: () => import_state2.default,
       style: () => import_style4.default,
       text: () => import_text.default
@@ -2983,14 +3116,15 @@ var require_mixins = __commonJS({
     var import_style4 = __toESM2(require_style(), 1);
     var import_text = __toESM2(require_text(), 1);
     var import_state2 = __toESM2(require_state(), 1);
+    var import_scope = __toESM2(require_scope(), 1);
     var import_registry = __toESM2(require_registry(), 1);
     __reExport2(mixins_exports, require_registry(), module2.exports);
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/methods/index.js
+// ../../../domql/packages/element/dist/cjs/methods/index.js
 var require_methods2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/methods/index.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/methods/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3180,9 +3314,9 @@ var require_methods2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/props/ignore.js
+// ../../../domql/packages/element/dist/cjs/props/ignore.js
 var require_ignore2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/props/ignore.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/props/ignore.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3210,9 +3344,9 @@ var require_ignore2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/props/inherit.js
+// ../../../domql/packages/element/dist/cjs/props/inherit.js
 var require_inherit2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/props/inherit.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/props/inherit.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3268,9 +3402,9 @@ var require_inherit2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/props/create.js
+// ../../../domql/packages/element/dist/cjs/props/create.js
 var require_create3 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/props/create.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/props/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3309,7 +3443,7 @@ var require_create3 = __commonJS({
         propsStack.push(props4);
       if ((0, import_utils24.isArray)(__ref.__extend)) {
         __ref.__extend.forEach((extend) => {
-          if (extend.props)
+          if (extend.props && extend.props !== props4)
             propsStack.push(extend.props);
         });
       }
@@ -3318,13 +3452,11 @@ var require_create3 = __commonJS({
     };
     var syncProps = (props4, element) => {
       element.props = {};
-      const mergedProps = { update, __element: element };
+      const mergedProps = {};
       props4.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
         const execProps = (0, import_utils24.exec)(v, element);
-        if ((0, import_utils24.isObject)(execProps) && execProps.__element)
-          return;
         element.props = (0, import_utils24.deepMerge)(
           mergedProps,
           (0, import_utils24.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
@@ -3332,18 +3464,34 @@ var require_create3 = __commonJS({
         );
       });
       element.props = mergedProps;
+      const methods = { update: update.bind(element.props), __element: element };
+      Object.setPrototypeOf(element.props, methods);
       return element.props;
     };
     var createProps = function(element, parent, cached) {
-      const propsStack = cached || createPropsStack(element, parent);
       const { __ref: ref } = element;
-      if (!ref.__if)
-        return;
-      if (propsStack.length) {
-        ref.__props = propsStack;
-        syncProps(propsStack, element);
-        element.props.update = update;
+      const applyProps = () => {
+        const propsStack = cached || createPropsStack(element, parent);
+        if (propsStack.length) {
+          ref.__props = propsStack;
+          syncProps(propsStack, element);
+        } else {
+          ref.__props = cached || [];
+          element.props = {};
+        }
+      };
+      if (ref.__if)
+        applyProps();
+      else {
+        try {
+          applyProps();
+        } catch {
+          element.props = {};
+          ref.__props = cached || [];
+        }
       }
+      const methods = { update: update.bind(element.props), __element: element };
+      Object.setPrototypeOf(element.props, methods);
       return element;
     };
     function update(props4, options) {
@@ -3353,9 +3501,9 @@ var require_create3 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/props/update.js
+// ../../../domql/packages/element/dist/cjs/props/update.js
 var require_update = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/props/update.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/props/update.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3385,7 +3533,7 @@ var require_update = __commonJS({
       const { __ref } = element;
       let propsStack = __ref.__props;
       const parentProps = (0, import_inherit.inheritParentProps)(element, parent);
-      if (parentProps)
+      if (parentProps.length)
         propsStack = __ref.__props = [].concat(parentProps, propsStack);
       if (newProps)
         propsStack = __ref.__props = [].concat(newProps, propsStack);
@@ -3396,9 +3544,9 @@ var require_update = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/props/index.js
+// ../../../domql/packages/element/dist/cjs/props/index.js
 var require_props = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/props/index.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/props/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3423,9 +3571,9 @@ var require_props = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/utils/object.js
+// ../../../domql/packages/element/dist/cjs/utils/object.js
 var require_object2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/utils/object.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/utils/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3571,9 +3719,9 @@ var require_object2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/utils/extendUtils.js
+// ../../../domql/packages/element/dist/cjs/utils/extendUtils.js
 var require_extendUtils = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/utils/extendUtils.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/utils/extendUtils.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3609,7 +3757,6 @@ var require_extendUtils = __commonJS({
       getExtendStackRegistry: () => getExtendStackRegistry,
       getHashedExtend: () => getHashedExtend,
       jointStacks: () => jointStacks,
-      replaceStringsWithComponents: () => replaceStringsWithComponents,
       setHashedExtend: () => setHashedExtend
     });
     module2.exports = __toCommonJS2(extendUtils_exports);
@@ -3635,25 +3782,27 @@ var require_extendUtils = __commonJS({
       }
       return setHashedExtend(extend, stack);
     };
-    var extractArrayExtend = (extend, stack) => {
-      extend.forEach((each) => flattenExtend(each, stack));
+    var extractArrayExtend = (extend, stack, context) => {
+      extend.forEach((each) => flattenExtend(each, stack, context));
       return stack;
     };
-    var deepExtend = (extend, stack) => {
+    var deepExtend = (extend, stack, context) => {
       const extendOflattenExtend = extend.extend;
       if (extendOflattenExtend) {
-        flattenExtend(extendOflattenExtend, stack);
+        flattenExtend(extendOflattenExtend, stack, context);
       }
       return stack;
     };
-    var flattenExtend = (extend, stack) => {
+    var flattenExtend = (extend, stack, context) => {
       if (!extend)
         return stack;
       if ((0, import_utils24.isArray)(extend))
-        return extractArrayExtend(extend, stack);
+        return extractArrayExtend(extend, stack, context);
+      if ((0, import_utils24.isString)(extend))
+        extend = fallbackStringExtend(extend, context);
       stack.push(extend);
       if (extend.extend)
-        deepExtend(extend, stack);
+        deepExtend(extend, stack, context);
       return stack;
     };
     var deepCloneExtend = (obj) => {
@@ -3697,7 +3846,7 @@ var require_extendUtils = __commonJS({
         return deepMergeExtend(a, deepCloneExtend(c));
       }, {});
     };
-    var fallbackStringExtend = (extend, context, options) => {
+    var fallbackStringExtend = (extend, context, options = {}) => {
       const COMPONENTS = context && context.components || options.components;
       if ((0, import_utils24.isString)(extend)) {
         if (COMPONENTS && COMPONENTS[extend]) {
@@ -3714,38 +3863,24 @@ var require_extendUtils = __commonJS({
     var jointStacks = (extendStack, childExtendStack) => {
       return [].concat(extendStack.slice(0, 1)).concat(childExtendStack.slice(0, 1)).concat(extendStack.slice(1)).concat(childExtendStack.slice(1));
     };
-    var getExtendStack = (extend) => {
+    var getExtendStack = (extend, context) => {
       if (!extend)
         return [];
       if (extend.__hash)
         return getHashedExtend(extend) || [];
-      const stack = flattenExtend(extend, []);
+      const stack = flattenExtend(extend, [], context);
       return getExtendStackRegistry(extend, stack);
     };
     var getExtendMerged = (extend) => {
       const stack = getExtendStack(extend);
       return cloneAndMergeArrayExtend(stack);
     };
-    var replaceStringsWithComponents = (stack, context, options) => {
-      const COMPONENTS = context && context.components || options.components;
-      return stack.map((v) => {
-        if ((0, import_utils24.isString)(v)) {
-          const component = COMPONENTS[v];
-          return component;
-        }
-        if ((0, import_utils24.isString)(v.extend)) {
-          v.extend = COMPONENTS[v.extend];
-          return { ...getExtendMerged(v.extend), ...v };
-        }
-        return v;
-      });
-    };
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/extend.js
+// ../../../domql/packages/element/dist/cjs/extend.js
 var require_extend = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/extend.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/extend.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3777,19 +3912,19 @@ var require_extend = __commonJS({
         element = (0, import_utils24.exec)(element, parent);
       let { extend, props: props4, context, __ref } = element;
       extend = (0, import_utils25.fallbackStringExtend)(extend, context, options);
-      const extendStack = (0, import_utils25.getExtendStack)(extend);
+      const extendStack = (0, import_utils25.getExtendStack)(extend, context);
       if (ENV2 !== "test" || ENV2 !== "development")
         delete element.extend;
       let childExtendStack = [];
       if (parent) {
         element.parent = parent;
         if (!options.ignoreChildExtend && !(props4 && props4.ignoreChildExtend)) {
-          childExtendStack = (0, import_utils25.getExtendStack)(parent.childExtend);
+          childExtendStack = (0, import_utils25.getExtendStack)(parent.childExtend, context);
           const ignoreChildExtendRecursive = props4 && props4.ignoreChildExtendRecursive;
           if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
             const canExtendRecursive = element.key !== "__text";
             if (canExtendRecursive) {
-              const childExtendRecursiveStack = (0, import_utils25.getExtendStack)(parent.childExtendRecursive);
+              const childExtendRecursiveStack = (0, import_utils25.getExtendStack)(parent.childExtendRecursive, context);
               childExtendStack = childExtendStack.concat(childExtendRecursiveStack);
               element.childExtendRecursive = parent.childExtendRecursive;
             }
@@ -3808,13 +3943,12 @@ var require_extend = __commonJS({
       } else if (!options.extend)
         return element;
       if (options.extend) {
-        const defaultOptionsExtend = (0, import_utils25.getExtendStack)(options.extend);
+        const defaultOptionsExtend = (0, import_utils25.getExtendStack)(options.extend, context);
         stack = [].concat(stack, defaultOptionsExtend);
       }
       if (__ref)
         __ref.__extend = stack;
-      const findAndReplaceStrings = (0, import_utils25.replaceStringsWithComponents)(stack, context, options);
-      let mergedExtend = (0, import_utils25.cloneAndMergeArrayExtend)(findAndReplaceStrings);
+      let mergedExtend = (0, import_utils25.cloneAndMergeArrayExtend)(stack);
       const COMPONENTS = context && context.components || options.components;
       const component = (0, import_utils24.exec)(element.component || mergedExtend.component, element);
       if (component && COMPONENTS && COMPONENTS[component]) {
@@ -3826,9 +3960,9 @@ var require_extend = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/utils/component.js
+// ../../../domql/packages/element/dist/cjs/utils/component.js
 var require_component = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/utils/component.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/utils/component.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3880,24 +4014,28 @@ var require_component = __commonJS({
     };
     var extendizeByKey = (element, parent, key) => {
       const { tag, extend, props: props4, state, childExtend, childProps, on: on2, if: condition } = element;
-      const hasComponentAttrs = tag || extend || childExtend || props4 || state || on2 || condition;
+      const hasComponentAttrs = extend || childExtend || props4 || state || on2 || condition;
       const componentKey = key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : key;
       const extendKey = componentKey || key;
       if (!hasComponentAttrs || childProps) {
         return {
           extend: extendKey,
+          tag,
           props: { ...element }
         };
       } else if (!extend || extend === true) {
         return {
           ...element,
+          tag,
           extend: extendKey
         };
       } else if (extend) {
         addAdditionalExtend(extendKey, element);
       } else if ((0, import_utils24.isFunction)(element)) {
+        console.log(element);
         return {
           extend: extendKey,
+          tag,
           props: { ...(0, import_utils24.exec)(element, parent) }
         };
       }
@@ -3967,9 +4105,9 @@ var require_component = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/utils/index.js
+// ../../../domql/packages/element/dist/cjs/utils/index.js
 var require_utils = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/utils/index.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/utils/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3993,9 +4131,9 @@ var require_utils = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/iterate.js
+// ../../../domql/packages/element/dist/cjs/iterate.js
 var require_iterate = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/iterate.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/iterate.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4107,9 +4245,9 @@ var require_iterate = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/applyParam.js
+// ../../../domql/packages/element/dist/cjs/applyParam.js
 var require_applyParam = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/applyParam.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/applyParam.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4156,9 +4294,9 @@ var require_applyParam = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/node.js
+// ../../../domql/packages/element/dist/cjs/node.js
 var require_node2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/node.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -4221,25 +4359,25 @@ var require_node2 = __commonJS({
         if ((0, import_utils24.isFunction)(node2.setAttribute))
           node2.setAttribute("key", element.key);
       }
-      if (element.tag !== "string" || element.tag !== "fragment") {
-        (0, import_iterate.throughInitialDefine)(element);
-        (0, import_iterate.throughInitialExec)(element);
+      (0, import_iterate.throughInitialDefine)(element);
+      (0, import_iterate.throughInitialExec)(element);
+      if (element.tag !== "string" && element.tag !== "fragment") {
         if (isNewNode && (0, import_utils24.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element);
-        for (const param in element) {
-          const prop = element[param];
-          if ((0, import_utils24.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils25.isVariant)(param) || (0, import_utils24.isObject)(import_mixins.registry[param]))
-            continue;
-          const isElement = (0, import_applyParam.applyParam)(param, element, options);
-          if (isElement) {
-            const { hasDefine, hasContextDefine } = isElement;
-            if (element[param] && !hasDefine && !hasContextDefine) {
-              const createAsync = () => (0, import_create.default)((0, import_utils24.exec)(prop, element), element, param, options);
-              if (element.props && element.props.lazyLoad || options.lazyLoad) {
-                window.requestAnimationFrame(() => createAsync());
-              } else
-                createAsync();
-            }
+      }
+      for (const param in element) {
+        const value2 = element[param];
+        if ((0, import_utils24.isUndefined)(value2) || (0, import_methods.isMethod)(param) || (0, import_utils25.isVariant)(param) || (0, import_utils24.isObject)(import_mixins.registry[param]))
+          continue;
+        const isElement = (0, import_applyParam.applyParam)(param, element, options);
+        if (isElement) {
+          const { hasDefine, hasContextDefine } = isElement;
+          if (element[param] && !hasDefine && !hasContextDefine) {
+            const createAsync = () => (0, import_create.default)((0, import_utils24.exec)(value2, element), element, param, options);
+            if (element.props && element.props.lazyLoad || options.lazyLoad) {
+              window.requestAnimationFrame(() => createAsync());
+            } else
+              createAsync();
           }
         }
       }
@@ -4249,9 +4387,9 @@ var require_node2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/registry/dist/cjs/methods.js
-var require_methods3 = __commonJS({
-  "../../node_modules/@domql/registry/dist/cjs/methods.js"(exports, module2) {
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/key.js
+var require_key2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4270,46 +4408,65 @@ var require_methods3 = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var methods_exports = {};
-    __export2(methods_exports, {
-      DEFAULT_METHODS: () => DEFAULT_METHODS
+    var key_exports = {};
+    __export2(key_exports, {
+      createSnapshotId: () => createSnapshotId,
+      generateKey: () => generateKey
     });
-    module2.exports = __toCommonJS2(methods_exports);
-    var import_utils24 = require_cjs();
-    var DEFAULT_METHODS = {
-      key: {},
-      tag: {},
-      if: {},
-      define: {},
-      attr: {},
-      style: {},
-      content: {},
-      class: {},
-      props: {},
-      state: {},
-      method: {},
-      transform: {},
-      on: {},
-      ref: {},
-      extend: {},
-      childExtend: {},
-      text: (element, state) => {
-        element.ref.text = {
-          tag: "text",
-          text: (0, import_utils24.exec)(element.text, element, state)
-        };
-      },
-      innerHTML: {},
-      set: {},
-      update: {},
-      remove: {}
+    module2.exports = __toCommonJS2(key_exports);
+    var generateKey = function() {
+      let index = 0;
+      function newId() {
+        index++;
+        return index;
+      }
+      return newId;
+    }();
+    var createSnapshotId = generateKey;
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/env.js
+var require_env2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
     };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var env_exports = {};
+    __export2(env_exports, {
+      NODE_ENV: () => NODE_ENV,
+      getNev: () => getNev,
+      isDevelopment: () => isDevelopment2,
+      isProduction: () => isProduction3,
+      isTest: () => isTest2
+    });
+    module2.exports = __toCommonJS2(env_exports);
+    var NODE_ENV = "development";
+    var isProduction3 = (env = NODE_ENV) => env === "production" || env === "prod" || env !== "development" && env !== "dev" && env !== "test";
+    var isTest2 = (env = NODE_ENV) => env === "test";
+    var isDevelopment2 = (env = NODE_ENV) => env === "development" || env === "dev";
+    var getNev = (key, env = NODE_ENV) => env[key];
   }
 });
 
-// ../../node_modules/@domql/registry/dist/cjs/tags.js
-var require_tags2 = __commonJS({
-  "../../node_modules/@domql/registry/dist/cjs/tags.js"(exports, module2) {
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/globals.js
+var require_globals2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4328,56 +4485,943 @@ var require_tags2 = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var tags_exports = {};
-    __export2(tags_exports, {
-      TAGS: () => TAGS
+    var globals_exports = {};
+    __export2(globals_exports, {
+      document: () => document2,
+      global: () => global,
+      self: () => self2,
+      window: () => window5
     });
-    module2.exports = __toCommonJS2(tags_exports);
-    var TAGS = {
-      root: [
-        "body",
-        "html"
-      ],
-      head: [
-        "title",
-        "base",
-        "meta",
-        "style"
-      ],
-      body: [
-        "html",
-        "body",
-        "string",
-        "fragment",
-        "a",
-        "abbr",
-        "acronym",
-        "address",
-        "applet",
-        "area",
-        "article",
-        "aside",
-        "audio",
-        "b",
-        "basefont",
-        "bdi",
-        "bdo",
-        "big",
-        "blockquote",
-        "br",
-        "button",
-        "canvas",
-        "caption",
-        "center",
-        "cite",
-        "code",
-        "col",
-        "colgroup",
-        "data",
-        "datalist",
-        "dd",
-        "del",
-        "details",
+    module2.exports = __toCommonJS2(globals_exports);
+    var global = globalThis;
+    var self2 = globalThis;
+    var window5 = globalThis;
+    var document2 = window5.document;
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/node.js
+var require_node3 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var node_exports = {};
+    __export2(node_exports, {
+      isHtmlElement: () => isHtmlElement,
+      isNode: () => isNode
+    });
+    module2.exports = __toCommonJS2(node_exports);
+    var import_globals2 = require_globals2();
+    var isNode = (obj) => {
+      return (typeof Node === "object" ? obj instanceof import_globals2.window.Node : obj && typeof obj === "object" && typeof obj.nodeType === "number" && typeof obj.nodeName === "string") || false;
+    };
+    var isHtmlElement = (obj) => {
+      return (typeof HTMLElement === "object" ? obj instanceof import_globals2.window.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string") || false;
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/types.js
+var require_types2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var types_exports = {};
+    __export2(types_exports, {
+      TYPES: () => TYPES,
+      is: () => is,
+      isArray: () => isArray6,
+      isBoolean: () => isBoolean,
+      isDefined: () => isDefined2,
+      isFunction: () => isFunction4,
+      isNot: () => isNot2,
+      isNull: () => isNull,
+      isNumber: () => isNumber,
+      isObject: () => isObject12,
+      isObjectLike: () => isObjectLike3,
+      isString: () => isString10,
+      isUndefined: () => isUndefined4
+    });
+    module2.exports = __toCommonJS2(types_exports);
+    var import_node = require_node3();
+    var isObject12 = (arg) => {
+      if (arg === null)
+        return false;
+      return typeof arg === "object" && arg.constructor === Object;
+    };
+    var isString10 = (arg) => typeof arg === "string";
+    var isNumber = (arg) => typeof arg === "number";
+    var isFunction4 = (arg) => typeof arg === "function";
+    var isBoolean = (arg) => arg === true || arg === false;
+    var isNull = (arg) => arg === null;
+    var isArray6 = (arg) => Array.isArray(arg);
+    var isObjectLike3 = (arg) => {
+      if (arg === null)
+        return false;
+      return typeof arg === "object";
+    };
+    var isDefined2 = (arg) => {
+      return isObject12(arg) || isObjectLike3(arg) || isString10(arg) || isNumber(arg) || isFunction4(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+    };
+    var isUndefined4 = (arg) => {
+      return arg === void 0;
+    };
+    var TYPES = {
+      boolean: isBoolean,
+      array: isArray6,
+      object: isObject12,
+      string: isString10,
+      number: isNumber,
+      null: isNull,
+      function: isFunction4,
+      objectLike: isObjectLike3,
+      node: import_node.isNode,
+      htmlElement: import_node.isHtmlElement,
+      defined: isDefined2
+    };
+    var is = (arg) => {
+      return (...args) => {
+        return args.map((val) => TYPES[val](arg)).filter((v) => v).length > 0;
+      };
+    };
+    var isNot2 = (arg) => {
+      return (...args) => {
+        return args.map((val) => TYPES[val](arg)).filter((v) => v).length === 0;
+      };
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/array.js
+var require_array2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var array_exports = {};
+    __export2(array_exports, {
+      arrayContainsOtherArray: () => arrayContainsOtherArray,
+      createNestedObject: () => createNestedObject,
+      cutArrayAfterValue: () => cutArrayAfterValue,
+      cutArrayBeforeValue: () => cutArrayBeforeValue,
+      joinArrays: () => joinArrays,
+      mergeAndCloneIfArray: () => mergeAndCloneIfArray,
+      mergeArray: () => mergeArray,
+      removeFromArray: () => removeFromArray,
+      swapItemsInArray: () => swapItemsInArray
+    });
+    module2.exports = __toCommonJS2(array_exports);
+    var import_object = require_object3();
+    var import_types = require_types2();
+    var arrayContainsOtherArray = (arr1, arr2) => {
+      return arr2.every((val) => arr1.includes(val));
+    };
+    var removeFromArray = (arr, index) => {
+      if ((0, import_types.isString)(index))
+        index = parseInt(index);
+      if ((0, import_types.isNumber)(index)) {
+        if (index < 0 || index >= arr.length || isNaN(index)) {
+          throw new Error("Invalid index");
+        }
+        arr.splice(index, 1);
+      } else if ((0, import_types.isArray)(index)) {
+        index.forEach((idx) => removeFromArray(arr, idx));
+      } else {
+        throw new Error("Invalid index");
+      }
+      return arr;
+    };
+    var swapItemsInArray = (arr, i2, j) => {
+      [arr[i2], arr[j]] = [arr[j], arr[i2]];
+    };
+    var joinArrays = (...arrays) => {
+      return [].concat(...arrays);
+    };
+    var mergeArray = (arr, excludeFrom = []) => {
+      return arr.reduce((a, c) => (0, import_object.deepMerge)(a, (0, import_object.deepClone)(c, excludeFrom), excludeFrom), {});
+    };
+    var mergeAndCloneIfArray = (obj) => {
+      return (0, import_types.isArray)(obj) ? mergeArray(obj) : (0, import_object.deepClone)(obj);
+    };
+    var cutArrayBeforeValue = (arr, value2) => {
+      const index = arr.indexOf(value2);
+      if (index !== -1) {
+        return arr.slice(0, index);
+      }
+      return arr;
+    };
+    var cutArrayAfterValue = (arr, value2) => {
+      const index = arr.indexOf(value2);
+      if (index !== -1) {
+        return arr.slice(index + 1);
+      }
+      return arr;
+    };
+    var createNestedObject = (arr, lastValue) => {
+      const nestedObject = {};
+      if (arr.length === 0) {
+        return lastValue;
+      }
+      arr.reduce((obj, value2, index) => {
+        if (!obj[value2]) {
+          obj[value2] = {};
+        }
+        if (index === arr.length - 1 && lastValue) {
+          obj[value2] = lastValue;
+        }
+        return obj[value2];
+      }, nestedObject);
+      return nestedObject;
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/string.js
+var require_string2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var string_exports = {};
+    __export2(string_exports, {
+      replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields2,
+      stringIncludesAny: () => stringIncludesAny
+    });
+    module2.exports = __toCommonJS2(string_exports);
+    var stringIncludesAny = (str, characters2) => {
+      for (const char2 of characters2) {
+        if (str.includes(char2)) {
+          return true;
+        }
+      }
+      return false;
+    };
+    var brackRegex = /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g;
+    var replaceLiteralsWithObjectFields2 = (str, state) => {
+      if (!str.includes("{{"))
+        return str;
+      return str.replace(brackRegex, (_, parentPath, variable) => {
+        if (parentPath) {
+          const parentLevels = parentPath.match(/\.\.\//g).length;
+          let parentState = state;
+          for (let i2 = 0; i2 < parentLevels; i2++) {
+            parentState = parentState.parent;
+            if (!parentState) {
+              return "";
+            }
+          }
+          const value2 = parentState[variable.trim()];
+          return value2 !== void 0 ? `${value2}` : "";
+        } else {
+          const value2 = state[variable.trim()];
+          return value2 !== void 0 ? `${value2}` : "";
+        }
+      });
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/object.js
+var require_object3 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var object_exports = {};
+    __export2(object_exports, {
+      clone: () => clone,
+      deepClone: () => deepClone4,
+      deepCloneExclude: () => deepCloneExclude,
+      deepDestringify: () => deepDestringify,
+      deepMerge: () => deepMerge4,
+      deepStringify: () => deepStringify,
+      detachFunctionsFromObject: () => detachFunctionsFromObject,
+      diff: () => diff,
+      diffArrays: () => diffArrays,
+      diffObjects: () => diffObjects,
+      exec: () => exec4,
+      flattenRecursive: () => flattenRecursive,
+      isEqualDeep: () => isEqualDeep2,
+      map: () => map2,
+      merge: () => merge4,
+      mergeArrayExclude: () => mergeArrayExclude,
+      mergeIfExisted: () => mergeIfExisted,
+      objectToString: () => objectToString,
+      overwrite: () => overwrite,
+      overwriteDeep: () => overwriteDeep,
+      overwriteShallow: () => overwriteShallow2,
+      removeFromObject: () => removeFromObject,
+      stringToObject: () => stringToObject
+    });
+    module2.exports = __toCommonJS2(object_exports);
+    var import_globals2 = require_globals2();
+    var import_types = require_types2();
+    var import_array = require_array2();
+    var import_string = require_string2();
+    var exec4 = (param, element, state, context) => {
+      if ((0, import_types.isFunction)(param)) {
+        return param(
+          element,
+          state || element.state,
+          context || element.context
+        );
+      }
+      return param;
+    };
+    var map2 = (obj, extention, element) => {
+      for (const e in extention) {
+        obj[e] = exec4(extention[e], element);
+      }
+    };
+    var merge4 = (element, obj, excludeFrom = []) => {
+      for (const e in obj) {
+        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, e);
+        if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+          continue;
+        const elementProp = element[e];
+        const objProp = obj[e];
+        if (elementProp === void 0) {
+          element[e] = objProp;
+        }
+      }
+      return element;
+    };
+    var deepMerge4 = (element, extend, excludeFrom = []) => {
+      for (const e in extend) {
+        const hasOwnProperty = Object.prototype.hasOwnProperty.call(extend, e);
+        if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+          continue;
+        const elementProp = element[e];
+        const extendProp = extend[e];
+        if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
+          deepMerge4(elementProp, extendProp);
+        } else if (elementProp === void 0) {
+          element[e] = extendProp;
+        }
+      }
+      return element;
+    };
+    var clone = (obj, excludeFrom = []) => {
+      const o = {};
+      for (const prop in obj) {
+        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
+        if (!hasOwnProperty || excludeFrom.includes(prop) || prop.startsWith("__"))
+          continue;
+        o[prop] = obj[prop];
+      }
+      return o;
+    };
+    var deepCloneExclude = (obj, excludeFrom = []) => {
+      if ((0, import_types.isArray)(obj)) {
+        return obj.map((x) => deepCloneExclude(x, excludeFrom));
+      }
+      const o = {};
+      for (const k in obj) {
+        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, k);
+        if (!hasOwnProperty || excludeFrom.includes(k) || k.startsWith("__"))
+          continue;
+        let v = obj[k];
+        if (k === "extend" && (0, import_types.isArray)(v)) {
+          v = mergeArrayExclude(v, excludeFrom);
+        }
+        if ((0, import_types.isArray)(v)) {
+          o[k] = v.map((x) => deepCloneExclude(x, excludeFrom));
+        } else if ((0, import_types.isObject)(v)) {
+          o[k] = deepCloneExclude(v, excludeFrom);
+        } else
+          o[k] = v;
+      }
+      return o;
+    };
+    var mergeArrayExclude = (arr, excl = []) => {
+      return arr.reduce((acc, curr) => deepMerge4(acc, deepCloneExclude(curr, excl)), {});
+    };
+    var deepClone4 = (obj, excludeFrom = []) => {
+      const o = (0, import_types.isArray)(obj) ? [] : {};
+      for (const prop in obj) {
+        if (prop === "__proto__")
+          continue;
+        if (excludeFrom.includes(prop) || prop.startsWith("__"))
+          continue;
+        let objProp = obj[prop];
+        if (prop === "extend" && (0, import_types.isArray)(objProp)) {
+          objProp = (0, import_array.mergeArray)(objProp);
+        }
+        if ((0, import_types.isObjectLike)(objProp)) {
+          o[prop] = deepClone4(objProp, excludeFrom);
+        } else
+          o[prop] = objProp;
+      }
+      return o;
+    };
+    var deepStringify = (obj, stringified = {}) => {
+      for (const prop in obj) {
+        const objProp = obj[prop];
+        if ((0, import_types.isFunction)(objProp)) {
+          stringified[prop] = objProp.toString();
+        } else if ((0, import_types.isObject)(objProp)) {
+          stringified[prop] = {};
+          deepStringify(objProp, stringified[prop]);
+        } else if ((0, import_types.isArray)(objProp)) {
+          stringified[prop] = [];
+          objProp.forEach((v, i2) => {
+            if ((0, import_types.isObject)(v)) {
+              stringified[prop][i2] = {};
+              deepStringify(v, stringified[prop][i2]);
+            } else if ((0, import_types.isFunction)(v)) {
+              stringified[prop][i2] = v.toString();
+            } else {
+              stringified[prop][i2] = v;
+            }
+          });
+        } else {
+          stringified[prop] = objProp;
+        }
+      }
+      return stringified;
+    };
+    var objectToString = (obj, indent = 0) => {
+      const spaces = "  ".repeat(indent);
+      let str = "{\n";
+      for (const [key, value2] of Object.entries(obj)) {
+        const keyAllowdChars = (0, import_string.stringIncludesAny)(key, ["-", ":", "@", ".", "!"]);
+        const stringedKey = keyAllowdChars ? `'${key}'` : key;
+        str += `${spaces}  ${stringedKey}: `;
+        if ((0, import_types.isArray)(value2)) {
+          str += "[\n";
+          for (const element of value2) {
+            if ((0, import_types.isObject)(element) && element !== null) {
+              str += `${spaces}    ${objectToString(element, indent + 2)},
+`;
+            } else if ((0, import_types.isString)(element)) {
+              str += `${spaces}    '${element}',
+`;
+            } else {
+              str += `${spaces}    ${element},
+`;
+            }
+          }
+          str += `${spaces}  ]`;
+        } else if ((0, import_types.isObject)(value2)) {
+          str += objectToString(value2, indent + 1);
+        } else if ((0, import_types.isString)(value2)) {
+          str += (0, import_string.stringIncludesAny)(value2, ["\n", "'"]) ? `\`${value2}\`` : `'${value2}'`;
+        } else {
+          str += value2;
+        }
+        str += ",\n";
+      }
+      str += `${spaces}}`;
+      return str;
+    };
+    var detachFunctionsFromObject = (obj, detached = {}) => {
+      for (const prop in obj) {
+        const objProp = obj[prop];
+        if ((0, import_types.isFunction)(objProp))
+          continue;
+        else if ((0, import_types.isObject)(objProp)) {
+          detached[prop] = {};
+          deepStringify(objProp, detached[prop]);
+        } else if ((0, import_types.isArray)(objProp)) {
+          detached[prop] = [];
+          objProp.forEach((v, i2) => {
+            if ((0, import_types.isFunction)(v))
+              return;
+            if ((0, import_types.isObject)(v)) {
+              detached[prop][i2] = {};
+              detachFunctionsFromObject(v, detached[prop][i2]);
+            } else {
+              detached[prop][i2] = v;
+            }
+          });
+        } else {
+          detached[prop] = objProp;
+        }
+      }
+      return detached;
+    };
+    var deepDestringify = (obj, stringified = {}) => {
+      for (const prop in obj) {
+        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
+        if (!hasOwnProperty)
+          continue;
+        const objProp = obj[prop];
+        if ((0, import_types.isString)(objProp)) {
+          if (objProp.includes("=>") || objProp.includes("function") || objProp.startsWith("(")) {
+            try {
+              const evalProp = import_globals2.window.eval(`(${objProp})`);
+              stringified[prop] = evalProp;
+            } catch (e) {
+              if (e)
+                stringified[prop] = objProp;
+            }
+          } else {
+            stringified[prop] = objProp;
+          }
+        } else if ((0, import_types.isArray)(objProp)) {
+          stringified[prop] = [];
+          objProp.forEach((arrProp) => {
+            if ((0, import_types.isString)(arrProp)) {
+              if (arrProp.includes("=>") || arrProp.includes("function") || arrProp.startsWith("(")) {
+                try {
+                  const evalProp = import_globals2.window.eval(`(${arrProp})`);
+                  stringified[prop].push(evalProp);
+                } catch (e) {
+                  if (e)
+                    stringified[prop].push(arrProp);
+                }
+              } else {
+                stringified[prop].push(arrProp);
+              }
+            } else if ((0, import_types.isObject)(arrProp)) {
+              stringified[prop].push(deepDestringify(arrProp));
+            } else {
+              stringified[prop].push(arrProp);
+            }
+          });
+        } else if ((0, import_types.isObject)(objProp)) {
+          stringified[prop] = deepDestringify(objProp, stringified[prop]);
+        } else {
+          stringified[prop] = objProp;
+        }
+      }
+      return stringified;
+    };
+    var stringToObject = (str) => {
+      let obj;
+      try {
+        obj = import_globals2.window.eval("(" + str + ")");
+      } catch (e) {
+        console.warn(e);
+      }
+      if (obj)
+        return obj;
+    };
+    var diffObjects = (original, objToDiff, cache2) => {
+      for (const e in objToDiff) {
+        if (e === "ref")
+          continue;
+        const originalProp = original[e];
+        const objToDiffProp = objToDiff[e];
+        if ((0, import_types.isObject)(originalProp) && (0, import_types.isObject)(objToDiffProp)) {
+          cache2[e] = {};
+          diff(originalProp, objToDiffProp, cache2[e]);
+        } else if (objToDiffProp !== void 0) {
+          cache2[e] = objToDiffProp;
+        }
+      }
+      return cache2;
+    };
+    var diffArrays = (original, objToDiff, cache2) => {
+      if (original.length !== objToDiff.length) {
+        cache2 = objToDiff;
+      } else {
+        const diffArr = [];
+        for (let i2 = 0; i2 < original.length; i2++) {
+          const diffObj = diff(original[i2], objToDiff[i2]);
+          if (Object.keys(diffObj).length > 0) {
+            diffArr.push(diffObj);
+          }
+        }
+        if (diffArr.length > 0) {
+          cache2 = diffArr;
+        }
+      }
+      return cache2;
+    };
+    var diff = (original, objToDiff, cache2 = {}) => {
+      if ((0, import_types.isArray)(original) && (0, import_types.isArray)(objToDiff)) {
+        cache2 = [];
+        diffArrays(original, objToDiff, cache2);
+      } else {
+        diffObjects(original, objToDiff, cache2);
+      }
+      return cache2;
+    };
+    var overwrite = (element, params, excludeFrom = []) => {
+      const { ref } = element;
+      const changes = {};
+      for (const e in params) {
+        if (excludeFrom.includes(e) || e.startsWith("__"))
+          continue;
+        const elementProp = element[e];
+        const paramsProp = params[e];
+        if (paramsProp) {
+          ref.__cache[e] = changes[e] = elementProp;
+          ref[e] = paramsProp;
+        }
+      }
+      return changes;
+    };
+    var overwriteShallow2 = (obj, params, excludeFrom = []) => {
+      for (const e in params) {
+        if (excludeFrom.includes(e) || e.startsWith("__"))
+          continue;
+        obj[e] = params[e];
+      }
+      return obj;
+    };
+    var overwriteDeep = (obj, params, excludeFrom = []) => {
+      for (const e in params) {
+        if (e === "__proto__")
+          continue;
+        if (excludeFrom.includes(e) || e.startsWith("__"))
+          continue;
+        const objProp = obj[e];
+        const paramsProp = params[e];
+        if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
+          overwriteDeep(objProp, paramsProp);
+        } else if (paramsProp !== void 0) {
+          obj[e] = paramsProp;
+        }
+      }
+      return obj;
+    };
+    var mergeIfExisted = (a, b) => {
+      if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
+        return deepMerge4(a, b);
+      return a || b;
+    };
+    var flattenRecursive = (param, prop, stack = []) => {
+      const objectized = (0, import_array.mergeAndCloneIfArray)(param);
+      stack.push(objectized);
+      const extendOfExtend = objectized[prop];
+      if (extendOfExtend)
+        flattenRecursive(extendOfExtend, prop, stack);
+      delete objectized[prop];
+      return stack;
+    };
+    var isEqualDeep2 = (param, element) => {
+      if (param === element)
+        return true;
+      if (!param || !element)
+        return false;
+      for (const prop in param) {
+        const paramProp = param[prop];
+        const elementProp = element[prop];
+        if ((0, import_types.isObjectLike)(paramProp)) {
+          const isEqual = isEqualDeep2(paramProp, elementProp);
+          if (!isEqual)
+            return false;
+        } else {
+          const isEqual = paramProp === elementProp;
+          if (!isEqual)
+            return false;
+        }
+      }
+      return true;
+    };
+    var removeFromObject = (obj, props4) => {
+      if (props4 === void 0 || props4 === null)
+        return obj;
+      if ((0, import_types.is)(props4)("string", "number")) {
+        delete obj[props4];
+      } else if ((0, import_types.isArray)(props4)) {
+        props4.forEach((prop) => delete obj[prop]);
+      } else {
+        throw new Error("Invalid input: props must be a string or an array of strings");
+      }
+      return obj;
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/function.js
+var require_function2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var function_exports = {};
+    __export2(function_exports, {
+      debounce: () => debounce,
+      memoize: () => memoize2
+    });
+    module2.exports = __toCommonJS2(function_exports);
+    var debounce = (element, func, timeout = 300) => {
+      let timer;
+      return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          func.apply(element, args);
+        }, timeout);
+      };
+    };
+    var memoize2 = (fn) => {
+      const cache2 = {};
+      return (...args) => {
+        const n = args[0];
+        if (n in cache2) {
+          return cache2[n];
+        } else {
+          const result = fn(n);
+          cache2[n] = result;
+          return result;
+        }
+      };
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/log.js
+var require_log2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var log_exports = {};
+    __export2(log_exports, {
+      logGroupIf: () => logGroupIf,
+      logIf: () => logIf
+    });
+    module2.exports = __toCommonJS2(log_exports);
+    var logIf = (bool, ...arg) => {
+      if (bool)
+        arg.map((v) => console.log(v));
+    };
+    var logGroupIf = (bool, key, ...arg) => {
+      if (bool) {
+        console.group(key);
+        arg.map((v) => console.log(v));
+        console.groupEnd(key);
+      }
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/cookie.js
+var require_cookie2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var cookie_exports = {};
+    __export2(cookie_exports, {
+      getCookie: () => getCookie,
+      isMobile: () => isMobile,
+      setCookie: () => setCookie
+    });
+    module2.exports = __toCommonJS2(cookie_exports);
+    var import_types = require_types2();
+    var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
+    var setCookie = (cname, cvalue, exdays = 365) => {
+      if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+        return;
+      const d = /* @__PURE__ */ new Date();
+      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1e3);
+      const expires = `expires=${d.toUTCString()}`;
+      document.cookie = `${cname}=${cvalue};${expires};path=/`;
+    };
+    var getCookie = (cname) => {
+      if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+        return;
+      const name = `${cname}=`;
+      const decodedCookie = decodeURIComponent(document.cookie);
+      const ca = decodedCookie.split(";");
+      for (let i2 = 0; i2 < ca.length; i2++) {
+        let c = ca[i2];
+        while (c.charAt(0) === " ")
+          c = c.substring(1);
+        if (c.indexOf(name) === 0)
+          return c.substring(name.length, c.length);
+      }
+      return "";
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/tags.js
+var require_tags2 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var tags_exports = {};
+    __export2(tags_exports, {
+      HTML_TAGS: () => HTML_TAGS,
+      isValidHtmlTag: () => isValidHtmlTag
+    });
+    module2.exports = __toCommonJS2(tags_exports);
+    var HTML_TAGS = {
+      root: [
+        "body",
+        "html"
+      ],
+      head: [
+        "title",
+        "base",
+        "meta",
+        "style"
+      ],
+      body: [
+        "string",
+        "fragment",
+        "a",
+        "abbr",
+        "acronym",
+        "address",
+        "applet",
+        "area",
+        "article",
+        "aside",
+        "audio",
+        "b",
+        "basefont",
+        "bdi",
+        "bdo",
+        "big",
+        "blockquote",
+        "br",
+        "button",
+        "canvas",
+        "caption",
+        "center",
+        "cite",
+        "code",
+        "col",
+        "colgroup",
+        "data",
+        "datalist",
+        "dd",
+        "del",
+        "details",
         "dfn",
         "dialog",
         "dir",
@@ -4469,12 +5513,271 @@ var require_tags2 = __commonJS({
         "path"
       ]
     };
+    var isValidHtmlTag = (arg) => HTML_TAGS.body.includes(arg);
   }
 });
 
-// ../../node_modules/@domql/registry/dist/cjs/index.js
+// ../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/index.js
 var require_cjs6 = __commonJS({
-  "../../node_modules/@domql/registry/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/node_modules/@domql/registry/node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __reExport2 = (target, mod, secondTarget) => (__copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default"));
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var utils_exports = {};
+    module2.exports = __toCommonJS2(utils_exports);
+    __reExport2(utils_exports, require_key2(), module2.exports);
+    __reExport2(utils_exports, require_env2(), module2.exports);
+    __reExport2(utils_exports, require_types2(), module2.exports);
+    __reExport2(utils_exports, require_object3(), module2.exports);
+    __reExport2(utils_exports, require_function2(), module2.exports);
+    __reExport2(utils_exports, require_array2(), module2.exports);
+    __reExport2(utils_exports, require_node3(), module2.exports);
+    __reExport2(utils_exports, require_log2(), module2.exports);
+    __reExport2(utils_exports, require_string2(), module2.exports);
+    __reExport2(utils_exports, require_globals2(), module2.exports);
+    __reExport2(utils_exports, require_cookie2(), module2.exports);
+    __reExport2(utils_exports, require_tags2(), module2.exports);
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/dist/cjs/methods.js
+var require_methods3 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/dist/cjs/methods.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var methods_exports = {};
+    __export2(methods_exports, {
+      DEFAULT_METHODS: () => DEFAULT_METHODS
+    });
+    module2.exports = __toCommonJS2(methods_exports);
+    var import_utils24 = require_cjs6();
+    var DEFAULT_METHODS = {
+      key: {},
+      tag: {},
+      if: {},
+      define: {},
+      attr: {},
+      style: {},
+      content: {},
+      class: {},
+      props: {},
+      state: {},
+      method: {},
+      transform: {},
+      on: {},
+      ref: {},
+      extend: {},
+      childExtend: {},
+      text: (element, state) => {
+        element.ref.text = {
+          tag: "text",
+          text: (0, import_utils24.exec)(element.text, element, state)
+        };
+      },
+      innerHTML: {},
+      set: {},
+      update: {},
+      remove: {}
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/dist/cjs/tags.js
+var require_tags3 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/dist/cjs/tags.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var tags_exports = {};
+    __export2(tags_exports, {
+      TAGS: () => TAGS
+    });
+    module2.exports = __toCommonJS2(tags_exports);
+    var TAGS = {
+      root: [
+        "body",
+        "html"
+      ],
+      head: [
+        "title",
+        "base",
+        "meta",
+        "style"
+      ],
+      body: [
+        "html",
+        "body",
+        "string",
+        "fragment",
+        "a",
+        "abbr",
+        "acronym",
+        "address",
+        "applet",
+        "area",
+        "article",
+        "aside",
+        "audio",
+        "b",
+        "basefont",
+        "bdi",
+        "bdo",
+        "big",
+        "blockquote",
+        "br",
+        "button",
+        "canvas",
+        "caption",
+        "center",
+        "cite",
+        "code",
+        "col",
+        "colgroup",
+        "data",
+        "datalist",
+        "dd",
+        "del",
+        "details",
+        "dfn",
+        "dialog",
+        "dir",
+        "div",
+        "dl",
+        "dt",
+        "em",
+        "embed",
+        "fieldset",
+        "figcaption",
+        "figure",
+        "font",
+        "footer",
+        "form",
+        "frame",
+        "frameset",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "head",
+        "header",
+        "hr",
+        "i",
+        "iframe",
+        "img",
+        "input",
+        "ins",
+        "kbd",
+        "label",
+        "legend",
+        "li",
+        "link",
+        "main",
+        "map",
+        "mark",
+        "meter",
+        "nav",
+        "noframes",
+        "noscript",
+        "object",
+        "ol",
+        "optgroup",
+        "option",
+        "output",
+        "p",
+        "param",
+        "picture",
+        "pre",
+        "progress",
+        "q",
+        "rp",
+        "rt",
+        "ruby",
+        "s",
+        "samp",
+        "script",
+        "section",
+        "select",
+        "small",
+        "source",
+        "span",
+        "strike",
+        "strong",
+        "sub",
+        "summary",
+        "sup",
+        "table",
+        "tbody",
+        "td",
+        "template",
+        "textarea",
+        "tfoot",
+        "th",
+        "thead",
+        "time",
+        "tr",
+        "track",
+        "tt",
+        "u",
+        "ul",
+        "var",
+        "video",
+        "wbr",
+        // SVG
+        "svg",
+        "path"
+      ]
+    };
+  }
+});
+
+// ../../../domql/node_modules/@domql/registry/dist/cjs/index.js
+var require_cjs7 = __commonJS({
+  "../../../domql/node_modules/@domql/registry/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4493,13 +5796,13 @@ var require_cjs6 = __commonJS({
     var registry_exports = {};
     module2.exports = __toCommonJS2(registry_exports);
     __reExport2(registry_exports, require_methods3(), module2.exports);
-    __reExport2(registry_exports, require_tags2(), module2.exports);
+    __reExport2(registry_exports, require_tags3(), module2.exports);
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/update.js
+// ../../../domql/packages/element/dist/cjs/update.js
 var require_update2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/update.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/update.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -4559,6 +5862,7 @@ var require_update2 = __commonJS({
       const element = this;
       const { parent, node: node2, key } = element;
       const { excludes, preventInheritAtCurrentState } = options;
+      (0, import_event.triggerEventOnUpdate)("startUpdate", params, element, options);
       if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
         return;
       if (!excludes)
@@ -4572,12 +5876,12 @@ var require_update2 = __commonJS({
       if ((0, import_utils24.isString)(params) || (0, import_utils24.isNumber)(params)) {
         params = { text: params };
       }
-      const ifFails = checkIfOnUpdate(element, parent, options);
-      if (ifFails)
-        return;
       const inheritState = inheritStateUpdates(element, options);
       if (inheritState === false)
         return;
+      const ifFails = checkIfOnUpdate(element, parent, options);
+      if (ifFails)
+        return;
       if (ref.__if && !options.preventPropsUpdate) {
         const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
         const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils24.isFunction)(v));
@@ -4585,9 +5889,6 @@ var require_update2 = __commonJS({
         if (props4)
           (0, import_props.updateProps)(props4, element, parent);
       }
-      if (!options.isForced) {
-        (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
-      }
       if (!options.preventInitUpdateListener) {
         const initUpdateReturns = (0, import_event.triggerEventOnUpdate)("initUpdate", params, element, options);
         if (initUpdateReturns === false)
@@ -4596,6 +5897,9 @@ var require_update2 = __commonJS({
       const overwriteChanges = (0, import_utils24.overwriteDeep)(element, params, import_utils25.METHODS_EXL);
       const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
       const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
+      if (!options.isForced) {
+        (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
+      }
       if (options.stackChanges && element.__stackChanges) {
         const stackChanges = (0, import_utils24.merge)(definedChanges, (0, import_utils24.merge)(execChanges, overwriteChanges));
         element.__stackChanges.push(stackChanges);
@@ -4620,15 +5924,13 @@ var require_update2 = __commonJS({
           const canUpdate = (0, import_utils24.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
           if (!canUpdate)
             continue;
+          const lazyLoad = element.props.lazyLoad || options.lazyLoad;
           const childUpdateCall = () => update.call(prop, params[prop], {
             ...options,
             currentSnapshot: snapshotOnCallee,
             calleeElement
           });
-          if (element.props && element.props.lazyLoad || options.lazyLoad) {
-            import_utils24.window.requestAnimationFrame(() => childUpdateCall());
-          } else
-            childUpdateCall();
+          lazyLoad ? import_utils24.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
         }
       }
       if (!options.preventUpdateListener)
@@ -4650,7 +5952,8 @@ var require_update2 = __commonJS({
       return [snapshotOnCallee, calleeElement];
     };
     var checkIfOnUpdate = (element, parent, options) => {
-      if (!(0, import_utils24.isFunction)(element.if) || !element.state || !parent)
+      var _a;
+      if (!(0, import_utils24.isFunction)(element.if) || !parent)
         return;
       const ref = element.__ref;
       const ifPassed = element.if(element, element.state, element.context, options);
@@ -4666,7 +5969,16 @@ var require_update2 = __commonJS({
           if (ref.__state) {
             element.state = ref.__state;
           }
-          const created = (0, import_create.default)(element, parent, element.key, import_options3.default.create);
+          (_a = element.node) == null ? void 0 : _a.remove();
+          const previousElement = element.previousElement();
+          const nextElement = element.nextElement();
+          const hasPrevious = previousElement && previousElement.node;
+          const hasNext = nextElement && nextElement.node;
+          const attachOptions = ((hasPrevious == null ? void 0 : hasPrevious.parentNode) || (hasNext == null ? void 0 : hasNext.parentNode)) && {
+            position: hasPrevious ? "after" : hasNext ? "before" : null,
+            node: hasPrevious || hasNext
+          };
+          const created = (0, import_create.default)(element, parent, element.key, import_options3.default.create, attachOptions);
           if (options.preventUpdate !== true && element.on && (0, import_utils24.isFunction)(element.on.update)) {
             (0, import_event.applyEvent)(element.on.update, created, created.state);
           }
@@ -4681,24 +5993,20 @@ var require_update2 = __commonJS({
       const { __ref: ref } = element;
       const stateKey = ref.__state;
       const { parent, state } = element;
-      if (options.preventpdateTriggerStateUpdate)
+      const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
+      if (preventUpdateTriggerStateUpdate)
         return;
       if (!stateKey && !ref.__hasRootState) {
         element.state = parent && parent.state || {};
         return;
       }
-      const { isHoisted, execStateFunction, stateFunctionOverwrite } = options;
-      const shouldForceStateUpdate = (0, import_utils24.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
-      if (shouldForceStateUpdate) {
+      const shouldForceFunctionState = (0, import_utils24.isFunction)(stateKey) && !isHoisted && execStateFunction;
+      if (shouldForceFunctionState) {
         const execState = (0, import_utils24.exec)(stateKey, element);
-        state.set(execState, {
-          ...options,
-          preventUpdate: true
-        });
+        state.set(execState, { ...options, preventUpdate: true, updatedByStateFunction: true });
         return;
       }
-      const parentState = parent && parent.state || {};
-      const keyInParentState = parentState[stateKey];
+      const keyInParentState = (0, import_state2.findInheritedState)(element, element.parent);
       if (!keyInParentState || options.preventInheritedStateUpdate)
         return;
       if (!options.preventInitStateUpdateListener) {
@@ -4726,9 +6034,9 @@ var require_update2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/methods/set.js
+// ../../../domql/packages/element/dist/cjs/methods/set.js
 var require_set2 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/methods/set.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/methods/set.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -4790,9 +6098,9 @@ var require_set2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/create.js
+// ../../../domql/packages/element/dist/cjs/create.js
 var require_create4 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/create.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -4828,7 +6136,7 @@ var require_create4 = __commonJS({
     module2.exports = __toCommonJS2(create_exports);
     var import_node = __toESM2(require_node2(), 1);
     var import_tree = require_tree();
-    var import_registry = require_cjs6();
+    var import_registry = require_cjs7();
     var import_event = require_cjs3();
     var import_render = require_cjs4();
     var import_state2 = require_cjs5();
@@ -4843,7 +6151,7 @@ var require_create4 = __commonJS({
     var import_options3 = __toESM2(require_options(), 1);
     var import_component = require_component();
     var ENV2 = "development";
-    var create2 = (element, parent, key, options = import_options3.default.create || {}) => {
+    var create2 = (element, parent, key, options = import_options3.default.create || {}, attachOptions) => {
       cacheOptions(element, options);
       if (checkIfPrimitive(element)) {
         element = applyValueAsText(element, parent, key);
@@ -4865,19 +6173,25 @@ var require_create4 = __commonJS({
       replaceOptions(element, parent, options);
       addCaching(element, parent);
       (0, import_set.addMethods)(element, parent);
+      createScope(element, parent);
       (0, import_state2.createState)(element, parent);
+      if (element.scope === "state")
+        element.scope = element.state;
+      createIfConditionFlag(element, parent);
+      (0, import_props.createProps)(element, parent);
+      if (element.scope === "props" || element.scope === true)
+        element.scope = element.props;
       createIfConditionFlag(element, parent);
       if (element.node && ref.__if) {
-        return (0, import_render.assignNode)(element, parent, key);
+        return (0, import_render.assignNode)(element, parent, key, attachOptions);
       }
-      (0, import_props.createProps)(element, parent);
       (0, import_component.applyVariant)(element, parent);
       const onInit = (0, import_event.triggerEventOn)("init", element, options);
       if (onInit === false)
         return element;
       (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
       (0, import_classList.assignKeyAsClassname)(element);
-      renderElement(element, parent, options);
+      renderElement(element, parent, options, attachOptions);
       addElementIntoParentChildren(element, parent);
       (0, import_event.triggerEventOn)("complete", element, options);
       return element;
@@ -4950,12 +6264,14 @@ var require_create4 = __commonJS({
       if (parent.__ref && parent.__ref.__children)
         parent.__ref.__children.push(element.key);
     };
-    var renderElement = (element, parent, options) => {
+    var renderElement = (element, parent, options, attachOptions) => {
       const { __ref: ref, key } = element;
       (0, import_node.default)(element, options);
-      if (!ref.__if)
+      if (!ref.__if) {
+        parent[key || element.key] = element;
         return element;
-      (0, import_render.assignNode)(element, parent, key);
+      }
+      (0, import_render.assignNode)(element, parent, key, attachOptions);
       (0, import_event.triggerEventOn)("renderRouter", element, options);
       (0, import_event.triggerEventOn)("render", element, options);
     };
@@ -4977,16 +6293,15 @@ var require_create4 = __commonJS({
       if (!element.context)
         element.context = parent.context || options.context || import_tree.ROOT.context;
     };
+    var createScope = (element, parent) => {
+      const { __ref: ref } = element;
+      if (!element.scope)
+        element.scope = parent.scope || ref.__root.scope || {};
+    };
     var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
-      if ((0, import_utils24.isFunction)(element.if)) {
-        const ifPassed = element.if(element, element.state);
-        if (!ifPassed) {
-          const ifFragment = (0, import_render.cacheNode)({ tag: "fragment" });
-          ref.__ifFragment = (0, import_render.appendNode)(ifFragment, parent.node);
-          delete ref.__if;
-        } else
-          ref.__if = true;
+      if ((0, import_utils24.isFunction)(element.if) && !element.if(element, element.state)) {
+        delete ref.__if;
       } else
         ref.__if = true;
     };
@@ -5109,9 +6424,9 @@ var require_create4 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/define.js
+// ../../../domql/packages/element/dist/cjs/define.js
 var require_define = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/define.js"(exports, module2) {
+  "../../../domql/packages/element/dist/cjs/define.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -5149,9 +6464,9 @@ var require_define = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/element/dist/cjs/index.js
-var require_cjs7 = __commonJS({
-  "../../node_modules/@domql/element/dist/cjs/index.js"(exports, module2) {
+// ../../../domql/packages/element/dist/cjs/index.js
+var require_cjs8 = __commonJS({
+  "../../../domql/packages/element/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
     var __defProp2 = Object.defineProperty;
@@ -5199,9 +6514,9 @@ var require_cjs7 = __commonJS({
   }
 });
 
-// ../../node_modules/domql/dist/cjs/index.js
-var require_cjs8 = __commonJS({
-  "../../node_modules/domql/dist/cjs/index.js"(exports, module2) {
+// ../../../domql/packages/domql/dist/cjs/index.js
+var require_cjs9 = __commonJS({
+  "../../../domql/packages/domql/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -5225,7 +6540,7 @@ var require_cjs8 = __commonJS({
       default: () => domql_default
     });
     module2.exports = __toCommonJS2(domql_exports2);
-    var import_element = require_cjs7();
+    var import_element = require_cjs8();
     var create2 = (element, parent, key, options) => {
       return (0, import_element.create)(element, parent, key, options);
     };
@@ -5237,7 +6552,7 @@ var require_cjs8 = __commonJS({
 });
 
 // ../scratch/dist/cjs/index.js
-var require_cjs9 = __commonJS({
+var require_cjs10 = __commonJS({
   "../scratch/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
@@ -5270,7 +6585,7 @@ var require_cjs9 = __commonJS({
       mod
     ));
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var require_cjs13 = __commonJS2({
+    var require_cjs15 = __commonJS2({
       "../../node_modules/@domql/globals/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
@@ -5304,8 +6619,8 @@ var require_cjs9 = __commonJS({
         var document4 = window22.document;
       }
     });
-    var require_key2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/key.js"(exports2, module22) {
+    var require_key3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/key.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5341,8 +6656,8 @@ var require_cjs9 = __commonJS({
         var createSnapshotId = generateKey;
       }
     });
-    var require_env2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/env.js"(exports2, module22) {
+    var require_env3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/env.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5377,8 +6692,8 @@ var require_cjs9 = __commonJS({
         var getNev = (key, env = NODE_ENV) => env[key];
       }
     });
-    var require_globals2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports2, module22) {
+    var require_globals3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/globals.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5411,8 +6726,8 @@ var require_cjs9 = __commonJS({
         var document4 = window22.document;
       }
     });
-    var require_node3 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/node.js"(exports2, module22) {
+    var require_node4 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/node.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5437,7 +6752,7 @@ var require_cjs9 = __commonJS({
           isNode: () => isNode
         });
         module22.exports = __toCommonJS22(node_exports);
-        var import_globals3 = require_globals2();
+        var import_globals3 = require_globals3();
         var isNode = (obj) => {
           return (typeof Node === "object" ? obj instanceof import_globals3.window.Node : obj && typeof obj === "object" && typeof obj.nodeType === "number" && typeof obj.nodeName === "string") || false;
         };
@@ -5446,8 +6761,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_types2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/types.js"(exports2, module22) {
+    var require_types3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/types.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5470,8 +6785,9 @@ var require_cjs9 = __commonJS({
         __export22(types_exports, {
           TYPES: () => TYPES,
           is: () => is,
-          isArray: () => isArray7,
+          isArray: () => isArray8,
           isBoolean: () => isBoolean,
+          isDate: () => isDate,
           isDefined: () => isDefined2,
           isFunction: () => isFunction22,
           isNot: () => isNot2,
@@ -5483,7 +6799,7 @@ var require_cjs9 = __commonJS({
           isUndefined: () => isUndefined4
         });
         module22.exports = __toCommonJS22(types_exports);
-        var import_node = require_node3();
+        var import_node = require_node4();
         var isObject82 = (arg) => {
           if (arg === null)
             return false;
@@ -5494,23 +6810,25 @@ var require_cjs9 = __commonJS({
         var isFunction22 = (arg) => typeof arg === "function";
         var isBoolean = (arg) => arg === true || arg === false;
         var isNull = (arg) => arg === null;
-        var isArray7 = (arg) => Array.isArray(arg);
+        var isArray8 = (arg) => Array.isArray(arg);
+        var isDate = (d) => d instanceof Date;
         var isObjectLike3 = (arg) => {
           if (arg === null)
             return false;
           return typeof arg === "object";
         };
         var isDefined2 = (arg) => {
-          return isObject82(arg) || isObjectLike3(arg) || isString10(arg) || isNumber2(arg) || isFunction22(arg) || isArray7(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+          return isObject82(arg) || isObjectLike3(arg) || isString10(arg) || isNumber2(arg) || isFunction22(arg) || isArray8(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
         };
         var isUndefined4 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
           boolean: isBoolean,
-          array: isArray7,
+          array: isArray8,
           object: isObject82,
           string: isString10,
+          date: isDate,
           number: isNumber2,
           null: isNull,
           function: isFunction22,
@@ -5531,8 +6849,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_array2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
+    var require_array3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/array.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5561,11 +6879,13 @@ var require_cjs9 = __commonJS({
           mergeAndCloneIfArray: () => mergeAndCloneIfArray,
           mergeArray: () => mergeArray,
           removeFromArray: () => removeFromArray,
+          removeValueFromArray: () => removeValueFromArray,
+          removeValueFromArrayAll: () => removeValueFromArrayAll,
           swapItemsInArray: () => swapItemsInArray
         });
         module22.exports = __toCommonJS22(array_exports);
-        var import_object = require_object3();
-        var import_types = require_types2();
+        var import_object = require_object4();
+        var import_types = require_types3();
         var arrayContainsOtherArray = (arr1, arr2) => {
           return arr2.every((val) => arr1.includes(val));
         };
@@ -5626,10 +6946,22 @@ var require_cjs9 = __commonJS({
           }, nestedObject);
           return nestedObject;
         };
+        var removeValueFromArray = (arr, value2) => {
+          const index = arr.indexOf(value2);
+          if (index > -1) {
+            const newArray = [...arr];
+            newArray.splice(index, 1);
+            return newArray;
+          }
+          return arr.slice();
+        };
+        var removeValueFromArrayAll = (arr, value2) => {
+          return arr.filter((item) => item !== value2);
+        };
       }
     });
-    var require_string2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/string.js"(exports2, module22) {
+    var require_string3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/string.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5686,8 +7018,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_object3 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/object.js"(exports2, module22) {
+    var require_object4 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/object.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -5713,6 +7045,7 @@ var require_cjs9 = __commonJS({
           deepCloneExclude: () => deepCloneExclude,
           deepContains: () => deepContains,
           deepDestringify: () => deepDestringify,
+          deepDiff: () => deepDiff2,
           deepMerge: () => deepMerge32,
           deepStringify: () => deepStringify,
           detachFunctionsFromObject: () => detachFunctionsFromObject,
@@ -5721,7 +7054,11 @@ var require_cjs9 = __commonJS({
           diffObjects: () => diffObjects,
           exec: () => exec4,
           flattenRecursive: () => flattenRecursive,
+          hasOwnProperty: () => hasOwnProperty,
+          isEmpty: () => isEmpty,
+          isEmptyObject: () => isEmptyObject,
           isEqualDeep: () => isEqualDeep2,
+          makeObjectWithoutPrototype: () => makeObjectWithoutPrototype,
           map: () => map2,
           merge: () => merge5,
           mergeArrayExclude: () => mergeArrayExclude,
@@ -5734,10 +7071,10 @@ var require_cjs9 = __commonJS({
           stringToObject: () => stringToObject
         });
         module22.exports = __toCommonJS22(object_exports);
-        var import_globals3 = require_globals2();
-        var import_types = require_types2();
-        var import_array = require_array2();
-        var import_string = require_string2();
+        var import_globals3 = require_globals3();
+        var import_types = require_types3();
+        var import_array = require_array3();
+        var import_string = require_string3();
         var exec4 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
@@ -5755,8 +7092,8 @@ var require_cjs9 = __commonJS({
         };
         var merge5 = (element, obj, excludeFrom = []) => {
           for (const e in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, e);
-            if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
+            if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const objProp = obj[e];
@@ -5768,8 +7105,8 @@ var require_cjs9 = __commonJS({
         };
         var deepMerge32 = (element, extend, excludeFrom = []) => {
           for (const e in extend) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(extend, e);
-            if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
+            if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const extendProp = extend[e];
@@ -5784,8 +7121,8 @@ var require_cjs9 = __commonJS({
         var clone = (obj, excludeFrom = []) => {
           const o = {};
           for (const prop in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-            if (!hasOwnProperty || excludeFrom.includes(prop) || prop.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+            if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             o[prop] = obj[prop];
           }
@@ -5797,8 +7134,8 @@ var require_cjs9 = __commonJS({
           }
           const o = {};
           for (const k in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, k);
-            if (!hasOwnProperty || excludeFrom.includes(k) || k.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, k);
+            if (!hasOwnProperty2 || excludeFrom.includes(k) || k.startsWith("__"))
               continue;
             let v = obj[k];
             if (k === "extend" && (0, import_types.isArray)(v)) {
@@ -5816,7 +7153,7 @@ var require_cjs9 = __commonJS({
         var mergeArrayExclude = (arr, excl = []) => {
           return arr.reduce((acc, curr) => deepMerge32(acc, deepCloneExclude(curr, excl)), {});
         };
-        var deepClone22 = (obj, excludeFrom = []) => {
+        var deepClone22 = (obj, excludeFrom = [], cleanUndefined = false) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
             if (prop === "__proto__")
@@ -5824,11 +7161,13 @@ var require_cjs9 = __commonJS({
             if (excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             let objProp = obj[prop];
+            if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+              continue;
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
               objProp = (0, import_array.mergeArray)(objProp);
             }
             if ((0, import_types.isObjectLike)(objProp)) {
-              o[prop] = deepClone22(objProp, excludeFrom);
+              o[prop] = deepClone22(objProp, excludeFrom, cleanUndefined);
             } else
               o[prop] = objProp;
           }
@@ -5882,7 +7221,7 @@ var require_cjs9 = __commonJS({
                 }
               }
               str += `${spaces}  ]`;
-            } else if ((0, import_types.isObject)(value2)) {
+            } else if ((0, import_types.isObjectLike)(value2)) {
               str += objectToString(value2, indent + 1);
             } else if ((0, import_types.isString)(value2)) {
               str += (0, import_string.stringIncludesAny)(value2, ["\n", "'"]) ? `\`${value2}\`` : `'${value2}'`;
@@ -5922,8 +7261,8 @@ var require_cjs9 = __commonJS({
         };
         var deepDestringify = (obj, destringified = {}) => {
           for (const prop in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-            if (!hasOwnProperty)
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+            if (!hasOwnProperty2)
               continue;
             const objProp = obj[prop];
             if ((0, import_types.isString)(objProp)) {
@@ -6016,6 +7355,39 @@ var require_cjs9 = __commonJS({
           }
           return cache2;
         };
+        var hasOwnProperty = (o, ...args) => Object.prototype.hasOwnProperty.call(o, ...args);
+        var isEmpty = (o) => Object.keys(o).length === 0;
+        var isEmptyObject = (o) => (0, import_types.isObject)(o) && isEmpty(o);
+        var makeObjectWithoutPrototype = () => /* @__PURE__ */ Object.create(null);
+        var deepDiff2 = (lhs, rhs) => {
+          if (lhs === rhs)
+            return {};
+          if (!(0, import_types.isObjectLike)(lhs) || !(0, import_types.isObjectLike)(rhs))
+            return rhs;
+          const deletedValues = Object.keys(lhs).reduce((acc, key) => {
+            if (!hasOwnProperty(rhs, key)) {
+              acc[key] = void 0;
+            }
+            return acc;
+          }, makeObjectWithoutPrototype());
+          if ((0, import_types.isDate)(lhs) || (0, import_types.isDate)(rhs)) {
+            if (lhs.valueOf() === rhs.valueOf())
+              return {};
+            return rhs;
+          }
+          return Object.keys(rhs).reduce((acc, key) => {
+            if (!hasOwnProperty(lhs, key)) {
+              acc[key] = rhs[key];
+              return acc;
+            }
+            const difference = diff(lhs[key], rhs[key]);
+            if (isEmptyObject(difference) && !(0, import_types.isDate)(difference) && (isEmptyObject(lhs[key]) || !isEmptyObject(rhs[key]))) {
+              return acc;
+            }
+            acc[key] = difference;
+            return acc;
+          }, deletedValues);
+        };
         var overwrite = (element, params, excludeFrom = []) => {
           const { ref } = element;
           const changes = {};
@@ -6111,8 +7483,8 @@ var require_cjs9 = __commonJS({
               }
             } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
               for (const key in obj1) {
-                const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
-                if (!hasOwnProperty || !deepContains(obj1[key], obj2[key])) {
+                const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj2, key);
+                if (!hasOwnProperty2 || !deepContains(obj1[key], obj2[key])) {
                   return false;
                 }
               }
@@ -6136,8 +7508,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_function2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/function.js"(exports2, module22) {
+    var require_function3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/function.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -6209,8 +7581,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_log2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/log.js"(exports2, module22) {
+    var require_log3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/log.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -6248,8 +7620,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_cookie2 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports2, module22) {
+    var require_cookie3 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/cookie.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -6275,7 +7647,7 @@ var require_cjs9 = __commonJS({
           setCookie: () => setCookie
         });
         module22.exports = __toCommonJS22(cookie_exports);
-        var import_types = require_types2();
+        var import_types = require_types3();
         var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
         var setCookie = (cname, cvalue, exdays = 365) => {
           if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
@@ -6302,8 +7674,8 @@ var require_cjs9 = __commonJS({
         };
       }
     });
-    var require_tags3 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports2, module22) {
+    var require_tags4 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/tags.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -6466,7 +7838,7 @@ var require_cjs9 = __commonJS({
       }
     });
     var require_cjs22 = __commonJS2({
-      "../../node_modules/@domql/utils/dist/cjs/index.js"(exports2, module22) {
+      "../../../domql/packages/utils/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -6484,26 +7856,26 @@ var require_cjs9 = __commonJS({
         var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
         var utils_exports2 = {};
         module22.exports = __toCommonJS22(utils_exports2);
-        __reExport2(utils_exports2, require_key2(), module22.exports);
-        __reExport2(utils_exports2, require_env2(), module22.exports);
-        __reExport2(utils_exports2, require_types2(), module22.exports);
-        __reExport2(utils_exports2, require_object3(), module22.exports);
-        __reExport2(utils_exports2, require_function2(), module22.exports);
-        __reExport2(utils_exports2, require_array2(), module22.exports);
-        __reExport2(utils_exports2, require_node3(), module22.exports);
-        __reExport2(utils_exports2, require_log2(), module22.exports);
-        __reExport2(utils_exports2, require_string2(), module22.exports);
-        __reExport2(utils_exports2, require_globals2(), module22.exports);
-        __reExport2(utils_exports2, require_cookie2(), module22.exports);
-        __reExport2(utils_exports2, require_tags3(), module22.exports);
+        __reExport2(utils_exports2, require_key3(), module22.exports);
+        __reExport2(utils_exports2, require_env3(), module22.exports);
+        __reExport2(utils_exports2, require_types3(), module22.exports);
+        __reExport2(utils_exports2, require_object4(), module22.exports);
+        __reExport2(utils_exports2, require_function3(), module22.exports);
+        __reExport2(utils_exports2, require_array3(), module22.exports);
+        __reExport2(utils_exports2, require_node4(), module22.exports);
+        __reExport2(utils_exports2, require_log3(), module22.exports);
+        __reExport2(utils_exports2, require_string3(), module22.exports);
+        __reExport2(utils_exports2, require_globals3(), module22.exports);
+        __reExport2(utils_exports2, require_cookie3(), module22.exports);
+        __reExport2(utils_exports2, require_tags4(), module22.exports);
       }
     });
     var src_exports2 = {};
     __export2(src_exports2, {
-      ANIMATION: () => ANIMATION2,
+      ANIMATION: () => ANIMATION,
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
-      COLOR: () => COLOR3,
+      COLOR: () => COLOR2,
       CONFIG: () => CONFIG3,
       CSS_VARS: () => CSS_VARS,
       DEVICES: () => DEVICES,
@@ -6532,7 +7904,9 @@ var require_cjs9 = __commonJS({
       appendIconsSprite: () => appendIconsSprite2,
       appendSVGSprite: () => appendSVGSprite2,
       applyDocument: () => applyDocument,
+      applyGlobalVars: () => applyGlobalVars,
       applyHeadings: () => applyHeadings,
+      applyMediaSequenceVars: () => applyMediaSequenceVars,
       applyReset: () => applyReset,
       applySequenceVars: () => applySequenceVars,
       applySpacingSequence: () => applySpacingSequence,
@@ -6565,6 +7939,8 @@ var require_cjs9 = __commonJS({
       getShadow: () => getShadow,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
       getSpacingByKey: () => getSpacingByKey3,
+      getSubratio: () => getSubratio,
+      getSubratioDifference: () => getSubratioDifference,
       getTheme: () => getTheme,
       getTimingByKey: () => getTimingByKey2,
       getTimingFunction: () => getTimingFunction3,
@@ -6572,6 +7948,7 @@ var require_cjs9 = __commonJS({
       hexToRgbArray: () => hexToRgbArray,
       hexToRgba: () => hexToRgba,
       hslToRgb: () => hslToRgb,
+      isScalingUnit: () => isScalingUnit,
       mixTwoColors: () => mixTwoColors,
       mixTwoRgb: () => mixTwoRgb,
       mixTwoRgba: () => mixTwoRgba,
@@ -6597,7 +7974,9 @@ var require_cjs9 = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setMediaTheme: () => setMediaTheme,
       setSVG: () => setSVG,
+      setScalingVar: () => setScalingVar,
       setShadow: () => setShadow,
+      setSubScalingVar: () => setSubScalingVar,
       setTheme: () => setTheme,
       setValue: () => setValue,
       setVariables: () => setVariables,
@@ -6614,6 +7993,8 @@ var require_cjs9 = __commonJS({
     module2.exports = __toCommonJS2(src_exports2);
     var utils_exports = {};
     __export2(utils_exports, {
+      applyGlobalVars: () => applyGlobalVars,
+      applyMediaSequenceVars: () => applyMediaSequenceVars,
       applySequenceVars: () => applySequenceVars,
       changeLightness: () => changeLightness,
       colorStringToRgbaArray: () => colorStringToRgbaArray,
@@ -6633,10 +8014,13 @@ var require_cjs9 = __commonJS({
       getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+      getSubratio: () => getSubratio,
+      getSubratioDifference: () => getSubratioDifference,
       hexToRgb: () => hexToRgb,
       hexToRgbArray: () => hexToRgbArray,
       hexToRgba: () => hexToRgba,
       hslToRgb: () => hslToRgb,
+      isScalingUnit: () => isScalingUnit,
       mixTwoColors: () => mixTwoColors,
       mixTwoRgb: () => mixTwoRgb,
       mixTwoRgba: () => mixTwoRgba,
@@ -6649,9 +8033,14 @@ var require_cjs9 = __commonJS({
       setCustomFont: () => setCustomFont,
       setCustomFontMedia: () => setCustomFontMedia,
       setInCustomFontMedia: () => setInCustomFontMedia,
+      setScalingVar: () => setScalingVar,
+      setSubScalingVar: () => setSubScalingVar,
       setVariables: () => setVariables
     });
-    var import_globals2 = __toESM2(require_cjs13(), 1);
+    var isScalingUnit = (unit) => {
+      return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
+    };
+    var import_globals2 = __toESM2(require_cjs15(), 1);
     var import_utils24 = __toESM2(require_cjs22(), 1);
     var ENV2 = "development";
     var colorStringToRgbaArray = (color) => {
@@ -6773,15 +8162,17 @@ var require_cjs9 = __commonJS({
       const arr = colorStringToRgbaArray(color);
       if (!arr) {
         if (ENV2 === "test" || ENV2 === "development")
-          console.warn(color + "color is not rgba");
+          console.warn(color + " color is not rgba");
         return;
       }
       arr[3] = opacity;
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
+      if ((0, import_utils24.isString)(rgb) && rgb.includes("rgb"))
+        rgb = colorStringToRgbaArray(rgb).join(", ");
       if ((0, import_utils24.isString)(rgb))
-        rgb = rgb.split(", ").map((v) => parseFloat(v));
+        rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
       if ((0, import_utils24.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
@@ -6865,10 +8256,10 @@ var require_cjs9 = __commonJS({
     var import_utils42 = __toESM2(require_cjs22(), 1);
     var defaultConfig_exports = {};
     __export2(defaultConfig_exports, {
-      ANIMATION: () => ANIMATION2,
+      ANIMATION: () => ANIMATION,
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
-      COLOR: () => COLOR3,
+      COLOR: () => COLOR2,
       DEVICES: () => DEVICES,
       DOCUMENT: () => DOCUMENT,
       FONT: () => FONT2,
@@ -6928,6 +8319,7 @@ var require_cjs9 = __commonJS({
       h1Matches: 6,
       lineHeight: 1.5,
       subSequence: true,
+      mediaRegenerate: false,
       unit: "em",
       templates: {},
       sequence: {},
@@ -6975,13 +8367,14 @@ var require_cjs9 = __commonJS({
       ratio: SEQUENCE.phi,
       range: [-5, 15],
       subSequence: true,
+      mediaRegenerate: false,
       unit: "em",
       sequence: {},
       scales: {},
       vars: {}
     };
     var SPACING2 = defaultProps2;
-    var COLOR3 = {};
+    var COLOR2 = {};
     var GRADIENT2 = {};
     var THEME2 = {};
     var SHADOW = {};
@@ -6992,6 +8385,7 @@ var require_cjs9 = __commonJS({
       type: "timing",
       ratio: SEQUENCE["perfect-fourth"],
       range: [-3, 12],
+      mediaRegenerate: false,
       unit: "ms",
       sequence: {},
       scales: {},
@@ -7024,7 +8418,7 @@ var require_cjs9 = __commonJS({
       mobileXS: [375, 768]
     };
     var CASES = {};
-    var ANIMATION2 = {};
+    var ANIMATION = {};
     var SVG = {};
     var SVG_DATA = {};
     var TEMPLATES = {};
@@ -7087,45 +8481,78 @@ var require_cjs9 = __commonJS({
       19: "T"
     };
     var setSequenceValue = (props4, sequenceProps) => {
-      const { key, variable, value: value2, scaling, index } = props4;
+      const { key, variable, value: value2, scaling, index, scalingVariable } = props4;
       sequenceProps.sequence[key] = {
         key,
         decimal: ~~(value2 * 100) / 100,
         val: ~~value2,
         scaling,
         index,
+        scalingVariable,
         variable
       };
       sequenceProps.scales[key] = scaling;
       sequenceProps.vars[variable] = scaling + sequenceProps.unit;
     };
+    var setScalingVar = (key, sequenceProps) => {
+      const { base, type, unit } = sequenceProps;
+      const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
+      if (key === 0)
+        return defaultVal;
+      const prefix2 = "--" + (type && type.replace(".", "-"));
+      const ratioVar = `${prefix2}-ratio`;
+      if (key > 0) {
+        const prevLetterKey = numToLetterMap[key - 1];
+        return `calc(var(${prefix2}-${prevLetterKey}) * var(${ratioVar}))`;
+      }
+      if (key < 0) {
+        const nextLetterKey = numToLetterMap[key + 1];
+        return `calc(var(${prefix2}-${nextLetterKey}) / var(${ratioVar}))`;
+      }
+    };
+    var setSubScalingVar = (index, arr, variable, sequenceProps) => {
+      const { type } = sequenceProps;
+      const skipMiddle = index === 2 && arr.length === 2;
+      const indexMapWithLength = skipMiddle ? index + 1 : index;
+      const prefix2 = "--" + (type && type.replace(".", "-"));
+      const subRatioVarPrefix = `${prefix2}-sub-ratio-`;
+      return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
+    };
+    var getSubratioDifference = (base, ratio) => {
+      const diff = base * ratio - base;
+      const subRatio = diff / 1.618;
+      const first = base * ratio - subRatio;
+      const second = base + subRatio;
+      const middle = (first + second) / 2;
+      return [first, middle, second];
+    };
+    var getSubratio = (base, ratio) => {
+      return getSubratioDifference(base, ratio).map((v) => v / base);
+    };
     var generateSubSequence = (props4, sequenceProps) => {
       const { key, base, value: value2, ratio, variable, index } = props4;
       const next2 = value2 * ratio;
-      const diff = next2 - value2;
-      const smallscale = diff / 1.618;
-      const valueRounded = ~~value2;
-      const nextRounded = ~~next2;
-      const diffRounded = nextRounded - valueRounded;
-      let arr = [];
-      const first = next2 - smallscale;
-      const second = value2 + smallscale;
-      const middle = (first + second) / 2;
+      const diffRounded = ~~next2 - ~~value2;
+      let arr;
+      const [first, middle, second] = getSubratioDifference(value2, ratio);
       if (diffRounded > 16)
         arr = [first, middle, second];
       else
         arr = [first, second];
-      arr.map((v, k) => {
+      arr.forEach((v, k) => {
         const scaling = ~~(v / base * 1e3) / 1e3;
         const newVar = variable + (k + 1);
+        const newIndex = index + (k + 1) / 10;
+        const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps);
         const props22 = {
           key: key + (k + 1),
           variable: newVar,
           value: v,
           scaling,
-          index: index + (k + 1) / 10
+          scalingVariable,
+          index: newIndex
         };
-        return setSequenceValue(props22, sequenceProps);
+        setSequenceValue(props22, sequenceProps);
       });
     };
     var switchSequenceOnNegative = (key, base, ratio) => {
@@ -7141,12 +8568,14 @@ var require_cjs9 = __commonJS({
         const value2 = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value2 / base * 100) / 100;
         const variable = prefix2 + letterKey;
+        const scalingVariable = setScalingVar(key, sequenceProps);
         const props4 = {
           key: letterKey,
           variable,
           value: value2,
           base,
           scaling,
+          scalingVariable,
           ratio,
           index: key
         };
@@ -7236,35 +8665,74 @@ var require_cjs9 = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applyGlobalVars = (vars, obj, options) => {
+      const CONFIG22 = getActiveConfig3();
+      const { UNIT: UNIT2 } = CONFIG22;
+      const unit = obj.unit || UNIT2.default;
+      const { base, ratio, type } = obj;
+      const prefix2 = "--" + (type && type.replace(".", "-"));
+      vars[`${prefix2}-base`] = base;
+      vars[`${prefix2}-unit`] = unit;
+      const ratioVar = `${prefix2}-ratio`;
+      vars[ratioVar] = ratio;
+      const [first, middle, second] = getSubratio(base, ratio);
+      vars[`${prefix2}-sub-ratio-1`] = first;
+      vars[`${prefix2}-sub-ratio-2`] = middle;
+      vars[`${prefix2}-sub-ratio-3`] = second;
+    };
+    var applySequenceVars = (FACTORY2, options = {}) => {
       const CONFIG22 = getActiveConfig3();
-      const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props4.unit || UNIT2.default;
-      const { sequence, scales } = props4;
+      const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
+      const unit = FACTORY2.unit || UNIT2.default;
+      const { mediaRegenerate, sequence, scales } = FACTORY2;
+      if (!mediaRegenerate) {
+        applyGlobalVars(CSS_VARS2, FACTORY2, options);
+      }
       for (const key in sequence) {
         const item = sequence[key];
-        const value2 = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
-        if (mediaName) {
-          const query = MEDIA2[mediaName];
-          if (!query) {
-            if (CONFIG22.verbose)
-              console.warn("Can't find query ", query);
-          }
-          let underMediaQuery = CSS_VARS2[`@media ${query}`];
-          if (!underMediaQuery)
-            underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-          underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
-          CSS_VARS2[item.variable + "_" + mediaName] = value2;
+        const value2 = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+        if (!mediaRegenerate) {
+          CSS_VARS2[item.variable + "_default"] = value2;
+          CSS_VARS2[item.variable] = item.scalingVariable;
+          continue;
+        }
+        if (options.useDefault === false) {
+          CSS_VARS2[item.variable] = value2;
         } else {
-          if (options.useDefault === false) {
-            CSS_VARS2[item.variable] = value2;
-          } else {
-            CSS_VARS2[item.variable + "_default"] = value2;
-            CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
-          }
+          CSS_VARS2[item.variable + "_default"] = value2;
+          CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
         }
       }
     };
+    var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
+      const CONFIG22 = getActiveConfig3();
+      const { UNIT: UNIT2, MEDIA: MEDIA2, CSS_VARS: CSS_VARS2 } = CONFIG22;
+      const mediaName = media.slice(1);
+      const unit = FACTORY2.unit || UNIT2.default;
+      const { mediaRegenerate } = FACTORY2;
+      const { sequence, scales } = FACTORY2[media];
+      const query = MEDIA2[mediaName];
+      if (!query && CONFIG22.verbose)
+        console.warn("Can't find media query ", query);
+      if (!mediaRegenerate) {
+        let underMediaQuery = CSS_VARS2[`@media ${query}`];
+        if (!underMediaQuery)
+          underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+        applyGlobalVars(underMediaQuery, FACTORY2[media], options);
+        return;
+      }
+      for (const key in sequence) {
+        const item = sequence[key];
+        const value2 = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
+        if (!query && CONFIG22.verbose)
+          console.warn("Can't find query ", query);
+        let underMediaQuery = CSS_VARS2[`@media ${query}`];
+        if (!underMediaQuery)
+          underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+        underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+        CSS_VARS2[item.variable + "_" + mediaName] = value2;
+      }
+    };
     var import_utils82 = __toESM2(require_cjs22(), 1);
     var generateSprite = (icons) => {
       const CONFIG22 = getActiveConfig3();
@@ -7707,6 +9175,8 @@ var require_cjs9 = __commonJS({
     var import_utils122 = __toESM2(require_cjs22(), 1);
     var setFont = (val, key) => {
       const CSSvar = `--font-${key}`;
+      if (!val || (0, import_utils122.isArray)(val) && !val[0])
+        return;
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
       return { var: CSSvar, value: val, fontFace };
     };
@@ -7728,34 +9198,50 @@ var require_cjs9 = __commonJS({
       return { var: CSSvar, value: str, arr: value2, type };
     };
     var import_utils152 = __toESM2(require_cjs22(), 1);
-    var runThroughMedia = (props4) => {
+    var runThroughMedia = (FACTORY2) => {
       const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY22, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
-        if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
-          (0, import_utils152.merge)(mediaProps, {
-            type,
-            base,
-            ratio,
-            range,
-            subSequence,
-            h1Matches,
-            unit,
-            sequence: {},
-            scales: {},
-            templates: {},
-            vars: {}
-          });
-          generateSequence(mediaProps);
-          const mediaName = prop.slice(1);
-          applySequenceVars(mediaProps, mediaName);
-          const query = MEDIA2[mediaName];
-          TYPOGRAPHY22.templates[`@media screen and ${query}`] = {
-            fontSize: mediaProps.base / TYPOGRAPHY22.browserDefault + unit
-          };
+      for (const prop in FACTORY2) {
+        const isPropMedia = prop.slice(0, 1) === "@";
+        const mediaValue = FACTORY2[prop];
+        if (!isPropMedia)
+          continue;
+        const { mediaRegenerate } = FACTORY2;
+        const mediaName = prop.slice(1);
+        const {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit
+        } = FACTORY2;
+        (0, import_utils152.merge)(mediaValue, {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit
+        });
+        const query = MEDIA2[mediaName];
+        TYPOGRAPHY22.templates[`@media screen and ${query}`] = {
+          fontSize: mediaValue.base / TYPOGRAPHY22.browserDefault + unit
+        };
+        if (!mediaRegenerate) {
+          applyMediaSequenceVars(FACTORY2, prop);
+          continue;
         }
+        (0, import_utils152.merge)(mediaValue, {
+          sequence: {},
+          scales: {},
+          templates: {},
+          vars: {}
+        });
+        generateSequence(mediaValue);
+        applyMediaSequenceVars(FACTORY2, prop);
       }
     };
     var applyHeadings = (props4) => {
@@ -7795,28 +9281,36 @@ var require_cjs9 = __commonJS({
       );
     };
     var import_utils182 = __toESM2(require_cjs22(), 1);
-    var runThroughMedia2 = (sequenceProps) => {
-      for (const prop in sequenceProps) {
-        const mediaProps = sequenceProps[prop];
-        if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps;
-          (0, import_utils182.merge)(mediaProps, {
-            type,
-            base,
-            ratio,
-            range,
-            subSequence,
-            h1Matches,
-            unit,
-            sequence: {},
-            scales: {},
-            templates: {},
-            vars: {}
-          });
-          generateSequence(mediaProps);
-          const mediaName = prop.slice(1);
-          applySequenceVars(mediaProps, mediaName);
-        }
+    var runThroughMedia2 = (FACTORY2) => {
+      for (const prop in FACTORY2) {
+        const mediaProps = FACTORY2[prop];
+        const isMediaName = prop.slice(0, 1) === "@";
+        if (!isMediaName)
+          continue;
+        const {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit
+        } = FACTORY2;
+        (0, import_utils182.merge)(mediaProps, {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit,
+          sequence: {},
+          scales: {},
+          templates: {},
+          vars: {}
+        });
+        generateSequence(mediaProps);
+        applyMediaSequenceVars(FACTORY2, prop);
       }
     };
     var applySpacingSequence = () => {
@@ -7891,7 +9385,7 @@ var require_cjs9 = __commonJS({
             unit: SPACING22.unit
           });
         }
-        applySequenceVars(sequenceProps, null, { useDefault: false });
+        applySequenceVars(sequenceProps, { useDefault: false });
         return getSpacingByKey3(value2, propertyName, sequenceProps);
       }
       return getSpacingByKey3(value2, propertyName);
@@ -8012,7 +9506,7 @@ var require_cjs9 = __commonJS({
         lineHeight: TYPOGRAPHY22.lineHeight
       });
     };
-    var import_globals22 = __toESM2(require_cjs13(), 1);
+    var import_globals22 = __toESM2(require_cjs15(), 1);
     var DEF_OPTIONS = {
       document: import_globals22.document
     };
@@ -8185,10 +9679,22 @@ var require_cjs9 = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformShadow2 = (sh, globalTheme) => {
-      return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
-    };
-    var transformBoxShadow2 = (sh, globalTheme) => getShadow(sh, globalTheme);
+    var transformShadow2 = (sh, globalTheme) => getShadow(sh, globalTheme);
+    var transformBoxShadow2 = (shadows) => shadows.split("|").map((shadow) => {
+      return shadow.split(", ").map((v) => {
+        v = v.trim();
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        if (getColor2(v).length > 2)
+          return getColor2(v);
+        if (v.includes("px") || v.slice(-2) === "em")
+          return v;
+        const arr = v.split(" ");
+        if (!arr.length)
+          return v;
+        return arr.map((v2) => getSpacingByKey3(v2, "shadow").shadow).join(" ");
+      }).join(" ");
+    }).join(",");
     var transformBackgroundImage2 = (backgroundImage, globalTheme) => {
       const CONFIG22 = getActiveConfig3();
       return backgroundImage.split(", ").map((v) => {
@@ -8328,8 +9834,105 @@ var require_cjs9 = __commonJS({
   }
 });
 
+// ../../node_modules/@domql/report/dist/cjs/index.js
+var require_cjs11 = __commonJS({
+  "../../node_modules/@domql/report/dist/cjs/index.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var report_exports = {};
+    __export2(report_exports, {
+      ERRORS_REGISTRY: () => ERRORS_REGISTRY,
+      report: () => report
+    });
+    module2.exports = __toCommonJS2(report_exports);
+    var ERRORS_REGISTRY = {
+      en: {
+        DocumentNotDefined: {
+          title: "Document is undefined",
+          description: "To tweak with DOM, you should use browser."
+        },
+        OverwriteToBuiltin: {
+          title: "Overwriting to builtin method",
+          description: "Overwriting a builtin method in the window define is not possible, please choose different name"
+        },
+        BrowserNotDefined: {
+          title: "Can't recognize environment",
+          description: "Environment should be browser application, that can run Javascript"
+        },
+        SetQuickPreferancesIsNotObject: {
+          title: "Quick preferances object is required",
+          description: 'Please pass a plain object with "lang", "culture" and "area" properties'
+        },
+        InvalidParams: {
+          title: "Params are invalid",
+          description: 'Please pass a plain object with "lang", "culture" and "area" properties'
+        },
+        CantCreateWithoutNode: {
+          title: "You must provide node",
+          description: "Can't create DOM element without setting node or text"
+        },
+        HTMLInvalidTag: {
+          title: "Element tag name (or DOM nodeName) is invalid",
+          description: "To create element, you must provide valid DOM node. See full list of them at here: http://www.w3schools.com/tags/"
+        },
+        HTMLInvalidAttr: {
+          title: "Attibutes object is invalid",
+          description: "Please pass a valid plain object to apply as an attributes for a DOM node"
+        },
+        HTMLInvalidData: {
+          title: "Data object is invalid",
+          description: "Please pass a valid plain object to apply as an dataset for a DOM node"
+        },
+        HTMLInvalidStyles: {
+          title: "Styles object is invalid",
+          description: "Please pass a valid plain object to apply as an style for a DOM node"
+        },
+        HTMLInvalidText: {
+          title: "Text string is invalid",
+          description: "Please pass a valid string to apply text to DOM node"
+        },
+        ElementOnStateIsNotDefined: {
+          title: "Element on state is not defined",
+          description: "Please check the element object"
+        }
+      }
+    };
+    var report = (err, arg, element) => {
+      const currentLang = "en";
+      let errObj;
+      if (err && typeof err === "string")
+        errObj = ERRORS_REGISTRY[currentLang][err];
+      return new Error(
+        `"${err}", "${arg}"
+
+`,
+        `${errObj.description}`,
+        element ? `
+
+${element}` : ""
+      );
+    };
+  }
+});
+
 // ../../node_modules/@domql/router/dist/cjs/index.js
-var require_cjs10 = __commonJS({
+var require_cjs12 = __commonJS({
   "../../node_modules/@domql/router/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
@@ -8436,7 +10039,7 @@ var require_cjs10 = __commonJS({
 });
 
 // ../../node_modules/@domql/globals/dist/cjs/index.js
-var require_cjs11 = __commonJS({
+var require_cjs13 = __commonJS({
   "../../node_modules/@domql/globals/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
@@ -8472,7 +10075,7 @@ var require_cjs11 = __commonJS({
 });
 
 // ../fetch/dist/cjs/index.js
-var require_cjs12 = __commonJS({
+var require_cjs14 = __commonJS({
   "../fetch/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
@@ -8511,7 +10114,7 @@ var require_cjs12 = __commonJS({
     });
     module2.exports = __toCommonJS2(fetch_exports);
     var utils2 = __toESM2(require_cjs(), 1);
-    var globals2 = __toESM2(require_cjs11(), 1);
+    var globals2 = __toESM2(require_cjs13(), 1);
     var { overwriteDeep, deepDestringify } = utils2;
     var { window: window5 } = globals2;
     var IS_DEVELOPMENT = window5 && window5.location ? window5.location.host.includes("dev.") || window5.location.host.includes("symbo.ls") : true;
@@ -8814,7 +10417,7 @@ __export(src_exports, {
   default: () => src_default2
 });
 module.exports = __toCommonJS(src_exports);
-var import_domql = __toESM(require_cjs8(), 1);
+var import_domql = __toESM(require_cjs9(), 1);
 var import_utils23 = __toESM(require_cjs(), 1);
 
 // src/utilImports.js
@@ -8835,7 +10438,7 @@ __export(utilImports_exports, {
   toTitleCase: () => toTitleCase,
   updateReset: () => updateReset
 });
-var import_scratch2 = __toESM(require_cjs9(), 1);
+var import_scratch2 = __toESM(require_cjs10(), 1);
 __reExport(utilImports_exports, __toESM(require_cjs(), 1));
 
 // ../utils/src/index.js
@@ -8903,7 +10506,7 @@ var arrayzeValue = (val) => {
 };
 
 // ../init/index.js
-var import_scratch = __toESM(require_cjs9());
+var import_scratch = __toESM(require_cjs10());
 var import_utils4 = __toESM(require_cjs());
 
 // ../../node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
@@ -10323,8 +11926,8 @@ var updateReset = (config, RC_FILE, options = UPDATE_OPTIONS) => {
 };
 
 // src/utilImports.js
-__reExport(utilImports_exports, __toESM(require_cjs2(), 1));
-__reExport(utilImports_exports, __toESM(require_cjs10(), 1));
+__reExport(utilImports_exports, __toESM(require_cjs11(), 1));
+__reExport(utilImports_exports, __toESM(require_cjs12(), 1));
 
 // ../../uikit/domql/index.js
 var domql_exports = {};
@@ -10522,7 +12125,7 @@ __export(domql_exports, {
 });
 
 // ../../uikit/domql/Atoms/Block.js
-var import_scratch3 = __toESM(require_cjs9());
+var import_scratch3 = __toESM(require_cjs10());
 var Block = {
   deps: { getSpacingBasedOnRatio: import_scratch3.getSpacingBasedOnRatio, getSpacingByKey: import_scratch3.getSpacingByKey, transfromGap: import_scratch3.transfromGap },
   class: {
@@ -10723,7 +12326,7 @@ var Flex = {
 };
 
 // ../../uikit/domql/Atoms/Grid.js
-var import_scratch4 = __toESM(require_cjs9());
+var import_scratch4 = __toESM(require_cjs10());
 var Grid = {
   deps: { getSpacingBasedOnRatio: import_scratch4.getSpacingBasedOnRatio },
   props: { display: "grid" },
@@ -10771,13 +12374,13 @@ var Form = {
 var import_utils6 = __toESM(require_cjs());
 
 // ../../uikit/domql/Atoms/Theme.js
-var import_scratch7 = __toESM(require_cjs9());
+var import_scratch7 = __toESM(require_cjs10());
 
 // ../../uikit/domql/Atoms/Shape/style.js
-var import_scratch6 = __toESM(require_cjs9());
+var import_scratch6 = __toESM(require_cjs10());
 
 // ../../uikit/domql/Atoms/Timing.js
-var import_scratch5 = __toESM(require_cjs9());
+var import_scratch5 = __toESM(require_cjs10());
 var Timing = {
   deps: {
     getTimingFunction: import_scratch5.getTimingFunction,
@@ -11076,8 +12679,14 @@ var Theme = {
     border: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.border) && {
       border: deps.transformBorder(props4.border)
     },
-    borderColor: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.borderColor) && {
-      borderColor: deps.getMediaColor(props4.borderColor)
+    borderColor: (element) => {
+      const { props: props4, deps } = element;
+      const globalTheme = deps.getSystemTheme(element);
+      if (!props4.borderColor)
+        return;
+      return {
+        borderColor: deps.getMediaColor(props4.borderColor, globalTheme)
+      };
     },
     borderStyle: ({ props: props4 }) => !(0, import_utils5.isUndefined)(props4.borderStyle) && {
       borderStyle: props4.borderStyle
@@ -11103,7 +12712,7 @@ var Theme = {
         boxShadow: deps.transformShadow(props4.backgroundImage, globalTheme)
       };
     },
-    boxShadow: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.boxShadow) && {
+    boxShadow: ({ props: props4, deps }) => (0, import_utils5.isString)(props4.boxShadow) && {
       boxShadow: deps.transformBoxShadow(props4.boxShadow)
     },
     textShadow: ({ props: props4, deps }) => !(0, import_utils5.isUndefined)(props4.textShadow) && {
@@ -11535,7 +13144,7 @@ var Collection = {
 };
 
 // ../../uikit/domql/Atoms/Position.js
-var import_scratch8 = __toESM(require_cjs9());
+var import_scratch8 = __toESM(require_cjs10());
 var Position = {
   deps: { getSpacingByKey: import_scratch8.getSpacingByKey },
   class: {
@@ -11628,7 +13237,7 @@ var Svg = {
 
 // ../../uikit/domql/Atoms/Shape/index.js
 var import_utils8 = __toESM(require_cjs());
-var import_scratch9 = __toESM(require_cjs9());
+var import_scratch9 = __toESM(require_cjs10());
 var transformBorderRadius = (radius, props4, propertyName) => {
   if (!(0, import_utils8.isString)(radius))
     return;
@@ -11664,7 +13273,7 @@ var Shape = {
 };
 
 // ../../uikit/domql/Atoms/Text.js
-var import_scratch10 = __toESM(require_cjs9());
+var import_scratch10 = __toESM(require_cjs10());
 var Text = {
   deps: { getFontSizeByKey: import_scratch10.getFontSizeByKey, getFontFamily: import_scratch10.getFontFamily },
   text: ({ key, props: props4, state, deps }) => {
@@ -11736,15 +13345,15 @@ var XYZ = {
 };
 
 // ../../uikit/domql/Atoms/Animation.js
-var import_scratch11 = __toESM(require_cjs9());
+var import_scratch11 = __toESM(require_cjs10());
 var import_utils9 = __toESM(require_cjs());
 var applyAnimationProps = (animation, element) => {
   const { emotion: ctxEmotion } = element.context;
   const { keyframes } = ctxEmotion || emotion;
   if ((0, import_utils9.isObject)(animation))
     return { animationName: keyframes(animation) };
-  const { ANIMATION: ANIMATION2 } = element.context && element.context.designSystem;
-  const record = ANIMATION2[animation];
+  const { ANIMATION } = element.context && element.context.designSystem;
+  const record = ANIMATION[animation];
   return keyframes(record);
 };
 var Animation = {
@@ -12145,7 +13754,7 @@ var UnitValueWithTitle = {
 };
 
 // ../../uikit/domql/Link/index.js
-var import_router = __toESM(require_cjs10());
+var import_router = __toESM(require_cjs12());
 var Link = {
   extend: Focusable,
   tag: "a",
@@ -12248,7 +13857,7 @@ var Input = {
   props: {
     border: "none",
     type: "input",
-    theme: "tertiary",
+    theme: "field",
     fontSize: "A",
     round: "C",
     lineHeight: 1,
@@ -12263,8 +13872,8 @@ var Input = {
     autocomplete: ({ props: props4 }) => props4.autocomplete,
     placeholder: ({ props: props4 }) => props4.placeholder,
     value: ({ props: props4, state, deps }) => {
-      const { isString: isString9, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-      if (isString9(props4.value) && props4.value.includes("{{")) {
+      const { isString: isString10, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+      if (isString10(props4.value) && props4.value.includes("{{")) {
         return replaceLiteralsWithObjectFields2(props4.value, state);
       }
       return props4.value;
@@ -12415,17 +14024,16 @@ var Textarea = {
   props: {
     variant: "outlined",
     round: "Z2",
-    maxWidth: "H",
+    width: "H",
     minHeight: "E",
     placeholder: "Leave us a message...",
-    fontSize: "Z1",
     padding: "A",
     color: "white",
     style: { resize: "none" }
   },
   ".simple": {
     props: {
-      theme: "tertiary",
+      theme: "field",
       round: "Z2",
       width: "G1",
       height: "E1",
@@ -12436,7 +14044,8 @@ var Textarea = {
     props: {
       border: "1px solid #3F3F43",
       background: "transparent",
-      // round: 'Y+W',
+      round: "Y+W",
+      //
       width: "G1",
       height: "D2+W",
       lineHeight: 1.4,
@@ -12493,6 +14102,7 @@ var Select = {
     fontSize: "A",
     border: "none",
     boxSizing: "border-box",
+    theme: "field",
     cursor: "pointer"
   },
   childExtend: {
@@ -12961,7 +14571,7 @@ var ProgressCircleWithSideUnitValue = {
 
 // ../../uikit/domql/Range/index.js
 var import_utils13 = __toESM(require_cjs());
-var import_scratch12 = __toESM(require_cjs9());
+var import_scratch12 = __toESM(require_cjs10());
 var props = {
   appearance: "none",
   width: "100%",
@@ -13034,7 +14644,7 @@ var returnPropertyValue = (el, property, def) => {
 var RangeWithButtons = {
   minus: {
     extend: SquareButton,
-    props: { theme: "tertiary", icon: "minus" },
+    props: { theme: "secondary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
@@ -13088,7 +14698,7 @@ var RangeWithButtons = {
   },
   plus: {
     extend: SquareButton,
-    props: { theme: "tertiary", icon: "plus" },
+    props: { theme: "secondary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
@@ -13127,29 +14737,8 @@ var style_default = {
 };
 
 // ../../uikit/domql/Slider/index.js
-var import_scratch13 = __toESM(require_cjs9());
+var import_scratch13 = __toESM(require_cjs10());
 var import_utils14 = __toESM(require_cjs());
-(0, import_scratch13.set)({
-  theme: {
-    sliderThumb: {
-      background: "white 0.2",
-      "&::-webkit-slider-thumb": {
-        background: "#232526",
-        borderColor: (0, import_scratch13.opacify)("#454646", 0.75)
-      },
-      "&:hover": {
-        "&::-webkit-slider-thumb": {
-          borderColor: (0, import_scratch13.opacify)("#fff", 0.35)
-        }
-      },
-      "&:focus, &:active": {
-        "&::-webkit-slider-thumb": {
-          borderColor: "#3C6AC0"
-        }
-      }
-    }
-  }
-});
 var RangeSlider = {
   style: style_default,
   props: {
@@ -13225,7 +14814,7 @@ var Label = {
     text: "-2.902x",
     fontSize: "Y",
     boxSize: "fit-content fit-content",
-    background: "#F4454E",
+    theme: "secondary",
     padding: "W Y",
     round: "Y"
   }
@@ -13530,19 +15119,18 @@ var TooltipParent = {
 var Pills = {
   extend: Flex,
   props: {
-    gap: "Y2"
+    gap: "Y2",
+    childProps: {
+      boxSize: "Y2",
+      round: "A",
+      theme: "tertiary",
+      "!active": { theme: "tertiary" },
+      ".active": { theme: "primary" }
+    }
   },
   childExtend: {
     props: ({ key, state, parent }) => ({
-      active: parseInt(key) === parseInt(state.active || parent.props.active),
-      boxSize: "Y2",
-      round: "A",
-      "!active": {
-        theme: "tertiary"
-      },
-      ".active": {
-        theme: "primary"
-      }
+      active: parseInt(key) === parseInt(state.active || parent.props.active)
     }),
     on: {
       click: (e, el) => {
@@ -13550,7 +15138,7 @@ var Pills = {
       }
     }
   },
-  $setCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
+  $setPropsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
 };
 
 // ../../uikit/domql/Tab/index.js
@@ -15922,7 +17510,7 @@ var defaultDefine = {
 };
 
 // src/router.js
-var import_router2 = __toESM(require_cjs10(), 1);
+var import_router2 = __toESM(require_cjs12(), 1);
 var import_utils16 = __toESM(require_cjs(), 1);
 var DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
@@ -15969,7 +17557,7 @@ var popStateRouter = (element, options) => {
   import_utils16.window.onpopstate = (e) => {
     const { pathname, hash: hash2 } = import_utils16.window.location;
     const url2 = pathname + hash2;
-    router2(url2, element, {}, { pushState: false, level: 0 });
+    router2(url2, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };
 var injectRouterInLinkComponent = (routerOptions) => {
@@ -15980,7 +17568,7 @@ var injectRouterInLinkComponent = (routerOptions) => {
 
 // src/ferchOnCreate.js
 var import_utils17 = __toESM(require_cjs(), 1);
-var import_fetch = __toESM(require_cjs12(), 1);
+var import_fetch = __toESM(require_cjs14(), 1);
 var fetchSync = async (key, options) => {
   if (key && options.editor) {
     try {
@@ -16458,12 +18046,12 @@ var initEmotion = (key, options = DESIGN_SYSTEM_OPTIONS) => {
 };
 
 // ../socket-ui/byld-socket.js
-var import_router3 = __toESM(require_cjs10());
-var import_scratch14 = __toESM(require_cjs9());
+var import_router3 = __toESM(require_cjs12());
+var import_scratch14 = __toESM(require_cjs10());
 
 // ../socket/client.js
 var utils = __toESM(require_cjs(), 1);
-var globals = __toESM(require_cjs11(), 1);
+var globals = __toESM(require_cjs13(), 1);
 
 // ../../node_modules/engine.io-parser/build/esm/commons.js
 var PACKET_TYPES = /* @__PURE__ */ Object.create(null);
@@ -19859,7 +21447,7 @@ function send(event = "change", changes, options) {
 }
 
 // ../socket-ui/byld-socket.js
-var import_globals = __toESM(require_cjs11());
+var import_globals = __toESM(require_cjs13());
 
 // ../socket-ui/devFocus.js
 var import_utils21 = __toESM(require_cjs());
@@ -19999,36 +21587,6 @@ var inspectOnKey = (app) => {
 
 // ../socket-ui/byld-socket.js
 var isLocalhost = import_globals.window && import_globals.window.location && import_globals.window.location.host.includes("local");
-var ANIMATION = {
-  fadeInUp: {
-    from: {
-      transform: "translate3d(0, 12.5%, 1px)",
-      opacity: 0
-    },
-    to: {
-      transform: "translate3d(0, 0, 1px)",
-      opacity: 1
-    }
-  },
-  fadeOutDown: {
-    from: {
-      transform: "translate3d(0, 0, 1px)",
-      opacity: 1
-    },
-    to: {
-      transform: "translate3d(0, 12.5%, 1px)",
-      opacity: 0
-    }
-  }
-};
-var COLOR2 = {
-  black: "#000000",
-  blue: "#3686F7"
-};
-(0, import_scratch14.set)({
-  COLOR: COLOR2,
-  ANIMATION
-});
 var connectedToSymbols = (clients, element, state) => {
   if (clients.symbols) {
     if (!state.connected) {
@@ -20194,7 +21752,7 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   const define = options.define || defaultDefine;
   const routerOptions = initRouter(App, options);
   const extend = applySyncDebug([App], options);
-  const domqlApp = (import_domql.default.default.create || import_domql.default.create)({
+  const domqlApp = (import_domql.default.default && import_domql.default.default.create || import_domql.default.create)({
     extend,
     routes: options.pages,
     state,