{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "meeting-agenda-notes",
  "title": "Meeting Agenda Notes",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/meeting-agenda-notes/MeetingAgendaNotes.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  Calendar,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  ExternalLink,\n  FileDown,\n  FileSpreadsheet,\n  FileText,\n  GitPullRequest,\n  ListOrdered,\n  Lock,\n  Plus,\n  Radio,\n  UserCheck,\n  Video,\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 { Checkbox } from '@/components/ui/checkbox'\nimport { Separator } from '@/components/ui/separator'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\n// Meeting Info State\nconst copiedRoomLink = ref(false)\nconst copiedNotes = ref(false)\nconst copiedSnippet = ref(false)\n\nfunction copyRoomLink() {\n  navigator.clipboard?.writeText('https://zoom.us/j/4829017734')\n  copiedRoomLink.value = true\n  setTimeout(() => {\n    copiedRoomLink.value = false\n  }, 2000)\n}\n\nfunction copyNotes() {\n  navigator.clipboard?.writeText(\n    'Meeting Notes: UIPKGE Core Architecture Sync\\nDate: Aug 21, 2026\\nDecisions: Adopt OKLCH color spaces, reject monolithic npm bundle, ship dual-framework registry.',\n  )\n  copiedNotes.value = true\n  setTimeout(() => {\n    copiedNotes.value = false\n  }, 2000)\n}\n\nfunction copyCodeSnippet() {\n  navigator.clipboard?.writeText(\n    `export default defineRegistryItem({\\n  name: 'meeting-agenda-notes',\\n  type: 'registry:block',\\n  categories: ['productivity', 'collaboration'],\\n  dependencies: ['lucide-vue-next'],\\n  registryDependencies: [\\n    'https://uipkge.dev/r/avatar.json',\\n    'https://uipkge.dev/r/badge.json',\\n    'https://uipkge.dev/r/button.json',\\n    'https://uipkge.dev/r/card.json',\\n    'https://uipkge.dev/r/checkbox.json',\\n    'https://uipkge.dev/r/separator.json',\\n  ],\\n})`,\n  )\n  copiedSnippet.value = true\n  setTimeout(() => {\n    copiedSnippet.value = false\n  }, 2000)\n}\n\n// Attendees List\ninterface Attendee {\n  id: string\n  name: string\n  role: string\n  initials: string\n  isHost?: boolean\n  status: 'online' | 'busy' | 'away'\n  colorClass: string\n}\n\nconst attendees = ref<Attendee[]>([\n  {\n    id: 'att-1',\n    name: 'Elena Rostova',\n    role: 'Lead Architect',\n    initials: 'ER',\n    isHost: true,\n    status: 'online',\n    colorClass: 'bg-primary/15 text-primary font-semibold',\n  },\n  {\n    id: 'att-2',\n    name: 'Marcus Vance',\n    role: 'Staff Engineer',\n    initials: 'MV',\n    status: 'online',\n    colorClass: 'bg-info/15 text-info font-semibold',\n  },\n  {\n    id: 'att-3',\n    name: 'Sarah Jenkins',\n    role: 'Product Lead',\n    initials: 'SJ',\n    status: 'online',\n    colorClass: 'bg-chart-1/15 text-chart-1 font-semibold',\n  },\n  {\n    id: 'att-4',\n    name: 'David Chen',\n    role: 'Core Infra',\n    initials: 'DC',\n    status: 'online',\n    colorClass: 'bg-warning/15 text-warning font-semibold',\n  },\n  {\n    id: 'att-5',\n    name: 'Sofia Rossi',\n    role: 'Design Systems',\n    initials: 'SR',\n    status: 'online',\n    colorClass: 'bg-destructive/15 text-destructive font-semibold',\n  },\n  {\n    id: 'att-6',\n    name: 'Alex Rivera',\n    role: 'DevRel',\n    initials: 'AR',\n    status: 'online',\n    colorClass: 'bg-chart-2/15 text-chart-2 font-semibold',\n  },\n])\n\n// Timeboxed Agenda Topics\ninterface AgendaTopic {\n  id: string\n  number: number\n  title: string\n  duration: string\n  timeRange: string\n  lead: string\n  leadInitials: string\n  status: 'completed' | 'active' | 'upcoming'\n  summary: string\n  tags: string[]\n}\n\nconst agendaTopics = ref<AgendaTopic[]>([\n  {\n    id: 'topic-1',\n    number: 1,\n    title: 'OKLCH Token Migration Status',\n    duration: '15m',\n    timeRange: '14:00 - 14:15',\n    lead: 'Elena Rostova',\n    leadInitials: 'ER',\n    status: 'completed',\n    summary:\n      'Audit of 140+ CSS custom properties completed. Confirmed wide-gamut Display P3 color spaces with zero degradation in legacy sRGB browsers.',\n    tags: ['Design System', 'Tailwind v4'],\n  },\n  {\n    id: 'topic-2',\n    number: 2,\n    title: 'Dual-Framework AST Verification Pipeline',\n    duration: '20m',\n    timeRange: '14:15 - 14:35',\n    lead: 'Marcus Vance',\n    leadInitials: 'MV',\n    status: 'active',\n    summary:\n      'Live AST comparisons between Vue SFC templates and React TSX JSX trees. Validating component prop parity, variant definitions, and event handlers automatically in CI.',\n    tags: ['Compiler', 'CI/CD', 'Parity'],\n  },\n  {\n    id: 'topic-3',\n    number: 3,\n    title: '100-Block Registry Expansion Strategy',\n    duration: '15m',\n    timeRange: '14:35 - 14:50',\n    lead: 'Sarah Jenkins',\n    leadInitials: 'SJ',\n    status: 'upcoming',\n    summary:\n      'Prioritization matrix for upcoming vertical blocks: Healthcare appointment management, HRMS payroll ledger, and DevTools query workbench.',\n    tags: ['Roadmap', 'Blocks'],\n  },\n  {\n    id: 'topic-4',\n    number: 4,\n    title: 'Q&A & Retrospective',\n    duration: '10m',\n    timeRange: '14:50 - 15:00',\n    lead: 'Open Floor',\n    leadInitials: 'OF',\n    status: 'upcoming',\n    summary:\n      'Consensus check on flat URL dependency format, open architectural blockers, and sprint task assignment review.',\n    tags: ['Open Floor', 'Review'],\n  },\n])\n\n// Discussion Notes & Live Comments\ninterface NoteEntry {\n  id: string\n  author: string\n  authorInitials: string\n  authorColor: string\n  timestamp: string\n  content: string\n  tag: string\n}\n\nconst liveNotes = ref<NoteEntry[]>([\n  {\n    id: 'note-1',\n    author: 'Marcus Vance',\n    authorInitials: 'MV',\n    authorColor: 'bg-info/15 text-info',\n    timestamp: '14:22 PST',\n    content:\n      'The AST parity checker runs under 340ms locally with caching. We will add a strict blocking threshold in GitHub Actions.',\n    tag: '#pipeline',\n  },\n  {\n    id: 'note-2',\n    author: 'Sofia Rossi',\n    authorInitials: 'SR',\n    authorColor: 'bg-destructive/15 text-destructive',\n    timestamp: '14:31 PST',\n    content:\n      'All color tokens now satisfy WCAG AAA for text-foreground and AA for muted-foreground across dark surfaces.',\n    tag: '#design-tokens',\n  },\n])\n\nconst newNoteDraft = ref('')\nconst newNoteTag = ref('#architecture')\n\nfunction addNote() {\n  if (!newNoteDraft.value.trim()) return\n  liveNotes.value.push({\n    id: `note-${Date.now()}`,\n    author: 'Elena Rostova',\n    authorInitials: 'ER',\n    authorColor: 'bg-success/15 text-success',\n    timestamp: 'Just now',\n    content: newNoteDraft.value.trim(),\n    tag: newNoteTag.value,\n  })\n  newNoteDraft.value = ''\n}\n\n// Action Items Checklist\ninterface ActionItem {\n  id: string\n  title: string\n  assignee: string\n  assigneeInitials: string\n  assigneeColor: string\n  dueDate: string\n  priority: 'Urgent' | 'High' | 'Medium' | 'Low'\n  completed: boolean\n}\n\nconst actionItems = ref<ActionItem[]>([\n  {\n    id: 'task-1',\n    title: 'Publish OKLCH color token specification to documentation',\n    assignee: 'Elena Rostova',\n    assigneeInitials: 'ER',\n    assigneeColor: 'bg-success/15 text-success',\n    dueDate: 'Aug 24, 2026',\n    priority: 'High',\n    completed: true,\n  },\n  {\n    id: 'task-2',\n    title: 'Configure AST parity tests in GitHub Actions CI workflow',\n    assignee: 'Marcus Vance',\n    assigneeInitials: 'MV',\n    assigneeColor: 'bg-info/15 text-info',\n    dueDate: 'Aug 26, 2026',\n    priority: 'Urgent',\n    completed: false,\n  },\n  {\n    id: 'task-3',\n    title: 'Draft block wireframes for Healthcare & HRMS verticals',\n    assignee: 'Sarah Jenkins',\n    assigneeInitials: 'SJ',\n    assigneeColor: 'bg-chart-1/15 text-chart-1',\n    dueDate: 'Aug 28, 2026',\n    priority: 'Medium',\n    completed: false,\n  },\n  {\n    id: 'task-4',\n    title: 'Benchmark bundle size delta across 50+ imported primitives',\n    assignee: 'David Chen',\n    assigneeInitials: 'DC',\n    assigneeColor: 'bg-warning/15 text-warning',\n    dueDate: 'Sep 02, 2026',\n    priority: 'Low',\n    completed: false,\n  },\n])\n\nconst completedTasksCount = computed(() => actionItems.value.filter((t) => t.completed).length)\nconst totalTasksCount = computed(() => actionItems.value.length)\nconst completionPercentage = computed(() =>\n  totalTasksCount.value === 0 ? 0 : Math.round((completedTasksCount.value / totalTasksCount.value) * 100),\n)\n\nfunction toggleTask(id: string, checked: boolean) {\n  const item = actionItems.value.find((t) => t.id === id)\n  if (item) {\n    item.completed = checked\n  }\n}\n\nconst newTaskTitle = ref('')\nconst newTaskAssignee = ref('Alex Rivera')\nconst newTaskPriority = ref<'Urgent' | 'High' | 'Medium' | 'Low'>('Medium')\n\nfunction addTask() {\n  if (!newTaskTitle.value.trim()) return\n  const attendee = attendees.value.find((a) => a.name === newTaskAssignee.value) || attendees.value[0]\n  actionItems.value.push({\n    id: `task-${Date.now()}`,\n    title: newTaskTitle.value.trim(),\n    assignee: attendee.name,\n    assigneeInitials: attendee.initials,\n    assigneeColor: attendee.colorClass,\n    dueDate: 'Aug 30, 2026',\n    priority: newTaskPriority.value,\n    completed: false,\n  })\n  newTaskTitle.value = ''\n}\n\n// Key Decisions Log\ninterface KeyDecision {\n  id: string\n  number: number\n  title: string\n  context: string\n  status: 'Adopted' | 'Under Review'\n  decidedBy: string\n  time: string\n}\n\nconst keyDecisions = ref<KeyDecision[]>([\n  {\n    id: 'dec-1',\n    number: 1,\n    title: 'Adopt flat registryDependencies URLs across all 300+ items',\n    context:\n      'Declaring flat JSON URLs eliminates circular dependency warnings and simplifies downstream registry resolver graphs.',\n    status: 'Adopted',\n    decidedBy: 'Elena Rostova',\n    time: '14:18 PST',\n  },\n  {\n    id: 'dec-2',\n    number: 2,\n    title: 'Enforce strict 120-char line width & no-semicolons styleguide',\n    context:\n      'Standardizes AST transpilation outputs so generated Vue SFC and React TSX items maintain identical formatting invariants.',\n    status: 'Adopted',\n    decidedBy: 'Squad Consensus',\n    time: '14:32 PST',\n  },\n  {\n    id: 'dec-3',\n    number: 3,\n    title: 'Deprecate legacy /r/nuxt/ aliases by end of Q3',\n    context:\n      'Consumers will be directed to unified /r/vue/ endpoints while maintaining backwards-compatible 301 redirects.',\n    status: 'Under Review',\n    decidedBy: 'Sarah Jenkins',\n    time: '14:45 PST',\n  },\n])\n\n// Export Notes Markdown Function\nfunction exportNotesMarkdown() {\n  const md = `# Q3 Product Architecture & Monorepo Scaling Sync\n**Date:** Friday, Aug 21, 2026 · 14:00 - 15:00 PST\n**Meeting Room:** Zoom Room #482-901\n**Attendees:** Elena Rostova (Host), Marcus Vance, Sarah Jenkins, David Chen, Sofia Rossi, Alex Rivera\n\n---\n\n## 📋 Timeboxed Agenda\n- [x] **OKLCH Token Migration Status** (15m · 14:00 - 14:15) - Elena Rostova\n- [x] **Dual-Framework AST Verification Pipeline** (20m · 14:15 - 14:35) - Marcus Vance [ACTIVE]\n- [ ] **100-Block Registry Expansion Strategy** (15m · 14:35 - 14:50) - Sarah Jenkins\n- [ ] **Q&A & Retrospective** (10m · 14:50 - 15:00) - Open Floor\n\n---\n\n## 💡 Key Architectural Decisions\n1. **Adopt flat registryDependencies URLs across all 300+ items** [Adopted]\n   - *Decided by:* Elena Rostova · 14:18 PST\n   - *Context:* Eliminates circular dependency warnings in shadcn resolver.\n2. **Enforce strict 120-char line width & no-semicolons styleguide** [Adopted]\n   - *Decided by:* Squad Consensus · 14:32 PST\n   - *Context:* Standardizes AST transpilation outputs across Vue & React.\n3. **Deprecate legacy /r/nuxt/ aliases by end of Q3** [Under Review]\n   - *Decided by:* Sarah Jenkins · 14:45 PST\n   - *Context:* Directs consumers to unified /r/vue/ endpoints.\n\n---\n\n## ✅ Action Items\n${actionItems.value\n  .map(\n    (task) =>\n      `- [${task.completed ? 'x' : ' '}] **${task.title}** (Assignee: @${task.assignee}, Due: ${task.dueDate}, Priority: ${task.priority})`,\n  )\n  .join('\\n')}\n`\n  navigator.clipboard?.writeText(md)\n  copiedNotes.value = true\n  setTimeout(() => {\n    copiedNotes.value = false\n  }, 2000)\n}\n</script>\n\n<template>\n  <div data-slot=\"meeting-agenda-notes\" :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Meeting Header Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"space-y-5 p-4 sm:p-6\">\n        <!-- Top Badges & Status Row -->\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=\"gap-1.5 px-2.5 py-1 text-xs font-medium\">\n              <span class=\"bg-destructive size-2 animate-pulse rounded-full\" />\n              <span class=\"font-mono tracking-tight tabular-nums\">REC · 45:12</span>\n            </Badge>\n            <Badge variant=\"outline\" class=\"text-muted-foreground text-xs\"> Architecture Sync </Badge>\n            <Badge variant=\"outline\" class=\"text-muted-foreground text-xs\"> Bi-Weekly Cadence </Badge>\n          </div>\n\n          <!-- Meeting Actions -->\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs shadow-xs\" @click=\"exportNotesMarkdown\">\n              <Check v-if=\"copiedNotes\" class=\"text-success size-3.5\" />\n              <FileDown v-else class=\"text-muted-foreground size-3.5\" />\n              {{ copiedNotes ? 'Notes Copied!' : 'Export Notes Markdown' }}\n            </Button>\n            <Button size=\"sm\" class=\"h-8 gap-1.5 text-xs shadow-xs\">\n              <Video class=\"size-3.5\" />\n              Join Call\n            </Button>\n          </div>\n        </div>\n\n        <!-- Meeting Title & Meta Info -->\n        <div class=\"space-y-2\">\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n            Q3 Product Architecture & Monorepo Scaling Sync\n          </h1>\n\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-xs\">\n            <!-- Date & Time -->\n            <div class=\"flex items-center gap-1.5\">\n              <Calendar class=\"text-foreground/70 size-3.5\" />\n              <span class=\"text-foreground/90 font-medium\">Friday, Aug 21, 2026</span>\n              <span>·</span>\n              <span class=\"font-mono tabular-nums\">14:00 - 15:00 PST</span>\n            </div>\n\n            <!-- Duration Badge -->\n            <div class=\"flex items-center gap-1.5\">\n              <Clock class=\"text-foreground/70 size-3.5\" />\n              <Badge variant=\"secondary\" class=\"px-2 py-0.5 font-mono text-xs tabular-nums\">\n                60 mins · 45 mins elapsed\n              </Badge>\n            </div>\n\n            <!-- Meeting Room Link -->\n            <div class=\"flex items-center gap-1.5\">\n              <Video class=\"text-foreground/70 size-3.5\" />\n              <button\n                type=\"button\"\n                class=\"text-foreground hover:text-primary inline-flex min-h-6 cursor-pointer items-center gap-1 font-medium transition-colors\"\n                @click=\"copyRoomLink\"\n              >\n                <span>Zoom Room #482-901</span>\n                <Check v-if=\"copiedRoomLink\" class=\"text-success size-3\" />\n                <Copy v-else class=\"text-muted-foreground size-3\" />\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <Separator class=\"bg-border/60\" />\n\n        <!-- Attendee Avatars Row -->\n        <div class=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"> Attendees </span>\n              <Badge variant=\"secondary\" class=\"h-4.5 px-1.5 py-0 font-mono text-xs tabular-nums\"> 6 Present </Badge>\n            </div>\n\n            <!-- Avatars with online status dots -->\n            <div class=\"flex flex-wrap items-center gap-2.5\">\n              <div\n                v-for=\"attendee in attendees\"\n                :key=\"attendee.id\"\n                class=\"group border-border/80 bg-background/80 hover:border-border hover:bg-muted/40 relative flex items-center gap-2 rounded-full border py-1 pr-2.5 pl-1 shadow-xs transition-colors\"\n              >\n                <div class=\"relative flex items-center justify-center\">\n                  <Avatar size=\"sm\" class=\"size-6 text-xs\">\n                    <AvatarFallback :class=\"attendee.colorClass\">\n                      {{ attendee.initials }}\n                    </AvatarFallback>\n                  </Avatar>\n                  <!-- Presence Status Dot -->\n                  <span\n                    class=\"border-background bg-success absolute -right-0.5 -bottom-0.5 size-2 rounded-full border-2\"\n                    title=\"Present in meeting\"\n                  />\n                </div>\n                <span class=\"text-foreground text-xs font-medium\">\n                  {{ attendee.name }}\n                </span>\n                <Badge\n                  v-if=\"attendee.isHost\"\n                  variant=\"default\"\n                  class=\"h-4 px-1 text-xs leading-none font-semibold uppercase\"\n                >\n                  Host\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          <!-- Quick Access Code / Status -->\n          <div\n            class=\"border-border/60 bg-muted/30 text-muted-foreground hidden items-center gap-3 rounded-lg border p-2.5 text-xs xl:flex\"\n          >\n            <Radio class=\"text-success size-4 animate-pulse\" />\n            <div>\n              <div class=\"text-foreground font-medium\">Live Transcription</div>\n              <div class=\"text-muted-foreground font-mono\">Whisper-v3 Active</div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 2-Column Meeting Workspace -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Panel: Timeboxed Agenda & Rich Notes (8 cols) -->\n      <div class=\"space-y-6 lg:col-span-7 xl:col-span-8\">\n        <!-- Section 1: 4 Timeboxed Agenda Topics -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"px-5 pt-5 pb-3 sm:px-6\">\n            <div class=\"flex flex-wrap items-center justify-between gap-2\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                  <ListOrdered class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base font-semibold\">Timeboxed Agenda</CardTitle>\n                  <CardDescription class=\"text-xs\">\n                    4 topics structured with real-time progress indicators\n                  </CardDescription>\n                </div>\n              </div>\n\n              <!-- Time Allocation Summary -->\n              <Badge variant=\"outline\" class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                60m Total · 45m Elapsed (75%)\n              </Badge>\n            </div>\n\n            <!-- Elapsed Visual Bar -->\n            <div class=\"bg-muted mt-3 h-1.5 w-full overflow-hidden rounded-full\">\n              <div class=\"bg-primary h-full w-3/4 rounded-full\" />\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 p-5 pt-2 sm:p-6\">\n            <div\n              v-for=\"topic in agendaTopics\"\n              :key=\"topic.id\"\n              :class=\"\n                cn(\n                  'group relative rounded-lg border p-4 transition-colors duration-150',\n                  topic.status === 'active'\n                    ? 'border-primary/50 bg-primary/[0.03] shadow-xs'\n                    : topic.status === 'completed'\n                      ? 'border-border/80 bg-muted/20'\n                      : 'border-border/60 bg-card hover:border-border',\n                )\n              \"\n            >\n              <div class=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-start\">\n                <!-- Topic Details -->\n                <div class=\"flex-1 space-y-1.5\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <span\n                      class=\"bg-muted text-muted-foreground flex size-5 items-center justify-center rounded-full font-mono text-xs font-semibold\"\n                    >\n                      {{ topic.number }}\n                    </span>\n\n                    <h3 class=\"text-foreground text-sm font-semibold\">\n                      {{ topic.title }}\n                    </h3>\n\n                    <!-- Status Badges -->\n                    <Badge v-if=\"topic.status === 'completed'\" variant=\"success\" class=\"gap-1 text-xs\">\n                      <CheckCircle2 class=\"text-success size-3\" />\n                      Completed\n                    </Badge>\n                    <Badge v-else-if=\"topic.status === 'active'\" variant=\"default\" class=\"gap-1.5 text-xs font-medium\">\n                      <span class=\"bg-primary-foreground size-1.5 rounded-full\" />\n                      Current Topic\n                    </Badge>\n                    <Badge v-else variant=\"outline\" class=\"text-muted-foreground gap-1 text-xs\">\n                      <Clock class=\"size-3\" />\n                      Upcoming\n                    </Badge>\n                  </div>\n\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    {{ topic.summary }}\n                  </p>\n\n                  <!-- Tags -->\n                  <div class=\"flex flex-wrap items-center gap-1.5 pt-1\">\n                    <Badge\n                      v-for=\"tag in topic.tags\"\n                      :key=\"tag\"\n                      variant=\"secondary\"\n                      class=\"text-muted-foreground px-1.5 py-0 text-xs font-normal\"\n                    >\n                      {{ tag }}\n                    </Badge>\n                  </div>\n                </div>\n\n                <!-- Presenter & Timebox Metadata -->\n                <div\n                  class=\"border-border/50 flex shrink-0 items-center justify-between gap-1.5 border-t pt-2 sm:flex-col sm:items-end sm:border-t-0 sm:pt-0\"\n                >\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                      {{ topic.duration }}\n                    </span>\n                    <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                      {{ topic.timeRange }}\n                    </span>\n                  </div>\n\n                  <div class=\"flex items-center gap-1.5\">\n                    <Avatar size=\"xs\" class=\"size-4.5 text-xs\">\n                      <AvatarFallback class=\"bg-muted text-muted-foreground text-xs font-semibold\">\n                        {{ topic.leadInitials }}\n                      </AvatarFallback>\n                    </Avatar>\n                    <span class=\"text-foreground/80 text-xs font-medium\">\n                      {{ topic.lead }}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Section 2: Rich Discussion Notes Area -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"px-5 pt-5 pb-3 sm:px-6\">\n            <div class=\"flex flex-wrap items-center justify-between gap-2\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                  <FileText class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base font-semibold\">Discussion Notes & Technical Blueprint</CardTitle>\n                  <CardDescription class=\"text-xs\">\n                    Structured architectural takeaways and runtime benchmarks\n                  </CardDescription>\n                </div>\n              </div>\n\n              <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                Last edited 2m ago by Elena Rostova\n              </span>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-5 p-5 pt-2 sm:p-6\">\n            <!-- Context Callout Box -->\n            <div class=\"border-border bg-muted/40 space-y-1 rounded-lg border p-3.5\">\n              <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                <FileText class=\"text-primary size-3.5\" />\n                Core Monorepo Mandate\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Components are the product, not an npm library. Consumers run\n                <code class=\"bg-muted text-foreground rounded px-1.5 py-0.5 font-mono font-medium\"\n                  >npx shadcn-vue add &lt;url&gt;</code\n                >\n                and own the code directly. All block primitives must compose raw layouts without baking rigid data\n                arrays into primitives.\n              </p>\n            </div>\n\n            <!-- Structured Takeaways Section -->\n            <div class=\"space-y-2.5\">\n              <h4 class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">Architectural Takeaways</h4>\n\n              <div class=\"space-y-2\">\n                <div class=\"border-border/60 bg-card flex items-start gap-2.5 rounded-md border p-3 shadow-xs\">\n                  <div\n                    class=\"bg-success/10 text-success mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full\"\n                  >\n                    <Check class=\"size-3\" />\n                  </div>\n                  <div class=\"space-y-0.5 text-xs\">\n                    <span class=\"text-foreground font-semibold\">Zero Runtime Overhead Delivery Model</span>\n                    <p class=\"text-muted-foreground leading-relaxed\">\n                      Zero build-time vendor lock-in. Primitives handle focus rings, keyboard navigation, and\n                      accessibility semantics while leaving styling tokens fully customizable by end consumers.\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"border-border/60 bg-card flex items-start gap-2.5 rounded-md border p-3 shadow-xs\">\n                  <div\n                    class=\"bg-info/10 text-info mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full\"\n                  >\n                    <Check class=\"size-3\" />\n                  </div>\n                  <div class=\"space-y-0.5 text-xs\">\n                    <span class=\"text-foreground font-semibold\">Perceptually Uniform OKLCH Palette</span>\n                    <p class=\"text-muted-foreground leading-relaxed\">\n                      Color spaces mapped directly to standard OKLCH coordinates via Tailwind CSS v4\n                      <code class=\"bg-muted text-foreground rounded px-1 py-0.5 font-mono\">@theme inline</code> tokens,\n                      ensuring high-fidelity rendering across Apple P3 displays.\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"border-border/60 bg-card flex items-start gap-2.5 rounded-md border p-3 shadow-xs\">\n                  <div\n                    class=\"bg-primary/10 text-primary mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full\"\n                  >\n                    <Check class=\"size-3\" />\n                  </div>\n                  <div class=\"space-y-0.5 text-xs\">\n                    <span class=\"text-foreground font-semibold\">Flat Registry Dependencies Graph</span>\n                    <p class=\"text-muted-foreground leading-relaxed\">\n                      All\n                      <code class=\"bg-muted text-foreground rounded px-1 py-0.5 font-mono\">registryDependencies</code>\n                      declare flat URLs (<code class=\"bg-muted text-foreground rounded px-1 py-0.5 font-mono\"\n                        >https://uipkge.dev/r/button.json</code\n                      >), eliminating nested resolver locks in downstream CLIs.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Code Architecture Blueprint -->\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between\">\n                <h4 class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">Manifest Blueprint</h4>\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-foreground flex min-h-6 cursor-pointer items-center gap-1 text-xs transition-colors\"\n                  @click=\"copyCodeSnippet\"\n                >\n                  <Check v-if=\"copiedSnippet\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                  <span class=\"font-mono text-xs\">{{ copiedSnippet ? 'Copied' : 'Copy Manifest' }}</span>\n                </button>\n              </div>\n\n              <div\n                class=\"border-border/80 bg-muted/60 relative overflow-hidden rounded-lg border p-3 font-mono text-xs\"\n              >\n                <pre\n                  class=\"text-foreground/90 overflow-x-auto leading-relaxed\"\n                ><code><span class=\"text-primary font-semibold\">export default</span> <span class=\"text-info\">defineRegistryItem</span>({\n  name: <span class=\"text-success\">'meeting-agenda-notes'</span>,\n  type: <span class=\"text-success\">'registry:block'</span>,\n  categories: [<span class=\"text-success\">'productivity'</span>, <span class=\"text-success\">'collaboration'</span>],\n  dependencies: [<span class=\"text-success\">'lucide-vue-next'</span>],\n  registryDependencies: [\n    <span class=\"text-warning\">'https://uipkge.dev/r/avatar.json'</span>,\n    <span class=\"text-warning\">'https://uipkge.dev/r/badge.json'</span>,\n    <span class=\"text-warning\">'https://uipkge.dev/r/button.json'</span>,\n    <span class=\"text-warning\">'https://uipkge.dev/r/card.json'</span>,\n    <span class=\"text-warning\">'https://uipkge.dev/r/checkbox.json'</span>,\n    <span class=\"text-warning\">'https://uipkge.dev/r/separator.json'</span>,\n  ],\n})</code></pre>\n              </div>\n            </div>\n\n            <!-- Live Meeting Annotations & Comment Thread -->\n            <div class=\"space-y-3 pt-2\">\n              <h4 class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">Live Annotations</h4>\n\n              <div class=\"space-y-2.5\">\n                <div\n                  v-for=\"note in liveNotes\"\n                  :key=\"note.id\"\n                  class=\"border-border/60 bg-muted/20 flex items-start gap-2.5 rounded-lg border p-3\"\n                >\n                  <Avatar size=\"sm\" class=\"size-6 shrink-0 text-xs\">\n                    <AvatarFallback :class=\"note.authorColor\">\n                      {{ note.authorInitials }}\n                    </AvatarFallback>\n                  </Avatar>\n\n                  <div class=\"flex-1 space-y-1\">\n                    <div class=\"flex items-center justify-between gap-2\">\n                      <div class=\"flex items-center gap-1.5\">\n                        <span class=\"text-foreground text-xs font-semibold\">{{ note.author }}</span>\n                        <Badge variant=\"outline\" class=\"text-muted-foreground px-1 py-0 font-mono text-xs\">\n                          {{ note.tag }}\n                        </Badge>\n                      </div>\n                      <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ note.timestamp }}</span>\n                    </div>\n                    <p class=\"text-foreground/90 text-xs leading-relaxed\">{{ note.content }}</p>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Inline Note Composer -->\n              <div class=\"flex flex-col items-stretch gap-2 pt-2 sm:flex-row sm:items-center\">\n                <div class=\"relative flex-1\">\n                  <input\n                    v-model=\"newNoteDraft\"\n                    type=\"text\"\n                    placeholder=\"Append architecture note or observation...\"\n                    class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/40 h-8 w-full rounded-md border px-3 py-1 text-xs shadow-xs outline-none focus-visible:ring-2\"\n                    @keydown.enter=\"addNote\"\n                  />\n                </div>\n\n                <div class=\"flex items-center gap-1.5\">\n                  <select\n                    v-model=\"newNoteTag\"\n                    class=\"border-input bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/40 h-8 rounded-md border px-2 text-xs shadow-xs outline-none focus-visible:ring-2\"\n                  >\n                    <option value=\"#architecture\">#architecture</option>\n                    <option value=\"#pipeline\">#pipeline</option>\n                    <option value=\"#decision\">#decision</option>\n                    <option value=\"#action\">#action</option>\n                  </select>\n\n                  <Button\n                    size=\"sm\"\n                    variant=\"secondary\"\n                    class=\"h-8 gap-1 text-xs shadow-xs\"\n                    :disabled=\"!newNoteDraft.trim()\"\n                    @click=\"addNote\"\n                  >\n                    <Plus class=\"size-3.5\" />\n                    Post\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Sidebar: Action Items, Decisions, & Meta (4-5 cols) -->\n      <div class=\"space-y-6 lg:col-span-5 xl:col-span-4\">\n        <!-- Action Items Checklist Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"px-5 pt-5 pb-3\">\n            <div class=\"flex items-center justify-between gap-2\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-success/10 text-success flex size-7 items-center justify-center rounded-md\">\n                  <UserCheck class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base font-semibold\">Action Items</CardTitle>\n                  <CardDescription class=\"text-xs\"> Assigned deliverables & deadlines </CardDescription>\n                </div>\n              </div>\n\n              <!-- Completion Counter Badge -->\n              <Badge variant=\"secondary\" class=\"font-mono text-xs tabular-nums\">\n                {{ completedTasksCount }}/{{ totalTasksCount }} Done ({{ completionPercentage }}%)\n              </Badge>\n            </div>\n\n            <!-- Progress bar -->\n            <div class=\"bg-muted mt-3 h-1.5 w-full overflow-hidden rounded-full\">\n              <div\n                class=\"bg-success h-full rounded-full transition-[width] duration-300\"\n                :style=\"{ width: `${completionPercentage}%` }\"\n              />\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 p-5 pt-2\">\n            <!-- Checklist items -->\n            <div class=\"space-y-2.5\">\n              <div\n                v-for=\"task in actionItems\"\n                :key=\"task.id\"\n                :class=\"\n                  cn(\n                    'group flex items-start gap-3 rounded-lg border p-3 transition-colors',\n                    task.completed\n                      ? 'border-border/40 bg-muted/20 opacity-75'\n                      : 'border-border/80 bg-card hover:border-border hover:bg-muted/10',\n                  )\n                \"\n              >\n                <!-- Checkbox -->\n                <div class=\"pt-0.5\">\n                  <Checkbox\n                    :id=\"task.id\"\n                    :model-value=\"task.completed\"\n                    @update:model-value=\"(val) => toggleTask(task.id, Boolean(val))\"\n                  />\n                </div>\n\n                <!-- Task content -->\n                <div class=\"flex-1 space-y-1.5\">\n                  <label\n                    :for=\"task.id\"\n                    :class=\"\n                      cn(\n                        'block cursor-pointer text-xs leading-relaxed font-medium transition-colors select-none',\n                        task.completed ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )\n                    \"\n                  >\n                    {{ task.title }}\n                  </label>\n\n                  <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-1.5 text-xs\">\n                    <!-- Assignee -->\n                    <div class=\"flex items-center gap-1.5\">\n                      <Avatar size=\"xs\" class=\"size-4 text-xs\">\n                        <AvatarFallback :class=\"cn('text-xs', task.assigneeColor)\">\n                          {{ task.assigneeInitials }}\n                        </AvatarFallback>\n                      </Avatar>\n                      <span class=\"text-foreground/80 text-xs font-medium\">\n                        {{ task.assignee }}\n                      </span>\n                    </div>\n\n                    <!-- Priority & Date -->\n                    <div class=\"flex items-center gap-1.5\">\n                      <Badge\n                        :variant=\"\n                          task.priority === 'Urgent' || task.priority === 'High'\n                            ? 'destructive'\n                            : task.priority === 'Medium'\n                              ? 'warning'\n                              : 'secondary'\n                        \"\n                        class=\"h-4.5 px-1.5 text-xs font-semibold uppercase\"\n                      >\n                        {{ task.priority }}\n                      </Badge>\n                      <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                        {{ task.dueDate }}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Quick Add Action Item -->\n            <div class=\"border-border/80 bg-muted/20 space-y-2 rounded-lg border border-dashed p-3\">\n              <input\n                v-model=\"newTaskTitle\"\n                type=\"text\"\n                placeholder=\"New action item description...\"\n                class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring h-7 w-full rounded border px-2.5 text-xs shadow-xs outline-none focus-visible:ring-1\"\n                @keydown.enter=\"addTask\"\n              />\n\n              <div class=\"flex items-center justify-between gap-2\">\n                <select\n                  v-model=\"newTaskAssignee\"\n                  class=\"border-input bg-background text-foreground h-7 rounded border px-2 text-xs shadow-xs outline-none\"\n                >\n                  <option v-for=\"att in attendees\" :key=\"att.id\" :value=\"att.name\">\n                    {{ att.name }}\n                  </option>\n                </select>\n\n                <select\n                  v-model=\"newTaskPriority\"\n                  class=\"border-input bg-background text-foreground h-7 rounded border px-2 text-xs shadow-xs outline-none\"\n                >\n                  <option value=\"Urgent\">Urgent</option>\n                  <option value=\"High\">High</option>\n                  <option value=\"Medium\">Medium</option>\n                  <option value=\"Low\">Low</option>\n                </select>\n\n                <Button\n                  size=\"xs\"\n                  variant=\"default\"\n                  class=\"h-7 gap-1 text-xs\"\n                  :disabled=\"!newTaskTitle.trim()\"\n                  @click=\"addTask\"\n                >\n                  <Plus class=\"size-3\" />\n                  Add\n                </Button>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Key Decisions Log Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"px-5 pt-5 pb-3\">\n            <div class=\"flex items-center justify-between gap-2\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                  <CheckCircle2 class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base font-semibold\">Key Decisions Log</CardTitle>\n                  <CardDescription class=\"text-xs\"> Recorded architectural consensus </CardDescription>\n                </div>\n              </div>\n\n              <Badge variant=\"outline\" class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                {{ keyDecisions.length }} Recorded\n              </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 p-5 pt-2\">\n            <div\n              v-for=\"decision in keyDecisions\"\n              :key=\"decision.id\"\n              class=\"border-border/80 bg-card space-y-2 rounded-lg border p-3.5 shadow-xs\"\n            >\n              <div class=\"flex items-start justify-between gap-2\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-muted-foreground font-mono text-xs font-bold\"> D-0{{ decision.number }} </span>\n                  <Badge\n                    :variant=\"decision.status === 'Adopted' ? 'success' : 'warning'\"\n                    class=\"h-4.5 px-1.5 text-xs font-semibold uppercase\"\n                  >\n                    {{ decision.status }}\n                  </Badge>\n                </div>\n\n                <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ decision.time }}\n                </span>\n              </div>\n\n              <h4 class=\"text-foreground text-xs leading-snug font-semibold\">\n                {{ decision.title }}\n              </h4>\n\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                {{ decision.context }}\n              </p>\n\n              <div class=\"text-muted-foreground border-border/40 flex items-center gap-1 border-t pt-1 text-xs\">\n                <span>Decided by:</span>\n                <span class=\"text-foreground font-medium\">{{ decision.decidedBy }}</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Meeting Metadata & Shared Resources Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"px-5 pt-4 pb-2\">\n            <CardTitle class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n              Session Resources & Security\n            </CardTitle>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 p-5 pt-1\">\n            <div class=\"space-y-2 text-xs\">\n              <div class=\"text-muted-foreground flex items-center justify-between\">\n                <span class=\"flex items-center gap-1.5\">\n                  <Lock class=\"text-foreground/70 size-3.5\" />\n                  Access Level\n                </span>\n                <span class=\"text-foreground font-medium\">Internal (SSO Auth)</span>\n              </div>\n\n              <div class=\"text-muted-foreground flex items-center justify-between\">\n                <span class=\"flex items-center gap-1.5\">\n                  <Calendar class=\"text-foreground/70 size-3.5\" />\n                  Next Sync\n                </span>\n                <span class=\"text-foreground font-mono font-medium tabular-nums\">Aug 28 · 14:00 PST</span>\n              </div>\n            </div>\n\n            <Separator class=\"bg-border/60\" />\n\n            <!-- Linked Resources -->\n            <div class=\"space-y-1.5\">\n              <span class=\"text-muted-foreground text-xs font-semibold\">Attached Artifacts</span>\n\n              <div class=\"space-y-1\">\n                <a\n                  href=\"#artifacts\"\n                  class=\"text-foreground hover:bg-muted group flex items-center justify-between rounded-md p-1.5 text-xs transition-colors\"\n                >\n                  <span class=\"flex items-center gap-2\">\n                    <FileSpreadsheet class=\"text-success size-3.5\" />\n                    <span>OKLCH Token Audit Matrix.xlsx</span>\n                  </span>\n                  <ExternalLink class=\"text-muted-foreground group-hover:text-foreground size-3 transition-colors\" />\n                </a>\n\n                <a\n                  href=\"#artifacts\"\n                  class=\"text-foreground hover:bg-muted group flex items-center justify-between rounded-md p-1.5 text-xs transition-colors\"\n                >\n                  <span class=\"flex items-center gap-2\">\n                    <GitPullRequest class=\"text-chart-2 size-3.5\" />\n                    <span>PR #412: Flat Dependency Resolution</span>\n                  </span>\n                  <ExternalLink class=\"text-muted-foreground group-hover:text-foreground size-3 transition-colors\" />\n                </a>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/MeetingAgendaNotes.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/checkbox.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Linear and Notion style structured meeting document with attendee avatars, timeboxed agenda topics, rich discussion notes, interactive action items checklist, and key decisions log.",
  "categories": [
    "productivity",
    "app",
    "collaboration"
  ]
}