@symbo.ls/create 2.11.133 → 2.11.136

package/dist/cjs/bundle/index.js

@@ -54,11 +54,11 @@ var require_key = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var key_exports = {};
     __export2(key_exports, {
-      createKey: () => createKey,
-      createSnapshotId: () => createSnapshotId
+      createSnapshotId: () => createSnapshotId,
+      generateKey: () => generateKey
     });
     module2.exports = __toCommonJS2(key_exports);
-    var createKey = function() {
+    var generateKey = function() {
       let index = 0;
       function newId() {
         index++;
@@ -66,7 +66,7 @@ var require_key = __commonJS({
       }
       return newId;
     }();
-    var createSnapshotId = createKey;
+    var createSnapshotId = generateKey;
   }
 });
 
@@ -464,7 +464,7 @@ var require_object = __commonJS({
       flattenRecursive: () => flattenRecursive,
       isEqualDeep: () => isEqualDeep2,
       map: () => map2,
-      merge: () => merge8,
+      merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
@@ -494,7 +494,7 @@ var require_object = __commonJS({
         obj[e] = exec5(extention[e], element);
       }
     };
-    var merge8 = (element, obj, excludeFrom = []) => {
+    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("__"))
@@ -1320,11 +1320,11 @@ var require_tree = __commonJS({
       TREE: () => TREE
     });
     module2.exports = __toCommonJS2(tree_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_report = require_cjs2();
     var ROOT = {
       key: ":root",
-      node: import_utils28.document ? import_utils28.document.body : (0, import_report.report)("DocumentNotDefined", import_utils28.document)
+      node: import_utils25.document ? import_utils25.document.body : (0, import_report.report)("DocumentNotDefined", import_utils25.document)
     };
     var TREE = ROOT;
   }
@@ -1360,12 +1360,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils28.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils25.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -1374,7 +1374,7 @@ var require_on = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils28.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils25.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -1385,7 +1385,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils28.isFunction)(appliedFunction)) {
+        if ((0, import_utils25.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -1518,10 +1518,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs3();
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils28.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils25.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -1612,7 +1612,7 @@ var require_cache = __commonJS({
     module2.exports = __toCommonJS2(cache_exports);
     var import_report = require_cjs3();
     var import_event = require_cjs4();
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var cache2 = {};
     var createHTMLNode = (element) => {
       const { tag } = element;
@@ -1631,15 +1631,15 @@ var require_cache = __commonJS({
     };
     var detectTag = (element) => {
       let { tag, key } = element;
-      tag = (0, import_utils28.exec)(tag, element);
+      tag = (0, import_utils25.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils28.isString)(tag)) {
-        const tagExists = (0, import_utils28.isValidHtmlTag)(tag);
+      if ((0, import_utils25.isString)(tag)) {
+        const tagExists = (0, import_utils25.isValidHtmlTag)(tag);
         if (tagExists)
           return tag;
       } else {
-        const isKeyATag = (0, import_utils28.isValidHtmlTag)(key);
+        const isKeyATag = (0, import_utils25.isValidHtmlTag)(key);
         if (isKeyATag)
           return key;
       }
@@ -1758,16 +1758,16 @@ var require_attr = __commonJS({
       default: () => attr_default
     });
     module2.exports = __toCommonJS2(attr_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_report = require_cjs2();
     var attr_default = (params, element, node2) => {
       const { __ref } = element;
       const { __attr } = __ref;
-      if ((0, import_utils28.isNot)("object"))
+      if ((0, import_utils25.isNot)("object"))
         (0, import_report.report)("HTMLInvalidAttr", params);
       if (params) {
         for (const attr in params) {
-          const val = (0, import_utils28.exec)(params[attr], element);
+          const val = (0, import_utils25.exec)(params[attr], element);
           if (val && node2.setAttribute)
             node2.setAttribute(attr, val);
           else if (node2.removeAttribute)
@@ -1804,14 +1804,14 @@ var require_classList = __commonJS({
     var classList_exports = {};
     __export2(classList_exports, {
       applyClassListOnNode: () => applyClassListOnNode2,
-      assignClass: () => assignClass,
+      assignKeyAsClassname: () => assignKeyAsClassname,
       classList: () => classList2,
       classify: () => classify2,
       default: () => classList_default
     });
     module2.exports = __toCommonJS2(classList_exports);
-    var import_utils28 = require_cjs();
-    var assignClass = (element) => {
+    var import_utils25 = require_cjs();
+    var assignKeyAsClassname = (element) => {
       const { key } = element;
       if (element.class === true)
         element.class = key;
@@ -1828,7 +1828,7 @@ var require_classList = __commonJS({
         else if (typeof param === "string")
           className += ` ${param}`;
         else if (typeof param === "function") {
-          className += ` ${(0, import_utils28.exec)(param, element)}`;
+          className += ` ${(0, import_utils25.exec)(param, element)}`;
         }
       }
       return className;
@@ -1839,9 +1839,9 @@ var require_classList = __commonJS({
       const { key } = element;
       if (params === true)
         params = element.class = { key };
-      if ((0, import_utils28.isString)(params))
+      if ((0, import_utils25.isString)(params))
         params = element.class = { default: params };
-      if ((0, import_utils28.isObject)(params))
+      if ((0, import_utils25.isObject)(params))
         params = classify2(params, element);
       const className = params.replace(/\s+/g, " ").trim();
       if (element.ref)
@@ -1925,15 +1925,15 @@ var require_set = __commonJS({
       default: () => set_default
     });
     module2.exports = __toCommonJS2(set_exports);
-    var import_utils28 = require_cjs();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_utils25 = require_cjs();
+    var import_create = __toESM2(require_create4(), 1);
     var import_options3 = __toESM2(require_options(), 1);
     var import_mixins = require_mixins();
     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_utils28.isEqualDeep)(params, element.content)) {
+      if (__contentRef && __contentRef.__cached && (0, import_utils25.isEqualDeep)(params, element.content)) {
         return element;
       }
       (0, import_content.removeContent)(element);
@@ -1993,7 +1993,7 @@ var require_content = __commonJS({
       updateContent: () => updateContent
     });
     module2.exports = __toCommonJS2(content_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var updateContent = function(params, options) {
       const element = this;
@@ -2016,7 +2016,7 @@ var require_content = __commonJS({
         if (__cached && __cached.content) {
           if (__cached.content.tag === "fragment")
             __cached.content.parent.node.innerHTML = "";
-          else if (__cached.content && (0, import_utils28.isFunction)(__cached.content.remove))
+          else if (__cached.content && (0, import_utils25.isFunction)(__cached.content.remove))
             __cached.content.remove();
         }
         delete element.content;
@@ -2061,15 +2061,15 @@ var require_data = __commonJS({
       default: () => data_default
     });
     module2.exports = __toCommonJS2(data_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_report = require_cjs2();
     var data_default = (params, element, node2) => {
       if (params && params.showOnNode) {
-        if (!(0, import_utils28.isObject)(params))
+        if (!(0, import_utils25.isObject)(params))
           (0, import_report.report)("HTMLInvalidData", params);
         for (const dataset in params) {
           if (dataset !== "showOnNode") {
-            node2.dataset[dataset] = (0, import_utils28.exec)(params[dataset], element);
+            node2.dataset[dataset] = (0, import_utils25.exec)(params[dataset], element);
           }
         }
       }
@@ -2103,9 +2103,9 @@ var require_html = __commonJS({
       default: () => html_default
     });
     module2.exports = __toCommonJS2(html_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var html_default = (param, element, node2) => {
-      const prop = (0, import_utils28.exec)(param, element);
+      const prop = (0, import_utils25.exec)(param, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node2.nodeName === "SVG")
@@ -2144,12 +2144,12 @@ var require_style = __commonJS({
       default: () => style_default2
     });
     module2.exports = __toCommonJS2(style_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_report = require_cjs2();
     var style_default2 = (params, element, node2) => {
       if (params) {
-        if ((0, import_utils28.isObject)(params))
-          (0, import_utils28.map)(node2.style, params, element);
+        if ((0, import_utils25.isObject)(params))
+          (0, import_utils25.map)(node2.style, params, element);
         else
           (0, import_report.report)("HTMLInvalidStyles", params);
       }
@@ -2185,9 +2185,9 @@ var require_text = __commonJS({
     });
     module2.exports = __toCommonJS2(text_exports);
     var import__ = require_cjs17();
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var asd = (param, element, node2) => {
-      const prop = (0, import_utils28.exec)(param, element);
+      const prop = (0, import_utils25.exec)(param, element);
       if (element.tag === "string") {
         node2.nodeValue = prop;
       } else if (param !== void 0 || param !== null) {
@@ -2201,9 +2201,9 @@ var require_text = __commonJS({
       }
     };
     var text_default = (param, element, node2) => {
-      let prop = (0, import_utils28.exec)(param, element);
-      if ((0, import_utils28.isString)(prop) && prop.includes("{{")) {
-        prop = (0, import_utils28.replaceLiteralsWithObjectFields)(prop, element.state);
+      let prop = (0, import_utils25.exec)(param, element);
+      if ((0, import_utils25.isString)(prop) && prop.includes("{{")) {
+        prop = (0, import_utils25.replaceLiteralsWithObjectFields)(prop, element.state);
       }
       if (element.tag === "string") {
         if (element.text === prop)
@@ -2307,11 +2307,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_ignore = require_ignore();
     var parse3 = function() {
       const state = this;
-      if ((0, import_utils28.isObject)(state)) {
+      if ((0, import_utils25.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -2319,7 +2319,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils28.isArray)(state)) {
+      } else if ((0, import_utils25.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -2339,7 +2339,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils28.isString)(stateKey)) {
+      if ((0, import_utils25.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -2374,10 +2374,10 @@ var require_methods = __commonJS({
     };
     var add = function(value2, options = {}) {
       const state = this;
-      if ((0, import_utils28.isArray)(state)) {
+      if ((0, import_utils25.isArray)(state)) {
         state.push(value2);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils28.isObject)(state)) {
+      } else if ((0, import_utils25.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value2 }, options);
       }
@@ -2388,10 +2388,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils28.isArray)(state))
-        (0, import_utils28.removeFromArray)(state, key);
-      if ((0, import_utils28.isObject)(state))
-        (0, import_utils28.removeFromObject)(state, key);
+      if ((0, import_utils25.isArray)(state))
+        (0, import_utils25.removeFromArray)(state, key);
+      if ((0, import_utils25.isObject)(state))
+        (0, import_utils25.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set5 = function(value2, options = {}) {
@@ -2400,7 +2400,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils28.isFunction)(func)) {
+      if ((0, import_utils25.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -2440,7 +2440,7 @@ var require_inherit = __commonJS({
       isState: () => isState3
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -2494,9 +2494,9 @@ var require_inherit = __commonJS({
       const inheritedState = findInheritedState(element, parent);
       if (!inheritedState)
         return element.state;
-      if ((0, import_utils28.is)(inheritedState)("object", "array")) {
-        return (0, import_utils28.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils28.is)(inheritedState)("string", "number")) {
+      if ((0, import_utils25.is)(inheritedState)("object", "array")) {
+        return (0, import_utils25.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils25.is)(inheritedState)("string", "number")) {
         ref.__stateType = "string";
         return { value: inheritedState };
       }
@@ -2505,12 +2505,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils28.isNot)(stateKey)("number", "string"))
+      if (!stateKey || (0, import_utils25.isNot)(stateKey)("number", "string"))
         return false;
       return true;
     };
     var isState3 = function(state) {
-      if (!(0, import_utils28.isObjectLike)(state))
+      if (!(0, import_utils25.isObjectLike)(state))
         return false;
       return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.add && state.apply && state.__element && state.__children;
     };
@@ -2559,7 +2559,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs3();
     var import_event = require_cjs4();
     var import_ignore = require_ignore();
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -2573,7 +2573,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils28.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils25.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -2603,10 +2603,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils28.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils25.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils28.overwriteShallow : import_utils28.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils25.overwriteShallow : import_utils25.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -2669,9 +2669,9 @@ var require_updateState = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/createState.js
-var require_createState = __commonJS({
-  "../../../domql/packages/state/dist/cjs/createState.js"(exports, module2) {
+// ../../../domql/packages/state/dist/cjs/create.js
+var require_create2 = __commonJS({
+  "../../../domql/packages/state/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -2690,24 +2690,27 @@ var require_createState = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var createState_exports = {};
-    __export2(createState_exports, {
+    var create_exports = {};
+    __export2(create_exports, {
+      applyInitialState: () => applyInitialState,
       createState: () => createState
     });
-    module2.exports = __toCommonJS2(createState_exports);
+    module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs4();
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
     var import_inherit = require_inherit();
     var createState = function(element, parent, options) {
-      const skipApplyMethods = Boolean(options && options.skipApplyMethods);
+      element.state = applyInitialState(element, parent, options);
+    };
+    var applyInitialState = function(element, parent, options) {
       const objectizeState = checkForTypes(element);
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils28.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils25.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
@@ -2718,14 +2721,6 @@ var require_createState = __commonJS({
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
         element.state = dependentState;
-      if (skipApplyMethods) {
-        if (element.parent && element.parent.state) {
-          element.state.parent = element.parent.state;
-        } else {
-          element.state.parent = {};
-        }
-        return element.state;
-      }
       applyMethods(element);
       (0, import_event.triggerEventOn)("stateCreated", element);
       return element.state;
@@ -2734,18 +2729,18 @@ var require_createState = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils28.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils25.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils28.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils25.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils28.isFunction)(state)) {
+      if ((0, import_utils25.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils28.exec)(state, element);
+        return (0, import_utils25.exec)(state, element);
       }
-      if ((0, import_utils28.is)(state)("string", "number")) {
+      if ((0, import_utils25.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       }
@@ -2793,12 +2788,12 @@ var require_createState = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils28.isArray)(state)) {
+      if ((0, import_utils25.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
       }
-      if (state.parent)
+      if (state.parent && state.parent.__children)
         state.parent.__children[element.key] = state;
     };
   }
@@ -2825,7 +2820,7 @@ var require_cjs6 = __commonJS({
     var state_exports = {};
     module2.exports = __toCommonJS2(state_exports);
     __reExport2(state_exports, require_ignore(), module2.exports);
-    __reExport2(state_exports, require_createState(), module2.exports);
+    __reExport2(state_exports, require_create2(), module2.exports);
     __reExport2(state_exports, require_updateState(), module2.exports);
     __reExport2(state_exports, require_methods(), module2.exports);
     __reExport2(state_exports, require_inherit(), module2.exports);
@@ -2860,16 +2855,16 @@ var require_state = __commonJS({
     });
     module2.exports = __toCommonJS2(state_exports);
     var import_state3 = require_cjs6();
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var state = (params, element, node2) => {
-      const state2 = (0, import_utils28.exec)(params, element);
-      if ((0, import_utils28.isObject)(state2)) {
+      const state2 = (0, import_utils25.exec)(params, element);
+      if ((0, import_utils25.isObject)(state2)) {
         for (const param in state2) {
           if (import_state3.IGNORE_STATE_PARAMS.includes(param))
             continue;
           if (!Object.hasOwnProperty.call(state2, param))
             continue;
-          element.state[param] = (0, import_utils28.exec)(state2[param], element);
+          element.state[param] = (0, import_utils25.exec)(state2[param], element);
         }
       }
       return element;
@@ -3070,7 +3065,7 @@ var require_methods2 = __commonJS({
       spotByPath: () => spotByPath
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_tree = require_tree();
     var import_mixins = require_mixins();
     var spotByPath = function(path) {
@@ -3103,9 +3098,9 @@ var require_methods2 = __commonJS({
     };
     var remove = function(params) {
       const element = this;
-      if ((0, import_utils28.isFunction)(element.node.remove))
+      if ((0, import_utils25.isFunction)(element.node.remove))
         element.node.remove();
-      else if (!(0, import_utils28.isProduction)()) {
+      else if (!(0, import_utils25.isProduction)()) {
         console.warn("This item cant be removed");
         element.log();
       }
@@ -3145,12 +3140,12 @@ var require_methods2 = __commonJS({
         if (v === "state") {
           if (element.__ref && element.__ref.__hasRootState)
             return;
-          if ((0, import_utils28.isFunction)(val && val.parse))
+          if ((0, import_utils25.isFunction)(val && val.parse))
             val = val.parse();
         } else if (v === "props") {
           const { __element, update, ...props6 } = element[v];
           obj[v] = props6;
-        } else if ((0, import_utils28.isDefined)(val))
+        } else if ((0, import_utils25.isDefined)(val))
           obj[v] = val;
       });
       return obj;
@@ -3161,7 +3156,7 @@ var require_methods2 = __commonJS({
       for (const v in obj) {
         if (excl.includes(v))
           return;
-        if ((0, import_utils28.isObjectLike)(obj[v])) {
+        if ((0, import_utils25.isObjectLike)(obj[v])) {
           obj[v] = parseDeep.call(obj[v], excl);
         }
       }
@@ -3279,18 +3274,18 @@ var require_inherit2 = __commonJS({
       inheritParentProps: () => inheritParentProps
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var objectizeStringProperty = (propValue) => {
-      if ((0, import_utils28.is)(propValue)("string", "number")) {
+      if ((0, import_utils25.is)(propValue)("string", "number")) {
         return { inheritedString: propValue };
       }
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
       let propsStack = [];
-      const parentProps = (0, import_utils28.exec)(parent, parent.state).props;
+      const parentProps = (0, import_utils25.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
-      const matchParentIsString = (0, import_utils28.isString)(matchParent);
+      const matchParentIsString = (0, import_utils25.isString)(matchParent);
       const matchParentChildProps = parentProps && parentProps.childProps;
       if (matchParent) {
         if (matchParentIsString) {
@@ -3312,7 +3307,7 @@ var require_inherit2 = __commonJS({
 });
 
 // ../../../domql/packages/element/dist/cjs/props/create.js
-var require_create2 = __commonJS({
+var require_create3 = __commonJS({
   "../../../domql/packages/element/dist/cjs/props/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
@@ -3338,19 +3333,19 @@ var require_create2 = __commonJS({
       syncProps: () => syncProps
     });
     module2.exports = __toCommonJS2(create_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_ignore = require_ignore2();
     var import_inherit = require_inherit2();
     var createPropsStack = (element, parent) => {
       const { props: props6, __ref } = element;
       const propsStack = __ref.__props = (0, import_inherit.inheritParentProps)(element, parent);
-      if ((0, import_utils28.isObject)(props6))
+      if ((0, import_utils25.isObject)(props6))
         propsStack.push(props6);
       else if (props6 === "inherit" && parent.props)
         propsStack.push(parent.props);
       else if (props6)
         propsStack.push(props6);
-      if ((0, import_utils28.isArray)(__ref.__extend)) {
+      if ((0, import_utils25.isArray)(__ref.__extend)) {
         __ref.__extend.forEach((extend) => {
           if (extend.props)
             propsStack.push(extend.props);
@@ -3365,12 +3360,12 @@ var require_create2 = __commonJS({
       props6.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
-        const execProps = (0, import_utils28.exec)(v, element);
-        if ((0, import_utils28.isObject)(execProps) && execProps.__element)
+        const execProps = (0, import_utils25.exec)(v, element);
+        if ((0, import_utils25.isObject)(execProps) && execProps.__element)
           return;
-        element.props = (0, import_utils28.deepMerge)(
+        element.props = (0, import_utils25.deepMerge)(
           mergedProps,
-          (0, import_utils28.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
+          (0, import_utils25.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
           import_ignore.IGNORE_PROPS_PARAMS
         );
       });
@@ -3379,9 +3374,11 @@ var require_create2 = __commonJS({
     };
     var createProps = function(element, parent, cached) {
       const propsStack = cached || createPropsStack(element, parent);
-      const { __ref } = element;
+      const { __ref: ref } = element;
+      if (!ref.__if)
+        return;
       if (propsStack.length) {
-        __ref.__props = propsStack;
+        ref.__props = propsStack;
         syncProps(propsStack, element);
         element.props.update = update;
       }
@@ -3420,7 +3417,7 @@ var require_update = __commonJS({
       updateProps: () => updateProps
     });
     module2.exports = __toCommonJS2(update_exports);
-    var import_create = require_create2();
+    var import_create = require_create3();
     var import_inherit = require_inherit2();
     var updateProps = (newProps, element, parent) => {
       const { __ref } = element;
@@ -3458,7 +3455,7 @@ var require_props = __commonJS({
     var props_exports = {};
     module2.exports = __toCommonJS2(props_exports);
     __reExport2(props_exports, require_ignore2(), module2.exports);
-    __reExport2(props_exports, require_create2(), module2.exports);
+    __reExport2(props_exports, require_create3(), module2.exports);
     __reExport2(props_exports, require_inherit2(), module2.exports);
     __reExport2(props_exports, require_update(), module2.exports);
   }
@@ -3500,11 +3497,11 @@ var require_object2 = __commonJS({
       overwriteShallow: () => overwriteShallow3
     });
     module2.exports = __toCommonJS2(object_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_state3 = require_cjs6();
     var import_props = require_props();
     var import_methods = require_methods2();
-    var METHODS_EXL = (0, import_utils28.joinArrays)(
+    var METHODS_EXL = (0, import_utils25.joinArrays)(
       ["node", "state", "context", "extend"],
       import_methods.METHODS,
       import_state3.IGNORE_STATE_PARAMS,
@@ -3518,7 +3515,7 @@ var require_object2 = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils28.isObjectLike)(elementProp) && (0, import_utils28.isObject)(extendProp)) {
+        } else if ((0, import_utils25.isObjectLike)(elementProp) && (0, import_utils25.isObject)(extendProp)) {
           deepMerge4(elementProp, extendProp);
         }
       }
@@ -3534,15 +3531,15 @@ var require_object2 = __commonJS({
       return o;
     };
     var deepClone3 = (obj, exclude = METHODS_EXL) => {
-      const o = (0, import_utils28.isArray)(obj) ? [] : {};
+      const o = (0, import_utils25.isArray)(obj) ? [] : {};
       for (const e in obj) {
         if (exclude.includes(e))
           continue;
         let objProp = obj[e];
-        if (e === "extend" && (0, import_utils28.isArray)(objProp)) {
+        if (e === "extend" && (0, import_utils25.isArray)(objProp)) {
           objProp = mergeArray(objProp, exclude);
         }
-        if ((0, import_utils28.isObjectLike)(objProp)) {
+        if ((0, import_utils25.isObjectLike)(objProp)) {
           o[e] = deepClone3(objProp, exclude);
         } else
           o[e] = objProp;
@@ -3581,7 +3578,7 @@ var require_object2 = __commonJS({
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
-        if ((0, import_utils28.isObjectLike)(objProp) && (0, import_utils28.isObjectLike)(paramsProp)) {
+        if ((0, import_utils25.isObjectLike)(objProp) && (0, import_utils25.isObjectLike)(paramsProp)) {
           overwriteDeep(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
@@ -3590,7 +3587,7 @@ var require_object2 = __commonJS({
       return obj;
     };
     var mergeIfExisted = (a, b) => {
-      if ((0, import_utils28.isObjectLike)(a) && (0, import_utils28.isObjectLike)(b))
+      if ((0, import_utils25.isObjectLike)(a) && (0, import_utils25.isObjectLike)(b))
         return deepMerge4(a, b);
       return a || b;
     };
@@ -3598,7 +3595,7 @@ var require_object2 = __commonJS({
       return arr.reduce((a, c) => deepMerge4(a, deepClone3(c, exclude)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_utils28.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
+      return (0, import_utils25.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -3653,7 +3650,7 @@ var require_extendUtils = __commonJS({
       setHashedExtend: () => setHashedExtend
     });
     module2.exports = __toCommonJS2(extendUtils_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var generateHash = () => Math.random().toString(36).substring(2);
     var extendStackRegistry = {};
     var extendCachedRegistry = {};
@@ -3662,7 +3659,7 @@ var require_extendUtils = __commonJS({
     };
     var setHashedExtend = (extend, stack) => {
       const hash2 = generateHash();
-      if (!(0, import_utils28.isString)(extend)) {
+      if (!(0, import_utils25.isString)(extend)) {
         extend.__hash = hash2;
       }
       extendStackRegistry[hash2] = stack;
@@ -3688,7 +3685,7 @@ var require_extendUtils = __commonJS({
     var flattenExtend = (extend, stack) => {
       if (!extend)
         return stack;
-      if ((0, import_utils28.isArray)(extend))
+      if ((0, import_utils25.isArray)(extend))
         return extractArrayExtend(extend, stack);
       stack.push(extend);
       if (extend.extend)
@@ -3701,9 +3698,9 @@ var require_extendUtils = __commonJS({
         if (["parent", "node", "__element"].indexOf(prop) > -1)
           continue;
         const objProp = obj[prop];
-        if ((0, import_utils28.isObject)(objProp)) {
+        if ((0, import_utils25.isObject)(objProp)) {
           o[prop] = deepCloneExtend(objProp);
-        } else if ((0, import_utils28.isArray)(objProp)) {
+        } else if ((0, import_utils25.isArray)(objProp)) {
           o[prop] = objProp.map((x) => x);
         } else
           o[prop] = objProp;
@@ -3718,14 +3715,14 @@ var require_extendUtils = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils28.isObject)(elementProp) && (0, import_utils28.isObject)(extendProp)) {
+        } else if ((0, import_utils25.isObject)(elementProp) && (0, import_utils25.isObject)(extendProp)) {
           deepMergeExtend(elementProp, extendProp);
-        } else if ((0, import_utils28.isArray)(elementProp) && (0, import_utils28.isArray)(extendProp)) {
+        } else if ((0, import_utils25.isArray)(elementProp) && (0, import_utils25.isArray)(extendProp)) {
           element[e] = elementProp.concat(extendProp);
-        } else if ((0, import_utils28.isArray)(elementProp) && (0, import_utils28.isObject)(extendProp)) {
+        } else if ((0, import_utils25.isArray)(elementProp) && (0, import_utils25.isObject)(extendProp)) {
           const obj = deepMergeExtend({}, elementProp);
           element[e] = deepMergeExtend(obj, extendProp);
-        } else if (elementProp === void 0 && (0, import_utils28.isFunction)(extendProp)) {
+        } else if (elementProp === void 0 && (0, import_utils25.isFunction)(extendProp)) {
           element[e] = extendProp;
         }
       }
@@ -3738,7 +3735,7 @@ var require_extendUtils = __commonJS({
     };
     var replaceStringsWithComponents = (stack, components) => {
       return stack.map((v) => {
-        if ((0, import_utils28.isString)(v))
+        if ((0, import_utils25.isString)(v))
           return components[v];
         else
           return v;
@@ -3788,15 +3785,15 @@ var require_extend = __commonJS({
       applyExtend: () => applyExtend
     });
     module2.exports = __toCommonJS2(extend_exports);
-    var import_utils28 = require_cjs();
-    var import_utils29 = require_utils();
+    var import_utils25 = require_cjs();
+    var import_utils26 = require_utils();
     var ENV2 = "development";
     var applyExtend = (element, parent, options = {}) => {
-      if ((0, import_utils28.isFunction)(element))
-        element = (0, import_utils28.exec)(element, parent);
+      if ((0, import_utils25.isFunction)(element))
+        element = (0, import_utils25.exec)(element, parent);
       let { extend, props: props6, context, __ref } = element;
       const COMPONENTS = context && context.components || options.components;
-      if ((0, import_utils28.isString)(extend)) {
+      if ((0, import_utils25.isString)(extend)) {
         if (COMPONENTS && COMPONENTS[extend])
           extend = COMPONENTS[extend];
         else {
@@ -3806,7 +3803,7 @@ var require_extend = __commonJS({
           extend = {};
         }
       }
-      const extendStack = (0, import_utils29.getExtendStack)(extend);
+      const extendStack = (0, import_utils26.getExtendStack)(extend);
       if (ENV2 !== "test" || ENV2 !== "development")
         delete element.extend;
       let childExtendStack = [];
@@ -3815,12 +3812,12 @@ var require_extend = __commonJS({
         if (!options.ignoreChildExtend) {
           if (props6 && props6.ignoreChildExtend)
             return;
-          childExtendStack = (0, import_utils29.getExtendStack)(parent.childExtend);
-          if (parent.childExtendRecursive || props6 && props6.ignoreChildExtendRecursive) {
-            const propsChildExtendRecursive = props6 && !props6.ignoreChildExtendRecursive;
-            const canExtendRecursive = propsChildExtendRecursive && element.key !== "__text";
+          childExtendStack = (0, import_utils26.getExtendStack)(parent.childExtend);
+          const ignoreChildExtendRecursive = props6 && props6.ignoreChildExtendRecursive;
+          if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
+            const canExtendRecursive = element.key !== "__text";
             if (canExtendRecursive) {
-              const childExtendRecursiveStack = (0, import_utils29.getExtendStack)(parent.childExtendRecursive);
+              const childExtendRecursiveStack = (0, import_utils26.getExtendStack)(parent.childExtendRecursive);
               childExtendStack = childExtendStack.concat(childExtendRecursiveStack);
               element.childExtendRecursive = parent.childExtendRecursive;
             }
@@ -3831,7 +3828,7 @@ var require_extend = __commonJS({
       const childExtendLength = childExtendStack.length;
       let stack = [];
       if (extendLength && childExtendLength) {
-        stack = (0, import_utils29.jointStacks)(extendStack, childExtendStack);
+        stack = (0, import_utils26.jointStacks)(extendStack, childExtendStack);
       } else if (extendLength) {
         stack = extendStack;
       } else if (childExtendLength) {
@@ -3839,19 +3836,19 @@ var require_extend = __commonJS({
       } else if (!options.extend)
         return element;
       if (options.extend) {
-        const defaultOptionsExtend = (0, import_utils29.getExtendStack)(options.extend);
+        const defaultOptionsExtend = (0, import_utils26.getExtendStack)(options.extend);
         stack = [].concat(stack, defaultOptionsExtend);
       }
       if (__ref)
         __ref.__extend = stack;
-      const findAndReplaceStrings = (0, import_utils29.replaceStringsWithComponents)(stack, COMPONENTS);
-      let mergedExtend = (0, import_utils29.cloneAndMergeArrayExtend)(findAndReplaceStrings);
-      const component = (0, import_utils28.exec)(element.component || mergedExtend.component, element);
+      const findAndReplaceStrings = (0, import_utils26.replaceStringsWithComponents)(stack, COMPONENTS);
+      let mergedExtend = (0, import_utils26.cloneAndMergeArrayExtend)(findAndReplaceStrings);
+      const component = (0, import_utils25.exec)(element.component || mergedExtend.component, element);
       if (component && COMPONENTS && COMPONENTS[component]) {
-        const componentExtend = (0, import_utils29.cloneAndMergeArrayExtend)((0, import_utils29.getExtendStack)(COMPONENTS[component]));
-        mergedExtend = (0, import_utils29.deepMergeExtend)(componentExtend, mergedExtend);
+        const componentExtend = (0, import_utils26.cloneAndMergeArrayExtend)((0, import_utils26.getExtendStack)(COMPONENTS[component]));
+        mergedExtend = (0, import_utils26.deepMergeExtend)(componentExtend, mergedExtend);
       }
-      return (0, import_utils29.deepMergeExtend)(element, mergedExtend);
+      return (0, import_utils26.deepMergeExtend)(element, mergedExtend);
     };
   }
 });
@@ -3890,11 +3887,11 @@ var require_component = __commonJS({
       overwriteVariant: () => overwriteVariant
     });
     module2.exports = __toCommonJS2(component_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_extend = require_extend();
     var ENV2 = "development";
     var checkIfKeyIsComponent = (key) => {
-      const isFirstKeyString = (0, import_utils28.isString)(key);
+      const isFirstKeyString = (0, import_utils25.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
@@ -3902,7 +3899,7 @@ var require_component = __commonJS({
     };
     var addAdditionalExtend = (newExtend, element) => {
       const { extend } = element;
-      const preserveExtend = (0, import_utils28.isArray)(extend) ? extend : [extend];
+      const preserveExtend = (0, import_utils25.isArray)(extend) ? extend : [extend];
       return {
         ...element,
         extend: [newExtend].concat(preserveExtend)
@@ -3925,10 +3922,10 @@ var require_component = __commonJS({
         };
       } else if (extend) {
         addAdditionalExtend(extendKey, element);
-      } else if ((0, import_utils28.isFunction)(element)) {
+      } else if ((0, import_utils25.isFunction)(element)) {
         return {
           extend: extendKey,
-          props: { ...(0, import_utils28.exec)(element, parent) }
+          props: { ...(0, import_utils25.exec)(element, parent) }
         };
       }
     };
@@ -3937,10 +3934,12 @@ var require_component = __commonJS({
     };
     var applyComponentFromContext = (element, parent, options) => {
       const { context } = element;
+      if (!context || !context.components)
+        return;
       const { components } = context;
       const { extend } = element;
-      const execExtend = (0, import_utils28.exec)(extend, element);
-      if ((0, import_utils28.isString)(execExtend)) {
+      const execExtend = (0, import_utils25.exec)(extend, element);
+      if ((0, import_utils25.isString)(execExtend)) {
         if (components[execExtend])
           element.extend = components[execExtend];
         else {
@@ -3953,29 +3952,29 @@ var require_component = __commonJS({
       }
     };
     var isVariant = (param) => {
-      if (!(0, import_utils28.isString)(param))
+      if (!(0, import_utils25.isString)(param))
         return;
       const firstCharKey = param.slice(0, 1);
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
       const { props: props6 } = element;
-      if ((0, import_utils28.isObject)(props6) && (0, import_utils28.isString)(props6.variant))
+      if ((0, import_utils25.isObject)(props6) && (0, import_utils25.isString)(props6.variant))
         return true;
     };
     var overwriteVariant = (element, variant, variantProps) => {
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props6 = (0, import_utils28.isObject)(variantProps) ? variantProps : {};
-      if ((0, import_utils28.isString)(variantElement)) {
+      const props6 = (0, import_utils25.isObject)(variantProps) ? variantProps : {};
+      if ((0, import_utils25.isString)(variantElement)) {
         variantElement = {
           extend: [{ props: props6 }, variantElement]
         };
       } else if (variantElement.extend) {
         variantElement = addAdditionalExtend({ props: props6 }, variantElement);
       }
-      return (0, import_utils28.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
+      return (0, import_utils25.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
     };
     var applyVariant = (element) => {
       const { props: props6 } = element;
@@ -4050,8 +4049,8 @@ var require_iterate = __commonJS({
       throughUpdatedExec: () => throughUpdatedExec
     });
     module2.exports = __toCommonJS2(iterate_exports);
-    var import_utils28 = require_cjs();
-    var import_utils29 = require_utils();
+    var import_utils25 = require_cjs();
+    var import_utils26 = require_utils();
     var import_methods = require_methods2();
     var throughInitialExec = (element, exclude = {}) => {
       const { __ref: ref } = element;
@@ -4059,13 +4058,13 @@ var require_iterate = __commonJS({
         if (exclude[param])
           continue;
         const prop = element[param];
-        if ((0, import_utils28.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils29.isVariant)(param)) {
+        if ((0, import_utils25.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils26.isVariant)(param)) {
           ref.__exec[param] = prop;
           element[param] = prop(element, element.state);
         }
       }
     };
-    var throughUpdatedExec = (element, options = { excludes: import_utils29.METHODS_EXL }) => {
+    var throughUpdatedExec = (element, options = { excludes: import_utils26.METHODS_EXL }) => {
       const { __ref: ref } = element;
       const changes = {};
       for (const param in ref.__exec) {
@@ -4074,13 +4073,13 @@ var require_iterate = __commonJS({
         if (isDefinedParam)
           continue;
         const newExec = ref.__exec[param](element, element.state, element.context);
-        const execReturnsString = (0, import_utils28.isString)(newExec) || (0, import_utils28.isNumber)(newExec);
+        const execReturnsString = (0, import_utils25.isString)(newExec) || (0, import_utils25.isNumber)(newExec);
         if (prop && prop.node && execReturnsString) {
-          (0, import_utils29.overwrite)(prop, { text: newExec }, options);
+          (0, import_utils26.overwrite)(prop, { text: newExec }, options);
         } else if (newExec !== prop) {
-          if ((0, import_utils29.checkIfKeyIsComponent)(param)) {
-            const { extend, ...newElem } = (0, import_utils29.extendizeByKey)(newExec, element, param);
-            (0, import_utils29.overwrite)(prop, newElem, options);
+          if ((0, import_utils26.checkIfKeyIsComponent)(param)) {
+            const { extend, ...newElem } = (0, import_utils26.extendizeByKey)(newExec, element, param);
+            (0, import_utils26.overwrite)(prop, newElem, options);
           } else {
             ref.__cached[param] = changes[param] = prop;
             element[param] = newExec;
@@ -4092,16 +4091,16 @@ var require_iterate = __commonJS({
     var throughInitialDefine = (element) => {
       const { define: define2, context, __ref: ref } = element;
       let defineObj = {};
-      const hasGlobalDefine = context && (0, import_utils28.isObject)(context.define);
-      if ((0, import_utils28.isObject)(define2))
+      const hasGlobalDefine = context && (0, import_utils25.isObject)(context.define);
+      if ((0, import_utils25.isObject)(define2))
         defineObj = { ...define2 };
       if (hasGlobalDefine)
         defineObj = { ...defineObj, ...context.define };
       for (const param in defineObj) {
         let elementProp = element[param];
-        if ((0, import_utils28.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils29.isVariant)(param)) {
+        if ((0, import_utils25.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils26.isVariant)(param)) {
           ref.__exec[param] = elementProp;
-          const execParam2 = elementProp = (0, import_utils28.exec)(elementProp, element);
+          const execParam2 = elementProp = (0, import_utils25.exec)(elementProp, element);
           if (execParam2) {
             elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
             ref.__defineCache[param] = elementProp;
@@ -4117,15 +4116,15 @@ var require_iterate = __commonJS({
       const { context, define: define2, __ref: ref } = element;
       const changes = {};
       let obj = {};
-      if ((0, import_utils28.isObject)(define2))
+      if ((0, import_utils25.isObject)(define2))
         obj = { ...define2 };
-      if ((0, import_utils28.isObject)(context && context.define))
+      if ((0, import_utils25.isObject)(context && context.define))
         obj = { ...obj, ...context.define };
       for (const param in obj) {
         const execParam = ref.__exec[param];
         if (execParam)
           ref.__defineCache[param] = execParam(element, element.state, element.context);
-        const cached = (0, import_utils28.exec)(ref.__defineCache[param], element);
+        const cached = (0, import_utils25.exec)(ref.__defineCache[param], element);
         const newExecParam = obj[param](cached, element, element.state, element.context);
         if (newExecParam)
           element[param] = newExecParam;
@@ -4161,18 +4160,20 @@ var require_applyParam = __commonJS({
       applyParam: () => applyParam
     });
     module2.exports = __toCommonJS2(applyParam_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_mixins = require_mixins();
     var applyParam = (param, element, options) => {
-      const { node: node2, context } = element;
+      const { node: node2, context, __ref: ref } = element;
       const prop = element[param];
       const DOMQLProperty = import_mixins.registry[param];
       const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
       const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty;
       const hasDefine = element.define && element.define[param];
       const hasContextDefine = context && context.define && context.define[param];
+      if (!ref.__if)
+        return;
       if (isGlobalTransformer && !hasContextDefine) {
-        if ((0, import_utils28.isFunction)(isGlobalTransformer)) {
+        if ((0, import_utils25.isFunction)(isGlobalTransformer)) {
           isGlobalTransformer(prop, element, node2, options);
           return;
         }
@@ -4219,15 +4220,15 @@ var require_node2 = __commonJS({
       default: () => node_default
     });
     module2.exports = __toCommonJS2(node_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_event = require_cjs4();
     var import_render = require_cjs5();
     var import_methods = require_methods2();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_create = __toESM2(require_create4(), 1);
     var import_iterate = require_iterate();
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
-    var import_utils29 = require_utils();
+    var import_utils26 = require_utils();
     var ENV2 = "development";
     var createNode = (element, options) => {
       let { node: node2, tag, __ref: ref } = element;
@@ -4244,25 +4245,23 @@ var require_node2 = __commonJS({
       }
       if (ENV2 === "test" || ENV2 === "development" || options.alowRefReference) {
         node2.ref = element;
-        if ((0, import_utils28.isFunction)(node2.setAttribute))
+        if ((0, import_utils25.isFunction)(node2.setAttribute))
           node2.setAttribute("key", element.key);
       }
-      if (!ref.__if)
-        return element;
       if (element.tag !== "string" || element.tag !== "fragment") {
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
-        if (isNewNode && (0, import_utils28.isObject)(element.on))
+        if (isNewNode && (0, import_utils25.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element);
         for (const param in element) {
           const prop = element[param];
-          if ((0, import_utils28.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils29.isVariant)(param) || (0, import_utils28.isObject)(import_mixins.registry[param]))
+          if ((0, import_utils25.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils26.isVariant)(param) || (0, import_utils25.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) {
-              (0, import_create.default)((0, import_utils28.exec)(prop, element), element, param, options);
+              (0, import_create.default)((0, import_utils25.exec)(prop, element), element, param, options);
             }
           }
         }
@@ -4857,7 +4856,7 @@ var require_object3 = __commonJS({
       flattenRecursive: () => flattenRecursive,
       isEqualDeep: () => isEqualDeep2,
       map: () => map2,
-      merge: () => merge8,
+      merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
@@ -4887,7 +4886,7 @@ var require_object3 = __commonJS({
         obj[e] = exec5(extention[e], element);
       }
     };
-    var merge8 = (element, obj, excludeFrom = []) => {
+    var merge5 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
         if (e === "__proto__")
           continue;
@@ -5389,7 +5388,7 @@ var require_methods3 = __commonJS({
       DEFAULT_METHODS: () => DEFAULT_METHODS
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils28 = require_cjs10();
+    var import_utils25 = require_cjs10();
     var DEFAULT_METHODS = {
       key: {},
       tag: {},
@@ -5410,7 +5409,7 @@ var require_methods3 = __commonJS({
       text: (element, state) => {
         element.ref.text = {
           tag: "text",
-          text: (0, import_utils28.exec)(element.text, element, state)
+          text: (0, import_utils25.exec)(element.text, element, state)
         };
       },
       innerHTML: {},
@@ -6061,7 +6060,7 @@ var require_object4 = __commonJS({
       flattenRecursive: () => flattenRecursive,
       isEqualDeep: () => isEqualDeep2,
       map: () => map2,
-      merge: () => merge8,
+      merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
@@ -6091,7 +6090,7 @@ var require_object4 = __commonJS({
         obj[e] = exec5(extention[e], element);
       }
     };
-    var merge8 = (element, obj, excludeFrom = []) => {
+    var merge5 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
         if (e === "__proto__")
           continue;
@@ -6597,12 +6596,12 @@ var require_on2 = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils28 = require_cjs13();
+    var import_utils25 = require_cjs13();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils28.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils25.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -6611,7 +6610,7 @@ var require_on2 = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils28.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils25.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -6622,7 +6621,7 @@ var require_on2 = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils28.isFunction)(appliedFunction)) {
+        if ((0, import_utils25.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -6658,10 +6657,10 @@ var require_can2 = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs12();
-    var import_utils28 = require_cjs13();
+    var import_utils25 = require_cjs13();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils28.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils25.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -6751,8 +6750,8 @@ var require_cacheNode = __commonJS({
     module2.exports = __toCommonJS2(cacheNode_exports);
     var import_report = require_cjs12();
     var import_event = require_cjs14();
-    var import_utils28 = require_cjs13();
-    var import_cache5 = require_cjs15();
+    var import_utils25 = require_cjs13();
+    var import_cache2 = require_cjs15();
     var createHTMLNode = (element) => {
       const { tag } = element;
       if (tag) {
@@ -6770,15 +6769,15 @@ var require_cacheNode = __commonJS({
     };
     var detectTag = (element) => {
       let { tag, key } = element;
-      tag = (0, import_utils28.exec)(tag, element);
+      tag = (0, import_utils25.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils28.isString)(tag)) {
-        const tagExists = (0, import_utils28.isValidHtmlTag)(tag);
+      if ((0, import_utils25.isString)(tag)) {
+        const tagExists = (0, import_utils25.isValidHtmlTag)(tag);
         if (tagExists)
           return tag;
       } else {
-        const isKeyATag = (0, import_utils28.isValidHtmlTag)(key);
+        const isKeyATag = (0, import_utils25.isValidHtmlTag)(key);
         if (isKeyATag)
           return key;
       }
@@ -6789,9 +6788,9 @@ var require_cacheNode = __commonJS({
       if (!(0, import_event.canRender)(element)) {
         return (0, import_report.report)("HTMLInvalidTag", element.tag, element);
       }
-      let cachedTag = import_cache5.cache[tag];
+      let cachedTag = import_cache2.cache[tag];
       if (!cachedTag)
-        cachedTag = import_cache5.cache[tag] = createHTMLNode(element);
+        cachedTag = import_cache2.cache[tag] = createHTMLNode(element);
       const clonedNode = cachedTag.cloneNode(true);
       if (tag === "string")
         clonedNode.nodeValue = element.text;
@@ -6861,19 +6860,19 @@ var require_update2 = __commonJS({
       default: () => update_default
     });
     module2.exports = __toCommonJS2(update_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_event = require_cjs4();
     var import_methods = require_methods2();
     var import_props = require_props();
     var import_state3 = require_cjs6();
-    var import_utils29 = require_utils();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_utils26 = require_utils();
+    var import_create = __toESM2(require_create4(), 1);
     var import_iterate = require_iterate();
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
     var import_options3 = __toESM2(require_options(), 1);
     var snapshot = {
-      snapshotId: import_utils28.createSnapshotId
+      snapshotId: import_utils25.createSnapshotId
     };
     var UPDATE_DEFAULT_OPTIONS = {
       stackChanges: false,
@@ -6881,7 +6880,7 @@ var require_update2 = __commonJS({
       preventRecursive: false,
       currentSnapshot: false,
       calleeElement: false,
-      excludes: import_utils29.METHODS_EXL
+      excludes: import_utils26.METHODS_EXL
     };
     var update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
       const element = this;
@@ -6890,14 +6889,14 @@ var require_update2 = __commonJS({
       if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
         return;
       if (!excludes)
-        (0, import_utils28.merge)(options, UPDATE_DEFAULT_OPTIONS);
+        (0, import_utils25.merge)(options, UPDATE_DEFAULT_OPTIONS);
       let ref = element.__ref;
       if (!ref)
         ref = element.__ref = {};
       const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options);
       if (snapshotHasUpdated)
         return;
-      if ((0, import_utils28.isString)(params) || (0, import_utils28.isNumber)(params)) {
+      if ((0, import_utils25.isString)(params) || (0, import_utils25.isNumber)(params)) {
         params = { text: params };
       }
       const ifFails = checkIfOnUpdate(element, parent, options);
@@ -6908,7 +6907,7 @@ var require_update2 = __commonJS({
         return;
       if (ref.__if && !options.preventPropsUpdate) {
         const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
-        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils28.isFunction)(v));
+        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils25.isFunction)(v));
         const props6 = params.props || hasParentProps || hasFunctionInProps.length;
         if (props6)
           (0, import_props.updateProps)(props6, element, parent);
@@ -6921,11 +6920,11 @@ var require_update2 = __commonJS({
         if (initUpdateReturns === false)
           return element;
       }
-      const overwriteChanges = (0, import_utils28.overwriteDeep)(element, params, import_utils29.METHODS_EXL);
+      const overwriteChanges = (0, import_utils25.overwriteDeep)(element, params, import_utils26.METHODS_EXL);
       const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
       const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
       if (options.stackChanges && element.__stackChanges) {
-        const stackChanges = (0, import_utils28.merge)(definedChanges, (0, import_utils28.merge)(execChanges, overwriteChanges));
+        const stackChanges = (0, import_utils25.merge)(definedChanges, (0, import_utils25.merge)(execChanges, overwriteChanges));
         element.__stackChanges.push(stackChanges);
       }
       if (!ref.__if)
@@ -6936,16 +6935,16 @@ var require_update2 = __commonJS({
       for (const param in element) {
         const prop = element[param];
         const hasOnlyUpdateFalsy = options.onlyUpdate && (options.onlyUpdate !== param || !element.lookup(options.onlyUpdate));
-        const isInPreventUpdate = (0, import_utils28.isArray)(options.preventUpdate) && options.preventUpdate.includes(param);
-        const isInPreventDefineUpdate = (0, import_utils28.isArray)(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param);
-        if ((0, import_utils28.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || options.preventDefineUpdate === true || options.preventDefineUpdate === param || options.preventContentUpdate && param === "content" || (options.preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils28.isObject)(import_mixins.registry[param]) || (0, import_utils29.isVariant)(param))
+        const isInPreventUpdate = (0, import_utils25.isArray)(options.preventUpdate) && options.preventUpdate.includes(param);
+        const isInPreventDefineUpdate = (0, import_utils25.isArray)(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param);
+        if ((0, import_utils25.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || options.preventDefineUpdate === true || options.preventDefineUpdate === param || options.preventContentUpdate && param === "content" || (options.preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils25.isObject)(import_mixins.registry[param]) || (0, import_utils26.isVariant)(param))
           continue;
         if (options.preventStateUpdate === "once")
           options.preventStateUpdate = false;
         const isElement = (0, import_applyParam.applyParam)(param, element, options);
         if (isElement) {
           const { hasDefine, hasContextDefine } = isElement;
-          const canUpdate = (0, import_utils28.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
+          const canUpdate = (0, import_utils25.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
           if (!canUpdate)
             continue;
           const childUpdateCall = () => update.call(prop, params[prop], {
@@ -6954,7 +6953,7 @@ var require_update2 = __commonJS({
             calleeElement
           });
           if (element.props && element.props.lazyLoad || options.lazyLoad) {
-            import_utils28.window.requestAnimationFrame(() => childUpdateCall());
+            import_utils25.window.requestAnimationFrame(() => childUpdateCall());
           } else
             childUpdateCall();
         }
@@ -6978,7 +6977,7 @@ var require_update2 = __commonJS({
       return [snapshotOnCallee, calleeElement];
     };
     var checkIfOnUpdate = (element, parent, options) => {
-      if (!(0, import_utils28.isFunction)(element.if) || !element.state || !parent)
+      if (!(0, import_utils25.isFunction)(element.if) || !element.state || !parent)
         return;
       const ref = element.__ref;
       const ifPassed = element.if(element, element.state, element.context, options);
@@ -6995,7 +6994,7 @@ var require_update2 = __commonJS({
             element.state = ref.__state;
           }
           const created = (0, import_create.default)(element, parent, element.key, import_options3.default.create);
-          if (options.preventUpdate !== true && element.on && (0, import_utils28.isFunction)(element.on.update)) {
+          if (options.preventUpdate !== true && element.on && (0, import_utils25.isFunction)(element.on.update)) {
             (0, import_event.applyEvent)(element.on.update, created, created.state);
           }
           return created;
@@ -7016,9 +7015,9 @@ var require_update2 = __commonJS({
         return;
       }
       const { isHoisted, execStateFunction, stateFunctionOverwrite } = options;
-      const shouldForceStateUpdate = (0, import_utils28.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
+      const shouldForceStateUpdate = (0, import_utils25.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
       if (shouldForceStateUpdate) {
-        const execState = (0, import_utils28.exec)(stateKey, element);
+        const execState = (0, import_utils25.exec)(stateKey, element);
         state.set(execState, {
           ...options,
           preventUpdate: true
@@ -7090,7 +7089,7 @@ var require_set2 = __commonJS({
       addMethods: () => addMethods
     });
     module2.exports = __toCommonJS2(set_exports);
-    var import_utils28 = require_cjs();
+    var import_utils25 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var import_update = __toESM2(require_update2(), 1);
     var import__ = require_methods2();
@@ -7111,7 +7110,7 @@ var require_set2 = __commonJS({
         nextElement: import__.nextElement.bind(element),
         previousElement: import__.previousElement.bind(element)
       };
-      if ((0, import_utils28.isDevelopment)())
+      if ((0, import_utils25.isDevelopment)())
         proto.log = import__.log.bind(element);
       Object.setPrototypeOf(element, proto);
     };
@@ -7119,7 +7118,7 @@ var require_set2 = __commonJS({
 });
 
 // ../../../domql/packages/element/dist/cjs/create.js
-var require_create3 = __commonJS({
+var require_create4 = __commonJS({
   "../../../domql/packages/element/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
@@ -7155,7 +7154,6 @@ var require_create3 = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_node = __toESM2(require_node2(), 1);
-    var import_utils28 = require_cjs();
     var import_tree = require_tree();
     var import_registry = require_cjs11();
     var import_event = require_cjs4();
@@ -7169,21 +7167,54 @@ var require_create3 = __commonJS({
     var import_set = require_set2();
     var import_classList = require_classList();
     var import_iterate = require_iterate();
+    var import_utils25 = require_cjs();
     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 || {}) => {
-      if (options && !import_options3.default.create) {
-        import_options3.default.create = options;
-        import_options3.default.create.context = element.context || options.context;
+      cacheOptions(element, options);
+      if (checkIfPrimitive(element)) {
+        return applyValueAsText(element, parent, key);
+      }
+      element = redefineElement(element, parent, key, options);
+      parent = redefineParent(element, parent, key);
+      key = createKey(element, parent, key);
+      const ref = addRef(element, parent, key);
+      applyContext(element, parent, options);
+      (0, import_component.applyComponentFromContext)(element, parent, options);
+      (0, import_extend.applyExtend)(element, parent, options);
+      element.key = key;
+      if (options.onlyResolveExtends) {
+        return onlyResolveExtends(element, parent, options);
+      }
+      replaceOptions(element, parent, options);
+      addCaching(element, parent);
+      (0, import_set.addMethods)(element, parent);
+      (0, import_state3.createState)(element, parent);
+      createIfConditionFlag(element, parent);
+      if (element.node && ref.__if) {
+        return (0, import_render.assignNode)(element, parent, key);
       }
+      (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);
+      addElementIntoParentChildren(element, parent);
+      (0, import_event.triggerEventOn)("complete", element, options);
+      return element;
+    };
+    var createBasedOnType = (element, parent, key, options) => {
       if (element === void 0) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path);
         }
-        element = {};
+        return {};
       }
-      if ((0, import_utils28.isString)(key) && key.slice(0, 2 === "__")) {
+      if ((0, import_utils25.isString)(key) && key.slice(0, 2 === "__")) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "seems like to be in __ref");
         }
@@ -7191,65 +7222,58 @@ var require_create3 = __commonJS({
       if (element === null)
         return;
       if (element === true)
-        element = { text: true };
+        return { text: true };
       if (element.__hash) {
-        element = { extend: element };
+        return { extend: element };
       }
-      if (!parent)
-        parent = import_tree.ROOT;
-      if ((0, import_utils28.isNode)(parent)) {
-        parent = import_tree.ROOT[`${key}_parent`] = { key: ":root", node: parent };
+      return element;
+    };
+    var redefineElement = (element, parent, key, options) => {
+      const elementWrapper = createBasedOnType(element, parent, key, options);
+      if ((0, import_component.checkIfKeyIsComponent)(key)) {
+        return (0, import_component.applyKeyComponentAsExtend)(elementWrapper, parent, key);
       }
-      if (checkIfPrimitive(element)) {
-        element = applyValueAsText(element, parent, key);
+      if (checkIfMedia(key)) {
+        return applyMediaProps2(elementWrapper, parent, key);
       }
-      const assignedKey = (key || element.key || (0, import_utils28.createKey)()).toString();
-      if ((0, import_component.checkIfKeyIsComponent)(assignedKey)) {
-        element = (0, import_component.applyKeyComponentAsExtend)(element, parent, assignedKey);
+      return elementWrapper;
+    };
+    var redefineParent = (element, parent, key, options) => {
+      if (!parent)
+        return import_tree.ROOT;
+      if ((0, import_utils25.isNode)(parent)) {
+        const parentNodeWrapper = { key: ":root", node: parent };
+        import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
+        return parentNodeWrapper;
       }
-      if (checkIfMedia(assignedKey)) {
-        element = applyMediaProps2(element, parent, assignedKey);
+      return parent;
+    };
+    var cacheOptions = (element, options) => {
+      if (options && !import_options3.default.create) {
+        import_options3.default.create = options;
+        import_options3.default.create.context = element.context || options.context;
       }
+    };
+    var createKey = (element, parent, key) => {
+      return (key || element.key || (0, import_utils25.generateKey)()).toString();
+    };
+    var addRef = (element, parent) => {
       if (element.__ref)
         element.__ref.origin = element;
       else
         element.__ref = { origin: element };
-      const __ref = element.__ref;
-      applyContext(element, parent, options);
-      const { context } = element;
-      if (context && context.components) {
-        (0, import_component.applyComponentFromContext)(element, parent, options);
-      }
-      (0, import_extend.applyExtend)(element, parent, options);
-      element.key = assignedKey;
-      if (options.onlyResolveExtends) {
-        return resolveExtends(element, parent, options);
-      }
+      return element.__ref;
+    };
+    var replaceOptions = (element, parent, options) => {
       if (Object.keys(options).length) {
         import_mixins.registry.defaultOptions = options;
         if (options.ignoreChildExtend)
           delete options.ignoreChildExtend;
       }
-      addCaching(element, parent);
-      (0, import_set.addMethods)(element, parent);
-      element.state = (0, import_state3.createState)(element, parent);
-      checkIf(element, parent);
-      if (element.node && __ref.__if) {
-        return (0, import_render.assignNode)(element, parent, assignedKey);
-      }
-      if (__ref.__if)
-        (0, import_props.createProps)(element, parent);
-      (0, import_component.applyVariant)(element, parent);
-      const initReturns = (0, import_event.triggerEventOn)("init", element, options);
-      if (initReturns === false)
-        return element;
-      (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
-      (0, import_classList.assignClass)(element);
-      renderElement(element, parent, options);
+    };
+    var addElementIntoParentChildren = (element, parent) => {
       if (parent.__ref && parent.__ref.__children)
         parent.__ref.__children.push(element.key);
-      (0, import_event.triggerEventOn)("complete", element, options);
-      return element;
     };
     var renderElement = (element, parent, options) => {
       const { __ref: ref, key } = element;
@@ -7261,7 +7285,7 @@ var require_create3 = __commonJS({
       (0, import_event.triggerEventOn)("render", element, options);
     };
     var checkIfPrimitive = (element) => {
-      return (0, import_utils28.is)(element)("string", "number");
+      return (0, import_utils25.is)(element)("string", "number");
     };
     var applyValueAsText = (element, parent, key) => {
       const extendTag = element.extend && element.extend.tag;
@@ -7278,9 +7302,9 @@ var require_create3 = __commonJS({
       if (!element.context)
         element.context = parent.context || options.context || import_tree.ROOT.context;
     };
-    var checkIf = (element, parent) => {
+    var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
-      if ((0, import_utils28.isFunction)(element.if)) {
+      if ((0, import_utils25.isFunction)(element.if)) {
         const ifPassed = element.if(element, element.state);
         if (!ifPassed) {
           const ifFragment = (0, import_node2.cacheNode)({ tag: "fragment" });
@@ -7323,7 +7347,7 @@ var require_create3 = __commonJS({
         ref.__path = parentRef.__path.concat(element.key);
       }
     };
-    var resolveExtends = (element, parent, options) => {
+    var onlyResolveExtends = (element, parent, options) => {
       const { __ref } = element;
       element.tag = (0, import_node2.detectTag)(element);
       if (!__ref.__exec)
@@ -7332,15 +7356,13 @@ var require_create3 = __commonJS({
         __ref.__attr = {};
       if (!element.props)
         element.props = {};
-      if (!element.state)
-        element.state = {};
-      (0, import_state3.createState)(element, parent, { skipApplyMethods: true });
+      (0, import_state3.createState)(element, parent, { skipApplyMethods: true, ...options });
       (0, import_props.createProps)(element, parent);
       (0, import_component.applyVariant)(element, parent);
       (0, import_iterate.throughInitialExec)(element, options.propsExcludedFromExec);
       for (const param in element) {
         const prop = element[param];
-        if ((0, import_utils28.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils28.isObject)(import_mixins.registry[param]) || (0, import_component.isVariant)(param))
+        if ((0, import_utils25.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils25.isObject)(import_mixins.registry[param]) || (0, import_component.isVariant)(param))
           continue;
         const hasDefine = element.define && element.define[param];
         const contextHasDefine = element.context && element.context.define && element.context.define[param];
@@ -7348,16 +7370,13 @@ var require_create3 = __commonJS({
         if (import_mixins.registry[param] && !optionsHasDefine) {
           continue;
         } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-          create2((0, import_utils28.exec)(prop, element), element, param, options);
+          create2((0, import_utils25.exec)(prop, element), element, param, options);
         }
       }
-      delete element.parent;
       delete element.update;
       delete element.__element;
       delete element.props.update;
       delete element.props.__element;
-      delete element.state.__element;
-      delete element.state.__element;
       if (!options.keepRef)
         delete element.__ref;
       return element;
@@ -7468,7 +7487,7 @@ var require_cjs17 = __commonJS({
     });
     module2.exports = __toCommonJS2(element_exports);
     var import_tree = require_tree();
-    var import_create = __toESM2(require_create3(), 1);
+    var import_create = __toESM2(require_create4(), 1);
     var import_node = __toESM2(require_node2(), 1);
     var import_define3 = __toESM2(require_define(), 1);
     var import_update = __toESM2(require_update2(), 1);
@@ -7946,7 +7965,7 @@ var require_object5 = __commonJS({
       flattenRecursive: () => flattenRecursive,
       isEqualDeep: () => isEqualDeep2,
       map: () => map2,
-      merge: () => merge8,
+      merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
@@ -7976,7 +7995,7 @@ var require_object5 = __commonJS({
         obj[e] = exec5(extention[e], element);
       }
     };
-    var merge8 = (element, obj, excludeFrom = []) => {
+    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("__"))
@@ -8712,7 +8731,7 @@ var require_cjs20 = __commonJS({
       mod
     ));
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var require_cjs27 = __commonJS2({
+    var require_cjs25 = __commonJS2({
       "../../node_modules/@domql/globals/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
@@ -9164,7 +9183,7 @@ var require_cjs20 = __commonJS({
           flattenRecursive: () => flattenRecursive,
           isEqualDeep: () => isEqualDeep2,
           map: () => map2,
-          merge: () => merge52,
+          merge: () => merge5,
           mergeArrayExclude: () => mergeArrayExclude,
           mergeIfExisted: () => mergeIfExisted,
           objectToString: () => objectToString,
@@ -9194,7 +9213,7 @@ var require_cjs20 = __commonJS({
             obj[e] = exec5(extention[e], element);
           }
         };
-        var merge52 = (element, obj, excludeFrom = []) => {
+        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("__"))
@@ -9852,7 +9871,7 @@ var require_cjs20 = __commonJS({
         var isValidHtmlTag = (arg) => HTML_TAGS.body.includes(arg);
       }
     });
-    var require_cjs28 = __commonJS2({
+    var require_cjs26 = __commonJS2({
       "../../node_modules/@domql/utils/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
@@ -10034,8 +10053,8 @@ var require_cjs20 = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setVariables: () => setVariables
     });
-    var import_globals = __toESM2(require_cjs27(), 1);
-    var import_utils28 = __toESM2(require_cjs28(), 1);
+    var import_globals = __toESM2(require_cjs25(), 1);
+    var import_utils25 = __toESM2(require_cjs26(), 1);
     var ENV2 = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -10163,9 +10182,9 @@ var require_cjs20 = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils28.isString)(rgb))
+      if ((0, import_utils25.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils28.isNumber)(tone))
+      if ((0, import_utils25.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -10228,9 +10247,9 @@ var require_cjs20 = __commonJS({
       const keys = Object.keys(LIBRARY);
       return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
     };
-    var import_utils52 = __toESM2(require_cjs28(), 1);
-    var import_utils32 = __toESM2(require_cjs28());
-    var import_utils29 = __toESM2(require_cjs28());
+    var import_utils52 = __toESM2(require_cjs26(), 1);
+    var import_utils32 = __toESM2(require_cjs26());
+    var import_utils26 = __toESM2(require_cjs26());
     var toCamelCase2 = (str) => {
       return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
         return index === 0 ? word.toLowerCase() : word.toUpperCase();
@@ -10245,7 +10264,7 @@ var require_cjs20 = __commonJS({
       if ((0, import_utils32.isArray)(val))
         return val;
     };
-    var import_utils42 = __toESM2(require_cjs28(), 1);
+    var import_utils42 = __toESM2(require_cjs26(), 1);
     var defaultConfig_exports = {};
     __export2(defaultConfig_exports, {
       ANIMATION: () => ANIMATION2,
@@ -10606,7 +10625,7 @@ var require_cjs20 = __commonJS({
         return sequence[findLetter];
       });
     };
-    var import_utils72 = __toESM2(require_cjs28(), 1);
+    var import_utils72 = __toESM2(require_cjs26(), 1);
     var setVariables = (result, key) => {
       const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
@@ -10644,7 +10663,7 @@ var require_cjs20 = __commonJS({
         }
       }
     };
-    var import_utils82 = __toESM2(require_cjs28(), 1);
+    var import_utils82 = __toESM2(require_cjs26(), 1);
     var generateSprite = (icons) => {
       const CONFIG22 = getActiveConfig4();
       let sprite = "";
@@ -10731,7 +10750,7 @@ var require_cjs20 = __commonJS({
       setSVG: () => setSVG,
       setTheme: () => setTheme
     });
-    var import_utils92 = __toESM2(require_cjs28(), 1);
+    var import_utils92 = __toESM2(require_cjs26(), 1);
     var getColor3 = (value2, key, config) => {
       const CONFIG22 = config || getActiveConfig4();
       if (!(0, import_utils92.isString)(value2)) {
@@ -10862,7 +10881,7 @@ var require_cjs20 = __commonJS({
         value: val.value || val
       };
     };
-    var import_utils112 = __toESM2(require_cjs28(), 1);
+    var import_utils112 = __toESM2(require_cjs26(), 1);
     var setThemeValue = (theme) => {
       const value2 = {};
       const { state, media, helpers, ...rest } = theme;
@@ -11076,7 +11095,7 @@ var require_cjs20 = __commonJS({
       const r = recursiveTheme(value2);
       return r;
     };
-    var import_utils122 = __toESM2(require_cjs28(), 1);
+    var import_utils122 = __toESM2(require_cjs26(), 1);
     var setFont = (val, key) => {
       const CSSvar = `--font-${key}`;
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
@@ -11099,7 +11118,7 @@ var require_cjs20 = __commonJS({
       const str = `${value2.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
       return { var: CSSvar, value: str, arr: value2, type };
     };
-    var import_utils152 = __toESM2(require_cjs28(), 1);
+    var import_utils152 = __toESM2(require_cjs26(), 1);
     var runThroughMedia = (props6) => {
       const CONFIG22 = getActiveConfig4();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
@@ -11166,7 +11185,7 @@ var require_cjs20 = __commonJS({
         TYPOGRAPHY2
       );
     };
-    var import_utils182 = __toESM2(require_cjs28(), 1);
+    var import_utils182 = __toESM2(require_cjs26(), 1);
     var runThroughMedia2 = (sequenceProps) => {
       for (const prop in sequenceProps) {
         const mediaProps = sequenceProps[prop];
@@ -11288,7 +11307,7 @@ var require_cjs20 = __commonJS({
         TIMING2
       );
     };
-    var import_utils222 = __toESM2(require_cjs28(), 1);
+    var import_utils222 = __toESM2(require_cjs26(), 1);
     var applyDocument = () => {
       const CONFIG22 = getActiveConfig4();
       const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG22;
@@ -11299,7 +11318,7 @@ var require_cjs20 = __commonJS({
         lineHeight: TYPOGRAPHY2.lineHeight
       });
     };
-    var import_globals2 = __toESM2(require_cjs27(), 1);
+    var import_globals2 = __toESM2(require_cjs25(), 1);
     var DEF_OPTIONS = {
       document: import_globals2.document
     };
@@ -11372,7 +11391,7 @@ var require_cjs20 = __commonJS({
         }
       }
     };
-    var import_utils252 = __toESM2(require_cjs28(), 1);
+    var import_utils252 = __toESM2(require_cjs26(), 1);
     var applyReset = (reset = {}) => {
       const CONFIG22 = getActiveConfig4();
       const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG22;
@@ -11432,7 +11451,7 @@ var require_cjs20 = __commonJS({
         });
       }
     };
-    var import_utils262 = __toESM2(require_cjs28(), 1);
+    var import_utils262 = __toESM2(require_cjs26(), 1);
     var isBorderStyle = (str) => [
       "none",
       "hidden",
@@ -11531,9 +11550,9 @@ var require_cjs20 = __commonJS({
         return;
       return arr.map(transformTransition).join(",");
     };
-    var import_utils272 = __toESM2(require_cjs28(), 1);
+    var import_utils27 = __toESM2(require_cjs26(), 1);
     var setCases = (val, key) => {
-      if ((0, import_utils272.isFunction)(val))
+      if ((0, import_utils27.isFunction)(val))
         return val();
       return val;
     };
@@ -11752,8 +11771,8 @@ var require_cjs22 = __commonJS({
       router: () => router2
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils28 = require_cjs19();
-    var getActiveRoute = (level = 0, route = import_utils28.window.location.pathname) => {
+    var import_utils25 = require_cjs19();
+    var getActiveRoute = (level = 0, route = import_utils25.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -11767,7 +11786,7 @@ var require_cjs22 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils28.document && import_utils28.document.documentElement,
+      scrollNode: import_utils25.document && import_utils25.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -11782,13 +11801,13 @@ var require_cjs22 = __commonJS({
       const route = getActiveRoute(options.level, pathname);
       const content = element.routes[route || "/"] || element.routes["/*"];
       const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
-      const hashChanged = hash2 && hash2 !== import_utils28.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils25.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils28.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils25.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -11814,7 +11833,7 @@ var require_cjs22 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils28.document.getElementById(hash2);
+        const activeNode = import_utils25.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -11829,780 +11848,47 @@ var require_cjs22 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/ignore.js
-var require_ignore3 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/ignore.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 });
+// ../../node_modules/moment/moment.js
+var require_moment = __commonJS({
+  "../../node_modules/moment/moment.js"(exports, module2) {
+    (function(global, factory) {
+      typeof exports === "object" && typeof module2 !== "undefined" ? module2.exports = factory() : typeof define === "function" && define.amd ? define(factory) : global.moment = factory();
+    })(exports, function() {
+      "use strict";
+      var hookCallback;
+      function hooks() {
+        return hookCallback.apply(null, arguments);
       }
-      return to;
-    };
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var ignore_exports = {};
-    __export2(ignore_exports, {
-      IGNORE_STATE_PARAMS: () => IGNORE_STATE_PARAMS
-    });
-    module2.exports = __toCommonJS2(ignore_exports);
-    var IGNORE_STATE_PARAMS = [
-      "update",
-      "parse",
-      "clean",
-      "create",
-      "destroy",
-      "add",
-      "toggle",
-      "remove",
-      "apply",
-      "set",
-      "rootUpdate",
-      "parentUpdate",
-      "parent",
-      "__element",
-      "__depends",
-      "__ref",
-      "__children",
-      "__root"
-    ];
-  }
-});
-
-// ../../node_modules/@domql/event/dist/cjs/on.js
-var require_on3 = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/on.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 });
+      function setHookCallback(callback) {
+        hookCallback = callback;
       }
-      return to;
-    };
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var on_exports = {};
-    __export2(on_exports, {
-      applyEvent: () => applyEvent,
-      applyEventUpdate: () => applyEventUpdate,
-      applyEventsOnNode: () => applyEventsOnNode,
-      triggerEventOn: () => triggerEventOn,
-      triggerEventOnUpdate: () => triggerEventOnUpdate
-    });
-    module2.exports = __toCommonJS2(on_exports);
-    var import_utils28 = require_cjs19();
-    var applyEvent = (param, element, state, context, options) => {
-      return param(element, state || element.state, context || element.context, options);
-    };
-    var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils28.isFunction)(element.on[param])) {
-        const { state, context } = element;
-        return applyEvent(element.on[param], element, state, context, options);
+      function isArray8(input) {
+        return input instanceof Array || Object.prototype.toString.call(input) === "[object Array]";
       }
-    };
-    var applyEventUpdate = (param, updatedObj, element, state, context, options) => {
-      return param(updatedObj, element, state || element.state, context || element.context, options);
-    };
-    var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils28.isFunction)(element.on[param])) {
-        const { state, context } = element;
-        return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
+      function isObject14(input) {
+        return input != null && Object.prototype.toString.call(input) === "[object Object]";
       }
-    };
-    var applyEventsOnNode = (element) => {
-      const { node: node2, on: on2 } = element;
-      for (const param in on2) {
-        if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
-          continue;
-        const appliedFunction = element.on[param];
-        if ((0, import_utils28.isFunction)(appliedFunction)) {
-          const { state, context } = element;
-          node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
+      function hasOwnProp(a, b) {
+        return Object.prototype.hasOwnProperty.call(a, b);
+      }
+      function isObjectEmpty(obj) {
+        if (Object.getOwnPropertyNames) {
+          return Object.getOwnPropertyNames(obj).length === 0;
+        } else {
+          var k;
+          for (k in obj) {
+            if (hasOwnProp(obj, k)) {
+              return false;
+            }
+          }
+          return true;
         }
       }
-    };
-  }
-});
-
-// ../../node_modules/@domql/event/dist/cjs/can.js
-var require_can3 = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/can.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 });
+      function isUndefined3(input) {
+        return input === void 0;
       }
-      return to;
-    };
-    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var can_exports = {};
-    __export2(can_exports, {
-      canRender: () => canRender
-    });
-    module2.exports = __toCommonJS2(can_exports);
-    var import_report = require_cjs21();
-    var import_utils28 = require_cjs19();
-    var canRender = (element) => {
-      const tag = element.tag || "div";
-      return (0, import_utils28.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
-    };
-  }
-});
-
-// ../../node_modules/@domql/event/dist/cjs/index.js
-var require_cjs23 = __commonJS({
-  "../../node_modules/@domql/event/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 event_exports = {};
-    module2.exports = __toCommonJS2(event_exports);
-    __reExport2(event_exports, require_on3(), module2.exports);
-    __reExport2(event_exports, require_can3(), module2.exports);
-  }
-});
-
-// ../../node_modules/@domql/state/dist/cjs/methods.js
-var require_methods4 = __commonJS({
-  "../../node_modules/@domql/state/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, {
-      add: () => add,
-      apply: () => apply,
-      clean: () => clean,
-      destroy: () => destroy,
-      parentUpdate: () => parentUpdate,
-      parse: () => parse3,
-      remove: () => remove,
-      rootUpdate: () => rootUpdate,
-      set: () => set5,
-      toggle: () => toggle
-    });
-    module2.exports = __toCommonJS2(methods_exports);
-    var import_utils28 = require_cjs19();
-    var import_ignore = require_ignore3();
-    var parse3 = function() {
-      const state = this;
-      if ((0, import_utils28.isObject)(state)) {
-        const obj = {};
-        for (const param in state) {
-          if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
-            obj[param] = state[param];
-          }
-        }
-        return obj;
-      } else if ((0, import_utils28.isArray)(state)) {
-        return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
-      }
-    };
-    var clean = function(options = {}) {
-      const state = this;
-      for (const param in state) {
-        if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
-          delete state[param];
-        }
-      }
-      if (!options.preventStateUpdate) {
-        state.update(state, { replace: true, options });
-      }
-      return state;
-    };
-    var destroy = function(options = {}) {
-      const state = this;
-      const element = state.__element;
-      const stateKey = element.__ref.__state;
-      if ((0, import_utils28.isString)(stateKey)) {
-        element.parent.state.remove(stateKey, { isHoisted: true, ...options });
-        return element.state;
-      }
-      delete element.state;
-      element.state = state.parent;
-      if (state.parent) {
-        delete state.parent.__children[element.key];
-      }
-      if (state.__children) {
-        for (const key in state.__children) {
-          const child = state.__children[key];
-          if (child.state) {
-            child.parent = state.parent;
-          }
-        }
-      }
-      element.state.update({}, { isHoisted: true, ...options });
-      return element.state;
-    };
-    var parentUpdate = function(obj, options = {}) {
-      const state = this;
-      if (!state || !state.parent)
-        return;
-      return state.parent.update(obj, { isHoisted: true, ...options });
-    };
-    var rootUpdate = function(obj, options = {}) {
-      const state = this;
-      if (!state)
-        return;
-      const rootState = state.__element.__ref.__root.state;
-      return rootState.update(obj, { isHoisted: false, options });
-    };
-    var add = function(value2, options = {}) {
-      const state = this;
-      if ((0, import_utils28.isArray)(state)) {
-        state.push(value2);
-        state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils28.isObject)(state)) {
-        const key = Object.keys(state).length;
-        state.update({ [key]: value2 }, options);
-      }
-    };
-    var toggle = function(key, options = {}) {
-      const state = this;
-      state.update({ [key]: !state[key] }, options);
-    };
-    var remove = function(key, options = {}) {
-      const state = this;
-      if ((0, import_utils28.isArray)(state))
-        (0, import_utils28.removeFromArray)(state, key);
-      if ((0, import_utils28.isObject)(state))
-        (0, import_utils28.removeFromObject)(state, key);
-      return state.update(state.parse(), { replace: true, ...options });
-    };
-    var set5 = function(value2, options = {}) {
-      const state = this;
-      return state.clean({ preventStateUpdate: true }).update(value2, { replace: true, ...options });
-    };
-    var apply = function(func, options = {}) {
-      const state = this;
-      if ((0, import_utils28.isFunction)(func)) {
-        func(state);
-        return state.update(state, { replace: true, ...options });
-      }
-    };
-  }
-});
-
-// ../../node_modules/@domql/state/dist/cjs/inherit.js
-var require_inherit3 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/inherit.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 inherit_exports = {};
-    __export2(inherit_exports, {
-      checkIfInherits: () => checkIfInherits,
-      createChangesByKey: () => createChangesByKey,
-      createInheritedState: () => createInheritedState,
-      findInheritedState: () => findInheritedState,
-      getChildStateInKey: () => getChildStateInKey3,
-      getParentStateInKey: () => getParentStateInKey,
-      isState: () => isState3
-    });
-    module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils28 = require_cjs19();
-    var import_ignore = require_ignore3();
-    var getParentStateInKey = (stateKey, parentState) => {
-      if (!stateKey.includes("../"))
-        return;
-      const arr = stateKey.split("../");
-      const arrLength = arr.length - 1;
-      for (let i2 = 0; i2 < arrLength; i2++) {
-        if (!parentState.parent)
-          return null;
-        parentState = parentState.parent;
-      }
-      return parentState;
-    };
-    var getChildStateInKey3 = (stateKey, parentState, options = {}) => {
-      const arr = stateKey.split("/");
-      const arrLength = arr.length - 1;
-      for (let i2 = 0; i2 < arrLength; i2++) {
-        const childKey = arr[i2];
-        const grandChildKey = arr[i2 + 1];
-        if (childKey === "__proto__" || grandChildKey === "__proto__")
-          return;
-        let childInParent = parentState[childKey];
-        if (!childInParent)
-          childInParent = parentState[childKey] = {};
-        if (!childInParent[grandChildKey])
-          childInParent[grandChildKey] = {};
-        stateKey = grandChildKey;
-        parentState = childInParent;
-      }
-      if (options.returnParent)
-        return parentState;
-      return parentState[stateKey];
-    };
-    var findInheritedState = (element, parent, options = {}) => {
-      const ref = element.__ref;
-      let stateKey = ref.__state;
-      if (!checkIfInherits(element))
-        return;
-      let parentState = parent.state;
-      const findGrandParentState = getParentStateInKey(stateKey, parent.state);
-      if (findGrandParentState) {
-        parentState = findGrandParentState;
-        stateKey = stateKey.replaceAll("../", "");
-      }
-      if (!parentState)
-        return;
-      return getChildStateInKey3(stateKey, parentState, options);
-    };
-    var createInheritedState = (element, parent) => {
-      const ref = element.__ref;
-      const inheritedState = findInheritedState(element, parent);
-      if (!inheritedState)
-        return element.state;
-      if ((0, import_utils28.is)(inheritedState)("object", "array")) {
-        return (0, import_utils28.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils28.is)(inheritedState)("string", "number")) {
-        ref.__stateType = "string";
-        return { value: inheritedState };
-      }
-      console.warn(ref.__state, "is not present. Replacing with", {});
-    };
-    var checkIfInherits = (element) => {
-      const ref = element.__ref;
-      const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils28.isNot)(stateKey)("number", "string"))
-        return false;
-      return true;
-    };
-    var isState3 = function(state) {
-      if (!(0, import_utils28.isObjectLike)(state))
-        return false;
-      return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.add && state.apply && state.__element && state.__children;
-    };
-    var createChangesByKey = (path, value2) => {
-      if (!path) {
-        return value2 || {};
-      }
-      const keys = path.split("/");
-      const obj = {};
-      let ref = obj;
-      keys.forEach((key, index) => {
-        ref[key] = index === keys.length - 1 ? value2 || {} : {};
-        ref = ref[key];
-      });
-      return obj;
-    };
-  }
-});
-
-// ../../node_modules/@domql/state/dist/cjs/updateState.js
-var require_updateState2 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/updateState.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 updateState_exports = {};
-    __export2(updateState_exports, {
-      updateState: () => updateState
-    });
-    module2.exports = __toCommonJS2(updateState_exports);
-    var import_report = require_cjs21();
-    var import_event = require_cjs23();
-    var import_ignore = require_ignore3();
-    var import_utils28 = require_cjs19();
-    var import_inherit = require_inherit3();
-    var STATE_UPDATE_OPTIONS = {
-      overwrite: true,
-      preventHoistElementUpdate: false,
-      updateByState: true,
-      execStateFunction: true,
-      isHoisted: true,
-      stateFunctionOverwrite: true
-    };
-    var updateState = function(obj, options = STATE_UPDATE_OPTIONS) {
-      const state = this;
-      const element = state.__element;
-      if (!options.updateByState)
-        (0, import_utils28.merge)(options, STATE_UPDATE_OPTIONS);
-      if (!state.__element)
-        (0, import_report.report)("ElementOnStateIsNotDefined");
-      if (options.preventInheritAtCurrentState === true) {
-        options.preventInheritAtCurrentState = state;
-      } else if (options.preventInheritAtCurrentState)
-        return;
-      if (!options.preventInitStateUpdateListener) {
-        const initStateUpdateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdated", obj, element, options);
-        if (initStateUpdateReturns === false)
-          return element;
-      }
-      applyOverwrite(state, obj, options);
-      const updateIsHoisted = hoistStateUpdate(state, obj, options);
-      if (updateIsHoisted)
-        return state;
-      updateDependentState(state, obj, options);
-      applyElementUpdate(state, obj, options);
-      if (!options.preventStateUpdateListener) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
-      }
-      return state;
-    };
-    var applyOverwrite = (state, obj, options) => {
-      const { overwrite } = options;
-      if (!overwrite)
-        return;
-      const shallow = overwrite === "shallow";
-      const merge22 = overwrite === "merge";
-      if (merge22) {
-        (0, import_utils28.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
-        return;
-      }
-      const overwriteFunc = shallow ? import_utils28.overwriteShallow : import_utils28.overwriteDeep;
-      overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
-    };
-    var hoistStateUpdate = (state, obj, options) => {
-      const element = state.__element;
-      const { parent, __ref: ref } = element;
-      const stateKey = ref.__state;
-      if (!stateKey)
-        return;
-      const asksForInherit = (0, import_inherit.checkIfInherits)(element);
-      const inheritedState = (0, import_inherit.findInheritedState)(element, parent, { returnParent: true });
-      const shouldPropagateState = asksForInherit && inheritedState && !options.stopStatePropagation;
-      if (!shouldPropagateState)
-        return;
-      const isStringState = ref.__stateType === "string";
-      const value2 = isStringState ? state.value : state.parse();
-      const passedValue = isStringState ? state.value : obj;
-      const findGrandParentState = (0, import_inherit.getParentStateInKey)(stateKey, parent.state);
-      const changesValue = (0, import_inherit.createChangesByKey)(stateKey, passedValue);
-      const targetParent = findGrandParentState || parent.state;
-      if (options.replace)
-        targetParent[stateKey] = value2;
-      targetParent.update(changesValue, {
-        execStateFunction: false,
-        stateFunctionOverwrite: false,
-        isHoisted: true,
-        ...options,
-        preventUpdate: options.preventHoistElementUpdate,
-        overwrite: !options.replace
-      });
-      const hasNotUpdated = options.preventUpdate !== true || !options.preventHoistElementUpdate;
-      if (!options.preventStateUpdateListener && hasNotUpdated) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
-      }
-      return true;
-    };
-    var updateDependentState = (state, obj, options) => {
-      if (!state.__depends)
-        return;
-      for (const el in state.__depends) {
-        const dependentState = state.__depends[el];
-        dependentState.clean().update(state.parse(), options);
-      }
-    };
-    var applyElementUpdate = (state, obj, options) => {
-      const element = state.__element;
-      if (options.preventUpdate !== true) {
-        element.update({}, {
-          ...options,
-          updateByState: true
-        });
-      } else if (options.preventUpdate === "recursive") {
-        element.update({}, {
-          ...options,
-          isHoisted: false,
-          updateByState: true,
-          preventUpdate: true
-        });
-      }
-    };
-  }
-});
-
-// ../../node_modules/@domql/state/dist/cjs/createState.js
-var require_createState2 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/createState.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 createState_exports = {};
-    __export2(createState_exports, {
-      createState: () => createState
-    });
-    module2.exports = __toCommonJS2(createState_exports);
-    var import_event = require_cjs23();
-    var import_utils28 = require_cjs19();
-    var import_ignore = require_ignore3();
-    var import_methods = require_methods4();
-    var import_updateState = require_updateState2();
-    var import_inherit = require_inherit3();
-    var createState = function(element, parent, options) {
-      const skipApplyMethods = Boolean(options && options.skipApplyMethods);
-      const objectizeState = checkForTypes(element);
-      if (objectizeState === false)
-        return parent.state || {};
-      else
-        element.state = (0, import_utils28.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
-      const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
-      if (whatInitReturns === false)
-        return element.state;
-      if ((0, import_inherit.checkIfInherits)(element)) {
-        const inheritedState = (0, import_inherit.createInheritedState)(element, parent);
-        element.state = inheritedState || {};
-      }
-      const dependentState = applyDependentState(element, element.state);
-      if (dependentState)
-        element.state = dependentState;
-      if (skipApplyMethods) {
-        if (element.parent && element.parent.state) {
-          element.state.parent = element.parent.state;
-        } else {
-          element.state.parent = {};
-        }
-        return element.state;
-      }
-      applyMethods(element);
-      (0, import_event.triggerEventOn)("stateCreated", element);
-      return element.state;
-    };
-    var applyDependentState = (element, state) => {
-      const { __ref: ref } = state;
-      if (!ref)
-        return;
-      const dependentState = (0, import_utils28.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
-      const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils28.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
-      return dependentState;
-    };
-    var checkForTypes = (element) => {
-      const { state, __ref: ref } = element;
-      if ((0, import_utils28.isFunction)(state)) {
-        ref.__state = state;
-        return (0, import_utils28.exec)(state, element);
-      }
-      if ((0, import_utils28.is)(state)("string", "number")) {
-        ref.__state = state;
-        return {};
-      }
-      if (state === true) {
-        ref.__state = element.key;
-        return {};
-      }
-      if (state) {
-        ref.__hasRootState = true;
-        return state;
-      }
-      return false;
-    };
-    var addProtoToArray = (state, proto) => {
-      for (const key in proto) {
-        Object.defineProperty(state, key, {
-          value: proto[key],
-          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
-        });
-      }
-    };
-    var applyMethods = (element) => {
-      const state = element.state;
-      const ref = element.__ref;
-      const proto = {
-        clean: import_methods.clean.bind(state),
-        parse: import_methods.parse.bind(state),
-        destroy: import_methods.destroy.bind(state),
-        update: import_updateState.updateState.bind(state),
-        rootUpdate: import_methods.rootUpdate.bind(state),
-        parentUpdate: import_methods.parentUpdate.bind(state),
-        create: createState.bind(state),
-        add: import_methods.add.bind(state),
-        toggle: import_methods.toggle.bind(state),
-        remove: import_methods.remove.bind(state),
-        apply: import_methods.apply.bind(state),
-        set: import_methods.set.bind(state),
-        parent: element.parent.state,
-        __element: element,
-        __children: {},
-        __root: ref.__root ? ref.__root.state : state
-      };
-      if ((0, import_utils28.isArray)(state)) {
-        addProtoToArray(state, proto);
-      } else {
-        Object.setPrototypeOf(state, proto);
-      }
-      if (state.parent)
-        state.parent.__children[element.key] = state;
-    };
-  }
-});
-
-// ../../node_modules/@domql/state/dist/cjs/index.js
-var require_cjs24 = __commonJS({
-  "../../node_modules/@domql/state/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 state_exports = {};
-    module2.exports = __toCommonJS2(state_exports);
-    __reExport2(state_exports, require_ignore3(), module2.exports);
-    __reExport2(state_exports, require_createState2(), module2.exports);
-    __reExport2(state_exports, require_updateState2(), module2.exports);
-    __reExport2(state_exports, require_methods4(), module2.exports);
-    __reExport2(state_exports, require_inherit3(), module2.exports);
-  }
-});
-
-// ../../node_modules/moment/moment.js
-var require_moment = __commonJS({
-  "../../node_modules/moment/moment.js"(exports, module2) {
-    (function(global, factory) {
-      typeof exports === "object" && typeof module2 !== "undefined" ? module2.exports = factory() : typeof define === "function" && define.amd ? define(factory) : global.moment = factory();
-    })(exports, function() {
-      "use strict";
-      var hookCallback;
-      function hooks() {
-        return hookCallback.apply(null, arguments);
-      }
-      function setHookCallback(callback) {
-        hookCallback = callback;
-      }
-      function isArray8(input) {
-        return input instanceof Array || Object.prototype.toString.call(input) === "[object Array]";
-      }
-      function isObject14(input) {
-        return input != null && Object.prototype.toString.call(input) === "[object Object]";
-      }
-      function hasOwnProp(a, b) {
-        return Object.prototype.hasOwnProperty.call(a, b);
-      }
-      function isObjectEmpty(obj) {
-        if (Object.getOwnPropertyNames) {
-          return Object.getOwnPropertyNames(obj).length === 0;
-        } else {
-          var k;
-          for (k in obj) {
-            if (hasOwnProp(obj, k)) {
-              return false;
-            }
-          }
-          return true;
-        }
-      }
-      function isUndefined3(input) {
-        return input === void 0;
-      }
-      function isNumber2(input) {
-        return typeof input === "number" || Object.prototype.toString.call(input) === "[object Number]";
+      function isNumber2(input) {
+        return typeof input === "number" || Object.prototype.toString.call(input) === "[object Number]";
       }
       function isDate(input) {
         return input instanceof Date || Object.prototype.toString.call(input) === "[object Date]";
@@ -16742,7 +16028,7 @@ var require_headless_datepicker = __commonJS({
 });
 
 // ../../node_modules/@domql/globals/dist/cjs/index.js
-var require_cjs25 = __commonJS({
+var require_cjs23 = __commonJS({
   "../../node_modules/@domql/globals/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
@@ -16778,7 +16064,7 @@ var require_cjs25 = __commonJS({
 });
 
 // ../fetch/dist/cjs/index.js
-var require_cjs26 = __commonJS({
+var require_cjs24 = __commonJS({
   "../fetch/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __create2 = Object.create;
@@ -16817,7 +16103,7 @@ var require_cjs26 = __commonJS({
     });
     module2.exports = __toCommonJS2(fetch_exports);
     var utils2 = __toESM2(require_cjs19(), 1);
-    var globals2 = __toESM2(require_cjs25(), 1);
+    var globals2 = __toESM2(require_cjs23(), 1);
     var { overwriteDeep, deepDestringify } = utils2;
     var { window: window4 } = globals2;
     var IS_DEVELOPMENT = window4 && window4.location ? window4.location.host.includes("dev.") || window4.location.host.includes("symbo.ls") : true;
@@ -16884,7 +16170,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_domql = __toESM(require_cjs18(), 1);
-var import_utils27 = __toESM(require_cjs19(), 1);
+var import_utils24 = __toESM(require_cjs19(), 1);
 
 // src/utilImports.js
 var utilImports_exports = {};
@@ -18200,7 +17486,7 @@ var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
   }
 };
 
-// ../emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
+// ../../node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
 function insertWithoutScoping(cache2, serialized) {
   if (cache2.inserted[serialized.name] === void 0) {
     return cache2.insert("", serialized, cache2.sheet, true);
@@ -18407,6 +17693,8 @@ __export(domql_exports, {
   Button: () => Button,
   ButtonSet: () => ButtonSet,
   Caption: () => Caption,
+  Card: () => Card,
+  Chat: () => Chat,
   CheckBoxWithLabel: () => CheckBoxWithLabel,
   Checkbox: () => Checkbox,
   Circle: () => Circle,
@@ -18483,6 +17771,7 @@ __export(domql_exports, {
   Subhead: () => Subhead,
   Svg: () => Svg,
   Tab: () => Tab,
+  Table: () => Table,
   Text: () => Text,
   Textarea: () => Textarea,
   Theme: () => Theme,
@@ -18502,6 +17791,7 @@ __export(domql_exports, {
   UploadModalLabel: () => UploadModalLabel,
   UploadProgress: () => UploadProgress,
   UploadResult: () => UploadResult,
+  User: () => User,
   Video: () => Video,
   XYZ: () => XYZ,
   calendar: () => calendar,
@@ -19369,7 +18659,7 @@ var Overflow = {
 };
 
 // ../../uikit/domql/Atoms/Collection.js
-var import_state = __toESM(require_cjs24());
+var import_state = __toESM(require_cjs6());
 var import_utils6 = __toESM(require_cjs19());
 var Collection = {
   define: {
@@ -21005,159 +20295,45 @@ var depth2 = {
 };
 
 // ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/InteractiveComponent.js
-var Focusable2 = {
-  props: {
-    border: "none",
-    outline: "solid, 0, blue .3",
-    ":focus-visible": {
-      opacity: 1,
-      outline: "solid, X, blue .3"
-    }
-  },
-  attr: {
-    placeholder: ({ props: props6 }) => props6.placeholder,
-    tabIndex: ({ props: props6 }) => props6.tabIndex
-  }
-};
-
-// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Collection.js
-var import_state2 = __toESM(require_cjs24());
-var import_utils12 = __toESM(require_cjs19());
-
-// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Position.js
-var import_scratch17 = __toESM(require_cjs20());
-
-// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Shape/index.js
-var import_utils13 = __toESM(require_cjs19());
-var import_scratch18 = __toESM(require_cjs20());
-
-// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Text.js
-var import_scratch19 = __toESM(require_cjs20());
-
-// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Animation.js
-var import_scratch20 = __toESM(require_cjs20());
-var import_utils15 = __toESM(require_cjs19());
-
-// ../../uikit/domql/Field/node_modules/@symbo.ls/emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping2(cache2, serialized) {
-  if (cache2.inserted[serialized.name] === void 0) {
-    return cache2.insert("", serialized, cache2.sheet, true);
-  }
-}
-function merge4(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-  return rawClassName + css(registeredStyles);
-}
-var createEmotion4 = function createEmotion5(options) {
-  var cache2 = createCache(options);
-  cache2.sheet.speedy = function(value2) {
-    if (this.ctr !== 0) {
-      throw new Error("speedy must be changed before any rules are inserted");
-    }
-    this.isSpeedy = value2;
-  };
-  cache2.compat = true;
-  var css = function css2() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    var serialized = serializeStyles(args, cache2.registered, void 0);
-    insertStyles(cache2, serialized, false);
-    return cache2.key + "-" + serialized.name;
-  };
-  var keyframes3 = function keyframes4() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    var animation = "animation-" + serialized.name;
-    insertWithoutScoping2(cache2, {
-      name: serialized.name,
-      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-    });
-    return animation;
-  };
-  var injectGlobal = function injectGlobal2() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    insertWithoutScoping2(cache2, serialized);
-  };
-  var cx = function cx2() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-    return merge4(cache2.registered, css, classnames3(args));
-  };
-  return {
-    css,
-    cx,
-    injectGlobal,
-    keyframes: keyframes3,
-    hydrate: function hydrate(ids) {
-      ids.forEach(function(key) {
-        cache2.inserted[key] = true;
-      });
-    },
-    flush: function flush() {
-      cache2.registered = {};
-      cache2.inserted = {};
-      cache2.sheet.flush();
-    },
-    // $FlowFixMe
-    sheet: cache2.sheet,
-    cache: cache2,
-    getRegisteredStyles: getRegisteredStyles.bind(null, cache2.registered),
-    merge: merge4.bind(null, cache2.registered, css)
-  };
-};
-var classnames3 = function classnames4(args) {
-  var cls = "";
-  for (var i2 = 0; i2 < args.length; i2++) {
-    var arg = args[i2];
-    if (arg == null)
-      continue;
-    var toAdd = void 0;
-    switch (typeof arg) {
-      case "boolean":
-        break;
-      case "object": {
-        if (Array.isArray(arg)) {
-          toAdd = classnames4(arg);
-        } else {
-          toAdd = "";
-          for (var k in arg) {
-            if (arg[k] && k) {
-              toAdd && (toAdd += " ");
-              toAdd += k;
-            }
-          }
-        }
-        break;
-      }
-      default: {
-        toAdd = arg;
-      }
-    }
-    if (toAdd) {
-      cls && (cls += " ");
-      cls += toAdd;
+var Focusable2 = {
+  props: {
+    border: "none",
+    outline: "solid, 0, blue .3",
+    ":focus-visible": {
+      opacity: 1,
+      outline: "solid, X, blue .3"
     }
+  },
+  attr: {
+    placeholder: ({ props: props6 }) => props6.placeholder,
+    tabIndex: ({ props: props6 }) => props6.tabIndex
   }
-  return cls;
 };
 
+// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Collection.js
+var import_state2 = __toESM(require_cjs6());
+var import_utils12 = __toESM(require_cjs19());
+
+// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Position.js
+var import_scratch17 = __toESM(require_cjs20());
+
+// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Shape/index.js
+var import_utils13 = __toESM(require_cjs19());
+var import_scratch18 = __toESM(require_cjs20());
+
+// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Text.js
+var import_scratch19 = __toESM(require_cjs20());
+
+// ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Animation.js
+var import_scratch20 = __toESM(require_cjs20());
+var import_utils14 = __toESM(require_cjs19());
+
 // ../../uikit/domql/Field/node_modules/@symbo.ls/emotion/index.js
-var createEmotion6 = (key = "smbls", container) => {
+var createEmotion4 = (key = "smbls", container) => {
   const cleanKey = key.replaceAll(/\./g, "-");
-  return createEmotion4({ key: cleanKey, container });
+  return createEmotion({ key: cleanKey, container });
 };
-var emotion2 = createEmotion6();
+var emotion2 = createEmotion4();
 
 // ../../uikit/domql/Field/node_modules/@symbo.ls/atoms/Animation.js
 var { keyframes: keyframes2 } = emotion2;
@@ -21218,7 +20394,7 @@ var Video = {
 };
 
 // ../../uikit/domql/Range/index.js
-var import_utils16 = __toESM(require_cjs19());
+var import_utils15 = __toESM(require_cjs19());
 var import_scratch21 = __toESM(require_cjs20());
 var props4 = {
   appearance: "none",
@@ -21286,7 +20462,7 @@ var Range = {
 };
 var listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop];
-  const r = (0, import_utils16.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils15.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
   return r + "";
 };
 var RangeWithButtons = {
@@ -21295,7 +20471,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils16.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils15.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   },
@@ -21316,8 +20492,8 @@ var RangeWithButtons = {
       step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils16.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
-      change: (ev, el, s) => el.props && (0, import_utils16.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
+      input: (ev, el, s) => el.props && (0, import_utils15.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
+      change: (ev, el, s) => el.props && (0, import_utils15.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
     }
   },
   plus: {
@@ -21325,7 +20501,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils16.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
+        el.props && (0, import_utils15.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
       }
     }
   }
@@ -21352,7 +20528,7 @@ var style_default = {
 
 // ../../uikit/domql/Slider/index.js
 var import_scratch22 = __toESM(require_cjs20());
-var import_utils17 = __toESM(require_cjs19());
+var import_utils16 = __toESM(require_cjs19());
 (0, import_scratch22.set)({
   theme: {
     sliderThumb: {
@@ -21384,7 +20560,7 @@ var RangeSlider = {
 };
 var listenProp2 = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
-  const r = ((0, import_utils17.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+  const r = ((0, import_utils16.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
   return r;
 };
 var Slider = {
@@ -21395,10 +20571,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils17.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils16.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props6 = input.props;
-        const value2 = (0, import_utils17.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value2 = (0, import_utils16.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value2;
       }
     }
@@ -21421,8 +20597,8 @@ var Slider = {
       step: (el, s) => listenProp2(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils17.isFunction)(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils17.isFunction)(el.props.change) && el.props.change(ev, el, s)
+      input: (ev, el, s) => el.props && (0, import_utils16.isFunction)(el.props.input) && el.props.input(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils16.isFunction)(el.props.change) && el.props.change(ev, el, s)
     }
   },
   button1: {
@@ -21432,10 +20608,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils17.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils16.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props6 = input.props;
-        const value2 = (0, import_utils17.isFunction)(props6.value) ? props6.value() : props6.value;
+        const value2 = (0, import_utils16.isFunction)(props6.value) ? props6.value() : props6.value;
         input.node.value = value2;
       }
     }
@@ -21845,8 +21021,8 @@ var Pills = {
       }
     }),
     on: {
-      click: (e, el, s) => {
-        s.update({ active: parseInt(el.key) });
+      click: (e, el) => {
+        el.state.update({ active: parseInt(el.key) });
       }
     }
   },
@@ -22030,6 +21206,20 @@ var Steps = {
   $setPropsCollection: ({ props: props6 }) => props6.options
 };
 
+// ../../uikit/domql/Table/index.js
+var Table = {};
+
+// ../../uikit/domql/Chat/index.js
+var Chat = {
+  text: "chat here"
+};
+
+// ../../uikit/domql/Card/index.js
+var Card = {};
+
+// ../../uikit/domql/User/index.js
+var User = {};
+
 // src/define.js
 var defaultDefine = {
   routes: (param) => param,
@@ -22054,26 +21244,26 @@ var defaultDefine = {
 
 // src/router.js
 var import_router2 = __toESM(require_cjs22(), 1);
-var import_utils18 = __toESM(require_cjs19(), 1);
+var import_utils17 = __toESM(require_cjs19(), 1);
 var DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
   injectRouterInLinkComponent: true,
   popState: true
 };
 var initRouter = (element, options) => {
-  let routerOptions = (0, import_utils18.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
+  let routerOptions = (0, import_utils17.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
   if (routerOptions === false)
     return;
   if (routerOptions === true)
     routerOptions = DEFAULT_ROUTING_OPTIONS;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash: hash2 } = import_utils18.window.location;
+    const { pathname, hash: hash2 } = import_utils17.window.location;
     const url2 = pathname + hash2;
     if (el.routes)
       router2(url2, el, {}, { initialRender: true });
   };
-  const hasRenderRouter = element.on && !(0, import_utils18.isUndefined)(element.on.renderRouter);
+  const hasRenderRouter = element.on && !(0, import_utils17.isUndefined)(element.on.renderRouter);
   if (routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault;
@@ -22095,21 +21285,21 @@ var popStateRouter = (element, options) => {
   if (!routerOptions.popState)
     return;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
-  import_utils18.window.onpopstate = (e) => {
-    const { pathname, hash: hash2 } = import_utils18.window.location;
+  import_utils17.window.onpopstate = (e) => {
+    const { pathname, hash: hash2 } = import_utils17.window.location;
     const url2 = pathname + hash2;
     router2(url2, element, {}, { pushState: false, level: 0 });
   };
 };
 var injectRouterInLinkComponent = (routerOptions) => {
   if (routerOptions.injectRouterInLinkComponent) {
-    return (0, import_utils18.deepMerge)(Link, RouterLink);
+    return (0, import_utils17.deepMerge)(Link, RouterLink);
   }
 };
 
 // src/ferchOnCreate.js
-var import_utils19 = __toESM(require_cjs19(), 1);
-var import_fetch = __toESM(require_cjs26(), 1);
+var import_utils18 = __toESM(require_cjs19(), 1);
+var import_fetch = __toESM(require_cjs24(), 1);
 var fetchSync = async (key, options) => {
   if (key && options.editor) {
     try {
@@ -22124,10 +21314,10 @@ var fetchAsync = (app, key, options, callback) => {
   if (key && options.editor) {
     try {
       const defaultCallback = (data) => {
-        if ((0, import_utils19.isObject)(data.designsystem)) {
+        if ((0, import_utils18.isObject)(data.designsystem)) {
           options.utils.init(data.designsystem);
         }
-        if ((0, import_utils19.isObject)(data.state)) {
+        if ((0, import_utils18.isObject)(data.state)) {
           app.state.set(data.state);
         }
       };
@@ -22140,10 +21330,10 @@ var fetchAsync = (app, key, options, callback) => {
 };
 
 // ../../node_modules/@domql/emotion/index.js
-var import_utils22 = __toESM(require_cjs19());
+var import_utils20 = __toESM(require_cjs19());
 
 // ../../node_modules/@domql/classlist/index.js
-var import_utils20 = __toESM(require_cjs19());
+var import_utils19 = __toESM(require_cjs19());
 var classify = (obj, element) => {
   let className = "";
   for (const item in obj) {
@@ -22153,7 +21343,7 @@ var classify = (obj, element) => {
     else if (typeof param === "string")
       className += ` ${param}`;
     else if (typeof param === "function") {
-      className += ` ${(0, import_utils20.exec)(param, element)}`;
+      className += ` ${(0, import_utils19.exec)(param, element)}`;
     }
   }
   return className;
@@ -22164,9 +21354,9 @@ var classList = (params, element) => {
   const { key } = element;
   if (params === true)
     params = element.class = { key };
-  if ((0, import_utils20.isString)(params))
+  if ((0, import_utils19.isString)(params))
     params = element.class = { default: params };
-  if ((0, import_utils20.isObject)(params))
+  if ((0, import_utils19.isObject)(params))
     params = classify(params, element);
   const className = params.replace(/\s+/g, " ").trim();
   if (element.ref)
@@ -22179,126 +21369,12 @@ var applyClassListOnNode = (params, element, node2) => {
   return className;
 };
 
-// ../../node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping3(cache2, serialized) {
-  if (cache2.inserted[serialized.name] === void 0) {
-    return cache2.insert("", serialized, cache2.sheet, true);
-  }
-}
-function merge6(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-  return rawClassName + css(registeredStyles);
-}
-var createEmotion7 = function createEmotion8(options) {
-  var cache2 = createCache(options);
-  cache2.sheet.speedy = function(value2) {
-    if (this.ctr !== 0) {
-      throw new Error("speedy must be changed before any rules are inserted");
-    }
-    this.isSpeedy = value2;
-  };
-  cache2.compat = true;
-  var css = function css2() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    var serialized = serializeStyles(args, cache2.registered, void 0);
-    insertStyles(cache2, serialized, false);
-    return cache2.key + "-" + serialized.name;
-  };
-  var keyframes3 = function keyframes4() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    var animation = "animation-" + serialized.name;
-    insertWithoutScoping3(cache2, {
-      name: serialized.name,
-      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-    });
-    return animation;
-  };
-  var injectGlobal = function injectGlobal2() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    insertWithoutScoping3(cache2, serialized);
-  };
-  var cx = function cx2() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-    return merge6(cache2.registered, css, classnames5(args));
-  };
-  return {
-    css,
-    cx,
-    injectGlobal,
-    keyframes: keyframes3,
-    hydrate: function hydrate(ids) {
-      ids.forEach(function(key) {
-        cache2.inserted[key] = true;
-      });
-    },
-    flush: function flush() {
-      cache2.registered = {};
-      cache2.inserted = {};
-      cache2.sheet.flush();
-    },
-    // $FlowFixMe
-    sheet: cache2.sheet,
-    cache: cache2,
-    getRegisteredStyles: getRegisteredStyles.bind(null, cache2.registered),
-    merge: merge6.bind(null, cache2.registered, css)
-  };
-};
-var classnames5 = function classnames6(args) {
-  var cls = "";
-  for (var i2 = 0; i2 < args.length; i2++) {
-    var arg = args[i2];
-    if (arg == null)
-      continue;
-    var toAdd = void 0;
-    switch (typeof arg) {
-      case "boolean":
-        break;
-      case "object": {
-        if (Array.isArray(arg)) {
-          toAdd = classnames6(arg);
-        } else {
-          toAdd = "";
-          for (var k in arg) {
-            if (arg[k] && k) {
-              toAdd && (toAdd += " ");
-              toAdd += k;
-            }
-          }
-        }
-        break;
-      }
-      default: {
-        toAdd = arg;
-      }
-    }
-    if (toAdd) {
-      cls && (cls += " ");
-      cls += toAdd;
-    }
-  }
-  return cls;
-};
-
 // ../../node_modules/@domql/emotion/index.js
 var transformEmotionStyle = (emotion4) => {
   return (params, element, state) => {
-    const execParams = (0, import_utils22.exec)(params, element);
+    const execParams = (0, import_utils20.exec)(params, element);
     if (params) {
-      if ((0, import_utils22.isObjectLike)(element.class))
+      if ((0, import_utils20.isObjectLike)(element.class))
         element.class.elementStyle = execParams;
       else
         element.class = { elementStyle: execParams };
@@ -22312,18 +21388,18 @@ var transformEmotionClass = (emotion4) => {
       return;
     const { __ref } = element;
     const { __class, __classNames } = __ref;
-    if (!(0, import_utils22.isObjectLike)(params))
+    if (!(0, import_utils20.isObjectLike)(params))
       return;
     for (const key in params) {
-      const prop = (0, import_utils22.exec)(params[key], element);
+      const prop = (0, import_utils20.exec)(params[key], element);
       if (!prop) {
         delete __class[key];
         delete __classNames[key];
         continue;
       }
-      const isEqual = (0, import_utils22.isEqualDeep)(__class[key], prop);
+      const isEqual = (0, import_utils20.isEqualDeep)(__class[key], prop);
       if (!isEqual) {
-        if (!(0, import_utils22.isProduction)() && (0, import_utils22.isObject)(prop))
+        if (!(0, import_utils20.isProduction)() && (0, import_utils20.isObject)(prop))
           prop.label = key || element.key;
         const CSSed = emotion4.css(prop);
         __class[key] = prop;
@@ -22335,133 +21411,19 @@ var transformEmotionClass = (emotion4) => {
 };
 var transformDOMQLEmotion = (emotion4, options) => {
   if (!emotion4)
-    emotion4 = createEmotion7(options || { key: "smbls" });
+    emotion4 = createEmotion(options || { key: "smbls" });
   return {
     style: transformEmotionStyle(emotion4),
     class: transformEmotionClass(emotion4)
   };
 };
 
-// node_modules/@symbo.ls/emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping4(cache2, serialized) {
-  if (cache2.inserted[serialized.name] === void 0) {
-    return cache2.insert("", serialized, cache2.sheet, true);
-  }
-}
-function merge7(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-  return rawClassName + css(registeredStyles);
-}
-var createEmotion9 = function createEmotion10(options) {
-  var cache2 = createCache(options);
-  cache2.sheet.speedy = function(value2) {
-    if (this.ctr !== 0) {
-      throw new Error("speedy must be changed before any rules are inserted");
-    }
-    this.isSpeedy = value2;
-  };
-  cache2.compat = true;
-  var css = function css2() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    var serialized = serializeStyles(args, cache2.registered, void 0);
-    insertStyles(cache2, serialized, false);
-    return cache2.key + "-" + serialized.name;
-  };
-  var keyframes3 = function keyframes4() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    var animation = "animation-" + serialized.name;
-    insertWithoutScoping4(cache2, {
-      name: serialized.name,
-      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-    });
-    return animation;
-  };
-  var injectGlobal = function injectGlobal2() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-    var serialized = serializeStyles(args, cache2.registered);
-    insertWithoutScoping4(cache2, serialized);
-  };
-  var cx = function cx2() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-    return merge7(cache2.registered, css, classnames7(args));
-  };
-  return {
-    css,
-    cx,
-    injectGlobal,
-    keyframes: keyframes3,
-    hydrate: function hydrate(ids) {
-      ids.forEach(function(key) {
-        cache2.inserted[key] = true;
-      });
-    },
-    flush: function flush() {
-      cache2.registered = {};
-      cache2.inserted = {};
-      cache2.sheet.flush();
-    },
-    // $FlowFixMe
-    sheet: cache2.sheet,
-    cache: cache2,
-    getRegisteredStyles: getRegisteredStyles.bind(null, cache2.registered),
-    merge: merge7.bind(null, cache2.registered, css)
-  };
-};
-var classnames7 = function classnames8(args) {
-  var cls = "";
-  for (var i2 = 0; i2 < args.length; i2++) {
-    var arg = args[i2];
-    if (arg == null)
-      continue;
-    var toAdd = void 0;
-    switch (typeof arg) {
-      case "boolean":
-        break;
-      case "object": {
-        if (Array.isArray(arg)) {
-          toAdd = classnames8(arg);
-        } else {
-          toAdd = "";
-          for (var k in arg) {
-            if (arg[k] && k) {
-              toAdd && (toAdd += " ");
-              toAdd += k;
-            }
-          }
-        }
-        break;
-      }
-      default: {
-        toAdd = arg;
-      }
-    }
-    if (toAdd) {
-      cls && (cls += " ");
-      cls += toAdd;
-    }
-  }
-  return cls;
-};
-
 // node_modules/@symbo.ls/emotion/index.js
-var createEmotion11 = (key = "smbls", container) => {
+var createEmotion5 = (key = "smbls", container) => {
   const cleanKey = key.replaceAll(/\./g, "-");
-  return createEmotion9({ key: cleanKey, container });
+  return createEmotion({ key: cleanKey, container });
 };
-var emotion3 = createEmotion11();
+var emotion3 = createEmotion5();
 
 // src/options.js
 var options_default = {
@@ -22508,13 +21470,13 @@ var initEmotion = (key, options = options_default) => {
 };
 
 // ../socket-ui/byld-socket.js
-var import_utils25 = __toESM(require_cjs19());
+var import_utils22 = __toESM(require_cjs19());
 var import_router3 = __toESM(require_cjs22());
 var import_scratch23 = __toESM(require_cjs20());
 
 // ../socket/client.js
 var utils = __toESM(require_cjs19(), 1);
-var globals = __toESM(require_cjs25(), 1);
+var globals = __toESM(require_cjs23(), 1);
 
 // ../../node_modules/engine.io-parser/build/esm/commons.js
 var PACKET_TYPES = /* @__PURE__ */ Object.create(null);
@@ -25906,7 +24868,7 @@ var send = (event = "change", changes, options) => {
 };
 
 // ../socket-ui/devFocus.js
-var import_utils24 = __toESM(require_cjs19());
+var import_utils21 = __toESM(require_cjs19());
 var DevFocus = {
   props: {
     ".preventSelect": {
@@ -25960,7 +24922,7 @@ var DevFocus = {
     on: {
       init: ({ context }) => {
         const { components } = context;
-        if ((0, import_utils24.isObject)(components)) {
+        if ((0, import_utils21.isObject)(components)) {
           const { Content, ...rest } = components;
           for (const key in rest) {
             if (domql_exports[key])
@@ -26073,7 +25035,7 @@ var COLOR = {
   ANIMATION
 });
 var connectedToSymbols = (clientsCount, element, state) => {
-  if ((0, import_utils25.isNumber)(clientsCount) && clientsCount > 1) {
+  if ((0, import_utils22.isNumber)(clientsCount) && clientsCount > 1) {
     if (!state.connected) {
       state.notifications.connected = {
         title: "Connected",
@@ -26181,13 +25143,13 @@ var Sync = {
 };
 
 // src/syncExtend.js
-var import_utils26 = __toESM(require_cjs19(), 1);
+var import_utils23 = __toESM(require_cjs19(), 1);
 var applySyncDebug = (extend, options) => {
   const { editor } = options;
   if (!editor)
     return extend;
-  const inspect = (0, import_utils26.isUndefined)(editor.inspect) ? (0, import_utils26.isDevelopment)() : editor.inspect;
-  const liveSync = (0, import_utils26.isUndefined)(editor.liveSync) ? (0, import_utils26.isDevelopment)() : editor.liveSync;
+  const inspect = (0, import_utils23.isUndefined)(editor.inspect) ? (0, import_utils23.isDevelopment)() : editor.inspect;
+  const liveSync = (0, import_utils23.isUndefined)(editor.liveSync) ? (0, import_utils23.isDevelopment)() : editor.liveSync;
   if (inspect)
     extend.push(DevFocus);
   if (liveSync)
@@ -26198,7 +25160,7 @@ var applyInspectListener = (root, options) => {
   const { editor } = options;
   if (!editor)
     return;
-  const inspect = (0, import_utils26.isUndefined)(editor.inspect) ? (0, import_utils26.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils23.isUndefined)(editor.inspect) ? (0, import_utils23.isDevelopment)() : editor.inspect;
   if (inspect)
     inspectOnKey(root);
 };
@@ -26206,16 +25168,18 @@ var applyInspectListener = (root, options) => {
 // src/index.js
 var SYMBOLS_KEY = process.env.SYMBOLS_KEY;
 var mergeWithLocalFile2 = (options, optionsExternalFile) => {
-  const rcfile = (0, import_utils27.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
-  return (0, import_utils27.deepMerge)(options, rcfile);
+  const rcfile = (0, import_utils24.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
+  return (0, import_utils24.deepMerge)(options, rcfile);
 };
 var create = async (App, options = options_default, optionsExternalFile) => {
-  const appIsKey = (0, import_utils27.isString)(App);
+  const appIsKey = (0, import_utils24.isString)(App);
   options = mergeWithLocalFile2(options, optionsExternalFile);
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
     App = {};
   await fetchSync(key, options);
+  if (typeof document === "undefined")
+    document = {};
   const doc = options.parent || options.document || document;
   const [scratchSystem2, emotion4, registry] = initEmotion(key, options);
   const state = options.state || {};
@@ -26260,12 +25224,20 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   return domqlApp;
 };
 var createSync = (App, options = options_default, optionsExternalFile) => {
-  const appIsKey = (0, import_utils27.isString)(App);
+  const appIsKey = (0, import_utils24.isString)(App);
   options = mergeWithLocalFile2(options, optionsExternalFile);
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
     App = {};
-  const doc = options.parent || options.document || document;
+  if (typeof document === "undefined")
+    document = { body: {} };
+  let parent;
+  if (options.parent)
+    parent = options.parent;
+  else if (options.document)
+    parent = options.document;
+  else
+    parent = document.body;
   const [scratchSystem2, emotion4, registry] = initEmotion(key, options);
   const state = options.state || {};
   const pages = options.pages || {};
@@ -26290,9 +25262,9 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
       registry,
       emotion: emotion4,
       //routerOptions,
-      document: doc
+      document
     }
-  }, doc.body, key, {
+  }, parent, key, {
     //extend: [uikit.Box],
     verbose: options.verbose,
     ...options.domqlOptions