{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "course-curriculum-outline",
  "title": "Course Curriculum Outline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/course-curriculum-outline/CourseCurriculumOutline.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Award,\n  Check,\n  CheckCircle2,\n  Circle,\n  Clock,\n  Download,\n  ExternalLink,\n  FileCode,\n  FileQuestion,\n  FileText,\n  FlaskConical,\n  GraduationCap,\n  Lock,\n  MessageSquare,\n  PenTool,\n  Play,\n  PlayCircle,\n  ShieldCheck,\n  Star,\n  Users,\n  Video,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\n\nexport interface Lesson {\n  id: string\n  title: string\n  duration: string\n  type: 'Video' | 'Interactive Lab' | 'Quiz'\n  status: 'completed' | 'in-progress' | 'not-started' | 'locked'\n}\n\nexport interface Module {\n  id: string\n  title: string\n  duration: string\n  lessonsCount: string\n  completedCount: number\n  totalCount: number\n  status: 'completed' | 'in-progress' | 'locked'\n  lessons: Lesson[]\n}\n\ninterface Resource {\n  id: string\n  title: string\n  meta: string\n  type: 'figma' | 'repo' | 'pdf'\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** Seed completed state for all lessons to preview the verified certificate state. */\n    initialComplete?: boolean\n    class?: HTMLAttributes['class']\n  }>(),\n  {\n    initialComplete: false,\n  },\n)\n\nconst openModules = ref<string[]>(['module-1', 'module-2'])\n\nconst defaultModules: Module[] = [\n  {\n    id: 'module-1',\n    title: 'Module 1: Design Tokens & OKLCH Architecture',\n    duration: '1h 45m',\n    lessonsCount: '4 lessons',\n    completedCount: 4,\n    totalCount: 4,\n    status: 'completed',\n    lessons: [\n      {\n        id: 'm1-l1',\n        title: 'Introduction to OKLCH & Gamut Mapping',\n        duration: '18m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm1-l2',\n        title: 'Configuring Semantic Tokens in Tailwind CSS v4',\n        duration: '26m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm1-l3',\n        title: 'Lab: Building an Automated Contrast Checker',\n        duration: '35m',\n        type: 'Interactive Lab',\n        status: 'completed',\n      },\n      {\n        id: 'm1-l4',\n        title: 'Quiz: Token Architecture & Dark Mode Strategy',\n        duration: '26m',\n        type: 'Quiz',\n        status: 'completed',\n      },\n    ],\n  },\n  {\n    id: 'module-2',\n    title: 'Module 2: Polymorphic Primitives & Headless Reka UI',\n    duration: '3h 10m',\n    lessonsCount: '6 lessons',\n    completedCount: 3,\n    totalCount: 6,\n    status: 'in-progress',\n    lessons: [\n      {\n        id: 'm2-l1',\n        title: 'Anatomy of Headless Primitives with Reka UI & Radix',\n        duration: '24m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm2-l2',\n        title: 'Building Polymorphic Button & Slot Mechanics',\n        duration: '32m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm2-l3',\n        title: 'Lab: Compound Component Patterns with Provide/Inject',\n        duration: '40m',\n        type: 'Interactive Lab',\n        status: 'completed',\n      },\n      {\n        id: 'm2-l4',\n        title: 'Accessible Dialog, Popover & Focus Trapping',\n        duration: '36m',\n        type: 'Video',\n        status: 'in-progress',\n      },\n      {\n        id: 'm2-l5',\n        title: 'Virtualization for High-Density Data Grids',\n        duration: '38m',\n        type: 'Video',\n        status: 'not-started',\n      },\n      {\n        id: 'm2-l6',\n        title: 'Quiz: Accessibility Tree & ARIA Roles',\n        duration: '20m',\n        type: 'Quiz',\n        status: 'not-started',\n      },\n    ],\n  },\n  {\n    id: 'module-3',\n    title: 'Module 3: Micro-Interactions & Spring Physics',\n    duration: '4h 50m',\n    lessonsCount: '8 lessons',\n    completedCount: 0,\n    totalCount: 8,\n    status: 'locked',\n    lessons: [\n      {\n        id: 'm3-l1',\n        title: 'Physics-Based Animation Principles with Spring Physics',\n        duration: '28m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l2',\n        title: 'Gesture Interactions & Drag-and-Drop Primitives',\n        duration: '35m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l3',\n        title: 'Layout Animations and Shared Element Transitions',\n        duration: '42m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l4',\n        title: 'Haptic Feedback & Tactile States in Web Interfaces',\n        duration: '25m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l5',\n        title: 'Optimizing 60fps / 120fps Rendering Pipelines',\n        duration: '45m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l6',\n        title: 'Lab: Crafting a Fluid Floating Command Palette',\n        duration: '50m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l7',\n        title: 'Sound Design & Audio Micro-Feedback',\n        duration: '25m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l8',\n        title: 'Quiz: Motion Reduction & Animation Performance',\n        duration: '20m',\n        type: 'Quiz',\n        status: 'locked',\n      },\n    ],\n  },\n  {\n    id: 'module-4',\n    title: 'Module 4: Monorepo Architecture & CI Distribution',\n    duration: '4h 45m',\n    lessonsCount: '6 lessons',\n    completedCount: 0,\n    totalCount: 6,\n    status: 'locked',\n    lessons: [\n      {\n        id: 'm4-l1',\n        title: 'Turborepo & pnpm Workspaces Setup from Scratch',\n        duration: '35m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l2',\n        title: 'Dual-Framework Export Pipelines (Vue 3 + React 19)',\n        duration: '45m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l3',\n        title: 'Registry Distribution Schema & JSON Manifest Generator',\n        duration: '50m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l4',\n        title: 'Lab: Custom CLI Tooling with npx shadcn add',\n        duration: '55m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l5',\n        title: 'Automated Visual Regression CI with Playwright',\n        duration: '40m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l6',\n        title: 'Capstone Project: Publishing Your Own Component Registry',\n        duration: '60m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n    ],\n  },\n]\n\nconst resources: Resource[] = [\n  {\n    id: 'res-figma',\n    title: 'Figma Design System Kit v4.2',\n    meta: '.fig · 48.2 MB',\n    type: 'figma',\n  },\n  {\n    id: 'res-repo',\n    title: 'Course Starter Monorepo Template',\n    meta: 'GitHub Template · Public',\n    type: 'repo',\n  },\n  {\n    id: 'res-tokens',\n    title: 'OKLCH & Color Tokens Cheatsheet',\n    meta: 'PDF Guide · 2.4 MB',\n    type: 'pdf',\n  },\n  {\n    id: 'res-wcag',\n    title: 'WCAG 2.2 AA Contrast Matrix',\n    meta: 'PDF Reference · 1.8 MB',\n    type: 'pdf',\n  },\n]\n\nconst modules = computed(() => {\n  if (props.initialComplete) {\n    return defaultModules.map((m) => ({\n      ...m,\n      status: 'completed' as const,\n      completedCount: m.totalCount,\n      lessons: m.lessons.map((l) => ({\n        ...l,\n        status: 'completed' as const,\n      })),\n    }))\n  }\n  return defaultModules\n})\n\nconst completedLessonsCount = computed(() => {\n  if (props.initialComplete) return 24\n  return 8\n})\nconst totalLessonsCount = 24\nconst progressPercent = computed(() => Math.round((completedLessonsCount.value / totalLessonsCount) * 100))\nconst isFullyCompleted = computed(() => completedLessonsCount.value === totalLessonsCount)\n</script>\n\n<template>\n  <div data-slot=\"course-curriculum-outline\" :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Course Hero Header -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"space-y-4\">\n        <div class=\"flex flex-wrap items-center justify-between gap-3\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge variant=\"secondary\" class=\"font-medium\">Advanced · 14.5 Total Hours</Badge>\n            <Badge variant=\"outline\" class=\"text-muted-foreground\">Design Engineering</Badge>\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <div class=\"text-warning flex items-center\">\n              <Star class=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n              <span class=\"text-foreground ml-1 font-semibold\">4.9</span>\n            </div>\n            <span>·</span>\n            <span class=\"tabular-nums\">(1,840 students)</span>\n          </div>\n        </div>\n\n        <div class=\"space-y-2\">\n          <CardTitle class=\"text-2xl font-bold tracking-tight sm:text-3xl\">\n            Full-Stack Design Systems with Vue & React\n          </CardTitle>\n          <CardDescription class=\"text-sm\">\n            Master enterprise-grade UI components, OKLCH color spaces, headless architecture with Reka UI, fluid spring\n            physics, and monorepo package distribution.\n          </CardDescription>\n        </div>\n\n        <div class=\"flex flex-wrap items-center justify-between gap-4 pt-1\">\n          <div class=\"flex items-center gap-3\">\n            <Avatar class=\"border-border size-10 border\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&fit=crop&crop=faces\"\n                alt=\"Marcus Vance\"\n              />\n              <AvatarFallback>MV</AvatarFallback>\n            </Avatar>\n            <div>\n              <p class=\"text-sm leading-none font-medium\">Marcus Vance</p>\n              <p class=\"text-muted-foreground mt-1 text-xs\">Principal Design Engineer</p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <Button v-if=\"!isFullyCompleted\" class=\"gap-2 shadow-xs\">\n              <Play class=\"size-4 fill-current\" aria-hidden=\"true\" />\n              Resume Learning\n            </Button>\n            <Button aria-label=\"Download attachment\" v-else class=\"gap-2 shadow-xs\">\n              <Award class=\"size-4\" aria-hidden=\"true\" />\n              Download Certificate\n            </Button>\n            <Button aria-label=\"Download attachment\" variant=\"outline\" class=\"gap-2\">\n              <Download class=\"size-4\" aria-hidden=\"true\" />\n              Download Resources\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"pt-0\">\n        <div class=\"border-border/60 bg-muted/40 space-y-2 rounded-lg border p-4\">\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-foreground font-medium\">\n              <span class=\"tabular-nums\">{{ completedLessonsCount }} of {{ totalLessonsCount }}</span> lessons completed\n            </span>\n            <span class=\"text-muted-foreground font-medium tabular-nums\">{{ progressPercent }}%</span>\n          </div>\n          <Progress :model-value=\"progressPercent\" />\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Main Content & Sidebar Grid -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n      <!-- Left Column: Modular Curriculum Accordions -->\n      <div class=\"space-y-4 lg:col-span-2\">\n        <div class=\"flex items-center justify-between px-1\">\n          <div>\n            <h2 class=\"text-lg font-semibold tracking-tight\">Course Curriculum</h2>\n            <p class=\"text-muted-foreground text-xs\">4 modular sections · 24 total lessons & interactive labs</p>\n          </div>\n          <div class=\"text-muted-foreground text-xs tabular-nums\">\n            <span class=\"text-foreground font-medium\">{{ completedLessonsCount }}/{{ totalLessonsCount }}</span>\n            Completed\n          </div>\n        </div>\n\n        <Accordion type=\"multiple\" :default-value=\"openModules\" variant=\"separated\">\n          <AccordionItem v-for=\"module in modules\" :key=\"module.id\" :value=\"module.id\">\n            <AccordionTrigger class=\"hover:no-underline\">\n              <div class=\"flex flex-1 items-center justify-between gap-3 pr-2 text-left\">\n                <div class=\"flex min-w-0 items-center gap-3\">\n                  <span\n                    v-if=\"module.status === 'completed'\"\n                    class=\"border-success/30 bg-success/15 text-success flex size-7 shrink-0 items-center justify-center rounded-full border shadow-xs\"\n                  >\n                    <Check class=\"size-3.5\" aria-hidden=\"true\" />\n                  </span>\n                  <span\n                    v-else-if=\"module.status === 'in-progress'\"\n                    class=\"border-primary/20 bg-primary/10 text-primary flex size-7 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <Play class=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n                  </span>\n                  <span\n                    v-else\n                    class=\"border-border bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <Lock class=\"size-3.5\" aria-hidden=\"true\" />\n                  </span>\n                  <div class=\"min-w-0\">\n                    <p class=\"text-foreground truncate text-sm font-semibold\">{{ module.title }}</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">\n                      {{ module.lessonsCount }} · {{ module.duration }} ·\n                      <span v-if=\"module.status === 'completed'\" class=\"text-success font-medium\">100% completed</span>\n                      <span v-else-if=\"module.status === 'in-progress'\" class=\"text-foreground font-medium\">\n                        {{ module.completedCount }}/{{ module.totalCount }} completed\n                      </span>\n                      <span v-else class=\"text-muted-foreground\">Locked</span>\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"hidden shrink-0 items-center gap-2 sm:flex\">\n                  <Badge v-if=\"module.status === 'completed'\" variant=\"success\" class=\"gap-1 text-xs\">\n                    <Check class=\"size-3\" /> Completed\n                  </Badge>\n                  <Badge v-else-if=\"module.status === 'in-progress'\" variant=\"secondary\" class=\"text-xs\">\n                    In Progress ({{ module.completedCount }}/{{ module.totalCount }})\n                  </Badge>\n                  <Badge v-else variant=\"outline\" class=\"text-muted-foreground gap-1 text-xs\">\n                    <Lock class=\"size-3\" /> Locked\n                  </Badge>\n                </div>\n              </div>\n            </AccordionTrigger>\n\n            <AccordionContent>\n              <div class=\"border-border divide-border divide-y border-t\">\n                <div\n                  v-for=\"lesson in module.lessons\"\n                  :key=\"lesson.id\"\n                  class=\"group hover:bg-muted/40 flex items-center justify-between gap-3 px-2 py-3 transition-colors first:pt-3 last:pb-1 sm:px-3\"\n                >\n                  <div class=\"flex min-w-0 items-center gap-3\">\n                    <div class=\"flex shrink-0 items-center justify-center\">\n                      <CheckCircle2\n                        v-if=\"lesson.status === 'completed'\"\n                        class=\"text-success size-4\"\n                        aria-hidden=\"true\"\n                      />\n                      <PlayCircle\n                        v-else-if=\"lesson.status === 'in-progress'\"\n                        class=\"text-primary size-4 animate-pulse\"\n                        aria-hidden=\"true\"\n                      />\n                      <Lock\n                        v-else-if=\"lesson.status === 'locked'\"\n                        class=\"text-muted-foreground/50 size-4\"\n                        aria-hidden=\"true\"\n                      />\n                      <Circle v-else class=\"text-muted-foreground/60 size-4\" aria-hidden=\"true\" />\n                    </div>\n\n                    <div class=\"min-w-0\">\n                      <p\n                        :class=\"\n                          cn(\n                            'truncate text-sm font-medium transition-colors',\n                            lesson.status === 'locked'\n                              ? 'text-muted-foreground'\n                              : 'text-foreground group-hover:text-primary',\n                          )\n                        \"\n                      >\n                        {{ lesson.title }}\n                      </p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex shrink-0 items-center gap-2\">\n                    <Badge v-if=\"lesson.type === 'Interactive Lab'\" variant=\"secondary\" class=\"gap-1 text-xs\">\n                      <FlaskConical class=\"size-3\" aria-hidden=\"true\" />\n                      <span class=\"hidden sm:inline\">Interactive Lab</span>\n                      <span class=\"sm:hidden\">Lab</span>\n                    </Badge>\n                    <Badge v-else-if=\"lesson.type === 'Quiz'\" variant=\"outline\" class=\"gap-1 text-xs\">\n                      <FileQuestion class=\"size-3\" aria-hidden=\"true\" />\n                      Quiz\n                    </Badge>\n                    <Badge v-else variant=\"outline\" class=\"gap-1 text-xs\">\n                      <Video class=\"size-3\" aria-hidden=\"true\" />\n                      Video\n                    </Badge>\n\n                    <span class=\"text-muted-foreground min-w-[32px] text-right font-mono text-xs tabular-nums\">\n                      {{ lesson.duration }}\n                    </span>\n\n                    <div class=\"hidden sm:block\">\n                      <Button v-if=\"lesson.status === 'in-progress'\" size=\"sm\" class=\"h-7 gap-1 px-2.5 text-xs\">\n                        <Play class=\"size-3 fill-current\" /> Resume\n                      </Button>\n                      <Button\n                        v-else-if=\"lesson.status === 'completed'\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        class=\"text-muted-foreground hover:text-foreground h-7 px-2 text-xs\"\n                      >\n                        Review\n                      </Button>\n                      <Button\n                        v-else-if=\"lesson.status === 'not-started'\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                        class=\"h-7 px-2 text-xs\"\n                      >\n                        Start\n                      </Button>\n                      <span v-else class=\"text-muted-foreground/50 px-2 text-xs\">Locked</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n\n      <!-- Right Column: Certificate & Resources Sidebar -->\n      <div class=\"space-y-6\">\n        <!-- Certificate Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center gap-2\">\n              <GraduationCap class=\"text-primary size-5\" aria-hidden=\"true\" />\n              <CardTitle class=\"text-base\">Certificate of Completion</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Accredited credential upon 100% course and lab completion.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Cert preview container -->\n            <div\n              class=\"border-border/80 from-muted/50 to-muted/20 relative space-y-3 overflow-hidden rounded-lg border bg-gradient-to-b p-4 text-center\"\n            >\n              <div class=\"relative z-10 space-y-2\">\n                <div\n                  :class=\"\n                    cn(\n                      'mx-auto flex size-12 items-center justify-center rounded-full border shadow-xs',\n                      isFullyCompleted\n                        ? 'border-success/30 bg-success/15 text-success'\n                        : 'border-primary/30 bg-primary/10 text-primary',\n                    )\n                  \"\n                >\n                  <Award class=\"size-6\" aria-hidden=\"true\" />\n                </div>\n                <div>\n                  <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                    Verified Credential\n                  </p>\n                  <p class=\"text-foreground mt-0.5 text-sm font-bold\">Full-Stack Design Systems</p>\n                  <p class=\"text-muted-foreground text-xs\">Marcus Vance · UIPKGE Academy</p>\n                </div>\n                <div class=\"pt-1\">\n                  <span\n                    class=\"border-border bg-background/80 text-muted-foreground inline-flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs\"\n                  >\n                    <ShieldCheck class=\"text-primary size-3\" /> CERT-8841-FS\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Progress info -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-muted-foreground\">Graduation Status</span>\n                <span class=\"text-foreground font-medium tabular-nums\">\n                  {{ completedLessonsCount }}/{{ totalLessonsCount }} Lessons\n                </span>\n              </div>\n              <Progress :model-value=\"progressPercent\" />\n              <p class=\"text-muted-foreground pt-1 text-xs\">\n                <span v-if=\"isFullyCompleted\" class=\"text-success font-medium\">\n                  All requirements satisfied! Your certificate is ready to download and share.\n                </span>\n                <span v-else>\n                  Complete the remaining {{ totalLessonsCount - completedLessonsCount }} lessons and labs to unlock.\n                </span>\n              </p>\n            </div>\n          </CardContent>\n\n          <CardFooter>\n            <Button aria-label=\"Download attachment\" v-if=\"isFullyCompleted\" class=\"w-full gap-1.5\" size=\"sm\">\n              <Download class=\"size-4\" /> Download PDF Certificate\n            </Button>\n            <Button v-else variant=\"outline\" size=\"sm\" class=\"w-full gap-1.5\" disabled>\n              <Lock class=\"size-4\" /> Locked (Complete Course)\n            </Button>\n          </CardFooter>\n        </Card>\n\n        <!-- Course Resources Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center gap-2\">\n              <FileCode class=\"text-primary size-5\" aria-hidden=\"true\" />\n              <CardTitle class=\"text-base\">Course Resources</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Downloadable starter kits, Figma files, and spec guides.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-2.5\">\n            <div\n              v-for=\"res in resources\"\n              :key=\"res.id\"\n              class=\"border-border hover:bg-muted/40 flex items-center justify-between gap-3 rounded-md border p-2.5 transition-colors\"\n            >\n              <div class=\"flex min-w-0 items-center gap-2.5\">\n                <span\n                  class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\"\n                >\n                  <FileCode v-if=\"res.type === 'repo'\" class=\"size-4\" aria-hidden=\"true\" />\n                  <PenTool v-else-if=\"res.type === 'figma'\" class=\"size-4\" aria-hidden=\"true\" />\n                  <FileText v-else class=\"size-4\" aria-hidden=\"true\" />\n                </span>\n                <div class=\"min-w-0\">\n                  <p class=\"text-foreground truncate text-xs font-medium\">{{ res.title }}</p>\n                  <p class=\"text-muted-foreground text-xs\">{{ res.meta }}</p>\n                </div>\n              </div>\n\n              <Button variant=\"ghost\" size=\"icon\" class=\"text-muted-foreground hover:text-foreground size-8 shrink-0\">\n                <ExternalLink v-if=\"res.type === 'repo'\" class=\"size-4\" aria-hidden=\"true\" />\n                <Download v-else class=\"size-4\" aria-hidden=\"true\" />\n                <span class=\"sr-only\">Download {{ res.title }}</span>\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Community & Mentorship Card -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center gap-2\">\n              <Users class=\"text-primary size-5\" aria-hidden=\"true\" />\n              <CardTitle class=\"text-base\">Student Community</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Connect with peers and get code reviews from design engineering mentors.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"text-muted-foreground space-y-2.5 text-xs\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"bg-success size-2 rounded-full\"></span>\n              <span><strong class=\"text-foreground\">1,420 students online</strong> in Discord</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Clock class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n              <span>Weekly live Q&A: <strong class=\"text-foreground\">Thursdays @ 5:00 PM UTC</strong></span>\n            </div>\n          </CardContent>\n\n          <CardFooter>\n            <Button variant=\"outline\" size=\"sm\" class=\"w-full gap-1.5\">\n              <MessageSquare class=\"size-4\" /> Join Discord Community\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CourseCurriculumOutline.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/accordion.json",
    "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/progress.json"
  ],
  "description": "LMS and video course syllabus block: hero header with course metadata, instructor profile, rating, progress bar, and action buttons, collapsible modular section accordions with lesson durations, type badges, and completion checks, plus a sidebar with verifiable certificate preview, downloadable course resources, and student community access.",
  "categories": [
    "education",
    "app"
  ]
}