{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "docs-layout",
  "name": "Docs layout",
  "category": "Sections",
  "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.",
  "tags": [
    "docs",
    "documentation",
    "knowledge base",
    "help center",
    "guide",
    "three column",
    "table of contents",
    "toc",
    "sidebar"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "frame",
    "intents": [
      "documentation site",
      "developer docs",
      "knowledge base",
      "help center",
      "guide with table of contents"
    ],
    "prominence": "low",
    "density": "medium",
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "article",
      "app-shell"
    ],
    "avoid": "Code as screenshots; walls of text without headings."
  },
  "url": "https://mian.ro/components/docs-layout",
  "markdownUrl": "https://mian.ro/ai/components/docs-layout.md",
  "classes": [
    {
      "name": "mn-docs",
      "description": "The wrapper (a container)."
    },
    {
      "name": "mn-docs-in",
      "description": "The grid; put it on an mn-container. One column, then nav + content (56rem), then nav + content + table of contents (76rem)."
    },
    {
      "name": "mn-docs-nav",
      "description": "The sticky navigation column (holds an mn-sidebar)."
    },
    {
      "name": "mn-docs-picker",
      "description": "A <details> with the same navigation for narrow screens; hidden once the nav column shows."
    },
    {
      "name": "mn-docs-content",
      "description": "The reading column (max 46rem). Combine with mn-prose."
    },
    {
      "name": "mn-docs-toc",
      "description": "The sticky “On this page” list."
    }
  ],
  "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."
  ],
  "examples": [
    {
      "title": "Docs page",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/docs-layout.json"
  }
}