@xuda.io/runtime-bundle 1.0.1288 → 1.0.1290

package/js/xuda-runtime-slim.js

@@ -4826,7 +4826,7 @@ func.datasource.update = async function (SESSION_ID, datasource_changes, update_
               await func.UI.screen.refresh_screen(
                 SESSION_ID,
                 klona.klona(fields_changed), // _.cloneDeep(fields_changed),
-                null,
+                datasource_changed[0],
                 datasource_changed[0], // refresh the current datasource only
                 value,
               );
@@ -12187,7 +12187,7 @@ func.UI.screen.refresh_screen = async function (SESSION_ID, fields_changed_arr,
   }
 
   const panels_obj = await func.UI.utils.get_panels_wrapper_from_dom(SESSION_ID, $(SESSION_OBJ[SESSION_ID].root_element), false);
-
+  found = false;
   for await (const [parent_element_ui_id, panel_val] of Object.entries(panels_obj)) {
     // const progDataSource_str = JSON.stringify(panel_val.prog_doc.progDataSource);
     if (!panel_val.$panel_div?.data()?.xuData) continue;
@@ -12314,11 +12314,16 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
         var ret = {};
         var _session = SESSION_OBJ[SESSION_ID];
         var _ds = _session.DS_GLB[paramsP.dsSessionP];
+        var _refreshed_ds = _session.DS_GLB[refreshed_ds];
+        let create_new_ds = refreshed_ds && _refreshed_ds.prog_id !== prog_id;
+        //let create_new_ds = prog_id !== _ds.prog_id
+
         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);
+            //prog_id !== _ds.prog_id ? null : refreshed_ds
+            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, create_new_ds ? null : refreshed_ds, params_obj.params_raw);
             ret = { $new_div: ret_panel };
             if ($container.data().xuData) {
               $container.data().xuData.xuPanelProps = $elm.data().xuAttributes;
@@ -13434,844 +13439,844 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
   }
 };
 
-func.UI.screen.execute_xu_functions_bad = 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_bad = 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-');
+//   // 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) {
-    if (!_.isObject(resource)) {
-      resource = _.isString(resource) ? { src: resource, type: 'js' } : null;
-    }
-    if (!resource) {
-      throw new Error('cdn resource in wrong format');
-    }
+//   const load_cdn = async function (resource) {
+//     if (!_.isObject(resource)) {
+//       resource = _.isString(resource) ? { src: resource, type: 'js' } : null;
+//     }
+//     if (!resource) {
+//       throw new Error('cdn resource in wrong format');
+//     }
 
-    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');
-    }
-  };
+//     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 || !_.isObject(val.value)) {
-        if (val.value) throw 'xu-attrs value is not an object';
-        return {};
-      }
-      Object.assign(nodeP.attributes, val.value);
-      return {};
-    },
+//   const common_fx = {
+//     'xu-attrs': async function ($elm, 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 {};
+//     'xu-ref': async function ($elm, val, dsSession) {
+//       if (!val.value) return {};
 
-      func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
+//       func.UI.update_xu_ref(SESSION_ID, dsSession || paramsP.dsSessionP, val.value, $elm);
 
-      const targetNode = $elm[0];
-      if (!targetNode) return {};
+//       const targetNode = $elm[0];
+//       if (!targetNode) return {};
 
-      const observer = new MutationObserver(() => {
-        func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
-      });
+//       const observer = new MutationObserver(() => {
+//         func.UI.screen.refresh_xu_attributes(SESSION_ID, [val.value]);
+//       });
 
-      observer.observe(targetNode, { attributes: true, childList: true, subtree: true });
-      return {};
-    },
+//       observer.observe(targetNode, { attributes: true, childList: true, subtree: true });
+//       return {};
+//     },
+
+//     'xu-bind': async function ($elm, val) {
+//       if (is_skeleton) return {};
+
+//       let val_is_reference_field = false;
+//       let _prog_id = xuData.paramsP.prog_id;
+//       let _dsP = 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) {
+//             const ret_get_value = await func.datasource.get_value(SESSION_ID, field_id, _dsP);
+//             if (ret_get_value.found) {
+//               _dsP = ret_get_value.dsSessionP;
+//               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`;
+//             }
+//           }
+//         }
+//         return field_id;
+//       };
 
-    'xu-bind': async function ($elm, val) {
-      if (is_skeleton) return {};
+//       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 {};
+//       }
 
-      let val_is_reference_field = false;
-      let _prog_id = xuData.paramsP.prog_id;
-      let _dsP = xuData.paramsP.dsSessionP;
+//       const field_changed = async function (e) {
+//         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 } },
+//           });
+//         }
 
-      const view_ret = await func.utils.VIEWS_OBJ.get(SESSION_ID, _prog_id);
-      if (!view_ret) return {};
+//         // 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])] } },
+//           });
+//         }
 
-      let is_dynamic_field = false;
-      let field_prop;
-      let bind_field_id;
-      const input_field_type = $elm.attr('type');
+//         let value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', fieldType, bind.getter($elm[0]));
 
-      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) {
-            const ret_get_value = await func.datasource.get_value(SESSION_ID, field_id, _dsP);
-            if (ret_get_value.found) {
-              _dsP = ret_get_value.dsSessionP;
-              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`;
-            }
-          }
-        }
-        return field_id;
-      };
+//         if (fieldType === 'object') {
+//           value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', input_field_type, bind.getter($elm[0]));
+//         }
 
-      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 {};
-      }
+//         if (!ds.currentRecordId) return;
 
-      const field_changed = async function (e) {
-        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 } },
-          });
-        }
+//         await func.datasource.update(SESSION_ID, {
+//           [_dsP]: { [ds.currentRecordId]: { [bind_field_id]: value } },
+//         });
 
-        // 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])] } },
-          });
-        }
+//         const iterate_info = xuData?.iterate_info;
+//         const reference_source_obj = iterate_info?.reference_source_obj;
 
-        let value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', fieldType, bind.getter($elm[0]));
+//         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);
 
-        if (fieldType === 'object') {
-          value = await func.common.get_cast_val(SESSION_ID, 'xu-bind', 'value', input_field_type, bind.getter($elm[0]));
-        }
+//           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;
+//           }
 
-        if (!ds.currentRecordId) return;
+//           await func.datasource.update(
+//             SESSION_ID,
+//             {
+//               [_dsP]: { [ds.currentRecordId]: { [reference_source_obj.fieldIdP]: new_arr } },
+//             },
+//             null,
+//             true,
+//           );
+//         }
 
-        await func.datasource.update(SESSION_ID, {
-          [_dsP]: { [ds.currentRecordId]: { [bind_field_id]: value } },
-        });
+//         await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, ds.parentDataSourceNo);
+//       };
 
-        const iterate_info = xuData?.iterate_info;
-        const reference_source_obj = iterate_info?.reference_source_obj;
+//       const bind = new UI_FRAMEWORK_PLUGIN.bind();
+//       bind.listener($elm[0], field_changed);
 
-        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);
+//       const set_value = function () {
+//         const ds = _session.DS_GLB[paramsP.dsSessionP];
+//         if (!ds.currentRecordId) return;
 
-          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;
-          }
+//         try {
+//           let value;
+//           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];
+//             }
 
-          await func.datasource.update(
-            SESSION_ID,
-            {
-              [_dsP]: { [ds.currentRecordId]: { [reference_source_obj.fieldIdP]: new_arr } },
-            },
-            null,
-            true,
-          );
-        }
+//             const fieldType = field_prop.props.fieldType;
+//             const elmValue = $elm.attr('value');
 
-        await func.datasource.update_changes_for_out_parameter(SESSION_ID, _dsP, ds.parentDataSourceNo);
-      };
+//             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;
+//           }
 
-      const bind = new UI_FRAMEWORK_PLUGIN.bind();
-      bind.listener($elm[0], field_changed);
+//           if (value !== undefined) {
+//             bind.setter($elm[0], value);
+//           }
+//         } catch (err) {
+//           console.error(err);
+//         }
+//       };
 
-      const set_value = function () {
-        const ds = _session.DS_GLB[paramsP.dsSessionP];
-        if (!ds.currentRecordId) return;
+//       $('body').on('xu-bind-refresh.' + _ds.dsSession, set_value);
+//       set_value();
+//       return {};
+//     },
+
+//     'xu-render': async function ($elm, val, from_panel) {
+//       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) {
+//             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,
+//               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 || {};
+//             $elm.remove();
+//             return { abort: true };
+//           }
+//           return {};
+//         };
 
-        try {
-          let value;
-          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];
-            }
+//         const post_render = async function () {
+//           if (value) {
+//             try {
+//               if ($elm[0].tagName !== 'XURENDER' || !$elm?.length) {
+//                 return func.events.delete_job(SESSION_ID, jobNoP);
+//               }
 
-            const fieldType = field_prop.props.fieldType;
-            const elmValue = $elm.attr('value');
+//               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 };
+//               }
 
-            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;
-          }
+//               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(from_panel ? new_$div.children() : new_$div);
+//                 if (from_panel) {
+//                   $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 (value !== undefined) {
-            bind.setter($elm[0], value);
-          }
-        } catch (err) {
-          console.error(err);
-        }
-      };
+//               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;
+//           }
 
-      $('body').on('xu-bind-refresh.' + _ds.dsSession, set_value);
-      set_value();
-      return {};
-    },
+//           if ($elm.prop('tagName') === 'XURENDER') {
+//             func.events.delete_job(SESSION_ID, jobNoP);
+//             return;
+//           }
 
-    'xu-render': async function ($elm, val, from_panel) {
-      const value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-render', 'bool', val.value);
+//           const $xurender = $('<xurender>').attr('xu-ui-id', $elm.attr('xu-ui-id'));
 
-      if (!glb.new_xu_render) {
-        // Old render logic (kept as is for compatibility)
-        const init_render = function () {
-          if (!value) {
-            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,
-              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 || {};
-            $elm.remove();
-            return { abort: true };
-          }
-          return {};
-        };
+//           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 {
+//             $xurender.data({
+//               xuAttributes: $elm.data().xuAttributes || {},
+//               xuData: $elm.data().xuData || {},
+//             });
+//             $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,
+//             };
+//           }
 
-        const post_render = async function () {
-          if (value) {
-            try {
-              if ($elm[0].tagName !== 'XURENDER' || !$elm?.length) {
-                return func.events.delete_job(SESSION_ID, jobNoP);
-              }
+//           $.each($elm.find('xu-teleport'), (key, val) => {
+//             const xuTeleportData = $(val).data().xuTeleportData || [];
+//             xuTeleportData.forEach((id) => $(`[xu-ui-id="${id}"]`).remove());
+//           });
 
-              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 };
-              }
+//           $elm.replaceWith($xurender);
+//           func.events.delete_job(SESSION_ID, jobNoP);
+//         };
 
-              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);
+//         return is_init ? init_render() : await post_render();
+//       }
 
-              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 || {};
+//       // New render logic
+//       const has_xu_render_attribute = true;
+//       const has_xu_exp_render_attribute = !!xuData?.attr_exp_info?.['xu-render'];
 
-              const replace = async function () {
-                $elm.replaceWith(from_panel ? new_$div.children() : new_$div);
-                if (from_panel) {
-                  $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);
-              };
+//       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 ($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;
-          }
+//       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;
+//                   }
+//                 }
+//               });
+//             }
 
-          if ($elm.prop('tagName') === 'XURENDER') {
-            func.events.delete_job(SESSION_ID, jobNoP);
-            return;
-          }
+//             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 $xurender = $('<xurender>').attr('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);
 
-          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 {
-            $xurender.data({
-              xuAttributes: $elm.data().xuAttributes || {},
-              xuData: $elm.data().xuData || {},
-            });
-            $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,
-            };
-          }
+//               const _$div = new_$div.clone(true);
+//               UI_WORKER_OBJ.xu_render_cache[cache_key] = { $div: _$div, data: _$div.data(), paramsP };
+//             }
 
-          $.each($elm.find('xu-teleport'), (key, val) => {
-            const xuTeleportData = $(val).data().xuTeleportData || [];
-            xuTeleportData.forEach((id) => $(`[xu-ui-id="${id}"]`).remove());
-          });
+//             // 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;
+//         }
 
-          $elm.replaceWith($xurender);
-          func.events.delete_job(SESSION_ID, jobNoP);
-        };
+//         // !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);
+//       };
 
-        return is_init ? init_render() : await post_render();
-      }
+//       return is_init ? await init_render() : await post_render();
+//     },
 
-      // New render logic
-      const has_xu_render_attribute = true;
-      const has_xu_exp_render_attribute = !!xuData?.attr_exp_info?.['xu-render'];
+//     'xu-show': async function ($elm, val) {
+//       const value = await func.common.get_cast_val(SESSION_ID, 'common fx', 'xu-show', 'bool', val.value);
+//       $elm.toggle(value);
+//       return {};
+//     },
 
-      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 };
-      };
+//     'xu-content': async function ($elm, val) {
+//       try {
+//         $elm.html(val.value);
+//       } catch (error) {
+//         console.warn(error);
+//       }
+//     },
 
-      const post_render = async function () {
-        const containerNodeP = $container.data().xuData.node.children[keyP];
-        containerNodeP.xu_render_made = value;
+//     'xu-text': async function ($elm, val) {
+//       try {
+//         $elm.text(val.value);
+//       } catch (error) {
+//         console.warn(error);
+//       }
+//     },
 
-        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;
-                  }
-                }
-              });
-            }
+//     'xu-html': async function ($elm, val) {
+//       try {
+//         $elm.html(val.value);
+//       } catch (error) {
+//         console.warn(error);
+//       }
+//     },
 
-            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;
+//     'xu-for': async function ($elm, data) {
+//       if (parent_infoP?.iterate_info || !data.value) return {};
 
-              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);
+//       try {
+//         let arr = data.value;
+//         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);
+
+//         if (view_field_obj) {
+//           reference_source_obj = await func.datasource.get_value(SESSION_ID, data.value, paramsP.dsSessionP);
+//           arr = reference_source_obj?.ret?.value;
+//         } else {
+//           if (typeof data.value === 'string') {
+//             arr = eval(data.value.replaceAll('\\', ''));
+//           }
+//           if (typeof arr === 'number') {
+//             arr = Array.from(Array(arr).keys());
+//           }
+//         }
 
-              const _$div = new_$div.clone(true);
-              UI_WORKER_OBJ.xu_render_cache[cache_key] = { $div: _$div, data: _$div.data(), paramsP };
-            }
+//         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;
 
-            // 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;
-        }
-
-        // !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);
-      };
-
-      return is_init ? await init_render() : await post_render();
-    },
-
-    'xu-show': async function ($elm, val) {
-      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(error);
-      }
-    },
-
-    'xu-text': async function ($elm, val) {
-      try {
-        $elm.text(val.value);
-      } catch (error) {
-        console.warn(error);
-      }
-    },
-
-    'xu-html': async function ($elm, val) {
-      try {
-        $elm.html(val.value);
-      } catch (error) {
-        console.warn(error);
-      }
-    },
-
-    'xu-for': async function ($elm, data) {
-      if (parent_infoP?.iterate_info || !data.value) return {};
-
-      try {
-        let arr = data.value;
-        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);
-
-        if (view_field_obj) {
-          reference_source_obj = await func.datasource.get_value(SESSION_ID, data.value, paramsP.dsSessionP);
-          arr = reference_source_obj?.ret?.value;
-        } else {
-          if (typeof data.value === 'string') {
-            arr = eval(data.value.replaceAll('\\', ''));
-          }
-          if (typeof arr === 'number') {
-            arr = Array.from(Array(arr).keys());
-          }
-        }
-
-        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 view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', field_id);
-
-            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;
-
-        for (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);
+//             const view_field_obj = func.common.find_item_by_key(_progFields, 'field_id', field_id);
+
+//             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');
+//             }
+//           }
+//         };
 
-          await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
-          await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
+//         const currentRecordId = _ds.currentRecordId.toString();
+//         let i = 0;
 
-          const iterate_info = {
-            _val,
-            _key,
-            iterator_key,
-            iterator_val,
-            is_key_dynamic_field,
-            is_val_dynamic_field,
-            reference_source_obj,
-          };
+//         for (let [_key, _val] of Object.entries(arr)) {
+//           if (_.isArray(arr)) _key = Number(_key);
 
-          const _parent_info = klona.klona(parent_infoP) || {};
-          _parent_info.iterate_info = iterate_info;
+//           await set_value(is_key_dynamic_field, currentRecordId, iterator_key, _key);
+//           await set_value(is_val_dynamic_field, currentRecordId, iterator_val, _val);
 
-          const $divP = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP, _parent_info, paramsP, jobNoP, null, i, null, nodeP, null, $root_container);
+//           const iterate_info = {
+//             _val,
+//             _key,
+//             iterator_key,
+//             iterator_val,
+//             is_key_dynamic_field,
+//             is_val_dynamic_field,
+//             reference_source_obj,
+//           };
 
-          $.each($divP.children(), (key, val) => {
-            if ($(val)?.data()?.xuData) {
-              $(val).data().xuData.iterate_info = iterate_info;
-            }
-          });
+//           const _parent_info = klona.klona(parent_infoP) || {};
+//           _parent_info.iterate_info = iterate_info;
 
-          i++;
-        }
+//           const $divP = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP, _parent_info, paramsP, jobNoP, null, i, null, nodeP, null, $root_container);
 
-        $elm.remove();
-        return { abort: true };
-      } catch (e) {
-        console.error('Iterator Arr parse error', e);
-        return { abort: true };
-      }
-    },
-
-    'xu-for-key': async function ($elm, val) {
-      xuData.iterator_key = val.value;
-      return {};
-    },
-
-    'xu-for-val': async function ($elm, val) {
-      xuData.iterator_val = val.value;
-      return {};
-    },
-
-    'xu-class': async function ($elm, val) {
-      try {
-        const classes_obj = _.isString(val.value) ? JSON.parse(val.value) : _.defaults(val.value, {});
-
-        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.toggleClass(cla, res.result);
-        }
+//           $.each($divP.children(), (key, val) => {
+//             if ($(val)?.data()?.xuData) {
+//               $(val).data().xuData.iterate_info = iterate_info;
+//             }
+//           });
 
-        xuData.debug_info.attribute_stat['xu-class'] = $elm.attr('class');
-        return {};
-      } catch (e) {
-        console.warn('parse error:' + val.value);
-        return { abort: true };
-      }
-    },
+//           i++;
+//         }
 
-    '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);
+//         $elm.remove();
+//         return { abort: true };
+//       } catch (e) {
+//         console.error('Iterator Arr parse error', e);
+//         return { abort: true };
+//       }
+//     },
 
-      const value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
-      const new_val = { key: val.key, value };
+//     'xu-for-key': async function ($elm, val) {
+//       xuData.iterator_key = val.value;
+//       return {};
+//     },
 
-      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 ${nodeTag}`);
-        return {};
-      }
+//     'xu-for-val': async function ($elm, val) {
+//       xuData.iterator_val = val.value;
+//       return {};
+//     },
 
-      if (!xuData) return {};
-      xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
+//     'xu-class': async function ($elm, val) {
+//       try {
+//         const classes_obj = _.isString(val.value) ? JSON.parse(val.value) : _.defaults(val.value, {});
 
-      if (new_val.value === undefined || new_val.value === null) return {};
-      if (glb.solid_attributes.includes(new_val.key) && !new_val.value) return {};
+//         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);
 
-      if (new_val.key.startsWith('xu')) {
-        return await common_fx[new_val.key]($elm, new_val);
-      }
+//           $elm.toggleClass(cla, res.result);
+//         }
 
-      $elm.attr(new_val.key, ($elm.attr(new_val.key) || '') + new_val.value);
-      return {};
-    },
+//         xuData.debug_info.attribute_stat['xu-class'] = $elm.attr('class');
+//         return {};
+//       } catch (e) {
+//         console.warn('parse error:' + val.value);
+//         return { abort: true };
+//       }
+//     },
 
-    'xu-on': async function ($elm, val) {
-      CLIENT_ACTIVITY_TS = Date.now();
-      const trigger = val.key.split('xu-on:')[1].toLowerCase();
+//     '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);
 
-      $elm.on(trigger, async function (evt) {
-        const _$elm = $(evt.currentTarget);
-        const xuAttributes = _$elm.data().xuAttributes;
-        if (_.isEmpty(xuAttributes)) return;
+//       const value = func.UI.screen.fix_val_defaults(val.key, exp_ret.result);
+//       const new_val = { key: val.key, value };
 
-        const handlers = xuAttributes['xu-on:' + evt.type];
-        if (!handlers) return;
+//       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 ${nodeTag}`);
+//         return {};
+//       }
 
-        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);
-            if (!expCond.result) continue;
-          }
+//       if (!xuData) return {};
+//       xuData.debug_info.attribute_stat[new_val.key] = new_val.value;
 
-          if (val.event_modifiers && evt[val.event_modifiers]) {
-            evt[val.event_modifiers]();
-          }
+//       if (new_val.value === undefined || new_val.value === null) return {};
+//       if (glb.solid_attributes.includes(new_val.key) && !new_val.value) return {};
 
-          if (val.workflow) {
-            for (const [key2, val2] of Object.entries(val.workflow)) {
-              if (!val2.data.enabled) continue;
+//       if (new_val.key.startsWith('xu')) {
+//         return await common_fx[new_val.key]($elm, new_val);
+//       }
 
-              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 {};
-    },
+//       $elm.attr(new_val.key, ($elm.attr(new_val.key) || '') + new_val.value);
+//       return {};
+//     },
 
-    'xu-script': async function ($elm, val) {
-      const checkExist = setInterval(async function () {
-        if ($elm.is(':visible')) {
-          try {
-            const fn = eval(`async (el)=>{${val.value}}`);
-            await fn($elm[0]);
-          } catch (e) {
-            eval(val.value);
-          }
-          clearInterval(checkExist);
-        }
-      }, 100);
-      return {};
-    },
+//     'xu-on': async function ($elm, val) {
+//       CLIENT_ACTIVITY_TS = Date.now();
+//       const trigger = val.key.split('xu-on:')[1].toLowerCase();
 
-    'xu-style-global': async function ($elm, val) {
-      $('head').append(`<style>${val.value}</style>`);
-      return {};
-    },
+//       $elm.on(trigger, async function (evt) {
+//         const _$elm = $(evt.currentTarget);
+//         const xuAttributes = _$elm.data().xuAttributes;
+//         if (_.isEmpty(xuAttributes)) return;
 
-    '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(',');
-      });
+//         const handlers = xuAttributes['xu-on:' + evt.type];
+//         if (!handlers) return;
 
-      $('head').append(`<style>${parser.getCSSForEditor(parsed)}</style>`);
-      return {};
-    },
+//         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);
+//             if (!expCond.result) continue;
+//           }
 
-    'xu-cdn': async function ($elm, val) {
-      for (const resource of Object.values(val.value)) {
-        await load_cdn(resource);
-      }
-      return {};
-    },
+//           if (val.event_modifiers && evt[val.event_modifiers]) {
+//             evt[val.event_modifiers]();
+//           }
 
-    '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 (val.workflow) {
+//             for (const [key2, val2] of Object.entries(val.workflow)) {
+//               if (!val2.data.enabled) continue;
 
-        if (!_plugin?.installed || !_plugin?.manifest?.['runtime.mjs']?.exist || !_plugin?.manifest?.['index.mjs']?.exist || !value.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);
+//             }
+//           }
+//         }
+//       });
+//       return {};
+//     },
+
+//     'xu-script': async function ($elm, val) {
+//       const checkExist = setInterval(async function () {
+//         if ($elm.is(':visible')) {
+//           try {
+//             const fn = eval(`async (el)=>{${val.value}}`);
+//             await fn($elm[0]);
+//           } catch (e) {
+//             eval(val.value);
+//           }
+//           clearInterval(checkExist);
+//         }
+//       }, 100);
+//       return {};
+//     },
+
+//     'xu-style-global': async function ($elm, val) {
+//       $('head').append(`<style>${val.value}</style>`);
+//       return {};
+//     },
+
+//     '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(',');
+//       });
 
-        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);
-        }
+//       $('head').append(`<style>${parser.getCSSForEditor(parsed)}</style>`);
+//       return {};
+//     },
 
-        const plugin_index_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['index.mjs'].dist ? 'dist/' : ''}index.mjs`);
+//     'xu-cdn': async function ($elm, val) {
+//       for (const resource of Object.values(val.value)) {
+//         await load_cdn(resource);
+//       }
+//       return {};
+//     },
 
-        const plugin_index_resources = await import(plugin_index_src);
-        const properties = _.cloneDeep(plugin_index_resources.properties);
+//     '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];
 
-        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;
-          }
-        }
+//         if (!_plugin?.installed || !_plugin?.manifest?.['runtime.mjs']?.exist || !_plugin?.manifest?.['index.mjs']?.exist || !value.enabled) continue;
 
-        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.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);
+//         }
 
-        const plugin_runtime_resources = await import(plugin_runtime_src);
+//         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_runtime_resources.cdn && _.isArray(plugin_runtime_resources.cdn)) {
-          for (const resource of plugin_runtime_resources.cdn) {
-            await load_cdn(resource);
-          }
-        }
+//         const plugin_index_resources = await import(plugin_index_src);
+//         const properties = _.cloneDeep(plugin_index_resources.properties);
 
-        if (plugin_runtime_resources.fn) {
-          await plugin_runtime_resources.fn(plugin_name, $elm?.[0], properties);
-        }
-      }
-      return {};
-    },
+//         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;
+//           }
+//         }
 
-    '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 {};
-    },
+//         const plugin_runtime_src = await func.utils.get_plugin_npm_cdn(SESSION_ID, plugin_name, `${_plugin.manifest['runtime.mjs'].dist ? 'dist/' : ''}runtime.mjs`);
 
-    'xu-viewport': async function ($elm, val) {
-      return {};
-    },
-  };
+//         const plugin_runtime_resources = await import(plugin_runtime_src);
 
-  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);
+//         if (plugin_runtime_resources.cdn && _.isArray(plugin_runtime_resources.cdn)) {
+//           for (const resource of plugin_runtime_resources.cdn) {
+//             await load_cdn(resource);
+//           }
+//         }
 
-            const containerData = $container.data();
-            if (containerData.xuData) {
-              containerData.xuData.xuPanelProps = elmData.xuAttributes;
-              containerData.xuData.xuPanelData = ret_panel.data();
-            }
-            return { $new_div: ret_panel };
-          }
+//         if (plugin_runtime_resources.fn) {
+//           await plugin_runtime_resources.fn(plugin_name, $elm?.[0], properties);
+//         }
+//       }
+//       return {};
+//     },
 
-          if (!val.value) val.value = '_empty_panel_program';
-          return await render_panel();
-        };
+//     '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 {};
+//     },
 
-        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, '');
+//     'xu-viewport': async function ($elm, val) {
+//       return {};
+//     },
+//   };
 
-            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);
+//   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 };
+//           }
 
-            await func.UI.screen.panel_post_render_handler(SESSION_ID, $elm, ret_init, nodeP, $div.clone(true), jobNoP);
+//           if (!val.value) val.value = '_empty_panel_program';
+//           return await render_panel();
+//         };
 
-            return { $new_div: ret_init, abort: true };
-          }
+//         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, '');
 
-          if (!val.value) return { abort: true };
-          await render_panel();
-          return { abort: true };
-        };
+//             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);
 
-        return is_init ? await init_program() : await alter_program();
-      },
+//             await func.UI.screen.panel_post_render_handler(SESSION_ID, $elm, ret_init, nodeP, $div.clone(true), jobNoP);
 
-      'xu-render': async function ($elm, val) {
-        return await common_fx['xu-render']($elm, val, true);
-      },
+//             return { $new_div: ret_init, abort: true };
+//           }
 
-      'xu-ref': async function ($elm, val) {
-        if (!val.value) return {};
-        return await common_fx['xu-ref']($container, val, $container?.data?.()?.xuData?.xuPanelData?.xuData?.paramsP?.dsSessionP);
-      },
-    },
+//           if (!val.value) return { abort: true };
+//           await render_panel();
+//           return { abort: true };
+//         };
 
-    '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 {};
-      },
+//         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) {
+//         if (!val.value) return {};
+//         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-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);
-      },
-    },
-  };
+//       '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);
-    }
+//   // Main execution logic
+//   if (isXuTag) {
+//     if (xu_func === 'xu-exp') {
+//       return common_fx[xu_func]($elm, val);
+//     }
 
-    if (tag_fx?.[nodeTag]?.[xu_func]) {
-      return await tag_fx[nodeTag][xu_func]($elm, val);
-    }
+//     if (tag_fx?.[nodeTag]?.[xu_func]) {
+//       return await tag_fx[nodeTag][xu_func]($elm, val);
+//     }
 
-    console.warn(`attribute ${xu_func} not found for ${nodeTag}`);
-    return {};
-  }
+//     console.warn(`attribute ${xu_func} not found for ${nodeTag}`);
+//     return {};
+//   }
 
-  if (_.isEmpty(elmData)) return {};
+//   if (_.isEmpty(elmData)) return {};
 
-  if (!xuData.debug_info.attribute_stat) {
-    xuData.debug_info.attribute_stat = {};
-  }
+//   if (!xuData.debug_info.attribute_stat) {
+//     xuData.debug_info.attribute_stat = {};
+//   }
 
-  if (xu_func !== 'xu-exp') {
-    xuData.debug_info.attribute_stat[xu_func] = val.value;
-  }
+//   if (xu_func !== 'xu-exp') {
+//     xuData.debug_info.attribute_stat[xu_func] = val.value;
+//   }
 
-  try {
-    if (!common_fx[xu_func]) {
-      console.warn('invalid xu-tag', xu_func);
-      return {};
-    }
-    return await common_fx[xu_func]($elm, val);
-  } catch (error) {
-    console.error('execute_xu_functions error:', error);
-    return {};
-  }
-};
+//   try {
+//     if (!common_fx[xu_func]) {
+//       console.warn('invalid xu-tag', xu_func);
+//       return {};
+//     }
+//     return await common_fx[xu_func]($elm, val);
+//   } catch (error) {
+//     console.error('execute_xu_functions error:', error);
+//     return {};
+//   }
+// };
 
 func.UI.screen.fix_val_defaults = function (key, val) {
   var ret = val;
@@ -14643,225 +14648,225 @@ func.UI.screen.set_attributes_new = async function (SESSION_ID, is_skeleton, $ro
   return _ret;
 };
 
-func.UI.screen.set_attributes_new_bad = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $elm, is_init, execute_attributes = [], refreshed_ds) {
-  const done_exp = new Set(); // Use Set for O(1) lookups instead of array
+// func.UI.screen.set_attributes_new_bad = async function (SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $elm, is_init, execute_attributes = [], refreshed_ds) {
+//   const done_exp = new Set(); // Use Set for O(1) lookups instead of array
 
-  const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
-  if (!_ds) return { abort: true };
+//   const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[paramsP.dsSessionP];
+//   if (!_ds) return { abort: true };
 
-  // Early return if not an element or no attributes
-  if (nodeP.type !== 'element' || !nodeP.attributes) return {};
+//   // Early return if not an element or no attributes
+//   if (nodeP.type !== 'element' || !nodeP.attributes) return {};
 
-  // Cache frequently accessed values
-  const nodeAttrs = nodeP.attributes;
-  const elmData = $elm.data();
-  const xuData = elmData.xuData;
-  const containerData = $container?.data();
-  const containerXuData = containerData?.xuData;
+//   // Cache frequently accessed values
+//   const nodeAttrs = nodeP.attributes;
+//   const elmData = $elm.data();
+//   const xuData = elmData.xuData;
+//   const containerData = $container?.data();
+//   const containerXuData = containerData?.xuData;
 
-  const get_attr_value = async function (key) {
-    const expKey = `xu-exp:${key}`;
-    if (nodeAttrs.hasOwnProperty(expKey)) {
-      return await get_xuExp(key);
-    }
-    return func.UI.screen.fix_val_defaults(key, nodeAttrs[key]);
-  };
+//   const get_attr_value = async function (key) {
+//     const expKey = `xu-exp:${key}`;
+//     if (nodeAttrs.hasOwnProperty(expKey)) {
+//       return await get_xuExp(key);
+//     }
+//     return func.UI.screen.fix_val_defaults(key, nodeAttrs[key]);
+//   };
 
-  const get_xuExp = async function (attrib) {
-    if (is_skeleton) return;
+//   const get_xuExp = async function (attrib) {
+//     if (is_skeleton) return;
 
-    const attr = `xu-exp:${attrib}`;
-    if (!nodeAttrs.hasOwnProperty(attr)) return;
+//     const attr = `xu-exp:${attrib}`;
+//     if (!nodeAttrs.hasOwnProperty(attr)) return;
 
-    if (glb.new_xu_render) {
-      if (!xuData.attr_exp_info) {
-        xuData.attr_exp_info = {};
-      }
-    }
-
-    const exp = nodeAttrs[attr];
-    const res = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', _ds.currentRecordId);
+//     if (glb.new_xu_render) {
+//       if (!xuData.attr_exp_info) {
+//         xuData.attr_exp_info = {};
+//       }
+//     }
 
-    if (glb.new_xu_render) {
-      xuData.attr_exp_info[attrib] = res;
-    }
+//     const exp = nodeAttrs[attr];
+//     const res = await func.expression.get(SESSION_ID, exp, paramsP.dsSessionP, 'UI Attr EXP', _ds.currentRecordId);
 
-    done_exp.add(attr);
-    return res.result;
-  };
+//     if (glb.new_xu_render) {
+//       xuData.attr_exp_info[attrib] = res;
+//     }
 
-  // Create Sets for O(1) lookups
-  const html5EventsSet = new Set(glb.html5_events_handler);
-  const executeAttrsSet = new Set(execute_attributes);
-  const solidAttrsSet = new Set(glb.solid_attributes);
-  const abbreviationsSet = new Set(glb.attr_abbreviations_arr);
-  const runXuBeforeSet = new Set(Object.values(glb.run_xu_before));
-  const runXuAfterSet = new Set(Object.values(glb.run_xu_after));
-
-  // Process attributes in a single pass where possible
-  const attrsToDelete = [];
-  const xuOnAttrs = {};
-
-  for (const [key, val] of Object.entries(nodeAttrs)) {
-    // Handle xu-exp attributes
-    if (key.startsWith('xu-exp:')) {
-      if (_.isEmpty(val)) {
-        attrsToDelete.push(key);
-        continue;
-      }
-      const clean_key = key.slice(7); // 'xu-exp:'.length = 7
-      if (nodeAttrs[clean_key] !== undefined) {
-        attrsToDelete.push(clean_key);
-      }
-    }
-    // Handle abbreviations
-    else if (abbreviationsSet.has(key)) {
-      xuOnAttrs[`xu-on:${key.slice(3)}`] = [
-        {
-          handler: 'custom',
-          props: {},
-          event: [
-            {
-              id: Date.now(),
-              data: {
-                action: 'update',
-                name: { value: val },
-                enabled: true,
-              },
-              props: {},
-            },
-          ],
-        },
-      ];
-      attrsToDelete.push(key);
-    }
-  }
+//     done_exp.add(attr);
+//     return res.result;
+//   };
 
-  // Delete marked attributes
-  for (const key of attrsToDelete) {
-    delete nodeAttrs[key];
-  }
+//   // Create Sets for O(1) lookups
+//   const html5EventsSet = new Set(glb.html5_events_handler);
+//   const executeAttrsSet = new Set(execute_attributes);
+//   const solidAttrsSet = new Set(glb.solid_attributes);
+//   const abbreviationsSet = new Set(glb.attr_abbreviations_arr);
+//   const runXuBeforeSet = new Set(Object.values(glb.run_xu_before));
+//   const runXuAfterSet = new Set(Object.values(glb.run_xu_after));
+
+//   // Process attributes in a single pass where possible
+//   const attrsToDelete = [];
+//   const xuOnAttrs = {};
+
+//   for (const [key, val] of Object.entries(nodeAttrs)) {
+//     // Handle xu-exp attributes
+//     if (key.startsWith('xu-exp:')) {
+//       if (_.isEmpty(val)) {
+//         attrsToDelete.push(key);
+//         continue;
+//       }
+//       const clean_key = key.slice(7); // 'xu-exp:'.length = 7
+//       if (nodeAttrs[clean_key] !== undefined) {
+//         attrsToDelete.push(clean_key);
+//       }
+//     }
+//     // Handle abbreviations
+//     else if (abbreviationsSet.has(key)) {
+//       xuOnAttrs[`xu-on:${key.slice(3)}`] = [
+//         {
+//           handler: 'custom',
+//           props: {},
+//           event: [
+//             {
+//               id: Date.now(),
+//               data: {
+//                 action: 'update',
+//                 name: { value: val },
+//                 enabled: true,
+//               },
+//               props: {},
+//             },
+//           ],
+//         },
+//       ];
+//       attrsToDelete.push(key);
+//     }
+//   }
 
-  // Add xu-on attributes
-  Object.assign(nodeAttrs, xuOnAttrs);
+//   // Delete marked attributes
+//   for (const key of attrsToDelete) {
+//     delete nodeAttrs[key];
+//   }
 
-  // Clean up attributes
-  for (const [key, val] of Object.entries(nodeAttrs)) {
-    const fixedVal = func.UI.screen.fix_val_defaults(key, val);
+//   // Add xu-on attributes
+//   Object.assign(nodeAttrs, xuOnAttrs);
 
-    if (fixedVal === undefined || fixedVal === null) {
-      delete nodeAttrs[key];
-    } else if (solidAttrsSet.has(key) && !fixedVal) {
-      delete nodeAttrs[key];
-    } else {
-      nodeAttrs[key] = fixedVal;
-    }
-  }
+//   // Clean up attributes
+//   for (const [key, val] of Object.entries(nodeAttrs)) {
+//     const fixedVal = func.UI.screen.fix_val_defaults(key, val);
 
-  const _ret = {};
+//     if (fixedVal === undefined || fixedVal === null) {
+//       delete nodeAttrs[key];
+//     } else if (solidAttrsSet.has(key) && !fixedVal) {
+//       delete nodeAttrs[key];
+//     } else {
+//       nodeAttrs[key] = fixedVal;
+//     }
+//   }
 
-  // Helper to check abort condition
-  const shouldAbort = () => _ret.abort || containerXuData?.pending_to_delete;
+//   const _ret = {};
 
-  // XU-ATTRS
-  if (nodeAttrs['xu-attrs'] || nodeAttrs['xu-exp:xu-attrs']) {
-    const attr = 'xu-attrs';
-    await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, attr, $elm, { key: attr, value: await get_attr_value(attr) }, is_init);
-  }
+//   // Helper to check abort condition
+//   const shouldAbort = () => _ret.abort || containerXuData?.pending_to_delete;
 
-  // BEFORE
-  if (!_.isEmpty(nodeAttrs)) {
-    for (const [key, attr] of Object.entries(glb.run_xu_before)) {
-      if (shouldAbort()) break;
-      if (html5EventsSet.has(attr) || executeAttrsSet.has(attr)) continue;
+//   // XU-ATTRS
+//   if (nodeAttrs['xu-attrs'] || nodeAttrs['xu-exp:xu-attrs']) {
+//     const attr = 'xu-attrs';
+//     await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, attr, $elm, { key: attr, value: await get_attr_value(attr) }, is_init);
+//   }
 
-      const expKey = `xu-exp:${attr}`;
-      if (!nodeAttrs.hasOwnProperty(attr) && !nodeAttrs.hasOwnProperty(expKey)) continue;
-      if (!nodeAttrs[expKey] && nodeAttrs.hasOwnProperty(attr) && func.UI.screen.fix_val_defaults(attr, nodeAttrs[attr]) === undefined) continue;
+//   // BEFORE
+//   if (!_.isEmpty(nodeAttrs)) {
+//     for (const [key, attr] of Object.entries(glb.run_xu_before)) {
+//       if (shouldAbort()) break;
+//       if (html5EventsSet.has(attr) || executeAttrsSet.has(attr)) continue;
 
-      const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, attr, $elm, { key: attr, value: await get_attr_value(attr) }, is_init);
-      Object.assign(_ret, ret);
-    }
-  }
+//       const expKey = `xu-exp:${attr}`;
+//       if (!nodeAttrs.hasOwnProperty(attr) && !nodeAttrs.hasOwnProperty(expKey)) continue;
+//       if (!nodeAttrs[expKey] && nodeAttrs.hasOwnProperty(attr) && func.UI.screen.fix_val_defaults(attr, nodeAttrs[attr]) === undefined) continue;
 
-  // ALL - Process attributes
-  const isXuPanel = nodeP.tagName === 'xu-panel';
-  const isXuTeleport = nodeP.tagName === 'xu-teleport';
-  const elmElement = $elm.get(0);
+//       const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, attr, $elm, { key: attr, value: await get_attr_value(attr) }, is_init);
+//       Object.assign(_ret, ret);
+//     }
+//   }
 
-  for (const [key, val] of Object.entries(nodeAttrs)) {
-    if (shouldAbort()) break;
-    if (html5EventsSet.has(key) || executeAttrsSet.has(key)) continue;
+//   // ALL - Process attributes
+//   const isXuPanel = nodeP.tagName === 'xu-panel';
+//   const isXuTeleport = nodeP.tagName === 'xu-teleport';
+//   const elmElement = $elm.get(0);
 
-    const colonIndex = key.indexOf(':');
-    const new_key = colonIndex > -1 ? key.slice(0, colonIndex) : key;
+//   for (const [key, val] of Object.entries(nodeAttrs)) {
+//     if (shouldAbort()) break;
+//     if (html5EventsSet.has(key) || executeAttrsSet.has(key)) continue;
 
-    if (!isXuPanel && !isXuTeleport && (!new_key.startsWith('xu-') || new_key.length < 3 || new_key[2] !== '-')) {
-      try {
-        elmElement.setAttribute(key, val);
-      } catch (err) {
-        console.error(err.message);
-      }
-      continue;
-    }
+//     const colonIndex = key.indexOf(':');
+//     const new_key = colonIndex > -1 ? key.slice(0, colonIndex) : key;
 
-    // Store xu attributes
-    if (elmData.xuAttributes) {
-      elmData.xuAttributes[key] = val;
-    }
+//     if (!isXuPanel && !isXuTeleport && (!new_key.startsWith('xu-') || new_key.length < 3 || new_key[2] !== '-')) {
+//       try {
+//         elmElement.setAttribute(key, val);
+//       } catch (err) {
+//         console.error(err.message);
+//       }
+//       continue;
+//     }
 
-    const expKey = `xu-exp:${new_key}`;
-    if (new_key === 'xu-exp' || nodeAttrs[expKey] || runXuBeforeSet.has(new_key) || runXuAfterSet.has(new_key)) {
-      continue;
-    }
+//     // Store xu attributes
+//     if (elmData.xuAttributes) {
+//       elmData.xuAttributes[key] = val;
+//     }
 
-    if (new_key === 'xu-on') {
-      const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, 'xu-on', $elm, { key: key, value: await get_attr_value(key) }, is_init, refreshed_ds);
-      Object.assign(_ret, ret);
-      continue;
-    }
+//     const expKey = `xu-exp:${new_key}`;
+//     if (new_key === 'xu-exp' || nodeAttrs[expKey] || runXuBeforeSet.has(new_key) || runXuAfterSet.has(new_key)) {
+//       continue;
+//     }
 
-    const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, new_key, $elm, { key: key, value: await get_attr_value(key) }, is_init, refreshed_ds);
-    Object.assign(_ret, ret);
-  }
+//     if (new_key === 'xu-on') {
+//       const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, 'xu-on', $elm, { key: key, value: await get_attr_value(key) }, is_init, refreshed_ds);
+//       Object.assign(_ret, ret);
+//       continue;
+//     }
 
-  // EXP - Process expressions
-  for (const [key, val] of Object.entries(nodeAttrs)) {
-    if (shouldAbort()) break;
+//     const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, new_key, $elm, { key: key, value: await get_attr_value(key) }, is_init, refreshed_ds);
+//     Object.assign(_ret, ret);
+//   }
 
-    if (!key.startsWith('xu-exp:')) continue;
-    const attr = key.slice(7);
+//   // EXP - Process expressions
+//   for (const [key, val] of Object.entries(nodeAttrs)) {
+//     if (shouldAbort()) break;
 
-    if (html5EventsSet.has(attr) || executeAttrsSet.has(attr)) continue;
-    if (done_exp.has(key)) continue;
+//     if (!key.startsWith('xu-exp:')) continue;
+//     const attr = key.slice(7);
 
-    const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, 'xu-exp', $elm, { key: attr, value: val }, true, refreshed_ds);
-    Object.assign(_ret, ret);
-  }
+//     if (html5EventsSet.has(attr) || executeAttrsSet.has(attr)) continue;
+//     if (done_exp.has(key)) continue;
 
-  // AFTER
-  for (const [key, attr] of Object.entries(glb.run_xu_after)) {
-    if (containerXuData?.pending_to_delete) break;
-    if (html5EventsSet.has(attr) || executeAttrsSet.has(attr)) continue;
+//     const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, 'xu-exp', $elm, { key: attr, value: val }, true, refreshed_ds);
+//     Object.assign(_ret, ret);
+//   }
 
-    const expKey = `xu-exp:${attr}`;
-    if (!nodeAttrs || (!nodeAttrs[attr] && !nodeAttrs[expKey])) continue;
+//   // AFTER
+//   for (const [key, attr] of Object.entries(glb.run_xu_after)) {
+//     if (containerXuData?.pending_to_delete) break;
+//     if (html5EventsSet.has(attr) || executeAttrsSet.has(attr)) continue;
 
-    const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, attr, $elm, { key: attr, value: await get_attr_value(attr) }, is_init, refreshed_ds);
-    Object.assign(_ret, ret);
-  }
+//     const expKey = `xu-exp:${attr}`;
+//     if (!nodeAttrs || (!nodeAttrs[attr] && !nodeAttrs[expKey])) continue;
 
-  // REGISTER EVENTS ATTRIBUTES
-  for (const [key, val] of Object.entries(nodeAttrs)) {
-    if (containerXuData?.pending_to_delete) break;
-    if (!html5EventsSet.has(key)) break;
+//     const ret = await func.UI.screen.execute_xu_functions(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, attr, $elm, { key: attr, value: await get_attr_value(attr) }, is_init, refreshed_ds);
+//     Object.assign(_ret, ret);
+//   }
 
-    const expVal = await get_xuExp(key);
-    $elm.attr(key, expVal || val);
-  }
+//   // REGISTER EVENTS ATTRIBUTES
+//   for (const [key, val] of Object.entries(nodeAttrs)) {
+//     if (containerXuData?.pending_to_delete) break;
+//     if (!html5EventsSet.has(key)) break;
 
-  return _ret;
-};
+//     const expVal = await get_xuExp(key);
+//     $elm.attr(key, expVal || val);
+//   }
+
+//   return _ret;
+// };
 
 func.UI.screen.panel_post_render_handler = async function (
   SESSION_ID,
@@ -15095,136 +15100,136 @@ func.UI.screen.create_container = async function (SESSION_ID, $root_container, n
   return $div;
 };
 
-func.UI.screen.create_container_bad = 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 = klona.klona(paramsP);
-  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;
+// func.UI.screen.create_container_bad = 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 = klona.klona(paramsP);
+//   const _ds = SESSION_OBJ[SESSION_ID].DS_GLB[_paramsP.dsSessionP];
+//   const $appendTo = $appendToP || $container;
 
-  const div = div_typeP || 'div';
+//   // Early exit if container doesn't exist
+//   if (!$appendTo?.length) return null;
 
-  // Cache container data to avoid repeated access
-  const containerData = $container?.data?.();
-  const containerXuData = containerData?.xuData;
-  const currentRecordId = containerXuData?.recordid || (_ds ? _ds.currentRecordId : '');
+//   const div = div_typeP || 'div';
 
-  // Pre-compute items array
-  const items = nodeP.children ? nodeP.children.map((val) => val.xu_tree_id || val.id) : [];
+//   // Cache container data to avoid repeated access
+//   const containerData = $container?.data?.();
+//   const containerXuData = containerData?.xuData;
+//   const currentRecordId = containerXuData?.recordid || (_ds ? _ds.currentRecordId : '');
 
-  try {
-    const key_path = `${containerXuData?.key_path || '0'}-${keyP || '0'}`;
-    const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
+//   // Pre-compute items array
+//   const items = nodeP.children ? nodeP.children.map((val) => val.xu_tree_id || val.id) : [];
 
-    let $div;
+//   try {
+//     const key_path = `${containerXuData?.key_path || '0'}-${keyP || '0'}`;
+//     const elem_key = `${nodeP.xu_tree_id || nodeP.id}-${key_path}-${currentRecordId}`;
 
-    // Handle SVG creation
-    if (div === 'svg') {
-      const draw_svg = function (element) {
-        const get_tag_str = function (element, prop, val) {
-          const attrs = [];
+//     let $div;
 
-          for (const [key, value] of Object.entries(prop)) {
-            if (!key.startsWith('xu')) {
-              attrs.push(`${key}="${value}"`);
-            }
-          }
+//     // Handle SVG creation
+//     if (div === 'svg') {
+//       const draw_svg = function (element) {
+//         const get_tag_str = function (element, prop, val) {
+//           const attrs = [];
 
-          const attr_str = attrs.join(' ');
+//           for (const [key, value] of Object.entries(prop)) {
+//             if (!key.startsWith('xu')) {
+//               attrs.push(`${key}="${value}"`);
+//             }
+//           }
 
-          if (element === 'svg') {
-            return `<${element} ${attr_str}>`;
-          }
+//           const attr_str = attrs.join(' ');
 
-          const inner = val?.children?.length ? iterate_svg(val) : '';
-          return `<${element} ${attr_str}>${inner}</${element}>`;
-        };
+//           if (element === 'svg') {
+//             return `<${element} ${attr_str}>`;
+//           }
 
-        const iterate_svg = function (node) {
-          if (!node.children) return '';
+//           const inner = val?.children?.length ? iterate_svg(val) : '';
+//           return `<${element} ${attr_str}>${inner}</${element}>`;
+//         };
 
-          return node.children.map((val) => get_tag_str(val.tagName, val.attributes, val)).join('');
-        };
+//         const iterate_svg = function (node) {
+//           if (!node.children) return '';
 
-        const svg_str = get_tag_str(element, prop);
-        const inner_str = iterate_svg(nodeP);
+//           return node.children.map((val) => get_tag_str(val.tagName, val.attributes, val)).join('');
+//         };
 
-        $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
-      };
+//         const svg_str = get_tag_str(element, prop);
+//         const inner_str = iterate_svg(nodeP);
 
-      draw_svg(div_typeP);
-    } else {
-      $div = $(`<${div}${attr_str ? ' ' + attr_str : ''}>`);
-    }
+//         $div = $(svg_str + inner_str + '</svg>').appendTo($appendTo);
+//       };
 
-    // Generate UI ID
-    const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
+//       draw_svg(div_typeP);
+//     } else {
+//       $div = $(`<${div}${attr_str ? ' ' + attr_str : ''}>`);
+//     }
 
-    // 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,
-    };
+//     // Generate UI ID
+//     const new_ui_id = await generate_xu_ui_id(SESSION_ID, nodeP, $container, paramsP, keyP);
+
+//     // 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,
+//     };
 
-    // Add iterate_info if present
-    if (parent_infoP?.iterate_info) {
-      xuData.iterate_info = parent_infoP.iterate_info;
-    }
+//     // Add iterate_info if present
+//     if (parent_infoP?.iterate_info) {
+//       xuData.iterate_info = parent_infoP.iterate_info;
+//     }
 
-    // Set data once
-    $div.data({
-      xuData: xuData,
-      xuAttributes: {},
-    });
+//     // Set data once
+//     $div.data({
+//       xuData: xuData,
+//       xuAttributes: {},
+//     });
 
-    // Apply placeholder class if needed
-    if (is_placeholder) {
-      $div.addClass('display_none');
-    }
+//     // Apply placeholder class if needed
+//     if (is_placeholder) {
+//       $div.addClass('display_none');
+//     }
 
-    // Apply custom class if provided
-    if (classP) {
-      $div.addClass(classP);
-    }
+//     // 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);
-    }
+//     // Append to DOM (only for non-SVG elements)
+//     if (div_typeP !== 'svg') {
+//       $div.appendTo($appendTo);
+//     }
 
-    return $div;
-  } catch (e) {
-    console.error('create_container error:', e);
-    return null;
-  }
-};
+//     return $div;
+//   } catch (e) {
+//     console.error('create_container error:', e);
+//     return null;
+//   }
+// };
 
 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];
@@ -16566,902 +16571,902 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
   // }
 };
 
-func.UI.screen.render_ui_tree_bad = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
-  // Early cache session and datasource
-  let _session, _ds;
-  if (!is_skeleton) {
-    _session = SESSION_OBJ[SESSION_ID];
-    _ds = _session.DS_GLB[paramsP.dsSessionP];
-  }
-
-  const prop = nodeP.attributes;
-  const is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType);
-  const nodeTag = nodeP.tagName;
-
-  // Optimized element finder with caching
-  const get_element_info = function () {
-    if (!_ds) return {};
-
-    const currentRecordId = _ds.currentRecordId || '';
-    const $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
-
-    for (let i = 0; i < $div.length; i++) {
-      const $el = $($div[i]);
-      const xuData = $el.data().xuData;
-      if (xuData?.recordid === currentRecordId && xuData?.key === keyP && $el.prop('tagName') !== 'XURENDER') {
-        return { div: $div };
-      }
-    }
-    return {};
-  };
-
-  const init = async function () {
-    return !!nodeP;
-  };
-
-  const debug = function (is_errorP, error_descP) {
-    func.utils.debug.log(SESSION_ID, `${paramsP.prog_id}_${nodeP.id_org}_ui_prop`, {
-      module: 'gui',
-      action: 'init',
-      prop: nodeP.id,
-      details: error_descP,
-      result: null,
-      error: is_errorP,
-      source: _ds?.tree_obj?.menuName || '',
-      fields: null,
-      type: null,
-      prog_id: paramsP.prog_id,
-      dsSession: null,
-    });
-  };
-
-  const close_modal = async function (modal_id) {
-    delete APP_MODAL_OBJ[modal_id];
-    const xu_modal_controller = document.querySelector('xu-modal-controller');
-    const params = $(xu_modal_controller).data().xuControllerParams?.[modal_id];
-    if (params?.container) {
-      await func.UI.screen.validate_exit_events(SESSION_ID, params.$container.data().xuData.paramsP, null);
-      func.datasource.clean_all(SESSION_ID, params.dsSession);
-    }
-  };
-
-  const close_all_modals = function () {
-    Object.entries(APP_MODAL_OBJ).forEach(([key, val]) => {
-      if (val) {
-        UI_FRAMEWORK_PLUGIN.modal.close(key);
-      }
-    });
-  };
-
-  const open_modal = async function ($div) {
-    const modal_id = `app_modal-${paramsP.dsSessionP}`;
-    let xu_modal_controller = document.querySelector('xu-modal-controller');
-
-    if (!xu_modal_controller) {
-      func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
-      xu_modal_controller = document.querySelector('xu-modal-controller');
-    }
-
-    let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
-
-    controller_params[modal_id] = {
-      menuTitle: paramsP.screenInfo.properties?.menuTitle,
-      screenId: paramsP.screenId,
-      $dialogDiv: $div.children(),
-      $container: $container,
-      dsSession: paramsP.dsSessionP,
-    };
+// func.UI.screen.render_ui_tree_bad = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
+//   // Early cache session and datasource
+//   let _session, _ds;
+//   if (!is_skeleton) {
+//     _session = SESSION_OBJ[SESSION_ID];
+//     _ds = _session.DS_GLB[paramsP.dsSessionP];
+//   }
 
-    $(xu_modal_controller).data('xuControllerParams', controller_params);
-    const modalController = new UI_FRAMEWORK_PLUGIN.modal();
+//   const prop = nodeP.attributes;
+//   const is_mobile = glb.MOBILE_ARR.includes(paramsP.screenInfo.properties?.menuType);
+//   const nodeTag = nodeP.tagName;
 
-    if (!APP_MODAL_OBJ[modal_id]) {
-      APP_MODAL_OBJ[modal_id] = await modalController.create(SESSION_ID, modal_id, paramsP.screenInfo, close_modal);
-    } else {
-      $(modal_id).empty();
-    }
+//   // Optimized element finder with caching
+//   const get_element_info = function () {
+//     if (!_ds) return {};
 
-    await modalController.init(SESSION_ID, modal_id);
-    return $div;
-  };
+//     const currentRecordId = _ds.currentRecordId || '';
+//     const $div = func.UI.utils.find_in_element_data('xuData', $container.parent(), 'nodeid', nodeP.id);
 
-  const open_popover = async function ($div) {
-    const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
+//     for (let i = 0; i < $div.length; i++) {
+//       const $el = $($div[i]);
+//       const xuData = $el.data().xuData;
+//       if (xuData?.recordid === currentRecordId && xuData?.key === keyP && $el.prop('tagName') !== 'XURENDER') {
+//         return { div: $div };
+//       }
+//     }
+//     return {};
+//   };
 
-    $(xu_popover_controller).data('xuControllerParams', {
-      menuTitle: paramsP.screenInfo.properties?.menuTitle,
-      screenId: paramsP.screenId,
-      $dialogDiv: $div.children(),
-      $container: $container,
-    });
+//   const init = async function () {
+//     return !!nodeP;
+//   };
 
-    const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
-    await popover.open(SESSION_ID);
-    CURRENT_APP_POPOVER = popover;
-  };
+//   const debug = function (is_errorP, error_descP) {
+//     func.utils.debug.log(SESSION_ID, `${paramsP.prog_id}_${nodeP.id_org}_ui_prop`, {
+//       module: 'gui',
+//       action: 'init',
+//       prop: nodeP.id,
+//       details: error_descP,
+//       result: null,
+//       error: is_errorP,
+//       source: _ds?.tree_obj?.menuName || '',
+//       fields: null,
+//       type: null,
+//       prog_id: paramsP.prog_id,
+//       dsSession: null,
+//     });
+//   };
 
-  // OPTIMIZED: Parallel child iteration with improved logic
-  const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
-    if (!is_mobile && nodeP.busy) return $divP;
+//   const close_modal = async function (modal_id) {
+//     delete APP_MODAL_OBJ[modal_id];
+//     const xu_modal_controller = document.querySelector('xu-modal-controller');
+//     const params = $(xu_modal_controller).data().xuControllerParams?.[modal_id];
+//     if (params?.container) {
+//       await func.UI.screen.validate_exit_events(SESSION_ID, params.$container.data().xuData.paramsP, null);
+//       func.datasource.clean_all(SESSION_ID, params.dsSession);
+//     }
+//   };
 
-    nodeP.busy = true;
+//   const close_all_modals = function () {
+//     Object.entries(APP_MODAL_OBJ).forEach(([key, val]) => {
+//       if (val) {
+//         UI_FRAMEWORK_PLUGIN.modal.close(key);
+//       }
+//     });
+//   };
 
-    const done = function ($divP) {
-      setTimeout(() => {
-        nodeP.busy = false;
-      }, 1000);
-      return $divP;
-    };
+//   const open_modal = async function ($div) {
+//     const modal_id = `app_modal-${paramsP.dsSessionP}`;
+//     let xu_modal_controller = document.querySelector('xu-modal-controller');
 
-    if (!nodeP?.children?.length) {
-      return done($divP);
-    }
+//     if (!xu_modal_controller) {
+//       func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
+//       xu_modal_controller = document.querySelector('xu-modal-controller');
+//     }
 
-    if (before_record_function) {
-      await before_record_function();
-    }
+//     let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
 
-    // Parallel rendering for better performance
-    await Promise.all(nodeP.children.map((child, key) => func.UI.screen.render_ui_tree(SESSION_ID, $divP, child, parent_infoP, paramsP, jobNoP, is_skeleton, key, null, nodeP, null, $root_container)));
+//     controller_params[modal_id] = {
+//       menuTitle: paramsP.screenInfo.properties?.menuTitle,
+//       screenId: paramsP.screenId,
+//       $dialogDiv: $div.children(),
+//       $container: $container,
+//       dsSession: paramsP.dsSessionP,
+//     };
 
-    return done($divP);
-  };
+//     $(xu_modal_controller).data('xuControllerParams', controller_params);
+//     const modalController = new UI_FRAMEWORK_PLUGIN.modal();
 
-  const _$ = function ($elm) {
-    try {
-      const id = $elm.attr('xu-ui-id');
-      if (!id || !glb.DEBUG_MODE) return $elm;
+//     if (!APP_MODAL_OBJ[modal_id]) {
+//       APP_MODAL_OBJ[modal_id] = await modalController.create(SESSION_ID, modal_id, paramsP.screenInfo, close_modal);
+//     } else {
+//       $(modal_id).empty();
+//     }
 
-      const $el = $(`[xu-ui-id="${id}"]`);
-      if ($el.length > 1) {
-        console.warn(`Multiple elements for xu-ui-id: ${id}`, $el);
-      }
-      return $($el[0]);
-    } catch (e) {
-      console.error(e);
-      return $elm;
-    }
-  };
+//     await modalController.init(SESSION_ID, modal_id);
+//     return $div;
+//   };
 
-  const hover_in = function ($div, e) {
-    if (is_skeleton || (e && (EXP_BUSY || UI_WORKER_OBJ.jobs.length))) return;
+//   const open_popover = async function ($div) {
+//     const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
 
-    CLIENT_ACTIVITY_TS = Date.now();
+//     $(xu_popover_controller).data('xuControllerParams', {
+//       menuTitle: paramsP.screenInfo.properties?.menuTitle,
+//       screenId: paramsP.screenId,
+//       $dialogDiv: $div.children(),
+//       $container: $container,
+//     });
 
-    const containerXuData = _$($container)?.data()?.xuData;
-    if (containerXuData?.debug_info) {
-      containerXuData.debug_info.hover_item = $div.attr('xu-ui-id');
-    }
+//     const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
+//     await popover.open(SESSION_ID);
+//     CURRENT_APP_POPOVER = popover;
+//   };
 
-    if (!_ds) return;
+//   // OPTIMIZED: Parallel child iteration with improved logic
+//   const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
+//     if (!is_mobile && nodeP.busy) return $divP;
 
-    // Set attributes
-    const attributes = {};
-    Array.from($div[0].attributes).forEach((attr) => {
-      attributes[attr.name] = attr.value;
-    });
-    _session.DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = attributes;
+//     nodeP.busy = true;
 
-    const divXuData = $div.data()?.xuData;
-    if (!divXuData) return;
+//     const done = function ($divP) {
+//       setTimeout(() => {
+//         nodeP.busy = false;
+//       }, 1000);
+//       return $divP;
+//     };
 
-    const _iterate_info = divXuData.iterate_info;
-    if (_iterate_info) {
-      const set_field_value = (field_id, value, is_dynamic) => {
-        if (is_dynamic) {
-          _ds.dynamic_fields[field_id].value = value;
-        } else {
-          try {
-            const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
-            _ds.data_feed.rows[row_idx][field_id] = value;
-          } catch (err) {
-            console.error(err);
-          }
-        }
-      };
+//     if (!nodeP?.children?.length) {
+//       return done($divP);
+//     }
 
-      set_field_value(_iterate_info.iterator_key, _iterate_info._key, _iterate_info.is_key_dynamic_field);
-      set_field_value(_iterate_info.iterator_val, _iterate_info._val, _iterate_info.is_val_dynamic_field);
-    }
+//     if (before_record_function) {
+//       await before_record_function();
+//     }
 
-    if ($div && _$($div) && _ds && paramsP.renderType === 'grid') {
-      func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId }, null, null, paramsP.dsSessionP);
-    }
+//     // Parallel rendering for better performance
+//     await Promise.all(nodeP.children.map((child, key) => func.UI.screen.render_ui_tree(SESSION_ID, $divP, child, parent_infoP, paramsP, jobNoP, is_skeleton, key, null, nodeP, null, $root_container)));
 
-    const iterate_data = $div?.data()?.xuData?.iterate_info;
-    if (iterate_data) {
-      const set_value = (field_id, value) => {
-        func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId, field_id, field_value: value }, null, null, paramsP.dsSessionP);
-      };
+//     return done($divP);
+//   };
 
-      if (iterate_data.iterator_key) set_value(iterate_data.iterator_key, iterate_data._key);
-      if (iterate_data.iterator_val) set_value(iterate_data.iterator_val, iterate_data._val);
-    }
-  };
+//   const _$ = function ($elm) {
+//     try {
+//       const id = $elm.attr('xu-ui-id');
+//       if (!id || !glb.DEBUG_MODE) return $elm;
 
-  const hover_out = function () {
-    if (is_skeleton) return;
+//       const $el = $(`[xu-ui-id="${id}"]`);
+//       if ($el.length > 1) {
+//         console.warn(`Multiple elements for xu-ui-id: ${id}`, $el);
+//       }
+//       return $($el[0]);
+//     } catch (e) {
+//       console.error(e);
+//       return $elm;
+//     }
+//   };
 
-    CLIENT_ACTIVITY_TS = Date.now();
+//   const hover_in = function ($div, e) {
+//     if (is_skeleton || (e && (EXP_BUSY || UI_WORKER_OBJ.jobs.length))) return;
 
-    const containerXuData = _$($container)?.data()?.xuData;
-    if (containerXuData?.debug_info) {
-      containerXuData.debug_info.hover_item = null;
-    }
+//     CLIENT_ACTIVITY_TS = Date.now();
 
-    if (_ds?.data_system) {
-      SESSION_OBJ[SESSION_ID].DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = {};
-    }
-  };
+//     const containerXuData = _$($container)?.data()?.xuData;
+//     if (containerXuData?.debug_info) {
+//       containerXuData.debug_info.hover_item = $div.attr('xu-ui-id');
+//     }
 
-  const render_screen_type = async function ($div) {
-    const set_call_screen_properties_values = async function (ui_framework, params) {
-      params.properties = {};
+//     if (!_ds) return;
 
-      const get_values = async function (property) {
-        let property_value = paramsP?.screenInfo?.properties?.[property] || paramsP?.screenInfo?.properties?.frameworkProperties?.[property];
+//     // Set attributes
+//     const attributes = {};
+//     Array.from($div[0].attributes).forEach((attr) => {
+//       attributes[attr.name] = attr.value;
+//     });
+//     _session.DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = attributes;
+
+//     const divXuData = $div.data()?.xuData;
+//     if (!divXuData) return;
+
+//     const _iterate_info = divXuData.iterate_info;
+//     if (_iterate_info) {
+//       const set_field_value = (field_id, value, is_dynamic) => {
+//         if (is_dynamic) {
+//           _ds.dynamic_fields[field_id].value = value;
+//         } else {
+//           try {
+//             const row_idx = func.common.find_ROWID_idx(_ds, _ds.currentRecordId);
+//             _ds.data_feed.rows[row_idx][field_id] = value;
+//           } catch (err) {
+//             console.error(err);
+//           }
+//         }
+//       };
 
-        if (paramsP?.call_screen_propertiesP) {
-          if (paramsP.call_screen_propertiesP[property]) {
-            property_value = paramsP.call_screen_propertiesP[property];
-          }
-          const expKey = `xu-exp:${property}`;
-          if (paramsP.call_screen_propertiesP[expKey]) {
-            property_value = (await func.expression.get(SESSION_ID, paramsP.call_screen_propertiesP[expKey], paramsP.dsSessionP, property)).result;
-          }
-        }
-        return property_value;
-      };
+//       set_field_value(_iterate_info.iterator_key, _iterate_info._key, _iterate_info.is_key_dynamic_field);
+//       set_field_value(_iterate_info.iterator_val, _iterate_info._val, _iterate_info.is_val_dynamic_field);
+//     }
 
-      params.properties['name'] = await get_values('menuTitle');
-      const uiProps = await ui_framework?.properties?.();
-      if (uiProps) {
-        for (const [key, val] of Object.entries(uiProps)) {
-          params.properties[key] = await get_values(key);
-        }
-      }
-    };
+//     if ($div && _$($div) && _ds && paramsP.renderType === 'grid') {
+//       func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId }, null, null, paramsP.dsSessionP);
+//     }
 
-    const $div_content = $div.children();
+//     const iterate_data = $div?.data()?.xuData?.iterate_info;
+//     if (iterate_data) {
+//       const set_value = (field_id, value) => {
+//         func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'update_datasource', { currentRecordId: _$($div).data().xuData.currentRecordId, field_id, field_value: value }, null, null, paramsP.dsSessionP);
+//       };
 
-    // Update parent container for children
-    $div_content.each((key, val) => {
-      const xuData = $(val)?.data()?.xuData;
-      if (xuData && !xuData.parent_container) {
-        xuData.parent_container = $div.data().xuData.parent_container;
-      }
-    });
+//       if (iterate_data.iterator_key) set_value(iterate_data.iterator_key, iterate_data._key);
+//       if (iterate_data.iterator_val) set_value(iterate_data.iterator_val, iterate_data._val);
+//     }
+//   };
 
-    let $ret = $div;
-    const $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
+//   const hover_out = function () {
+//     if (is_skeleton) return;
 
-    switch (paramsP.screen_type) {
-      case 'modal':
-        const modal_id = `app_modal-${paramsP.dsSessionP}`;
-        let xu_modal_controller = document.querySelector('xu-modal-controller');
+//     CLIENT_ACTIVITY_TS = Date.now();
 
-        if (!xu_modal_controller) {
-          func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
-          xu_modal_controller = document.querySelector('xu-modal-controller');
-        }
+//     const containerXuData = _$($container)?.data()?.xuData;
+//     if (containerXuData?.debug_info) {
+//       containerXuData.debug_info.hover_item = null;
+//     }
 
-        let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
+//     if (_ds?.data_system) {
+//       SESSION_OBJ[SESSION_ID].DS_GLB[0].data_system.SYS_OBJ_WIN_ELEMENT_HOVERED_ATTRIBUTES = {};
+//     }
+//   };
 
-        const modalParams = {
-          screenId: paramsP.screenId,
-          $dialogDiv: $div.children(),
-          $container: $container,
-          dsSession: paramsP.dsSessionP,
-          modal_id,
-          screenInfo: paramsP.screenInfo,
-          close_callback: close_modal,
-          paramsP,
-        };
+//   const render_screen_type = async function ($div) {
+//     const set_call_screen_properties_values = async function (ui_framework, params) {
+//       params.properties = {};
 
-        controller_params[modal_id] = modalParams;
-        $(xu_modal_controller).data('xuControllerParams', controller_params);
+//       const get_values = async function (property) {
+//         let property_value = paramsP?.screenInfo?.properties?.[property] || paramsP?.screenInfo?.properties?.frameworkProperties?.[property];
 
-        const modalController = new UI_FRAMEWORK_PLUGIN.modal();
-        await set_call_screen_properties_values(modalController, modalParams);
+//         if (paramsP?.call_screen_propertiesP) {
+//           if (paramsP.call_screen_propertiesP[property]) {
+//             property_value = paramsP.call_screen_propertiesP[property];
+//           }
+//           const expKey = `xu-exp:${property}`;
+//           if (paramsP.call_screen_propertiesP[expKey]) {
+//             property_value = (await func.expression.get(SESSION_ID, paramsP.call_screen_propertiesP[expKey], paramsP.dsSessionP, property)).result;
+//           }
+//         }
+//         return property_value;
+//       };
 
-        if (!APP_MODAL_OBJ[modal_id]) {
-          APP_MODAL_OBJ[modal_id] = await modalController.create(modalParams);
-        } else {
-          $(modal_id).empty();
-        }
-        await modalController.init(modalParams);
-        break;
+//       params.properties['name'] = await get_values('menuTitle');
+//       const uiProps = await ui_framework?.properties?.();
+//       if (uiProps) {
+//         for (const [key, val] of Object.entries(uiProps)) {
+//           params.properties[key] = await get_values(key);
+//         }
+//       }
+//     };
 
-      case 'popover':
-        const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
-        const popoverParams = {
-          menuTitle: paramsP.screenInfo.properties?.menuTitle,
-          screenId: paramsP.screenId,
-          $dialogDiv: $div.children(),
-          $container: $container,
-        };
+//     const $div_content = $div.children();
 
-        $(xu_popover_controller).data('xuControllerParams', popoverParams);
-        const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
-        await set_call_screen_properties_values(popover, popoverParams);
-        await popover.open(popoverParams);
-        CURRENT_APP_POPOVER = popover;
-        func.UI.utils.screen_blocker(false, `${paramsP.prog_id}_${paramsP.sourceScreenP}`);
-        break;
+//     // Update parent container for children
+//     $div_content.each((key, val) => {
+//       const xuData = $(val)?.data()?.xuData;
+//       if (xuData && !xuData.parent_container) {
+//         xuData.parent_container = $div.data().xuData.parent_container;
+//       }
+//     });
 
-      case 'page':
-        const nav = $nav[0];
-        const pageParams = {
-          div: $div_content,
-          name: paramsP.screenInfo.properties?.menuTitle,
-          screenId: paramsP.screenId,
-          $container: $container,
-          dsSession: paramsP.dsSessionP,
-          SESSION_ID,
-          nav,
-          paramsP,
-        };
+//     let $ret = $div;
+//     const $nav = $(SESSION_OBJ[SESSION_ID].root_element).find('xu-nav');
 
-        const component_name = `xu-page-component-${paramsP.dsSessionP}`;
-        const navXuData = $(nav).data().xuData;
+//     switch (paramsP.screen_type) {
+//       case 'modal':
+//         const modal_id = `app_modal-${paramsP.dsSessionP}`;
+//         let xu_modal_controller = document.querySelector('xu-modal-controller');
 
-        if (!navXuData.nav_params) {
-          navXuData.nav_params = {};
-        }
+//         if (!xu_modal_controller) {
+//           func.UI.component.create_app_modal_component(SESSION_ID, modal_id);
+//           xu_modal_controller = document.querySelector('xu-modal-controller');
+//         }
 
-        // Restore validate
-        if (navXuData.params?.[paramsP.dsSessionP]) {
-          pageParams.$container.data().xuData.validate_screen_ready = navXuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
-        }
+//         let controller_params = $(xu_modal_controller).data('xuControllerParams') || {};
+
+//         const modalParams = {
+//           screenId: paramsP.screenId,
+//           $dialogDiv: $div.children(),
+//           $container: $container,
+//           dsSession: paramsP.dsSessionP,
+//           modal_id,
+//           screenInfo: paramsP.screenInfo,
+//           close_callback: close_modal,
+//           paramsP,
+//         };
 
-        if (!navXuData) return;
-        navXuData.nav_params[paramsP.dsSessionP] = pageParams;
+//         controller_params[modal_id] = modalParams;
+//         $(xu_modal_controller).data('xuControllerParams', controller_params);
 
-        if (!$(component_name).length) {
-          await func.UI.component.create_app_page_component(SESSION_ID, paramsP.dsSessionP);
-          const page = new UI_FRAMEWORK_PLUGIN.page();
-          await set_call_screen_properties_values(page, pageParams);
-          await page.create(pageParams);
-          await page.init(pageParams);
-          nav.push(component_name, { params: pageParams });
-        } else {
-          $(component_name).empty();
-          await UI_FRAMEWORK_PLUGIN.page(SESSION_ID, paramsP.dsSessionP);
-        }
-        $div.data().xuData.paramsP = $container.data().xuData.paramsP;
-        break;
+//         const modalController = new UI_FRAMEWORK_PLUGIN.modal();
+//         await set_call_screen_properties_values(modalController, modalParams);
 
-      case 'panel':
-        $container.append($div_content);
-        $ret = $container;
-        break;
+//         if (!APP_MODAL_OBJ[modal_id]) {
+//           APP_MODAL_OBJ[modal_id] = await modalController.create(modalParams);
+//         } else {
+//           $(modal_id).empty();
+//         }
+//         await modalController.init(modalParams);
+//         break;
+
+//       case 'popover':
+//         const xu_popover_controller = func.UI.component.create_app_popover_component(SESSION_ID);
+//         const popoverParams = {
+//           menuTitle: paramsP.screenInfo.properties?.menuTitle,
+//           screenId: paramsP.screenId,
+//           $dialogDiv: $div.children(),
+//           $container: $container,
+//         };
 
-      default:
-        let $activeNav = $nav;
-        if (!$activeNav?.length) {
-          $activeNav = $('<xu-nav>');
-          $container.append($activeNav);
-          func.UI.component.init_xu_nav($container, $activeNav);
-        }
+//         $(xu_popover_controller).data('xuControllerParams', popoverParams);
+//         const popover = new UI_FRAMEWORK_PLUGIN.popover(SESSION_ID);
+//         await set_call_screen_properties_values(popover, popoverParams);
+//         await popover.open(popoverParams);
+//         CURRENT_APP_POPOVER = popover;
+//         func.UI.utils.screen_blocker(false, `${paramsP.prog_id}_${paramsP.sourceScreenP}`);
+//         break;
+
+//       case 'page':
+//         const nav = $nav[0];
+//         const pageParams = {
+//           div: $div_content,
+//           name: paramsP.screenInfo.properties?.menuTitle,
+//           screenId: paramsP.screenId,
+//           $container: $container,
+//           dsSession: paramsP.dsSessionP,
+//           SESSION_ID,
+//           nav,
+//           paramsP,
+//         };
 
-        const navData = $activeNav.data().xuData;
-        if (navData) {
-          navData.$div = $div_content;
-        }
+//         const component_name = `xu-page-component-${paramsP.dsSessionP}`;
+//         const navXuData = $(nav).data().xuData;
 
-        const navElement = $activeNav[0];
-        if (navElement && navElement.setRoot) {
-          await navElement.setRoot(`xu-root-component-${SESSION_ID}`);
-        }
-        $ret = $container;
-        break;
-    }
-    return $ret;
-  };
+//         if (!navXuData.nav_params) {
+//           navXuData.nav_params = {};
+//         }
 
-  if (!(await init())) return;
-  debug();
+//         // Restore validate
+//         if (navXuData.params?.[paramsP.dsSessionP]) {
+//           pageParams.$container.data().xuData.validate_screen_ready = navXuData.params[paramsP.dsSessionP].$container.data().xuData.validate_screen_ready;
+//         }
 
-  const fx = {
-    widget: async function () {
-      const exist_elm_obj = get_element_info();
-      let $div = exist_elm_obj.div;
+//         if (!navXuData) return;
+//         navXuData.nav_params[paramsP.dsSessionP] = pageParams;
+
+//         if (!$(component_name).length) {
+//           await func.UI.component.create_app_page_component(SESSION_ID, paramsP.dsSessionP);
+//           const page = new UI_FRAMEWORK_PLUGIN.page();
+//           await set_call_screen_properties_values(page, pageParams);
+//           await page.create(pageParams);
+//           await page.init(pageParams);
+//           nav.push(component_name, { params: pageParams });
+//         } else {
+//           $(component_name).empty();
+//           await UI_FRAMEWORK_PLUGIN.page(SESSION_ID, paramsP.dsSessionP);
+//         }
+//         $div.data().xuData.paramsP = $container.data().xuData.paramsP;
+//         break;
+
+//       case 'panel':
+//         $container.append($div_content);
+//         $ret = $container;
+//         break;
+
+//       default:
+//         let $activeNav = $nav;
+//         if (!$activeNav?.length) {
+//           $activeNav = $('<xu-nav>');
+//           $container.append($activeNav);
+//           func.UI.component.init_xu_nav($container, $activeNav);
+//         }
 
-      if (!exist_elm_obj.div) {
-        $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, 'widget_wrapper', null, null, null, null);
+//         const navData = $activeNav.data().xuData;
+//         if (navData) {
+//           navData.$div = $div_content;
+//         }
 
-        const plugin_name = prop['xu-widget'];
-        const method = prop['xu-method'];
-        const dsP = paramsP.dsSessionP;
-        const propsP = prop;
-        const sourceP = 'widgets';
+//         const navElement = $activeNav[0];
+//         if (navElement && navElement.setRoot) {
+//           await navElement.setRoot(`xu-root-component-${SESSION_ID}`);
+//         }
+//         $ret = $container;
+//         break;
+//     }
+//     return $ret;
+//   };
 
-        const call_plugin_api = async (plugin_nameP, dataP) => {
-          return await func.utils.call_plugin_api(SESSION_ID, plugin_nameP, dataP);
-        };
+//   if (!(await init())) return;
+//   debug();
 
-        const report_error = (descP, warn) => {
-          func.utils.debug.log(SESSION_ID, `${_session.DS_GLB[dsP].prog_id}_${_session.DS_GLB[dsP].callingMenuId}`, {
-            module: 'widgets',
-            action: 'Init',
-            source: sourceP,
-            prop: descP,
-            details: descP,
-            result: null,
-            error: !warn,
-            fields: null,
-            type: 'widgets',
-            prog_id: _session.DS_GLB[dsP].prog_id,
-          });
-        };
+//   const fx = {
+//     widget: async function () {
+//       const exist_elm_obj = get_element_info();
+//       let $div = exist_elm_obj.div;
 
-        const get_fields_data = async (fields, props) => {
-          const get_property_value = async (fieldIdP, val) => {
-            if (!val) return;
+//       if (!exist_elm_obj.div) {
+//         $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, 'widget_wrapper', null, null, null, null);
 
-            let value = fieldIdP in props ? props[fieldIdP] : typeof val.defaultValue === 'function' ? val.defaultValue() : val.defaultValue;
+//         const plugin_name = prop['xu-widget'];
+//         const method = prop['xu-method'];
+//         const dsP = paramsP.dsSessionP;
+//         const propsP = prop;
+//         const sourceP = 'widgets';
 
-            if (val.render === 'eventId') {
-              value = props?.[fieldIdP]?.event;
-            }
+//         const call_plugin_api = async (plugin_nameP, dataP) => {
+//           return await func.utils.call_plugin_api(SESSION_ID, plugin_nameP, dataP);
+//         };
 
-            const expKey = `xu-exp:${fieldIdP}`;
-            if (props[expKey]) {
-              value = (await func.expression.get(SESSION_ID, props[expKey], dsP, 'widget property')).result;
-            }
+//         const report_error = (descP, warn) => {
+//           func.utils.debug.log(SESSION_ID, `${_session.DS_GLB[dsP].prog_id}_${_session.DS_GLB[dsP].callingMenuId}`, {
+//             module: 'widgets',
+//             action: 'Init',
+//             source: sourceP,
+//             prop: descP,
+//             details: descP,
+//             result: null,
+//             error: !warn,
+//             fields: null,
+//             type: 'widgets',
+//             prog_id: _session.DS_GLB[dsP].prog_id,
+//           });
+//         };
 
-            return func.common.get_cast_val(SESSION_ID, 'widgets', fieldIdP, val.type, value, null);
-          };
+//         const get_fields_data = async (fields, props) => {
+//           const get_property_value = async (fieldIdP, val) => {
+//             if (!val) return;
 
-          const data_obj = {};
-          let return_code = 1;
+//             let value = fieldIdP in props ? props[fieldIdP] : typeof val.defaultValue === 'function' ? val.defaultValue() : val.defaultValue;
 
-          for (const [key, val] of Object.entries(fields)) {
-            data_obj[key] = await get_property_value(key, val);
-            if (!data_obj[key] && val.mandatory) {
-              return_code = -1;
-              report_error(`${key} is a mandatory field.`);
-              break;
-            }
-          }
+//             if (val.render === 'eventId') {
+//               value = props?.[fieldIdP]?.event;
+//             }
 
-          data_obj['xu-bind'] = await get_property_value('xu-bind', props['xu-bind']);
+//             const expKey = `xu-exp:${fieldIdP}`;
+//             if (props[expKey]) {
+//               value = (await func.expression.get(SESSION_ID, props[expKey], dsP, 'widget property')).result;
+//             }
 
-          return { code: return_code, data: data_obj };
-        };
+//             return func.common.get_cast_val(SESSION_ID, 'widgets', fieldIdP, val.type, value, null);
+//           };
 
-        const load_css_style = () => {
-          const get_css_path = (resource) => {
-            if (_session.worker_type === 'Dev') {
-              return `../../plugins/${plugin_name}/${resource}`;
-            }
-            const manifest = APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest[resource];
-            const dist = manifest.dist ? 'dist/' : '';
-            return `https://${_session.domain}/plugins/${plugin_name}/${dist}${resource}?gtp_token=${_session.gtp_token}&app_id=${_session.app_id}`;
-          };
-          func.utils.load_css_on_demand(get_css_path('style.css'));
-        };
+//           const data_obj = {};
+//           let return_code = 1;
 
-        const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
-        const indexDist = _plugin.manifest['index.mjs'].dist ? 'dist/' : '';
-        const index = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${indexDist}index.mjs`);
-        const methods = index.methods;
+//           for (const [key, val] of Object.entries(fields)) {
+//             data_obj[key] = await get_property_value(key, val);
+//             if (!data_obj[key] && val.mandatory) {
+//               return_code = -1;
+//               report_error(`${key} is a mandatory field.`);
+//               break;
+//             }
+//           }
 
-        if (methods && !methods[method]) {
-          return report_error('method not found');
-        }
+//           data_obj['xu-bind'] = await get_property_value('xu-bind', props['xu-bind']);
 
-        const fields_ret = await get_fields_data(methods[method].fields, propsP);
-        if (fields_ret.code < 0) {
-          return report_error(fields_ret.data);
-        }
+//           return { code: return_code, data: data_obj };
+//         };
 
-        const fields = fields_ret.data;
-        const exclude_attributes = Object.keys(propsP).filter((key) => fields[key] !== undefined || fields[`xu-exp:${key}`] !== undefined);
+//         const load_css_style = () => {
+//           const get_css_path = (resource) => {
+//             if (_session.worker_type === 'Dev') {
+//               return `../../plugins/${plugin_name}/${resource}`;
+//             }
+//             const manifest = APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest[resource];
+//             const dist = manifest.dist ? 'dist/' : '';
+//             return `https://${_session.domain}/plugins/${plugin_name}/${dist}${resource}?gtp_token=${_session.gtp_token}&app_id=${_session.app_id}`;
+//           };
+//           func.utils.load_css_on_demand(get_css_path('style.css'));
+//         };
 
-        const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true, exclude_attributes);
+//         const _plugin = APP_OBJ[_session.app_id]?.app_plugins_purchased?.[plugin_name];
+//         const indexDist = _plugin.manifest['index.mjs'].dist ? 'dist/' : '';
+//         const index = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${indexDist}index.mjs`);
+//         const methods = index.methods;
 
-        $div.addClass('widget_wrapper');
+//         if (methods && !methods[method]) {
+//           return report_error('method not found');
+//         }
 
-        if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
-          return report_error(`plugin ${plugin_name} not found`);
-        }
+//         const fields_ret = await get_fields_data(methods[method].fields, propsP);
+//         if (fields_ret.code < 0) {
+//           return report_error(fields_ret.data);
+//         }
 
-        if (APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest['style.css'].exist) {
-          load_css_style();
-        }
+//         const fields = fields_ret.data;
+//         const exclude_attributes = Object.keys(propsP).filter((key) => fields[key] !== undefined || fields[`xu-exp:${key}`] !== undefined);
 
-        const plugin_setup_ret = await func.utils.get_plugin_setup(SESSION_ID, plugin_name);
-        if (plugin_setup_ret.code < 0) {
-          return report_error(plugin_setup_ret);
-        }
+//         const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true, exclude_attributes);
 
-        const api_utils = await func.common.get_module(SESSION_ID, 'xuda-api-library.mjs', {
-          func,
-          glb,
-          SESSION_OBJ,
-          SESSION_ID,
-          APP_OBJ,
-          dsSession: paramsP.dsSessionP,
-          job_id: jobNoP,
-        });
+//         $div.addClass('widget_wrapper');
 
-        const params = {
-          SESSION_ID,
-          method,
-          _session,
-          dsP,
-          sourceP,
-          propsP,
-          plugin_name,
-          $containerP: $div,
-          plugin_setup: plugin_setup_ret.data,
-          report_error,
-          call_plugin_api,
-          api_utils,
-        };
+//         if (!APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name]) {
+//           return report_error(`plugin ${plugin_name} not found`);
+//         }
 
-        const runtimeDist = _plugin.manifest['runtime.mjs'].dist ? 'dist/' : '';
-        const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${runtimeDist}runtime.mjs`);
+//         if (APP_OBJ[_session.app_id].app_plugins_purchased[plugin_name].manifest['style.css'].exist) {
+//           load_css_style();
+//         }
 
-        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);
-        }
+//         const plugin_setup_ret = await func.utils.get_plugin_setup(SESSION_ID, plugin_name);
+//         if (plugin_setup_ret.code < 0) {
+//           return report_error(plugin_setup_ret);
+//         }
 
-        if (!fx[method]) {
-          throw `Method: ${method} does not exist`;
-        }
+//         const api_utils = await func.common.get_module(SESSION_ID, 'xuda-api-library.mjs', {
+//           func,
+//           glb,
+//           SESSION_OBJ,
+//           SESSION_ID,
+//           APP_OBJ,
+//           dsSession: paramsP.dsSessionP,
+//           job_id: jobNoP,
+//         });
 
-        try {
-          await fx[method](fields, params);
-        } catch (err) {
-          func.utils.debug_report(SESSION_ID, `${plugin_name} widget`, err.message, 'E');
-        }
-      }
-      return $div;
-    },
+//         const params = {
+//           SESSION_ID,
+//           method,
+//           _session,
+//           dsP,
+//           sourceP,
+//           propsP,
+//           plugin_name,
+//           $containerP: $div,
+//           plugin_setup: plugin_setup_ret.data,
+//           report_error,
+//           call_plugin_api,
+//           api_utils,
+//         };
 
-    'xu-single-view': async function () {
-      const exist_elm_obj = get_element_info();
-      let $div = exist_elm_obj.div;
+//         const runtimeDist = _plugin.manifest['runtime.mjs'].dist ? 'dist/' : '';
+//         const fx = await func.utils.get_plugin_resource(SESSION_ID, plugin_name, `${runtimeDist}runtime.mjs`);
 
-      if (!exist_elm_obj.div) {
-        const $wrapper = $('<div>');
-        $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, 'div', $wrapper, '');
+//         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);
+//         }
 
-        if (!$div) return;
+//         if (!fx[method]) {
+//           throw `Method: ${method} does not exist`;
+//         }
 
-        if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
-          close_all_modals();
-        }
+//         try {
+//           await fx[method](fields, params);
+//         } catch (err) {
+//           func.utils.debug_report(SESSION_ID, `${plugin_name} widget`, err.message, 'E');
+//         }
+//       }
+//       return $div;
+//     },
 
-        $div.hover(
-          (e) => hover_in(),
-          (e) => hover_out(),
-        );
-      }
+//     'xu-single-view': async function () {
+//       const exist_elm_obj = get_element_info();
+//       let $div = exist_elm_obj.div;
 
-      await iterate_child($div, nodeP, null, $div);
+//       if (!exist_elm_obj.div) {
+//         const $wrapper = $('<div>');
+//         $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, 'div', $wrapper, '');
 
-      if (_.isEmpty($container.data().xuAttributes)) {
-        await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-      }
+//         if (!$div) return;
+
+//         if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
+//           close_all_modals();
+//         }
+
+//         $div.hover(
+//           (e) => hover_in(),
+//           (e) => hover_out(),
+//         );
+//       }
 
-      // Copy xuData and xuAttributes
-      Object.assign($container.data().xuData, _.cloneDeep($div.data().xuData));
-      Object.assign($container.data().xuAttributes, klona.klona($div.data().xuAttributes));
+//       await iterate_child($div, nodeP, null, $div);
 
-      return await render_screen_type($div);
-    },
+//       if (_.isEmpty($container.data().xuAttributes)) {
+//         await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
+//       }
 
-    'xu-multi-view': async function () {
-      let $div = $container;
+//       // Copy xuData and xuAttributes
+//       Object.assign($container.data().xuData, _.cloneDeep($div.data().xuData));
+//       Object.assign($container.data().xuAttributes, klona.klona($div.data().xuAttributes));
 
-      const divXuData = $div.data().xuData;
-      if (!divXuData.node || !divXuData.node.children) {
-        divXuData.node = nodeP;
-      }
+//       return await render_screen_type($div);
+//     },
 
-      if (!divXuData.debug_info) {
-        divXuData.debug_info = {
-          id: nodeP.id,
-          parent_id: $container.data().xuData.ui_id,
-        };
-      }
+//     'xu-multi-view': async function () {
+//       let $div = $container;
 
-      const done = async function (continuous_idx) {
-        await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-        return await render_screen_type($div);
-      };
+//       const divXuData = $div.data().xuData;
+//       if (!divXuData.node || !divXuData.node.children) {
+//         divXuData.node = nodeP;
+//       }
 
-      if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
-        close_all_modals();
-      }
+//       if (!divXuData.debug_info) {
+//         divXuData.debug_info = {
+//           id: nodeP.id,
+//           parent_id: $container.data().xuData.ui_id,
+//         };
+//       }
 
-      const empty_result = async function () {
-        await func.events.validate(SESSION_ID, 'record_not_found', paramsP.dsSessionP);
-        return await done(null);
-      };
+//       const done = async function (continuous_idx) {
+//         await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
+//         return await render_screen_type($div);
+//       };
 
-      if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
-        return await empty_result();
-      }
+//       if (!REFRESHER_IN_PROGRESS && (paramsP.is_mobile_popover || paramsP.is_mobile_page)) {
+//         close_all_modals();
+//       }
 
-      for (const [key, val] of Object.entries(_ds.data_feed.rows)) {
-        const node = JSON.parse(JSON.stringify(nodeP));
-        _ds.currentRecordId = val._ROWID;
-        await iterate_child($div, node, { continuous_idx: null }, $root_container);
+//       const empty_result = async function () {
+//         await func.events.validate(SESSION_ID, 'record_not_found', paramsP.dsSessionP);
+//         return await done(null);
+//       };
 
-        if (_.isEmpty($container.data().xuAttributes)) {
-          await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
-        }
-      }
+//       if (!_ds.data_feed || _.isEmpty(_ds.data_feed.rows)) {
+//         return await empty_result();
+//       }
 
-      return await done(null);
-    },
+//       for (const [key, val] of Object.entries(_ds.data_feed.rows)) {
+//         const node = JSON.parse(JSON.stringify(nodeP));
+//         _ds.currentRecordId = val._ROWID;
+//         await iterate_child($div, node, { continuous_idx: null }, $root_container);
 
-    'xu-panel': async function () {
-      const done = async function ($new_div) {
-        if (!$container.data()?.xuData?.paramsP) {
-          return $container;
-        }
+//         if (_.isEmpty($container.data().xuAttributes)) {
+//           await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $container, true);
+//         }
+//       }
 
-        const $div_items = $div.data().xuData.node.children;
-        await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
-        $container.data().xuData.node.children = $div_items;
-        return $container;
-      };
+//       return await done(null);
+//     },
 
-      const $wrapper = $('<div>');
-      const $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, null, $wrapper, '');
+//     'xu-panel': async function () {
+//       const done = async function ($new_div) {
+//         if (!$container.data()?.xuData?.paramsP) {
+//           return $container;
+//         }
 
-      const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div.clone(true), true, undefined, refreshed_ds);
+//         const $div_items = $div.data().xuData.node.children;
+//         await func.UI.screen.panel_post_render_handler(SESSION_ID, $container, $new_div, nodeP, $div, jobNoP);
+//         $container.data().xuData.node.children = $div_items;
+//         return $container;
+//       };
 
-      if (ret.abort) {
-        return (ret.$new_div = $('<template>').append($div));
-      }
+//       const $wrapper = $('<div>');
+//       const $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, null, $wrapper, '');
 
-      let $ret_panel_div = ret.$new_div;
+//       const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div.clone(true), true, undefined, refreshed_ds);
 
-      if (!$ret_panel_div?.children()?.length && nodeP.children.length) {
-        $ret_panel_div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP.children[0], parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
-      }
+//       if (ret.abort) {
+//         return (ret.$new_div = $('<template>').append($div));
+//       }
 
-      return await done($ret_panel_div);
-    },
-  };
+//       let $ret_panel_div = ret.$new_div;
 
-  const draw_html_element = async function (element) {
-    const done = async function (ret = {}) {
-      const xu_ui_id = $div.attr('xu-ui-id');
-      $div.removeClass('display_none');
+//       if (!$ret_panel_div?.children()?.length && nodeP.children.length) {
+//         $ret_panel_div = await func.UI.screen.render_ui_tree(SESSION_ID, $container, nodeP.children[0], parent_infoP, paramsP, jobNoP, null, 0, null, nodeP, null, $root_container);
+//       }
 
-      if (ret.has_xu_exp_render_attribute) {
-        const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+//       return await done($ret_panel_div);
+//     },
+//   };
 
-        const _$div = $div.clone(true);
-        UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = {
-          $div: _$div,
-          paramsP,
-          data: _$div.data(),
-        };
+//   const draw_html_element = async function (element) {
+//     const done = async function (ret = {}) {
+//       const xu_ui_id = $div.attr('xu-ui-id');
+//       $div.removeClass('display_none');
 
-        nodeP.xu_render_xu_ui_id = xu_ui_id;
-        nodeP.xu_render_cache_id = xu_render_cache_id;
+//       if (ret.has_xu_exp_render_attribute) {
+//         const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
 
-        if (ret.xu_render_background_processing) {
-          temp_$div.remove();
-          return $div;
-        }
-        temp_$div.replaceWith($div);
-        return $div;
-      }
+//         const _$div = $div.clone(true);
+//         UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = {
+//           $div: _$div,
+//           paramsP,
+//           data: _$div.data(),
+//         };
 
-      if (ret.has_xu_render_attribute) {
-        temp_$div.remove();
-        return $div;
-      }
+//         nodeP.xu_render_xu_ui_id = xu_ui_id;
+//         nodeP.xu_render_cache_id = xu_render_cache_id;
 
-      temp_$div.replaceWith($div);
-      return $div;
-    };
+//         if (ret.xu_render_background_processing) {
+//           temp_$div.remove();
+//           return $div;
+//         }
+//         temp_$div.replaceWith($div);
+//         return $div;
+//       }
 
-    if (!element || element === 'script') return await done();
+//       if (ret.has_xu_render_attribute) {
+//         temp_$div.remove();
+//         return $div;
+//       }
 
-    const temp_$div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, '', true);
+//       temp_$div.replaceWith($div);
+//       return $div;
+//     };
 
-    const temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
-    const $div = temp_$div.clone(true);
+//     if (!element || element === 'script') return await done();
 
-    $div.hover(
-      (e) => hover_in($div, e),
-      (e) => hover_out(),
-    );
+//     const temp_$div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, '', true);
 
-    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-      $div.on('click contextmenu', (e) => hover_in($div, e));
-    }
+//     const temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
+//     const $div = temp_$div.clone(true);
 
-    const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+//     $div.hover(
+//       (e) => hover_in($div, e),
+//       (e) => hover_out(),
+//     );
 
-    if (ret.abort || nodeTag === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
-      return await done(ret);
-    }
+//     if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+//       $div.on('click contextmenu', (e) => hover_in($div, e));
+//     }
 
-    if (nodeP?.attributes?.['xu-viewport'] === 'true') {
-      const xu_viewport = function () {
-        const observer_inViewport = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                $(entry.target).trigger('inViewport');
-                observer_inViewport.unobserve(entry.target);
-              }
-            });
-          },
-          { threshold: 0.1 },
-        );
+//     const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
 
-        const observer_outViewport = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (!entry.isIntersecting) {
-                $(entry.target).trigger('outViewport');
-              }
-            });
-          },
-          { threshold: 0 },
-        );
+//     if (ret.abort || nodeTag === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+//       return await done(ret);
+//     }
 
-        let ui_job_id;
+//     if (nodeP?.attributes?.['xu-viewport'] === 'true') {
+//       const xu_viewport = function () {
+//         const observer_inViewport = new IntersectionObserver(
+//           (entries) => {
+//             entries.forEach((entry) => {
+//               if (entry.isIntersecting) {
+//                 $(entry.target).trigger('inViewport');
+//                 observer_inViewport.unobserve(entry.target);
+//               }
+//             });
+//           },
+//           { threshold: 0.1 },
+//         );
 
-        $div.on('inViewport', function () {
-          if ($div.children().length) {
-            $div.removeClass('skeleton');
-            return;
-          }
+//         const observer_outViewport = new IntersectionObserver(
+//           (entries) => {
+//             entries.forEach((entry) => {
+//               if (!entry.isIntersecting) {
+//                 $(entry.target).trigger('outViewport');
+//               }
+//             });
+//           },
+//           { threshold: 0 },
+//         );
 
-          hover_in($div);
-          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
-          observer_outViewport.observe($div[0]);
-        });
+//         let ui_job_id;
 
-        $div.on('outViewport', function () {
-          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+//         $div.on('inViewport', function () {
+//           if ($div.children().length) {
+//             $div.removeClass('skeleton');
+//             return;
+//           }
 
-          if ($div.children().length) {
-            $div.empty();
-            const height = $div?.data()?.xuData?.viewport_height || 10;
-            if (height !== undefined) {
-              $div.css('height', height);
-            }
-          }
-          observer_inViewport.observe($div[0]);
-        });
+//           hover_in($div);
+//           ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
+//           observer_outViewport.observe($div[0]);
+//         });
 
-        $div.addClass('skeleton');
-        observer_inViewport.observe($div[0]);
-      };
-      xu_viewport();
-    } else {
-      if (!ret.xu_render_background_processing) {
-        iterate_child($div, nodeP, parent_infoP, $root_container);
-      }
-    }
+//         $div.on('outViewport', function () {
+//           func.UI.worker.delete_job(SESSION_ID, ui_job_id);
 
-    return await done(ret);
-  };
+//           if ($div.children().length) {
+//             $div.empty();
+//             const height = $div?.data()?.xuData?.viewport_height || 10;
+//             if (height !== undefined) {
+//               $div.css('height', height);
+//             }
+//           }
+//           observer_inViewport.observe($div[0]);
+//         });
 
-  // Handle content attribute
-  if (nodeP.content && nodeP.attributes) {
-    nodeP.attributes['xu-content'] = nodeP.content;
-  }
+//         $div.addClass('skeleton');
+//         observer_inViewport.observe($div[0]);
+//       };
+//       xu_viewport();
+//     } else {
+//       if (!ret.xu_render_background_processing) {
+//         iterate_child($div, nodeP, parent_infoP, $root_container);
+//       }
+//     }
 
-  // Handle xu-widget
-  if (nodeTag === 'xu-widget') {
-    if (is_skeleton) return;
-    return await fx['widget']();
-  }
+//     return await done(ret);
+//   };
 
-  // Handle custom tags
-  if (fx[nodeTag]) {
-    return await fx[nodeTag]();
-  }
+//   // Handle content attribute
+//   if (nodeP.content && nodeP.attributes) {
+//     nodeP.attributes['xu-content'] = nodeP.content;
+//   }
 
-  // Old rendering path (when glb.new_xu_render is false)
-  const draw_html_element_org = async function (element) {
-    const done = async function (ret = {}) {
-      return $div;
-    };
+//   // Handle xu-widget
+//   if (nodeTag === 'xu-widget') {
+//     if (is_skeleton) return;
+//     return await fx['widget']();
+//   }
 
-    if (!element || element === 'script') return await done();
+//   // Handle custom tags
+//   if (fx[nodeTag]) {
+//     return await fx[nodeTag]();
+//   }
 
-    const $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, '');
+//   // Old rendering path (when glb.new_xu_render is false)
+//   const draw_html_element_org = async function (element) {
+//     const done = async function (ret = {}) {
+//       return $div;
+//     };
 
-    $div.hover(
-      (e) => hover_in($div, e),
-      (e) => hover_out(),
-    );
+//     if (!element || element === 'script') return await done();
 
-    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
-      $div.on('click contextmenu', (e) => hover_in($div, e));
-    }
+//     const $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, '');
 
-    const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+//     $div.hover(
+//       (e) => hover_in($div, e),
+//       (e) => hover_out(),
+//     );
 
-    if (ret.abort || nodeTag === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
-      return await done(ret);
-    }
+//     if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+//       $div.on('click contextmenu', (e) => hover_in($div, e));
+//     }
 
-    if (nodeP?.attributes?.['xu-viewport'] === 'true') {
-      const xu_viewport = function () {
-        const observer_inViewport = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                $(entry.target).trigger('inViewport');
-                observer_inViewport.unobserve(entry.target);
-              }
-            });
-          },
-          { threshold: 0.1 },
-        );
+//     const ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
 
-        const observer_outViewport = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (!entry.isIntersecting) {
-                $(entry.target).trigger('outViewport');
-              }
-            });
-          },
-          { threshold: 0 },
-        );
+//     if (ret.abort || nodeTag === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+//       return await done(ret);
+//     }
 
-        let ui_job_id;
+//     if (nodeP?.attributes?.['xu-viewport'] === 'true') {
+//       const xu_viewport = function () {
+//         const observer_inViewport = new IntersectionObserver(
+//           (entries) => {
+//             entries.forEach((entry) => {
+//               if (entry.isIntersecting) {
+//                 $(entry.target).trigger('inViewport');
+//                 observer_inViewport.unobserve(entry.target);
+//               }
+//             });
+//           },
+//           { threshold: 0.1 },
+//         );
 
-        $div.on('inViewport', function () {
-          if ($div.children().length) {
-            $div.removeClass('skeleton');
-            return;
-          }
+//         const observer_outViewport = new IntersectionObserver(
+//           (entries) => {
+//             entries.forEach((entry) => {
+//               if (!entry.isIntersecting) {
+//                 $(entry.target).trigger('outViewport');
+//               }
+//             });
+//           },
+//           { threshold: 0 },
+//         );
 
-          // hover_in($div);
-          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
-          observer_outViewport.observe($div[0]);
-        });
+//         let ui_job_id;
 
-        $div.on('outViewport', function () {
-          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+//         $div.on('inViewport', function () {
+//           if ($div.children().length) {
+//             $div.removeClass('skeleton');
+//             return;
+//           }
 
-          if ($div.children().length) {
-            $div.empty();
-            const height = $div?.data()?.xuData?.viewport_height || 10;
-            if (height !== undefined) {
-              $div.css('height', height);
-            }
-          }
-          observer_inViewport.observe($div[0]);
-        });
+//           // hover_in($div);
+//           ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container }, null, null, paramsP.dsSessionP);
+//           observer_outViewport.observe($div[0]);
+//         });
 
-        $div.addClass('skeleton');
-        observer_inViewport.observe($div[0]);
-      };
-      xu_viewport();
-    } else {
-      await iterate_child($div, nodeP, parent_infoP, $root_container);
-    }
+//         $div.on('outViewport', function () {
+//           func.UI.worker.delete_job(SESSION_ID, ui_job_id);
 
-    return await done(ret);
-  };
+//           if ($div.children().length) {
+//             $div.empty();
+//             const height = $div?.data()?.xuData?.viewport_height || 10;
+//             if (height !== undefined) {
+//               $div.css('height', height);
+//             }
+//           }
+//           observer_inViewport.observe($div[0]);
+//         });
 
-  // Render HTML element
-  if (!glb.new_xu_render) {
-    return await draw_html_element_org(nodeTag);
-  }
-  return await draw_html_element(nodeTag);
-};
+//         $div.addClass('skeleton');
+//         observer_inViewport.observe($div[0]);
+//       };
+//       xu_viewport();
+//     } else {
+//       await iterate_child($div, nodeP, parent_infoP, $root_container);
+//     }
+
+//     return await done(ret);
+//   };
+
+//   // Render HTML element
+//   if (!glb.new_xu_render) {
+//     return await draw_html_element_org(nodeTag);
+//   }
+//   return await draw_html_element(nodeTag);
+// };
 
 func.UI.screen.refresh_document_changes_for_realtime_update = async function (SESSION_ID, doc_change) {
   let _session = SESSION_OBJ[SESSION_ID];