@symbo.ls/scratch 2.11.430 → 2.11.439

package/dist/cjs/system/shadow.js

@@ -300,7 +300,6 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
-      createNestedObject: () => createNestedObject,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       getFrequencyInArray: () => getFrequencyInArray,
@@ -367,22 +366,6 @@ var require_array = __commonJS({
       }
       return arr;
     };
-    var createNestedObject = (arr, lastValue) => {
-      const nestedObject = {};
-      if (arr.length === 0) {
-        return lastValue;
-      }
-      arr.reduce((obj, value, index) => {
-        if (!obj[value]) {
-          obj[value] = {};
-        }
-        if (index === arr.length - 1 && lastValue) {
-          obj[value] = lastValue;
-        }
-        return obj[value];
-      }, nestedObject);
-      return nestedObject;
-    };
     var removeValueFromArray = (arr, value) => {
       const index = arr.indexOf(value);
       if (index > -1) {
@@ -603,8 +586,8 @@ var require_object = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var object_exports = {};
     __export2(object_exports, {
-      checkIfKeyIsComponent: () => checkIfKeyIsComponent,
       clone: () => clone,
+      createNestedObject: () => createNestedObject,
       createObjectWithoutPrototype: () => createObjectWithoutPrototype,
       deepClone: () => deepClone2,
       deepCloneExclude: () => deepCloneExclude,
@@ -615,13 +598,12 @@ var require_object = __commonJS({
       deepMerge: () => deepMerge2,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
+      detectInfiniteLoop: () => detectInfiniteLoop,
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
       exec: () => exec,
       flattenRecursive: () => flattenRecursive,
-      getChildrenComponentsByKey: () => getChildrenComponentsByKey,
-      getExtendsInElement: () => getExtendsInElement,
       hasOwnProperty: () => hasOwnProperty,
       isEmpty: () => isEmpty,
       isEmptyObject: () => isEmptyObject,
@@ -636,6 +618,7 @@ var require_object = __commonJS({
       overwriteDeep: () => overwriteDeep,
       overwriteShallow: () => overwriteShallow,
       removeFromObject: () => removeFromObject,
+      removeNestedKeyByPath: () => removeNestedKeyByPath,
       stringToObject: () => stringToObject
     });
     module2.exports = __toCommonJS2(object_exports);
@@ -644,6 +627,7 @@ var require_object = __commonJS({
     var import_array = require_array();
     var import_string = require_string();
     var import_node = require_node();
+    var ENV = "development";
     var exec = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
@@ -755,6 +739,8 @@ var require_object = __commonJS({
           continue;
         if ((0, import_types.isObjectLike)(objProp)) {
           o[prop] = deepCloneWithExtend(objProp, excludeFrom, options);
+        } else if ((0, import_types.isFunction)(objProp) && options.window) {
+          o[prop] = (options.window || import_globals2.window).eval("(" + objProp.toString() + ")");
         } else
           o[prop] = objProp;
       }
@@ -998,16 +984,23 @@ var require_object = __commonJS({
       }
       return obj;
     };
-    var overwriteDeep = (obj, params, excludeFrom = []) => {
+    var overwriteDeep = (obj, params, excludeFrom = [], visited = /* @__PURE__ */ new WeakMap()) => {
+      if (!(0, import_types.isObjectLike)(obj) || !(0, import_types.isObjectLike)(params) || (0, import_node.isDOMNode)(obj) || (0, import_node.isDOMNode)(params)) {
+        return params;
+      }
+      if (visited.has(obj)) {
+        return visited.get(obj);
+      }
+      visited.set(obj, obj);
       for (const e in params) {
-        if (e === "__ref")
-          continue;
-        if (excludeFrom.includes(e) || e.startsWith("__"))
+        if (e === "__ref" || excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
-        if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
-          overwriteDeep(objProp, paramsProp);
+        if ((0, import_node.isDOMNode)(paramsProp)) {
+          obj[e] = paramsProp;
+        } else if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
+          obj[e] = overwriteDeep(objProp, paramsProp, excludeFrom, visited);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
         }
@@ -1115,53 +1108,60 @@ var require_object = __commonJS({
       }
       return newObj;
     };
-    var checkIfKeyIsComponent = (key) => {
-      const isFirstKeyString = (0, import_types.isString)(key);
-      if (!isFirstKeyString)
-        return;
-      const firstCharKey = key.slice(0, 1);
-      return /^[A-Z]*$/.test(firstCharKey);
+    var createNestedObject = (arr, lastValue) => {
+      const nestedObject = {};
+      if (arr.length === 0) {
+        return lastValue;
+      }
+      arr.reduce((obj, value, index) => {
+        if (!obj[value]) {
+          obj[value] = {};
+        }
+        if (index === arr.length - 1 && lastValue) {
+          obj[value] = lastValue;
+        }
+        return obj[value];
+      }, nestedObject);
+      return nestedObject;
     };
-    var getChildrenComponentsByKey = (key, el) => {
-      if (key === el.key || el.__ref.__componentKey === key) {
-        return el;
+    var removeNestedKeyByPath = (obj, path) => {
+      if (!Array.isArray(path)) {
+        throw new Error("Path must be an array.");
       }
-      if (el.extend) {
-        const foundString = (0, import_types.isString)(el.extend) && el.extend === key;
-        const foundInArray = (0, import_types.isArray)(el.extend) && el.extend.filter((v) => v === key).length;
-        if (foundString || foundInArray)
-          return el;
+      let current = obj;
+      for (let i = 0; i < path.length - 1; i++) {
+        if (current[path[i]] === void 0) {
+          return;
+        }
+        current = current[path[i]];
       }
-      if (el.parent && el.parent.childExtend) {
-        const foundString = (0, import_types.isString)(el.parent.childExtend) && el.parent.childExtend === key;
-        const foundInArray = (0, import_types.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
-        if (foundString || foundInArray)
-          return el;
+      const lastKey = path[path.length - 1];
+      if (current && Object.hasOwnProperty.call(current, lastKey)) {
+        delete current[lastKey];
       }
     };
-    var getExtendsInElement = (obj) => {
-      let result = [];
-      function traverse(o) {
-        for (const key in o) {
-          if (Object.hasOwnProperty.call(o, key)) {
-            if (checkIfKeyIsComponent(key)) {
-              result.push(key);
-            }
-            if (key === "extend") {
-              if (typeof o[key] === "string") {
-                result.push(o[key]);
-              } else if (Array.isArray(o[key])) {
-                result = result.concat(o[key]);
-              }
-            }
-            if (typeof o[key] === "object" && o[key] !== null) {
-              traverse(o[key]);
+    var detectInfiniteLoop = (arr) => {
+      const maxRepeats = 10;
+      let pattern = [];
+      let repeatCount = 0;
+      for (let i = 0; i < arr.length; i++) {
+        if (pattern.length < 2) {
+          pattern.push(arr[i]);
+        } else {
+          if (arr[i] === pattern[i % 2]) {
+            repeatCount++;
+          } else {
+            pattern = [arr[i - 1], arr[i]];
+            repeatCount = 1;
+          }
+          if (repeatCount >= maxRepeats * 2) {
+            if (ENV === "test" || ENV === "development") {
+              console.warn("Warning: Potential infinite loop detected due to repeated sequence:", pattern);
             }
+            return true;
           }
         }
       }
-      traverse(obj);
-      return result;
     };
   }
 });
@@ -1189,6 +1189,7 @@ var require_function = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var function_exports = {};
     __export2(function_exports, {
+      cloneFunction: () => cloneFunction,
       debounce: () => debounce,
       debounceOnContext: () => debounceOnContext,
       isStringFunction: () => isStringFunction,
@@ -1238,6 +1239,17 @@ var require_function = __commonJS({
       const functionRegex = /^((function\s*\([^)]*\)\s*\{[^}]*\})|(\([^)]*\)\s*=>))/;
       return functionRegex.test(inputString);
     };
+    function cloneFunction(fn, win = window) {
+      const temp = function() {
+        return fn.apply(win, arguments);
+      };
+      for (const key in fn) {
+        if (Object.hasOwnProperty.call(fn, key)) {
+          temp[key] = fn[key];
+        }
+      }
+      return temp;
+    }
   }
 });
 
@@ -1507,6 +1519,172 @@ var require_tags = __commonJS({
   }
 });
 
+// ../../../domql/packages/utils/dist/cjs/component.js
+var require_component = __commonJS({
+  "../../../domql/packages/utils/dist/cjs/component.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var component_exports = {};
+    __export2(component_exports, {
+      addAdditionalExtend: () => addAdditionalExtend,
+      applyComponentFromContext: () => applyComponentFromContext,
+      applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
+      checkIfKeyIsComponent: () => checkIfKeyIsComponent,
+      checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+      extendizeByKey: () => extendizeByKey,
+      getChildrenComponentsByKey: () => getChildrenComponentsByKey,
+      getExtendsInElement: () => getExtendsInElement,
+      hasVariantProp: () => hasVariantProp,
+      isVariant: () => isVariant
+    });
+    module2.exports = __toCommonJS2(component_exports);
+    var import__ = require_cjs();
+    var ENV = "development";
+    var checkIfKeyIsComponent = (key) => {
+      const isFirstKeyString = (0, import__.isString)(key);
+      if (!isFirstKeyString)
+        return;
+      const firstCharKey = key.slice(0, 1);
+      return /^[A-Z]*$/.test(firstCharKey);
+    };
+    var checkIfKeyIsProperty = (key) => {
+      const isFirstKeyString = (0, import__.isString)(key);
+      if (!isFirstKeyString)
+        return;
+      const firstCharKey = key.slice(0, 1);
+      return /^[a-z]*$/.test(firstCharKey);
+    };
+    var addAdditionalExtend = (newExtend, element) => {
+      const { extend: elementExtend } = element;
+      const originalArray = (0, import__.isArray)(elementExtend) ? elementExtend : [elementExtend];
+      const receivedArray = (0, import__.isArray)(newExtend) ? newExtend : [newExtend];
+      const extend = (0, import__.joinArrays)(receivedArray, originalArray);
+      return { ...element, extend };
+    };
+    var extendizeByKey = (element, parent, key) => {
+      const { context } = parent;
+      const { tag, extend, props, attr, state, childExtend, childProps, on, if: condition, data } = element;
+      const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr || data;
+      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+      const isExtendKeyComponent = context && context.components[extendFromKey];
+      if (element === isExtendKeyComponent)
+        return element;
+      else if (!hasComponentAttrs || childProps) {
+        return {
+          extend: extendFromKey,
+          tag,
+          props: { ...element }
+        };
+      } else if (!extend || extend === true) {
+        return {
+          ...element,
+          tag,
+          extend: extendFromKey
+        };
+      } else if (extend) {
+        return addAdditionalExtend(extendFromKey, element);
+      } else if ((0, import__.isFunction)(element)) {
+        return {
+          extend: extendFromKey,
+          tag,
+          props: { ...(0, import__.exec)(element, parent) }
+        };
+      }
+    };
+    var applyKeyComponentAsExtend = (element, parent, key) => {
+      return extendizeByKey(element, parent, key) || element;
+    };
+    var applyComponentFromContext = (element, parent, options) => {
+      const { context } = element;
+      if (!context || !context.components)
+        return;
+      const { components } = context;
+      const { extend } = element;
+      const execExtend = (0, import__.exec)(extend, element);
+      if ((0, import__.isString)(execExtend)) {
+        const componentExists = components[execExtend] || components["smbls." + execExtend];
+        if (componentExists)
+          element.extend = componentExists;
+        else {
+          if ((ENV === "test" || ENV === "development") && options.verbose) {
+            console.warn(execExtend, "is not in library", components, element);
+            console.warn("replacing with ", {});
+          }
+          element.extend = {};
+        }
+      }
+    };
+    var isVariant = (param) => {
+      if (!(0, import__.isString)(param))
+        return;
+      const firstCharKey = param.slice(0, 1);
+      return firstCharKey === ".";
+    };
+    var hasVariantProp = (element) => {
+      const { props } = element;
+      if ((0, import__.isObject)(props) && (0, import__.isString)(props.variant))
+        return true;
+    };
+    var getChildrenComponentsByKey = (key, el) => {
+      if (key === el.key || el.__ref.__componentKey === key) {
+        return el;
+      }
+      if (el.extend) {
+        const foundString = (0, import__.isString)(el.extend) && el.extend === key;
+        const foundInArray = (0, import__.isArray)(el.extend) && el.extend.filter((v) => v === key).length;
+        if (foundString || foundInArray)
+          return el;
+      }
+      if (el.parent && el.parent.childExtend) {
+        const foundString = (0, import__.isString)(el.parent.childExtend) && el.parent.childExtend === key;
+        const foundInArray = (0, import__.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
+        if (foundString || foundInArray)
+          return el;
+      }
+    };
+    var getExtendsInElement = (obj) => {
+      let result = [];
+      function traverse(o) {
+        for (const key in o) {
+          if (Object.hasOwnProperty.call(o, key)) {
+            if (checkIfKeyIsComponent(key)) {
+              result.push(key);
+            }
+            if (key === "extend") {
+              if (typeof o[key] === "string") {
+                result.push(o[key]);
+              } else if (Array.isArray(o[key])) {
+                result = result.concat(o[key]);
+              }
+            }
+            if (typeof o[key] === "object" && o[key] !== null) {
+              traverse(o[key]);
+            }
+          }
+        }
+      }
+      traverse(obj);
+      return result;
+    };
+  }
+});
+
 // ../../../domql/packages/utils/dist/cjs/index.js
 var require_cjs = __commonJS({
   "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
@@ -1539,6 +1717,7 @@ var require_cjs = __commonJS({
     __reExport(utils_exports, require_globals(), module2.exports);
     __reExport(utils_exports, require_cookie(), module2.exports);
     __reExport(utils_exports, require_tags(), module2.exports);
+    __reExport(utils_exports, require_component(), module2.exports);
   }
 });
 
@@ -1741,6 +1920,7 @@ var require_cjs3 = __commonJS({
         var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
         var node_exports = {};
         __export22(node_exports, {
+          isDOMNode: () => isDOMNode,
           isHtmlElement: () => isHtmlElement,
           isNode: () => isNode
         });
@@ -1752,6 +1932,9 @@ var require_cjs3 = __commonJS({
         var isHtmlElement = (obj) => {
           return (typeof HTMLElement === "object" ? obj instanceof import_globals2.window.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string") || false;
         };
+        var isDOMNode = (obj) => {
+          return typeof import_globals2.window !== "undefined" && (obj instanceof import_globals2.window.Node || obj instanceof import_globals2.window.Window || obj === import_globals2.window || obj === document);
+        };
       }
     });
     var require_types2 = __commonJS2({
@@ -1867,7 +2050,6 @@ var require_cjs3 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
-          createNestedObject: () => createNestedObject,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           getFrequencyInArray: () => getFrequencyInArray,
@@ -1934,22 +2116,6 @@ var require_cjs3 = __commonJS({
           }
           return arr;
         };
-        var createNestedObject = (arr, lastValue) => {
-          const nestedObject = {};
-          if (arr.length === 0) {
-            return lastValue;
-          }
-          arr.reduce((obj, value, index) => {
-            if (!obj[value]) {
-              obj[value] = {};
-            }
-            if (index === arr.length - 1 && lastValue) {
-              obj[value] = lastValue;
-            }
-            return obj[value];
-          }, nestedObject);
-          return nestedObject;
-        };
         var removeValueFromArray = (arr, value) => {
           const index = arr.indexOf(value);
           if (index > -1) {
@@ -2166,8 +2332,8 @@ var require_cjs3 = __commonJS({
         var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
         var object_exports = {};
         __export22(object_exports, {
-          checkIfKeyIsComponent: () => checkIfKeyIsComponent,
           clone: () => clone,
+          createNestedObject: () => createNestedObject,
           createObjectWithoutPrototype: () => createObjectWithoutPrototype,
           deepClone: () => deepClone2,
           deepCloneExclude: () => deepCloneExclude,
@@ -2178,13 +2344,12 @@ var require_cjs3 = __commonJS({
           deepMerge: () => deepMerge2,
           deepStringify: () => deepStringify,
           detachFunctionsFromObject: () => detachFunctionsFromObject,
+          detectInfiniteLoop: () => detectInfiniteLoop,
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
           exec: () => exec,
           flattenRecursive: () => flattenRecursive,
-          getChildrenComponentsByKey: () => getChildrenComponentsByKey,
-          getExtendsInElement: () => getExtendsInElement,
           hasOwnProperty: () => hasOwnProperty,
           isEmpty: () => isEmpty,
           isEmptyObject: () => isEmptyObject,
@@ -2199,6 +2364,7 @@ var require_cjs3 = __commonJS({
           overwriteDeep: () => overwriteDeep,
           overwriteShallow: () => overwriteShallow,
           removeFromObject: () => removeFromObject,
+          removeNestedKeyByPath: () => removeNestedKeyByPath,
           stringToObject: () => stringToObject
         });
         module22.exports = __toCommonJS22(object_exports);
@@ -2206,6 +2372,8 @@ var require_cjs3 = __commonJS({
         var import_types = require_types2();
         var import_array = require_array2();
         var import_string = require_string2();
+        var import_node = require_node2();
+        var ENV = "development";
         var exec = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
@@ -2284,27 +2452,28 @@ var require_cjs3 = __commonJS({
         var mergeArrayExclude = (arr, excl = []) => {
           return arr.reduce((acc, curr) => deepMerge2(acc, deepCloneExclude(curr, excl)), {});
         };
-        var deepClone2 = (obj, excludeFrom = [], cleanUndefined = false) => {
-          const o = (0, import_types.isArray)(obj) ? [] : {};
-          for (const prop in obj) {
-            if (!Object.prototype.hasOwnProperty.call(obj, prop))
-              continue;
-            if (prop === "__proto__")
-              continue;
-            if (excludeFrom.includes(prop) || prop.startsWith("__"))
-              continue;
-            let objProp = obj[prop];
-            if (cleanUndefined && (0, import_types.isUndefined)(objProp))
-              continue;
-            if (prop === "extend" && (0, import_types.isArray)(objProp)) {
-              objProp = (0, import_array.mergeArray)(objProp);
+        var deepClone2 = (obj, exclude = [], cleanUndefined = false, visited = /* @__PURE__ */ new WeakMap()) => {
+          if (!(0, import_types.isObjectLike)(obj) || (0, import_node.isDOMNode)(obj))
+            return obj;
+          if (visited.has(obj))
+            return visited.get(obj);
+          const clone2 = (0, import_types.isArray)(obj) ? [] : {};
+          visited.set(obj, clone2);
+          for (const key in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, key) && !exclude.includes(key)) {
+              const value = obj[key];
+              if ((0, import_node.isDOMNode)(value)) {
+                clone2[key] = value;
+              } else if (key === "extend" && (0, import_types.isArray)(value)) {
+                clone2[key] = (0, import_array.mergeArray)(value, exclude);
+              } else if ((0, import_types.isObjectLike)(value)) {
+                clone2[key] = deepClone2(value, exclude, cleanUndefined, visited);
+              } else {
+                clone2[key] = value;
+              }
             }
-            if ((0, import_types.isObjectLike)(objProp)) {
-              o[prop] = deepClone2(objProp, excludeFrom, cleanUndefined);
-            } else
-              o[prop] = objProp;
           }
-          return o;
+          return clone2;
         };
         var deepCloneWithExtend = (obj, excludeFrom = ["node"], options = {}) => {
           const o = options.window ? (0, import_types.isArray)(obj) ? new options.window.Array([]) : new options.window.Object({}) : (0, import_types.isArray)(obj) ? [] : {};
@@ -2316,6 +2485,8 @@ var require_cjs3 = __commonJS({
               continue;
             if ((0, import_types.isObjectLike)(objProp)) {
               o[prop] = deepCloneWithExtend(objProp, excludeFrom, options);
+            } else if ((0, import_types.isFunction)(objProp) && options.window) {
+              o[prop] = (options.window || import_globals2.window).eval("(" + objProp.toString() + ")");
             } else
               o[prop] = objProp;
           }
@@ -2559,16 +2730,23 @@ var require_cjs3 = __commonJS({
           }
           return obj;
         };
-        var overwriteDeep = (obj, params, excludeFrom = []) => {
+        var overwriteDeep = (obj, params, excludeFrom = [], visited = /* @__PURE__ */ new WeakMap()) => {
+          if (!(0, import_types.isObjectLike)(obj) || !(0, import_types.isObjectLike)(params) || (0, import_node.isDOMNode)(obj) || (0, import_node.isDOMNode)(params)) {
+            return params;
+          }
+          if (visited.has(obj)) {
+            return visited.get(obj);
+          }
+          visited.set(obj, obj);
           for (const e in params) {
-            if (e === "__ref")
-              continue;
-            if (excludeFrom.includes(e) || e.startsWith("__"))
+            if (e === "__ref" || excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const objProp = obj[e];
             const paramsProp = params[e];
-            if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
-              overwriteDeep(objProp, paramsProp);
+            if ((0, import_node.isDOMNode)(paramsProp)) {
+              obj[e] = paramsProp;
+            } else if ((0, import_types.isObjectLike)(objProp) && (0, import_types.isObjectLike)(paramsProp)) {
+              obj[e] = overwriteDeep(objProp, paramsProp, excludeFrom, visited);
             } else if (paramsProp !== void 0) {
               obj[e] = paramsProp;
             }
@@ -2615,30 +2793,40 @@ var require_cjs3 = __commonJS({
           }
           return true;
         };
-        var deepContains = (obj1, obj2) => {
-          if (typeof obj1 !== typeof obj2) {
+        var deepContains = (obj1, obj2, ignoredKeys = ["node", "__ref"]) => {
+          if (obj1 === obj2)
+            return true;
+          if (!(0, import_types.isObjectLike)(obj1) || !(0, import_types.isObjectLike)(obj2))
             return false;
-          }
-          if ((0, import_types.isObjectLike)(obj1)) {
-            if (Array.isArray(obj1) && Array.isArray(obj2)) {
-              if (obj1.length !== obj2.length) {
+          if ((0, import_node.isDOMNode)(obj1) || (0, import_node.isDOMNode)(obj2))
+            return obj1 === obj2;
+          const stack = [[obj1, obj2]];
+          const visited = /* @__PURE__ */ new WeakSet();
+          while (stack.length > 0) {
+            const [current1, current2] = stack.pop();
+            if (visited.has(current1))
+              continue;
+            visited.add(current1);
+            const keys1 = Object.keys(current1).filter((key) => !ignoredKeys.includes(key));
+            const keys2 = Object.keys(current2).filter((key) => !ignoredKeys.includes(key));
+            if (keys1.length !== keys2.length)
+              return false;
+            for (const key of keys1) {
+              if (!Object.prototype.hasOwnProperty.call(current2, key))
                 return false;
-              }
-              for (let i = 0; i < obj1.length; i++) {
-                if (!deepContains(obj1[i], obj2[i])) {
-                  return false;
-                }
-              }
-            } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
-              for (const key in obj1) {
-                const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj2, key);
-                if (!hasOwnProperty2 || !deepContains(obj1[key], obj2[key])) {
+              const value1 = current1[key];
+              const value2 = current2[key];
+              if ((0, import_node.isDOMNode)(value1) || (0, import_node.isDOMNode)(value2)) {
+                if (value1 !== value2)
                   return false;
+              } else if ((0, import_types.isObjectLike)(value1) && (0, import_types.isObjectLike)(value2)) {
+                if (value1 !== value2) {
+                  stack.push([value1, value2]);
                 }
+              } else if (value1 !== value2) {
+                return false;
               }
             }
-          } else {
-            return obj2 === obj1;
           }
           return true;
         };
@@ -2666,53 +2854,60 @@ var require_cjs3 = __commonJS({
           }
           return newObj;
         };
-        var checkIfKeyIsComponent = (key) => {
-          const isFirstKeyString = (0, import_types.isString)(key);
-          if (!isFirstKeyString)
-            return;
-          const firstCharKey = key.slice(0, 1);
-          return /^[A-Z]*$/.test(firstCharKey);
+        var createNestedObject = (arr, lastValue) => {
+          const nestedObject = {};
+          if (arr.length === 0) {
+            return lastValue;
+          }
+          arr.reduce((obj, value, index) => {
+            if (!obj[value]) {
+              obj[value] = {};
+            }
+            if (index === arr.length - 1 && lastValue) {
+              obj[value] = lastValue;
+            }
+            return obj[value];
+          }, nestedObject);
+          return nestedObject;
         };
-        var getChildrenComponentsByKey = (key, el) => {
-          if (key === el.key || el.__ref.__componentKey === key) {
-            return el;
+        var removeNestedKeyByPath = (obj, path) => {
+          if (!Array.isArray(path)) {
+            throw new Error("Path must be an array.");
           }
-          if (el.extend) {
-            const foundString = (0, import_types.isString)(el.extend) && el.extend === key;
-            const foundInArray = (0, import_types.isArray)(el.extend) && el.extend.filter((v) => v === key).length;
-            if (foundString || foundInArray)
-              return el;
+          let current = obj;
+          for (let i = 0; i < path.length - 1; i++) {
+            if (current[path[i]] === void 0) {
+              return;
+            }
+            current = current[path[i]];
           }
-          if (el.parent && el.parent.childExtend) {
-            const foundString = (0, import_types.isString)(el.parent.childExtend) && el.parent.childExtend === key;
-            const foundInArray = (0, import_types.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
-            if (foundString || foundInArray)
-              return el;
+          const lastKey = path[path.length - 1];
+          if (current && Object.hasOwnProperty.call(current, lastKey)) {
+            delete current[lastKey];
           }
         };
-        var getExtendsInElement = (obj) => {
-          let result = [];
-          function traverse(o) {
-            for (const key in o) {
-              if (Object.hasOwnProperty.call(o, key)) {
-                if (checkIfKeyIsComponent(key)) {
-                  result.push(key);
-                }
-                if (key === "extend") {
-                  if (typeof o[key] === "string") {
-                    result.push(o[key]);
-                  } else if (Array.isArray(o[key])) {
-                    result = result.concat(o[key]);
-                  }
-                }
-                if (typeof o[key] === "object" && o[key] !== null) {
-                  traverse(o[key]);
+        var detectInfiniteLoop = (arr) => {
+          const maxRepeats = 10;
+          let pattern = [];
+          let repeatCount = 0;
+          for (let i = 0; i < arr.length; i++) {
+            if (pattern.length < 2) {
+              pattern.push(arr[i]);
+            } else {
+              if (arr[i] === pattern[i % 2]) {
+                repeatCount++;
+              } else {
+                pattern = [arr[i - 1], arr[i]];
+                repeatCount = 1;
+              }
+              if (repeatCount >= maxRepeats * 2) {
+                if (ENV === "test" || ENV === "development") {
+                  console.warn("Warning: Potential infinite loop detected due to repeated sequence:", pattern);
                 }
+                return true;
               }
             }
           }
-          traverse(obj);
-          return result;
         };
       }
     });
@@ -2738,6 +2933,7 @@ var require_cjs3 = __commonJS({
         var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
         var function_exports = {};
         __export22(function_exports, {
+          cloneFunction: () => cloneFunction,
           debounce: () => debounce,
           debounceOnContext: () => debounceOnContext,
           isStringFunction: () => isStringFunction,
@@ -2787,6 +2983,17 @@ var require_cjs3 = __commonJS({
           const functionRegex = /^((function\s*\([^)]*\)\s*\{[^}]*\})|(\([^)]*\)\s*=>))/;
           return functionRegex.test(inputString);
         };
+        function cloneFunction(fn, win = window) {
+          const temp = function() {
+            return fn.apply(win, arguments);
+          };
+          for (const key in fn) {
+            if (Object.hasOwnProperty.call(fn, key)) {
+              temp[key] = fn[key];
+            }
+          }
+          return temp;
+        }
       }
     });
     var require_log2 = __commonJS2({
@@ -3049,6 +3256,170 @@ var require_cjs3 = __commonJS({
         var isValidHtmlTag = (arg) => HTML_TAGS.body.includes(arg);
       }
     });
+    var require_component2 = __commonJS2({
+      "../../../domql/packages/utils/dist/cjs/component.js"(exports2, module22) {
+        "use strict";
+        var __defProp22 = Object.defineProperty;
+        var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
+        var __getOwnPropNames22 = Object.getOwnPropertyNames;
+        var __hasOwnProp22 = Object.prototype.hasOwnProperty;
+        var __export22 = (target, all) => {
+          for (var name in all)
+            __defProp22(target, name, { get: all[name], enumerable: true });
+        };
+        var __copyProps22 = (to, from, except, desc) => {
+          if (from && typeof from === "object" || typeof from === "function") {
+            for (let key of __getOwnPropNames22(from))
+              if (!__hasOwnProp22.call(to, key) && key !== except)
+                __defProp22(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc22(from, key)) || desc.enumerable });
+          }
+          return to;
+        };
+        var __toCommonJS22 = (mod) => __copyProps22(__defProp22({}, "__esModule", { value: true }), mod);
+        var component_exports = {};
+        __export22(component_exports, {
+          addAdditionalExtend: () => addAdditionalExtend,
+          applyComponentFromContext: () => applyComponentFromContext,
+          applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
+          checkIfKeyIsComponent: () => checkIfKeyIsComponent,
+          checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+          extendizeByKey: () => extendizeByKey,
+          getChildrenComponentsByKey: () => getChildrenComponentsByKey,
+          getExtendsInElement: () => getExtendsInElement,
+          hasVariantProp: () => hasVariantProp,
+          isVariant: () => isVariant
+        });
+        module22.exports = __toCommonJS22(component_exports);
+        var import__ = require_cjs4();
+        var ENV = "development";
+        var checkIfKeyIsComponent = (key) => {
+          const isFirstKeyString = (0, import__.isString)(key);
+          if (!isFirstKeyString)
+            return;
+          const firstCharKey = key.slice(0, 1);
+          return /^[A-Z]*$/.test(firstCharKey);
+        };
+        var checkIfKeyIsProperty = (key) => {
+          const isFirstKeyString = (0, import__.isString)(key);
+          if (!isFirstKeyString)
+            return;
+          const firstCharKey = key.slice(0, 1);
+          return /^[a-z]*$/.test(firstCharKey);
+        };
+        var addAdditionalExtend = (newExtend, element) => {
+          const { extend: elementExtend } = element;
+          const originalArray = (0, import__.isArray)(elementExtend) ? elementExtend : [elementExtend];
+          const receivedArray = (0, import__.isArray)(newExtend) ? newExtend : [newExtend];
+          const extend = (0, import__.joinArrays)(receivedArray, originalArray);
+          return { ...element, extend };
+        };
+        var extendizeByKey = (element, parent, key) => {
+          const { context } = parent;
+          const { tag, extend, props, attr, state, childExtend, childProps, on, if: condition, data } = element;
+          const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr || data;
+          const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+          const isExtendKeyComponent = context && context.components[extendFromKey];
+          if (element === isExtendKeyComponent)
+            return element;
+          else if (!hasComponentAttrs || childProps) {
+            return {
+              extend: extendFromKey,
+              tag,
+              props: { ...element }
+            };
+          } else if (!extend || extend === true) {
+            return {
+              ...element,
+              tag,
+              extend: extendFromKey
+            };
+          } else if (extend) {
+            return addAdditionalExtend(extendFromKey, element);
+          } else if ((0, import__.isFunction)(element)) {
+            return {
+              extend: extendFromKey,
+              tag,
+              props: { ...(0, import__.exec)(element, parent) }
+            };
+          }
+        };
+        var applyKeyComponentAsExtend = (element, parent, key) => {
+          return extendizeByKey(element, parent, key) || element;
+        };
+        var applyComponentFromContext = (element, parent, options) => {
+          const { context } = element;
+          if (!context || !context.components)
+            return;
+          const { components } = context;
+          const { extend } = element;
+          const execExtend = (0, import__.exec)(extend, element);
+          if ((0, import__.isString)(execExtend)) {
+            const componentExists = components[execExtend] || components["smbls." + execExtend];
+            if (componentExists)
+              element.extend = componentExists;
+            else {
+              if ((ENV === "test" || ENV === "development") && options.verbose) {
+                console.warn(execExtend, "is not in library", components, element);
+                console.warn("replacing with ", {});
+              }
+              element.extend = {};
+            }
+          }
+        };
+        var isVariant = (param) => {
+          if (!(0, import__.isString)(param))
+            return;
+          const firstCharKey = param.slice(0, 1);
+          return firstCharKey === ".";
+        };
+        var hasVariantProp = (element) => {
+          const { props } = element;
+          if ((0, import__.isObject)(props) && (0, import__.isString)(props.variant))
+            return true;
+        };
+        var getChildrenComponentsByKey = (key, el) => {
+          if (key === el.key || el.__ref.__componentKey === key) {
+            return el;
+          }
+          if (el.extend) {
+            const foundString = (0, import__.isString)(el.extend) && el.extend === key;
+            const foundInArray = (0, import__.isArray)(el.extend) && el.extend.filter((v) => v === key).length;
+            if (foundString || foundInArray)
+              return el;
+          }
+          if (el.parent && el.parent.childExtend) {
+            const foundString = (0, import__.isString)(el.parent.childExtend) && el.parent.childExtend === key;
+            const foundInArray = (0, import__.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
+            if (foundString || foundInArray)
+              return el;
+          }
+        };
+        var getExtendsInElement = (obj) => {
+          let result = [];
+          function traverse(o) {
+            for (const key in o) {
+              if (Object.hasOwnProperty.call(o, key)) {
+                if (checkIfKeyIsComponent(key)) {
+                  result.push(key);
+                }
+                if (key === "extend") {
+                  if (typeof o[key] === "string") {
+                    result.push(o[key]);
+                  } else if (Array.isArray(o[key])) {
+                    result = result.concat(o[key]);
+                  }
+                }
+                if (typeof o[key] === "object" && o[key] !== null) {
+                  traverse(o[key]);
+                }
+              }
+            }
+          }
+          traverse(obj);
+          return result;
+        };
+      }
+    });
     var require_cjs4 = __commonJS2({
       "../../../domql/packages/utils/dist/cjs/index.js"(exports2, module22) {
         "use strict";
@@ -3080,6 +3451,7 @@ var require_cjs3 = __commonJS({
         __reExport(utils_exports, require_globals2(), module22.exports);
         __reExport(utils_exports, require_cookie2(), module22.exports);
         __reExport(utils_exports, require_tags2(), module22.exports);
+        __reExport(utils_exports, require_component2(), module22.exports);
       }
     });
     var src_exports = {};
@@ -3095,7 +3467,9 @@ var require_cjs3 = __commonJS({
       loadCssFile: () => loadCssFile,
       loadJavascript: () => loadJavascript,
       loadJavascriptFile: () => loadJavascriptFile,
+      loadJavascriptFileEmbedSync: () => loadJavascriptFileEmbedSync,
       loadJavascriptFileSync: () => loadJavascriptFileSync,
+      registerFrameListener: () => registerFrameListener,
       removeChars: () => removeChars,
       toCamelCase: () => toCamelCase,
       toDashCase: () => toDashCase2,
@@ -3168,7 +3542,27 @@ var require_cjs3 = __commonJS({
         }
       });
     };
-    var loadJavascriptFileSync = (FILE_URL, doc = document, fallback, type = "text/javascript") => {
+    var loadJavascriptFileSync = (fileUrl, doc = document, type = "text/javascript") => {
+      return new Promise((resolve, reject) => {
+        const scriptEle = doc.createElement("script");
+        scriptEle.type = type;
+        scriptEle.src = fileUrl;
+        const blocker = doc.createElement("div");
+        blocker.style.cssText = "position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.8);z-index:9999;";
+        doc.body.appendChild(blocker);
+        scriptEle.onload = () => {
+          console.log(`Successfully loaded: ${fileUrl}`);
+          doc.body.removeChild(blocker);
+          resolve();
+        };
+        scriptEle.onerror = () => {
+          doc.body.removeChild(blocker);
+          reject(new Error(`Failed to load: ${fileUrl}`));
+        };
+        doc.body.appendChild(scriptEle);
+      });
+    };
+    var loadJavascriptFileEmbedSync = (FILE_URL, doc = document, fallback, type = "text/javascript") => {
       const xhr = new window.XMLHttpRequest();
       xhr.open("GET", FILE_URL, false);
       xhr.send();
@@ -3213,6 +3607,13 @@ var require_cjs3 = __commonJS({
       }
     };
     var isPhoto = (format) => ["jpeg", "gif", "jpg", "png", "tiff", "woff"].includes(format);
+    var registerFrameListener = (el) => {
+      const { __ref: ref } = el;
+      const { frameListeners } = ref.root.data;
+      if (frameListeners && !frameListeners.has(el)) {
+        frameListeners.add(el);
+      }
+    };
     var copyStringToClipboard = async (str) => {
       try {
         await navigator.clipboard.writeText(str);
@@ -3968,7 +4369,7 @@ var getShadow = (value, globalTheme) => {
     const obj = {};
     for (const mediaName in val) {
       const query = CONFIG2.MEDIA[mediaName.slice(1)];
-      const media = `@media screen and ${query}`;
+      const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
       obj[media] = val.value;
     }
     return obj;