StliteMount

---
import type { StreamlitMountPayload } from '../../viz/streamlit/streamlit-mount-payload'
import '../../styles/stlite-viz.css'

interface Props {
  payload: StreamlitMountPayload
}

const { payload } = Astro.props
const configJson = JSON.stringify(payload).replace(/</g, '\\u003c')
---

<div class="stlite-viz not-prose">
  <p class="stlite-viz__status meta text-sm text-ink-muted" aria-live="polite">
    Loading visualization…
  </p>
  <div class="stlite-viz__mount"></div>
  <script type="application/json" class="stlite-viz__config" set:html={configJson} />
</div>

<script>
  function loadStliteWhenReady() {
    if (!document.querySelector('.stlite-viz')) return
    void import('../../viz/streamlit/mount-stlite').then(({ initStliteVizMounts }) => {
      initStliteVizMounts()
    })
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadStliteWhenReady, { once: true })
  } else {
    loadStliteWhenReady()
  }
</script>