{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "docs-site",
  "type": "registry:block",
  "title": "Documentation page",
  "description": "A documentation page built from Facade UI sections: top navigation, side navigation, the article, an 'On this page' list and previous and next links. You supply one content object and the article body.",
  "categories": [
    "template"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/eyebrow.json",
    "https://facadeui.dev/r/footer.json",
    "https://facadeui.dev/r/heading.json",
    "https://facadeui.dev/r/nav-side.json",
    "https://facadeui.dev/r/nav-top.json",
    "https://facadeui.dev/r/prose.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/templates/docs-site.tsx",
      "type": "registry:component",
      "target": "components/templates/docs-site.tsx",
      "content": "/**\n * DocsSite — a documentation page, assembled from registry sections.\n *\n * Top navigation, the side navigation, the article and an \"On this page\"\n * list, with previous and next links at the end. The article body is the\n * `children` slot, styled by `Prose`, so rendered markdown drops straight in.\n *\n * a11y:\n *\n *  - Three named `<nav>` landmarks: the sidebar, \"On this page\" and \"Pages\"\n *    for previous and next. Below `xl` the \"On this page\" list is hidden; the\n *    headings it points to are still in the article.\n *  - The page title is the only `<h1>`. The sidebar's group headings are\n *    `<h2>` and come before it in the source, as on most docs sites; that keeps\n *    heading navigation down the sidebar, so do not demote them.\n *  - Previous and next links carry `rel` and a visible \"Previous\" or \"Next\",\n *    so their purpose does not depend on position.\n *\n * Not a client component: it renders client sections but passes them only\n * data, a link component and `children`.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/sections/*, @/components/ui/*.\n */\n\nimport type { ElementType, ReactNode } from \"react\"\n\nimport type { CtaItem, LinkComponent } from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Footer, type FooterGroup, type FooterLink } from \"@/components/sections/footer\"\nimport { NavSide, type NavSideGroup } from \"@/components/sections/nav-side\"\nimport { NavTop, type NavItem } from \"@/components/sections/nav-top\"\nimport { Container } from \"@/components/ui/container\"\nimport { Eyebrow } from \"@/components/ui/eyebrow\"\nimport { Heading } from \"@/components/ui/heading\"\nimport { Prose } from \"@/components/ui/prose\"\n\nexport interface TocItem {\n  label: string\n  /** Usually `#` and the id of a heading in the article. */\n  href: string\n  children?: TocItem[]\n}\n\nexport interface DocsPageLink {\n  label: string\n  href: string\n}\n\nexport interface DocsSiteContent {\n  brand: ReactNode\n  nav: NavItem[]\n  navActions?: CtaItem[]\n\n  sidebar: {\n    /** Names the sidebar landmark. Defaults to \"Documentation\". */\n    label?: string\n    groups: NavSideGroup[]\n  }\n\n  page: {\n    eyebrow?: string\n    title: string\n    description?: string\n    lastUpdated?: { dateTime: string; label: string }\n  }\n\n  /** The headings of this page. */\n  toc?: { label?: string; items: TocItem[] }\n\n  pagination?: { prev?: DocsPageLink; next?: DocsPageLink }\n\n  footer: {\n    groups?: FooterGroup[]\n    brand?: ReactNode\n    copyright?: ReactNode\n    legal?: FooterLink[]\n  }\n}\n\nexport interface DocsSiteProps {\n  content: DocsSiteContent\n  /** The article body. Rendered markdown or JSX; `Prose` styles it. */\n  children: ReactNode\n  link?: LinkComponent\n  /** Marks the current page in both navigations. */\n  currentPath?: string\n  /** Shown above the header. Usually a `Banner`. */\n  banner?: ReactNode\n}\n\nconst linkFocus =\n  \"focus-visible:ring-ring rounded-sm focus-visible:outline-none focus-visible:ring-2\"\n\nconst pageLink =\n  \"hover:border-ring flex min-h-11 flex-col gap-1 border p-4 transition-colors\"\n\nfunction TocList({ items, Link }: { items: TocItem[]; Link: ElementType }) {\n  return (\n    <ul className=\"flex flex-col gap-2\">\n      {items.map((item) => (\n        <li key={item.href} className=\"flex flex-col gap-2\">\n          <Link\n            href={item.href}\n            className={cn(\n              \"text-muted-foreground hover:text-foreground transition-colors\",\n              linkFocus,\n            )}\n          >\n            {item.label}\n          </Link>\n          {item.children?.length ? (\n            <div className=\"border-border border-l pl-3\">\n              <TocList items={item.children} Link={Link} />\n            </div>\n          ) : null}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nexport function DocsSite({\n  content,\n  children,\n  link,\n  currentPath,\n  banner,\n}: DocsSiteProps) {\n  const { sidebar, page, toc, pagination, footer } = content\n  const Link = (link ?? \"a\") as ElementType\n  const titleId = slugId(page.title, \"page\")\n  const tocId = \"docs-site-toc-title\"\n  const { prev, next } = pagination ?? {}\n\n  return (\n    <>\n      {banner}\n\n      <NavTop\n        brand={content.brand}\n        items={content.nav}\n        actions={content.navActions}\n        link={link}\n        currentPath={currentPath}\n      />\n\n      <Container className=\"grid gap-10 py-10 lg:grid-cols-[16rem_minmax(0,1fr)] xl:grid-cols-[16rem_minmax(0,1fr)_13rem]\">\n        <NavSide\n          label={sidebar.label ?? \"Documentation\"}\n          groups={sidebar.groups}\n          currentPath={currentPath}\n          link={link}\n          headingLevel={2}\n        />\n\n        <main id=\"main\" className=\"min-w-0\">\n          <article aria-labelledby={titleId} className=\"flex max-w-3xl flex-col gap-10\">\n            <header className=\"flex flex-col gap-3\">\n              {page.eyebrow ? <Eyebrow tone=\"primary\">{page.eyebrow}</Eyebrow> : null}\n              <Heading\n                level={1}\n                id={titleId}\n                className=\"text-display-sm text-balance font-semibold\"\n              >\n                {page.title}\n              </Heading>\n              {page.description ? (\n                <p className=\"text-muted-foreground text-pretty text-lg\">\n                  {page.description}\n                </p>\n              ) : null}\n              {page.lastUpdated ? (\n                <p className=\"text-muted-foreground text-sm\">\n                  Last updated{\" \"}\n                  <time dateTime={page.lastUpdated.dateTime}>\n                    {page.lastUpdated.label}\n                  </time>\n                </p>\n              ) : null}\n            </header>\n\n            <Prose>{children}</Prose>\n\n            {prev || next ? (\n              <nav\n                aria-label=\"Pages\"\n                className=\"border-border grid gap-4 border-t pt-8 sm:grid-cols-2\"\n              >\n                {prev ? (\n                  <Link\n                    href={prev.href}\n                    rel=\"prev\"\n                    className={cn(pageLink, linkFocus, \"rounded-lg\")}\n                  >\n                    <span className=\"text-muted-foreground text-sm\">Previous</span>\n                    <span className=\"font-medium\">{prev.label}</span>\n                  </Link>\n                ) : null}\n                {next ? (\n                  <Link\n                    href={next.href}\n                    rel=\"next\"\n                    className={cn(\n                      pageLink,\n                      linkFocus,\n                      \"rounded-lg text-right sm:col-start-2\",\n                    )}\n                  >\n                    <span className=\"text-muted-foreground text-sm\">Next</span>\n                    <span className=\"font-medium\">{next.label}</span>\n                  </Link>\n                ) : null}\n              </nav>\n            ) : null}\n          </article>\n        </main>\n\n        {toc?.items.length ? (\n          <nav aria-labelledby={tocId} className=\"hidden xl:block\">\n            <div className=\"sticky top-24 flex max-h-[calc(100dvh-7rem)] flex-col gap-3 overflow-y-auto text-sm\">\n              <Heading level={2} id={tocId} className=\"text-foreground font-semibold\">\n                {toc.label ?? \"On this page\"}\n              </Heading>\n              <TocList items={toc.items} Link={Link} />\n            </div>\n          </nav>\n        ) : null}\n      </Container>\n\n      <Footer\n        brand={footer.brand ?? content.brand}\n        groups={footer.groups}\n        copyright={footer.copyright}\n        legal={footer.legal}\n        link={link}\n        headingLevel={2}\n      />\n    </>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Render the template from a page with your own content object; it sets the page outline (one h1). Docs: https://facadeui.dev/components/docs-site"
}