{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "docs-layout",
  "type": "registry:ui",
  "title": "Docs layout (MIAN)",
  "description": "A documentation page: navigation on the left, the reading column, and an “on this page” list on the right, collapsing to a menu on small screens.",
  "categories": [
    "sections",
    "docs",
    "documentation",
    "knowledge base",
    "help center"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/docs-layout.css",
      "type": "registry:file",
      "target": "mian/components/docs-layout.css",
      "content": ".mn-docs { container: mn-docs / inline-size; }\n.mn-docs-in { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 6rem); }\n.mn-docs-nav, .mn-docs-toc { display: none; align-self: start; position: sticky; top: 5.5rem; max-height: calc(100dvh - 7rem); overflow: auto; }\n.mn-docs-content { min-width: 0; max-width: 46rem; }\n.mn-docs-picker { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); }\n.mn-docs-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; cursor: pointer; list-style: none; font-weight: 550; font-size: .9375rem; }\n.mn-docs-picker > summary::-webkit-details-marker { display: none; }\n.mn-docs-picker > summary:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }\n.mn-docs-picker > .mn-sidebar { padding: 0 .5rem .75rem; }\n.mn-docs-toc h2 { margin: 0 0 .75rem; font: 600 .8125rem/1.2 var(--mn-font); color: var(--mn-fg); }\n.mn-docs-toc ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; }\n.mn-docs-toc a { color: var(--mn-muted); text-decoration: none; }\n.mn-docs-toc a:hover, .mn-docs-toc a[aria-current] { color: var(--mn-fg); }\n.mn-docs-toc a:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: 2px; }\n@container mn-docs (min-width: 56rem) {\n  .mn-docs-in { grid-template-columns: 14rem minmax(0, 1fr); column-gap: clamp(2rem, 4cqi, 3.5rem); }\n  .mn-docs-nav { display: block; }\n  .mn-docs-picker { display: none; }\n}\n@container mn-docs (min-width: 76rem) {\n  .mn-docs-in { grid-template-columns: 14rem minmax(0, 1fr) 12rem; }\n  .mn-docs-toc { display: block; }"
    },
    {
      "path": "mian/examples/docs-layout.html",
      "type": "registry:file",
      "target": "mian/examples/docs-layout.html",
      "content": "<!-- Docs page -->\n<div class=\"mn-docs\"><div class=\"mn-container mn-docs-in\">\n  <nav class=\"mn-docs-nav\" aria-label=\"Documentation\"><div class=\"mn-sidebar\"><div class=\"mn-sidebar-group\"><div class=\"mn-sidebar-heading\">Start</div><a class=\"mn-sidebar-link\" href=\"#\" aria-current=\"page\">Quickstart</a><a class=\"mn-sidebar-link\" href=\"#\">Authentication</a></div><div class=\"mn-sidebar-group\"><div class=\"mn-sidebar-heading\">API</div><a class=\"mn-sidebar-link\" href=\"#\">Messages</a><a class=\"mn-sidebar-link\" href=\"#\">Webhooks</a></div></div></nav>\n  <div class=\"mn-docs-content\">\n    <details class=\"mn-docs-picker\"><summary>Quickstart <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></summary><div class=\"mn-sidebar\"><a class=\"mn-sidebar-link\" href=\"#\" aria-current=\"page\">Quickstart</a><a class=\"mn-sidebar-link\" href=\"#\">Authentication</a><a class=\"mn-sidebar-link\" href=\"#\">Messages</a></div></details>\n    <div class=\"mn-prose\"><h1 id=\"dq-start\">Quickstart</h1><p>Send your first message in under five minutes.</p><h2 id=\"dq-key\">Get a key</h2><p>Create a key in the dashboard and keep it on the server.</p></div>\n  </div>\n  <nav class=\"mn-docs-toc\" aria-label=\"On this page\"><h2>On this page</h2><ul><li><a href=\"#dq-start\">Quickstart</a></li><li><a href=\"#dq-key\">Get a key</a></li></ul></nav>\n</div></div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/docs-layout",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-docs",
        "mn-docs-in",
        "mn-docs-nav",
        "mn-docs-picker",
        "mn-docs-content",
        "mn-docs-toc"
      ],
      "accessibility": [
        "Label both navigations (aria-label=\"Documentation\" and \"On this page\").",
        "Mark the current page with aria-current=\"page\" in the nav.",
        "The narrow-screen menu is a native <details> disclosure."
      ],
      "intents": [
        "documentation site",
        "developer docs",
        "knowledge base",
        "help center",
        "guide with table of contents"
      ]
    }
  }
}