{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "peer-discussion-forum",
  "title": "Peer Discussion Forum",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/peer-discussion-forum/PeerDiscussionForum.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  ArrowUpRight,\n  Bell,\n  BellOff,\n  Bold,\n  Bookmark,\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  ChevronUp,\n  Code,\n  Copy,\n  Eye,\n  Flag,\n  Italic,\n  Link2,\n  List,\n  MessageSquare,\n  Plus,\n  Quote,\n  Share2,\n  BookOpen,\n  Tag,\n  ThumbsUp,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\n// Question State\nconst questionScore = ref(42)\nconst questionVote = ref<'up' | 'down' | null>(null)\nconst isQuestionBookmarked = ref(false)\nconst isSubscribed = ref(true)\nconst copiedQuestionSnippet = ref(false)\nconst copiedLink = ref(false)\n\nfunction voteQuestion(type: 'up' | 'down') {\n  if (questionVote.value === type) {\n    questionVote.value = null\n    questionScore.value += type === 'up' ? -1 : 1\n  } else {\n    if (questionVote.value === 'up') questionScore.value -= 1\n    if (questionVote.value === 'down') questionScore.value += 1\n    questionVote.value = type\n    questionScore.value += type === 'up' ? 1 : -1\n  }\n}\n\n// Answer 1 State (Accepted Instructor Answer)\nconst answer1Score = ref(89)\nconst answer1Vote = ref<'up' | 'down' | null>(null)\nconst isAnswer1Bookmarked = ref(false)\nconst copiedAnswer1Snippet = ref(false)\n\nfunction voteAnswer1(type: 'up' | 'down') {\n  if (answer1Vote.value === type) {\n    answer1Vote.value = null\n    answer1Score.value += type === 'up' ? -1 : 1\n  } else {\n    if (answer1Vote.value === 'up') answer1Score.value -= 1\n    if (answer1Vote.value === 'down') answer1Score.value += 1\n    answer1Vote.value = type\n    answer1Score.value += type === 'up' ? 1 : -1\n  }\n}\n\n// Answer 2 State (Peer Response)\nconst answer2Score = ref(14)\nconst answer2Vote = ref<'up' | 'down' | null>(null)\nconst isAnswer2Bookmarked = ref(false)\n\nfunction voteAnswer2(type: 'up' | 'down') {\n  if (answer2Vote.value === type) {\n    answer2Vote.value = null\n    answer2Score.value += type === 'up' ? -1 : 1\n  } else {\n    if (answer2Vote.value === 'up') answer2Score.value -= 1\n    if (answer2Vote.value === 'down') answer2Score.value += 1\n    answer2Vote.value = type\n    answer2Score.value += type === 'up' ? 1 : -1\n  }\n}\n\n// Dynamic Answers\ninterface CommunityAnswer {\n  id: string\n  authorName: string\n  authorRole: string\n  avatarText: string\n  postedTime: string\n  score: number\n  content: string\n  userVote?: 'up' | 'down' | null\n}\n\nconst customAnswers = ref<CommunityAnswer[]>([])\nconst replyDraft = ref('')\n\nfunction applyFormat(type: 'bold' | 'italic' | 'code' | 'link' | 'list' | 'quote') {\n  if (type === 'bold') {\n    replyDraft.value = replyDraft.value ? `${replyDraft.value} **bold text**` : '**bold text**'\n  } else if (type === 'italic') {\n    replyDraft.value = replyDraft.value ? `${replyDraft.value} *italic text*` : '*italic text*'\n  } else if (type === 'code') {\n    replyDraft.value = replyDraft.value\n      ? `${replyDraft.value}\\n\\`\\`\\`ts\\n// your code snippet here\\n\\`\\`\\`\\n`\n      : '```ts\\n// your code snippet here\\n```\\n'\n  } else if (type === 'link') {\n    replyDraft.value = replyDraft.value\n      ? `${replyDraft.value} [link title](https://example.com)`\n      : '[link title](https://example.com)'\n  } else if (type === 'list') {\n    replyDraft.value = replyDraft.value\n      ? `${replyDraft.value}\\n- Key insight 1\\n- Key insight 2`\n      : '- Key insight 1\\n- Key insight 2'\n  } else if (type === 'quote') {\n    replyDraft.value = replyDraft.value\n      ? `${replyDraft.value}\\n> Quote from documentation`\n      : '> Quote from documentation'\n  }\n}\n\nfunction handlePostAnswer() {\n  const text = replyDraft.value.trim()\n  if (!text) return\n  customAnswers.value.push({\n    id: `ans-${Date.now()}`,\n    authorName: 'Alex Rivera',\n    authorRole: 'Peer Student',\n    avatarText: 'AR',\n    postedTime: 'Just now',\n    score: 1,\n    content: text,\n    userVote: 'up',\n  })\n  replyDraft.value = ''\n}\n\nfunction voteCustomAnswer(ans: CommunityAnswer, type: 'up' | 'down') {\n  if (ans.userVote === type) {\n    ans.userVote = null\n    ans.score += type === 'up' ? -1 : 1\n  } else {\n    if (ans.userVote === 'up') ans.score -= 1\n    if (ans.userVote === 'down') ans.score += 1\n    ans.userVote = type\n    ans.score += type === 'up' ? 1 : -1\n  }\n}\n\nfunction copyQuestionCode() {\n  copiedQuestionSnippet.value = true\n  setTimeout(() => {\n    copiedQuestionSnippet.value = false\n  }, 2000)\n}\n\nfunction copyAnswer1Code() {\n  copiedAnswer1Snippet.value = true\n  setTimeout(() => {\n    copiedAnswer1Snippet.value = false\n  }, 2000)\n}\n\nfunction shareThread() {\n  copiedLink.value = true\n  setTimeout(() => {\n    copiedLink.value = false\n  }, 2000)\n}\n\nconst totalAnswersCount = computed(() => 2 + customAnswers.value.length)\n</script>\n\n<template>\n  <div data-slot=\"peer-discussion-forum\" :class=\"cn('bg-background text-foreground w-full space-y-6', props.class)\">\n    <!-- Top Navigation & Breadcrumb Header -->\n    <header class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n      <div class=\"flex flex-col gap-4\">\n        <!-- Breadcrumb & Top Action -->\n        <div class=\"flex flex-wrap items-center justify-between gap-3\">\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs\">\n            <span>CS-314 Advanced Frontend Architecture</span>\n            <span class=\"text-border\">/</span>\n            <span>Discussions</span>\n            <span class=\"text-border\">/</span>\n            <span class=\"text-foreground font-mono font-medium\">#DISC-2048</span>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"shareThread\">\n              <Share2 class=\"size-3.5\" />\n              <span>{{ copiedLink ? 'Link Copied!' : 'Share Thread' }}</span>\n            </Button>\n            <Button size=\"sm\" class=\"gap-1.5 text-xs font-medium\">\n              <Plus class=\"size-3.5\" />\n              Ask Question\n            </Button>\n          </div>\n        </div>\n\n        <!-- Thread Title & Status Row -->\n        <div class=\"space-y-2.5\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1 text-xs font-semibold\">\n              <CheckCircle2 class=\"text-success size-3.5\" />\n              Solved · 1 Accepted Answer\n            </Badge>\n            <Badge variant=\"secondary\" class=\"text-xs font-medium\"> Vue 3.5 & Vite </Badge>\n          </div>\n\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl lg:text-3xl\">\n            How to properly avoid circular dependencies in Vue 3.5 SFC variants with CVA?\n          </h1>\n\n          <!-- Tags List -->\n          <div class=\"flex flex-wrap items-center gap-1.5 pt-1\">\n            <span\n              class=\"bg-muted/70 text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors\"\n            >\n              <Tag class=\"text-muted-foreground size-3\" />\n              #architecture\n            </span>\n            <span\n              class=\"bg-muted/70 text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors\"\n            >\n              <Tag class=\"text-muted-foreground size-3\" />\n              #reka-ui\n            </span>\n            <span\n              class=\"bg-muted/70 text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors\"\n            >\n              <Tag class=\"text-muted-foreground size-3\" />\n              #typescript\n            </span>\n            <span\n              class=\"bg-muted/70 text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors\"\n            >\n              <Tag class=\"text-muted-foreground size-3\" />\n              #cva\n            </span>\n          </div>\n        </div>\n\n        <Separator />\n\n        <!-- Metadata Strip -->\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-xs\">\n          <div>\n            <span>Asked </span>\n            <strong class=\"text-foreground font-medium\">2 days ago</strong>\n          </div>\n          <div>\n            <span>Modified </span>\n            <strong class=\"text-foreground font-medium\">18 hours ago</strong>\n          </div>\n          <div>\n            <span>Viewed </span>\n            <strong class=\"text-foreground font-medium tabular-nums\">1,420 times</strong>\n          </div>\n          <div>\n            <span>Module </span>\n            <strong class=\"text-foreground font-medium\">Component Registry Architecture</strong>\n          </div>\n        </div>\n      </div>\n    </header>\n\n    <!-- 2-Column Main Workspace -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Discussion Thread & Answers (8 cols) -->\n      <main class=\"space-y-6 lg:col-span-8\">\n        <!-- Question Post Card -->\n        <article class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div class=\"flex items-start gap-4 sm:gap-6\">\n            <!-- Upvote / Downvote Counter Widget -->\n            <div class=\"flex flex-col items-center\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                :class=\"[\n                  'size-9 rounded-lg border',\n                  questionVote === 'up'\n                    ? 'border-primary bg-primary/10 text-primary hover:bg-primary/20'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Upvote question\"\n                @click=\"voteQuestion('up')\"\n              >\n                <ChevronUp class=\"size-5\" />\n              </Button>\n              <span class=\"text-foreground my-1.5 font-mono text-base font-bold tabular-nums\">\n                {{ questionScore }}\n              </span>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                :class=\"[\n                  'size-9 rounded-lg border',\n                  questionVote === 'down'\n                    ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/20'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Downvote question\"\n                @click=\"voteQuestion('down')\"\n              >\n                <ChevronDown class=\"size-5\" />\n              </Button>\n\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                :class=\"[\n                  'mt-3 size-8 rounded-md',\n                  isQuestionBookmarked ? 'text-primary' : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Bookmark question\"\n                @click=\"isQuestionBookmarked = !isQuestionBookmarked\"\n              >\n                <Bookmark class=\"size-4\" :class=\"isQuestionBookmarked ? 'fill-current' : ''\" />\n              </Button>\n            </div>\n\n            <!-- Question Body & Author Meta -->\n            <div class=\"min-w-0 flex-1 space-y-4\">\n              <!-- Author Header -->\n              <div class=\"flex flex-wrap items-center justify-between gap-2 border-b pb-3.5\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar class=\"size-10 border\">\n                    <AvatarFallback class=\"bg-primary/10 text-primary text-xs font-semibold\">DC</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-semibold\">David Chen</span>\n                      <Badge variant=\"secondary\" class=\"text-xs font-normal\">Student</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">Posted 2 days ago · Oct 22, 2026 at 14:32</p>\n                  </div>\n                </div>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  :class=\"['h-7 gap-1.5 text-xs', isSubscribed ? 'text-primary' : 'text-muted-foreground']\"\n                  @click=\"isSubscribed = !isSubscribed\"\n                >\n                  <Bell v-if=\"isSubscribed\" class=\"size-3.5\" />\n                  <BellOff v-else class=\"size-3.5\" />\n                  <span>{{ isSubscribed ? 'Subscribed' : 'Subscribe' }}</span>\n                </Button>\n              </div>\n\n              <!-- Problem Narrative Prose -->\n              <div class=\"text-foreground/90 space-y-3.5 text-sm leading-relaxed\">\n                <p>\n                  While implementing unbundled UI primitives for our course project using Vue 3.5, TypeScript, and\n                  <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\"\n                    >class-variance-authority</code\n                  >, we ran into a perplexing runtime error during dev SSR and fast refresh:\n                </p>\n\n                <div\n                  class=\"border-destructive/30 bg-destructive/10 text-destructive text-destructive rounded-md border px-3.5 py-2.5 font-mono text-xs\"\n                >\n                  TypeError: $setup.buttonVariants is not a function at Button.vue:24\n                </div>\n\n                <p>\n                  Our initial project structure placed both the component export and the CVA variant definition in the\n                  same barrel file:\n                </p>\n\n                <!-- Problem Code Snippet Block -->\n                <div class=\"overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100\">\n                  <div\n                    class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3.5 py-2 text-xs text-zinc-400\"\n                  >\n                    <div class=\"flex items-center gap-2\">\n                      <Code class=\"text-warning size-3.5\" />\n                      <span class=\"font-mono text-xs\">components/ui/button/index.ts (Problematic Barrel)</span>\n                    </div>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                      @click=\"copyQuestionCode\"\n                    >\n                      <Check v-if=\"copiedQuestionSnippet\" class=\"text-success size-3\" />\n                      <Copy v-else class=\"size-3\" />\n                      {{ copiedQuestionSnippet ? 'Copied' : 'Copy code' }}\n                    </Button>\n                  </div>\n                  <pre\n                    class=\"overflow-x-auto p-4 font-mono text-xs leading-relaxed text-zinc-300\"\n                  ><code><span class=\"text-zinc-500\">// ❌ Circular dependency: index.ts re-exports Button.vue, while Button.vue imports buttonVariants from index.ts</span>\n<span class=\"text-chart-1\">import</span> { cva } <span class=\"text-chart-1\">from</span> <span class=\"text-success\">'class-variance-authority'</span>\n\n<span class=\"text-chart-1\">export</span> { <span class=\"text-chart-1\">default</span> <span class=\"text-chart-1\">as</span> Button } <span class=\"text-chart-1\">from</span> <span class=\"text-success\">'./Button.vue'</span>\n\n<span class=\"text-chart-1\">export</span> <span class=\"text-info\">const</span> buttonVariants = <span class=\"text-chart-2\">cva</span>(\n  <span class=\"text-success\">'inline-flex items-center justify-center font-medium transition-colors'</span>,\n  {\n    variants: {\n      variant: {\n        default: <span class=\"text-success\">'bg-primary text-primary-foreground shadow-xs'</span>,\n        outline: <span class=\"text-success\">'border border-input bg-background hover:bg-accent'</span>,\n      },\n    },\n  }\n)</code></pre>\n                </div>\n\n                <p>\n                  Because\n                  <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">Button.vue</code>\n                  imports\n                  <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">buttonVariants</code>\n                  from <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">./index.ts</code>,\n                  Vite evaluates the module in a cycle where the variant function binding is uninitialized during the\n                  Vue SFC component setup.\n                </p>\n                <p>\n                  What is the canonical architecture pattern to cleanly break this circular import while maintaining\n                  convenient barrel exports for consumers?\n                </p>\n              </div>\n\n              <!-- Question Action Bar -->\n              <div class=\"flex flex-wrap items-center justify-between gap-3 pt-2\">\n                <div class=\"flex items-center gap-1\">\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    class=\"text-muted-foreground h-8 gap-1.5 text-xs\"\n                    @click=\"shareThread\"\n                  >\n                    <Share2 class=\"size-3.5\" />\n                    <span>Share</span>\n                  </Button>\n                  <Button variant=\"ghost\" size=\"sm\" class=\"text-muted-foreground h-8 gap-1.5 text-xs\">\n                    <Flag class=\"size-3.5\" />\n                    <span>Report</span>\n                  </Button>\n                </div>\n\n                <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                  <Eye class=\"size-3.5\" />\n                  <span class=\"tabular-nums\">1.4k views</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </article>\n\n        <!-- Answers Section Header -->\n        <div class=\"flex items-center justify-between pt-2\">\n          <h2 class=\"text-foreground text-lg font-bold tracking-tight sm:text-xl\">{{ totalAnswersCount }} Answers</h2>\n          <span class=\"text-muted-foreground text-xs\">\n            Sorted by: <strong class=\"text-foreground font-medium\">Highest score</strong>\n          </span>\n        </div>\n\n        <!-- Answer 1: Accepted Instructor Answer -->\n        <article\n          class=\"bg-card border-success/40 ring-success/20 relative overflow-hidden rounded-xl border shadow-xs ring-1\"\n        >\n          <!-- Accepted Solution Top Ribbon -->\n          <div\n            class=\"border-success/20 bg-success/10 flex flex-wrap items-center justify-between gap-2 border-b px-5 py-2.5\"\n          >\n            <div class=\"text-success flex items-center gap-2 text-xs font-semibold\">\n              <CheckCircle2 class=\"text-success size-4\" />\n              <span>Accepted by Author · Verified Solution</span>\n            </div>\n            <Badge class=\"bg-success hover:bg-success text-xs font-medium text-white\"> Instructor Solution </Badge>\n          </div>\n\n          <div class=\"p-5 sm:p-6\">\n            <div class=\"flex items-start gap-4 sm:gap-6\">\n              <!-- Upvote Widget with Checkmark Badge -->\n              <div class=\"flex flex-col items-center\">\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  :class=\"[\n                    'size-9 rounded-lg border',\n                    answer1Vote === 'up'\n                      ? 'border-success bg-success/10 text-success hover:bg-success/20 text-success'\n                      : 'text-muted-foreground hover:text-foreground',\n                  ]\"\n                  aria-label=\"Upvote answer\"\n                  @click=\"voteAnswer1('up')\"\n                >\n                  <ChevronUp class=\"size-5\" />\n                </Button>\n                <span class=\"text-foreground my-1.5 font-mono text-base font-bold tabular-nums\">\n                  {{ answer1Score }}\n                </span>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  :class=\"[\n                    'size-9 rounded-lg border',\n                    answer1Vote === 'down'\n                      ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/20'\n                      : 'text-muted-foreground hover:text-foreground',\n                  ]\"\n                  aria-label=\"Downvote answer\"\n                  @click=\"voteAnswer1('down')\"\n                >\n                  <ChevronDown class=\"size-5\" />\n                </Button>\n\n                <!-- Accepted Checkmark Pill -->\n                <div\n                  class=\"bg-success/15 text-success mt-3 flex size-8 items-center justify-center rounded-full\"\n                  title=\"Accepted solution\"\n                >\n                  <Check class=\"size-4 stroke-[2.5]\" />\n                </div>\n              </div>\n\n              <!-- Answer Body -->\n              <div class=\"min-w-0 flex-1 space-y-4\">\n                <!-- Author Header -->\n                <div class=\"flex flex-wrap items-center justify-between gap-2 border-b pb-3.5\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar class=\"border-success/30 size-10 border\">\n                      <AvatarFallback class=\"bg-success/20 text-success text-xs font-semibold\"> MV </AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <div class=\"flex items-center gap-2\">\n                        <span class=\"text-foreground text-sm font-semibold\">Marcus Vance</span>\n                        <Badge\n                          variant=\"outline\"\n                          class=\"border-success/30 bg-success/10 text-success text-xs font-medium\"\n                        >\n                          Course Instructor\n                        </Badge>\n                        <Badge variant=\"secondary\" class=\"text-xs\">Staff</Badge>\n                      </div>\n                      <p class=\"text-muted-foreground text-xs\">Answered 1 day ago · Edited 18h ago</p>\n                    </div>\n                  </div>\n\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    class=\"text-muted-foreground h-7 gap-1 text-xs\"\n                    @click=\"isAnswer1Bookmarked = !isAnswer1Bookmarked\"\n                  >\n                    <Bookmark class=\"size-3.5\" :class=\"isAnswer1Bookmarked ? 'fill-primary text-primary' : ''\" />\n                    <span>{{ isAnswer1Bookmarked ? 'Saved' : 'Save' }}</span>\n                  </Button>\n                </div>\n\n                <!-- Solution Content Prose -->\n                <div class=\"text-foreground/90 space-y-3.5 text-sm leading-relaxed\">\n                  <p>\n                    Great question, David. This is one of the most frequent traps when building unbundled component\n                    registries with Vue 3.5 and Vite.\n                  </p>\n                  <p>\n                    The Vue SFC compiler compiles\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\"\n                      >&lt;script setup&gt;</code\n                    >\n                    into a self-contained ES module execution wrapper. When\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">Button.vue</code>\n                    imports from\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">./index.ts</code>,\n                    and\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">index.ts</code>\n                    simultaneously imports\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">Button.vue</code>,\n                    JavaScript enters a Temporal Dead Zone (TDZ) for the uninitialized\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\">buttonVariants</code>\n                    export.\n                  </p>\n\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight\">\n                    The Solution: Three-File Sidecar Architecture\n                  </h3>\n\n                  <p>\n                    To completely eliminate cyclic dependencies and ensure 100% reliable SSR and Vite HMR, extract all\n                    CVA definitions into a dedicated\n                    <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\"\n                      >&lt;name&gt;.variants.ts</code\n                    >\n                    file:\n                  </p>\n\n                  <!-- Solution Code Snippet 1 -->\n                  <div class=\"overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100\">\n                    <div\n                      class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3.5 py-2 text-xs text-zinc-400\"\n                    >\n                      <div class=\"flex items-center gap-2\">\n                        <Code class=\"text-success size-3.5\" />\n                        <span class=\"font-mono text-xs\">components/ui/button/button.variants.ts</span>\n                      </div>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                        @click=\"copyAnswer1Code\"\n                      >\n                        <Check v-if=\"copiedAnswer1Snippet\" class=\"text-success size-3\" />\n                        <Copy v-else class=\"size-3\" />\n                        {{ copiedAnswer1Snippet ? 'Copied' : 'Copy code' }}\n                      </Button>\n                    </div>\n                    <pre\n                      class=\"overflow-x-auto p-4 font-mono text-xs leading-relaxed text-zinc-300\"\n                    ><code><span class=\"text-chart-1\">import</span> { cva, <span class=\"text-chart-1\">type</span> VariantProps } <span class=\"text-chart-1\">from</span> <span class=\"text-success\">'class-variance-authority'</span>\n\n<span class=\"text-chart-1\">export</span> <span class=\"text-info\">const</span> buttonVariants = <span class=\"text-chart-2\">cva</span>(\n  <span class=\"text-success\">'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none'</span>,\n  {\n    variants: {\n      variant: {\n        default: <span class=\"text-success\">'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90'</span>,\n        secondary: <span class=\"text-success\">'bg-secondary text-secondary-foreground hover:bg-secondary/80'</span>,\n        outline: <span class=\"text-success\">'border border-input bg-background hover:bg-accent hover:text-accent-foreground'</span>,\n        destructive: <span class=\"text-success\">'bg-destructive text-destructive-foreground hover:bg-destructive/90'</span>,\n      },\n      size: {\n        default: <span class=\"text-success\">'h-9 px-4 py-2 text-sm'</span>,\n        sm: <span class=\"text-success\">'h-8 px-3 text-xs rounded-md'</span>,\n        lg: <span class=\"text-success\">'h-10 px-8 text-base rounded-md'</span>,\n      },\n    },\n    defaultVariants: {\n      variant: <span class=\"text-success\">'default'</span>,\n      size: <span class=\"text-success\">'default'</span>,\n    },\n  }\n)\n\n<span class=\"text-chart-1\">export</span> <span class=\"text-chart-1\">type</span> ButtonVariants = <span class=\"text-chart-2\">VariantProps</span>&lt;<span class=\"text-chart-1\">typeof</span> buttonVariants&gt;</code></pre>\n                  </div>\n\n                  <!-- Companion Barrel & SFC Snippet -->\n                  <div class=\"overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100\">\n                    <div\n                      class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3.5 py-2 text-xs text-zinc-400\"\n                    >\n                      <div class=\"flex items-center gap-2\">\n                        <Code class=\"text-info size-3.5\" />\n                        <span class=\"font-mono text-xs\">components/ui/button/index.ts &amp; Button.vue</span>\n                      </div>\n                    </div>\n                    <pre\n                      class=\"overflow-x-auto p-4 font-mono text-xs leading-relaxed text-zinc-300\"\n                    ><code><span class=\"text-zinc-500\">// index.ts — Clean consumer re-exports</span>\n<span class=\"text-chart-1\">export</span> { <span class=\"text-chart-1\">default</span> <span class=\"text-chart-1\">as</span> Button } <span class=\"text-chart-1\">from</span> <span class=\"text-success\">'./Button.vue'</span>\n<span class=\"text-chart-1\">export</span> { buttonVariants, <span class=\"text-chart-1\">type</span> ButtonVariants } <span class=\"text-chart-1\">from</span> <span class=\"text-success\">'./button.variants'</span>\n\n<span class=\"text-zinc-500\">// In Button.vue &lt;script setup lang=\"ts\"&gt;</span>\n<span class=\"text-chart-1\">import</span> { buttonVariants, <span class=\"text-chart-1\">type</span> ButtonVariants } <span class=\"text-chart-1\">from</span> <span class=\"text-success\">'./button.variants'</span> <span class=\"text-zinc-500\">// ✅ Direct sibling import</span></code></pre>\n                  </div>\n\n                  <ul class=\"list-inside list-disc space-y-1.5 pl-1 text-xs sm:text-sm\">\n                    <li>\n                      <strong>Acyclic Dependency Graph:</strong>\n                      <code class=\"bg-muted text-foreground rounded px-1 font-mono text-xs\">Button.vue</code> imports\n                      strictly from\n                      <code class=\"bg-muted text-foreground rounded px-1 font-mono text-xs\">./button.variants</code>.\n                    </li>\n                    <li>\n                      <strong>Tree-Shakable:</strong> Consumers can import just the variant generator without mounting\n                      the Vue SFC component instance.\n                    </li>\n                    <li>\n                      <strong>Cross-Framework Ready:</strong> The variant file is pure TypeScript, making it 100%\n                      shareable across Vue and React registry packages.\n                    </li>\n                  </ul>\n                </div>\n\n                <!-- Action Bar -->\n                <div class=\"flex items-center justify-between border-t pt-3\">\n                  <div class=\"flex items-center gap-2\">\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1.5 text-xs\" @click=\"voteAnswer1('up')\">\n                      <ThumbsUp class=\"size-3\" />\n                      <span>Helpful ({{ answer1Score }})</span>\n                    </Button>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      class=\"text-muted-foreground h-7 gap-1.5 text-xs\"\n                      @click=\"shareThread\"\n                    >\n                      <Share2 class=\"size-3\" />\n                      <span>Share</span>\n                    </Button>\n                  </div>\n                  <span class=\"text-muted-foreground text-xs\">89 students found this helpful</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </article>\n\n        <!-- Answer 2: Peer Response -->\n        <article class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div class=\"flex items-start gap-4 sm:gap-6\">\n            <!-- Upvote Widget -->\n            <div class=\"flex flex-col items-center\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                :class=\"[\n                  'size-9 rounded-lg border',\n                  answer2Vote === 'up'\n                    ? 'border-primary bg-primary/10 text-primary hover:bg-primary/20'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Upvote answer\"\n                @click=\"voteAnswer2('up')\"\n              >\n                <ChevronUp class=\"size-5\" />\n              </Button>\n              <span class=\"text-foreground my-1.5 font-mono text-base font-bold tabular-nums\">\n                {{ answer2Score }}\n              </span>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                :class=\"[\n                  'size-9 rounded-lg border',\n                  answer2Vote === 'down'\n                    ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/20'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Downvote answer\"\n                @click=\"voteAnswer2('down')\"\n              >\n                <ChevronDown class=\"size-5\" />\n              </Button>\n            </div>\n\n            <!-- Answer Body -->\n            <div class=\"min-w-0 flex-1 space-y-4\">\n              <!-- Author Header -->\n              <div class=\"flex flex-wrap items-center justify-between gap-2 border-b pb-3.5\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar class=\"size-10 border\">\n                    <AvatarFallback class=\"bg-info/20 text-info text-xs font-semibold\"> SL </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-semibold\">Sophia Lin</span>\n                      <Badge variant=\"secondary\" class=\"text-xs font-normal\">Teaching Assistant</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">Answered 2 days ago · Oct 22, 2026 at 18:40</p>\n                  </div>\n                </div>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-muted-foreground h-7 gap-1 text-xs\"\n                  @click=\"isAnswer2Bookmarked = !isAnswer2Bookmarked\"\n                >\n                  <Bookmark class=\"size-3.5\" :class=\"isAnswer2Bookmarked ? 'fill-primary text-primary' : ''\" />\n                  <span>{{ isAnswer2Bookmarked ? 'Saved' : 'Save' }}</span>\n                </Button>\n              </div>\n\n              <!-- Content Prose -->\n              <div class=\"text-foreground/90 space-y-3 text-sm leading-relaxed\">\n                <p>\n                  Adding to Marcus's answer: another huge benefit of isolating\n                  <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-xs\"\n                    >&lt;name&gt;.variants.ts</code\n                  >\n                  is for monorepos or dual-framework setups.\n                </p>\n                <p>\n                  When you have both Vue and React registry components (like in UIPKGE), the variant definitions can be\n                  shared verbatim in a shared token package without bringing in any Vue SFC or JSX compiler\n                  dependencies. This keeps design tokens consistent across both stacks.\n                </p>\n              </div>\n\n              <!-- Action Bar -->\n              <div class=\"flex items-center justify-between border-t pt-3\">\n                <div class=\"flex items-center gap-2\">\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1.5 text-xs\" @click=\"voteAnswer2('up')\">\n                    <ThumbsUp class=\"size-3\" />\n                    <span>Helpful ({{ answer2Score }})</span>\n                  </Button>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    class=\"text-muted-foreground h-7 gap-1.5 text-xs\"\n                    @click=\"shareThread\"\n                  >\n                    <Share2 class=\"size-3\" />\n                    <span>Share</span>\n                  </Button>\n                </div>\n                <span class=\"text-muted-foreground text-xs\">14 students found this helpful</span>\n              </div>\n            </div>\n          </div>\n        </article>\n\n        <!-- Dynamic User Submitted Answers -->\n        <article v-for=\"ans in customAnswers\" :key=\"ans.id\" class=\"bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div class=\"flex items-start gap-4 sm:gap-6\">\n            <!-- Upvote Widget -->\n            <div class=\"flex flex-col items-center\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                :class=\"[\n                  'size-9 rounded-lg border',\n                  ans.userVote === 'up'\n                    ? 'border-primary bg-primary/10 text-primary'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Upvote answer\"\n                @click=\"voteCustomAnswer(ans, 'up')\"\n              >\n                <ChevronUp class=\"size-5\" />\n              </Button>\n              <span class=\"text-foreground my-1.5 font-mono text-base font-bold tabular-nums\">\n                {{ ans.score }}\n              </span>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                :class=\"[\n                  'size-9 rounded-lg border',\n                  ans.userVote === 'down'\n                    ? 'border-destructive bg-destructive/10 text-destructive'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                aria-label=\"Downvote answer\"\n                @click=\"voteCustomAnswer(ans, 'down')\"\n              >\n                <ChevronDown class=\"size-5\" />\n              </Button>\n            </div>\n\n            <!-- Answer Body -->\n            <div class=\"min-w-0 flex-1 space-y-4\">\n              <!-- Author Header -->\n              <div class=\"flex items-center justify-between border-b pb-3.5\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar class=\"size-10 border\">\n                    <AvatarFallback class=\"bg-primary/10 text-primary text-xs font-semibold\">\n                      {{ ans.avatarText }}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-semibold\">{{ ans.authorName }}</span>\n                      <Badge variant=\"secondary\" class=\"text-xs\">{{ ans.authorRole }}</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">{{ ans.postedTime }}</p>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Content Prose -->\n              <div class=\"text-foreground/90 text-sm leading-relaxed whitespace-pre-wrap\">\n                {{ ans.content }}\n              </div>\n            </div>\n          </div>\n        </article>\n\n        <!-- Reply / Answer Composer -->\n        <section class=\"bg-card overflow-hidden rounded-xl border shadow-xs\">\n          <div class=\"bg-muted/40 border-b px-5 py-3\">\n            <h3 class=\"text-foreground text-base font-bold tracking-tight\">Post Your Answer</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Provide thorough explanations, actionable code examples, and reference architectural best practices.\n            </p>\n          </div>\n\n          <div class=\"space-y-3.5 p-5\">\n            <!-- Formatting Toolbar -->\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-1 border-b pb-2.5\">\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-7\" aria-label=\"Format bold\" @click=\"applyFormat('bold')\">\n                <Bold class=\"size-3.5\" />\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"size-7\"\n                aria-label=\"Format italic\"\n                @click=\"applyFormat('italic')\"\n              >\n                <Italic class=\"size-3.5\" />\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"size-7\"\n                aria-label=\"Insert code block\"\n                @click=\"applyFormat('code')\"\n              >\n                <Code class=\"size-3.5\" />\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-7\" aria-label=\"Insert link\" @click=\"applyFormat('link')\">\n                <Link2 class=\"size-3.5\" />\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-7\" aria-label=\"Insert list\" @click=\"applyFormat('list')\">\n                <List class=\"size-3.5\" />\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"size-7\"\n                aria-label=\"Insert blockquote\"\n                @click=\"applyFormat('quote')\"\n              >\n                <Quote class=\"size-3.5\" />\n              </Button>\n              <span class=\"text-muted-foreground ml-auto text-xs\">Markdown syntax supported</span>\n            </div>\n\n            <!-- Rich Textarea -->\n            <Textarea\n              v-model=\"replyDraft\"\n              placeholder=\"Write your detailed answer with code blocks (e.g. ```ts ... ```)...\"\n              rows=\"6\"\n              class=\"resize-y font-sans text-sm\"\n            />\n\n            <!-- Post Button & Guidelines -->\n            <div class=\"flex flex-wrap items-center justify-between gap-3 pt-1\">\n              <span class=\"text-muted-foreground text-xs\">\n                Draft saved automatically · Be constructive &amp; cite official docs\n              </span>\n              <Button class=\"gap-1.5 text-xs font-semibold\" :disabled=\"!replyDraft.trim()\" @click=\"handlePostAnswer\">\n                <MessageSquare class=\"size-3.5\" />\n                Post Your Answer\n              </Button>\n            </div>\n          </div>\n        </section>\n      </main>\n\n      <!-- Right Column: Sidebar Metadata & Related Discussions (4 cols) -->\n      <aside class=\"space-y-6 lg:col-span-4\">\n        <!-- Thread Info Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-sm font-semibold\">Discussion Info</CardTitle>\n              <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs\"> Resolved </Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-3 pt-0\">\n            <Separator />\n            <dl class=\"space-y-2.5 text-xs\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Course</dt>\n                <dd class=\"text-foreground font-medium\">CS-314 Frontend Arch</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Category</dt>\n                <dd class=\"text-foreground font-medium\">Vue 3.5 &amp; Vite</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Total Upvotes</dt>\n                <dd class=\"text-foreground font-medium tabular-nums\">+145 upvotes</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Total Views</dt>\n                <dd class=\"text-foreground font-medium tabular-nums\">1,420</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Participants</dt>\n                <dd class=\"text-foreground font-medium\">4 contributors</dd>\n              </div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <dt class=\"text-muted-foreground\">Accepted By</dt>\n                <dd class=\"text-foreground font-medium\">David Chen (Author)</dd>\n              </div>\n            </dl>\n          </CardContent>\n        </Card>\n\n        <!-- Related Questions Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <CardTitle class=\"text-sm font-semibold\">Related Discussions</CardTitle>\n            <CardDescription class=\"text-xs\">Similar questions from this course cohort</CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-3 pt-0\">\n            <Separator />\n            <ul class=\"space-y-3 text-xs\">\n              <li class=\"space-y-1\">\n                <a\n                  href=\"#\"\n                  class=\"text-foreground hover:text-primary flex items-start justify-between gap-2 font-medium transition-colors\"\n                >\n                  <span>How to type polymorphic asChild props with Reka UI in Vue 3.5?</span>\n                  <ArrowUpRight class=\"text-muted-foreground size-3.5 shrink-0\" />\n                </a>\n                <div class=\"text-muted-foreground flex items-center gap-2\">\n                  <span class=\"bg-success/10 text-success rounded px-1.5 py-0.5 text-xs font-medium\"> Solved </span>\n                  <span class=\"tabular-nums\">38 upvotes</span>\n                  <span>· 4 answers</span>\n                </div>\n              </li>\n\n              <Separator />\n\n              <li class=\"space-y-1\">\n                <a\n                  href=\"#\"\n                  class=\"text-foreground hover:text-primary flex items-start justify-between gap-2 font-medium transition-colors\"\n                >\n                  <span>Configuring OKLCH Tailwind v4 themes with Nuxt 4</span>\n                  <ArrowUpRight class=\"text-muted-foreground size-3.5 shrink-0\" />\n                </a>\n                <div class=\"text-muted-foreground flex items-center gap-2\">\n                  <span class=\"bg-success/10 text-success rounded px-1.5 py-0.5 text-xs font-medium\"> Solved </span>\n                  <span class=\"tabular-nums\">24 upvotes</span>\n                  <span>· 2 answers</span>\n                </div>\n              </li>\n\n              <Separator />\n\n              <li class=\"space-y-1\">\n                <a\n                  href=\"#\"\n                  class=\"text-foreground hover:text-primary flex items-start justify-between gap-2 font-medium transition-colors\"\n                >\n                  <span>Best practices for CVA compoundVariants in TypeScript</span>\n                  <ArrowUpRight class=\"text-muted-foreground size-3.5 shrink-0\" />\n                </a>\n                <div class=\"text-muted-foreground flex items-center gap-2\">\n                  <span class=\"bg-muted text-foreground rounded px-1.5 py-0.5 text-xs font-medium\"> Open </span>\n                  <span class=\"tabular-nums\">19 upvotes</span>\n                  <span>· 1 answer</span>\n                </div>\n              </li>\n\n              <Separator />\n\n              <li class=\"space-y-1\">\n                <a\n                  href=\"#\"\n                  class=\"text-foreground hover:text-primary flex items-start justify-between gap-2 font-medium transition-colors\"\n                >\n                  <span>Hydration mismatches with client-side theme switchers in Astro SSG</span>\n                  <ArrowUpRight class=\"text-muted-foreground size-3.5 shrink-0\" />\n                </a>\n                <div class=\"text-muted-foreground flex items-center gap-2\">\n                  <span class=\"bg-success/10 text-success rounded px-1.5 py-0.5 text-xs font-medium\"> Solved </span>\n                  <span class=\"tabular-nums\">52 upvotes</span>\n                  <span>· 6 answers</span>\n                </div>\n              </li>\n            </ul>\n          </CardContent>\n        </Card>\n\n        <!-- EdStem Forum Guidelines Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center gap-2\">\n              <BookOpen class=\"text-primary size-4\" />\n              <CardTitle class=\"text-sm font-semibold\">Forum Etiquette</CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-2.5 pt-0 text-xs\">\n            <Separator />\n            <div class=\"text-muted-foreground space-y-2\">\n              <div class=\"flex items-start gap-2\">\n                <Check class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n                <span>Isolate reproducible snippets using [name].variants.ts patterns.</span>\n              </div>\n              <div class=\"flex items-start gap-2\">\n                <Check class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n                <span>Search existing questions before posting duplicate topics.</span>\n              </div>\n              <div class=\"flex items-start gap-2\">\n                <Check class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n                <span>Mark the accepted solution once your issue is verified.</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </aside>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PeerDiscussionForum.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "StackOverflow and EdStem style student community Q&A thread with upvoting, accepted instructor answers, markdown code formatting, rich answer composer, and related discussions sidebar.",
  "categories": [
    "education",
    "app",
    "community"
  ]
}