@xuda.io/runtime-bundle 1.0.1248 → 1.0.1250

package/js/xuda-runtime-bundle.js

@@ -31890,278 +31890,1203 @@ const get_params_obj_new = async function (SESSION_ID, prog_id, nodeP, dsSession
   return { params_res, params_raw };
 };
 
-func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, xu_func, $elm, val, is_init, refreshed_ds) {
-  if (is_skeleton) return;
+// func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, xu_func, $elm, val, is_init, refreshed_ds) {
+//   if (is_skeleton) return;
+
+//   // console.log(nodeP.id, xu_func, val);
+//   var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
+//   const tag_fx = {
+//     [`xu-panel`]: {
+//       program: async function ($elm, val) {
+//         var ret = {};
+//         var _session = SESSION_OBJ[SESSION_ID];
+//         var _ds = _session.DS_GLB[paramsP.dsSessionP];
+//         const init_program = async function () {
+//           async function render_panel() {
+//             const prog_id = val.value?.prog || val.value;
+//             const params_obj = await get_params_obj_new(SESSION_ID, prog_id, nodeP, paramsP.dsSessionP);
+//             let ret_panel = await func.UI.screen.init(SESSION_ID, prog_id, paramsP.screenId, _ds, $elm, null, _ds.currentRecordId, null, true, params_obj.params_res, 'initXu_panel', undefined, prog_id !== _ds.prog_id ? null : refreshed_ds, params_obj.params_raw);
+//             ret = { $new_div: ret_panel };
+//             if ($container.data().xuData) {
+//               $container.data().xuData.xuPanelProps = $elm.data().xuAttributes;
+//               $container.data().xuData.xuPanelData = ret_panel.data();
+//             }
+//             return ret;
+//           }
+
+//           if (!val.value) {
+//             val.value = '_empty_panel_program';
+//           }
+
+//           ret = await render_panel();
+
+//           return ret;
+//         };
+//         const alter_program = async function () {
+//           var _session = SESSION_OBJ[SESSION_ID];
+//           var _ds = _session.DS_GLB[paramsP.dsSessionP];
+
+//           /////////////////
+//           async function render_panel() {
+//             //   // if (!cache_str) {
+//             //   //   await update_container(screen_ready_function);
+//             //   // }
+//             //   // if (cache_str && !CACHE_PROG_UI[cache_str]) {
+//             //   //   await update_container(screen_ready_function);
+//             //   //   save_cache();
+//             //   // }
+//             //   // if (callback) callback($div);
+//             //   // $container.data().xuData.node.children =
+//             //   //   $div.data().xuData.node.children;
+//             //   // //swiper-wrapper
+//             //   // var restore_slides_elements = async function () {
+//             //   //   if ($tmp_div.children().length) {
+//             //   //     $tmp_div
+//             //   //       .find(".swiper-wrapper")
+//             //   //       .empty()
+//             //   //       .append($new_div.children());
+//             //   //     $new_div.append($tmp_div.children());
+//             //   //   }
+//             //   // };
+//             //   // // console.log($tmp_div);
+//             //   // await restore_slides_elements();
+//             //   // // CHANGE_PANEL_BUSY = false;
+//             //   // func.events.delete_job(SESSION_ID, jobNo);
+//             // };
+//             const program = val.value?.prog || val.value;
+//             var $wrapper = $('<div>');
+//             var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, nodeP.attributes, null, null, null, $wrapper, '');
+//             const params_obj = await get_params_obj_new(SESSION_ID, program, nodeP, paramsP.dsSessionP);
+//             let ret_init = await func.UI.screen.init(SESSION_ID, program, paramsP.screenId, _ds, $div, null, _ds.currentRecordId, jobNoP, true, params_obj.params_res, 'alterXu_panel', undefined, undefined, params_obj.params_raw);
+//             ret = {
+//               $new_div: ret_init,
+//               abort: true,
+//             };
+//             await func.UI.screen.panel_post_render_handler(SESSION_ID, $elm, $new_div, nodeP, $div.clone(true), jobNoP);
+
+//             return ret;
+//           }
+//           if (!val.value) {
+//             return { abort: true };
+//           }
+//           await render_panel();
+//           return ret;
+//         };
+
+//         if (is_init) {
+//           let ret = await init_program();
+//           return ret;
+//         }
+//         return alter_program();
+//       },
+
+//       'xu-render': async function ($elm, val) {
+//         let ret = await common_fx['xu-render']($elm, val, true);
+//         return ret;
+//       },
+//       'xu-ref': async function ($elm, val) {
+//         let ret = await common_fx['xu-ref']($container, val, $container.data().xuData.xuPanelData.xuData.paramsP.dsSessionP);
+//         return ret;
+//       },
+//     },
+//     [`xu-teleport`]: {
+//       to: async function ($elm, val) {
+//         if (!glb.new_xu_render) {
+//           if (val.value) {
+//             // parent_infoP.is_xu_teleport;
+//             if ($elm?.parent()?.data()?.xuData?.length) {
+//               $elm.parent().data('xuTeleportData', []);
+//               for (const [key, node] of Object.entries(nodeP.children)) {
+//                 const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+
+//                 $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
+//                 $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
+//               }
+//               $elm.remove();
+//             } else {
+//               $elm.data('xuTeleportData', []).attr('hidden', true);
+//               for (const [key, node] of Object.entries(nodeP.children)) {
+//                 const $to_container = $(val.value);
+//                 if (!$to_container?.length) {
+//                   return console.error(`container ${val.value} for xuTeleportData not found`);
+//                 }
+//                 const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+
+//                 $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
+//                 $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
+//               }
+//             }
+//           }
+//           return { abort: true };
+//         }
+
+//         if (val.value) {
+//           // // parent_infoP.is_xu_teleport;
+//           // if ($elm?.parent()?.data()?.xuData?.length) {
+//           //   $elm.parent().data('xuTeleportData', []);
+//           //   for (const [key, node] of Object.entries(nodeP.children)) {
+//           //     const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+//           //     $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
+//           //     $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
+//           //   }
+//           //   $elm.remove();
+//           // } else {
+//           //   $elm.data('xuTeleportData', []).attr('hidden', true);
+//           //   for (const [key, node] of Object.entries(nodeP.children)) {
+//           //     const $to_container = $(val.value);
+//           //     if (!$to_container?.length) {
+//           //       return console.error(`container ${val.value} for xuTeleportData not found`);
+//           //     }
+//           //     const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+//           //     $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
+//           //     $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
+//           //   }
+//           // }
+//         }
+//         return {};
+//       },
+//       'xu-render': async function ($elm, val) {
+//         let ret = await common_fx['xu-render']($elm, val, true);
+//         return ret;
+//       },
+//       'xu-show': async function ($elm, val) {
+//         let ret = await common_fx['xu-show']($elm, val, true);
+//         return ret;
+//       },
+//     },
+//   };
+
+//   const load_cdn = async function (resource) {
+//     // console.log("loading cdn", resource);
+//     if (!_.isObject(resource) && _.isString(resource)) {
+//       resource = { src: resource, type: 'js' };
+//     }
+//     if (!_.isObject(resource)) {
+//       throw new Error('cdn resource in wrong format');
+//     }
+//     return new Promise(async (resolve) => {
+//       try {
+//         switch (resource.type) {
+//           case 'js':
+//             await func.utils.load_js_on_demand(resource.src);
+//             break;
+//           case 'css':
+//             await func.utils.load_js_on_demand(resource.src);
+//             break;
+//           case 'module':
+//             func.utils.load_js_on_demand(resource.src, 'module');
+//             break;
+
+//           default:
+//             await func.utils.load_js_on_demand(resource.src);
+//             break;
+//         }
+//         resolve();
+//       } catch (error) {
+//         func.utils.debug_report(SESSION_ID, 'xu-cdn', 'Fail to load: ' + resource, 'W');
+//         resolve();
+//       }
+
+//       // if (resource.type === "js" || !resource.type) {
+//       //   await func.utils.load_js_on_demand(resource.src);
+//       //   return resolve();
+//       // }
+//       // if (resource.type === "css") {
+//       //   func.utils.load_css_on_demand(resource.src);
+//       //   return resolve();
+//       // }
+//       // if (resource.type === "module") {
+//       //   func.utils.load_js_on_demand(resource.src, "module");
+//       //   return resolve();
+//       // }
+//       // func.utils.debug_report(
+//       //   SESSION_ID,
+//       //   "xu-cdn",
+//       //   "Fail to load: " + resource,
+//       //   "W"
+//       // );
+//       // return resolve();
+//     });
+//   };
+
+//   const common_fx = {
+//     'xu-attrs': async function ($elm, val) {
+//       if (!val.value) return {};
+//       if (!_.isObject(val.value)) throw 'xu-attrs value us not an object';
+//       for (const [attr_key, attr_val] of Object.entries(val.value)) {
+//         nodeP.attributes[attr_key] = attr_val;
+//       }
+
+//       return {};
+//     },
+//     'xu-ref': async function ($elm, val, dsSession) {
+//       if (!val.value) return {};
+
+//       func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
+
+//       // Select the node that will be observed for mutations
+//       const targetNode = $elm[0];
+
+//       if (!targetNode) return;
+
+//       // Options for the observer (which mutations to observe)
+//       const config = { attributes: true, childList: true, subtree: true };
+
+//       // Callback function to execute when mutations are observed
+//       const callback = (mutationList, observer) => {
+//         func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
+//       };
+
+//       // Create an observer instance linked to the callback function
+//       const observer = new MutationObserver(callback);
+
+//       // Start observing the target node for configured mutations
+//       observer.observe(targetNode, config);
+
+//       // Later, you can stop observing
+//       // observer.disconnect();
+
+//       return {};
+//     },
+//     'xu-bind': async function ($elm, val) {
+//       if (is_skeleton) return;
+
+//       let val_is_reference_field = false;
+
+//       let _prog_id = $elm.data().xuData.paramsP.prog_id;
+//       let _dsP = $elm.data().xuData.paramsP.dsSessionP;
+//       const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
+//       if (!view_ret) return {};
+
+//       let is_dynamic_field = false;
+//       let field_prop;
+//       let bind_field_id;
+
+//       const input_field_type = $elm.attr('type');
+
+//       const get_bind_field = async function (field_id) {
+//         if (['_FOR_VAL', '_FOR_KEY'].includes(field_id)) {
+//           is_dynamic_field = true;
+//           field_prop = _ds.dynamic_fields[field_id];
+//         } else {
+//           field_prop = func.common.find_item_by_key(view_ret.progFields, 'field_id', field_id);
+//           if (!field_prop) {
+//             /// find the field everywhere in the chain Aug 30 2024
+//             const ret_get_value = await func.datasource.get_value(SESSION_ID, field_id, _dsP);
+
+//             if (ret_get_value.found) {
+//               _dsP = ret_get_value.dsSessionP;
+//               let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
+//               _prog_id = _ds.prog_id;
+//               const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
+//               if (!view_ret) return {};
+//               field_prop = func.common.find_item_by_key(view_ret.progFields, 'field_id', field_id);
+//             }
+//             if (!field_prop) {
+//               throw `field ${field_id} not found in the program scope`;
+//             }
+//           }
+//         }
+//         return field_id;
+//       };
+
+//       try {
+//         bind_field_id = await get_bind_field(val.value.split('.')[0]);
+//         val_is_reference_field = true;
+//       } catch (err) {
+//         console.error(err?.message || err);
+//         return {};
+//       }
+
+//       const field_changed = async function (e) {
+//         var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
+
+//         // update array for checkbox that not in xu-for
+//         if (field_prop.props.fieldType === 'array' && input_field_type === 'checkbox' && val_is_reference_field) {
+//           let arr_value_before_cast = _.clone((await func.datasource.get_value(SESSION_ID, bind_field_id, _dsP, _ds.currentRecordId)).ret.value);
+//           let value_from_getter = bind.getter($elm[0]);
+//           let value;
+//           if (arr_value_before_cast.includes(value_from_getter)) {
+//             value = arr_value_before_cast.filter((item) => !_.isEqual(item, value_from_getter));
+//           } else {
+//             arr_value_before_cast.push(value_from_getter);
+//             value = arr_value_before_cast;
+//           }
+
+//           let datasource_changes = {
+//             [_dsP]: {
+//               [_ds.currentRecordId]: {
+//                 [bind_field_id]: value,
+//               },
+//             },
+//           };
+
+//           return await func.datasource.update(SESSION_ID, datasource_changes);
+//         }
+
+//         // update array for radio that not in xu-for
+//         if (field_prop.props.fieldType === 'array' && input_field_type === 'radio' && val_is_reference_field) {
+//           let value_from_getter = bind.getter($elm[0]);
+
+//           let datasource_changes = {
+//             [_dsP]: {
+//               [_ds.currentRecordId]: {
+//                 [bind_field_id]: [value_from_getter],
+//               },
+//             },
+//           };
+
+//           return await func.datasource.update(SESSION_ID, datasource_changes);
+//         }
+
+//         var value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', field_prop.props.fieldType, bind.getter($elm[0]));
+
+//         if (field_prop.props.fieldType === 'object') {
+//           value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', input_field_type, bind.getter($elm[0]));
+//         }
+
+//         if (!_ds.currentRecordId) return;
+
+//         let datasource_changes = {
+//           [_dsP]: {
+//             [_ds.currentRecordId]: {
+//               [bind_field_id]: value,
+//             },
+//           },
+//         };
+
+//         await func.datasource.update(SESSION_ID, datasource_changes);
+//         const iterate_info = $elm?.data()?.xuData?.iterate_info;
+//         const reference_source_obj = iterate_info?.reference_source_obj;
+//         if (reference_source_obj) {
+//           if (reference_source_obj.ret.type === 'array') {
+//             if (iterate_info.iterator_val === bind_field_id) {
+//               const arr_idx = Number($elm?.data()?.xuData?.iterate_info._key);
+
+//               const dataset_arr = await func.datasource.get_value(SESSION_ID, reference_source_obj.fieldIdP, _dsP, reference_source_obj.currentRecordId);
+//               let new_arr = _.cloneDeep(dataset_arr.ret.value);
+
+//               if (field_prop.props.fieldType === 'object' && val_is_reference_field) {
+//                 let obj_item = new_arr[arr_idx];
+
+//                 let e_exp = val.value.replace(bind_field_id, 'obj_item');
+
+//                 let new_val = eval(e_exp + (input_field_type === 'string' ? `="${value}"` : `=${value}`));
+
+//                 new_arr[arr_idx] = obj_item;
+//               } else {
+//                 new_arr[arr_idx] = value;
+//               }
+//               // datasource_changes[_dsP][_ds.currentRecordId][reference_source_obj.fieldIdP] = new_arr;
+
+//               let datasource_changes = {
+//                 [_dsP]: {
+//                   [_ds.currentRecordId]: {
+//                     [reference_source_obj.fieldIdP]: new_arr,
+//                   },
+//                 },
+//               };
+
+//               await func.datasource.update(SESSION_ID, datasource_changes, null, true);
+//             }
+//           }
+//         }
+
+//         await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, _ds.parentDataSourceNo);
+//       };
+
+//       const bind = new UI_FRAMEWORK_PLUGIN.bind();
+
+//       bind.listener($elm[0], field_changed);
+
+//       const set_value = function () {
+//         let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
+//         if (!_ds.currentRecordId) return;
+//         let value;
+//         try {
+//           if (val_is_reference_field) {
+//             if (is_dynamic_field) {
+//               value = _ds.dynamic_fields[bind_field_id].value;
+//             } else {
+//               const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
+//               value = _ds.data_feed.rows?.[row_idx]?.[bind_field_id];
+//             }
+//             if (field_prop.props.fieldType === 'array' && $elm.attr('type') === 'checkbox' && $elm.attr('value')) {
+//               if (value.includes($elm.attr('value'))) {
+//                 value = true;
+//               } else {
+//                 value = false;
+//               }
+//             } else if (field_prop.props.fieldType === 'array' && $elm.attr('type') === 'radio' && $elm.attr('value')) {
+//               if (value.includes($elm.attr('value'))) {
+//                 value = $elm.attr('value');
+//               } else {
+//                 value = false;
+//               }
+//             } else if (field_prop.props.fieldType === 'object' && val.value.split('.').length > 1) {
+//               let str = val.value.replace(bind_field_id, '(' + JSON.stringify(value) + ')');
+//               value = eval(str);
+//             }
+//           } else {
+//             value = val.value;
+//           }
+//           if (typeof value === 'undefined') return;
+//           bind.setter($elm[0], value);
+//         } catch (err) {
+//           console.error(err);
+//         }
+//       };
+//       /// init value from ds
+//       $('body').on('xu-bind-refresh.' + _ds.dsSession.toString(), () => {
+//         set_value();
+//       });
+
+//       set_value();
+//       return {};
+//     },
+//     'xu-render': async function ($elm, val, from_panel) {
+//       const old_render = async function () {
+//         var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
+//         const init_render = function () {
+//           if (!value) {
+//             var cloned_$div = $elm.clone(true);
+
+//             let $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).attr('hidden', true).appendTo($container); //.hide();
+//             let original_data_obj = {
+//               $container: cloned_$div,
+//               nodeP: _.cloneDeep(nodeP),
+//               parent_infoP,
+//               paramsP,
+//               keyP,
+//               parent_nodeP,
+//               $root_container,
+//             };
+//             $xurender.data('xuData', cloned_$div.data().xuData);
+//             $xurender.data().xuData.original_data_obj = original_data_obj;
+//             $xurender.data().xuData.xurender_node = cloned_$div;
+//             $xurender.data().xuAttributes = nodeP.attributes || {};
+//             // $xurender.hide();
+
+//             $elm.remove();
+//             return { abort: true };
+//           }
+//           return {};
+//         };
+
+//         const post_render = async function () {
+//           if (value) {
+//             try {
+//               // abort if already rended
+//               if ($elm[0].tagName !== 'XURENDER' && $elm?.length) {
+//                 return func.events.delete_job(SESSION_ID, jobNoP);
+//               }
+
+//               let original_data_obj = $elm.data().xuData.original_data_obj;
+
+//               if (!original_data_obj) {
+//                 func.events.delete_job(SESSION_ID, jobNoP);
+//                 return { delete_job: jobNoP };
+//               }
+
+//               const new_$div = await func.UI.screen.render_ui_tree(
+//                 SESSION_ID,
+//                 $elm, //original_data_obj.$container,
+//                 _.cloneDeep(original_data_obj.nodeP),
+//                 original_data_obj.parent_infoP,
+//                 original_data_obj.paramsP,
+//                 jobNoP,
+//                 null,
+//                 original_data_obj.keyP,
+//                 null,
+//                 original_data_obj.parent_nodeP,
+//                 null,
+//                 original_data_obj.$root_container,
+//               );
+
+//               new_$div.data().xuData.original_data_obj = original_data_obj;
+//               new_$div.data().xuData.xurender_node = $elm.clone(true);
+//               new_$div.data().xuAttributes = $elm.data().xuAttributes || {};
+
+//               const replace = async function () {
+//                 $elm.replaceWith(new_$div);
+//                 if (from_panel) {
+//                   const xuPanelWrapper = _.clone(new_$div.data().xuPanelWrapper);
+//                   $elm.parent().data().xuPanelWrapper = xuPanelWrapper;
+//                   $elm.replaceWith(new_$div.children());
+//                 }
+
+//                 if (val.fields_arr) {
+//                   return await func.UI.screen.refresh_xu_attributes(SESSION_ID, val.fields_arr, val.jobNoP, new_$div);
+//                 }
+//                 func.events.delete_job(SESSION_ID, jobNoP);
+//               };
+//               //  if ($elm && func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'xu_id', $elm.data().xuData.xu_id).length) {
+//               if ($elm && $(`[xu-ui-id="${$elm.attr('xu-ui-id')}"]`).length) {
+//                 if (new_$div.data().xuData.paramsP) {
+//                   return await replace();
+//                 }
+
+//                 func.events.delete_job(SESSION_ID, jobNoP);
+//               }
+//             } catch (error) {
+//               func.events.delete_job(SESSION_ID, jobNoP);
+//             }
+//             return;
+//           }
+//           // if (!value) {
+//           if ($elm.prop('tagName') === 'XURENDER') {
+//             func.events.delete_job(SESSION_ID, jobNoP);
+//             return;
+//           }
+
+//           let tmp_$div = $('<div>');
+
+//           let $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).appendTo(tmp_$div); //.hide();
+//           // was true before
+//           if ($elm.data().xuData.xurender_node) {
+//             $xurender.data({
+//               xuAttributes: $elm.data().xuData.xurender_node.data().xuAttributes || {},
+//               xuData: $elm.data().xuData.xurender_node.data().xuData || {},
+//             });
+//           } else {
+//             // default new state
+
+//             $xurender.data({
+//               xuAttributes: $elm.data().xuAttributes || {},
+//               xuData: $elm.data().xuData || {},
+//             });
+//             const original_data_obj = {
+//               nodeP: _.cloneDeep($elm.data().xuData.node_org),
+//               paramsP: $elm.data().xuData.paramsP,
+//               $container: $elm.clone(true),
+//               parent_infoP: parent_infoP,
+//             };
+
+//             $xurender.data().xuData.original_data_obj = original_data_obj;
+//           }
+
+//           //remove xu-teleport trace
+//           $.each($elm.find('xu-teleport'), (key, val) => {
+//             const xuTeleportData = $(val).data().xuTeleportData || [];
+//             for (const teleported_elm_id of xuTeleportData) {
+//               $(`[xu-ui-id="${teleported_elm_id}"]`).remove();
+//             }
+//           });
+
+//           $elm.replaceWith(tmp_$div.children());
+//           func.events.delete_job(SESSION_ID, jobNoP);
+//           // }
+//         };
+//         if (is_init) {
+//           return init_render();
+//         }
+//         return await post_render();
+//       };
+
+//       const new_render = async function () {
+//         var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
+//         const has_xu_render_attribute = true;
+//         const has_xu_exp_render_attribute = $elm.data()?.xuData?.attr_exp_info?.['xu-render'] ? true : false;
+//         const init_render = async function () {
+//           nodeP.xu_render_made = value;
+//           if (!value) {
+//             if (has_xu_exp_render_attribute) {
+//               return { has_xu_exp_render_attribute, has_xu_render_attribute, xu_render_background_processing: true };
+//             }
+//             return { has_xu_render_attribute, abort: true };
+//           }
+//           return { has_xu_exp_render_attribute, has_xu_render_attribute };
+//         };
+
+//         const post_render = async function () {
+//           // always come from refresh
+//           let nodeP = $container.data().xuData.node.children[keyP];
+//           nodeP.xu_render_made = value;
+//           if (value) {
+//             try {
+//               const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($elm.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+//               const xu_ui_id = $elm.attr('xu-ui-id');
+//               let new_$div = UI_WORKER_OBJ?.xu_render_cache?.[xu_ui_id + xu_render_cache_id]?.$div.clone(true);
+//               let found_parent_vars = false;
+//               if (new_$div) {
+//                 // validate if $div contains fields from parent ds
+//                 const parent_data = get_parent_ds_fields(SESSION_ID, paramsP.dsSessionP);
+//                 const parent_fields = Object.keys(parent_data);
+
+//                 $.each(new_$div.find('*'), (key, val) => {
+//                   const _xuAttributes = $(val)?.data()?.xuAttributes;
+//                   if (found_parent_vars || !_xuAttributes) return;
+//                   for (const [attr_key, attr_val] of Object.entries(_xuAttributes)) {
+//                     if (found_parent_vars) break;
+//                     for (const [key, val] of Object.entries(parent_fields)) {
+//                       if (attr_val.includes('@' + key)) {
+//                         found_parent_vars = true;
+//                         break;
+//                       }
+//                     }
+//                   }
+//                 });
+//               }
+
+//               if (!new_$div || found_parent_vars) {
+//                 UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { paramsP };
+//                 nodeP.xu_render_xu_ui_id = xu_ui_id;
+//                 nodeP.xu_render_cache_id = xu_render_cache_id;
+//                 new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, null, keyP, null, parent_nodeP, null, $root_container);
+//                 const _$div = new_$div.clone(true);
+//                 UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id].$div = _$div;
+//                 UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id].data = _$div.data();
+//               }
+//               // append order handling
+
+//               if (!$container.children().length) {
+//                 new_$div.appendTo($container);
+//               } else {
+//                 // iterate the container node
+//                 let $last_elm_found = [];
+//                 $.each($container.data().xuData.node.children, (item_key, item_val) => {
+//                   // const $elm = $(`[xu-node-id="${item_val.id}"]`);
+//                   const $elm = func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'nodeid', item_val.id);
+//                   if ($elm.length) {
+//                     $last_elm_found = $elm;
+//                   }
+//                   if (keyP == item_key) {
+//                     if ($last_elm_found.length) {
+//                       new_$div.after($last_elm_found);
+//                     } else {
+//                       $container.prepend(new_$div);
+//                     }
+//                   }
+//                 });
+//               }
+//             } catch (error) {
+//               func.events.delete_job(SESSION_ID, jobNoP);
+//             }
+//             return;
+//           }
+
+//           /////////// !value ///////////
+
+//           const xu_ui_id = $elm.attr('xu-ui-id');
+
+//           const cache_str = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($elm.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+//           const _$div = $elm.clone(true);
+//           UI_WORKER_OBJ.xu_render_cache[xu_ui_id + cache_str] = { $div: _$div, data: _$div.data(), paramsP };
+//           $elm.remove();
+//           func.events.delete_job(SESSION_ID, jobNoP);
+//         };
+//         if (is_init) {
+//           return await init_render();
+//         }
+//         return await post_render();
+//       };
+
+//       if (glb.new_xu_render) {
+//         return new_render();
+//       }
+//       return old_render();
+//     },
+//     'xu-show': async function ($elm, val) {
+//       var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-show', 'bool', val.value);
+//       if (value) {
+//         $elm.show();
+//       }
+//       if (!value) {
+//         $elm.hide();
+//       }
+//       return {};
+//     },
+//     'xu-content': async function ($elm, val) {
+//       try {
+//         $elm.html(val.value);
+//       } catch (error) {
+//         console.warn(e);
+//       }
+//       return;
+//     },
+//     'xu-text': async function ($elm, val) {
+//       try {
+//         $elm.text(val.value);
+//       } catch (error) {
+//         console.warn(e);
+//       }
+//       return;
+//     },
+//     'xu-html': async function ($elm, val) {
+//       try {
+//         $elm.html(val.value);
+//       } catch (error) {
+//         console.warn(e);
+//       }
+//       return;
+//     },
+//     'xu-for': async function ($elm, data) {
+//       // exit if call from rendered xu-for item to prevent infante loop (parent_infoP?.iterate_info indicate call from rendered item)
+//       if (parent_infoP?.iterate_info) return {};
+//       if (!data.value) return {};
+//       try {
+//         // data.value (xu-for) can store actual values such as an array, a CSV, or a field_id that references a specific field within the dataset, initialized with values for the iteration.
+//         let arr = data.value;
+
+//         // find reference source field
+//         let reference_source_obj;
+
+//         const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
+
+//         let view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', data.value);
+//         // detect if data.value (xu-for) is reference field_id  by checking if exist in the dataset
+//         if (view_field_obj) {
+//           // xu-for is reference field_id
+//           reference_source_obj = await func.datasource.get_value(SESSION_ID, data.value, paramsP.dsSessionP);
+//           arr = reference_source_obj?.ret?.value;
+//         } else {
+//           // xu-for is actual data
+//           if (typeof data.value === 'string') {
+//             arr = eval(data.value.replaceAll('\\', ''));
+//           }
+//           if (typeof arr === 'number') {
+//             arr = Array.from(Array(arr).keys());
+//           }
+//         }
+
+//         const custom_iterator_key = $elm.data().xuData.iterator_key;
+//         const custom_iterator_val = $elm.data().xuData.iterator_val;
+
+//         let iterator_key = custom_iterator_key;
+//         let iterator_val = custom_iterator_val;
+//         let is_key_dynamic_field, is_val_dynamic_field;
+
+//         // custom FOR_VAL name or namespaced default name
+//         if (!custom_iterator_key) {
+//           is_key_dynamic_field = true;
+
+//           iterator_key = '_FOR_KEY';
+//         }
+
+//         if (!custom_iterator_val) {
+//           is_val_dynamic_field = true;
+
+//           iterator_val = '_FOR_VAL';
+//         }
+
+//         var i = 0;
+//         for await (let [_key, _val] of Object.entries(arr)) {
+//           if (_.isArray(arr)) {
+//             _key = Number(_key);
+//           }
+
+//           const set_value = async function (is_dynamic_field, currentRecordId, field_id, value) {
+//             if (is_dynamic_field) {
+//               func.datasource.add_dynamic_field_to_ds(SESSION_ID, paramsP.dsSessionP, field_id, value);
+//             } else {
+//               const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
+
+//               let view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', field_id);
+//               if (view_field_obj) {
+//                 let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
+//                 try {
+//                   const row_idx = func.common.find_ROWID_idx(_ds, currentRecordId);
+//                   _ds.data_feed.rows[row_idx][field_id] = value;
+//                 } catch (err) {
+//                   console.error(err);
+//                 }
+//               } else {
+//                 console.error('field not exist in dataset for xu-for method');
+//               }
+//             }
+//           };
+
+//           var currentRecordId = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId.toString();
+
+//           await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
+//           await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
+
+//           var iterate_info = {
+//             _val,
+//             _key,
+//             iterator_key,
+//             iterator_val,
+//             is_key_dynamic_field,
+//             is_val_dynamic_field,
+//             reference_source_obj,
+//           };
+//           // let _parent_info = _.cloneDeep(parent_infoP) || {};
+//           let _parent_info = klona.klona(parent_infoP) || {};
+//           _parent_info.iterate_info = iterate_info;
+
+//           const $divP = await func.UI.screen.render_ui_tree(
+//             SESSION_ID,
+//             $container,
+//             nodeP,
+//             _parent_info, //parent_infoP ? _.cloneDeep(_parent_info) : null,
+//             paramsP,
+//             jobNoP,
+//             null,
+//             i,
+//             null,
+//             nodeP,
+//             null,
+//             $root_container,
+//           );
+
+//           $.each($divP.children(), function (key, val) {
+//             if ($(val)?.data()?.xuData) {
+//               $(val).data().xuData.iterate_info = iterate_info;
+//             }
+//           });
+
+//           i++;
+//         }
+//         $elm.remove();
+//         return { abort: true };
+//       } catch (e) {
+//         console.error(' Iterator Arr parse error');
+//         return { abort: true };
+//       }
+//     },
+//     'xu-for-key': async function ($elm, val) {
+//       $elm.data().xuData.iterator_key = val.value;
+//       return {};
+//     },
+//     'xu-for-val': async function ($elm, val) {
+//       $elm.data().xuData.iterator_val = val.value;
+//       return {};
+//     },
+//     'xu-class': async function ($elm, val) {
+//       try {
+//         const classes_string = val.value;
+//         // let obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
+
+//         const classes_obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
+//         for await (const [cla, cond] of Object.entries(classes_obj)) {
+//           let res = await func.expression.get(
+//             SESSION_ID,
+//             cond,
+//             paramsP.dsSessionP,
+//             'UI Attr EXP',
+//             $elm.data().xuData.currentRecordId, // SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId
+//             null,
+//             null,
+//             null,
+//             null,
+//             null,
+//             $elm.data().xuData.iterate_info,
+//           );
+
+//           if (res.result) {
+//             $elm.addClass(cla);
+//           } else {
+//             $elm.removeClass(cla);
+//           }
+
+//           $elm.data().xuData.debug_info.attribute_stat['xu-class'] = $elm.attr('class');
+//         }
+//         return {};
+//       } catch (e) {
+//         console.warn('parse error:' + val.value);
+//         return { abort: true };
+//       }
+//     },
+//     'xu-exp': async function ($elm, val) {
+//       let exp = val.value === null ? true : val.value;
+
+//       let exp_ret = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId, null, null, null, null, null, $elm.data().xuData.iterate_info);
+
+//       let value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
+
+//       var new_val = {
+//         key: val.key,
+//         value,
+//       };
+
+//       if (nodeP.tagName.substr(0, 3) === 'xu-') {
+//         if (tag_fx[nodeP.tagName][new_val.key]) {
+//           return await tag_fx[nodeP.tagName][new_val.key]($elm, new_val);
+//         }
+//         console.warn(`attribute ${new_val.key} not found for ${nodeP.tagName}`);
+//         return {};
+//       }
+//       if (!$elm.data().xuData) return;
+
+//       $elm.data().xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
+
+//       // IGNORE UNDEFINED or NULL ATTRIBUTES
+//       if (typeof new_val.value === 'undefined' || new_val.value === null) {
+//         return {};
+//       }
+
+//       // IGNORE ATTRIBUTES WITH EMPTY VALUES
+//       if (glb.solid_attributes.includes(new_val.key) && !new_val.value) {
+//         return {};
+//       }
+
+//       if (new_val.key.substr(0, 2) === 'xu') {
+//         return await common_fx[new_val.key]($elm, new_val);
+//       }
+
+//       $elm.attr(new_val.key, ($elm.attr(new_val.key) || '') + new_val.value);
+//       return {};
+//     },
+//     'xu-on': async function ($elm, val) {
+//       CLIENT_ACTIVITY_TS = Date.now();
+//       const trigger = val.key.split('xu-on:')[1].toLowerCase();
+//       $elm.on(trigger, async function (evt) {
+//         const _$elm = $(evt.currentTarget);
+//         if (_.isEmpty(_$elm.data().xuAttributes)) return;
+
+//         for await (const [key, val] of Object.entries(_$elm.data().xuAttributes['xu-on:' + evt.type])) {
+//           if (!_.isEmpty(val.props.condition)) {
+//             const expCond = await func.expression.get(SESSION_ID, val.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid); // execute expression
+//             if (!expCond.result) continue;
+//           }
+
+//           if (val.event_modifiers && evt[val.event_modifiers]) {
+//             evt[val.event_modifiers]();
+//           }
+
+//           // if (val.handler === 'custom') {
+//           if (val.workflow) {
+//             // do BL
+//             for await (const [key2, val2] of Object.entries(val.workflow)) {
+//               // var cond = val2.data.enabled;
+//               // if (val2.data.enabled && val2.props.condition) {
+//               // expCond = await func.expression.get(SESSION_ID, val2.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid); // execute expression
+//               // cond = expCond.result;
+//               // }
+//               // if (!cond) continue;
+
+//               if (!val2.data.enabled) continue; // added Jul 3, 25 - condition validate on execution
+
+//               func.events.add_to_queue(SESSION_ID, 'element event', val2.id, evt.type, val2.data.action, val2.data.name, null, _$elm.attr('xu-ui-id'), null, evt, null, null, null, paramsP.dsSessionP, null, null, null, evt.type, val2.data.name, null, null, val2, null, null, null, null, null, null);
+//             }
+//           }
+//         }
+//       });
+//       return {};
+//     },
+//     'xu-script': async function ($elm, val) {
+//       var checkExist = setInterval(async function () {
+//         if ($elm.is(':visible')) {
+//           try {
+//             // var res = eval('(' + val.value + ')');
+//             // const fn = `(function(el) {
+//             //  ${val.value}
+//             //  })(document.querySelector(\`[xu-ui-id="${$elm.attr('xu-ui-id')}"]\`));`;
+
+//             const fn = `async (el)=>{${val.value} };`;
+
+//             var res = eval(fn);
+//             await res($elm[0]);
+//             // if (typeof res === 'function') {
+//             //   res($elm[0]);
+//             // }
+//           } catch (e) {
+//             eval(val.value);
+//           }
+
+//           clearInterval(checkExist);
+//         }
+//       }, 100); // check every 100ms
+
+//       return {};
+//     },
+//     'xu-style-global': async function ($elm, val) {
+//       $('head').append(`<style>${val.value}</style>`);
+//       return {};
+//     },
+//     'xu-style': async function ($elm, val) {
+//       var cssString = val.value;
+
+//       var parser = new cssjs();
+
+//       var parsed = parser.parseCSS(cssString);
+//       var xuUiId = `[xu-ui-id="${$elm.attr('xu-ui-id')}"]`;
+
+//       $.each(parsed, function (key, val) {
+//         var selectors_arr = val.selector.split(',');
+
+//         $.each(selectors_arr, function (key2, val2) {
+//           selectors_arr[key2] = `${xuUiId} ${val2}, ${xuUiId}${val2}`;
+//           // console.log(new_selector);
+//         });
+
+//         val.selector = selectors_arr.join(',');
+//         // console.log(parsed);
+//       });
+
+//       var newCSSString = parser.getCSSForEditor(parsed);
+
+//       $('head').append(`<style>${newCSSString}</style>`);
+//       return {};
+//     },
+//     'xu-cdn': async function ($elm, val) {
+//       for await (const [key, resource] of Object.entries(val.value)) {
+//         await load_cdn(resource);
+//       }
+
+//       return {};
+//     },
+//     'xu-ui-plugin': async function ($elm, val) {
+//       var _session = SESSION_OBJ[SESSION_ID];
+
+//       for await (const [plugin_name, value] of Object.entries(val.value)) {
+//         const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
+//         if (_plugin?.installed && _plugin?.manifest?.['runtime.mjs']?.exist && _plugin?.manifest?.['index.mjs']?.exist && value.enabled) {
+//           if (_plugin?.manifest?.['runtime.mjs'].dist && _plugin?.manifest?.['runtime.mjs']?.css) {
+//             const plugin_runtime_css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
+//             func.utils.load_css_on_demand(plugin_runtime_css_url);
+//           }
 
-  // console.log(nodeP.id, xu_func, val);
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-  const tag_fx = {
-    [`xu-panel`]: {
-      program: async function ($elm, val) {
-        var ret = {};
-        var _session = SESSION_OBJ[SESSION_ID];
-        var _ds = _session.DS_GLB[paramsP.dsSessionP];
-        const init_program = async function () {
-          async function render_panel() {
-            const prog_id = val.value?.prog || val.value;
-            const params_obj = await get_params_obj_new(SESSION_ID, prog_id, nodeP, paramsP.dsSessionP);
-            let ret_panel = await func.UI.screen.init(SESSION_ID, prog_id, paramsP.screenId, _ds, $elm, null, _ds.currentRecordId, null, true, params_obj.params_res, 'initXu_panel', undefined, prog_id !== _ds.prog_id ? null : refreshed_ds, params_obj.params_raw);
-            ret = { $new_div: ret_panel };
-            if ($container.data().xuData) {
-              $container.data().xuData.xuPanelProps = $elm.data().xuAttributes;
-              $container.data().xuData.xuPanelData = ret_panel.data();
-            }
-            return ret;
-          }
+//           const plugin_index_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
 
-          if (!val.value) {
-            val.value = '_empty_panel_program';
-          }
+//           const plugin_index_resources = await import(plugin_index_src);
 
-          ret = await render_panel();
+//           let properties = _.cloneDeep(plugin_index_resources.properties);
+//           for await (let [prop_name, prop_val] of Object.entries(properties)) {
+//             prop_val.value = value?.attributes?.[prop_name];
+//             if (value?.attributes?.[`xu-exp:${prop_name}`]) {
+//               const res = await func.expression.get(SESSION_ID, value?.attributes?.[`xu-exp:${prop_name}`], paramsP.dsSessionP, 'UI Attr EXP');
+//               prop_val.value = res.result;
+//             }
+//           }
+//           // $elm.data().xu_ui_plugin = { properties };
+//           const plugin_runtime_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
 
-          return ret;
-        };
-        const alter_program = async function () {
-          var _session = SESSION_OBJ[SESSION_ID];
-          var _ds = _session.DS_GLB[paramsP.dsSessionP];
+//           const plugin_runtime_resources = await import(plugin_runtime_src);
 
-          /////////////////
-          async function render_panel() {
-            //   // if (!cache_str) {
-            //   //   await update_container(screen_ready_function);
-            //   // }
-            //   // if (cache_str && !CACHE_PROG_UI[cache_str]) {
-            //   //   await update_container(screen_ready_function);
-            //   //   save_cache();
-            //   // }
-            //   // if (callback) callback($div);
-            //   // $container.data().xuData.node.children =
-            //   //   $div.data().xuData.node.children;
-            //   // //swiper-wrapper
-            //   // var restore_slides_elements = async function () {
-            //   //   if ($tmp_div.children().length) {
-            //   //     $tmp_div
-            //   //       .find(".swiper-wrapper")
-            //   //       .empty()
-            //   //       .append($new_div.children());
-            //   //     $new_div.append($tmp_div.children());
-            //   //   }
-            //   // };
-            //   // // console.log($tmp_div);
-            //   // await restore_slides_elements();
-            //   // // CHANGE_PANEL_BUSY = false;
-            //   // func.events.delete_job(SESSION_ID, jobNo);
-            // };
-            const program = val.value?.prog || val.value;
-            var $wrapper = $('<div>');
-            var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, nodeP.attributes, null, null, null, $wrapper, '');
-            const params_obj = await get_params_obj_new(SESSION_ID, program, nodeP, paramsP.dsSessionP);
-            let ret_init = await func.UI.screen.init(SESSION_ID, program, paramsP.screenId, _ds, $div, null, _ds.currentRecordId, jobNoP, true, params_obj.params_res, 'alterXu_panel', undefined, undefined, params_obj.params_raw);
-            ret = {
-              $new_div: ret_init,
-              abort: true,
-            };
-            await func.UI.screen.panel_post_render_handler(SESSION_ID, $elm, $new_div, nodeP, $div.clone(true), jobNoP);
+//           if (plugin_runtime_resources.cdn && typeof _.isArray(plugin_runtime_resources.cdn)) {
+//             for await (const resource of plugin_runtime_resources.cdn) {
+//               await load_cdn(resource);
+//             }
+//           }
 
-            return ret;
-          }
-          if (!val.value) {
-            return { abort: true };
-          }
-          await render_panel();
-          return ret;
-        };
+//           if (plugin_runtime_resources.fn) {
+//             await plugin_runtime_resources.fn(plugin_name, $elm?.[0], properties);
+//             // await plugin_runtime_resources.fn(plugin_name, $elm?.[0], $elm.data().xu_ui_plugin.properties);
+//           }
+//         }
+//       }
 
-        if (is_init) {
-          let ret = await init_program();
-          return ret;
-        }
-        return alter_program();
-      },
+//       return {};
+//     },
+//     'xu-store': async function ($elm, val) {
+//       try {
+//         const fields_obj = JSON5.parse(val.value);
+//         for (const [field_id, value] of Object.entries(fields_obj)) {
+//           func.datasource.add_dynamic_field_to_ds(SESSION_ID, paramsP.dsSessionP, field_id, value);
+//         }
+//       } catch (err) {
+//         console.error(err);
+//       }
+//       return {};
+//     },
+//     'xu-viewport': async function ($elm, val) {
+//       // functionality in draw_html_element
+//       return {};
+//     },
+//   };
 
-      'xu-render': async function ($elm, val) {
-        let ret = await common_fx['xu-render']($elm, val, true);
-        return ret;
-      },
-      'xu-ref': async function ($elm, val) {
-        let ret = await common_fx['xu-ref']($container, val, $container.data().xuData.xuPanelData.xuData.paramsP.dsSessionP);
-        return ret;
-      },
-    },
-    [`xu-teleport`]: {
-      to: async function ($elm, val) {
-        if (!glb.new_xu_render) {
-          if (val.value) {
-            // parent_infoP.is_xu_teleport;
-            if ($elm?.parent()?.data()?.xuData?.length) {
-              $elm.parent().data('xuTeleportData', []);
-              for (const [key, node] of Object.entries(nodeP.children)) {
-                const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-
-                $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-                $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
-              }
-              $elm.remove();
-            } else {
-              $elm.data('xuTeleportData', []).attr('hidden', true);
-              for (const [key, node] of Object.entries(nodeP.children)) {
-                const $to_container = $(val.value);
-                if (!$to_container?.length) {
-                  return console.error(`container ${val.value} for xuTeleportData not found`);
-                }
-                const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+//   if (nodeP.tagName.substr(0, 3) === 'xu-') {
+//     if (xu_func === 'xu-exp') {
+//       return common_fx[xu_func]($elm, val);
+//     }
 
-                $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-                $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
-              }
-            }
-          }
-          return { abort: true };
-        }
+//     if (tag_fx?.[nodeP.tagName]?.[xu_func]) {
+//       let ret = await tag_fx[nodeP.tagName][xu_func]($elm, val);
+//       return ret;
+//     }
+//     // if (xu_func !== "tree_id")
+//     console.warn(`attribute ${xu_func} not found for ${nodeP.tagName}`);
+//     return {};
+//   }
+//   if (_.isEmpty($elm.data())) {
+//     return {};
+//   }
+//   if (!$elm.data().xuData.debug_info.attribute_stat) {
+//     $elm.data().xuData.debug_info.attribute_stat = {};
+//   }
+//   if (xu_func !== 'xu-exp') {
+//     $elm.data().xuData.debug_info.attribute_stat[xu_func] = val.value;
+//   }
+//   try {
+//     if (!common_fx[xu_func]) {
+//       console.warn('invalid xu-tag', xu_func, error);
+//       return {};
+//     }
 
-        if (val.value) {
-          // // parent_infoP.is_xu_teleport;
-          // if ($elm?.parent()?.data()?.xuData?.length) {
-          //   $elm.parent().data('xuTeleportData', []);
-          //   for (const [key, node] of Object.entries(nodeP.children)) {
-          //     const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-          //     $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-          //     $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
-          //   }
-          //   $elm.remove();
-          // } else {
-          //   $elm.data('xuTeleportData', []).attr('hidden', true);
-          //   for (const [key, node] of Object.entries(nodeP.children)) {
-          //     const $to_container = $(val.value);
-          //     if (!$to_container?.length) {
-          //       return console.error(`container ${val.value} for xuTeleportData not found`);
-          //     }
-          //     const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
-          //     $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
-          //     $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
-          //   }
-          // }
-        }
-        return {};
-      },
-      'xu-render': async function ($elm, val) {
-        let ret = await common_fx['xu-render']($elm, val, true);
-        return ret;
-      },
-      'xu-show': async function ($elm, val) {
-        let ret = await common_fx['xu-show']($elm, val, true);
-        return ret;
-      },
-    },
-  };
+//     return await common_fx[xu_func]($elm, val);
+//   } catch (error) {
+//     debugger;
+//   }
+// };
+
+func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, xu_func, $elm, val, is_init, refreshed_ds) {
+  if (is_skeleton) return;
+
+  // Cache frequently accessed values
+  const _session = SESSION_OBJ[SESSION_ID];
+  const _ds = _session.DS_GLB[paramsP.dsSessionP];
+  const elmData = $elm.data();
+  const xuData = elmData.xuData;
+  const nodeTag = nodeP.tagName;
+  const isXuTag = nodeTag && nodeTag.startsWith('xu-');
 
   const load_cdn = async function (resource) {
-    // console.log("loading cdn", resource);
-    if (!_.isObject(resource) && _.isString(resource)) {
-      resource = { src: resource, type: 'js' };
-    }
     if (!_.isObject(resource)) {
+      resource = _.isString(resource) ? { src: resource, type: 'js' } : null;
+    }
+    if (!resource) {
       throw new Error('cdn resource in wrong format');
     }
-    return new Promise(async (resolve) => {
-      try {
-        switch (resource.type) {
-          case 'js':
-            await func.utils.load_js_on_demand(resource.src);
-            break;
-          case 'css':
-            await func.utils.load_js_on_demand(resource.src);
-            break;
-          case 'module':
-            func.utils.load_js_on_demand(resource.src, 'module');
-            break;
-
-          default:
-            await func.utils.load_js_on_demand(resource.src);
-            break;
-        }
-        resolve();
-      } catch (error) {
-        func.utils.debug_report(SESSION_ID, 'xu-cdn', 'Fail to load: ' + resource, 'W');
-        resolve();
-      }
 
-      // if (resource.type === "js" || !resource.type) {
-      //   await func.utils.load_js_on_demand(resource.src);
-      //   return resolve();
-      // }
-      // if (resource.type === "css") {
-      //   func.utils.load_css_on_demand(resource.src);
-      //   return resolve();
-      // }
-      // if (resource.type === "module") {
-      //   func.utils.load_js_on_demand(resource.src, "module");
-      //   return resolve();
-      // }
-      // func.utils.debug_report(
-      //   SESSION_ID,
-      //   "xu-cdn",
-      //   "Fail to load: " + resource,
-      //   "W"
-      // );
-      // return resolve();
-    });
+    try {
+      const loadFn = resource.type === 'css' ? func.utils.load_css_on_demand : func.utils.load_js_on_demand;
+      const moduleArg = resource.type === 'module' ? 'module' : undefined;
+      await loadFn(resource.src, moduleArg);
+    } catch (error) {
+      func.utils.debug_report(SESSION_ID, 'xu-cdn', 'Fail to load: ' + resource.src, 'W');
+    }
   };
 
   const common_fx = {
     'xu-attrs': async function ($elm, val) {
-      if (!val.value) return {};
-      if (!_.isObject(val.value)) throw 'xu-attrs value us not an object';
-      for (const [attr_key, attr_val] of Object.entries(val.value)) {
-        nodeP.attributes[attr_key] = attr_val;
+      if (!val.value || !_.isObject(val.value)) {
+        if (val.value) throw 'xu-attrs value is not an object';
+        return {};
       }
-
+      Object.assign(nodeP.attributes, val.value);
       return {};
     },
+
     'xu-ref': async function ($elm, val, dsSession) {
       if (!val.value) return {};
 
       func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
 
-      // Select the node that will be observed for mutations
       const targetNode = $elm[0];
+      if (!targetNode) return {};
 
-      if (!targetNode) return;
-
-      // Options for the observer (which mutations to observe)
-      const config = { attributes: true, childList: true, subtree: true };
-
-      // Callback function to execute when mutations are observed
-      const callback = (mutationList, observer) => {
+      const observer = new MutationObserver(() => {
         func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
-      };
-
-      // Create an observer instance linked to the callback function
-      const observer = new MutationObserver(callback);
-
-      // Start observing the target node for configured mutations
-      observer.observe(targetNode, config);
-
-      // Later, you can stop observing
-      // observer.disconnect();
+      });
 
+      observer.observe(targetNode, { attributes: true, childList: true, subtree: true });
       return {};
     },
+
     'xu-bind': async function ($elm, val) {
-      if (is_skeleton) return;
+      if (is_skeleton) return {};
 
       let val_is_reference_field = false;
+      let _prog_id = xuData.paramsP.prog_id;
+      let _dsP = xuData.paramsP.dsSessionP;
 
-      let _prog_id = $elm.data().xuData.paramsP.prog_id;
-      let _dsP = $elm.data().xuData.paramsP.dsSessionP;
       const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
       if (!view_ret) return {};
 
       let is_dynamic_field = false;
       let field_prop;
       let bind_field_id;
-
       const input_field_type = $elm.attr('type');
 
       const get_bind_field = async function (field_id) {
@@ -32171,16 +33096,14 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
         } else {
           field_prop = func.common.find_item_by_key(view_ret.progFields, 'field_id', field_id);
           if (!field_prop) {
-            /// find the field everywhere in the chain Aug 30 2024
             const ret_get_value = await func.datasource.get_value(SESSION_ID, field_id, _dsP);
-
             if (ret_get_value.found) {
               _dsP = ret_get_value.dsSessionP;
-              let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
-              _prog_id = _ds.prog_id;
-              const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
-              if (!view_ret) return {};
-              field_prop = func.common.find_item_by_key(view_ret.progFields, 'field_id', field_id);
+              const ds = _session.DS_GLB[_dsP];
+              _prog_id = ds.prog_id;
+              const new_view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
+              if (!new_view_ret) return {};
+              field_prop = func.common.find_item_by_key(new_view_ret.progFields, 'field_id', field_id);
             }
             if (!field_prop) {
               throw `field ${field_id} not found in the program scope`;
@@ -32199,160 +33122,125 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
       }
 
       const field_changed = async function (e) {
-        var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_dsP];
-
-        // update array for checkbox that not in xu-for
-        if (field_prop.props.fieldType === 'array' && input_field_type === 'checkbox' && val_is_reference_field) {
-          let arr_value_before_cast = _.clone((await func.datasource.get_value(SESSION_ID, bind_field_id, _dsP, _ds.currentRecordId)).ret.value);
-          let value_from_getter = bind.getter($elm[0]);
-          let value;
-          if (arr_value_before_cast.includes(value_from_getter)) {
-            value = arr_value_before_cast.filter((item) => !_.isEqual(item, value_from_getter));
-          } else {
-            arr_value_before_cast.push(value_from_getter);
-            value = arr_value_before_cast;
-          }
-
-          let datasource_changes = {
-            [_dsP]: {
-              [_ds.currentRecordId]: {
-                [bind_field_id]: value,
-              },
-            },
-          };
-
-          return await func.datasource.update(SESSION_ID, datasource_changes);
+        const ds = _session.DS_GLB[_dsP];
+        const fieldType = field_prop.props.fieldType;
+        const isCheckbox = input_field_type === 'checkbox';
+        const isRadio = input_field_type === 'radio';
+
+        // Handle array field with checkbox
+        if (fieldType === 'array' && isCheckbox && val_is_reference_field) {
+          const arr_value = _.clone((await func.datasource.get_value(SESSION_ID, bind_field_id, _dsP, ds.currentRecordId)).ret.value);
+          const value_from_getter = bind.getter($elm[0]);
+          const value = arr_value.includes(value_from_getter) ? arr_value.filter((item) => !_.isEqual(item, value_from_getter)) : [...arr_value, value_from_getter];
+
+          return await func.datasource.update(SESSION_ID, {
+            [_dsP]: { [ds.currentRecordId]: { [bind_field_id]: value } },
+          });
         }
 
-        // update array for radio that not in xu-for
-        if (field_prop.props.fieldType === 'array' && input_field_type === 'radio' && val_is_reference_field) {
-          let value_from_getter = bind.getter($elm[0]);
-
-          let datasource_changes = {
-            [_dsP]: {
-              [_ds.currentRecordId]: {
-                [bind_field_id]: [value_from_getter],
-              },
-            },
-          };
-
-          return await func.datasource.update(SESSION_ID, datasource_changes);
+        // Handle array field with radio
+        if (fieldType === 'array' && isRadio && val_is_reference_field) {
+          return await func.datasource.update(SESSION_ID, {
+            [_dsP]: { [ds.currentRecordId]: { [bind_field_id]: [bind.getter($elm[0])] } },
+          });
         }
 
-        var value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', field_prop.props.fieldType, bind.getter($elm[0]));
+        let value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', fieldType, bind.getter($elm[0]));
 
-        if (field_prop.props.fieldType === 'object') {
+        if (fieldType === 'object') {
           value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', input_field_type, bind.getter($elm[0]));
         }
 
-        if (!_ds.currentRecordId) return;
+        if (!ds.currentRecordId) return;
 
-        let datasource_changes = {
-          [_dsP]: {
-            [_ds.currentRecordId]: {
-              [bind_field_id]: value,
-            },
-          },
-        };
+        await func.datasource.update(SESSION_ID, {
+          [_dsP]: { [ds.currentRecordId]: { [bind_field_id]: value } },
+        });
 
-        await func.datasource.update(SESSION_ID, datasource_changes);
-        const iterate_info = $elm?.data()?.xuData?.iterate_info;
+        const iterate_info = xuData?.iterate_info;
         const reference_source_obj = iterate_info?.reference_source_obj;
-        if (reference_source_obj) {
-          if (reference_source_obj.ret.type === 'array') {
-            if (iterate_info.iterator_val === bind_field_id) {
-              const arr_idx = Number($elm?.data()?.xuData?.iterate_info._key);
-
-              const dataset_arr = await func.datasource.get_value(SESSION_ID, reference_source_obj.fieldIdP, _dsP, reference_source_obj.currentRecordId);
-              let new_arr = _.cloneDeep(dataset_arr.ret.value);
-
-              if (field_prop.props.fieldType === 'object' && val_is_reference_field) {
-                let obj_item = new_arr[arr_idx];
 
-                let e_exp = val.value.replace(bind_field_id, 'obj_item');
-
-                let new_val = eval(e_exp + (input_field_type === 'string' ? `="${value}"` : `=${value}`));
-
-                new_arr[arr_idx] = obj_item;
-              } else {
-                new_arr[arr_idx] = value;
-              }
-              // datasource_changes[_dsP][_ds.currentRecordId][reference_source_obj.fieldIdP] = new_arr;
-
-              let datasource_changes = {
-                [_dsP]: {
-                  [_ds.currentRecordId]: {
-                    [reference_source_obj.fieldIdP]: new_arr,
-                  },
-                },
-              };
+        if (reference_source_obj?.ret?.type === 'array' && iterate_info.iterator_val === bind_field_id) {
+          const arr_idx = Number(iterate_info._key);
+          const dataset_arr = await func.datasource.get_value(SESSION_ID, reference_source_obj.fieldIdP, _dsP, reference_source_obj.currentRecordId);
+          const new_arr = _.cloneDeep(dataset_arr.ret.value);
 
-              await func.datasource.update(SESSION_ID, datasource_changes, null, true);
-            }
+          if (fieldType === 'object' && val_is_reference_field) {
+            let obj_item = new_arr[arr_idx];
+            const e_exp = val.value.replace(bind_field_id, 'obj_item');
+            eval(e_exp + (input_field_type === 'string' ? `="${value}"` : `=${value}`));
+            new_arr[arr_idx] = obj_item;
+          } else {
+            new_arr[arr_idx] = value;
           }
+
+          await func.datasource.update(
+            SESSION_ID,
+            {
+              [_dsP]: { [ds.currentRecordId]: { [reference_source_obj.fieldIdP]: new_arr } },
+            },
+            null,
+            true,
+          );
         }
 
-        await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, _ds.parentDataSourceNo);
+        await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, ds.parentDataSourceNo);
       };
 
       const bind = new UI_FRAMEWORK_PLUGIN.bind();
-
       bind.listener($elm[0], field_changed);
 
       const set_value = function () {
-        let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-        if (!_ds.currentRecordId) return;
-        let value;
+        const ds = _session.DS_GLB[paramsP.dsSessionP];
+        if (!ds.currentRecordId) return;
+
         try {
+          let value;
           if (val_is_reference_field) {
             if (is_dynamic_field) {
-              value = _ds.dynamic_fields[bind_field_id].value;
+              value = ds.dynamic_fields[bind_field_id].value;
             } else {
-              const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-              value = _ds.data_feed.rows?.[row_idx]?.[bind_field_id];
+              const row_idx = func.common.find_ROWID_idx(ds, ds.currentRecordId);
+              value = ds.data_feed.rows?.[row_idx]?.[bind_field_id];
             }
-            if (field_prop.props.fieldType === 'array' && $elm.attr('type') === 'checkbox' && $elm.attr('value')) {
-              if (value.includes($elm.attr('value'))) {
-                value = true;
-              } else {
-                value = false;
-              }
-            } else if (field_prop.props.fieldType === 'array' && $elm.attr('type') === 'radio' && $elm.attr('value')) {
-              if (value.includes($elm.attr('value'))) {
-                value = $elm.attr('value');
-              } else {
-                value = false;
-              }
-            } else if (field_prop.props.fieldType === 'object' && val.value.split('.').length > 1) {
-              let str = val.value.replace(bind_field_id, '(' + JSON.stringify(value) + ')');
-              value = eval(str);
+
+            const fieldType = field_prop.props.fieldType;
+            const elmValue = $elm.attr('value');
+
+            if (fieldType === 'array' && input_field_type === 'checkbox' && elmValue) {
+              value = value.includes(elmValue);
+            } else if (fieldType === 'array' && input_field_type === 'radio' && elmValue) {
+              value = value.includes(elmValue) ? elmValue : false;
+            } else if (fieldType === 'object' && val.value.split('.').length > 1) {
+              value = eval(val.value.replace(bind_field_id, '(' + JSON.stringify(value) + ')'));
             }
           } else {
             value = val.value;
           }
-          if (typeof value === 'undefined') return;
-          bind.setter($elm[0], value);
+
+          if (value !== undefined) {
+            bind.setter($elm[0], value);
+          }
         } catch (err) {
           console.error(err);
         }
       };
-      /// init value from ds
-      $('body').on('xu-bind-refresh.' + _ds.dsSession.toString(), () => {
-        set_value();
-      });
 
+      $('body').on('xu-bind-refresh.' + _ds.dsSession, set_value);
       set_value();
       return {};
     },
+
     'xu-render': async function ($elm, val, from_panel) {
-      const old_render = async function () {
-        var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
+      const value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
+
+      if (!glb.new_xu_render) {
+        // Old render logic (kept as is for compatibility)
         const init_render = function () {
           if (!value) {
-            var cloned_$div = $elm.clone(true);
-
-            let $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).attr('hidden', true).appendTo($container); //.hide();
-            let original_data_obj = {
+            const cloned_$div = $elm.clone(true);
+            const $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).attr('hidden', true).appendTo($container);
+            const original_data_obj = {
               $container: cloned_$div,
               nodeP: _.cloneDeep(nodeP),
               parent_infoP,
@@ -32365,8 +33253,6 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
             $xurender.data().xuData.original_data_obj = original_data_obj;
             $xurender.data().xuData.xurender_node = cloned_$div;
             $xurender.data().xuAttributes = nodeP.attributes || {};
-            // $xurender.hide();
-
             $elm.remove();
             return { abort: true };
           }
@@ -32376,271 +33262,207 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
         const post_render = async function () {
           if (value) {
             try {
-              // abort if already rended
-              if ($elm[0].tagName !== 'XURENDER' && $elm?.length) {
+              if ($elm[0].tagName !== 'XURENDER' || !$elm?.length) {
                 return func.events.delete_job(SESSION_ID, jobNoP);
               }
 
-              let original_data_obj = $elm.data().xuData.original_data_obj;
-
+              const original_data_obj = $elm.data().xuData.original_data_obj;
               if (!original_data_obj) {
                 func.events.delete_job(SESSION_ID, jobNoP);
                 return { delete_job: jobNoP };
               }
 
-              const new_$div = await func.UI.screen.render_ui_tree(
-                SESSION_ID,
-                $elm, //original_data_obj.$container,
-                _.cloneDeep(original_data_obj.nodeP),
-                original_data_obj.parent_infoP,
-                original_data_obj.paramsP,
-                jobNoP,
-                null,
-                original_data_obj.keyP,
-                null,
-                original_data_obj.parent_nodeP,
-                null,
-                original_data_obj.$root_container,
-              );
+              const new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $elm, _.cloneDeep(original_data_obj.nodeP), original_data_obj.parent_infoP, original_data_obj.paramsP, jobNoP, null, original_data_obj.keyP, null, original_data_obj.parent_nodeP, null, original_data_obj.$root_container);
 
               new_$div.data().xuData.original_data_obj = original_data_obj;
               new_$div.data().xuData.xurender_node = $elm.clone(true);
               new_$div.data().xuAttributes = $elm.data().xuAttributes || {};
 
               const replace = async function () {
-                $elm.replaceWith(new_$div);
+                $elm.replaceWith(from_panel ? new_$div.children() : new_$div);
                 if (from_panel) {
-                  const xuPanelWrapper = _.clone(new_$div.data().xuPanelWrapper);
-                  $elm.parent().data().xuPanelWrapper = xuPanelWrapper;
-                  $elm.replaceWith(new_$div.children());
+                  $elm.parent().data().xuPanelWrapper = _.clone(new_$div.data().xuPanelWrapper);
                 }
-
                 if (val.fields_arr) {
                   return await func.UI.screen.refresh_xu_attributes(SESSION_ID, val.fields_arr, val.jobNoP, new_$div);
                 }
                 func.events.delete_job(SESSION_ID, jobNoP);
               };
-              //  if ($elm && func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'xu_id', $elm.data().xuData.xu_id).length) {
-              if ($elm && $(`[xu-ui-id="${$elm.attr('xu-ui-id')}"]`).length) {
-                if (new_$div.data().xuData.paramsP) {
-                  return await replace();
-                }
 
-                func.events.delete_job(SESSION_ID, jobNoP);
+              if ($elm && $(`[xu-ui-id="${$elm.attr('xu-ui-id')}"]`).length && new_$div.data().xuData.paramsP) {
+                return await replace();
               }
+              func.events.delete_job(SESSION_ID, jobNoP);
             } catch (error) {
               func.events.delete_job(SESSION_ID, jobNoP);
             }
             return;
           }
-          // if (!value) {
+
           if ($elm.prop('tagName') === 'XURENDER') {
             func.events.delete_job(SESSION_ID, jobNoP);
             return;
           }
 
-          let tmp_$div = $('<div>');
+          const $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id'));
 
-          let $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id')).appendTo(tmp_$div); //.hide();
-          // was true before
           if ($elm.data().xuData.xurender_node) {
             $xurender.data({
               xuAttributes: $elm.data().xuData.xurender_node.data().xuAttributes || {},
               xuData: $elm.data().xuData.xurender_node.data().xuData || {},
             });
           } else {
-            // default new state
-
             $xurender.data({
               xuAttributes: $elm.data().xuAttributes || {},
               xuData: $elm.data().xuData || {},
             });
-            const original_data_obj = {
+            $xurender.data().xuData.original_data_obj = {
               nodeP: _.cloneDeep($elm.data().xuData.node_org),
               paramsP: $elm.data().xuData.paramsP,
               $container: $elm.clone(true),
               parent_infoP: parent_infoP,
             };
-
-            $xurender.data().xuData.original_data_obj = original_data_obj;
           }
 
-          //remove xu-teleport trace
           $.each($elm.find('xu-teleport'), (key, val) => {
             const xuTeleportData = $(val).data().xuTeleportData || [];
-            for (const teleported_elm_id of xuTeleportData) {
-              $(`[xu-ui-id="${teleported_elm_id}"]`).remove();
-            }
+            xuTeleportData.forEach((id) => $(`[xu-ui-id="${id}"]`).remove());
           });
 
-          $elm.replaceWith(tmp_$div.children());
+          $elm.replaceWith($xurender);
           func.events.delete_job(SESSION_ID, jobNoP);
-          // }
         };
-        if (is_init) {
-          return init_render();
-        }
-        return await post_render();
-      };
 
-      const new_render = async function () {
-        var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
-        const has_xu_render_attribute = true;
-        const has_xu_exp_render_attribute = $elm.data()?.xuData?.attr_exp_info?.['xu-render'] ? true : false;
-        const init_render = async function () {
-          nodeP.xu_render_made = value;
-          if (!value) {
-            if (has_xu_exp_render_attribute) {
-              return { has_xu_exp_render_attribute, has_xu_render_attribute, xu_render_background_processing: true };
-            }
-            return { has_xu_render_attribute, abort: true };
-          }
-          return { has_xu_exp_render_attribute, has_xu_render_attribute };
-        };
+        return is_init ? init_render() : await post_render();
+      }
 
-        const post_render = async function () {
-          // always come from refresh
-          let nodeP = $container.data().xuData.node.children[keyP];
-          nodeP.xu_render_made = value;
-          if (value) {
-            try {
-              const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($elm.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-              const xu_ui_id = $elm.attr('xu-ui-id');
-              let new_$div = UI_WORKER_OBJ?.xu_render_cache?.[xu_ui_id + xu_render_cache_id]?.$div.clone(true);
-              let found_parent_vars = false;
-              if (new_$div) {
-                // validate if $div contains fields from parent ds
-                const parent_data = get_parent_ds_fields(SESSION_ID, paramsP.dsSessionP);
-                const parent_fields = Object.keys(parent_data);
-
-                $.each(new_$div.find('*'), (key, val) => {
-                  const _xuAttributes = $(val)?.data()?.xuAttributes;
-                  if (found_parent_vars || !_xuAttributes) return;
-                  for (const [attr_key, attr_val] of Object.entries(_xuAttributes)) {
-                    if (found_parent_vars) break;
-                    for (const [key, val] of Object.entries(parent_fields)) {
-                      if (attr_val.includes('@' + key)) {
-                        found_parent_vars = true;
-                        break;
-                      }
-                    }
-                  }
-                });
-              }
+      // New render logic
+      const has_xu_render_attribute = true;
+      const has_xu_exp_render_attribute = !!xuData?.attr_exp_info?.['xu-render'];
 
-              if (!new_$div || found_parent_vars) {
-                UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { paramsP };
-                nodeP.xu_render_xu_ui_id = xu_ui_id;
-                nodeP.xu_render_cache_id = xu_render_cache_id;
-                new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, null, keyP, null, parent_nodeP, null, $root_container);
-                const _$div = new_$div.clone(true);
-                UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id].$div = _$div;
-                UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id].data = _$div.data();
-              }
-              // append order handling
+      const init_render = async function () {
+        nodeP.xu_render_made = value;
+        if (!value) {
+          return has_xu_exp_render_attribute ? { has_xu_exp_render_attribute, has_xu_render_attribute, xu_render_background_processing: true } : { has_xu_render_attribute, abort: true };
+        }
+        return { has_xu_exp_render_attribute, has_xu_render_attribute };
+      };
 
-              if (!$container.children().length) {
-                new_$div.appendTo($container);
-              } else {
-                // iterate the container node
-                let $last_elm_found = [];
-                $.each($container.data().xuData.node.children, (item_key, item_val) => {
-                  // const $elm = $(`[xu-node-id="${item_val.id}"]`);
-                  const $elm = func.UI.utils.find_in_element_data('xuData', $(SESSION_OBJ[SESSION_ID].root_element), 'nodeid', item_val.id);
-                  if ($elm.length) {
-                    $last_elm_found = $elm;
-                  }
-                  if (keyP == item_key) {
-                    if ($last_elm_found.length) {
-                      new_$div.after($last_elm_found);
-                    } else {
-                      $container.prepend(new_$div);
-                    }
+      const post_render = async function () {
+        const containerNodeP = $container.data().xuData.node.children[keyP];
+        containerNodeP.xu_render_made = value;
+
+        if (value) {
+          try {
+            const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys(xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+            const xu_ui_id = $elm.attr('xu-ui-id');
+            const cache_key = xu_ui_id + xu_render_cache_id;
+            let new_$div = UI_WORKER_OBJ?.xu_render_cache?.[cache_key]?.$div?.clone(true);
+            let found_parent_vars = false;
+
+            if (new_$div) {
+              const parent_data = get_parent_ds_fields(SESSION_ID, paramsP.dsSessionP);
+              const parent_fields = Object.keys(parent_data);
+
+              $.each(new_$div.find('*'), (key, val) => {
+                if (found_parent_vars) return;
+                const _xuAttributes = $(val)?.data()?.xuAttributes;
+                if (!_xuAttributes) return;
+
+                for (const attr_val of Object.values(_xuAttributes)) {
+                  if (parent_fields.some((field) => attr_val.includes('@' + field))) {
+                    found_parent_vars = true;
+                    break;
                   }
-                });
-              }
-            } catch (error) {
-              func.events.delete_job(SESSION_ID, jobNoP);
+                }
+              });
             }
-            return;
-          }
 
-          /////////// !value ///////////
+            if (!new_$div || found_parent_vars) {
+              UI_WORKER_OBJ.xu_render_cache[cache_key] = { paramsP };
+              containerNodeP.xu_render_xu_ui_id = xu_ui_id;
+              containerNodeP.xu_render_cache_id = xu_render_cache_id;
 
-          const xu_ui_id = $elm.attr('xu-ui-id');
+              new_$div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, containerNodeP, parent_infoP, paramsP, jobNoP, null, keyP, null, parent_nodeP, null, $root_container);
 
-          const cache_str = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($elm.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-          const _$div = $elm.clone(true);
-          UI_WORKER_OBJ.xu_render_cache[xu_ui_id + cache_str] = { $div: _$div, data: _$div.data(), paramsP };
-          $elm.remove();
-          func.events.delete_job(SESSION_ID, jobNoP);
-        };
-        if (is_init) {
-          return await init_render();
+              const _$div = new_$div.clone(true);
+              UI_WORKER_OBJ.xu_render_cache[cache_key] = { $div: _$div, data: _$div.data(), paramsP };
+            }
+
+            // Append order handling
+            if (!$container.children().length) {
+              new_$div.appendTo($container);
+            } else {
+              let $last_elm_found = [];
+              $.each($container.data().xuData.node.children, (item_key, item_val) => {
+                const $elm = func.UI.utils.find_in_element_data('xuData', $(_session.root_element), 'nodeid', item_val.id);
+                if ($elm.length) $last_elm_found = $elm;
+                if (keyP == item_key) {
+                  $last_elm_found.length ? new_$div.after($last_elm_found) : $container.prepend(new_$div);
+                }
+              });
+            }
+          } catch (error) {
+            func.events.delete_job(SESSION_ID, jobNoP);
+          }
+          return;
         }
-        return await post_render();
+
+        // !value
+        const xu_ui_id = $elm.attr('xu-ui-id');
+        const cache_str = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys(xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+        const _$div = $elm.clone(true);
+        UI_WORKER_OBJ.xu_render_cache[xu_ui_id + cache_str] = { $div: _$div, data: _$div.data(), paramsP };
+        $elm.remove();
+        func.events.delete_job(SESSION_ID, jobNoP);
       };
 
-      if (glb.new_xu_render) {
-        return new_render();
-      }
-      return old_render();
+      return is_init ? await init_render() : await post_render();
     },
+
     'xu-show': async function ($elm, val) {
-      var value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-show', 'bool', val.value);
-      if (value) {
-        $elm.show();
-      }
-      if (!value) {
-        $elm.hide();
-      }
+      const value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-show', 'bool', val.value);
+      $elm.toggle(value);
       return {};
     },
+
     'xu-content': async function ($elm, val) {
       try {
         $elm.html(val.value);
       } catch (error) {
-        console.warn(e);
+        console.warn(error);
       }
-      return;
     },
+
     'xu-text': async function ($elm, val) {
       try {
         $elm.text(val.value);
       } catch (error) {
-        console.warn(e);
+        console.warn(error);
       }
-      return;
     },
+
     'xu-html': async function ($elm, val) {
       try {
         $elm.html(val.value);
       } catch (error) {
-        console.warn(e);
+        console.warn(error);
       }
-      return;
     },
+
     'xu-for': async function ($elm, data) {
-      // exit if call from rendered xu-for item to prevent infante loop (parent_infoP?.iterate_info indicate call from rendered item)
-      if (parent_infoP?.iterate_info) return {};
-      if (!data.value) return {};
+      if (parent_infoP?.iterate_info || !data.value) return {};
+
       try {
-        // data.value (xu-for) can store actual values such as an array, a CSV, or a field_id that references a specific field within the dataset, initialized with values for the iteration.
         let arr = data.value;
-
-        // find reference source field
         let reference_source_obj;
-
         const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
+        const view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', data.value);
 
-        let view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', data.value);
-        // detect if data.value (xu-for) is reference field_id  by checking if exist in the dataset
         if (view_field_obj) {
-          // xu-for is reference field_id
           reference_source_obj = await func.datasource.get_value(SESSION_ID, data.value, paramsP.dsSessionP);
           arr = reference_source_obj?.ret?.value;
         } else {
-          // xu-for is actual data
           if (typeof data.value === 'string') {
             arr = eval(data.value.replaceAll('\\', ''));
           }
@@ -32649,59 +33471,44 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
           }
         }
 
-        const custom_iterator_key = $elm.data().xuData.iterator_key;
-        const custom_iterator_val = $elm.data().xuData.iterator_val;
-
-        let iterator_key = custom_iterator_key;
-        let iterator_val = custom_iterator_val;
-        let is_key_dynamic_field, is_val_dynamic_field;
-
-        // custom FOR_VAL name or namespaced default name
-        if (!custom_iterator_key) {
-          is_key_dynamic_field = true;
-
-          iterator_key = '_FOR_KEY';
-        }
-
-        if (!custom_iterator_val) {
-          is_val_dynamic_field = true;
-
-          iterator_val = '_FOR_VAL';
-        }
-
-        var i = 0;
-        for await (let [_key, _val] of Object.entries(arr)) {
-          if (_.isArray(arr)) {
-            _key = Number(_key);
-          }
+        const custom_iterator_key = xuData.iterator_key;
+        const custom_iterator_val = xuData.iterator_val;
+        const iterator_key = custom_iterator_key || '_FOR_KEY';
+        const iterator_val = custom_iterator_val || '_FOR_VAL';
+        const is_key_dynamic_field = !custom_iterator_key;
+        const is_val_dynamic_field = !custom_iterator_val;
 
-          const set_value = async function (is_dynamic_field, currentRecordId, field_id, value) {
-            if (is_dynamic_field) {
-              func.datasource.add_dynamic_field_to_ds(SESSION_ID, paramsP.dsSessionP, field_id, value);
-            } else {
-              const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
+        const set_value = async function (is_dynamic_field, currentRecordId, field_id, value) {
+          if (is_dynamic_field) {
+            func.datasource.add_dynamic_field_to_ds(SESSION_ID, paramsP.dsSessionP, field_id, value);
+          } else {
+            const _progFields = await func.datasource.get_progFields(SESSION_ID, paramsP.dsSessionP);
+            const view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', field_id);
 
-              let view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', field_id);
-              if (view_field_obj) {
-                let _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-                try {
-                  const row_idx = func.common.find_ROWID_idx(_ds, currentRecordId);
-                  _ds.data_feed.rows[row_idx][field_id] = value;
-                } catch (err) {
-                  console.error(err);
-                }
-              } else {
-                console.error('field not exist in dataset for xu-for method');
+            if (view_field_obj) {
+              const ds = _session.DS_GLB[paramsP.dsSessionP];
+              try {
+                const row_idx = func.common.find_ROWID_idx(ds, currentRecordId);
+                ds.data_feed.rows[row_idx][field_id] = value;
+              } catch (err) {
+                console.error(err);
               }
+            } else {
+              console.error('field not exist in dataset for xu-for method');
             }
-          };
+          }
+        };
+
+        const currentRecordId = _ds.currentRecordId.toString();
+        let i = 0;
 
-          var currentRecordId = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId.toString();
+        for (let [_key, _val] of Object.entries(arr)) {
+          if (_.isArray(arr)) _key = Number(_key);
 
           await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
           await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
 
-          var iterate_info = {
+          const iterate_info = {
             _val,
             _key,
             iterator_key,
@@ -32710,26 +33517,13 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
             is_val_dynamic_field,
             reference_source_obj,
           };
-          // let _parent_info = _.cloneDeep(parent_infoP) || {};
-          let _parent_info = klona.klona(parent_infoP) || {};
+
+          const _parent_info = klona.klona(parent_infoP) || {};
           _parent_info.iterate_info = iterate_info;
 
-          const $divP = await func.UI.screen.render_ui_tree(
-            SESSION_ID,
-            $container,
-            nodeP,
-            _parent_info, //parent_infoP ? _.cloneDeep(_parent_info) : null,
-            paramsP,
-            jobNoP,
-            null,
-            i,
-            null,
-            nodeP,
-            null,
-            $root_container,
-          );
+          const $divP = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP, _parent_info, paramsP, jobNoP, null, i, null, nodeP, null, $root_container);
 
-          $.each($divP.children(), function (key, val) {
+          $.each($divP.children(), (key, val) => {
             if ($(val)?.data()?.xuData) {
               $(val).data().xuData.iterate_info = iterate_info;
             }
@@ -32737,106 +33531,87 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
 
           i++;
         }
+
         $elm.remove();
         return { abort: true };
       } catch (e) {
-        console.error(' Iterator Arr parse error');
+        console.error('Iterator Arr parse error', e);
         return { abort: true };
       }
     },
+
     'xu-for-key': async function ($elm, val) {
-      $elm.data().xuData.iterator_key = val.value;
+      xuData.iterator_key = val.value;
       return {};
     },
+
     'xu-for-val': async function ($elm, val) {
-      $elm.data().xuData.iterator_val = val.value;
+      xuData.iterator_val = val.value;
       return {};
     },
+
     'xu-class': async function ($elm, val) {
       try {
-        const classes_string = val.value;
-        // let obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
-
-        const classes_obj = _.isString(classes_string) ? JSON.parse(classes_string) : _.defaults(classes_string, {});
-        for await (const [cla, cond] of Object.entries(classes_obj)) {
-          let res = await func.expression.get(
-            SESSION_ID,
-            cond,
-            paramsP.dsSessionP,
-            'UI Attr EXP',
-            $elm.data().xuData.currentRecordId, // SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId
-            null,
-            null,
-            null,
-            null,
-            null,
-            $elm.data().xuData.iterate_info,
-          );
+        const classes_obj = _.isString(val.value) ? JSON.parse(val.value) : _.defaults(val.value, {});
 
-          if (res.result) {
-            $elm.addClass(cla);
-          } else {
-            $elm.removeClass(cla);
-          }
+        for (const [cla, cond] of Object.entries(classes_obj)) {
+          const res = await func.expression.get(SESSION_ID, cond, paramsP.dsSessionP, 'UI Attr EXP', xuData.currentRecordId, null, null, null, null, null, xuData.iterate_info);
 
-          $elm.data().xuData.debug_info.attribute_stat['xu-class'] = $elm.attr('class');
+          $elm.toggleClass(cla, res.result);
         }
+
+        xuData.debug_info.attribute_stat['xu-class'] = $elm.attr('class');
         return {};
       } catch (e) {
         console.warn('parse error:' + val.value);
         return { abort: true };
       }
     },
-    'xu-exp': async function ($elm, val) {
-      let exp = val.value === null ? true : val.value;
-
-      let exp_ret = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP].currentRecordId, null, null, null, null, null, $elm.data().xuData.iterate_info);
 
-      let value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
+    'xu-exp': async function ($elm, val) {
+      const exp = val.value === null ? true : val.value;
+      const exp_ret = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', _ds.currentRecordId, null, null, null, null, null, xuData.iterate_info);
 
-      var new_val = {
-        key: val.key,
-        value,
-      };
+      const value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
+      const new_val = { key: val.key, value };
 
-      if (nodeP.tagName.substr(0, 3) === 'xu-') {
-        if (tag_fx[nodeP.tagName][new_val.key]) {
-          return await tag_fx[nodeP.tagName][new_val.key]($elm, new_val);
+      if (isXuTag) {
+        if (tag_fx[nodeTag]?.[new_val.key]) {
+          return await tag_fx[nodeTag][new_val.key]($elm, new_val);
         }
-        console.warn(`attribute ${new_val.key} not found for ${nodeP.tagName}`);
+        console.warn(`attribute ${new_val.key} not found for ${nodeTag}`);
         return {};
       }
-      if (!$elm.data().xuData) return;
 
-      $elm.data().xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
-
-      // IGNORE UNDEFINED or NULL ATTRIBUTES
-      if (typeof new_val.value === 'undefined' || new_val.value === null) {
-        return {};
-      }
+      if (!xuData) return {};
+      xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
 
-      // IGNORE ATTRIBUTES WITH EMPTY VALUES
-      if (glb.solid_attributes.includes(new_val.key) && !new_val.value) {
-        return {};
-      }
+      if (new_val.value === undefined || new_val.value === null) return {};
+      if (glb.solid_attributes.includes(new_val.key) && !new_val.value) return {};
 
-      if (new_val.key.substr(0, 2) === 'xu') {
+      if (new_val.key.startsWith('xu')) {
         return await common_fx[new_val.key]($elm, new_val);
       }
 
       $elm.attr(new_val.key, ($elm.attr(new_val.key) || '') + new_val.value);
       return {};
     },
+
     'xu-on': async function ($elm, val) {
       CLIENT_ACTIVITY_TS = Date.now();
       const trigger = val.key.split('xu-on:')[1].toLowerCase();
+
       $elm.on(trigger, async function (evt) {
         const _$elm = $(evt.currentTarget);
-        if (_.isEmpty(_$elm.data().xuAttributes)) return;
+        const xuAttributes = _$elm.data().xuAttributes;
+        if (_.isEmpty(xuAttributes)) return;
+
+        const handlers = xuAttributes['xu-on:' + evt.type];
+        if (!handlers) return;
 
-        for await (const [key, val] of Object.entries(_$elm.data().xuAttributes['xu-on:' + evt.type])) {
+        for (const [key, val] of Object.entries(handlers)) {
           if (!_.isEmpty(val.props.condition)) {
-            const expCond = await func.expression.get(SESSION_ID, val.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid); // execute expression
+            const expCond = await func.expression.get(SESSION_ID, val.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid);
             if (!expCond.result) continue;
           }
 
@@ -32844,18 +33619,9 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
             evt[val.event_modifiers]();
           }
 
-          // if (val.handler === 'custom') {
           if (val.workflow) {
-            // do BL
-            for await (const [key2, val2] of Object.entries(val.workflow)) {
-              // var cond = val2.data.enabled;
-              // if (val2.data.enabled && val2.props.condition) {
-              // expCond = await func.expression.get(SESSION_ID, val2.props.condition, paramsP.dsSessionP, 'condition', paramsP.recordid); // execute expression
-              // cond = expCond.result;
-              // }
-              // if (!cond) continue;
-
-              if (!val2.data.enabled) continue; // added Jul 3, 25 - condition validate on execution
+            for (const [key2, val2] of Object.entries(val.workflow)) {
+              if (!val2.data.enabled) continue;
 
               func.events.add_to_queue(SESSION_ID, 'element event', val2.id, evt.type, val2.data.action, val2.data.name, null, _$elm.attr('xu-ui-id'), null, evt, null, null, null, paramsP.dsSessionP, null, null, null, evt.type, val2.data.name, null, null, val2, null, null, null, null, null, null);
             }
@@ -32864,111 +33630,91 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
       });
       return {};
     },
+
     'xu-script': async function ($elm, val) {
-      var checkExist = setInterval(async function () {
+      const checkExist = setInterval(async function () {
         if ($elm.is(':visible')) {
           try {
-            // var res = eval('(' + val.value + ')');
-            // const fn = `(function(el) {
-            //  ${val.value}
-            //  })(document.querySelector(\`[xu-ui-id="${$elm.attr('xu-ui-id')}"]\`));`;
-
-            const fn = `async (el)=>{${val.value} };`;
-
-            var res = eval(fn);
-            await res($elm[0]);
-            // if (typeof res === 'function') {
-            //   res($elm[0]);
-            // }
+            const fn = eval(`async (el)=>{${val.value}}`);
+            await fn($elm[0]);
           } catch (e) {
             eval(val.value);
           }
-
           clearInterval(checkExist);
         }
-      }, 100); // check every 100ms
-
+      }, 100);
       return {};
     },
+
     'xu-style-global': async function ($elm, val) {
       $('head').append(`<style>${val.value}</style>`);
       return {};
     },
-    'xu-style': async function ($elm, val) {
-      var cssString = val.value;
-
-      var parser = new cssjs();
-
-      var parsed = parser.parseCSS(cssString);
-      var xuUiId = `[xu-ui-id="${$elm.attr('xu-ui-id')}"]`;
-
-      $.each(parsed, function (key, val) {
-        var selectors_arr = val.selector.split(',');
 
-        $.each(selectors_arr, function (key2, val2) {
-          selectors_arr[key2] = `${xuUiId} ${val2}, ${xuUiId}${val2}`;
-          // console.log(new_selector);
-        });
-
-        val.selector = selectors_arr.join(',');
-        // console.log(parsed);
+    'xu-style': async function ($elm, val) {
+      const parser = new cssjs();
+      const parsed = parser.parseCSS(val.value);
+      const xuUiId = `[xu-ui-id="${$elm.attr('xu-ui-id')}"]`;
+
+      parsed.forEach((rule) => {
+        rule.selector = rule.selector
+          .split(',')
+          .map((sel) => `${xuUiId} ${sel}, ${xuUiId}${sel}`)
+          .join(',');
       });
 
-      var newCSSString = parser.getCSSForEditor(parsed);
-
-      $('head').append(`<style>${newCSSString}</style>`);
+      $('head').append(`<style>${parser.getCSSForEditor(parsed)}</style>`);
       return {};
     },
+
     'xu-cdn': async function ($elm, val) {
-      for await (const [key, resource] of Object.entries(val.value)) {
+      for (const resource of Object.values(val.value)) {
         await load_cdn(resource);
       }
-
       return {};
     },
-    'xu-ui-plugin': async function ($elm, val) {
-      var _session = SESSION_OBJ[SESSION_ID];
 
-      for await (const [plugin_name, value] of Object.entries(val.value)) {
+    'xu-ui-plugin': async function ($elm, val) {
+      for (const [plugin_name, value] of Object.entries(val.value)) {
         const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
-        if (_plugin?.installed && _plugin?.manifest?.['runtime.mjs']?.exist && _plugin?.manifest?.['index.mjs']?.exist && value.enabled) {
-          if (_plugin?.manifest?.['runtime.mjs'].dist && _plugin?.manifest?.['runtime.mjs']?.css) {
-            const plugin_runtime_css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
-            func.utils.load_css_on_demand(plugin_runtime_css_url);
-          }
 
-          const plugin_index_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
+        if (!_plugin?.installed || !_plugin?.manifest?.['runtime.mjs']?.exist || !_plugin?.manifest?.['index.mjs']?.exist || !value.enabled) continue;
 
-          const plugin_index_resources = await import(plugin_index_src);
+        if (_plugin.manifest['runtime.mjs'].dist && _plugin.manifest['runtime.mjs'].css) {
+          const css_url = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, 'dist/runtime.css');
+          func.utils.load_css_on_demand(css_url);
+        }
 
-          let properties = _.cloneDeep(plugin_index_resources.properties);
-          for await (let [prop_name, prop_val] of Object.entries(properties)) {
-            prop_val.value = value?.attributes?.[prop_name];
-            if (value?.attributes?.[`xu-exp:${prop_name}`]) {
-              const res = await func.expression.get(SESSION_ID, value?.attributes?.[`xu-exp:${prop_name}`], paramsP.dsSessionP, 'UI Attr EXP');
-              prop_val.value = res.result;
-            }
-          }
-          // $elm.data().xu_ui_plugin = { properties };
-          const plugin_runtime_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
+        const plugin_index_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
 
-          const plugin_runtime_resources = await import(plugin_runtime_src);
+        const plugin_index_resources = await import(plugin_index_src);
+        const properties = _.cloneDeep(plugin_index_resources.properties);
 
-          if (plugin_runtime_resources.cdn && typeof _.isArray(plugin_runtime_resources.cdn)) {
-            for await (const resource of plugin_runtime_resources.cdn) {
-              await load_cdn(resource);
-            }
+        for (const [prop_name, prop_val] of Object.entries(properties)) {
+          prop_val.value = value?.attributes?.[prop_name];
+          if (value?.attributes?.[`xu-exp:${prop_name}`]) {
+            const res = await func.expression.get(SESSION_ID, value.attributes[`xu-exp:${prop_name}`], paramsP.dsSessionP, 'UI Attr EXP');
+            prop_val.value = res.result;
           }
+        }
+
+        const plugin_runtime_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
 
-          if (plugin_runtime_resources.fn) {
-            await plugin_runtime_resources.fn(plugin_name, $elm?.[0], properties);
-            // await plugin_runtime_resources.fn(plugin_name, $elm?.[0], $elm.data().xu_ui_plugin.properties);
+        const plugin_runtime_resources = await import(plugin_runtime_src);
+
+        if (plugin_runtime_resources.cdn && _.isArray(plugin_runtime_resources.cdn)) {
+          for (const resource of plugin_runtime_resources.cdn) {
+            await load_cdn(resource);
           }
         }
-      }
 
+        if (plugin_runtime_resources.fn) {
+          await plugin_runtime_resources.fn(plugin_name, $elm?.[0], properties);
+        }
+      }
       return {};
     },
+
     'xu-store': async function ($elm, val) {
       try {
         const fields_obj = JSON5.parse(val.value);
@@ -32980,43 +33726,135 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
       }
       return {};
     },
+
     'xu-viewport': async function ($elm, val) {
-      // functionality in draw_html_element
       return {};
     },
   };
 
-  if (nodeP.tagName.substr(0, 3) === 'xu-') {
+  const tag_fx = {
+    'xu-panel': {
+      program: async function ($elm, val) {
+        const init_program = async function () {
+          async function render_panel() {
+            const prog_id = val.value?.prog || val.value;
+            const params_obj = await get_params_obj_new(SESSION_ID, prog_id, nodeP, paramsP.dsSessionP);
+            const ret_panel = await func.UI.screen.init(SESSION_ID, prog_id, paramsP.screenId, _ds, $elm, null, _ds.currentRecordId, null, true, params_obj.params_res, 'initXu_panel', undefined, prog_id !== _ds.prog_id ? null : refreshed_ds, params_obj.params_raw);
+
+            const containerData = $container.data();
+            if (containerData.xuData) {
+              containerData.xuData.xuPanelProps = elmData.xuAttributes;
+              containerData.xuData.xuPanelData = ret_panel.data();
+            }
+            return { $new_div: ret_panel };
+          }
+
+          if (!val.value) val.value = '_empty_panel_program';
+          return await render_panel();
+        };
+
+        const alter_program = async function () {
+          async function render_panel() {
+            const program = val.value?.prog || val.value;
+            const $wrapper = $('<div>');
+            const $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, nodeP.attributes, null, null, null, $wrapper, '');
+
+            const params_obj = await get_params_obj_new(SESSION_ID, program, nodeP, paramsP.dsSessionP);
+            const ret_init = await func.UI.screen.init(SESSION_ID, program, paramsP.screenId, _ds, $div, null, _ds.currentRecordId, jobNoP, true, params_obj.params_res, 'alterXu_panel', undefined, undefined, params_obj.params_raw);
+
+            await func.UI.screen.panel_post_render_handler(SESSION_ID, $elm, ret_init, nodeP, $div.clone(true), jobNoP);
+
+            return { $new_div: ret_init, abort: true };
+          }
+
+          if (!val.value) return { abort: true };
+          await render_panel();
+          return { abort: true };
+        };
+
+        return is_init ? await init_program() : await alter_program();
+      },
+
+      'xu-render': async function ($elm, val) {
+        return await common_fx['xu-render']($elm, val, true);
+      },
+
+      'xu-ref': async function ($elm, val) {
+        return await common_fx['xu-ref']($container, val, $container.data().xuData.xuPanelData.xuData.paramsP.dsSessionP);
+      },
+    },
+
+    'xu-teleport': {
+      to: async function ($elm, val) {
+        if (!glb.new_xu_render && val.value) {
+          if ($elm?.parent()?.data()?.xuData?.length) {
+            $elm.parent().data('xuTeleportData', []);
+            for (const [key, node] of Object.entries(nodeP.children)) {
+              const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $(val.value), node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+              $elm.parent().data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
+              $teleport_elm.attr('xu-teleport-parent-id', $elm.parent().attr('xu-ui-id'));
+            }
+            $elm.remove();
+          } else {
+            $elm.data('xuTeleportData', []).attr('hidden', true);
+            for (const [key, node] of Object.entries(nodeP.children)) {
+              const $to_container = $(val.value);
+              if (!$to_container?.length) {
+                return console.error(`container ${val.value} for xuTeleportData not found`);
+              }
+              const $teleport_elm = await func.UI.screen.render_ui_tree(SESSION_ID, $to_container, node, parent_infoP, paramsP, jobNoP, is_skeleton, Number(key), null, node, null, $root_container);
+              $elm.data().xuTeleportData.push($teleport_elm.attr('xu-ui-id'));
+              $teleport_elm.attr('xu-teleport-parent-id', $elm.attr('xu-ui-id'));
+            }
+          }
+          return { abort: true };
+        }
+        return {};
+      },
+
+      'xu-render': async function ($elm, val) {
+        return await common_fx['xu-render']($elm, val, true);
+      },
+
+      'xu-show': async function ($elm, val) {
+        return await common_fx['xu-show']($elm, val, true);
+      },
+    },
+  };
+
+  // Main execution logic
+  if (isXuTag) {
     if (xu_func === 'xu-exp') {
       return common_fx[xu_func]($elm, val);
     }
 
-    if (tag_fx?.[nodeP.tagName]?.[xu_func]) {
-      let ret = await tag_fx[nodeP.tagName][xu_func]($elm, val);
-      return ret;
+    if (tag_fx?.[nodeTag]?.[xu_func]) {
+      return await tag_fx[nodeTag][xu_func]($elm, val);
     }
-    // if (xu_func !== "tree_id")
-    console.warn(`attribute ${xu_func} not found for ${nodeP.tagName}`);
-    return {};
-  }
-  if (_.isEmpty($elm.data())) {
+
+    console.warn(`attribute ${xu_func} not found for ${nodeTag}`);
     return {};
   }
-  if (!$elm.data().xuData.debug_info.attribute_stat) {
-    $elm.data().xuData.debug_info.attribute_stat = {};
+
+  if (_.isEmpty(elmData)) return {};
+
+  if (!xuData.debug_info.attribute_stat) {
+    xuData.debug_info.attribute_stat = {};
   }
+
   if (xu_func !== 'xu-exp') {
-    $elm.data().xuData.debug_info.attribute_stat[xu_func] = val.value;
+    xuData.debug_info.attribute_stat[xu_func] = val.value;
   }
+
   try {
     if (!common_fx[xu_func]) {
-      console.warn('invalid xu-tag', xu_func, error);
+      console.warn('invalid xu-tag', xu_func);
       return {};
     }
-
     return await common_fx[xu_func]($elm, val);
   } catch (error) {
-    debugger;
+    console.error('execute_xu_functions error:', error);
+    return {};
   }
 };
 
@@ -33644,162 +34482,312 @@ func.UI.screen.panel_post_render_handler = async function (
   return jobNoP;
 };
 
+// const generate_xu_ui_id = async function (SESSION_ID, nodeP, $container, paramsP, keyP) {
+//   // const _paramsP = _.cloneDeep(paramsP);
+//   const _paramsP = klona.klona(paramsP);
+//   var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
+
+//   const currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
+//   const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
+//   const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
+//   let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
+
+//   const new_ui_id = await func.common.sha256(ui_id);
+//   return new_ui_id;
+// };
+
 const generate_xu_ui_id = async function (SESSION_ID, nodeP, $container, paramsP, keyP) {
-  // const _paramsP = _.cloneDeep(paramsP);
-  const _paramsP = klona.klona(paramsP);
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
+  // Avoid cloning if we only need dsSessionP
+  const dsSessionP = paramsP.dsSessionP;
+  const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[dsSessionP];
+
+  // Cache container data access
+  const containerXuData = $container?.data?.()?.xuData;
+  const currentRecordId = containerXuData?.recordid || _ds?.currentRecordId || '';
 
-  const currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
-  const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
-  const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
-  let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
+  // Build strings efficiently
+  const key_path = `${containerXuData?.key_path || '0'}-${keyP || '0'}`;
+  const nodeId = nodeP.xu_tree_id || nodeP.id;
+  const elem_key = `${nodeId}-${key_path}-${currentRecordId}`;
+  const ui_id = `${nodeP.id}-${elem_key}-${dsSessionP?.toString() || ''}`;
 
-  const new_ui_id = await func.common.sha256(ui_id);
-  return new_ui_id;
+  return await func.common.fastHash(ui_id);
 };
 
+// func.UI.screen.create_container = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
+//   // const _paramsP = _.cloneDeep(paramsP);
+//   const _paramsP = klona.klona(paramsP);
+//   var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
+//   var $appendTo = $container;
+//   if ($appendToP) $appendTo = $appendToP;
+//   if (!$appendTo || !$appendTo.length) return null; // screen closed or not exist abort build
+//   var div = 'div';
+//   if (div_typeP) div = div_typeP;
+//   var items = [];
+//   if (nodeP.children)
+//     items = nodeP.children.map(function (val) {
+//       return val.xu_tree_id || val.id;
+//     });
+//   var currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
+//   // var xu_id = (glb.screen_num++).toString();
+//   // xu_id = xu_id += '_' + currentRecordId;
+
+//   try {
+//     const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
+//     const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
+//     // let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
+
+//     /////////////////////////////////
+
+//     var $div;
+
+//     if (div === 'svg') {
+//       const draw_svg = function (element) {
+//         const get_tag_str = function (element, prop, val) {
+//           let class_str = '';
+//           let attr_str = '';
+//           for (const [key, val] of Object.entries(prop)) {
+//             if (key.substr(0, 2) !== 'xu') {
+//               attr_str += ` ${key}="${val}" `;
+//             }
+//           }
+//           if (element === 'svg') {
+//             return `<${element}  ${attr_str} > `;
+//           }
+//           let ret = '';
+//           if (val?.children?.length) {
+//             ret = iterate_svg(val);
+//           }
+
+//           return `<${element} ${class_str} ${attr_str} > ${ret} </${element}>`;
+//         };
+//         let svg_str = get_tag_str(element, prop);
+//         let inner_str = '';
+//         const iterate_svg = function (node) {
+//           let ret = '';
+//           if (node.children) {
+//             for (let val of node.children) {
+//               let prop = val.attributes;
+//               ret += get_tag_str(val.tagName, prop, val);
+//             }
+//           }
+//           return ret;
+//         };
+//         inner_str = iterate_svg(nodeP);
+
+//         $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
+//       };
+
+//       draw_svg(div_typeP);
+//     } else {
+//       $div = $(`<${div} ${attr_str ? attr_str : ''}>`);
+//     }
+
+//     // // Returns a 32-bit unsigned integer hash of a string (FNV-1a)
+//     // function hash32(str) {
+//     //   let h = 0x811c9dc5; // FNV offset basis
+//     //   for (let i = 0; i < str.length; i++) {
+//     //     h ^= str.charCodeAt(i);
+//     //     // multiply by FNV prime (2^24 + 2^8 + 0x93) with 32-bit overflow
+//     //     h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
+//     //   }
+//     //   // Convert to unsigned 32-bit
+//     //   return h >>> 0;
+//     // }
+
+//     // function hash32hex(str) {
+//     //   return (hash32(str) >>> 0).toString(16).padStart(8, '0');
+//     // }
+
+//     // const new_ui_id = hash32hex(ui_id);
+//     // const new_ui_id = await func.common.sha256(ui_id);
+//     const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
+
+//     $div
+//       .attr('xu-ui-id', new_ui_id)
+//       // .attr('xu-node-id', nodeP.id)
+//       .data({
+//         xuData: {
+//           prog_id: _paramsP.prog_id,
+//           nodeid: nodeP.id,
+//           ui_type: nodeP.tagName,
+//           // xu_id,
+//           recordid: currentRecordId,
+//           paramsP: _paramsP,
+//           key: keyP,
+//           key_path, //:($container?.data()?.xuData?.key || "0") + "-" + (keyP || "0"),
+//           screenId: _paramsP.screenId,
+//           parent_container: $container?.attr('id'),
+//           elem_key,
+//           properties: prop,
+//           node: nodeP,
+//           node_org: _.cloneDeep(nodeP),
+//           is_panelP: _paramsP.is_panelP,
+//           ui_id: new_ui_id,
+//           elem_prop: elem_propP,
+//           debug_info: {
+//             id: nodeP.id,
+//             parent_id: $container?.data()?.xuData?.ui_id,
+//             items: items,
+//           },
+//           parent_node: parent_nodeP,
+//           currentRecordId: currentRecordId,
+//           $root_container: $root_container,
+//           parent_element_ui_id: $container?.data()?.xuData?.ui_id,
+//         },
+//         xuAttributes: {},
+//       });
+//     if (is_placeholder) {
+//       $div.addClass('display_none');
+//     }
+
+//     if (div_typeP !== 'svg') {
+//       $div.appendTo($appendTo);
+//     }
+//   } catch (e) {
+//     console.error(e);
+//   }
+
+//   if (parent_infoP?.iterate_info) {
+//     $div.data().xuData.iterate_info = parent_infoP.iterate_info;
+//   }
+
+//   if (classP) $div.addClass(classP);
+
+//   return $div;
+// };
+
 func.UI.screen.create_container = async function (SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, classP, elem_propP, div_typeP, $appendToP, attr_str, is_placeholder) {
-  // const _paramsP = _.cloneDeep(paramsP);
   const _paramsP = klona.klona(paramsP);
-  var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
-  var $appendTo = $container;
-  if ($appendToP) $appendTo = $appendToP;
-  if (!$appendTo || !$appendTo.length) return null; // screen closed or not exist abort build
-  var div = 'div';
-  if (div_typeP) div = div_typeP;
-  var items = [];
-  if (nodeP.children)
-    items = nodeP.children.map(function (val) {
-      return val.xu_tree_id || val.id;
-    });
-  var currentRecordId = $container?.data?.()?.xuData?.recordid || (_ds ? _ds.currentRecordId : '');
-  // var xu_id = (glb.screen_num++).toString();
-  // xu_id = xu_id += '_' + currentRecordId;
+  const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
+  const $appendTo = $appendToP || $container;
+
+  // Early exit if container doesn't exist
+  if (!$appendTo?.length) return null;
+
+  const div = div_typeP || 'div';
+
+  // Cache container data to avoid repeated access
+  const containerData = $container?.data?.();
+  const containerXuData = containerData?.xuData;
+  const currentRecordId = containerXuData?.recordid || (_ds ? _ds.currentRecordId : '');
+
+  // Pre-compute items array
+  const items = nodeP.children ? nodeP.children.map((val) => val.xu_tree_id || val.id) : [];
 
   try {
-    const key_path = `${$container?.data()?.xuData?.key_path || '0'}-${keyP || '0'}`;
+    const key_path = `${containerXuData?.key_path || '0'}-${keyP || '0'}`;
     const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
-    // let ui_id = `${nodeP.id}-${elem_key}-${_paramsP?.dsSessionP?.toString() || ''}`; //nodeP.xu_tree_id ||
-
-    /////////////////////////////////
 
-    var $div;
+    let $div;
 
+    // Handle SVG creation
     if (div === 'svg') {
       const draw_svg = function (element) {
         const get_tag_str = function (element, prop, val) {
-          let class_str = '';
-          let attr_str = '';
-          for (const [key, val] of Object.entries(prop)) {
-            if (key.substr(0, 2) !== 'xu') {
-              attr_str += ` ${key}="${val}" `;
+          const attrs = [];
+
+          for (const [key, value] of Object.entries(prop)) {
+            if (!key.startsWith('xu')) {
+              attrs.push(`${key}="${value}"`);
             }
           }
+
+          const attr_str = attrs.join(' ');
+
           if (element === 'svg') {
-            return `<${element}  ${attr_str} > `;
-          }
-          let ret = '';
-          if (val?.children?.length) {
-            ret = iterate_svg(val);
+            return `<${element} ${attr_str}>`;
           }
 
-          return `<${element} ${class_str} ${attr_str} > ${ret} </${element}>`;
+          const inner = val?.children?.length ? iterate_svg(val) : '';
+          return `<${element} ${attr_str}>${inner}</${element}>`;
         };
-        let svg_str = get_tag_str(element, prop);
-        let inner_str = '';
+
         const iterate_svg = function (node) {
-          let ret = '';
-          if (node.children) {
-            for (let val of node.children) {
-              let prop = val.attributes;
-              ret += get_tag_str(val.tagName, prop, val);
-            }
-          }
-          return ret;
+          if (!node.children) return '';
+
+          return node.children.map((val) => get_tag_str(val.tagName, val.attributes, val)).join('');
         };
-        inner_str = iterate_svg(nodeP);
+
+        const svg_str = get_tag_str(element, prop);
+        const inner_str = iterate_svg(nodeP);
 
         $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
       };
 
       draw_svg(div_typeP);
     } else {
-      $div = $(`<${div} ${attr_str ? attr_str : ''}>`);
+      $div = $(`<${div}${attr_str ? ' ' + attr_str : ''}>`);
     }
 
-    // // Returns a 32-bit unsigned integer hash of a string (FNV-1a)
-    // function hash32(str) {
-    //   let h = 0x811c9dc5; // FNV offset basis
-    //   for (let i = 0; i < str.length; i++) {
-    //     h ^= str.charCodeAt(i);
-    //     // multiply by FNV prime (2^24 + 2^8 + 0x93) with 32-bit overflow
-    //     h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
-    //   }
-    //   // Convert to unsigned 32-bit
-    //   return h >>> 0;
-    // }
+    // Generate UI ID
+    const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
 
-    // function hash32hex(str) {
-    //   return (hash32(str) >>> 0).toString(16).padStart(8, '0');
-    // }
+    // Set attributes and data in one go
+    $div.attr('xu-ui-id', new_ui_id);
+
+    // Build xuData object efficiently
+    const xuData = {
+      prog_id: _paramsP.prog_id,
+      nodeid: nodeP.id,
+      ui_type: nodeP.tagName,
+      recordid: currentRecordId,
+      paramsP: _paramsP,
+      key: keyP,
+      key_path,
+      screenId: _paramsP.screenId,
+      parent_container: containerData?.id,
+      elem_key,
+      properties: prop,
+      node: nodeP,
+      node_org: _.cloneDeep(nodeP),
+      is_panelP: _paramsP.is_panelP,
+      ui_id: new_ui_id,
+      elem_prop: elem_propP,
+      debug_info: {
+        id: nodeP.id,
+        parent_id: containerXuData?.ui_id,
+        items: items,
+      },
+      parent_node: parent_nodeP,
+      currentRecordId: currentRecordId,
+      $root_container: $root_container,
+      parent_element_ui_id: containerXuData?.ui_id,
+    };
 
-    // const new_ui_id = hash32hex(ui_id);
-    // const new_ui_id = await func.common.sha256(ui_id);
-    const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
+    // Add iterate_info if present
+    if (parent_infoP?.iterate_info) {
+      xuData.iterate_info = parent_infoP.iterate_info;
+    }
 
-    $div
-      .attr('xu-ui-id', new_ui_id)
-      // .attr('xu-node-id', nodeP.id)
-      .data({
-        xuData: {
-          prog_id: _paramsP.prog_id,
-          nodeid: nodeP.id,
-          ui_type: nodeP.tagName,
-          // xu_id,
-          recordid: currentRecordId,
-          paramsP: _paramsP,
-          key: keyP,
-          key_path, //:($container?.data()?.xuData?.key || "0") + "-" + (keyP || "0"),
-          screenId: _paramsP.screenId,
-          parent_container: $container?.attr('id'),
-          elem_key,
-          properties: prop,
-          node: nodeP,
-          node_org: _.cloneDeep(nodeP),
-          is_panelP: _paramsP.is_panelP,
-          ui_id: new_ui_id,
-          elem_prop: elem_propP,
-          debug_info: {
-            id: nodeP.id,
-            parent_id: $container?.data()?.xuData?.ui_id,
-            items: items,
-          },
-          parent_node: parent_nodeP,
-          currentRecordId: currentRecordId,
-          $root_container: $root_container,
-          parent_element_ui_id: $container?.data()?.xuData?.ui_id,
-        },
-        xuAttributes: {},
-      });
+    // Set data once
+    $div.data({
+      xuData: xuData,
+      xuAttributes: {},
+    });
+
+    // Apply placeholder class if needed
     if (is_placeholder) {
       $div.addClass('display_none');
     }
 
+    // Apply custom class if provided
+    if (classP) {
+      $div.addClass(classP);
+    }
+
+    // Append to DOM (only for non-SVG elements)
     if (div_typeP !== 'svg') {
       $div.appendTo($appendTo);
     }
-  } catch (e) {
-    console.error(e);
-  }
 
-  if (parent_infoP?.iterate_info) {
-    $div.data().xuData.iterate_info = parent_infoP.iterate_info;
+    return $div;
+  } catch (e) {
+    console.error('create_container error:', e);
+    return null;
   }
-
-  if (classP) $div.addClass(classP);
-
-  return $div;
 };
+
 func.UI.screen.execute_screen_ready_events = async function (SESSION_ID, paramsP, sourceP, $div, jobNoP, $div_objP) {
   var _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
   if (!_ds) return;