function initBoundaries(elementId, updateUrl) {
  function updateBoundaries() {
    const container = document.getElementById(elementId);
    if (!container) {
      console.warn("initBoundaries : element " + elementId + " is not found !");
      return;
    }

    const rect = container.getBoundingClientRect();
    const width = Math.floor(rect.width);
    const height = Math.floor(rect.height);
    console.log("boundaries: ", rect)

    // Send boundaries to server
    htmx.ajax('POST', updateUrl, {
      target: '#' + elementId,
      swap: 'outerHTML',
      values: {width: width, height: height}
    });
  }

  // Debounce function
  let resizeTimeout;

  function debouncedUpdate() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(updateBoundaries, 250);
  }

  // Update on load
  setTimeout(updateBoundaries, 100);

  // Update on window resize
  const container = document.getElementById(elementId);
  container.addEventListener('resize', debouncedUpdate);

  // Cleanup on element removal
  if (container) {
    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        mutation.removedNodes.forEach(function (node) {
          if (node.id === elementId) {
            window.removeEventListener('resize', debouncedUpdate);
          }
        });
      });
    });
    observer.observe(container.parentNode, {childList: true});
  }
}