{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mockup",
  "type": "registry:ui",
  "title": "Mockup (MIAN)",
  "description": "Browser, window and phone frames for screenshots, demos and landing pages.",
  "categories": [
    "layout & utilities",
    "mockup",
    "browser frame",
    "phone frame",
    "device"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/mockup.css",
      "type": "registry:file",
      "target": "mian/components/mockup.css",
      "content": ".mn-mockup-browser, .mn-mockup-window {\n  width: 100%; overflow: hidden;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-card); box-shadow: var(--mn-shadow-lg);\n}\n.mn-mockup-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-surface-2); }\n.mn-mockup-bar::before { content: \"\"; flex: none; width: 2.6rem; height: .7rem; background: radial-gradient(circle, var(--mn-input) 0 .3rem, transparent .32rem) 0 0 / .95rem .7rem repeat-x; }\n.mn-mockup-url { flex: 1; min-width: 0; max-width: 28rem; margin-inline: auto; padding: .3rem .75rem; border-radius: 999px; background: var(--mn-card); color: var(--mn-muted); font: 400 .75rem/1.2 var(--mn-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mn-mockup-body { padding: 1.25rem; }\n.mn-mockup-window .mn-mockup-body { background: var(--mn-fg); color: var(--mn-bg); font: 400 .8125rem/1.7 var(--mn-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }\n.mn-mockup-window .mn-mockup-bar { justify-content: flex-start; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font); }\n.mn-mockup-phone {\n  --_w: 17rem;\n  position: relative; width: min(var(--_w), 100%); aspect-ratio: 9 / 19; padding: .6rem;\n  border-radius: 2.6rem; background: var(--mn-fg); box-shadow: var(--mn-shadow-lg);\n}\n.mn-mockup-phone::before { content: \"\"; position: absolute; z-index: 1; top: 1.05rem; left: 50%; width: 30%; height: 1.35rem; translate: -50% 0; border-radius: 999px; background: var(--mn-fg); }\n.mn-mockup-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 2.05rem; background: var(--mn-bg); color: var(--mn-fg); }"
    },
    {
      "path": "mian/examples/mockup.html",
      "type": "registry:file",
      "target": "mian/examples/mockup.html",
      "content": "<!-- Browser -->\n<div class=\"mn-mockup-browser\" style=\"max-width:34rem;margin:auto\">\n  <div class=\"mn-mockup-bar\"><span class=\"mn-mockup-url\">mian.ro</span></div>\n  <div class=\"mn-mockup-body mn-stack\" style=\"--mn-gap:.75rem\"><h3 class=\"mn-h4\" style=\"margin:0\">Interfaces cooked differently.</h3><div class=\"mn-row\"><button class=\"mn-btn mn-btn-sm\">Get started</button><button class=\"mn-btn mn-btn-sm mn-btn-outline\">Components</button></div></div>\n</div>\n\n<!-- Window and phone -->\n<div class=\"mn-mockup-window\" style=\"max-width:22rem\">\n  <div class=\"mn-mockup-bar\">zsh</div>\n  <div class=\"mn-mockup-body\">$ curl -O https://mian.ro/r/calendar.json\n✓ calendar.json saved</div>\n</div>\n<div class=\"mn-mockup-phone\" style=\"--_w:11rem\"><div class=\"mn-mockup-screen\"><div style=\"padding:3rem 1rem 1rem\" class=\"mn-stack\"><strong>Mian</strong><div class=\"mn-progress\" role=\"progressbar\" aria-label=\"Loading\" aria-valuenow=\"60\" style=\"--_v:60%\"></div><button class=\"mn-btn mn-btn-sm mn-btn-block\">Continue</button></div></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/mockup",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-mockup-browser",
        "mn-mockup-window",
        "mn-mockup-phone"
      ],
      "accessibility": [
        "Frames are decoration: the content inside must make sense on its own. If a frame only holds an image, give the image good alt text."
      ],
      "intents": [
        "browser frame",
        "phone mockup",
        "app screenshot frame",
        "device frame"
      ]
    }
  }
}