@symbo.ls/create 2.11.353 → 2.11.360

package/dist/cjs/bundle/index.js

@@ -209,17 +209,17 @@ var require_types = __commonJS({
     __export12(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray6,
+      isArray: () => isArray7,
       isBoolean: () => isBoolean,
       isDate: () => isDate,
-      isDefined: () => isDefined3,
+      isDefined: () => isDefined2,
       isFunction: () => isFunction4,
       isNot: () => isNot2,
       isNull: () => isNull,
       isNumber: () => isNumber2,
       isObject: () => isObject12,
       isObjectLike: () => isObjectLike3,
-      isString: () => isString13,
+      isString: () => isString14,
       isUndefined: () => isUndefined9
     });
     module2.exports = __toCommonJS12(types_exports);
@@ -229,29 +229,29 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString13 = (arg) => typeof arg === "string";
+    var isString14 = (arg) => typeof arg === "string";
     var isNumber2 = (arg) => typeof arg === "number";
     var isFunction4 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray6 = (arg) => Array.isArray(arg);
+    var isArray7 = (arg) => Array.isArray(arg);
     var isDate = (d) => d instanceof Date;
     var isObjectLike3 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
-    var isDefined3 = (arg) => {
-      return isObject12(arg) || isObjectLike3(arg) || isString13(arg) || isNumber2(arg) || isFunction4(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
+    var isDefined2 = (arg) => {
+      return isObject12(arg) || isObjectLike3(arg) || isString14(arg) || isNumber2(arg) || isFunction4(arg) || isArray7(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
     var isUndefined9 = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray6,
+      array: isArray7,
       object: isObject12,
-      string: isString13,
+      string: isString14,
       date: isDate,
       number: isNumber2,
       null: isNull,
@@ -259,7 +259,7 @@ var require_types = __commonJS({
       objectLike: isObjectLike3,
       node: import_node.isNode,
       htmlElement: import_node.isHtmlElement,
-      defined: isDefined3
+      defined: isDefined2
     };
     var is = (arg) => {
       return (...args) => {
@@ -498,7 +498,7 @@ var require_object = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec5,
+      exec: () => exec4,
       flattenRecursive: () => flattenRecursive,
       hasOwnProperty: () => hasOwnProperty,
       isEmpty: () => isEmpty,
@@ -521,7 +521,7 @@ var require_object = __commonJS({
     var import_types = require_types();
     var import_array = require_array();
     var import_string = require_string();
-    var exec5 = (param, element, state, context) => {
+    var exec4 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -533,7 +533,7 @@ var require_object = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec5(extention[e], element);
+        obj[e] = exec4(extention[e], element);
       }
     };
     var merge5 = (element, obj, excludeFrom = []) => {
@@ -1584,7 +1584,7 @@ var require_cjs2 = __commonJS({
           isArray: () => isArray9,
           isBoolean: () => isBoolean,
           isDate: () => isDate,
-          isDefined: () => isDefined22,
+          isDefined: () => isDefined2,
           isFunction: () => isFunction22,
           isNot: () => isNot2,
           isNull: () => isNull2,
@@ -1613,7 +1613,7 @@ var require_cjs2 = __commonJS({
             return false;
           return typeof arg === "object";
         };
-        var isDefined22 = (arg) => {
+        var isDefined2 = (arg) => {
           return isObject82(arg) || isObjectLike3(arg) || isString102(arg) || isNumber3(arg) || isFunction22(arg) || isArray9(arg) || isObjectLike3(arg) || isBoolean(arg) || isDate(arg) || isNull2(arg);
         };
         var isUndefined22 = (arg) => {
@@ -1631,7 +1631,7 @@ var require_cjs2 = __commonJS({
           objectLike: isObjectLike3,
           node: import_node.isNode,
           htmlElement: import_node.isHtmlElement,
-          defined: isDefined22
+          defined: isDefined2
         };
         var is = (arg) => {
           return (...args) => {
@@ -1864,7 +1864,7 @@ var require_cjs2 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec5,
+          exec: () => exec4,
           flattenRecursive: () => flattenRecursive,
           hasOwnProperty: () => hasOwnProperty,
           isEmpty: () => isEmpty,
@@ -1887,7 +1887,7 @@ var require_cjs2 = __commonJS({
         var import_types = require_types2();
         var import_array = require_array2();
         var import_string = require_string2();
-        var exec5 = (param, element, state, context) => {
+        var exec4 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -1899,7 +1899,7 @@ var require_cjs2 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec5(extention[e], element);
+            obj[e] = exec4(extention[e], element);
           }
         };
         var merge5 = (element, obj, excludeFrom = []) => {
@@ -2877,7 +2877,7 @@ var require_cjs2 = __commonJS({
       return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
     };
     var import_globals2 = __toESM6(require_cjs13(), 1);
-    var import_utils38 = __toESM6(require_cjs22(), 1);
+    var import_utils37 = __toESM6(require_cjs22(), 1);
     var ENV2 = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -3009,11 +3009,11 @@ var require_cjs2 = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils38.isString)(rgb) && rgb.includes("rgb"))
+      if ((0, import_utils37.isString)(rgb) && rgb.includes("rgb"))
         rgb = colorStringToRgbaArray(rgb).join(", ");
-      if ((0, import_utils38.isString)(rgb))
+      if ((0, import_utils37.isString)(rgb))
         rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
-      if ((0, import_utils38.isNumber)(tone))
+      if ((0, import_utils37.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -3077,7 +3077,7 @@ var require_cjs2 = __commonJS({
       return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
     };
     var import_utils52 = __toESM6(require_cjs22(), 1);
-    var import_utils39 = __toESM6(require_cjs22());
+    var import_utils38 = __toESM6(require_cjs22());
     var import_utils210 = __toESM6(require_cjs22());
     var toCamelCase2 = (str) => {
       return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
@@ -3086,13 +3086,13 @@ var require_cjs2 = __commonJS({
     };
     var toDashCase2 = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var arrayzeValue2 = (val) => {
-      if ((0, import_utils39.isArray)(val))
+      if ((0, import_utils38.isArray)(val))
         return val;
-      if ((0, import_utils39.isString)(val))
+      if ((0, import_utils38.isString)(val))
         return val.split(" ");
-      if ((0, import_utils39.isObject)(val))
+      if ((0, import_utils38.isObject)(val))
         return Object.values(val);
-      if ((0, import_utils39.isNumber)(val))
+      if ((0, import_utils38.isNumber)(val))
         return [val];
     };
     var import_utils42 = __toESM6(require_cjs22(), 1);
@@ -6557,12 +6557,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS12(on_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = 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_utils38.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils37.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -6571,7 +6571,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_utils38.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils37.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -6582,7 +6582,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdate" || param === "stateUpdate" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils38.isFunction)(appliedFunction)) {
+        if ((0, import_utils37.isFunction)(appliedFunction)) {
           node2.addEventListener(param, (event) => {
             const { state, context } = element;
             appliedFunction(event, element, state, context, options);
@@ -6620,9 +6620,9 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS12(can_exports);
     var import_report = require_cjs3();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var canRenderTag = (tag) => {
-      return (0, import_utils38.isValidHtmlTag)(tag || "div") || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils37.isValidHtmlTag)(tag || "div") || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -6683,8 +6683,8 @@ var require_cjs5 = __commonJS({
     });
     module2.exports = __toCommonJS12(router_exports3);
     var import_event = require_cjs4();
-    var import_utils38 = require_cjs();
-    var getActiveRoute = (level = 0, route = import_utils38.window.location.pathname) => {
+    var import_utils37 = require_cjs();
+    var getActiveRoute = (level = 0, route = import_utils37.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -6698,7 +6698,7 @@ var require_cjs5 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils38.document && import_utils38.document.documentElement,
+      scrollNode: import_utils37.document && import_utils37.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -6714,13 +6714,13 @@ var require_cjs5 = __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_utils38.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils37.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils38.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils37.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -6749,7 +6749,7 @@ var require_cjs5 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils38.document.getElementById(hash2);
+        const activeNode = import_utils37.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -7107,8 +7107,13 @@ var init_Img = __esm({
     Img = {
       tag: "img",
       attr: {
-        src: ({ props: props4, context }) => {
-          const src = props4.src;
+        src: (el) => {
+          const { props: props4, context } = el;
+          const { exec: exec4, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = context.utils;
+          let src = exec4(props4.src, el);
+          if (isString14(src) && src.includes("{{")) {
+            src = replaceLiteralsWithObjectFields2(src, el.state);
+          }
           let isUrl;
           try {
             isUrl = new URL(src);
@@ -11790,21 +11795,37 @@ var init_client = __esm({
 function findComponent(el) {
   if (!el || !el.__ref)
     return;
-  const components = el.context.components;
-  const __componentKey = el.__ref.__componentKey || "";
-  const componentKey = __componentKey.split("_")[0].split(".")[0].split("+")[0];
+  const { components, editor } = el.context;
+  const componentKey = getComponentKey(el);
+  if (editor && editor.onInitInspect) {
+    const initInspectReturns = editor.onInitInspect(componentKey, el, el.state);
+    if (!initInspectReturns)
+      return findComponent(el.parent);
+  }
   if (componentKey && components[componentKey]) {
     return el;
   }
   return findComponent(el.parent);
 }
-var import_utils9, DevFocus, inspectOnKey;
+var import_utils9, returnStringExtend, getComponentKey, DevFocus, inspectOnKey;
 var init_devFocus = __esm({
   "../socket-ui/devFocus.js"() {
     "use strict";
     init_uikit();
     import_utils9 = __toESM(require_cjs());
     init_client();
+    returnStringExtend = (extend) => {
+      return (0, import_utils9.isString)(extend) ? extend : (0, import_utils9.isArray)(extend) ? extend.find((extItem) => (0, import_utils9.isString)(extItem)) : "";
+    };
+    getComponentKey = (el) => {
+      var _a, _b;
+      if (!el)
+        return;
+      const __componentKey = el.__ref.__componentKey;
+      const extendStr = el.extend && returnStringExtend(el.extend);
+      const parentChildExtendStr = ((_a = el.parent) == null ? void 0 : _a.childExtend) && returnStringExtend((_b = el.parent) == null ? void 0 : _b.childExtend);
+      return (__componentKey || extendStr || parentChildExtendStr || "").split("_")[0].split(".")[0].split("+")[0];
+    };
     DevFocus = {
       props: {
         ".preventSelect": {
@@ -11814,29 +11835,16 @@ var init_devFocus = __esm({
       focus: {
         state: {},
         props: (el, s) => ({
+          transition: "all, defaultBezier, X",
           position: "fixed",
-          hide: !s.area || !s.parent.debugging
-        }),
-        class: {
-          inset: (el, state) => {
-            const { area } = state;
-            if (!area)
-              return;
-            const { x, y, width, height } = area;
-            return {
-              top: y - 6 + "px",
-              left: x - 6 + "px",
-              width: width + 12 + "px",
-              height: height + 12 + "px"
-            };
+          hide: !(s.area && s.parent.debugging),
+          style: {
+            boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
+            zIndex: "9999999",
+            borderRadius: "10px",
+            pointerEvents: "none"
           }
-        },
-        style: {
-          boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
-          zIndex: "9999999",
-          borderRadius: "10px",
-          pointerEvents: "none"
-        },
+        }),
         span: {
           props: {
             position: "absolute",
@@ -11845,15 +11853,16 @@ var init_devFocus = __esm({
             color: "text",
             // color: 'blue',
             zIndex: "99999999",
+            transition: "all, defaultBezier, X",
             textDecoration: "underline",
             fontWeight: "500",
-            top: "100%"
-          },
-          style: {
-            boxShadow: "0 25px 10px 35px black",
-            textShadow: "0 0 10px black"
-          },
-          text: (el, s) => s.focusKey
+            top: "100%",
+            style: {
+              boxShadow: "0 25px 10px 35px black",
+              textShadow: "0 0 10px black"
+            },
+            text: "{{ focusKey }}"
+          }
         },
         on: {
           init: ({ context }) => {
@@ -11870,6 +11879,26 @@ var init_devFocus = __esm({
                 }
               }
             }
+          },
+          initUpdate: (ch, el, s) => {
+            const { area } = s;
+            const isDebugging = s.area && s.parent.debugging;
+            let style2;
+            if (!isDebugging) {
+              style2 = "display: none !important";
+            } else if (area) {
+              const { x, y, width, height } = area;
+              style2 = `
+            display: block !important;
+            top: ${y - 6}px;
+            left: ${x - 6}px;
+            width: ${width + 12}px;
+            height: ${height + 12}px;
+          `;
+            }
+            el.node.style = style2;
+            el.span.node.innerText = s.focusKey;
+            return false;
           }
         }
       },
@@ -11877,11 +11906,12 @@ var init_devFocus = __esm({
         mousemove: (ev, e, state) => {
           const el = ev.target.ref;
           const component = findComponent(el);
-          if (!component || !state.debugging || !component.__ref)
-            return;
           const focusState = e.focus.state;
+          if (!component || !state.debugging || !component.__ref)
+            return focusState.update({ area: false });
+          const componentKey = getComponentKey(component);
           const updateValue = (area) => {
-            focusState.update({ area, focusKey: component.__ref.__componentKey });
+            focusState.update({ area, focusKey: componentKey });
           };
           const update = () => {
             if (ev.altKey && ev.shiftKey) {
@@ -11903,29 +11933,37 @@ var init_devFocus = __esm({
         click: (ev, elem, state) => {
           const el = ev.target.ref;
           const component = findComponent(el);
-          if (!component || !component.__ref.__componentKey || !state.debugging)
+          const componentKey = getComponentKey(component);
+          if (!component || !componentKey || !state.debugging)
             return;
-          send.call(el.__ref.root.data.socket, "route", JSON.stringify({
-            componentKey: `${component.__ref.__componentKey}`
+          const editor = el.context.editor;
+          if (editor && editor.onInspect) {
+            return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
+          }
+          send.call(el.context.socket, "route", JSON.stringify({
+            componentKey: `${componentKey}`
           }));
           return false;
         }
       }
     };
-    inspectOnKey = (app) => {
-      window.onkeydown = (ev) => {
+    inspectOnKey = (app, opts) => {
+      const windowOpts = opts.window || window;
+      windowOpts.onkeydown = (ev) => {
         if (ev.altKey && ev.shiftKey) {
           app.state.update({ debugging: true, preventSelect: true }, {
+            preventUpdate: true,
             preventContentUpdate: true,
             preventRecursive: true
           });
         }
       };
-      window.onkeyup = (ev) => {
+      windowOpts.onkeyup = (ev) => {
         if ((!ev.altKey || !ev.shiftKey) && app.state.debugging) {
           app.focus.state.update({ area: false });
           app.state.update({ debugging: false, preventSelect: false }, {
             // TODO: does not update false
+            preventUpdate: true,
             preventContentUpdate: true,
             preventRecursive: true,
             preventPropsUpdate: true
@@ -12066,7 +12104,7 @@ var init_byld_socket = __esm({
       },
       on: {
         render: (el, s, ctx) => {
-          el.data.socket = connect(ctx.key, {
+          ctx.socket = connect(ctx.key, {
             source: isLocalhost ? "localhost" : "client",
             socketUrl: isLocalhost ? "localhost:13336" : "socket.symbols.app",
             location: import_globals.window.location.host,
@@ -12129,7 +12167,7 @@ var init_syncExtend = __esm({
         return;
       const inspect = (0, import_utils11.isUndefined)(editor.inspect) ? (0, import_utils11.isDevelopment)() : editor.inspect;
       if (inspect)
-        (0, import_socket_ui.inspectOnKey)(root);
+        (0, import_socket_ui.inspectOnKey)(root, options);
     };
   }
 });
@@ -12269,11 +12307,11 @@ var require_tree = __commonJS({
       TREE: () => TREE
     });
     module2.exports = __toCommonJS12(tree_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_report = require_cjs3();
     var ROOT = {
       key: ":root",
-      node: import_utils38.document ? import_utils38.document.body : (0, import_report.report)("DocumentNotDefined", import_utils38.document)
+      node: import_utils37.document ? import_utils37.document.body : (0, import_report.report)("DocumentNotDefined", import_utils37.document)
     };
     var TREE = ROOT;
   }
@@ -12340,7 +12378,7 @@ var require_cache = __commonJS({
     module2.exports = __toCommonJS12(cache_exports);
     var import_report = require_cjs3();
     var import_event = require_cjs4();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var cache2 = {};
     var createHTMLNode = (element) => {
       const { tag } = element;
@@ -12359,16 +12397,16 @@ var require_cache = __commonJS({
     };
     var detectTag = (element) => {
       let { tag, key, props: props4 } = element;
-      tag = (0, import_utils38.exec)(tag, element);
+      tag = (0, import_utils37.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils38.isObject)(props4) && (0, import_utils38.isString)(props4.tag)) {
-        const tagExists = (0, import_utils38.isValidHtmlTag)(props4.tag);
+      if ((0, import_utils37.isObject)(props4) && (0, import_utils37.isString)(props4.tag)) {
+        const tagExists = (0, import_utils37.isValidHtmlTag)(props4.tag);
         if (tagExists)
           return props4.tag;
       }
-      if ((0, import_utils38.isString)(tag)) {
-        if ((0, import_utils38.isValidHtmlTag)(tag))
+      if ((0, import_utils37.isString)(tag)) {
+        if ((0, import_utils37.isValidHtmlTag)(tag))
           return tag;
       } else {
         let keyAsTag = key.toLowerCase();
@@ -12376,7 +12414,7 @@ var require_cache = __commonJS({
           keyAsTag = keyAsTag.split(".")[0];
         if (keyAsTag.includes("_"))
           keyAsTag = keyAsTag.split("_")[0];
-        if ((0, import_utils38.isValidHtmlTag)(keyAsTag))
+        if ((0, import_utils37.isValidHtmlTag)(keyAsTag))
           return keyAsTag;
       }
       return "div";
@@ -12510,16 +12548,16 @@ var require_attr = __commonJS({
       default: () => attr_default
     });
     module2.exports = __toCommonJS12(attr_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_report = require_cjs3();
     var attr_default = (params, element, node2) => {
       const { __ref } = element;
       const { __attr } = __ref;
-      if ((0, import_utils38.isNot)("object"))
+      if ((0, import_utils37.isNot)("object"))
         (0, import_report.report)("HTMLInvalidAttr", params);
       if (params) {
         for (const attr in params) {
-          const val = (0, import_utils38.exec)(params[attr], element);
+          const val = (0, import_utils37.exec)(params[attr], element);
           if (val && node2.setAttribute)
             node2.setAttribute(attr, val);
           else if (node2.removeAttribute)
@@ -12562,7 +12600,7 @@ var require_classList = __commonJS({
       default: () => classList_default
     });
     module2.exports = __toCommonJS12(classList_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var assignKeyAsClassname = (element) => {
       const { key } = element;
       if (element.class === true)
@@ -12580,7 +12618,7 @@ var require_classList = __commonJS({
         else if (typeof param === "string")
           className += ` ${param}`;
         else if (typeof param === "function") {
-          className += ` ${(0, import_utils38.exec)(param, element)}`;
+          className += ` ${(0, import_utils37.exec)(param, element)}`;
         }
       }
       return className;
@@ -12591,9 +12629,9 @@ var require_classList = __commonJS({
       const { key } = element;
       if (params === true)
         params = element.class = { key };
-      if ((0, import_utils38.isString)(params))
+      if ((0, import_utils37.isString)(params))
         params = element.class = { default: params };
-      if ((0, import_utils38.isObject)(params))
+      if ((0, import_utils37.isObject)(params))
         params = classify2(params, element);
       const className = params.replace(/\s+/g, " ").trim();
       if (element.ref)
@@ -12678,7 +12716,7 @@ var require_set = __commonJS({
       resetElement: () => resetElement
     });
     module2.exports = __toCommonJS12(set_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_create = __toESM6(require_create4(), 1);
     var import_options5 = __toESM6(require_options(), 1);
     var import_mixins = require_mixins();
@@ -12701,7 +12739,7 @@ var require_set = __commonJS({
       const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
       if (options.preventContentUpdate === true && !hasCollection)
         return;
-      if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils38.deepContains)(params, content)) {
+      if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils37.deepContains)(params, content)) {
         if (content == null ? void 0 : content.update)
           content.update();
         return;
@@ -12760,7 +12798,7 @@ var require_content = __commonJS({
       updateContent: () => updateContent
     });
     module2.exports = __toCommonJS12(content_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_set = __toESM6(require_set(), 1);
     var updateContent = function(params, options) {
       const element = this;
@@ -12783,7 +12821,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_utils38.isFunction)(__cached.content.remove))
+          else if (__cached.content && (0, import_utils37.isFunction)(__cached.content.remove))
             __cached.content.remove();
         }
         delete element.content;
@@ -12828,15 +12866,15 @@ var require_data = __commonJS({
       default: () => data_default
     });
     module2.exports = __toCommonJS12(data_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_report = require_cjs3();
     var data_default = (params, element, node2) => {
       if (params && params.showOnNode) {
-        if (!(0, import_utils38.isObject)(params))
+        if (!(0, import_utils37.isObject)(params))
           (0, import_report.report)("HTMLInvalidData", params);
         for (const dataset in params) {
           if (dataset !== "showOnNode") {
-            node2.dataset[dataset] = (0, import_utils38.exec)(params[dataset], element);
+            node2.dataset[dataset] = (0, import_utils37.exec)(params[dataset], element);
           }
         }
       }
@@ -12870,9 +12908,9 @@ var require_html = __commonJS({
       default: () => html_default
     });
     module2.exports = __toCommonJS12(html_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var html_default = (param, element, node2) => {
-      const prop = (0, import_utils38.exec)(param, element);
+      const prop = (0, import_utils37.exec)(param, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node2.nodeName === "SVG")
@@ -12911,12 +12949,12 @@ var require_style = __commonJS({
       default: () => style_default2
     });
     module2.exports = __toCommonJS12(style_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_report = require_cjs3();
     var style_default2 = (params, element, node2) => {
       if (params) {
-        if ((0, import_utils38.isObject)(params))
-          (0, import_utils38.map)(node2.style, params, element);
+        if ((0, import_utils37.isObject)(params))
+          (0, import_utils37.map)(node2.style, params, element);
         else
           (0, import_report.report)("HTMLInvalidStyles", params);
       }
@@ -12951,11 +12989,11 @@ var require_text = __commonJS({
     });
     module2.exports = __toCommonJS12(text_exports);
     var import__ = require_cjs11();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var text_default = (param, element, node2) => {
-      let prop = (0, import_utils38.exec)(param, element);
-      if ((0, import_utils38.isString)(prop) && prop.includes("{{")) {
-        prop = (0, import_utils38.replaceLiteralsWithObjectFields)(prop, element.state);
+      let prop = (0, import_utils37.exec)(param, element);
+      if ((0, import_utils37.isString)(prop) && prop.includes("{{")) {
+        prop = (0, import_utils37.replaceLiteralsWithObjectFields)(prop, element.state);
       }
       if (element.tag === "string") {
         node2.nodeValue = prop;
@@ -13059,11 +13097,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS12(methods_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_ignore = require_ignore();
     var parse3 = function() {
       const state = this;
-      if ((0, import_utils38.isObject)(state)) {
+      if ((0, import_utils37.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -13071,7 +13109,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils38.isArray)(state)) {
+      } else if ((0, import_utils37.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -13091,7 +13129,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils38.isString)(stateKey)) {
+      if ((0, import_utils37.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -13104,7 +13142,7 @@ var require_methods = __commonJS({
         for (const key in state.__children) {
           const child = state.__children[key];
           if (child.state) {
-            if ((0, import_utils38.isArray)(child.state)) {
+            if ((0, import_utils37.isArray)(child.state)) {
               Object.defineProperty(child.state, "parent", {
                 value: state.parent,
                 enumerable: false,
@@ -13138,10 +13176,10 @@ var require_methods = __commonJS({
     };
     var add = function(value2, options = {}) {
       const state = this;
-      if ((0, import_utils38.isArray)(state)) {
+      if ((0, import_utils37.isArray)(state)) {
         state.push(value2);
         state.update(state.parse(), { overwrite: true, ...options });
-      } else if ((0, import_utils38.isObject)(state)) {
+      } else if ((0, import_utils37.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value2 }, options);
       }
@@ -13157,17 +13195,17 @@ var require_methods = __commonJS({
     };
     var set3 = function(val, options = {}) {
       const state = this;
-      const value2 = (0, import_utils38.deepCloneWithExtend)(val);
+      const value2 = (0, import_utils37.deepCloneWithExtend)(val);
       return state.clean({ preventStateUpdate: true, ...options }).update(value2, { replace: true, ...options });
     };
     var reset = function(options = {}) {
       const state = this;
-      const value2 = (0, import_utils38.deepCloneWithExtend)(state.parse());
+      const value2 = (0, import_utils37.deepCloneWithExtend)(state.parse());
       return state.set(value2, { replace: true, ...options });
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils38.isFunction)(func)) {
+      if ((0, import_utils37.isFunction)(func)) {
         func(state);
         return state.update(state.parse(), { replace: true, ...options });
       }
@@ -13208,7 +13246,7 @@ var require_inherit = __commonJS({
       isState: () => isState2
     });
     module2.exports = __toCommonJS12(inherit_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_ignore = require_ignore();
     var getRootStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("~/"))
@@ -13273,11 +13311,11 @@ var require_inherit = __commonJS({
     var createInheritedState = (element, parent) => {
       const ref = element.__ref;
       const inheritedState = findInheritedState(element, parent);
-      if ((0, import_utils38.isUndefined)(inheritedState))
+      if ((0, import_utils37.isUndefined)(inheritedState))
         return element.state;
-      if ((0, import_utils38.is)(inheritedState)("object", "array")) {
-        return (0, import_utils38.deepCloneWithExtend)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils38.is)(inheritedState)("string", "number", "boolean")) {
+      if ((0, import_utils37.is)(inheritedState)("object", "array")) {
+        return (0, import_utils37.deepCloneWithExtend)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils37.is)(inheritedState)("string", "number", "boolean")) {
         ref.__stateType = typeof inheritedState;
         return { value: inheritedState };
       }
@@ -13286,12 +13324,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (stateKey && (0, import_utils38.is)(stateKey)("number", "string", "boolean"))
+      if (stateKey && (0, import_utils37.is)(stateKey)("number", "string", "boolean"))
         return true;
       return false;
     };
     var isState2 = function(state) {
-      if (!(0, import_utils38.isObjectLike)(state))
+      if (!(0, import_utils37.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;
     };
@@ -13340,7 +13378,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs3();
     var import_event = require_cjs4();
     var import_ignore = require_ignore();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -13353,7 +13391,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils38.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils37.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -13383,10 +13421,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow" || overwrite === "shallow-once";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils38.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils37.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils38.overwriteShallow : import_utils38.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils37.overwriteShallow : import_utils37.overwriteDeep;
       if (options.overwrite === "shallow-once")
         options.overwrite = true;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
@@ -13411,7 +13449,7 @@ var require_updateState = __commonJS({
       const changesValue = (0, import_inherit.createNestedObjectByKeyPath)(stateKey, passedValue);
       const targetParent = findRootState || findGrandParentState || parent.state;
       if (options.replace)
-        (0, import_utils38.overwriteDeep)(targetParent, changesValue || value2);
+        (0, import_utils37.overwriteDeep)(targetParent, changesValue || value2);
       targetParent.update(changesValue, {
         execStateFunction: false,
         isHoisted: true,
@@ -13480,7 +13518,7 @@ var require_create2 = __commonJS({
     });
     module2.exports = __toCommonJS12(create_exports);
     var import_event = require_cjs4();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -13494,13 +13532,13 @@ var require_create2 = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils38.deepCloneWithExtend)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils37.deepCloneWithExtend)(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 = (0, import_utils38.isUndefined)(inheritedState) ? {} : inheritedState;
+        element.state = (0, import_utils37.isUndefined)(inheritedState) ? {} : inheritedState;
       }
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
@@ -13513,17 +13551,17 @@ var require_create2 = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils38.deepCloneWithExtend)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils37.deepCloneWithExtend)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils38.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils37.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils38.isFunction)(state)) {
+      if ((0, import_utils37.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils38.exec)(state, element);
-      } else if ((0, import_utils38.is)(state)("string", "number")) {
+        return (0, import_utils37.exec)(state, element);
+      } else if ((0, import_utils37.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -13571,7 +13609,7 @@ var require_create2 = __commonJS({
         __children: {},
         root: ref.root ? ref.root.state : state
       };
-      if ((0, import_utils38.isArray)(state)) {
+      if ((0, import_utils37.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -13639,10 +13677,10 @@ var require_state = __commonJS({
     });
     module2.exports = __toCommonJS12(state_exports);
     var import_state2 = require_cjs9();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var state = (params, element, node2) => {
-      const state2 = (0, import_utils38.exec)(params, element);
-      if ((0, import_utils38.isObject)(state2)) {
+      const state2 = (0, import_utils37.exec)(params, element);
+      if ((0, import_utils37.isObject)(state2)) {
         for (const param in state2) {
           if (import_state2.IGNORE_STATE_PARAMS.includes(param))
             continue;
@@ -13682,13 +13720,13 @@ var require_scope = __commonJS({
       default: () => scope_default
     });
     module2.exports = __toCommonJS12(scope_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var scope_default = (params, element, node2) => {
-      if (!(0, import_utils38.isObject)(params))
+      if (!(0, import_utils37.isObject)(params))
         return;
       for (const scopeItem in params) {
         const value2 = params[scopeItem];
-        if ((0, import_utils38.isFunction)(value2)) {
+        if ((0, import_utils37.isFunction)(value2)) {
           element.scope[scopeItem] = value2.bind(element);
         } else {
           element.scope[scopeItem] = value2;
@@ -13908,7 +13946,7 @@ var require_methods2 = __commonJS({
       spotByPath: () => spotByPath
     });
     module2.exports = __toCommonJS12(methods_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_tree = require_tree();
     var import_mixins = require_mixins();
     var spotByPath = function(path) {
@@ -13941,9 +13979,9 @@ var require_methods2 = __commonJS({
     };
     var remove = function(params) {
       const element = this;
-      if ((0, import_utils38.isFunction)(element.node.remove))
+      if ((0, import_utils37.isFunction)(element.node.remove))
         element.node.remove();
-      else if (!(0, import_utils38.isProduction)()) {
+      else if (!(0, import_utils37.isProduction)()) {
         console.warn("This item cant be removed");
         element.log();
       }
@@ -13983,8 +14021,8 @@ var require_methods2 = __commonJS({
         if (v === "state") {
           if (element.__ref && !element.__ref.__hasRootState)
             return;
-          const parsedVal = (0, import_utils38.isFunction)(val && val.parse) ? val.parse() : val;
-          obj[v] = (0, import_utils38.isFunction)(parsedVal) ? parsedVal : JSON.parse(JSON.stringify(parsedVal || {}));
+          const parsedVal = (0, import_utils37.isFunction)(val && val.parse) ? val.parse() : val;
+          obj[v] = (0, import_utils37.isFunction)(parsedVal) ? parsedVal : JSON.parse(JSON.stringify(parsedVal || {}));
         } else if (v === "scope") {
           if (element.__ref && !element.__ref.__hasRootScope)
             return;
@@ -13992,7 +14030,7 @@ var require_methods2 = __commonJS({
         } else if (v === "props") {
           const { __element, update, ...props4 } = element[v];
           obj[v] = props4;
-        } else if ((0, import_utils38.isDefined)(val))
+        } else if ((0, import_utils37.isDefined)(val))
           obj[v] = val;
       });
       return obj;
@@ -14003,7 +14041,7 @@ var require_methods2 = __commonJS({
       for (const v in obj) {
         if (excl.includes(v))
           return;
-        if ((0, import_utils38.isObjectLike)(obj[v])) {
+        if ((0, import_utils37.isObjectLike)(obj[v])) {
           obj[v] = parseDeep.call(obj[v], excl);
         }
       }
@@ -14121,18 +14159,18 @@ var require_inherit2 = __commonJS({
       inheritParentProps: () => inheritParentProps
     });
     module2.exports = __toCommonJS12(inherit_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var objectizeStringProperty = (propValue) => {
-      if ((0, import_utils38.is)(propValue)("string", "number")) {
+      if ((0, import_utils37.is)(propValue)("string", "number")) {
         return { inheritedString: propValue };
       }
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
       let propsStack = [];
-      const parentProps = (0, import_utils38.exec)(parent, parent.state).props;
+      const parentProps = (0, import_utils37.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
-      const matchParentIsString = (0, import_utils38.isString)(matchParent);
+      const matchParentIsString = (0, import_utils37.isString)(matchParent);
       const matchParentChildProps = parentProps && parentProps.childProps;
       if (matchParent) {
         if (matchParentIsString) {
@@ -14180,19 +14218,19 @@ var require_create3 = __commonJS({
       syncProps: () => syncProps
     });
     module2.exports = __toCommonJS12(create_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_ignore = require_ignore2();
     var import_inherit = require_inherit2();
     var createPropsStack = (element, parent) => {
       const { props: props4, __ref } = element;
       const propsStack = __ref.__props = (0, import_inherit.inheritParentProps)(element, parent);
-      if ((0, import_utils38.isObject)(props4))
+      if ((0, import_utils37.isObject)(props4))
         propsStack.push(props4);
       else if (props4 === "inherit" && parent.props)
         propsStack.push(parent.props);
       else if (props4)
         propsStack.push(props4);
-      if ((0, import_utils38.isArray)(__ref.__extend)) {
+      if ((0, import_utils37.isArray)(__ref.__extend)) {
         __ref.__extend.forEach((extend) => {
           if (extend.props && extend.props !== props4)
             propsStack.push(extend.props);
@@ -14207,10 +14245,10 @@ var require_create3 = __commonJS({
       props4.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
-        const execProps = (0, import_utils38.exec)(v, element);
-        element.props = (0, import_utils38.deepMerge)(
+        const execProps = (0, import_utils37.exec)(v, element);
+        element.props = (0, import_utils37.deepMerge)(
           mergedProps,
-          (0, import_utils38.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
+          (0, import_utils37.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
           import_ignore.IGNORE_PROPS_PARAMS
         );
       });
@@ -14358,11 +14396,11 @@ var require_object2 = __commonJS({
       overwriteShallow: () => overwriteShallow2
     });
     module2.exports = __toCommonJS12(object_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_state2 = require_cjs9();
     var import_props = require_props();
     var import_methods = require_methods2();
-    var METHODS_EXL = (0, import_utils38.joinArrays)(
+    var METHODS_EXL = (0, import_utils37.joinArrays)(
       ["node", "state", "context", "extend", "__element"],
       import_methods.METHODS,
       import_state2.IGNORE_STATE_PARAMS,
@@ -14376,7 +14414,7 @@ var require_object2 = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils38.isObjectLike)(elementProp) && (0, import_utils38.isObject)(extendProp)) {
+        } else if ((0, import_utils37.isObjectLike)(elementProp) && (0, import_utils37.isObject)(extendProp)) {
           deepMerge7(elementProp, extendProp);
         }
       }
@@ -14392,15 +14430,15 @@ var require_object2 = __commonJS({
       return o;
     };
     var deepClone3 = (obj, exclude = METHODS_EXL) => {
-      const o = (0, import_utils38.isArray)(obj) ? [] : {};
+      const o = (0, import_utils37.isArray)(obj) ? [] : {};
       for (const e in obj) {
         if (exclude.includes(e))
           continue;
         let objProp = obj[e];
-        if (e === "extend" && (0, import_utils38.isArray)(objProp)) {
+        if (e === "extend" && (0, import_utils37.isArray)(objProp)) {
           objProp = mergeArray(objProp, exclude);
         }
-        if ((0, import_utils38.isObjectLike)(objProp)) {
+        if ((0, import_utils37.isObjectLike)(objProp)) {
           o[e] = deepClone3(objProp, exclude);
         } else
           o[e] = objProp;
@@ -14439,7 +14477,7 @@ var require_object2 = __commonJS({
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
-        if ((0, import_utils38.isObjectLike)(objProp) && (0, import_utils38.isObjectLike)(paramsProp)) {
+        if ((0, import_utils37.isObjectLike)(objProp) && (0, import_utils37.isObjectLike)(paramsProp)) {
           overwriteDeep3(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
@@ -14448,7 +14486,7 @@ var require_object2 = __commonJS({
       return obj;
     };
     var mergeIfExisted = (a, b) => {
-      if ((0, import_utils38.isObjectLike)(a) && (0, import_utils38.isObjectLike)(b))
+      if ((0, import_utils37.isObjectLike)(a) && (0, import_utils37.isObjectLike)(b))
         return deepMerge7(a, b);
       return a || b;
     };
@@ -14456,7 +14494,7 @@ var require_object2 = __commonJS({
       return arr.reduce((a, c) => deepMerge7(a, deepClone3(c, exclude)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_utils38.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
+      return (0, import_utils37.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -14510,7 +14548,7 @@ var require_extendUtils = __commonJS({
       setHashedExtend: () => setHashedExtend
     });
     module2.exports = __toCommonJS12(extendUtils_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var ENV2 = "development";
     var generateHash = () => Math.random().toString(36).substring(2);
     var extendStackRegistry = {};
@@ -14520,7 +14558,7 @@ var require_extendUtils = __commonJS({
     };
     var setHashedExtend = (extend, stack) => {
       const hash2 = generateHash();
-      if (!(0, import_utils38.isString)(extend)) {
+      if (!(0, import_utils37.isString)(extend)) {
         extend.__hash = hash2;
       }
       extendStackRegistry[hash2] = stack;
@@ -14546,9 +14584,9 @@ var require_extendUtils = __commonJS({
     var flattenExtend = (extend, stack, context) => {
       if (!extend)
         return stack;
-      if ((0, import_utils38.isArray)(extend))
+      if ((0, import_utils37.isArray)(extend))
         return extractArrayExtend(extend, stack, context);
-      if ((0, import_utils38.isString)(extend))
+      if ((0, import_utils37.isString)(extend))
         extend = fallbackStringExtend(extend, context);
       stack.push(extend);
       if (extend.extend)
@@ -14563,14 +14601,14 @@ var require_extendUtils = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils38.isObject)(elementProp) && (0, import_utils38.isObject)(extendProp)) {
+        } else if ((0, import_utils37.isObject)(elementProp) && (0, import_utils37.isObject)(extendProp)) {
           deepMergeExtend(elementProp, extendProp);
-        } else if ((0, import_utils38.isArray)(elementProp) && (0, import_utils38.isArray)(extendProp)) {
+        } else if ((0, import_utils37.isArray)(elementProp) && (0, import_utils37.isArray)(extendProp)) {
           element[e] = elementProp.concat(extendProp);
-        } else if ((0, import_utils38.isArray)(elementProp) && (0, import_utils38.isObject)(extendProp)) {
+        } else if ((0, import_utils37.isArray)(elementProp) && (0, import_utils37.isObject)(extendProp)) {
           const obj = deepMergeExtend({}, elementProp);
           element[e] = deepMergeExtend(obj, extendProp);
-        } else if (elementProp === void 0 && (0, import_utils38.isFunction)(extendProp)) {
+        } else if (elementProp === void 0 && (0, import_utils37.isFunction)(extendProp)) {
           element[e] = extendProp;
         }
       }
@@ -14578,12 +14616,12 @@ var require_extendUtils = __commonJS({
     };
     var cloneAndMergeArrayExtend = (stack) => {
       return stack.reduce((a, c) => {
-        return deepMergeExtend(a, (0, import_utils38.deepCloneWithExtend)(c));
+        return deepMergeExtend(a, (0, import_utils37.deepCloneWithExtend)(c));
       }, {});
     };
     var fallbackStringExtend = (extend, context, options = {}) => {
       const COMPONENTS = context && context.components || options.components;
-      if ((0, import_utils38.isString)(extend)) {
+      if ((0, import_utils37.isString)(extend)) {
         const componentExists = COMPONENTS[extend] || COMPONENTS["smbls." + extend];
         if (COMPONENTS && componentExists) {
           return componentExists;
@@ -14640,13 +14678,13 @@ var require_extend = __commonJS({
       applyExtend: () => applyExtend
     });
     module2.exports = __toCommonJS12(extend_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_utils210 = require_utils();
     var ENV2 = "development";
     var mainExtend;
     var applyExtend = (element, parent, options = {}) => {
-      if ((0, import_utils38.isFunction)(element))
-        element = (0, import_utils38.exec)(element, parent);
+      if ((0, import_utils37.isFunction)(element))
+        element = (0, import_utils37.exec)(element, parent);
       let { extend, props: props4, context, __ref } = element;
       extend = (0, import_utils210.fallbackStringExtend)(extend, context, options);
       const extendStack = (0, import_utils210.getExtendStack)(extend, context);
@@ -14691,7 +14729,7 @@ var require_extend = __commonJS({
         __ref.__extend = stack;
       let mergedExtend = (0, import_utils210.cloneAndMergeArrayExtend)(stack);
       const COMPONENTS = context && context.components || options.components;
-      const component = (0, import_utils38.exec)(element.component || mergedExtend.component, element);
+      const component = (0, import_utils37.exec)(element.component || mergedExtend.component, element);
       if (component && COMPONENTS && COMPONENTS[component]) {
         const componentExtend = (0, import_utils210.cloneAndMergeArrayExtend)((0, import_utils210.getExtendStack)(COMPONENTS[component]));
         mergedExtend = (0, import_utils210.deepMergeExtend)(componentExtend, mergedExtend);
@@ -14738,7 +14776,7 @@ var require_component = __commonJS({
       overwriteVariant: () => overwriteVariant
     });
     module2.exports = __toCommonJS12(component_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_extend = require_extend();
     var ENV2 = "development";
     var DOMQL_BUILTINS = [
@@ -14755,14 +14793,14 @@ var require_component = __commonJS({
       "tag"
     ];
     var checkIfKeyIsComponent3 = (key) => {
-      const isFirstKeyString = (0, import_utils38.isString)(key);
+      const isFirstKeyString = (0, import_utils37.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
       return /^[A-Z]*$/.test(firstCharKey);
     };
     var checkIfKeyIsProperty = (key) => {
-      const isFirstKeyString = (0, import_utils38.isString)(key);
+      const isFirstKeyString = (0, import_utils37.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
@@ -14770,9 +14808,9 @@ var require_component = __commonJS({
     };
     var addAdditionalExtend = (newExtend, element) => {
       const { extend: elementExtend } = element;
-      const originalArray = (0, import_utils38.isArray)(elementExtend) ? elementExtend : [elementExtend];
-      const receivedArray = (0, import_utils38.isArray)(newExtend) ? newExtend : [newExtend];
-      const extend = (0, import_utils38.joinArrays)(receivedArray, originalArray);
+      const originalArray = (0, import_utils37.isArray)(elementExtend) ? elementExtend : [elementExtend];
+      const receivedArray = (0, import_utils37.isArray)(newExtend) ? newExtend : [newExtend];
+      const extend = (0, import_utils37.joinArrays)(receivedArray, originalArray);
       return { ...element, extend };
     };
     var replaceOnKeys = (key) => key.replace(/on\w+/g, (match2) => match2.substring(2));
@@ -14820,11 +14858,11 @@ var require_component = __commonJS({
         };
       } else if (extend) {
         return addAdditionalExtend(extendFromKey, element);
-      } else if ((0, import_utils38.isFunction)(element)) {
+      } else if ((0, import_utils37.isFunction)(element)) {
         return {
           extend: extendFromKey,
           tag,
-          props: { ...(0, import_utils38.exec)(element, parent) }
+          props: { ...(0, import_utils37.exec)(element, parent) }
         };
       }
     };
@@ -14837,8 +14875,8 @@ var require_component = __commonJS({
         return;
       const { components } = context;
       const { extend } = element;
-      const execExtend = (0, import_utils38.exec)(extend, element);
-      if ((0, import_utils38.isString)(execExtend)) {
+      const execExtend = (0, import_utils37.exec)(extend, element);
+      if ((0, import_utils37.isString)(execExtend)) {
         const componentExists = components[execExtend] || components["smbls." + execExtend];
         if (componentExists)
           element.extend = componentExists;
@@ -14852,29 +14890,29 @@ var require_component = __commonJS({
       }
     };
     var isVariant = (param) => {
-      if (!(0, import_utils38.isString)(param))
+      if (!(0, import_utils37.isString)(param))
         return;
       const firstCharKey = param.slice(0, 1);
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
       const { props: props4 } = element;
-      if ((0, import_utils38.isObject)(props4) && (0, import_utils38.isString)(props4.variant))
+      if ((0, import_utils37.isObject)(props4) && (0, import_utils37.isString)(props4.variant))
         return true;
     };
     var overwriteVariant = (element, variant, variantProps) => {
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props4 = (0, import_utils38.isObject)(variantProps) ? variantProps : {};
-      if ((0, import_utils38.isString)(variantElement)) {
+      const props4 = (0, import_utils37.isObject)(variantProps) ? variantProps : {};
+      if ((0, import_utils37.isString)(variantElement)) {
         variantElement = {
           extend: [{ props: props4 }, variantElement]
         };
       } else if (variantElement.extend) {
         variantElement = addAdditionalExtend({ props: props4 }, variantElement);
       }
-      return (0, import_utils38.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
+      return (0, import_utils37.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
     };
     var applyVariant = (element) => {
       const { props: props4 } = element;
@@ -14949,7 +14987,7 @@ var require_iterate = __commonJS({
       throughUpdatedExec: () => throughUpdatedExec
     });
     module2.exports = __toCommonJS12(iterate_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_utils210 = require_utils();
     var import_methods = require_methods2();
     var throughInitialExec = (element, exclude = {}) => {
@@ -14958,7 +14996,7 @@ var require_iterate = __commonJS({
         if (exclude[param])
           continue;
         const prop = element[param];
-        if ((0, import_utils38.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
+        if ((0, import_utils37.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
           ref.__exec[param] = prop;
           element[param] = prop(element, element.state);
         }
@@ -14973,7 +15011,7 @@ var require_iterate = __commonJS({
         if (isDefinedParam)
           continue;
         const newExec = ref.__exec[param](element, element.state, element.context);
-        const execReturnsString = (0, import_utils38.isString)(newExec) || (0, import_utils38.isNumber)(newExec);
+        const execReturnsString = (0, import_utils37.isString)(newExec) || (0, import_utils37.isNumber)(newExec);
         if (prop && prop.node && execReturnsString) {
           (0, import_utils210.overwrite)(prop, { text: newExec }, options);
         } else if (newExec !== prop) {
@@ -14991,16 +15029,16 @@ var require_iterate = __commonJS({
     var throughInitialDefine = (element) => {
       const { define, context, __ref: ref } = element;
       let defineObj = {};
-      const hasGlobalDefine = context && (0, import_utils38.isObject)(context.define);
-      if ((0, import_utils38.isObject)(define))
+      const hasGlobalDefine = context && (0, import_utils37.isObject)(context.define);
+      if ((0, import_utils37.isObject)(define))
         defineObj = { ...define };
       if (hasGlobalDefine)
         defineObj = { ...defineObj, ...context.define };
       for (const param in defineObj) {
         let elementProp = element[param];
-        if ((0, import_utils38.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
+        if ((0, import_utils37.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
           ref.__exec[param] = elementProp;
-          const execParam2 = elementProp = (0, import_utils38.exec)(elementProp, element);
+          const execParam2 = elementProp = (0, import_utils37.exec)(elementProp, element);
           if (execParam2) {
             elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
             ref.__defineCache[param] = elementProp;
@@ -15016,15 +15054,15 @@ var require_iterate = __commonJS({
       const { context, define, __ref: ref } = element;
       const changes = {};
       let obj = {};
-      if ((0, import_utils38.isObject)(define))
+      if ((0, import_utils37.isObject)(define))
         obj = { ...define };
-      if ((0, import_utils38.isObject)(context && context.define))
+      if ((0, import_utils37.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_utils38.exec)(ref.__defineCache[param], element);
+        const cached = (0, import_utils37.exec)(ref.__defineCache[param], element);
         const newExecParam = obj[param](cached, element, element.state, element.context);
         if (newExecParam)
           element[param] = newExecParam;
@@ -15060,7 +15098,7 @@ var require_applyParam = __commonJS({
       applyParam: () => applyParam
     });
     module2.exports = __toCommonJS12(applyParam_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_mixins = require_mixins();
     var applyParam = (param, element, options) => {
       const { node: node2, context, __ref: ref } = element;
@@ -15073,7 +15111,7 @@ var require_applyParam = __commonJS({
       if (!ref.__if)
         return;
       if (isGlobalTransformer && !hasContextDefine) {
-        if ((0, import_utils38.isFunction)(isGlobalTransformer)) {
+        if ((0, import_utils37.isFunction)(isGlobalTransformer)) {
           isGlobalTransformer(prop, element, node2, options);
           return;
         }
@@ -15109,14 +15147,14 @@ var require_propEvents = __commonJS({
       propagateEventsFromProps: () => propagateEventsFromProps
     });
     module2.exports = __toCommonJS12(propEvents_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var propagateEventsFromProps = (element) => {
       const { props: props4, on: on2 } = element;
       const eventKeysFromProps = Object.keys(props4).filter((key) => key.startsWith("on"));
       eventKeysFromProps.forEach((v) => {
-        const eventName = (0, import_utils38.lowercaseFirstLetter)(v.split("on")[1]);
+        const eventName = (0, import_utils37.lowercaseFirstLetter)(v.split("on")[1]);
         const origEvent = on2[eventName];
-        if ((0, import_utils38.isFunction)(origEvent)) {
+        if ((0, import_utils37.isFunction)(origEvent)) {
           on2[eventName] = (...args) => {
             const originalEventRetunrs = origEvent(...args);
             if (originalEventRetunrs !== false)
@@ -15166,7 +15204,7 @@ var require_node2 = __commonJS({
       default: () => node_default
     });
     module2.exports = __toCommonJS12(node_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_event = require_cjs4();
     var import_render = require_cjs8();
     var import_methods = require_methods2();
@@ -15192,27 +15230,27 @@ var require_node2 = __commonJS({
       }
       if (ENV2 === "test" || ENV2 === "development" || options.alowRefReference) {
         node2.ref = element;
-        if ((0, import_utils38.isFunction)(node2.setAttribute))
+        if ((0, import_utils37.isFunction)(node2.setAttribute))
           node2.setAttribute("key", element.key);
       }
       (0, import_iterate.throughInitialDefine)(element);
       (0, import_iterate.throughInitialExec)(element);
       if (element.tag !== "string" && element.tag !== "fragment") {
         (0, import_propEvents.propagateEventsFromProps)(element);
-        if (isNewNode && (0, import_utils38.isObject)(element.on))
+        if (isNewNode && (0, import_utils37.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element, options);
       }
       for (const param in element) {
         const value2 = element[param];
         if (!Object.hasOwnProperty.call(element, param))
           continue;
-        if ((0, import_utils38.isUndefined)(value2) || (0, import_methods.isMethod)(param) || (0, import_utils210.isVariant)(param) || (0, import_utils38.isObject)(import_mixins.registry[param]))
+        if ((0, import_utils37.isUndefined)(value2) || (0, import_methods.isMethod)(param) || (0, import_utils210.isVariant)(param) || (0, import_utils37.isObject)(import_mixins.registry[param]))
           continue;
         const isElement = (0, import_applyParam.applyParam)(param, element, options);
         if (isElement) {
           const { hasDefine, hasContextDefine } = isElement;
           if (element[param] && !hasDefine && !hasContextDefine) {
-            const createAsync3 = () => (0, import_create.default)((0, import_utils38.exec)(value2, element), element, param, options);
+            const createAsync3 = () => (0, import_create.default)((0, import_utils37.exec)(value2, element), element, param, options);
             if (element.props && element.props.lazyLoad || options.lazyLoad) {
               window.requestAnimationFrame(() => createAsync3());
             } else
@@ -15252,7 +15290,7 @@ var require_methods3 = __commonJS({
       DEFAULT_METHODS: () => DEFAULT_METHODS
     });
     module2.exports = __toCommonJS12(methods_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var DEFAULT_METHODS = {
       key: {},
       tag: {},
@@ -15273,7 +15311,7 @@ var require_methods3 = __commonJS({
       text: (element, state) => {
         element.ref.text = {
           tag: "text",
-          text: (0, import_utils38.exec)(element.text, element, state)
+          text: (0, import_utils37.exec)(element.text, element, state)
         };
       },
       innerHTML: {},
@@ -15510,7 +15548,7 @@ var require_update2 = __commonJS({
       default: () => update_default
     });
     module2.exports = __toCommonJS12(update_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_event = require_cjs4();
     var import_methods = require_methods2();
     var import_props = require_props();
@@ -15522,7 +15560,7 @@ var require_update2 = __commonJS({
     var import_applyParam = require_applyParam();
     var import_options5 = __toESM6(require_options(), 1);
     var snapshot = {
-      snapshotId: import_utils38.createSnapshotId
+      snapshotId: import_utils37.createSnapshotId
     };
     var UPDATE_DEFAULT_OPTIONS = {
       stackChanges: false,
@@ -15544,14 +15582,14 @@ var require_update2 = __commonJS({
       if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
         return;
       if (!excludes)
-        (0, import_utils38.merge)(options, UPDATE_DEFAULT_OPTIONS);
+        (0, import_utils37.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_utils38.isString)(params) || (0, import_utils38.isNumber)(params)) {
+      if ((0, import_utils37.isString)(params) || (0, import_utils37.isNumber)(params)) {
         params = { text: params };
       }
       const inheritState = inheritStateUpdates(element, options);
@@ -15562,7 +15600,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_utils38.isFunction)(v));
+        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils37.isFunction)(v));
         const props4 = params.props || hasParentProps || hasFunctionInProps.length;
         if (props4)
           (0, import_props.updateProps)(props4, element, parent);
@@ -15572,14 +15610,14 @@ var require_update2 = __commonJS({
         if (initUpdateReturns === false)
           return element;
       }
-      const overwriteChanges = (0, import_utils38.overwriteDeep)(element, params, import_utils210.METHODS_EXL);
+      const overwriteChanges = (0, import_utils37.overwriteDeep)(element, params, import_utils210.METHODS_EXL);
       const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
       const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
       if (!options.isForced && !options.preventListeners) {
         (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
       }
       if (options.stackChanges && element.__stackChanges) {
-        const stackChanges = (0, import_utils38.merge)(definedChanges, (0, import_utils38.merge)(execChanges, overwriteChanges));
+        const stackChanges = (0, import_utils37.merge)(definedChanges, (0, import_utils37.merge)(execChanges, overwriteChanges));
         element.__stackChanges.push(stackChanges);
       }
       if (!ref.__if)
@@ -15599,7 +15637,7 @@ var require_update2 = __commonJS({
         preventUpdateAfterCount
       } = options;
       if (preventUpdateAfter) {
-        if ((0, import_utils38.isNumber)(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount)
+        if ((0, import_utils37.isNumber)(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount)
           return;
         else if (options.preventUpdateAfterCount === void 0)
           options.preventUpdateAfterCount = 1;
@@ -15611,17 +15649,17 @@ var require_update2 = __commonJS({
         if (!Object.hasOwnProperty.call(element, param))
           continue;
         const hasOnlyUpdateFalsy = onlyUpdate && (onlyUpdate !== param || !element.lookup(onlyUpdate));
-        const isInPreventUpdate = (0, import_utils38.isArray)(preventUpdate) && preventUpdate.includes(param);
-        const isInPreventDefineUpdate = (0, import_utils38.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param);
+        const isInPreventUpdate = (0, import_utils37.isArray)(preventUpdate) && preventUpdate.includes(param);
+        const isInPreventDefineUpdate = (0, import_utils37.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param);
         const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
-        if ((0, import_utils38.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils38.isObject)(import_mixins.registry[param]) || (0, import_utils210.isVariant)(param))
+        if ((0, import_utils37.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils37.isObject)(import_mixins.registry[param]) || (0, import_utils210.isVariant)(param))
           continue;
         if (preventStateUpdate === "once")
           options.preventStateUpdate = false;
         const isElement = (0, import_applyParam.applyParam)(param, element, options);
         if (isElement) {
           const { hasDefine, hasContextDefine } = isElement;
-          const canUpdate = (0, import_utils38.isObject)(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
+          const canUpdate = (0, import_utils37.isObject)(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
           if (!canUpdate)
             continue;
           const lazyLoad = element.props.lazyLoad || options.lazyLoad;
@@ -15630,7 +15668,7 @@ var require_update2 = __commonJS({
             currentSnapshot: snapshotOnCallee,
             calleeElement
           });
-          lazyLoad ? import_utils38.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
+          lazyLoad ? import_utils37.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
         }
       }
       if (!preventUpdateListener)
@@ -15653,7 +15691,7 @@ var require_update2 = __commonJS({
     };
     var checkIfOnUpdate = (element, parent, options) => {
       var _a;
-      if (!(0, import_utils38.isFunction)(element.if) || !parent)
+      if (!(0, import_utils37.isFunction)(element.if) || !parent)
         return;
       const ref = element.__ref;
       const ifPassed = element.if(element, element.state, element.context, options);
@@ -15693,7 +15731,7 @@ var require_update2 = __commonJS({
           delete element.__ref;
           delete element.parent;
           const created = (0, import_create.default)(element, parent, element.key, import_options5.default.create, attachOptions);
-          if (options.preventUpdate !== true && element.on && (0, import_utils38.isFunction)(element.on.update)) {
+          if (options.preventUpdate !== true && element.on && (0, import_utils37.isFunction)(element.on.update)) {
             (0, import_event.applyEvent)(element.on.update, created, created.state);
           }
           return created;
@@ -15714,9 +15752,9 @@ var require_update2 = __commonJS({
         element.state = parent && parent.state || {};
         return;
       }
-      const shouldForceFunctionState = (0, import_utils38.isFunction)(stateKey) && !isHoisted && execStateFunction;
+      const shouldForceFunctionState = (0, import_utils37.isFunction)(stateKey) && !isHoisted && execStateFunction;
       if (shouldForceFunctionState) {
-        const execState = (0, import_utils38.exec)(stateKey, element);
+        const execState = (0, import_utils37.exec)(stateKey, element);
         state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true });
         return;
       }
@@ -15784,7 +15822,7 @@ var require_set2 = __commonJS({
       addMethods: () => addMethods
     });
     module2.exports = __toCommonJS12(set_exports);
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_set = __toESM6(require_set(), 1);
     var import_update = __toESM6(require_update2(), 1);
     var import__ = require_methods2();
@@ -15805,7 +15843,7 @@ var require_set2 = __commonJS({
         nextElement: import__.nextElement.bind(element),
         previousElement: import__.previousElement.bind(element)
       };
-      if ((0, import_utils38.isDevelopment)())
+      if ((0, import_utils37.isDevelopment)())
         proto.log = import__.log.bind(element);
       Object.setPrototypeOf(element, proto);
     };
@@ -15861,7 +15899,7 @@ var require_create4 = __commonJS({
     var import_set = require_set2();
     var import_classList = require_classList();
     var import_iterate = require_iterate();
-    var import_utils38 = require_cjs();
+    var import_utils37 = require_cjs();
     var import_options5 = __toESM6(require_options(), 1);
     var import_component = require_component();
     var ENV2 = "development";
@@ -15874,7 +15912,7 @@ var require_create4 = __commonJS({
       parent = redefineParent(element, parent, key);
       key = createKey(element, parent, key);
       const ref = addRef(element, parent, key);
-      ref.__initialProps = (0, import_utils38.deepClone)(element.props, []);
+      ref.__initialProps = (0, import_utils37.deepClone)(element.props, []);
       applyContext(element, parent, options);
       (0, import_component.applyComponentFromContext)(element, parent, options);
       if (!ref.__skipCreate) {
@@ -15917,7 +15955,7 @@ var require_create4 = __commonJS({
         }
         return {};
       }
-      if ((0, import_utils38.isString)(key) && key.slice(0, 2 === "__")) {
+      if ((0, import_utils37.isString)(key) && key.slice(0, 2 === "__")) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "seems like to be in __ref");
         }
@@ -15950,7 +15988,7 @@ var require_create4 = __commonJS({
     var redefineParent = (element, parent, key, options) => {
       if (!parent)
         return import_tree.ROOT;
-      if ((0, import_utils38.isNode)(parent)) {
+      if ((0, import_utils37.isNode)(parent)) {
         const parentNodeWrapper = { key: ":root", node: parent };
         import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
         return parentNodeWrapper;
@@ -15964,7 +16002,7 @@ var require_create4 = __commonJS({
       }
     };
     var createKey = (element, parent, key) => {
-      return ((0, import_utils38.exec)(key, element) || key || element.key || (0, import_utils38.generateKey)()).toString();
+      return ((0, import_utils37.exec)(key, element) || key || element.key || (0, import_utils37.generateKey)()).toString();
     };
     var addRef = (element, parent) => {
       if (element.__ref)
@@ -16001,7 +16039,7 @@ var require_create4 = __commonJS({
       (0, import_event.triggerEventOn)("render", element, options);
       (0, import_event.triggerEventOn)("done", element, options);
     };
-    var checkIfPrimitive = (element) => (0, import_utils38.is)(element)("string", "number");
+    var checkIfPrimitive = (element) => (0, import_utils37.is)(element)("string", "number");
     var applyValueAsText = (element, parent, key) => {
       const extendTag = element.extend && element.extend.tag;
       const childExtendTag = parent.childExtend && parent.childExtend.tag;
@@ -16025,7 +16063,7 @@ var require_create4 = __commonJS({
     };
     var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
-      if ((0, import_utils38.isFunction)(element.if) && !element.if(element, element.state)) {
+      if ((0, import_utils37.isFunction)(element.if) && !element.if(element, element.state)) {
         delete ref.__if;
       } else
         ref.__if = true;
@@ -16086,7 +16124,7 @@ var require_create4 = __commonJS({
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
         for (const k in element) {
-          if ((0, import_utils38.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils38.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
+          if ((0, import_utils37.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils37.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
             continue;
           const hasDefine = element.define && element.define[k];
           const contextHasDefine = element.context && element.context.define && element.context.define[k];
@@ -16094,7 +16132,7 @@ var require_create4 = __commonJS({
           if (!ref.__skipCreate && import_mixins.registry[k] && !optionsHasDefine) {
             continue;
           } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-            create3((0, import_utils38.exec)(element[k], element), element, k, options);
+            create3((0, import_utils37.exec)(element[k], element), element, k, options);
           }
         }
       }
@@ -16512,12 +16550,13 @@ var init_prepare = __esm({
     prepareUtils = (options) => {
       return { ...utils2, ...utils2.scratchUtils, ...options.snippets || options.utils || {} };
     };
-    preparePackages = (packages, options) => {
-      if (window.packages) {
-        window.packages = (0, import_utils15.merge)(window.packages, packages);
+    preparePackages = (packages, opts) => {
+      const windowOpts = opts.window || window;
+      if (windowOpts.packages) {
+        windowOpts.packages = (0, import_utils15.merge)(windowOpts.packages, packages);
       } else {
-        window.packages = packages;
-        window.require = (key) => window.packages[key];
+        windowOpts.packages = packages;
+        windowOpts.require = (key) => windowOpts.packages[key];
       }
     };
     prepareDesignSystem = (options, key) => {
@@ -16552,6 +16591,10 @@ var init_prepare = __esm({
           window.document = { body: {} };
         document = window.document;
       }
+      if (!options.window)
+        options.window = window;
+      if (!options.document)
+        options.document = document;
       return options.parent || options.document || document;
     };
   }
@@ -16637,6 +16680,7 @@ var init_createDomql = __esm({
           registry,
           emotion: emotion2,
           routerOptions,
+          socket: options.socket,
           editor: options.editor,
           document: doc
         }
@@ -17037,8 +17081,8 @@ var init_style = __esm({
       return (0, import_scratch7.getColor)(props4.shapeDirectionColor) || (0, import_scratch7.getColor)(props4.borderColor) || (0, import_scratch7.getColor)(props4.backgroundColor) || (0, import_scratch7.getColor)(props4.background);
     };
     inheritTransition = ({ props: props4, deps }) => {
-      const exec5 = Timing.class.transition({ props: props4, deps });
-      return exec5 && exec5.transition;
+      const exec4 = Timing.class.transition({ props: props4, deps });
+      return exec4 && exec4.transition;
     };
     SHAPES = {
       rectangle: {},
@@ -17743,14 +17787,15 @@ var init_Collection = __esm({
     Collection = {
       define: {
         $collection: (param, el, state) => {
-          var _a, _b, _c;
+          var _a, _b, _c, _d;
           const { __ref: ref } = el;
           const hasChildren = (0, import_utils20.isArray)((_a = el.props) == null ? void 0 : _a.children);
           if (hasChildren) {
             param = (_b = el.props) == null ? void 0 : _b.children;
             const childrenAs = (_c = el.props) == null ? void 0 : _c.childrenAs;
+            const extend = (_d = el.props) == null ? void 0 : _d.childrenExtend;
             if (childrenAs)
-              param = param.map((v) => ({ [childrenAs]: v }));
+              param = param.map((v) => ({ extend, [childrenAs]: v }));
           } else if (!param)
             return;
           if ((0, import_utils20.isString)(param)) {
@@ -18377,17 +18422,16 @@ var import_utils25, Icon, IconText, FileIcon;
 var init_Icon = __esm({
   "../uikit/Icon/index.js"() {
     "use strict";
-    init_Atoms();
     import_utils25 = __toESM(require_cjs());
     Icon = {
-      extend: Svg,
+      extend: "Svg",
       deps: { isString: import_utils25.isString },
       props: ({ key, props: props4, parent, context, deps }) => {
         const { ICONS, useIconSprite, verbose } = context && context.designSystem;
         const { toCamelCase: toCamelCase2 } = context && context.utils;
         const iconName = props4.name || props4.icon || key;
         const camelCase = toCamelCase2(deps.isString(iconName) ? iconName : key);
-        const isArray6 = camelCase.split(/([a-z])([A-Z])/g);
+        const isArray7 = camelCase.split(/([a-z])([A-Z])/g);
         let activeIconName;
         if (props4.active) {
           activeIconName = props4[".active"].name || props4[".active"].icon;
@@ -18400,10 +18444,10 @@ var init_Icon = __esm({
           validIconName = activeIconName;
         if (ICONS[camelCase])
           validIconName = camelCase;
-        else if (ICONS[isArray6[0] + isArray6[1]])
-          validIconName = isArray6[0] + isArray6[1];
-        else if (ICONS[isArray6[0]])
-          validIconName = isArray6[0];
+        else if (ICONS[isArray7[0] + isArray7[1]])
+          validIconName = isArray7[0] + isArray7[1];
+        else if (ICONS[isArray7[0]])
+          validIconName = isArray7[0];
         else {
           if (verbose)
             console.warn("Can't find icon:", iconName, validIconName);
@@ -18422,7 +18466,7 @@ var init_Icon = __esm({
       attr: { viewBox: "0 0 24 24" }
     };
     IconText = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center center",
         lineHeight: 1
@@ -18443,7 +18487,7 @@ var init_Icon = __esm({
       }
     };
     FileIcon = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         theme: "tertiary",
         boxSize: "C1",
@@ -18482,9 +18526,8 @@ var CheckIndicator, CheckIndicatorWithLabel;
 var init_CheckIndicator = __esm({
   "../uikit/Indicator/CheckIndicator.js"() {
     "use strict";
-    init_Atoms();
     CheckIndicator = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         padding: "Y1",
         round: "100%",
@@ -18496,7 +18539,7 @@ var init_CheckIndicator = __esm({
       }
     };
     CheckIndicatorWithLabel = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center flex-start",
         gap: "Z"
@@ -18515,9 +18558,8 @@ var CountIndicator;
 var init_CountIndicator = __esm({
   "../uikit/Indicator/CountIndicator.js"() {
     "use strict";
-    init_Atoms();
     CountIndicator = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         text: "2",
         theme: "primary",
@@ -18538,7 +18580,6 @@ var RadioIndicator, RadioIndicatorWithLabel;
 var init_RadioIndicator = __esm({
   "../uikit/Indicator/RadioIndicator.js"() {
     "use strict";
-    init_Atoms();
     RadioIndicator = {
       props: {
         padding: "Z+V",
@@ -18555,7 +18596,7 @@ var init_RadioIndicator = __esm({
       }
     };
     RadioIndicatorWithLabel = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center flex-start",
         gap: "Z"
@@ -18689,9 +18730,8 @@ var UnitValue, DoubleUnitValue, UnitValueWithLabel, UnitValueWithTitle;
 var init_UnitValue = __esm({
   "../uikit/UnitValue/index.js"() {
     "use strict";
-    init_Atoms();
     UnitValue = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         color: "title",
         align: "center flex-start",
@@ -18703,7 +18743,7 @@ var init_UnitValue = __esm({
       Unit: { props: { text: "%" } }
     };
     DoubleUnitValue = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center flex-start",
         color: "caption",
@@ -18748,7 +18788,7 @@ var init_UnitValue = __esm({
       }
     };
     UnitValueWithTitle = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center flex-start",
         gap: "Y",
@@ -18773,15 +18813,13 @@ var init_UnitValue = __esm({
 });
 
 // ../uikit/Link/index.js
-var import_router5, import_utils26, Link, RouterLink, RouteLink;
+var import_router5, Link, RouterLink, RouteLink;
 var init_Link = __esm({
   "../uikit/Link/index.js"() {
     "use strict";
     import_router5 = __toESM(require_cjs5());
-    import_utils26 = __toESM(require_cjs());
-    init_Atoms();
     Link = {
-      extend: Focusable,
+      extend: "Focusable",
       tag: "a",
       props: {
         aria: {},
@@ -18793,8 +18831,8 @@ var init_Link = __esm({
       attr: {
         href: (el) => {
           const { context: ctx } = el;
-          const { exec: exec5 } = ctx.utils;
-          return exec5(el.props.href, el) || exec5(el.props, el).href;
+          const { exec: exec4 } = ctx.utils;
+          return exec4(el.props.href, el) || exec4(el.props, el).href;
         },
         target: ({ props: props4 }) => props4.target,
         "aria-label": ({ props: props4 }) => props4.aria ? props4.aria.label : props4.text,
@@ -18806,7 +18844,11 @@ var init_Link = __esm({
         click: (event, el, s) => {
           const { props: props4, context: ctx } = el;
           const { href: h, scrollToTop, stopPropagation } = props4;
-          const href = (0, import_utils26.exec)(h, el, s);
+          const { exec: exec4, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2, isDefined: isDefined2 } = ctx.utils;
+          let href = exec4(h, el, s);
+          if (isString14(href) && href.includes("{{")) {
+            href = replaceLiteralsWithObjectFields2(href, s);
+          }
           if (stopPropagation)
             event.stopPropagation();
           if (!href)
@@ -18818,7 +18860,7 @@ var init_Link = __esm({
             try {
               (snippets.router || utils4.router || import_router5.router)(href, root, {}, {
                 scrollToOptions: { behaviour: "instant" },
-                scrollToTop: (0, import_utils26.isDefined)(scrollToTop) ? scrollToTop : true,
+                scrollToTop: isDefined2(scrollToTop) ? scrollToTop : true,
                 ...routerOptions,
                 ...props4.routerOptions
               });
@@ -18875,7 +18917,7 @@ var init_DoubleHr = __esm({
     "use strict";
     init_Atoms();
     DoubleHr = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         gap: "B",
         fontSize: "Z1",
@@ -18900,15 +18942,15 @@ var init_DoubleHr = __esm({
 });
 
 // ../uikit/Input/Input.js
-var import_utils27, Input;
+var import_utils26, Input;
 var init_Input = __esm({
   "../uikit/Input/Input.js"() {
     "use strict";
-    import_utils27 = __toESM(require_cjs());
+    import_utils26 = __toESM(require_cjs());
     Input = {
       extend: ["Focusable"],
       tag: "input",
-      deps: { isString: import_utils27.isString, replaceLiteralsWithObjectFields: import_utils27.replaceLiteralsWithObjectFields },
+      deps: { isString: import_utils26.isString, replaceLiteralsWithObjectFields: import_utils26.replaceLiteralsWithObjectFields },
       props: {
         border: "none",
         type: "input",
@@ -18926,8 +18968,8 @@ var init_Input = __esm({
         autocomplete: ({ props: props4 }) => props4.autocomplete,
         placeholder: ({ props: props4 }) => props4.placeholder,
         value: ({ props: props4, state, deps }) => {
-          const { isString: isString13, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-          if (isString13(props4.value) && props4.value.includes("{{")) {
+          const { isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+          if (isString14(props4.value) && props4.value.includes("{{")) {
             return replaceLiteralsWithObjectFields2(props4.value, state);
           }
           return props4.value;
@@ -19163,7 +19205,7 @@ var init_Textarea = __esm({
       html: (el, s) => el.props.value
     };
     TextareaWithButton = {
-      extend: Flex,
+      extend: "Flex",
       props: { gap: "Y2" },
       Textarea: {
         height: "C2+W",
@@ -19238,10 +19280,8 @@ var CommonField, CommonFieldTemplate;
 var init_CommonField = __esm({
   "../uikit/Field/CommonField.js"() {
     "use strict";
-    init_Atoms();
-    init_Icon();
     CommonField = {
-      extend: Flex,
+      extend: "Flex",
       tag: "label",
       props: {
         flow: "column",
@@ -19260,7 +19300,7 @@ var init_CommonField = __esm({
         tag: "div"
       },
       Hint: {
-        extend: IconText,
+        extend: "IconText",
         props: {
           color: "caption",
           align: "center flex-start",
@@ -19272,7 +19312,7 @@ var init_CommonField = __esm({
       }
     };
     CommonFieldTemplate = {
-      extend: CommonField,
+      extend: "CommonField",
       Title: {},
       Field: {
         Icon: { props: { name: "info" } },
@@ -19335,7 +19375,7 @@ var init_Field = __esm({
       Button: { Icon: { name: "eye" } }
     };
     FieldWithTitle = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         flow: "column",
         boxSize: "fit-content fit-content",
@@ -19463,10 +19503,9 @@ var TextAreaField;
 var init_TextAreaField = __esm({
   "../uikit/Field/TextAreaField.js"() {
     "use strict";
-    init_Atoms();
     TextAreaField = {
       tag: "label",
-      extend: Focusable,
+      extend: "Focusable",
       props: {
         boxSize: "fit-content",
         border: "solid, gray .45 +80",
@@ -19510,10 +19549,8 @@ var Button, SquareButton, CircleButton, KangorooButton, FlexButton, ButtonSet, C
 var init_Button = __esm({
   "../uikit/Button/index.js"() {
     "use strict";
-    init_Atoms();
-    init_Icon();
     Button = {
-      extend: [IconText, FocusableComponent],
+      extend: ["IconText", "FocusableComponent"],
       tag: "button",
       props: {
         fontSize: "A",
@@ -19534,7 +19571,7 @@ var init_Button = __esm({
       }
     };
     SquareButton = {
-      extend: Button,
+      extend: "Button",
       props: {
         fontSize: "A",
         width: "A",
@@ -19548,15 +19585,15 @@ var init_Button = __esm({
       }
     };
     CircleButton = {
-      extend: SquareButton,
+      extend: "SquareButton",
       props: { round: "C" }
     };
     KangorooButton = {
-      extend: Button,
-      childExtend: IconText
+      extend: "Button",
+      childExtend: "IconText"
     };
     FlexButton = {
-      extend: Button,
+      extend: "Button",
       props: {
         boxSize: "fit-content",
         padding: "Z2 A2",
@@ -19570,17 +19607,17 @@ var init_Button = __esm({
     };
     ButtonSet = {
       tag: "nav",
-      extend: Flex,
-      childExtend: SquareButton
+      extend: "Flex",
+      childExtend: "SquareButton"
     };
     CancelConfirmButtons = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         gap: "Z2",
         maxWidth: "fit-content"
       },
       childExtend: {
-        extend: FlexButton,
+        extend: "FlexButton",
         props: {
           ":first-child": {
             theme: "transparent",
@@ -19594,7 +19631,7 @@ var init_Button = __esm({
       ]
     };
     IcontextButton = {
-      extend: FlexButton,
+      extend: "FlexButton",
       props: {
         position: "relative",
         theme: "tertiary",
@@ -19603,7 +19640,7 @@ var init_Button = __esm({
       }
     };
     DropDownButton = {
-      extend: FlexButton,
+      extend: "FlexButton",
       props: {
         gap: "X2",
         boxSize: "fit-content fit-content",
@@ -19617,7 +19654,7 @@ var init_Button = __esm({
       }
     };
     DropDownButtonWithAvatar = {
-      extend: DropDownButton,
+      extend: "DropDownButton",
       props: {
         gap: "Y",
         padding: "Y",
@@ -19637,18 +19674,18 @@ var init_Button = __esm({
       }
     };
     PlusMinusButtons = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         alignItems: "center",
         gap: "A"
       },
       Minus: {
-        extend: SquareButton,
+        extend: "SquareButton",
         props: { icon: "minus" }
       },
       Value: { props: { text: "1" } },
       Plus: {
-        extend: SquareButton,
+        extend: "SquareButton",
         props: { icon: "plus" }
       }
     };
@@ -19660,7 +19697,6 @@ var ProgressLine, ProgressLineWithUnitValue;
 var init_ProgressLine = __esm({
   "../uikit/Progress/ProgressLine.js"() {
     "use strict";
-    init_Atoms();
     ProgressLine = {
       tag: "progress",
       props: {
@@ -19685,7 +19721,7 @@ var init_ProgressLine = __esm({
       }
     };
     ProgressLineWithUnitValue = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center flex-start",
         gap: "Z1"
@@ -19703,7 +19739,6 @@ var ProgressCircle, ProgressCircleWithIcon, ProgressCircleWithUnitValue, Progres
 var init_ProgressCircle = __esm({
   "../uikit/Progress/ProgressCircle.js"() {
     "use strict";
-    init_Atoms();
     ProgressCircle = {
       props: {
         widthRange: "D",
@@ -19765,7 +19800,7 @@ var init_ProgressCircle = __esm({
       }
     };
     ProgressCircleWithSideUnitValue = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         align: "center flex-start",
         boxSize: "fit-content",
@@ -19793,13 +19828,12 @@ var init_Progress = __esm({
 });
 
 // ../uikit/Range/index.js
-var import_utils28, import_scratch13, props, returnPropertyValue, Range, RangeWithButtons;
+var import_utils27, import_scratch13, props, returnPropertyValue, Range, RangeWithButtons;
 var init_Range = __esm({
   "../uikit/Range/index.js"() {
     "use strict";
-    import_utils28 = __toESM(require_cjs());
+    import_utils27 = __toESM(require_cjs());
     import_scratch13 = __toESM(require_cjs2());
-    init_Button();
     props = {
       appearance: "none",
       width: "100%",
@@ -19861,7 +19895,7 @@ var init_Range = __esm({
     };
     returnPropertyValue = (el, property, def) => {
       const val = el.props && el.props[property];
-      const r = (0, import_utils28.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
+      const r = (0, import_utils27.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
       return r + "";
     };
     Range = {
@@ -19877,7 +19911,7 @@ var init_Range = __esm({
       on: {
         input: (ev, el, s) => {
           const props4 = el.props;
-          if ((0, import_utils28.isFunction)(props4.onInput)) {
+          if ((0, import_utils27.isFunction)(props4.onInput)) {
             props4.onInput(ev, el, s);
           } else {
             s.update({ value: parseFloat(el.node.value) });
@@ -19885,7 +19919,7 @@ var init_Range = __esm({
         },
         change: (ev, el, s) => {
           const props4 = el.props;
-          if ((0, import_utils28.isFunction)(props4.onChange)) {
+          if ((0, import_utils27.isFunction)(props4.onChange)) {
             props4.onChange(ev, el, s);
           } else {
             s.update({ value: parseFloat(el.node.value) });
@@ -19895,12 +19929,12 @@ var init_Range = __esm({
     };
     RangeWithButtons = {
       minus: {
-        extend: SquareButton,
+        extend: "SquareButton",
         props: { theme: "field", icon: "minus" },
         on: {
           click: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils28.isFunction)(parentProps.onDecrease)) {
+            if ((0, import_utils27.isFunction)(parentProps.onDecrease)) {
               parentProps.onDecrease(ev, el.parent, s);
             } else {
               const value2 = parseFloat(s.value);
@@ -19932,7 +19966,7 @@ var init_Range = __esm({
         on: {
           input: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils28.isFunction)(parentProps.onInput)) {
+            if ((0, import_utils27.isFunction)(parentProps.onInput)) {
               parentProps.onInput(ev, el, s);
             } else {
               s.update({ value: parseFloat(el.node.value) });
@@ -19940,7 +19974,7 @@ var init_Range = __esm({
           },
           change: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils28.isFunction)(parentProps.onChange)) {
+            if ((0, import_utils27.isFunction)(parentProps.onChange)) {
               parentProps.onChange(ev, el, s);
             } else {
               s.update({ value: parseFloat(el.node.value) });
@@ -19949,12 +19983,12 @@ var init_Range = __esm({
         }
       },
       plus: {
-        extend: SquareButton,
+        extend: "SquareButton",
         props: { theme: "field", icon: "plus" },
         on: {
           click: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils28.isFunction)(parentProps.onIncrease)) {
+            if ((0, import_utils27.isFunction)(parentProps.onIncrease)) {
               parentProps.onIncrease(ev, el.parent, s);
             } else {
               const value2 = parseFloat(s.value);
@@ -19997,12 +20031,12 @@ var init_style2 = __esm({
 });
 
 // ../uikit/Slider/index.js
-var import_utils29, RangeSlider, listenProp, Slider;
+var import_utils28, RangeSlider, listenProp, Slider;
 var init_Slider = __esm({
   "../uikit/Slider/index.js"() {
     "use strict";
     init_style2();
-    import_utils29 = __toESM(require_cjs());
+    import_utils28 = __toESM(require_cjs());
     init_Button();
     RangeSlider = {
       props: {
@@ -20014,7 +20048,7 @@ var init_Slider = __esm({
     };
     listenProp = (el, prop, def) => {
       const val = el && el.props && el.props[prop];
-      const r = ((0, import_utils29.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+      const r = ((0, import_utils28.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
       return r;
     };
     Slider = {
@@ -20025,10 +20059,10 @@ var init_Slider = __esm({
         },
         on: {
           click: (ev, el, s) => {
-            el.props && (0, import_utils29.isFunction)(el.props.click) && el.props.click(ev, el, s);
+            el.props && (0, import_utils28.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
             const props4 = input.props;
-            const value2 = (0, import_utils29.isFunction)(props4.value) ? props4.value() : props4.value;
+            const value2 = (0, import_utils28.isFunction)(props4.value) ? props4.value() : props4.value;
             input.node.value = value2;
           }
         }
@@ -20051,8 +20085,8 @@ var init_Slider = __esm({
           step: (el, s) => listenProp(el, "step", 1)
         },
         on: {
-          input: (ev, el, s) => el.props && (0, import_utils29.isFunction)(el.props.input) && el.props.input(ev, el, s),
-          change: (ev, el, s) => el.props && (0, import_utils29.isFunction)(el.props.change) && el.props.change(ev, el, s)
+          input: (ev, el, s) => el.props && (0, import_utils28.isFunction)(el.props.input) && el.props.input(ev, el, s),
+          change: (ev, el, s) => el.props && (0, import_utils28.isFunction)(el.props.change) && el.props.change(ev, el, s)
         }
       },
       button1: {
@@ -20062,10 +20096,10 @@ var init_Slider = __esm({
         },
         on: {
           click: (ev, el, s) => {
-            el.props && (0, import_utils29.isFunction)(el.props.click) && el.props.click(ev, el, s);
+            el.props && (0, import_utils28.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
             const props4 = input.props;
-            const value2 = (0, import_utils29.isFunction)(props4.value) ? props4.value() : props4.value;
+            const value2 = (0, import_utils28.isFunction)(props4.value) ? props4.value() : props4.value;
             input.node.value = value2;
           }
         }
@@ -20079,10 +20113,8 @@ var Label, LabelButton, CardLabel;
 var init_Label = __esm({
   "../uikit/Label/index.js"() {
     "use strict";
-    init_Atoms();
-    init_Button();
     Label = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         text: "-2.902x",
         fontSize: "Z",
@@ -20095,7 +20127,7 @@ var init_Label = __esm({
       }
     };
     LabelButton = {
-      extend: Button,
+      extend: "Button",
       props: {
         theme: "tertiary",
         fontSize: "Z2",
@@ -20129,9 +20161,8 @@ var Avatar;
 var init_Avatar = __esm({
   "../uikit/Avatar/Avatar.js"() {
     "use strict";
-    init_Atoms();
     Avatar = {
-      extend: Img,
+      extend: "Img",
       props: ({ key, props: props4 }) => ({
         display: "block",
         avatarType: "adventurer-neutral",
@@ -20170,10 +20201,9 @@ var AvatarBundle;
 var init_AvatarBundle = __esm({
   "../uikit/Avatar/AvatarBundle.js"() {
     "use strict";
-    init_Atoms();
     init_Avatar();
     AvatarBundle = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         childProps: {
           "@light": {
@@ -20198,9 +20228,8 @@ var AvatarChooser;
 var init_AvatarChooser = __esm({
   "../uikit/Avatar/AvatarChooser.js"() {
     "use strict";
-    init_Button();
     AvatarChooser = {
-      extend: Button,
+      extend: "Button",
       tag: "label",
       state: { key: "am" },
       props: {
@@ -20281,9 +20310,8 @@ var Notification, NotificationIndicator;
 var init_Notification = __esm({
   "../uikit/Notification/index.js"() {
     "use strict";
-    init_Atoms();
     Notification = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         theme: "alert",
         padding: "Z1 B Z A",
@@ -20323,7 +20351,7 @@ var init_Notification = __esm({
       }
     };
     NotificationIndicator = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         text: "2",
         fontSize: "Z",
@@ -20338,14 +20366,13 @@ var init_Notification = __esm({
 });
 
 // ../uikit/Tooltip/index.js
-var import_utils30, Tooltip, TooltipHidden, TooltipParent;
+var import_utils29, Tooltip, TooltipHidden, TooltipParent;
 var init_Tooltip = __esm({
   "../uikit/Tooltip/index.js"() {
     "use strict";
-    import_utils30 = __toESM(require_cjs());
-    init_Atoms();
+    import_utils29 = __toESM(require_cjs());
     Tooltip = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         theme: "dialog",
         background: "black",
@@ -20362,7 +20389,7 @@ var init_Tooltip = __esm({
       },
       attr: { tooltip: true },
       Title: {
-        if: ({ parent, props: props4 }) => (0, import_utils30.isDefined)(parent.props.title) || props4.text,
+        if: ({ parent, props: props4 }) => (0, import_utils29.isDefined)(parent.props.title) || props4.text,
         props: ({ parent }) => ({
           width: "fit-content",
           fontWeight: 500,
@@ -20371,7 +20398,7 @@ var init_Tooltip = __esm({
         })
       },
       P: {
-        if: ({ parent, props: props4 }) => (0, import_utils30.isDefined)(parent.props.description) || props4.text,
+        if: ({ parent, props: props4 }) => (0, import_utils29.isDefined)(parent.props.description) || props4.text,
         props: ({ parent }) => ({
           width: "fit-content",
           fontSize: "Z2",
@@ -20460,9 +20487,8 @@ var Pills;
 var init_Pills = __esm({
   "../uikit/Pills/index.js"() {
     "use strict";
-    init_Atoms();
     Pills = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         gap: "Y2"
       },
@@ -20531,9 +20557,8 @@ var CheckStep, CheckSteps;
 var init_CheckSteps = __esm({
   "../uikit/Steps/CheckSteps.js"() {
     "use strict";
-    init_Atoms();
     CheckStep = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         align: "center flex-start",
@@ -20559,7 +20584,7 @@ var init_CheckSteps = __esm({
       }
     };
     CheckSteps = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content fit-content",
         align: "center flex-start",
@@ -20600,7 +20625,6 @@ var RadioStep, RadioSteps;
 var init_RadioSteps = __esm({
   "../uikit/Steps/RadioSteps.js"() {
     "use strict";
-    init_Atoms();
     init_CheckSteps();
     RadioStep = {
       extend: CheckStep,
@@ -20619,7 +20643,7 @@ var init_RadioSteps = __esm({
       ProgressLine: {}
     };
     RadioSteps = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content fit-content",
         align: "center flex-start",
@@ -20660,10 +20684,9 @@ var LineSteps, LineStepsWithHgroup;
 var init_LineSteps = __esm({
   "../uikit/Steps/LineSteps.js"() {
     "use strict";
-    init_Atoms();
     init_Progress();
     LineSteps = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         gap: "Y1"
@@ -20684,7 +20707,7 @@ var init_LineSteps = __esm({
       ]
     };
     LineStepsWithHgroup = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         flow: "column",
         padding: "A A1",
@@ -20730,9 +20753,8 @@ var ParagraphButton, ParagraphButtonWithCheckbox;
 var init_ParagraphButton = __esm({
   "../uikit/ParagraphButton/index.js"() {
     "use strict";
-    init_Atoms();
     ParagraphButton = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         alignItems: "center",
         gap: "Y2"
@@ -20754,7 +20776,7 @@ var init_ParagraphButton = __esm({
       }
     };
     ParagraphButtonWithCheckbox = {
-      extend: Flex,
+      extend: "Flex",
       tag: "label",
       props: {
         gap: "1ch",
@@ -21110,14 +21132,14 @@ var init_List = __esm({
       }
     };
     DotList = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         flow: "column",
         gap: "Z2"
       },
       childExtend: {
         tag: "caption",
-        extend: Flex,
+        extend: "Flex",
         props: {
           align: "center flex-start",
           lineHeight: "1em",
@@ -21145,7 +21167,7 @@ var init_ListWithTitle = __esm({
     init_Atoms();
     init_List();
     ListWithTitle = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         flow: "column",
         overflow: "hidden",
@@ -21200,7 +21222,7 @@ var init_GroupList = __esm({
     init_Atoms();
     init_ListWithTitle();
     GroupList = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         flow: "column",
         overflow: "hidden",
@@ -21210,7 +21232,7 @@ var init_GroupList = __esm({
         maxWidth: "G"
       },
       Header: {
-        extend: Flex,
+        extend: "Flex",
         props: {
           text: "Header",
           padding: "Z2 A",
@@ -21239,7 +21261,7 @@ var init_GroupList = __esm({
           }
         },
         Flex: {
-          extend: Flex,
+          extend: "Flex",
           props: {
             flow: "column",
             maxHeight: "G2",
@@ -21358,7 +21380,7 @@ var init_GroupListWithSearch = __esm({
       },
       Header: {},
       SearchContainer: {
-        extend: Flex,
+        extend: "Flex",
         props: {
           padding: "0 Z1 Y2 Z1",
           background: "transparent"
@@ -21463,7 +21485,6 @@ var props2, TimePickerItem;
 var init_TimePickerItem = __esm({
   "../uikit/TimePicker/TimePickerItem.js"() {
     "use strict";
-    init_Atoms();
     props2 = {
       align: "center center",
       flow: "column",
@@ -21477,7 +21498,7 @@ var init_TimePickerItem = __esm({
     };
     TimePickerItem = {
       tag: "label",
-      extend: Flex,
+      extend: "Flex",
       props: props2,
       Button_plus: { icon: "plus" },
       NumberInput: {
@@ -21510,7 +21531,6 @@ var props3, TimeSwitcher;
 var init_TimeSwitcher = __esm({
   "../uikit/TimePicker/TimeSwitcher.js"() {
     "use strict";
-    init_Atoms();
     init_Button();
     props3 = {
       boxSize: "C B2",
@@ -21521,7 +21541,7 @@ var init_TimeSwitcher = __esm({
     };
     TimeSwitcher = {
       props: props3,
-      extend: Flex,
+      extend: "Flex",
       childExtend: {
         extend: Button,
         props: ({ state, key }) => ({
@@ -21707,7 +21727,6 @@ var CommonForm;
 var init_CommonForm = __esm({
   "../uikit/Form/CommonForm.js"() {
     "use strict";
-    init_Atoms();
     init_Modal2();
     init_Field2();
     CommonForm = {
@@ -21728,7 +21747,7 @@ var init_CommonForm = __esm({
         }
       },
       Form: {
-        extend: Flex,
+        extend: "Flex",
         props: {
           flow: "column",
           "> div ~ button": { padding: "Z2+V1 -" },
@@ -21736,7 +21755,7 @@ var init_CommonForm = __esm({
           "> div ~ div:last-child > button:first-child": { padding: "Z2+V Z" }
         },
         Fields: {
-          extend: Grid,
+          extend: "Grid",
           props: {
             columnGap: "A",
             rowGap: "A1"
@@ -21806,7 +21825,7 @@ var init_VerificationCode = __esm({
         }
       }
       // Form: {
-      //   extend: Flex,
+      //   extend: 'Flex',
       //   props: { flow: 'column' },
       //   NumberFields: {
       //     justifyContent: 'space-between',
@@ -21851,7 +21870,7 @@ var init_VerificationCode = __esm({
       //     gap: 'A2'
       //   },
       //   Fields: {
-      //     extend: Flex,
+      //     extend: 'Flex',
       //     props: {
       //       justifyContent: 'space-between',
       //       flex: '1'
@@ -22090,8 +22109,6 @@ var LogIn;
 var init_LogIn = __esm({
   "../uikit/Form/LogIn.js"() {
     "use strict";
-    init_Atoms();
-    init_Button();
     init_SocialLink();
     init_CommonForm();
     LogIn = {
@@ -22136,14 +22153,14 @@ var init_LogIn = __esm({
           }
         },
         Submit: {
-          extend: FlexButton,
+          extend: "",
           props: { margin: "A - - -" },
           text: "Sign in"
         }
       },
       DoubleHr: {},
       ModalFooter: {
-        extend: Flex,
+        extend: "Flex",
         props: {
           flow: "column",
           gap: "Z2"
@@ -22179,7 +22196,6 @@ var UploadImage, UploadIcon;
 var init_UploadImage = __esm({
   "../uikit/Upload/UploadImage.js"() {
     "use strict";
-    init_Atoms();
     UploadImage = {
       props: {
         padding: "A+V",
@@ -22192,7 +22208,7 @@ var init_UploadImage = __esm({
       }
     };
     UploadIcon = {
-      extend: [Focusable, Flex],
+      extend: ["Focusable", "Flex"],
       tag: "label",
       props: {
         position: "relative",
@@ -22282,7 +22298,7 @@ var init_UploadLabel = __esm({
     "use strict";
     init_Atoms();
     UploadLabel = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         flow: "column",
         align: "center flex-start",
@@ -22356,7 +22372,7 @@ var init_UploadModal = __esm({
     init_UploadButton();
     init_Modal2();
     UploadFooter = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         gap: "E",
         align: "center space-between",
@@ -22692,9 +22708,8 @@ var User;
 var init_User = __esm({
   "../uikit/User/User.js"() {
     "use strict";
-    init_Atoms();
     User = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         theme: "dialog",
@@ -22733,7 +22748,6 @@ var ChatUser;
 var init_ChatUser = __esm({
   "../uikit/User/ChatUser.js"() {
     "use strict";
-    init_Atoms();
     init_User2();
     init_UnitValue();
     ChatUser = {
@@ -22759,7 +22773,7 @@ var init_ChatUser = __esm({
         Paragraph: {
           props: { gap: "C1" },
           p: {
-            extend: Flex,
+            extend: "Flex",
             props: {
               text: "Hey team, I\u2019ve finished the requirements document",
               maxWidth: "F1",
@@ -22779,9 +22793,8 @@ var UserButtonSet, UserButtonSetCircle;
 var init_UserButtonSet = __esm({
   "../uikit/User/UserButtonSet.js"() {
     "use strict";
-    init_Atoms();
     UserButtonSet = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         theme: "dialog",
@@ -22895,10 +22908,9 @@ var UserWithButton;
 var init_UserWithButton = __esm({
   "../uikit/User/UserWithButton.js"() {
     "use strict";
-    init_Atoms();
     init_User();
     UserWithButton = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         theme: "dialog",
@@ -23077,7 +23089,7 @@ var init_Card = __esm({
     "use strict";
     init_Atoms();
     Card = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         padding: "Z2 A",
@@ -23270,10 +23282,9 @@ var CurrencyConvert;
 var init_CurrencyConvertCard = __esm({
   "../uikit/Card/CurrencyConvertCard.js"() {
     "use strict";
-    init_Atoms();
     init_ConvertCard();
     CurrencyConvert = {
-      extend: Flex,
+      extend: "Flex",
       props: {
         boxSize: "fit-content",
         gap: "Z",
@@ -23292,7 +23303,7 @@ var init_CurrencyConvertCard = __esm({
         }
       },
       Cards: {
-        extend: Flex,
+        extend: "Flex",
         props: {
           flow: "column",
           gap: "A"
@@ -23587,7 +23598,7 @@ __export(src_exports4, {
   default: () => src_default3
 });
 module.exports = __toCommonJS(src_exports4);
-var import_utils37 = __toESM(require_cjs(), 1);
+var import_utils36 = __toESM(require_cjs(), 1);
 
 // src/utilImports.js
 var utilImports_exports = {};
@@ -23620,7 +23631,7 @@ __reExport(utilImports_exports, __toESM(require_cjs5(), 1));
 
 // src/router.js
 var import_router6 = __toESM(require_cjs5(), 1);
-var import_utils31 = __toESM(require_cjs(), 1);
+var import_utils30 = __toESM(require_cjs(), 1);
 init_uikit();
 var DEFAULT_ROUTING_OPTIONS2 = {
   initRouter: true,
@@ -23633,16 +23644,16 @@ var initRouter2 = (element, options) => {
   else if (options.router === true)
     options.router = DEFAULT_ROUTING_OPTIONS2;
   else
-    (0, import_utils31.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS2);
+    (0, import_utils30.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS2);
   const routerOptions = options.router;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router6.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash: hash2 } = import_utils31.window.location;
+    const { pathname, hash: hash2 } = import_utils30.window.location;
     const url2 = pathname + hash2;
     if (el.routes)
       router2(url2, el, {}, { initialRender: true });
   };
-  const hasRenderRouter = element.on && !(0, import_utils31.isUndefined)(element.on.renderRouter);
+  const hasRenderRouter = element.on && !(0, import_utils30.isUndefined)(element.on.renderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault;
@@ -23664,20 +23675,20 @@ var popStateRouter2 = (element, options) => {
   if (!routerOptions.popState)
     return;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router6.router;
-  import_utils31.window.onpopstate = (e) => {
-    const { pathname, hash: hash2 } = import_utils31.window.location;
+  import_utils30.window.onpopstate = (e) => {
+    const { pathname, hash: hash2 } = import_utils30.window.location;
     const url2 = pathname + hash2;
     router2(url2, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };
 var injectRouterInLinkComponent2 = (routerOptions) => {
   if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-    return (0, import_utils31.deepMerge)(Link, RouterLink);
+    return (0, import_utils30.deepMerge)(Link, RouterLink);
   }
 };
 
 // src/ferchOnCreate.js
-var import_utils32 = __toESM(require_cjs(), 1);
+var import_utils31 = __toESM(require_cjs(), 1);
 var import_fetch2 = __toESM(require_cjs7(), 1);
 var fetchSync2 = async (key, options) => {
   if (key && options.editor) {
@@ -23694,10 +23705,10 @@ var fetchAsync2 = (app, key, options, callback) => {
     try {
       if (options.editor.async) {
         (0, import_fetch2.fetchProjectAsync)(key, options, callback || ((data) => {
-          if ((0, import_utils32.isObject)(data.designsystem)) {
+          if ((0, import_utils31.isObject)(data.designsystem)) {
             options.utils.init(data.designsystem);
           }
-          if ((0, import_utils32.isObject)(data.state)) {
+          if ((0, import_utils31.isObject)(data.state)) {
             app.state.set(data.state);
           }
         }));
@@ -23710,15 +23721,15 @@ var fetchAsync2 = (app, key, options, callback) => {
 
 // src/syncExtend.js
 init_byld_socket();
-var import_utils33 = __toESM(require_cjs(), 1);
+var import_utils32 = __toESM(require_cjs(), 1);
 var applySyncDebug2 = (extend, options) => {
   const { editor } = options;
   if (!editor)
     return extend;
-  const inspect = (0, import_utils33.isUndefined)(editor.inspect) ? (0, import_utils33.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils32.isUndefined)(editor.inspect) ? (0, import_utils32.isDevelopment)() : editor.inspect;
   if (inspect)
     extend.push(DevFocus);
-  const liveSync = (0, import_utils33.isUndefined)(editor.liveSync) ? (0, import_utils33.isDevelopment)() : editor.liveSync;
+  const liveSync = (0, import_utils32.isUndefined)(editor.liveSync) ? (0, import_utils32.isDevelopment)() : editor.liveSync;
   if (liveSync)
     extend.push(Sync);
   return extend;
@@ -23727,9 +23738,9 @@ var applyInspectListener2 = (root, options) => {
   const { editor } = options;
   if (!editor)
     return;
-  const inspect = (0, import_utils33.isUndefined)(editor.inspect) ? (0, import_utils33.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils32.isUndefined)(editor.inspect) ? (0, import_utils32.isDevelopment)() : editor.inspect;
   if (inspect)
-    inspectOnKey(root);
+    inspectOnKey(root, options);
 };
 
 // src/define.js
@@ -23784,17 +23795,17 @@ var import_dynamic3 = __toESM(require_dynamic(), 1);
 
 // src/createDomql.js
 var import_domql2 = __toESM(require_cjs12(), 1);
-var import_utils36 = __toESM(require_cjs(), 1);
+var import_utils35 = __toESM(require_cjs(), 1);
 init_uikit();
 
 // src/prepare.js
-var import_utils35 = __toESM(require_cjs(), 1);
+var import_utils34 = __toESM(require_cjs(), 1);
 
 // src/initEmotion.js
 init_emotion2();
 init_emotion();
 init_init();
-var import_utils34 = __toESM(require_cjs(), 1);
+var import_utils33 = __toESM(require_cjs(), 1);
 init_src2();
 var initEmotion2 = (key, options = {}) => {
   const doc = options.parent || options.document || document;
@@ -23803,8 +23814,8 @@ var initEmotion2 = (key, options = {}) => {
   if (!initOptions.emotion)
     initOptions.emotion = emotion;
   const registry = options.registry || transformDOMQLEmotion(initOptions.emotion, options);
-  const defaultDesignSystem = (0, import_utils34.deepClone)(src_default);
-  const designSystem = initOptions.useDefaultConfig || options.useDefaultConfig ? (0, import_utils34.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem || defaultDesignSystem;
+  const defaultDesignSystem = (0, import_utils33.deepClone)(src_default);
+  const designSystem = initOptions.useDefaultConfig || options.useDefaultConfig ? (0, import_utils33.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem || defaultDesignSystem;
   const scratchSystem2 = init(designSystem, {
     key,
     emotion: emotion2,
@@ -23819,7 +23830,7 @@ var initEmotion2 = (key, options = {}) => {
 // src/prepare.js
 init_uikit();
 var checkIfKeyIsComponent2 = (key) => {
-  const isFirstKeyString = (0, import_utils35.isString)(key);
+  const isFirstKeyString = (0, import_utils34.isString)(key);
   if (!isFirstKeyString)
     return;
   const firstCharKey = key.slice(0, 1);
@@ -23844,12 +23855,13 @@ var prepareComponents2 = (options) => {
 var prepareUtils2 = (options) => {
   return { ...utilImports_exports, ...import_scratch2.scratchUtils, ...options.snippets || options.utils || {} };
 };
-var preparePackages2 = (packages, options) => {
-  if (window.packages) {
-    window.packages = (0, import_utils35.merge)(window.packages, packages);
+var preparePackages2 = (packages, opts) => {
+  const windowOpts = opts.window || window;
+  if (windowOpts.packages) {
+    windowOpts.packages = (0, import_utils34.merge)(windowOpts.packages, packages);
   } else {
-    window.packages = packages;
-    window.require = (key) => window.packages[key];
+    windowOpts.packages = packages;
+    windowOpts.require = (key) => windowOpts.packages[key];
   }
 };
 var prepareDesignSystem2 = (options, key) => {
@@ -23861,8 +23873,8 @@ var prepareState2 = (options, App) => {
   if (options.state)
     utilImports_exports.deepMerge(state, options.state);
   if (App && App.state)
-    (0, import_utils35.deepMerge)(state, App.state);
-  return (0, import_utils35.deepCloneWithExtend)(state);
+    (0, import_utils34.deepMerge)(state, App.state);
+  return (0, import_utils34.deepCloneWithExtend)(state);
 };
 var preparePages2 = (options) => {
   const pages = options.pages;
@@ -23884,15 +23896,19 @@ var prepareDocument2 = (options) => {
       window.document = { body: {} };
     document = window.document;
   }
+  if (!options.window)
+    options.window = window;
+  if (!options.document)
+    options.document = document;
   return options.parent || options.document || document;
 };
 
 // src/createDomql.js
 var SYMBOLS_KEY3 = process.env.SYMBOLS_KEY;
 var createDomqlElement2 = (App, options) => {
-  const key = options.key || SYMBOLS_KEY3 || ((0, import_utils36.isString)(App) ? App : "");
+  const key = options.key || SYMBOLS_KEY3 || ((0, import_utils35.isString)(App) ? App : "");
   const [scratcDesignSystem, emotion2, registry] = prepareDesignSystem2(options, key);
-  if ((0, import_utils36.isString)(App))
+  if ((0, import_utils35.isString)(App))
     App = {};
   const doc = prepareDocument2(options);
   const state = prepareState2(options, App);
@@ -23923,6 +23939,7 @@ var createDomqlElement2 = (App, options) => {
       registry,
       emotion: emotion2,
       routerOptions,
+      socket: options.socket,
       editor: options.editor,
       document: doc
     }
@@ -23935,9 +23952,9 @@ var createDomqlElement2 = (App, options) => {
 
 // src/index.js
 var SYMBOLS_KEY4 = process.env.SYMBOLS_KEY;
-var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils37.deepMerge)(
+var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils36.deepMerge)(
   options,
-  (0, import_utils37.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic3.default || {}
+  (0, import_utils36.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic3.default || {}
 );
 var create2 = (App, options = options_default2, optionsExternalFile) => {
   const redefinedOptions = { ...options_default2, ...mergeWithLocalFile3(options, optionsExternalFile) };
@@ -23967,7 +23984,7 @@ var createSync2 = async (App, options = options_default2, optionsExternalFile) =
 var createSkeleton2 = (App, options = options_default2, optionsExternalFile) => {
   return create2(
     App,
-    (0, import_utils37.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+    (0, import_utils36.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
     optionsExternalFile
   );
 };