@xuda.io/runtime-bundle 1.0.1436 → 1.0.1438

package/js/xuda-runtime-slim.js

@@ -1779,7 +1779,30 @@ func.runtime.platform.emit = function (name, data) {
 };
 
 // ── Platform helpers for DOM-independent resource loading ──
-func.runtime.platform.load_script = function (url, type, callback) {
+func.runtime.platform.apply_element_attributes = function (node, attributes, excluded_keys = []) {
+  if (!node?.setAttribute || !attributes) {
+    return node;
+  }
+
+  const excluded = new Set(excluded_keys || []);
+  const attr_keys = Object.keys(attributes);
+  for (let index = 0; index < attr_keys.length; index++) {
+    const key = attr_keys[index];
+    if (!key || excluded.has(key)) {
+      continue;
+    }
+
+    const value = attributes[key];
+    if (value === false || typeof value === 'undefined') {
+      continue;
+    }
+
+    node.setAttribute(key, value === null ? '' : `${value}`);
+  }
+
+  return node;
+};
+func.runtime.platform.load_script = function (url, type, callback, attributes) {
   const doc = func.runtime.platform.get_document();
   if (!doc?.createElement || !doc?.head?.appendChild) {
     if (callback) {
@@ -1787,19 +1810,63 @@ func.runtime.platform.load_script = function (url, type, callback) {
     }
     return;
   }
+  const find_existing_script = function () {
+    const asset_key = attributes?.['data-xuda-asset-key'];
+    const scripts = doc.querySelectorAll ? Array.from(doc.querySelectorAll('script')) : [];
+    return scripts.find(function (script) {
+      if (asset_key && script.getAttribute('data-xuda-asset-key') === asset_key) {
+        return true;
+      }
+      return !!(url && script.getAttribute('src') === url);
+    }) || null;
+  };
+
+  const existing_script = find_existing_script();
+  if (existing_script) {
+    if (callback) {
+      if (existing_script.getAttribute('data-xuda-loaded') === 'true' || !url) {
+        callback();
+      } else {
+        existing_script.addEventListener('load', callback, { once: true });
+        existing_script.addEventListener('error', callback, { once: true });
+      }
+    }
+    return existing_script;
+  }
+
   const script = doc.createElement('script');
   script.src = url;
   if (type) script.type = type;
-  script.onload = callback;
+  func.runtime.platform.apply_element_attributes(script, attributes, ['src', 'type']);
+  script.onload = function () {
+    script.setAttribute('data-xuda-loaded', 'true');
+    if (callback) {
+      callback();
+    }
+  };
+  script.onerror = function () {
+    if (callback) {
+      callback();
+    }
+  };
   doc.head.appendChild(script);
+  return script;
 };
-func.runtime.platform.load_css = function (href) {
+func.runtime.platform.load_css = function (href, attributes) {
   const doc = func.runtime.platform.get_document();
   if (!doc?.createElement || !doc?.head) {
     return;
   }
   try {
-    if (doc.querySelector('link[href="' + href + '"]')) return;
+    const asset_key = attributes?.['data-xuda-asset-key'];
+    const existing_links = doc.querySelectorAll ? Array.from(doc.querySelectorAll('link')) : [];
+    const existing = existing_links.find(function (link) {
+      if (asset_key && link.getAttribute('data-xuda-asset-key') === asset_key) {
+        return true;
+      }
+      return !!(href && link.getAttribute('href') === href);
+    });
+    if (existing) return existing;
   } catch (err) {
     return;
   }
@@ -1807,7 +1874,9 @@ func.runtime.platform.load_css = function (href) {
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.href = href;
+  func.runtime.platform.apply_element_attributes(link, attributes, ['href']);
   doc.head.insertBefore(link, doc.head.firstChild);
+  return link;
 };
 func.runtime.platform.remove_js_css = function (filename, filetype) {
   const doc = func.runtime.platform.get_document();
@@ -1841,6 +1910,128 @@ func.runtime.platform.set_cursor = function (element, cursor) {
     node.style.cursor = cursor;
   }
 };
+func.runtime.program.normalize_doc_for_runtime = function (doc) {
+  if (!doc || doc.__xudaRuntimeNormalized || !Array.isArray(doc.progUi) || !doc.progUi.length) {
+    return doc;
+  }
+
+  const normalize_tag_name = function (tag_name) {
+    return `${tag_name || ''}`.trim().toLowerCase();
+  };
+  const merge_attributes = function (target, source) {
+    const merged = { ...(target || {}) };
+    const source_attributes = source || {};
+    const keys = Object.keys(source_attributes);
+
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      const value = source_attributes[key];
+      if (typeof value === 'undefined') {
+        continue;
+      }
+
+      if (key === 'class' && merged.class && value) {
+        const next_value = `${merged.class} ${value}`.trim();
+        merged.class = Array.from(new Set(next_value.split(/\s+/).filter(Boolean))).join(' ');
+        continue;
+      }
+
+      if (key === 'style' && merged.style && value) {
+        merged.style = `${merged.style}; ${value}`.trim();
+        continue;
+      }
+
+      if (typeof merged[key] === 'undefined') {
+        merged[key] = value;
+      }
+    }
+
+    return merged;
+  };
+  const normalize_nodes = function (nodes, state) {
+    const normalized_nodes = [];
+
+    for (let index = 0; index < (nodes || []).length; index++) {
+      const node = nodes[index];
+      if (!node || typeof node !== 'object') {
+        continue;
+      }
+
+      const tag_name = normalize_tag_name(node.tagName);
+
+      if (tag_name === '!doctype') {
+        state.changed = true;
+        continue;
+      }
+
+      if (tag_name === 'html') {
+        state.changed = true;
+        state.root_attributes = merge_attributes(state.root_attributes, node.attributes);
+        normalized_nodes.push.apply(normalized_nodes, normalize_nodes(node.children, state));
+        continue;
+      }
+
+      if (tag_name === 'head') {
+        state.changed = true;
+        normalized_nodes.push.apply(normalized_nodes, normalize_nodes(node.children, state));
+        continue;
+      }
+
+      if (tag_name === 'body') {
+        state.changed = true;
+        state.root_attributes = merge_attributes(state.root_attributes, node.attributes);
+        normalized_nodes.push.apply(normalized_nodes, normalize_nodes(node.children, state));
+        continue;
+      }
+
+      let next_node = node;
+      if (Array.isArray(node.children) && node.children.length) {
+        const next_children = normalize_nodes(node.children, state);
+        if (next_children !== node.children) {
+          next_node = {
+            ...node,
+            children: next_children,
+          };
+          state.changed = true;
+        }
+      }
+
+      normalized_nodes.push(next_node);
+    }
+
+    return normalized_nodes;
+  };
+
+  const [root_node, ...extra_nodes] = doc.progUi;
+  if (!root_node || typeof root_node !== 'object') {
+    return doc;
+  }
+
+  const state = {
+    changed: false,
+    root_attributes: {},
+  };
+
+  const normalized_children = normalize_nodes([...(root_node.children || []), ...extra_nodes], state);
+  const merged_attributes = merge_attributes(root_node.attributes, state.root_attributes);
+
+  if (!state.changed && !Object.keys(state.root_attributes).length) {
+    doc.__xudaRuntimeNormalized = true;
+    return doc;
+  }
+
+  return {
+    ...doc,
+    __xudaRuntimeNormalized: true,
+    progUi: [
+      {
+        ...root_node,
+        attributes: merged_attributes,
+        children: normalized_children,
+      },
+    ],
+  };
+};
 
 func.runtime.env = {
   get_url_params: function () {
@@ -2098,6 +2289,147 @@ func.runtime.workers.delete_promise = function (SESSION_ID, worker_id, promise_q
   delete registry_entry.promise_queue[promise_queue_id];
   return true;
 };
+func.runtime.render.clone_runtime_options = function (value) {
+  if (typeof structuredClone === 'function') {
+    try {
+      return structuredClone(value);
+    } catch (_) {}
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      return func.runtime.render.clone_runtime_options(item);
+    });
+  }
+
+  if (value && typeof value === 'object') {
+    const cloned = {};
+    const keys = Object.keys(value);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      cloned[key] = func.runtime.render.clone_runtime_options(value[key]);
+    }
+    return cloned;
+  }
+
+  return value;
+};
+func.runtime.render.normalize_runtime_bootstrap = function (raw_options = {}) {
+  const options = raw_options || {};
+  let app_computing_mode = options.app_computing_mode || '';
+  let app_render_mode = options.app_render_mode || '';
+  let app_client_activation = options.app_client_activation || '';
+  let ssr_payload = options.ssr_payload || null;
+
+  if (typeof ssr_payload === 'string') {
+    try {
+      ssr_payload = JSON.parse(ssr_payload);
+    } catch (_) {
+      ssr_payload = null;
+    }
+  }
+
+  if (ssr_payload && typeof ssr_payload === 'object') {
+    ssr_payload = func.runtime.render.clone_runtime_options(ssr_payload);
+  }
+
+  if (!app_computing_mode) {
+    if (app_render_mode === 'ssr_first_page' || app_render_mode === 'ssr_full') {
+      app_computing_mode = 'server';
+    } else {
+      app_computing_mode = 'main';
+    }
+  }
+
+  switch (app_computing_mode) {
+    case 'main':
+      app_render_mode = 'csr';
+      app_client_activation = 'none';
+      break;
+
+    case 'worker':
+      app_render_mode = 'csr';
+      app_client_activation = 'none';
+      break;
+
+    default:
+      app_computing_mode = 'server';
+      if (app_render_mode !== 'ssr_full') {
+        app_render_mode = 'ssr_first_page';
+      }
+      app_client_activation = app_render_mode === 'ssr_full' ? 'hydrate' : 'takeover';
+      break;
+  }
+
+  if (ssr_payload && typeof ssr_payload === 'object') {
+    if (!ssr_payload.app_render_mode) {
+      ssr_payload.app_render_mode = app_render_mode;
+    }
+    if (!ssr_payload.app_client_activation) {
+      ssr_payload.app_client_activation = app_client_activation;
+    }
+    if (!ssr_payload.app_computing_mode) {
+      ssr_payload.app_computing_mode = app_computing_mode;
+    }
+  }
+
+  return {
+    app_computing_mode,
+    app_render_mode,
+    app_client_activation,
+    ssr_payload,
+  };
+};
+func.runtime.render.apply_runtime_bootstrap_defaults = function (target = {}) {
+  const normalized = func.runtime.render.normalize_runtime_bootstrap(target);
+  target.app_computing_mode = normalized.app_computing_mode;
+  target.app_render_mode = normalized.app_render_mode;
+  target.app_client_activation = normalized.app_client_activation;
+  target.ssr_payload = normalized.ssr_payload;
+  return normalized;
+};
+func.runtime.render.is_server_render_mode = function (target = {}) {
+  const normalized = func.runtime.render.normalize_runtime_bootstrap(target?.opt || target);
+  return normalized.app_computing_mode === 'server' && normalized.app_render_mode !== 'csr';
+};
+func.runtime.render.is_takeover_mode = function (target = {}) {
+  const normalized = func.runtime.render.normalize_runtime_bootstrap(target?.opt || target);
+  return normalized.app_client_activation === 'takeover';
+};
+func.runtime.render.is_hydration_mode = function (target = {}) {
+  const normalized = func.runtime.render.normalize_runtime_bootstrap(target?.opt || target);
+  return normalized.app_client_activation === 'hydrate';
+};
+func.runtime.render.get_ssr_payload = function (target = {}) {
+  if (target?.opt?.ssr_payload) {
+    return target.opt.ssr_payload;
+  }
+  if (target?.ssr_payload) {
+    return target.ssr_payload;
+  }
+  const win = func.runtime.platform.get_window();
+  return win?.__XUDA_SSR__ || null;
+};
+func.runtime.render.should_use_ssr_payload = function (SESSION_ID, paramsP) {
+  const session = SESSION_OBJ?.[SESSION_ID];
+  const payload = func.runtime.render.get_ssr_payload(session);
+  if (!payload || payload._consumed) {
+    return false;
+  }
+  if (paramsP?.prog_id && payload.prog_id && payload.prog_id !== paramsP.prog_id) {
+    return false;
+  }
+  return true;
+};
+func.runtime.render.mark_ssr_payload_consumed = function (SESSION_ID) {
+  const session = SESSION_OBJ?.[SESSION_ID];
+  const payload = func.runtime.render.get_ssr_payload(session);
+  if (!payload || typeof payload !== 'object') {
+    return false;
+  }
+  payload._consumed = true;
+  return true;
+};
 func.runtime.render.get_root_data_system = function (SESSION_ID) {
   return SESSION_OBJ[SESSION_ID]?.DS_GLB?.[0]?.data_system || null;
 };
@@ -2501,10 +2833,10 @@ func.runtime.resources.load_cdn = async function (SESSION_ID, resource) {
           await func.utils.load_js_on_demand(normalized_resource.src);
           break;
         case 'css':
-          await func.utils.load_js_on_demand(normalized_resource.src);
+          func.runtime.platform.load_css(normalized_resource.src);
           break;
         case 'module':
-          func.utils.load_js_on_demand(normalized_resource.src, 'module');
+          await func.utils.load_js_on_demand(normalized_resource.src, 'module');
           break;
         default:
           await func.utils.load_js_on_demand(normalized_resource.src);
@@ -3840,7 +4172,692 @@ func.common.fastHash = function (inputString) {
   return ((hash >>> 0).toString(36) + '0000000000').slice(0, 10);
 };
 
-glb.new_xu_render = false;
+glb.new_xu_render = false;
+ func.runtime = func.runtime || {};
+func.runtime.ui = func.runtime.ui || {};
+func.runtime.render = func.runtime.render || {};
+func.runtime.widgets = func.runtime.widgets || {};
+
+// Shared render-tree contract helpers live here so browser and headless runtimes can resolve the same UI structure.
+
+func.runtime.render.TREE_CONTRACT_VERSION = func.runtime.render.TREE_CONTRACT_VERSION || 'xuda.render_tree.v1';
+func.runtime.render._tree_widget_capability_cache = func.runtime.render._tree_widget_capability_cache || {};
+
+func.runtime.render.safe_clone_tree_value = function (value) {
+  if (typeof structuredClone === 'function') {
+    try {
+      return structuredClone(value);
+    } catch (_) {
+      // Fall through to the recursive clone below.
+    }
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      return func.runtime.render.safe_clone_tree_value(item);
+    });
+  }
+
+  if (value && typeof value === 'object') {
+    const cloned = {};
+    const keys = Object.keys(value);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      cloned[key] = func.runtime.render.safe_clone_tree_value(value[key]);
+    }
+    return cloned;
+  }
+
+  return value;
+};
+func.runtime.render.sort_tree_debug_value = function (value) {
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      return func.runtime.render.sort_tree_debug_value(item);
+    });
+  }
+
+  if (value && typeof value === 'object') {
+    const sorted = {};
+    const keys = Object.keys(value).sort();
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      sorted[key] = func.runtime.render.sort_tree_debug_value(value[key]);
+    }
+    return sorted;
+  }
+
+  return value;
+};
+func.runtime.render.is_tree_node = function (nodeP) {
+  return !!nodeP?.contract && nodeP.contract === func.runtime.render.TREE_CONTRACT_VERSION;
+};
+func.runtime.render.get_tree_source_node = function (nodeP) {
+  if (!func.runtime.render.is_tree_node(nodeP)) {
+    return nodeP || null;
+  }
+  return nodeP?.meta?.source_node || null;
+};
+func.runtime.render.get_tree_source_snapshot = function (nodeP) {
+  if (!func.runtime.render.is_tree_node(nodeP)) {
+    return func.runtime.render.safe_clone_tree_value(nodeP);
+  }
+  return nodeP?.meta?.source_snapshot || null;
+};
+func.runtime.render.get_tree_node_kind = function (nodeP) {
+  const tag_name = typeof nodeP?.tagName === 'string' ? nodeP.tagName.toLowerCase() : '';
+  const node_type = typeof nodeP?.type === 'string' ? nodeP.type.toLowerCase() : '';
+
+  if (tag_name === 'xu-widget') return 'widget';
+  if (tag_name === 'xu-single-view') return 'single_view';
+  if (tag_name === 'xu-multi-view') return 'multi_view';
+  if (tag_name === 'xu-panel') return 'panel';
+  if (tag_name === 'xu-teleport') return 'teleport';
+  if (tag_name === 'xurender') return 'placeholder';
+  if (tag_name === '#text' || node_type === 'text') return 'text';
+  if (!tag_name && typeof nodeP?.content === 'string' && !Array.isArray(nodeP?.children)) return 'text';
+  return 'element';
+};
+func.runtime.render.get_tree_node_id = function (nodeP, pathP) {
+  if (nodeP?.id) {
+    return nodeP.id;
+  }
+  if (nodeP?.id_org) {
+    return nodeP.id_org;
+  }
+  const normalized_path = Array.isArray(pathP) && pathP.length ? pathP.join('.') : 'root';
+  return `tree-node-${normalized_path}`;
+};
+func.runtime.render.get_tree_controls = function (attributes) {
+  const attrs = attributes || {};
+  const get_first_defined = function (keys) {
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      if (Object.prototype.hasOwnProperty.call(attrs, key)) {
+        return attrs[key];
+      }
+    }
+    return null;
+  };
+  return {
+    xu_for: get_first_defined(['xu-for', 'xu-exp:xu-for']),
+    xu_if: get_first_defined(['xu-if', 'xu-exp:xu-if']),
+    xu_render: get_first_defined(['xu-render', 'xu-exp:xu-render']),
+  };
+};
+func.runtime.render.get_tree_node_capabilities = async function (options) {
+  const attributes = options?.attributes || {};
+  const plugin_name = attributes['xu-widget'];
+  if (!plugin_name) {
+    return null;
+  }
+
+  const cache = func.runtime.render._tree_widget_capability_cache;
+  if (cache[plugin_name]) {
+    return func.runtime.render.safe_clone_tree_value(cache[plugin_name]);
+  }
+
+  let capabilities = {
+    browser: true,
+    headless: false,
+  };
+
+  try {
+    if (options.SESSION_ID && options.paramsP && func.runtime.widgets?.create_context && func.runtime.widgets?.get_definition) {
+      const widget_context = func.runtime.widgets.create_context(options.SESSION_ID, options.paramsP, attributes);
+      const definition = await func.runtime.widgets.get_definition(widget_context);
+      capabilities = func.runtime.widgets.normalize_capabilities(definition);
+    }
+  } catch (_) {
+    // Keep the safe browser-only default when the widget definition is unavailable.
+  }
+
+  cache[plugin_name] = capabilities;
+  return func.runtime.render.safe_clone_tree_value(capabilities);
+};
+func.runtime.render.ensure_tree_node = async function (options) {
+  if (!options?.nodeP) {
+    return null;
+  }
+  if (func.runtime.render.is_tree_node(options.nodeP)) {
+    return options.nodeP;
+  }
+  return await func.runtime.render.build_tree(options);
+};
+func.runtime.render.build_tree = async function (options) {
+  if (Array.isArray(options?.nodeP)) {
+    return await func.runtime.render.build_tree_list({
+      ...options,
+      nodesP: options.nodeP,
+    });
+  }
+
+  const nodeP = options?.nodeP;
+  if (!nodeP) {
+    return null;
+  }
+  if (func.runtime.render.is_tree_node(nodeP)) {
+    return nodeP;
+  }
+
+  const pathP = Array.isArray(options?.pathP) ? options.pathP.slice() : [];
+  const tree_path = pathP.length ? pathP.slice() : [0];
+  const attributes = func.runtime.render.safe_clone_tree_value(nodeP.attributes || {});
+  if (typeof nodeP.content !== 'undefined' && typeof attributes['xu-content'] === 'undefined') {
+    attributes['xu-content'] = func.runtime.render.safe_clone_tree_value(nodeP.content);
+  }
+
+  const widget_capabilities = await func.runtime.render.get_tree_node_capabilities({
+    SESSION_ID: options?.SESSION_ID,
+    paramsP: options?.paramsP,
+    attributes,
+  });
+  const children = [];
+  const child_nodes = Array.isArray(nodeP.children) ? nodeP.children : [];
+  const parent_tree_id = tree_path.join('.');
+
+  for (let index = 0; index < child_nodes.length; index++) {
+    const child_tree = await func.runtime.render.build_tree({
+      ...options,
+      nodeP: child_nodes[index],
+      pathP: tree_path.concat(index),
+      parent_tree_id: parent_tree_id,
+      keyP: index,
+      parent_nodeP: nodeP,
+    });
+    if (child_tree) {
+      children.push(child_tree);
+    }
+  }
+
+  const tree = {
+    contract: func.runtime.render.TREE_CONTRACT_VERSION,
+    id: func.runtime.render.get_tree_node_id(nodeP, tree_path),
+    xu_tree_id: `tree.${tree_path.join('.')}`,
+    kind: func.runtime.render.get_tree_node_kind(nodeP),
+    tagName: nodeP.tagName || null,
+    attributes,
+    text: typeof nodeP.text !== 'undefined' ? func.runtime.render.safe_clone_tree_value(nodeP.text) : null,
+    content: typeof nodeP.content !== 'undefined' ? func.runtime.render.safe_clone_tree_value(nodeP.content) : null,
+    children,
+    meta: {
+      tree_id: tree_path.join('.'),
+      path: tree_path,
+      parent_tree_id: options?.parent_tree_id || null,
+      key: typeof options?.keyP === 'undefined' ? null : options.keyP,
+      recordid: nodeP?.recordid || null,
+      dependency_fields: func.runtime.render.safe_clone_tree_value(nodeP?.dependency_fields || null),
+      iterate_info: func.runtime.render.safe_clone_tree_value(options?.parent_infoP?.iterate_info || nodeP?.iterate_info || null),
+      controls: func.runtime.render.get_tree_controls(attributes),
+      capabilities: widget_capabilities,
+      widget: attributes['xu-widget']
+        ? {
+            plugin_name: attributes['xu-widget'],
+            method: attributes['xu-method'] || '_default',
+            capabilities: widget_capabilities,
+          }
+        : null,
+      source_node_id: nodeP?.id || nodeP?.id_org || null,
+      source_node: nodeP,
+      source_snapshot: func.runtime.ui?.get_node_snapshot
+        ? func.runtime.ui.get_node_snapshot(nodeP)
+        : func.runtime.render.safe_clone_tree_value(nodeP),
+    },
+  };
+
+  return tree;
+};
+func.runtime.render.build_tree_list = async function (options) {
+  const nodes = Array.isArray(options?.nodesP) ? options.nodesP : [];
+  const trees = [];
+
+  for (let index = 0; index < nodes.length; index++) {
+    const tree = await func.runtime.render.build_tree({
+      ...options,
+      nodeP: nodes[index],
+      pathP: Array.isArray(options?.pathP) && options.pathP.length ? options.pathP.concat(index) : [index],
+      keyP: index,
+    });
+    if (tree) {
+      trees.push(tree);
+    }
+  }
+
+  return trees;
+};
+func.runtime.render.sanitize_tree_for_debug = function (treeP) {
+  if (Array.isArray(treeP)) {
+    return treeP.map(function (child) {
+      return func.runtime.render.sanitize_tree_for_debug(child);
+    });
+  }
+
+  if (!func.runtime.render.is_tree_node(treeP)) {
+    return func.runtime.render.sort_tree_debug_value(func.runtime.render.safe_clone_tree_value(treeP));
+  }
+
+  return {
+    contract: treeP.contract,
+    id: treeP.id,
+    xu_tree_id: treeP.xu_tree_id || null,
+    kind: treeP.kind,
+    tagName: treeP.tagName,
+    attributes: func.runtime.render.sort_tree_debug_value(treeP.attributes || {}),
+    text: treeP.text,
+    content: treeP.content,
+    children: treeP.children.map(function (child) {
+      return func.runtime.render.sanitize_tree_for_debug(child);
+    }),
+    meta: {
+      tree_id: treeP.meta?.tree_id || null,
+      path: func.runtime.render.safe_clone_tree_value(treeP.meta?.path || []),
+      parent_tree_id: treeP.meta?.parent_tree_id || null,
+      key: typeof treeP.meta?.key === 'undefined' ? null : treeP.meta.key,
+      recordid: treeP.meta?.recordid || null,
+      dependency_fields: func.runtime.render.sort_tree_debug_value(treeP.meta?.dependency_fields || null),
+      iterate_info: func.runtime.render.sort_tree_debug_value(treeP.meta?.iterate_info || null),
+      controls: func.runtime.render.sort_tree_debug_value(treeP.meta?.controls || null),
+      capabilities: func.runtime.render.sort_tree_debug_value(treeP.meta?.capabilities || null),
+      widget: treeP.meta?.widget
+        ? {
+            plugin_name: treeP.meta.widget.plugin_name,
+            method: treeP.meta.widget.method,
+            capabilities: func.runtime.render.sort_tree_debug_value(treeP.meta.widget.capabilities || null),
+          }
+        : null,
+      source_node_id: treeP.meta?.source_node_id || null,
+    },
+  };
+};
+func.runtime.render.serialize_tree = function (treeP, spacing = 2) {
+  return JSON.stringify(func.runtime.render.sanitize_tree_for_debug(treeP), null, spacing);
+};
+ func.runtime = func.runtime || {};
+func.runtime.ui = func.runtime.ui || {};
+func.runtime.render = func.runtime.render || {};
+func.runtime.widgets = func.runtime.widgets || {};
+
+// Shared string-renderer helpers live here so headless/server runtimes can materialize the render tree without a DOM.
+
+func.runtime.render.HTML_VOID_TAGS = func.runtime.render.HTML_VOID_TAGS || {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+};
+func.runtime.render.escape_html = function (value) {
+  return `${value ?? ''}`
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;');
+};
+func.runtime.render.escape_html_attribute = function (value) {
+  return func.runtime.render.escape_html(value);
+};
+func.runtime.render.is_html_void_tag = function (tag_name) {
+  return !!func.runtime.render.HTML_VOID_TAGS[(tag_name || '').toLowerCase()];
+};
+func.runtime.render.is_falsey_render_value = function (value) {
+  if (value === false || value === null || typeof value === 'undefined') {
+    return true;
+  }
+  if (typeof value === 'number') {
+    return value === 0;
+  }
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase();
+    return normalized === '' || normalized === 'false' || normalized === '0' || normalized === 'null' || normalized === 'undefined' || normalized === 'off' || normalized === 'no';
+  }
+  return false;
+};
+func.runtime.render.should_render_tree_node = function (treeP) {
+  const controls = treeP?.meta?.controls || {};
+  if (controls.xu_if !== null && controls.xu_if !== undefined && func.runtime.render.is_falsey_render_value(controls.xu_if)) {
+    return false;
+  }
+  if (controls.xu_render !== null && controls.xu_render !== undefined && func.runtime.render.is_falsey_render_value(controls.xu_render)) {
+    return false;
+  }
+  return true;
+};
+func.runtime.render.is_tree_control_attribute = function (key) {
+  if (!key) {
+    return false;
+  }
+  return (
+    key.startsWith('xu-exp:') ||
+    key === 'xu-widget' ||
+    key === 'xu-method' ||
+    key === 'xu-for' ||
+    key === 'xu-for-key' ||
+    key === 'xu-for-val' ||
+    key === 'xu-if' ||
+    key === 'xu-render' ||
+    key === 'xu-bind' ||
+    key === 'xu-content' ||
+    key === 'xu-text' ||
+    key === 'xu-html' ||
+    key === 'xu-show' ||
+    key === 'xu-panel-program' ||
+    key === 'xu-teleport'
+  );
+};
+func.runtime.render.get_string_renderer_tag_name = function (treeP) {
+  switch (treeP?.kind) {
+    case 'widget':
+    case 'single_view':
+    case 'multi_view':
+    case 'panel':
+    case 'teleport':
+      return 'div';
+    case 'placeholder':
+      return null;
+    case 'text':
+      return null;
+    default:
+      return treeP?.tagName || 'div';
+  }
+};
+func.runtime.render.get_tree_terminal_content = function (treeP) {
+  const attributes = treeP?.attributes || {};
+  if (typeof attributes['xu-html'] !== 'undefined' && attributes['xu-html'] !== null) {
+    return {
+      value: `${attributes['xu-html']}`,
+      mode: 'html',
+    };
+  }
+  if (typeof attributes['xu-content'] !== 'undefined' && attributes['xu-content'] !== null) {
+    return {
+      value: `${attributes['xu-content']}`,
+      mode: 'html',
+    };
+  }
+  if (typeof attributes['xu-text'] !== 'undefined' && attributes['xu-text'] !== null) {
+    return {
+      value: `${attributes['xu-text']}`,
+      mode: 'text',
+    };
+  }
+  if (treeP?.kind === 'text') {
+    return {
+      value: typeof treeP?.text !== 'undefined' && treeP?.text !== null ? `${treeP.text}` : `${treeP?.content || ''}`,
+      mode: 'text',
+    };
+  }
+  return null;
+};
+func.runtime.render.render_tree_terminal_content = function (treeP) {
+  const terminal = func.runtime.render.get_tree_terminal_content(treeP);
+  if (!terminal) {
+    return null;
+  }
+  if (terminal.mode === 'html') {
+    return terminal.value;
+  }
+  return func.runtime.render.escape_html(terminal.value);
+};
+func.runtime.render.get_widget_fallback_markup = function (treeP) {
+  const widget_meta = treeP?.meta?.widget || {};
+  const capability_state = widget_meta?.capabilities?.headless ? 'headless-capable' : 'browser-only';
+  return `<!--xuda-widget:${func.runtime.render.escape_html(widget_meta.plugin_name || 'unknown')}:${capability_state}-->`;
+};
+func.runtime.render.get_tree_string_attributes = function (treeP, renderer_context) {
+  const attributes = func.runtime.render.safe_clone_tree_value(treeP?.attributes || {});
+  const attr_pairs = [];
+  const keys = Object.keys(attributes);
+
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    if (func.runtime.render.is_tree_control_attribute(key)) {
+      continue;
+    }
+    const value = attributes[key];
+    if (value === false || value === null || typeof value === 'undefined') {
+      continue;
+    }
+    if (value === true) {
+      attr_pairs.push(key);
+      continue;
+    }
+    const normalized_value = typeof value === 'object' ? JSON.stringify(value) : `${value}`;
+    attr_pairs.push(`${key}="${func.runtime.render.escape_html_attribute(normalized_value)}"`);
+  }
+
+  attr_pairs.push(`data-xuda-kind="${func.runtime.render.escape_html_attribute(treeP?.kind || 'element')}"`);
+  attr_pairs.push(`data-xuda-node-id="${func.runtime.render.escape_html_attribute(treeP?.id || treeP?.meta?.source_node_id || '')}"`);
+  attr_pairs.push(`data-xuda-tree-id="${func.runtime.render.escape_html_attribute(treeP?.meta?.tree_id || '')}"`);
+
+  if (treeP?.kind === 'widget' && treeP?.meta?.widget) {
+    attr_pairs.push(`data-xuda-widget="${func.runtime.render.escape_html_attribute(treeP.meta.widget.plugin_name || '')}"`);
+    attr_pairs.push(`data-xuda-widget-method="${func.runtime.render.escape_html_attribute(treeP.meta.widget.method || '_default')}"`);
+    attr_pairs.push(`data-xuda-widget-capability="${func.runtime.render.escape_html_attribute(treeP.meta.widget.capabilities?.headless ? 'headless' : 'browser')}"`);
+  }
+
+  if (treeP?.kind === 'teleport' && treeP?.attributes?.['xu-teleport']) {
+    attr_pairs.push(`data-xuda-teleport-target="${func.runtime.render.escape_html_attribute(treeP.attributes['xu-teleport'])}"`);
+  }
+
+  if ((treeP?.meta?.controls?.xu_for !== null && treeP?.meta?.controls?.xu_for !== undefined) && !renderer_context?.strip_iteration_markers) {
+    attr_pairs.push('data-xuda-xu-for="pending"');
+  }
+
+  return attr_pairs.length ? ' ' + attr_pairs.join(' ') : '';
+};
+func.runtime.render.render_tree_children_to_string = async function (treeP, renderer_context) {
+  if (!Array.isArray(treeP?.children) || !treeP.children.length) {
+    return '';
+  }
+  let html = '';
+  for (let index = 0; index < treeP.children.length; index++) {
+    html += await func.runtime.render.render_tree_to_string(treeP.children[index], {
+      ...renderer_context,
+      parent_tree: treeP,
+    });
+  }
+  return html;
+};
+func.runtime.render.render_tree_to_string = async function (treeP, renderer_context = {}) {
+  if (!treeP) {
+    return '';
+  }
+  if (Array.isArray(treeP)) {
+    let html = '';
+    for (let index = 0; index < treeP.length; index++) {
+      html += await func.runtime.render.render_tree_to_string(treeP[index], renderer_context);
+    }
+    return html;
+  }
+
+  const ensured_tree = await func.runtime.render.ensure_tree_node({
+    SESSION_ID: renderer_context?.SESSION_ID,
+    nodeP: treeP,
+    paramsP: renderer_context?.paramsP,
+    parent_infoP: renderer_context?.parent_infoP,
+    keyP: renderer_context?.keyP,
+    parent_nodeP: renderer_context?.parent_nodeP,
+  });
+
+  if (!ensured_tree || !func.runtime.render.should_render_tree_node(ensured_tree)) {
+    return '';
+  }
+
+  if (ensured_tree.kind === 'placeholder') {
+    if (renderer_context?.include_placeholders) {
+      return `<!--xuda-placeholder:${func.runtime.render.escape_html(ensured_tree.id || '')}-->`;
+    }
+    return '';
+  }
+
+  if (ensured_tree.kind === 'text') {
+    return func.runtime.render.render_tree_terminal_content(ensured_tree) || '';
+  }
+
+  const tag_name = func.runtime.render.get_string_renderer_tag_name(ensured_tree);
+  if (!tag_name || tag_name.toLowerCase() === 'script') {
+    return '';
+  }
+
+  const attributes = func.runtime.render.get_tree_string_attributes(ensured_tree, renderer_context);
+  const terminal_content = func.runtime.render.render_tree_terminal_content(ensured_tree);
+  let children_html = terminal_content !== null ? terminal_content : await func.runtime.render.render_tree_children_to_string(ensured_tree, renderer_context);
+
+  if (ensured_tree.kind === 'widget' && !children_html) {
+    children_html = func.runtime.render.get_widget_fallback_markup(ensured_tree);
+  }
+
+  if (func.runtime.render.is_html_void_tag(tag_name)) {
+    return `<${tag_name}${attributes}>`;
+  }
+
+  return `<${tag_name}${attributes}>${children_html}</${tag_name}>`;
+};
+func.runtime.render.render_to_string = async function (options = {}) {
+  const treeP = await func.runtime.render.ensure_tree_node({
+    SESSION_ID: options.SESSION_ID,
+    nodeP: options.treeP || options.nodeP,
+    paramsP: options.paramsP,
+    parent_infoP: options.parent_infoP,
+    keyP: options.keyP,
+    parent_nodeP: options.parent_nodeP,
+  });
+
+  return await func.runtime.render.render_tree_to_string(treeP, options);
+};
+func.runtime.render.get_server_render_mode = function (options = {}) {
+  const normalized = func.runtime.render.normalize_runtime_bootstrap({
+    app_computing_mode: options.app_computing_mode,
+    app_render_mode: options.app_render_mode,
+    app_client_activation: options.app_client_activation,
+  });
+
+  return normalized;
+};
+func.runtime.render.build_server_render_params = async function (options = {}) {
+  const SESSION_ID = options.SESSION_ID;
+  const prog_id = options.prog_id;
+  const dsSessionP = options.dsSessionP;
+  const _session = SESSION_OBJ?.[SESSION_ID] || {};
+  const _ds = _session?.DS_GLB?.[dsSessionP] || {};
+  const viewDoc = options.viewDoc || (await func.utils?.VIEWS_OBJ?.get?.(SESSION_ID, prog_id));
+
+  if (!viewDoc?.properties) {
+    throw new Error(`view document not found for ${prog_id}`);
+  }
+
+  const base_params = _ds?.screen_params ? func.runtime.render.safe_clone_tree_value(_ds.screen_params) : {};
+  const screenId = options.screenId || base_params.screenId || `ssr_${prog_id}_${dsSessionP || '0'}`;
+  const paramsP = {
+    ...base_params,
+    prog_id,
+    sourceScreenP: null,
+    $callingContainerP: null,
+    triggerIdP: null,
+    callingDataSource_objP: _ds,
+    rowIdP: typeof options.rowIdP !== 'undefined' ? options.rowIdP : (_ds?.currentRecordId || null),
+    renderType: viewDoc.properties?.renderType,
+    parameters_obj_inP: options.parameters_obj_inP || base_params.parameters_obj_inP || options.parameters_raw_obj || {},
+    source_functionP: options.source_functionP || base_params.source_functionP || 'render_string',
+    is_panelP: false,
+    screen_type: options.screen_type || base_params.screen_type || 'render_string',
+    screenInfo: viewDoc,
+    call_screen_propertiesP: base_params.call_screen_propertiesP,
+    parentDataSourceNoP: typeof _ds?.parentDataSourceNo === 'undefined' || _ds?.parentDataSourceNo === null ? 0 : _ds.parentDataSourceNo,
+    parameters_raw_obj: options.parameters_raw_obj || base_params.parameters_raw_obj || {},
+    dsSessionP,
+    screenId,
+    containerIdP: base_params.containerIdP || `ssr_container_${screenId}`,
+  };
+
+  if (_ds) {
+    _ds.screen_params = paramsP;
+  }
+
+  return paramsP;
+};
+func.runtime.render.build_prog_tree = async function (options = {}) {
+  const SESSION_ID = options.SESSION_ID;
+  const prog_id = options.prog_id;
+  const viewDoc = options.viewDoc || (await func.utils?.VIEWS_OBJ?.get?.(SESSION_ID, prog_id));
+
+  if (!viewDoc?.progUi?.length) {
+    throw new Error(`progUi not found for ${prog_id}`);
+  }
+
+  const paramsP = options.paramsP || (await func.runtime.render.build_server_render_params({
+    ...options,
+    SESSION_ID,
+    prog_id,
+    viewDoc,
+  }));
+  const root_index = typeof options.root_index === 'number' ? options.root_index : 0;
+  const root_node = func.runtime.render.safe_clone_tree_value(viewDoc.progUi[root_index]);
+  const tree = await func.runtime.render.build_tree({
+    SESSION_ID,
+    nodeP: root_node,
+    paramsP,
+  });
+
+  return {
+    tree,
+    paramsP,
+    viewDoc,
+  };
+};
+func.runtime.render.build_ssr_payload = function (render_program, options = {}) {
+  const runtime_profile = func.runtime.render.get_server_render_mode(options);
+  return {
+    contract: 'xuda.ssr.v1',
+    prog_id: options.prog_id,
+    screenId: render_program.paramsP.screenId,
+    containerId: render_program.paramsP.containerIdP,
+    app_computing_mode: runtime_profile.app_computing_mode,
+    app_render_mode: runtime_profile.app_render_mode,
+    app_client_activation: runtime_profile.app_client_activation,
+    tree_contract: func.runtime.render.TREE_CONTRACT_VERSION,
+  };
+};
+func.runtime.render.build_ssr_screen_html = function (html, render_program, options = {}) {
+  const payload = func.runtime.render.build_ssr_payload(render_program, options);
+  const screenId = func.runtime.render.escape_html_attribute(payload.screenId || '');
+  const containerId = func.runtime.render.escape_html_attribute(payload.containerId || '');
+  const activation = func.runtime.render.escape_html_attribute(payload.app_client_activation || 'takeover');
+
+  return `<div data-xuda-ssr-embed="true" class="xu_embed_div"><div id="${screenId}" class="xu_embed_container" data-xuda-ssr-screen="true" data-xuda-ssr-screen-id="${screenId}" data-xuda-activation="${activation}" style="display: contents;"><div id="${containerId}" data-xuda-ssr-root-frame="true" data-xuda-ssr-screen-id="${screenId}" data-xuda-activation="${activation}" style="display: contents;">${html}</div></div></div>`;
+};
+func.runtime.render.render_prog_to_string = async function (options = {}) {
+  const render_program = await func.runtime.render.build_prog_tree(options);
+  const html = await func.runtime.render.render_to_string({
+    ...options,
+    SESSION_ID: options.SESSION_ID,
+    treeP: render_program.tree,
+    paramsP: render_program.paramsP,
+  });
+  const ssr_payload = func.runtime.render.build_ssr_payload(render_program, options);
+  const screen_html = func.runtime.render.build_ssr_screen_html(html, render_program, options);
+
+  return {
+    prog_id: options.prog_id,
+    dsSessionP: render_program.paramsP.dsSessionP,
+    screenId: render_program.paramsP.screenId,
+    html,
+    screen_html,
+    tree_json: func.runtime.render.serialize_tree(render_program.tree),
+    paramsP: render_program.paramsP,
+    ssr_payload,
+  };
+};
  func.runtime = func.runtime || {};
 func.runtime.platform = func.runtime.platform || {};
 
@@ -7130,6 +8147,13 @@ func.utils.DOCS_OBJ = {};
 func.utils.DOCS_OBJ.get = async function (SESSION_ID, idP) {
   if (!idP || idP === '0') return;
 
+  const normalize_runtime_doc = function (doc) {
+    if (!doc || !func.runtime.program?.normalize_doc_for_runtime) {
+      return doc;
+    }
+    return func.runtime.program.normalize_doc_for_runtime(doc);
+  };
+
   var _session = SESSION_OBJ[SESSION_ID];
   const _app_id = _session.app_id;
   if (!DOCS_OBJ[_app_id]) {
@@ -7151,7 +8175,8 @@ func.utils.DOCS_OBJ.get = async function (SESSION_ID, idP) {
     }
     let val = _session.project_data?.programs?.[idP];
     if (val) {
-      return (DOCS_OBJ[_app_id][idP] = val);
+      DOCS_OBJ[_app_id][idP] = normalize_runtime_doc(val);
+      return DOCS_OBJ[_app_id][idP];
     }
   }
 
@@ -7159,7 +8184,7 @@ func.utils.DOCS_OBJ.get = async function (SESSION_ID, idP) {
     const module = await func.common.get_module(SESSION_ID, `xuda-progs-loader-module.mjs`);
 
     if (idP !== 'system') {
-      DOCS_OBJ[_app_id][idP] = await module.DOCS_OBJ_get(SESSION_ID, idP);
+      DOCS_OBJ[_app_id][idP] = normalize_runtime_doc(await module.DOCS_OBJ_get(SESSION_ID, idP));
       if (DOCS_OBJ[_app_id][idP] && xu_isEmpty(DOCS_OBJ[_app_id][idP])) {
         await func.utils.remove_cached_objects(SESSION_ID);
 
@@ -9230,6 +10255,15 @@ func.runtime.ui.ensure_embed_container = function (SESSION_ID) {
   const $root_element = func.runtime.ui.get_root_element(SESSION_ID);
   let $embed_container = func.runtime.ui.find_by_selector($root_element, `#embed_${SESSION_ID}`, true);
 
+  if (!$embed_container.length) {
+    const $ssr_embed_container = func.runtime.ui.find_by_selector($root_element, `[data-xuda-ssr-embed="true"]`, true);
+    const ssr_embed_node = func.runtime.ui.get_first_node($ssr_embed_container);
+    if (ssr_embed_node) {
+      ssr_embed_node.id = 'embed_' + SESSION_ID;
+      $embed_container = func.runtime.ui._wrap_matches([ssr_embed_node]);
+    }
+  }
+
   if (!$embed_container.length) {
     const embed_node = document.createElement('div');
     embed_node.id = 'embed_' + SESSION_ID;
@@ -9265,12 +10299,44 @@ func.runtime.ui.get_root_tag_name = function () {
   }
   return root_tag_name;
 };
+func.runtime.ui.find_ssr_screen_host = function ($container, screenId, containerId) {
+  const container_node = func.runtime.ui.get_first_node($container);
+  if (!container_node || !screenId) {
+    return null;
+  }
+
+  const dialog_node =
+    container_node.querySelector?.(`#${CSS?.escape ? CSS.escape(screenId) : screenId}`) ||
+    container_node.querySelector?.(`[data-xuda-ssr-screen-id="${screenId}"]`);
+  if (!dialog_node) {
+    return null;
+  }
+
+  const root_frame_node =
+    (containerId ? dialog_node.querySelector?.(`#${CSS?.escape ? CSS.escape(containerId) : containerId}`) : null) ||
+    dialog_node.querySelector?.('[data-xuda-ssr-root-frame="true"]');
+  if (!root_frame_node) {
+    return null;
+  }
+
+  return {
+    $dialogDiv: func.runtime.ui._wrap_matches([dialog_node]),
+    $rootFrame: func.runtime.ui._wrap_matches([root_frame_node]),
+    reused_ssr_host: true,
+  };
+};
 func.runtime.ui.create_screen_host = function (SESSION_ID, screen_type, params, $callingContainerP, screenId) {
   var $dialogDiv;
   var $rootFrame;
+  let reused_ssr_host = false;
 
   switch (screen_type) {
     case 'embed': {
+      const ssr_host = func.runtime.ui.find_ssr_screen_host($callingContainerP, screenId, params?.containerIdP);
+      if (ssr_host) {
+        return ssr_host;
+      }
+
       const dialogNode = document.createElement('div');
       dialogNode.id = screenId;
       dialogNode.setAttribute('ui_engine', UI_FRAMEWORK_INSTALLED);
@@ -9320,6 +10386,7 @@ func.runtime.ui.create_screen_host = function (SESSION_ID, screen_type, params,
   return {
     $dialogDiv,
     $rootFrame,
+    reused_ssr_host,
   };
 };
 func.runtime.ui.find_xu_ui_in_root = function (SESSION_ID, xu_ui_id) {
@@ -9884,6 +10951,11 @@ func.runtime.ui.build_container_xu_data = function (options) {
 func.runtime.ui.apply_container_meta = function ($div, options) {
   const div_node = func.runtime.ui.get_first_node($div);
   func.runtime.ui.set_attr(div_node, 'xu-ui-id', options.ui_id);
+  func.runtime.ui.set_attr(div_node, 'data-xuda-kind', options.treeP?.kind || options.nodeP?.tagName || 'element');
+  func.runtime.ui.set_attr(div_node, 'data-xuda-node-id', options.nodeP?.id || options.nodeP?.id_org || '');
+  if (options.treeP?.meta?.tree_id !== null && typeof options.treeP?.meta?.tree_id !== 'undefined') {
+    func.runtime.ui.set_attr(div_node, 'data-xuda-tree-id', options.treeP.meta.tree_id);
+  }
   const xuData = func.runtime.ui.build_container_xu_data(options);
   if (options.parent_infoP?.iterate_info) {
     xuData.iterate_info = options.parent_infoP.iterate_info;
@@ -9978,6 +11050,38 @@ func.runtime.ui.create_container_element = function (div_typeP, attr_str, prop,
   }
   return func.runtime.ui.create_element(div, attr_str);
 };
+func.runtime.ui.find_hydration_candidate = function (options) {
+  if (!func.runtime.render.is_hydration_mode(SESSION_OBJ?.[options.SESSION_ID])) {
+    return null;
+  }
+  if (!func.runtime.render.should_use_ssr_payload(options.SESSION_ID, options.paramsP)) {
+    return null;
+  }
+  if (options.is_placeholder || !options.treeP?.meta?.tree_id) {
+    return null;
+  }
+
+  const append_node = func.runtime.ui.get_first_node(options.$appendTo || options.$container);
+  if (!append_node) {
+    return null;
+  }
+
+  const children = func.runtime.ui.get_children(append_node);
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    if (child?.__xuda_hydration_claimed) {
+      continue;
+    }
+    if (func.runtime.ui.get_attr(child, 'data-xuda-tree-id') !== `${options.treeP.meta.tree_id}`) {
+      continue;
+    }
+    child.__xuda_hydration_claimed = true;
+    func.runtime.ui.set_attr(child, 'data-xuda-client-activation', 'hydrate');
+    return child;
+  }
+
+  return null;
+};
 func.runtime.ui.build_xu_ui_id_seed = function (nodeP, dsSessionP, key_path, currentRecordId) {
   const nodeId = nodeP.xu_tree_id || nodeP.id;
   const elem_key = `${nodeId}-${key_path}-${currentRecordId}`;
@@ -10030,7 +11134,11 @@ func.runtime.ui.create_container = async function (options) {
   try {
     const key_path = func.runtime.ui.build_container_key_path(container_xu_data, options.keyP, options.parent_infoP, options.nodeP, options.parent_nodeP);
     const elem_key = `${options.nodeP.xu_tree_id || options.nodeP.id}-${key_path}-${currentRecordId}`;
-    const $div = func.runtime.ui.create_container_element(options.div_typeP, options.attr_str, options.prop, options.nodeP, $appendTo);
+    const hydration_candidate = func.runtime.ui.find_hydration_candidate({
+      ...options,
+      $appendTo,
+    });
+    const $div = hydration_candidate || func.runtime.ui.create_container_element(options.div_typeP, options.attr_str, options.prop, options.nodeP, $appendTo);
     const new_ui_id = await func.runtime.ui.generate_xu_ui_id(options.SESSION_ID, options.nodeP, options.$container, options.paramsP, options.keyP, {
       container_xu_data,
       currentRecordId,
@@ -10056,9 +11164,10 @@ func.runtime.ui.create_container = async function (options) {
       parent_infoP: options.parent_infoP,
       is_placeholder: options.is_placeholder,
       classP: options.classP,
+      treeP: options.treeP,
     });
 
-    if (options.div_typeP !== 'svg') {
+    if (!hydration_candidate && options.div_typeP !== 'svg') {
       func.runtime.ui.append_to($div, $appendTo);
     }
     return $div;
@@ -12739,9 +13848,10 @@ func.runtime.ui.init_screen = async function (options) {
 
   const _session = SESSION_OBJ[SESSION_ID];
   const screenInfo = structuredClone(screen_ret);
+  const ssr_payload = func.runtime.render.should_use_ssr_payload(SESSION_ID, { prog_id }) ? func.runtime.render.get_ssr_payload(_session) : null;
 
   const screen_type = source_functionP?.split('_')?.[1];
-  const screenId = (glb.screen_num++).toString();
+  const screenId = ssr_payload?.screenId || (glb.screen_num++).toString();
 
   if (SCREEN_BLOCKER_OBJ[prog_id + (sourceScreenP ? '_' + sourceScreenP : '')]) {
     const wait_for_SCREEN_BLOCKER_release = function () {
@@ -12783,6 +13893,8 @@ func.runtime.ui.init_screen = async function (options) {
     call_screen_propertiesP,
     parentDataSourceNoP: _session.DS_GLB?.[callingDataSource_objP?.dsSession]?.dsSession || callingDataSource_objP?.parentDataSourceNo || 0,
     parameters_raw_obj,
+    containerIdP: ssr_payload?.containerId || null,
+    ssr_payload,
   };
 
   const screen_host = func.runtime.ui.create_screen_host(SESSION_ID, screen_type, params, $callingContainerP, screenId);
@@ -12815,6 +13927,10 @@ func.runtime.ui.init_screen = async function (options) {
     func.runtime.ui.set_style($rootFrame, 'display', 'contents');
   }
 
+  if (screen_host.reused_ssr_host && func.runtime.render.is_takeover_mode(_session)) {
+    func.runtime.ui.empty($rootFrame);
+  }
+
   if (!is_panelP) func.UI.utils.indicator.screen.busy();
 
   const ret = await func.datasource.create(
@@ -12856,7 +13972,24 @@ func.runtime.ui.init_screen = async function (options) {
   }
   let node = structuredClone(viewDoc.progUi);
   if (!node.length) return console.warn('ui node empty');
-  const ret_render_$container = await func.runtime.render.render_ui_tree(SESSION_ID, $rootFrame, node[0], null, params, jobNoP, null, null, null, null, null, $rootFrame);
+  const root_tree = await func.runtime.render.build_tree({
+    SESSION_ID,
+    nodeP: node[0],
+    paramsP: params,
+  });
+  const ret_render_$container = await func.runtime.render.render_tree(root_tree, {
+    SESSION_ID,
+    $container: $rootFrame,
+    parent_infoP: null,
+    paramsP: params,
+    jobNoP,
+    is_skeleton: null,
+    keyP: null,
+    refreshed_ds: null,
+    parent_nodeP: null,
+    check_existP: null,
+    $root_container: $rootFrame,
+  });
 
   if (!is_panelP) func.UI.utils.indicator.screen.normal();
 
@@ -13281,6 +14414,7 @@ func.runtime.ui.render_single_view_node = async function (options) {
       parent_infoP: options.parent_infoP,
       jobNoP: options.jobNoP,
       keyP: options.keyP,
+      treeP: options.treeP,
       parent_nodeP: options.parent_nodeP,
       prop: options.prop,
       div_typeP: 'div',
@@ -13409,6 +14543,7 @@ func.runtime.ui.render_panel_node = async function (options) {
     parent_infoP: options.parent_infoP,
     jobNoP: options.jobNoP,
     keyP: options.keyP,
+    treeP: options.treeP,
     parent_nodeP: options.parent_nodeP,
     prop: options.prop,
     $appendToP: $wrapper,
@@ -13738,6 +14873,14 @@ func.runtime.ui.screen_loading_done = async function (options) {
     });
 
     const _session = SESSION_OBJ[options.SESSION_ID];
+    if (func.runtime.render.should_use_ssr_payload(options.SESSION_ID, options.paramsP)) {
+      const root_node = func.runtime.ui.get_root_node(options.SESSION_ID);
+      if (root_node) {
+        func.runtime.ui.set_attr(root_node, 'data-xuda-client-activation', _session.opt.app_client_activation || 'none');
+        func.runtime.ui.set_attr(root_node, 'data-xuda-ssr-status', _session.opt.app_client_activation === 'hydrate' ? 'hydrated' : 'taken-over');
+      }
+      func.runtime.render.mark_ssr_payload_consumed(options.SESSION_ID);
+    }
     func.events.delete_job(options.SESSION_ID, options.jobNoP);
     func.UI.utils.screen_blocker(false, options.paramsP.prog_id + (options.paramsP.sourceScreenP ? '_' + options.paramsP.sourceScreenP : ''));
     if (_session.prog_id === options.paramsP.prog_id) {
@@ -15580,6 +16723,9 @@ func.runtime.render.get_screen_context = function (SESSION_ID, $container, param
 };
 func.runtime.render.get_node_attributes = function (nodeP) {
   try {
+    if (func.runtime.render.is_tree_node?.(nodeP)) {
+      return nodeP.attributes;
+    }
     return nodeP?.attributes;
   } catch (error) {
     return undefined;
@@ -15697,6 +16843,7 @@ func.runtime.render.prepare_draw_context = async function (options) {
       parent_infoP: options.parent_infoP,
       jobNoP: options.jobNoP,
       keyP: options.keyP,
+      treeP: options.treeP,
       parent_nodeP: options.parent_nodeP,
       prop: options.prop,
       div_typeP: options.element,
@@ -15719,6 +16866,7 @@ func.runtime.render.prepare_draw_context = async function (options) {
       parent_infoP: options.parent_infoP,
       jobNoP: options.jobNoP,
       keyP: options.keyP,
+      treeP: options.treeP,
       parent_nodeP: options.parent_nodeP,
       prop: options.prop,
       div_typeP: options.element,
@@ -16575,11 +17723,16 @@ func.runtime.widgets.render_node = async function (options) {
       parent_infoP: options.parent_infoP,
       jobNoP: options.jobNoP,
       keyP: options.keyP,
+      treeP: options.treeP,
       parent_nodeP: options.parent_nodeP,
       prop: options.prop,
       classP: 'widget_wrapper',
     });
 
+    if (func.runtime.render.is_hydration_mode(SESSION_OBJ?.[options.SESSION_ID]) && func.runtime.render.should_use_ssr_payload(options.SESSION_ID, options.paramsP)) {
+      func.runtime.ui.empty($div);
+    }
+
     const widget_context = func.runtime.widgets.create_context(options.SESSION_ID, options.paramsP, options.prop);
     const { plugin_name, method, propsP, plugin: _plugin } = widget_context;
     const report_error = function (descP, warn) {
@@ -16682,9 +17835,370 @@ func.runtime.widgets = func.runtime.widgets || {};
 
 // Browser-only special node renderers live here so the core render tree can stay focused.
 
+const normalize_runtime_tag_name = function (tag_name) {
+  return `${tag_name || ''}`.trim().toLowerCase();
+};
+
+const get_runtime_node_attributes = function (nodeP) {
+  if (!nodeP?.attributes || typeof nodeP.attributes !== 'object') {
+    return {};
+  }
+
+  return nodeP.attributes;
+};
+
+const get_runtime_node_content = function (nodeP) {
+  if (typeof nodeP?.content === 'string') {
+    return nodeP.content;
+  }
+
+  if (typeof nodeP?.text === 'string') {
+    return nodeP.text;
+  }
+
+  if (!Array.isArray(nodeP?.children)) {
+    return '';
+  }
+
+  return nodeP.children
+    .map(function (child) {
+      if (typeof child === 'string') {
+        return child;
+      }
+      if (typeof child?.content === 'string') {
+        return child.content;
+      }
+      if (typeof child?.text === 'string') {
+        return child.text;
+      }
+      return '';
+    })
+    .join('');
+};
+
+const get_runtime_asset_key = function (options, tag_name) {
+  const source_node = options.treeP || options.nodeP || {};
+  const parts = [
+    'xuda-html-asset',
+    options.paramsP?.prog_id || '',
+    tag_name,
+    source_node.id || source_node.id_org || '',
+    typeof options.keyP === 'undefined' || options.keyP === null ? '' : `${options.keyP}`,
+  ].filter(function (part) {
+    return `${part || ''}`.trim() !== '';
+  });
+
+  return parts.join(':');
+};
+
+const get_runtime_asset_signature = function (attributes, content) {
+  const normalized_attributes = {};
+  const attr_keys = Object.keys(attributes || {}).sort();
+
+  for (let index = 0; index < attr_keys.length; index++) {
+    const key = attr_keys[index];
+    normalized_attributes[key] = attributes[key];
+  }
+
+  return JSON.stringify({
+    attributes: normalized_attributes,
+    content: `${content || ''}`,
+  });
+};
+
+const escape_runtime_asset_selector_value = function (value) {
+  const win = func.runtime.platform.get_window?.();
+  if (win?.CSS?.escape) {
+    return win.CSS.escape(value);
+  }
+
+  return `${value || ''}`.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+};
+
+const find_runtime_head_asset = function (head, tag_name, asset_key) {
+  if (!head?.querySelector || !asset_key) {
+    return null;
+  }
+
+  return head.querySelector(`${tag_name}[data-xuda-asset-key="${escape_runtime_asset_selector_value(asset_key)}"]`);
+};
+
+const find_runtime_head_asset_by_attr = function (head, tag_name, attr_name, attr_value) {
+  if (!head?.querySelectorAll || !attr_name || !attr_value) {
+    return null;
+  }
+
+  const candidates = Array.from(head.querySelectorAll(tag_name));
+  return (
+    candidates.find(function (candidate) {
+      return candidate.getAttribute(attr_name) === attr_value || candidate[attr_name] === attr_value;
+    }) || null
+  );
+};
+
+const wait_for_runtime_asset_load = function (node) {
+  if (!node?.addEventListener) {
+    return Promise.resolve(node);
+  }
+
+  if (node.getAttribute?.('data-xuda-loaded') === 'true') {
+    return Promise.resolve(node);
+  }
+
+  if (!node.getAttribute?.('data-xuda-asset-key')) {
+    return Promise.resolve(node);
+  }
+
+  const tag_name = normalize_runtime_tag_name(node.tagName);
+  if (tag_name !== 'script' && !(tag_name === 'link' && normalize_runtime_tag_name(node.getAttribute?.('rel')) === 'stylesheet')) {
+    return Promise.resolve(node);
+  }
+
+  return new Promise(function (resolve) {
+    const done = function () {
+      node.setAttribute?.('data-xuda-loaded', 'true');
+      resolve(node);
+    };
+
+    node.addEventListener('load', done, { once: true });
+    node.addEventListener('error', done, { once: true });
+  });
+};
+
+const remove_runtime_head_asset = function (node) {
+  if (node?.parentNode?.removeChild) {
+    node.parentNode.removeChild(node);
+  }
+};
+
+const apply_runtime_asset_metadata = function (node, asset_key, signature) {
+  if (!node?.setAttribute) {
+    return node;
+  }
+
+  if (asset_key) {
+    node.setAttribute('data-xuda-asset-key', asset_key);
+  }
+  node.setAttribute('data-xuda-asset-signature', signature);
+  return node;
+};
+
+const create_runtime_head_element = function (doc, tag_name, attributes, asset_key, signature) {
+  const node = doc.createElement(tag_name);
+  apply_runtime_asset_metadata(node, asset_key, signature);
+  func.runtime.platform.apply_element_attributes(node, attributes);
+  return node;
+};
+
+const queue_runtime_html_script_task = function (task) {
+  const queue =
+    func.runtime.render._html_script_queue ||
+    (func.runtime.render._html_script_queue = {
+      items: [],
+      scheduled: false,
+      running: false,
+    });
+
+  queue.items.push(task);
+
+  if (queue.scheduled || queue.running) {
+    return;
+  }
+
+  queue.scheduled = true;
+
+  const drain_queue = async function () {
+    if (queue.running) {
+      return;
+    }
+
+    queue.running = true;
+    queue.scheduled = false;
+
+    try {
+      while (queue.items.length) {
+        const next_task = queue.items.shift();
+        await next_task();
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      queue.running = false;
+      if (queue.items.length && !queue.scheduled) {
+        queue.scheduled = true;
+        schedule_runtime_html_script_queue();
+      }
+    }
+  };
+
+  const schedule_runtime_html_script_queue = function () {
+    const win = func.runtime.platform.get_window?.();
+    const run_later = function () {
+      setTimeout(function () {
+        drain_queue();
+      }, 0);
+    };
+
+    if (win?.requestAnimationFrame) {
+      win.requestAnimationFrame(function () {
+        win.requestAnimationFrame(run_later);
+      });
+      return;
+    }
+
+    run_later();
+  };
+
+  schedule_runtime_html_script_queue();
+};
+
+const upsert_runtime_head_element = async function (options) {
+  const doc = func.runtime.platform.get_document?.();
+  const head = doc?.head;
+  const tag_name = normalize_runtime_tag_name(options.tag_name);
+
+  if (!doc?.createElement || !head?.appendChild || !tag_name) {
+    return null;
+  }
+
+  const asset_key = options.asset_key || '';
+  const signature = options.signature || '';
+  const attributes = options.attributes || {};
+  const content = typeof options.content === 'string' ? options.content : '';
+
+  const existing_by_key = find_runtime_head_asset(head, tag_name, asset_key);
+  if (existing_by_key && existing_by_key.getAttribute('data-xuda-asset-signature') === signature) {
+    return options.await_load ? await wait_for_runtime_asset_load(existing_by_key) : existing_by_key;
+  }
+
+  if (existing_by_key) {
+    remove_runtime_head_asset(existing_by_key);
+  }
+
+  if (options.find_existing_attr?.name && options.find_existing_attr?.value) {
+    const existing_by_attr = find_runtime_head_asset_by_attr(head, tag_name, options.find_existing_attr.name, options.find_existing_attr.value);
+    if (existing_by_attr) {
+      apply_runtime_asset_metadata(existing_by_attr, asset_key, signature);
+      existing_by_attr.setAttribute?.('data-xuda-loaded', 'true');
+      return existing_by_attr;
+    }
+  }
+
+  const node = create_runtime_head_element(doc, tag_name, attributes, asset_key, signature);
+
+  if (tag_name === 'script' && attributes.src && !Object.prototype.hasOwnProperty.call(attributes, 'async')) {
+    const script_type = normalize_runtime_tag_name(attributes.type);
+    if (script_type !== 'module') {
+      node.async = false;
+    }
+  }
+
+  if (tag_name === 'style' || (tag_name === 'script' && !attributes.src)) {
+    node.textContent = content;
+  }
+
+  head.appendChild(node);
+
+  if (tag_name !== 'script' && tag_name !== 'link') {
+    node.setAttribute('data-xuda-loaded', 'true');
+  }
+
+  return options.await_load ? await wait_for_runtime_asset_load(node) : node;
+};
+
+const render_runtime_html_asset = async function (options) {
+  if (options.is_skeleton) {
+    return options.$container;
+  }
+
+  const nodeP = options.treeP || options.nodeP || {};
+  const tag_name = normalize_runtime_tag_name(nodeP.tagName);
+  const attributes = { ...get_runtime_node_attributes(nodeP) };
+  const content = get_runtime_node_content(nodeP);
+  const asset_key = get_runtime_asset_key(options, tag_name);
+  const signature = get_runtime_asset_signature(attributes, content);
+
+  switch (tag_name) {
+    case 'title':
+      func.runtime.platform.set_title(content);
+      return options.$container;
+    case 'style':
+      await upsert_runtime_head_element({
+        tag_name,
+        attributes,
+        content,
+        asset_key,
+        signature,
+      });
+      return options.$container;
+    case 'meta':
+      if (!Object.keys(attributes).length) {
+        return options.$container;
+      }
+      await upsert_runtime_head_element({
+        tag_name,
+        attributes,
+        asset_key,
+        signature,
+      });
+      return options.$container;
+    case 'link': {
+      const href = `${attributes.href || ''}`.trim();
+      if (!href) {
+        return options.$container;
+      }
+      await upsert_runtime_head_element({
+        tag_name,
+        attributes,
+        asset_key,
+        signature,
+        find_existing_attr: {
+          name: 'href',
+          value: href,
+        },
+        await_load: normalize_runtime_tag_name(attributes.rel) === 'stylesheet',
+      });
+      return options.$container;
+    }
+    case 'script': {
+      const src = `${attributes.src || ''}`.trim();
+      if (!src && !content.trim()) {
+        return options.$container;
+      }
+      queue_runtime_html_script_task(async function () {
+        await upsert_runtime_head_element({
+          tag_name,
+          attributes,
+          content,
+          asset_key,
+          signature,
+          find_existing_attr: src
+            ? {
+                name: 'src',
+                value: src,
+              }
+            : null,
+          await_load: !!src,
+        });
+      });
+      return options.$container;
+    }
+    default:
+      return null;
+  }
+};
+
 func.runtime.render.render_special_node = async function (options) {
-  if (options.nodeP.content && options.nodeP.attributes) {
-    options.nodeP.attributes['xu-content'] = options.nodeP.content;
+  const treeP = options.treeP || null;
+  const nodeP = options.nodeP || func.runtime.render.get_tree_source_node(treeP);
+  const render_tag_name = treeP?.tagName || nodeP?.tagName;
+  const normalized_render_tag_name = normalize_runtime_tag_name(render_tag_name);
+  const is_native_html_asset = ['title', 'style', 'meta', 'link', 'script'].includes(normalized_render_tag_name);
+
+  if (!is_native_html_asset && treeP?.content && nodeP?.attributes) {
+    nodeP.attributes['xu-content'] = treeP.content;
+  } else if (!is_native_html_asset && nodeP?.content && nodeP.attributes) {
+    nodeP.attributes['xu-content'] = nodeP.content;
   }
 
   const renderers = {
@@ -16694,6 +18208,7 @@ func.runtime.render.render_special_node = async function (options) {
         SESSION_ID: options.SESSION_ID,
         $container: options.$container,
         $root_container: options.$root_container,
+        treeP,
         nodeP: options.nodeP,
         parent_infoP: options.parent_infoP,
         paramsP: options.paramsP,
@@ -16710,6 +18225,7 @@ func.runtime.render.render_special_node = async function (options) {
         SESSION_ID: options.SESSION_ID,
         $container: options.$container,
         $root_container: options.$root_container,
+        treeP,
         nodeP: options.nodeP,
         parent_infoP: options.parent_infoP,
         paramsP: options.paramsP,
@@ -16729,6 +18245,7 @@ func.runtime.render.render_special_node = async function (options) {
         SESSION_ID: options.SESSION_ID,
         $container: options.$container,
         $root_container: options.$root_container,
+        treeP,
         nodeP: options.nodeP,
         parent_infoP: options.parent_infoP,
         paramsP: options.paramsP,
@@ -16745,6 +18262,7 @@ func.runtime.render.render_special_node = async function (options) {
         SESSION_ID: options.SESSION_ID,
         $container: options.$container,
         $root_container: options.$root_container,
+        treeP,
         nodeP: options.nodeP,
         parent_infoP: options.parent_infoP,
         paramsP: options.paramsP,
@@ -16756,9 +18274,24 @@ func.runtime.render.render_special_node = async function (options) {
         refreshed_ds: options.refreshed_ds,
       });
     },
+    title: async function () {
+      return await render_runtime_html_asset(options);
+    },
+    style: async function () {
+      return await render_runtime_html_asset(options);
+    },
+    meta: async function () {
+      return await render_runtime_html_asset(options);
+    },
+    link: async function () {
+      return await render_runtime_html_asset(options);
+    },
+    script: async function () {
+      return await render_runtime_html_asset(options);
+    },
   };
 
-  const renderer = renderers[options.nodeP.tagName];
+  const renderer = renderers[normalized_render_tag_name];
   if (!renderer) {
     return { handled: false };
   }
@@ -16872,8 +18405,9 @@ func.runtime.widgets = func.runtime.widgets || {};
 // Browser-only render tree entrypoints live here so draw/cache helpers can stay focused.
 
 func.runtime.render.create_tree_runtime = function (options) {
+  const render_node = options.nodeP || func.runtime.render.get_tree_source_node(options.treeP);
   const render_context = func.runtime.render.get_screen_context(options.SESSION_ID, options.$container, options.paramsP, options.is_skeleton);
-  const prop = func.runtime.render.get_node_attributes(options.nodeP);
+  const prop = func.runtime.render.get_node_attributes(options.treeP || render_node);
   const is_mobile = render_context.is_mobile ? true : false;
   const hover_handlers = func.runtime.render.create_hover_handlers({
     SESSION_ID: options.SESSION_ID,
@@ -16888,13 +18422,22 @@ func.runtime.render.create_tree_runtime = function (options) {
     return await func.runtime.ui.close_modal_session(options.SESSION_ID, modal_id);
   };
   const iterate_child = async function ($divP, nodeP, parent_infoP, $root_container, before_record_function) {
+    const child_tree = await func.runtime.render.ensure_tree_node({
+      SESSION_ID: options.SESSION_ID,
+      nodeP: nodeP || options.treeP || render_node,
+      parent_infoP,
+      paramsP: options.paramsP,
+      keyP: options.keyP,
+      parent_nodeP: render_node,
+      pathP: options.treeP?.meta?.path || [],
+    });
     return await func.runtime.render.iterate_children({
       $divP,
-      nodeP,
+      nodeP: child_tree,
       is_mobile,
       before_record_function,
       render_child: async function (key, child) {
-        await options.render_child($divP, child, parent_infoP, key, nodeP, $root_container);
+        await options.render_child($divP, child, parent_infoP, key, render_node, $root_container);
       },
     });
   };
@@ -16924,7 +18467,7 @@ func.runtime.render.draw_node = async function (options) {
     check_existP: options.check_existP,
     $root_container: options.$root_container,
     prop: options.prop,
-    element: options.nodeP.tagName,
+    element: options.treeP?.tagName || options.nodeP.tagName,
     hover_handlers: options.hover_handlers,
     include_hover_click: options.include_hover_click,
     iterate_child: options.iterate_child,
@@ -16947,21 +18490,33 @@ func.runtime.render.draw_node = async function (options) {
     nodeP: options.nodeP,
   });
 };
-func.runtime.render.render_ui_tree = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
-  if (!nodeP) return;
-  const perf_end = func.runtime?.perf?.start?.(SESSION_ID, 'render_ui_tree');
-  func.runtime?.perf?.increment_map?.(SESSION_ID, 'render_node_counts', nodeP.id || nodeP.id_org || nodeP.tagName || 'unknown');
+func.runtime.render.render_tree = async function (treeP, renderer_context) {
+  if (!treeP) return;
+  const nodeP = func.runtime.render.get_tree_source_node(treeP);
+  const perf_end = func.runtime?.perf?.start?.(renderer_context.SESSION_ID, 'render_ui_tree');
+  func.runtime?.perf?.increment_map?.(renderer_context.SESSION_ID, 'render_node_counts', treeP.id || nodeP?.id || nodeP?.id_org || treeP.tagName || 'unknown');
   try {
     const tree_runtime = func.runtime.render.create_tree_runtime({
-      SESSION_ID,
-      $container,
+      SESSION_ID: renderer_context.SESSION_ID,
+      $container: renderer_context.$container,
+      treeP,
       nodeP,
-      parent_infoP,
-      paramsP,
-      jobNoP,
-      is_skeleton,
+      parent_infoP: renderer_context.parent_infoP,
+      paramsP: renderer_context.paramsP,
+      jobNoP: renderer_context.jobNoP,
+      is_skeleton: renderer_context.is_skeleton,
+      keyP: renderer_context.keyP,
       render_child: async function ($divP, child, parent_infoP, key, parentNodeP, rootContainerP) {
-        await func.runtime.render.render_ui_tree(SESSION_ID, $divP, child, parent_infoP, paramsP, jobNoP, is_skeleton, key, null, parentNodeP, null, rootContainerP);
+        await func.runtime.render.render_tree(child, {
+          ...renderer_context,
+          $container: $divP,
+          parent_infoP,
+          keyP: key,
+          refreshed_ds: null,
+          parent_nodeP: parentNodeP,
+          check_existP: null,
+          $root_container: rootContainerP,
+        });
       },
     });
     const render_context = tree_runtime.render_context;
@@ -16973,23 +18528,24 @@ func.runtime.render.render_ui_tree = async function (SESSION_ID, $container, nod
     const iterate_child = tree_runtime.iterate_child;
 
     func.runtime.render.log_tree_debug({
-      SESSION_ID,
-      paramsP,
+      SESSION_ID: renderer_context.SESSION_ID,
+      paramsP: renderer_context.paramsP,
       nodeP,
       _ds,
     });
     const special_render = await func.runtime.render.render_special_node({
-      SESSION_ID,
-      $container,
-      $root_container,
+      SESSION_ID: renderer_context.SESSION_ID,
+      $container: renderer_context.$container,
+      $root_container: renderer_context.$root_container,
+      treeP,
       nodeP,
-      parent_infoP,
-      paramsP,
-      jobNoP,
-      is_skeleton,
-      keyP,
-      refreshed_ds,
-      parent_nodeP,
+      parent_infoP: renderer_context.parent_infoP,
+      paramsP: renderer_context.paramsP,
+      jobNoP: renderer_context.jobNoP,
+      is_skeleton: renderer_context.is_skeleton,
+      keyP: renderer_context.keyP,
+      refreshed_ds: renderer_context.refreshed_ds,
+      parent_nodeP: renderer_context.parent_nodeP,
       prop,
       render_context,
       hover_handlers,
@@ -16997,22 +18553,23 @@ func.runtime.render.render_ui_tree = async function (SESSION_ID, $container, nod
       close_modal,
     });
     if (special_render.handled) {
-      func.runtime?.perf?.increment?.(SESSION_ID, 'render_special_node_hits');
+      func.runtime?.perf?.increment?.(renderer_context.SESSION_ID, 'render_special_node_hits');
       return special_render.result;
     }
     return await func.runtime.render.draw_node({
-      SESSION_ID,
-      $container,
-      $root_container,
+      SESSION_ID: renderer_context.SESSION_ID,
+      $container: renderer_context.$container,
+      $root_container: renderer_context.$root_container,
+      treeP,
       nodeP,
-      parent_infoP,
-      paramsP,
-      jobNoP,
-      is_skeleton,
-      keyP,
-      refreshed_ds,
-      parent_nodeP,
-      check_existP,
+      parent_infoP: renderer_context.parent_infoP,
+      paramsP: renderer_context.paramsP,
+      jobNoP: renderer_context.jobNoP,
+      is_skeleton: renderer_context.is_skeleton,
+      keyP: renderer_context.keyP,
+      refreshed_ds: renderer_context.refreshed_ds,
+      parent_nodeP: renderer_context.parent_nodeP,
+      check_existP: renderer_context.check_existP,
       prop,
       hover_handlers,
       include_hover_click,
@@ -17021,6 +18578,31 @@ func.runtime.render.render_ui_tree = async function (SESSION_ID, $container, nod
   } finally {
     perf_end?.();
   }
+};
+func.runtime.render.render_ui_tree = async function (SESSION_ID, $container, nodeP, parent_infoP, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $root_container) {
+  if (!nodeP) return;
+  const treeP = await func.runtime.render.ensure_tree_node({
+    SESSION_ID,
+    nodeP,
+    parent_infoP,
+    paramsP,
+    keyP,
+    parent_nodeP,
+  });
+
+  return await func.runtime.render.render_tree(treeP, {
+    SESSION_ID,
+    $container,
+    parent_infoP,
+    paramsP,
+    jobNoP,
+    is_skeleton,
+    keyP,
+    refreshed_ds,
+    parent_nodeP,
+    check_existP,
+    $root_container,
+  });
 };
  func.runtime = func.runtime || {};
 func.runtime.ui = func.runtime.ui || {};
@@ -18544,6 +20126,7 @@ func.runtime.render.handle_xu_panel_program = async function (options) {
       parent_infoP: options.parent_infoP,
       jobNoP: options.jobNoP,
       keyP: options.keyP,
+      treeP: options.treeP,
       parent_nodeP: options.parent_nodeP,
       prop: options.nodeP.attributes,
       $appendToP: $wrapper,
@@ -22557,6 +24140,12 @@ function xuda(...args) {
   if (typeof opt !== 'object') {
     return console.error('Xuda Error - opt argument is not an object');
   }
+
+  if (!opt.ssr_payload && func.runtime.platform.get_window()?.__XUDA_SSR__) {
+    opt.ssr_payload = func.runtime.platform.get_window().__XUDA_SSR__;
+  }
+  func.runtime.render.apply_runtime_bootstrap_defaults(opt);
+
   glb.URL_PARAMS = func.common.getJsonFromUrl(platform.get_url_href());
 
   glb.worker_type = 'Worker';