{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header",
  "type": "registry:ui",
  "title": "Page header (MIAN)",
  "description": "The top of an application page: where you are, what this is, its facts and the actions you can take.",
  "categories": [
    "navigation",
    "page header",
    "page title",
    "heading with actions",
    "toolbar"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/page-header.css",
      "type": "registry:file",
      "target": "mian/components/page-header.css",
      "content": ".mn-pagehead { display: grid; gap: .8rem; min-width: 0; padding-bottom: 1.1rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }\n.mn-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; min-width: 0; }\n.mn-pagehead-title { margin: 0; font: var(--mn-heading-weight) 1.5rem/1.2 var(--mn-font-heading); letter-spacing: -.02em; color: var(--mn-fg); }\n.mn-pagehead-desc { margin: .3rem 0 0; max-width: 44rem; color: var(--mn-muted); font-size: .9375rem; line-height: 1.5; }\n.mn-pagehead-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-pagehead-meta > li { display: inline-flex; align-items: center; gap: .35rem; }\n.mn-pagehead-actions { display: flex; flex-wrap: wrap; gap: .5rem; }\n.mn-pagehead:has(> .mn-tab-list) { padding-bottom: 0; border-bottom: 0; }"
    },
    {
      "path": "mian/examples/page-header.html",
      "type": "registry:file",
      "target": "mian/examples/page-header.html",
      "content": "<!-- Detail page -->\n<header class=\"mn-pagehead\">\n  <nav class=\"mn-breadcrumbs\" aria-label=\"Breadcrumb\"><ol><li><a href=\"#\">Projects</a></li><li><a href=\"#\">Harbour office</a></li><li><span aria-current=\"page\">Fit-out</span></li></ol></nav>\n  <div class=\"mn-pagehead-row\">\n    <div><h1 class=\"mn-pagehead-title\">Fit-out, floors 2–4</h1>\n      <ul class=\"mn-pagehead-meta\"><li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/></svg> Ilse Brandt</li><li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M3 10h18M8 3v4M16 3v4\"/></svg> Due 14 Nov 2026</li><li><span class=\"mn-badge mn-badge-soft mn-success\">On track</span></li></ul></div>\n    <div class=\"mn-pagehead-actions\"><button class=\"mn-btn mn-btn-outline\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13\"/></svg> Share</button><button class=\"mn-btn\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg> Add task</button></div>\n  </div>\n</header>"
    }
  ],
  "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/page-header",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-pagehead",
        "mn-pagehead-row",
        "mn-pagehead-title · mn-pagehead-desc",
        "mn-pagehead-meta",
        "mn-pagehead-actions"
      ],
      "accessibility": [
        "The title is the page’s only <h1>.",
        "Breadcrumbs go in a <nav aria-label=\"Breadcrumb\"> above the title.",
        "Put the primary action last in the source so it sits at the end, where people look for it."
      ],
      "intents": [
        "app page header",
        "page title with actions",
        "detail page heading",
        "title and buttons",
        "record header"
      ]
    }
  }
}