{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media",
  "type": "registry:ui",
  "title": "Media (MIAN)",
  "description": "Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come.",
  "categories": [
    "sections",
    "media",
    "image",
    "photo",
    "picture"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/media.css",
      "type": "registry:file",
      "target": "mian/components/media.css",
      "content": ".mn-media { position: relative; display: block; margin: 0; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; border-radius: var(--mn-radius-box); background-color: var(--mn-surface-2); color: var(--mn-muted); isolation: isolate; }\n.mn-media > img, .mn-media > video, .mn-media > svg, .mn-media > picture, .mn-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.mn-media-auto { aspect-ratio: auto; }\n.mn-media-square { --ratio: 1; } .mn-media-portrait { --ratio: 4 / 5; } .mn-media-wide { --ratio: 21 / 9; }\n.mn-media-flat { border-radius: 0; }\n.mn-media-placeholder {\n  display: grid; place-items: center; padding: 1.5rem; text-align: center;\n  font: 500 .75rem/1.5 var(--mn-font-mono); letter-spacing: .01em; text-wrap: balance;\n  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--mn-fg) 6%, transparent) 0 1px, transparent 1px 10px);\n}\n.mn-caption { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mn-muted); }\n.mn-media > .mn-media-tag { position: absolute; left: .75rem; bottom: .75rem; z-index: 1; }"
    },
    {
      "path": "mian/examples/media.html",
      "type": "registry:file",
      "target": "mian/examples/media.html",
      "content": "<!-- Media, caption and placeholder -->\n<div class=\"mn-grid\" style=\"--mn-min:14rem;max-width:44rem\">\n  <figure style=\"margin:0\"><div class=\"mn-media\" style=\"--ratio:4/3\"><svg viewBox=\"0 0 400 320\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" aria-label=\"Illustration: three ceramic vases\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"400\" height=\"320\" fill=\"var(--mn-surface-2)\"/>\n<rect y=\"262\" width=\"400\" height=\"58\" fill=\"color-mix(in srgb, var(--mn-fg) 7%, var(--mn-surface-2))\"/>\n<path d=\"M88 262c-30-24-34-70-10-96 8-9 10-20 6-34h40c-4 14-2 25 6 34 24 26 20 72-10 96Z\" fill=\"var(--mn-primary)\"/>\n<path d=\"M186 262c-22-4-36-24-34-58 2-40 22-70 26-110h40c4 40 24 70 26 110 2 34-12 54-34 58Z\" fill=\"var(--mn-surface)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/>\n<path d=\"M170 150h56\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\" opacity=\".35\"/>\n<path d=\"M270 262c-6-30 0-64 22-84h52c22 20 28 54 22 84Z\" fill=\"var(--mn-accent)\"/>\n<ellipse cx=\"318\" cy=\"178\" rx=\"26\" ry=\"6\" fill=\"color-mix(in srgb, #000 22%, var(--mn-accent))\"/></svg></div><figcaption class=\"mn-caption\">Illustrations are drawn with noodle tokens, so they re-colour with it.</figcaption></figure>\n  <figure style=\"margin:0\"><div class=\"mn-media mn-media-placeholder\" style=\"--ratio:4/3\" role=\"img\" aria-label=\"Photo: the potter trimming a bowl on the wheel, hands in focus\">Photo: the potter trimming a bowl on the wheel, hands in focus</div><figcaption class=\"mn-caption\">A placeholder says exactly which photo belongs here.</figcaption></figure>\n</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/media",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-media",
        "mn-media-square · mn-media-portrait · mn-media-wide · mn-media-auto",
        "mn-media-flat",
        "mn-media-placeholder",
        "mn-caption"
      ],
      "accessibility": [
        "Every meaningful image needs alt text that says what it shows; decorative images use alt=\"\".",
        "Use <figure> and <figcaption class=\"mn-caption\"> when a caption belongs to the image.",
        "Replace placeholders before launch: they describe the image you need, which also makes good alt text."
      ],
      "intents": [
        "large image",
        "video",
        "photo with caption",
        "image placeholder",
        "screenshot",
        "illustration"
      ]
    }
  }
}