{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comment-thread",
  "type": "registry:ui",
  "title": "Comment thread (MIAN)",
  "description": "Nested comments with replies, times and reply / like actions.",
  "categories": [
    "data display",
    "comments",
    "thread",
    "replies",
    "discussion"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/comment-thread.css",
      "type": "registry:file",
      "target": "mian/components/comment-thread.css",
      "content": ".mn-comments { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }\n.mn-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; }\n.mn-comment > .mn-avatar { grid-row: span 4; }\n.mn-comment > :not(.mn-avatar) { grid-column: 2; min-width: 0; margin: 0; }\n.mn-comment-head { font-size: var(--mn-text-sm); }\n.mn-comment-head strong { font-weight: 600; margin-inline-end: .35rem; }\n.mn-comment-head time { color: var(--mn-muted); }\n.mn-comment-body { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }\n.mn-comment-actions { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .8125rem; }\n.mn-comment-actions button { padding: .2rem 0; border: 0; background: none; color: var(--mn-muted); font: 500 .8125rem/1.2 var(--mn-font); cursor: pointer; }\n.mn-comment-actions button:hover { color: var(--mn-fg); }\n.mn-comment > .mn-comments { margin-top: .9rem !important; padding-inline-start: 1rem; border-inline-start: 2px solid var(--mn-border); }"
    },
    {
      "path": "mian/examples/comment-thread.html",
      "type": "registry:file",
      "target": "mian/examples/comment-thread.html",
      "content": "<!-- Thread -->\n<ul class=\"mn-comments\" style=\"max-width:34rem\">\n  <li class=\"mn-comment\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">JO</span><p class=\"mn-comment-head\"><strong>Jonas Olsen</strong><time datetime=\"2026-09-25T09:02\">1 h</time></p><p class=\"mn-comment-body\">“Decides once and every strand follows” is the best definition of a design token I have read.</p><div class=\"mn-comment-actions\"><button type=\"button\" aria-label=\"Reply to Jonas Olsen\">Reply</button><button type=\"button\">Like · 9</button></div>\n    <ul class=\"mn-comments\"><li class=\"mn-comment\"><span class=\"mn-avatar mn-avatar-sm mn-primary\" aria-hidden=\"true\">IS</span><p class=\"mn-comment-head\"><strong>Ilinca Sava</strong><time datetime=\"2026-09-25T09:20\">48 min</time></p><p class=\"mn-comment-body\">Stealing this for the book.</p><div class=\"mn-comment-actions\"><button type=\"button\" aria-label=\"Reply to Ilinca Sava\">Reply</button><button type=\"button\">Like · 3</button></div></li></ul>\n  </li>\n  <li class=\"mn-comment\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">LK</span><p class=\"mn-comment-head\"><strong>Lea Kim</strong><time datetime=\"2026-09-25T09:31\">37 min</time></p><p class=\"mn-comment-body\">Which counter was it? Asking for a lunch.</p><div class=\"mn-comment-actions\"><button type=\"button\" aria-label=\"Reply to Lea Kim\">Reply</button><button type=\"button\">Like · 1</button></div></li>\n</ul>"
    }
  ],
  "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/comment-thread",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-comments",
        "mn-comment"
      ],
      "accessibility": [
        "Nested lists convey who replied to whom; each comment starts with the author’s name.",
        "Put times in <time> and give action buttons names that include the author (“Reply to Jonas”)."
      ],
      "intents": [
        "comments",
        "replies",
        "discussion",
        "nested comments"
      ]
    }
  }
}