tabler/shared/components/PageModals.astro

---
// Separate component so drainPageModals() executes only at this point of the
// render stream (after the page content render has STARTED — registrations are
// synchronous, modal content may be a promise).
import { drainPageModals } from '@shared/lib/page-modals'

const modals = await Promise.all(drainPageModals())
---

{
  modals.length > 0 && (
    <Fragment>
      <Fragment set:html={'<!-- BEGIN PAGE MODALS -->'} />
      <Fragment set:html={modals.join('\n')} />
      <Fragment set:html={'<!-- END PAGE MODALS -->'} />
    </Fragment>
  )
}