StreamlitVizPage

---
import type { BacklinkSource } from '../../lib/internal-links/backlink-graph'
import type { BlogBlock } from '../../lib/markdown/block-types'
import type { StreamlitMountPayload } from '../../viz/streamlit/streamlit-mount-payload'
import '../../styles/viz-page.css'
import BreakoutContainer from '../0_atoms/BreakoutContainer.astro'
import Backlinks from '../2_organisms/Backlinks.astro'
import Prose from '../0_atoms/Prose.astro'
import ProseDocument from '../2_organisms/ProseDocument.astro'
import PostHeader from '../2_organisms/PostHeader.astro'
import StliteMount from '../2_organisms/StliteMount.astro'
import Base from './Base.astro'

interface OpenGraphProps {
  url: string
  imageUrl: string
  imageAlt: string
  ogTitle: string
  ogDescription?: string
}

interface Props {
  title: string
  description?: string
  noindex: boolean
  canonicalHref?: string
  copyablePostId?: string
  githubEditHref?: string
  openGraph?: OpenGraphProps
  /** Real pages use `Date` from content; Storybook static prerender fixtures may use ISO strings. */
  publishedAt: Date | string
  tags: string[]
  /** Pages pass a `Map`; Storybook static args serialize to a plain object — both are supported. */
  tagCounts: Map<string, number> | Record<string, number>
  postId: string
  backlinks: BacklinkSource[]
  payload: StreamlitMountPayload
  markdownBlocks?: BlogBlock[]
}

const {
  title,
  description,
  noindex,
  canonicalHref,
  copyablePostId,
  githubEditHref,
  openGraph,
  publishedAt,
  tags,
  tagCounts,
  postId,
  backlinks,
  payload,
  markdownBlocks,
} = Astro.props
---

<Base
  title={title}
  description={description}
  noindex={noindex}
  canonicalHref={canonicalHref}
  copyablePostId={copyablePostId}
  githubEditHref={githubEditHref}
  openGraph={openGraph}
>
  <article class="viz-page">
    <PostHeader
      title={title}
      postType="viz"
      publishedAt={publishedAt}
      tags={tags}
      tagCounts={tagCounts}
      postId={postId}
      secret={noindex}
    />
    {
      (markdownBlocks || Astro.slots.has('default')) && (
        <div class="viz-readme-wrap">
          {
            markdownBlocks ? (
              <ProseDocument blocks={markdownBlocks} />
            ) : (
              <Prose>
                <slot />
              </Prose>
            )
          }
        </div>
      )
    }
    <BreakoutContainer width="extrawide">
      <StliteMount payload={payload} />
    </BreakoutContainer>
    <div class="viz-page-backlinks">
      <Backlinks sources={backlinks} />
    </div>
  </article>
</Base>