<script lang="ts">
  interface Props {
    children: any;
  }

  let { children }: Props = $props();

  /**
   * Portal action - moves the DOM node to document.body
   * This escapes any overflow clipping boundaries
   */
  function portal(node: HTMLElement) {
    const container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(node);

    return {
      destroy() {
        if (container.parentNode) {
          document.body.removeChild(container);
        }
      }
    };
  }
</script>

<div use:portal>
  {@render children()}
</div>
