{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "meeting-agenda-notes", "title": "Meeting Agenda Notes", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/meeting-agenda-notes/meeting-agenda-notes.component.ts", "content": "// Linear and Notion style structured meeting document with attendee avatars, timeboxed\n// agenda topics, rich discussion notes, interactive action items checklist, and key\n// decisions log. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\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 LucideAngularModule,\n Plus,\n Radio,\n UserCheck,\n Video,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface 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\nexport interface 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\nexport interface NoteEntry {\n id: string\n author: string\n authorInitials: string\n authorColor: string\n timestamp: string\n content: string\n tag: string\n}\n\nexport interface 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\nexport interface 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 noteTagOptions = ['#architecture', '#pipeline', '#decision', '#action']\nconst priorityOptions: ActionItem['priority'][] = ['Urgent', 'High', 'Medium', 'Low']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-meeting-agenda-notes, [ui-meeting-agenda-notes]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n \n REC · 45:12\n \n Architecture Sync \n Bi-Weekly Cadence \n
\n\n
\n \n @if (copiedNotes()) {\n \n } @else {\n \n }\n {{ copiedNotes() ? 'Notes Copied!' : 'Export Notes Markdown' }}\n \n \n
\n
\n\n
\n

\n Q3 Product Architecture & Monorepo Scaling Sync\n

\n\n
\n
\n \n Friday, Aug 21, 2026\n ·\n 14:00 - 15:00 PST\n
\n
\n \n \n 60 mins · 45 mins elapsed\n \n
\n
\n \n \n Zoom Room #482-901\n @if (copiedRoomLink()) {\n \n } @else {\n \n }\n \n
\n
\n
\n\n
\n\n
\n
\n
\n Attendees \n \n 6 Present\n \n
\n\n
\n @for (attendee of attendees(); track attendee.id) {\n \n
\n \n {{ attendee.initials }}\n \n \n
\n {{ attendee.name }}\n @if (attendee.isHost) {\n \n Host\n \n }\n
\n }\n
\n
\n\n
\n
\n
\n
\n\n \n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n

Timeboxed Agenda

\n

4 topics structured with real-time progress indicators

\n
\n
\n \n 60m Total · 45m Elapsed (75%)\n \n
\n
\n
\n
\n
\n\n
\n @for (topic of agendaTopics(); track topic.id) {\n
\n
\n
\n
\n \n {{ topic.number }}\n \n

{{ topic.title }}

\n @if (topic.status === 'completed') {\n \n \n Completed\n \n } @else if (topic.status === 'active') {\n \n \n Current Topic\n \n } @else {\n \n \n Upcoming\n \n }\n
\n

{{ topic.summary }}

\n
\n @for (tag of topic.tags; track tag) {\n \n {{ tag }}\n \n }\n
\n
\n \n
\n {{ topic.duration }}\n {{ topic.timeRange }}\n
\n
\n \n \n {{ topic.leadInitials }}\n \n \n {{ topic.lead }}\n
\n
\n
\n
\n }\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n
\n

Discussion Notes & Technical Blueprint

\n

Structured architectural takeaways and runtime benchmarks

\n
\n
\n \n Last edited 2m ago by Elena Rostova\n \n
\n
\n\n
\n
\n
\n \n Core Monorepo Mandate\n
\n

\n Components are the product, not an npm library. Consumers run\n npx shadcn-vue add <url>\n and own the code directly. All block primitives must compose raw layouts without baking rigid data\n arrays into primitives.\n

\n
\n\n
\n

\n Architectural Takeaways\n

\n
\n
\n \n \n
\n
\n Zero Runtime Overhead Delivery Model\n

\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

\n
\n
\n
\n \n \n
\n
\n Perceptually Uniform OKLCH Palette\n

\n Color spaces mapped directly to standard OKLCH coordinates via Tailwind CSS v4\n @theme inline\n tokens, ensuring high-fidelity rendering across Apple P3 displays.\n

\n
\n
\n
\n \n \n
\n
\n Flat Registry Dependencies Graph\n

\n All\n registryDependencies\n declare flat URLs (https://uipkge.dev/r/button.json), eliminating nested resolver locks in downstream CLIs.\n

\n
\n
\n
\n
\n\n
\n
\n

Manifest Blueprint

\n \n @if (copiedSnippet()) {\n \n } @else {\n \n }\n {{ copiedSnippet() ? 'Copied' : 'Copy Manifest' }}\n \n
\n \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 \n\n
\n

Live Annotations

\n
\n @for (note of liveNotes(); track note.id) {\n
\n \n {{ note.authorInitials }}\n \n
\n
\n
\n {{ note.author }}\n \n {{ note.tag }}\n \n
\n {{ note.timestamp }}\n
\n

{{ note.content }}

\n
\n
\n }\n
\n\n
\n
\n \n
\n
\n \n @for (opt of noteTags; track opt) {\n \n }\n \n \n \n Post\n \n
\n
\n
\n \n \n \n\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n

Action Items

\n

Assigned deliverables & deadlines

\n
\n
\n \n {{ completedTasksCount() }}/{{ totalTasksCount() }} Done ({{ completionPercentage() }}%)\n \n
\n
\n
\n
\n
\n\n
\n
\n @for (task of actionItems(); track task.id) {\n
\n
\n \n
\n
\n \n
\n
\n \n \n {{ task.assigneeInitials }}\n \n \n {{ task.assignee }}\n
\n
\n \n {{ task.priority }}\n \n {{ task.dueDate }}\n
\n
\n
\n
\n }\n
\n\n
\n \n
\n \n @for (att of attendees(); track att.id) {\n \n }\n \n \n @for (p of priorities; track p) {\n \n }\n \n \n \n Add\n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n
\n

Key Decisions Log

\n

Recorded architectural consensus

\n
\n
\n \n {{ keyDecisions().length }} Recorded\n \n
\n
\n\n
\n @for (decision of keyDecisions(); track decision.id) {\n
\n
\n
\n D-0{{ decision.number }} \n \n {{ decision.status }}\n \n
\n {{ decision.time }}\n
\n

{{ decision.title }}

\n

{{ decision.context }}

\n
\n Decided by:\n {{ decision.decidedBy }}\n
\n
\n }\n
\n
\n\n \n
\n
\n

\n Session Resources & Security\n

\n
\n
\n
\n
\n \n \n Access Level\n \n Internal (SSO Auth)\n
\n
\n \n \n Next Sync\n \n Aug 28 · 14:00 PST\n
\n
\n
\n
\n Attached Artifacts\n
\n \n \n \n OKLCH Token Audit Matrix.xlsx\n \n \n \n \n \n \n PR #412: Flat Dependency Resolution\n \n \n \n
\n
\n
\n
\n \n \n \n `,\n})\nexport class UiMeetingAgendaNotesComponent {\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly ExternalLink = ExternalLink\n protected readonly FileDown = FileDown\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly FileText = FileText\n protected readonly GitPullRequest = GitPullRequest\n protected readonly ListOrdered = ListOrdered\n protected readonly Lock = Lock\n protected readonly Plus = Plus\n protected readonly Radio = Radio\n protected readonly UserCheck = UserCheck\n protected readonly Video = Video\n\n protected readonly noteTags = noteTagOptions\n protected readonly priorities = priorityOptions\n\n @Input('class') className?: string\n\n readonly copiedRoomLink = signal(false)\n readonly copiedNotes = signal(false)\n readonly copiedSnippet = signal(false)\n\n readonly attendees = signal([\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 readonly agendaTopics = signal([\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 readonly liveNotes = signal([\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\n readonly newNoteDraft = signal('')\n readonly newNoteTag = signal('#architecture')\n\n readonly actionItems = signal([\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\n readonly newTaskTitle = signal('')\n readonly newTaskAssignee = signal('Alex Rivera')\n readonly newTaskPriority = signal('Medium')\n\n readonly keyDecisions = signal([\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 readonly completedTasksCount = computed(() => this.actionItems().filter((t) => t.completed).length)\n readonly totalTasksCount = computed(() => this.actionItems().length)\n readonly completionPercentage = computed(() =>\n this.totalTasksCount() === 0 ? 0 : Math.round((this.completedTasksCount() / this.totalTasksCount()) * 100),\n )\n\n get rootClass(): string {\n return cn('text-foreground w-full space-y-6', this.className)\n }\n\n topicCardClass(status: AgendaTopic['status']): string {\n return cn(\n 'group relative rounded-lg border p-4 transition-colors duration-150',\n status === 'active' && 'border-primary/50 bg-primary/[0.03] shadow-xs',\n status === 'completed' && 'border-border/80 bg-muted/20',\n status === 'upcoming' && 'border-border/60 bg-card hover:border-border',\n )\n }\n\n taskCardClass(completed: boolean): string {\n return cn(\n 'group flex items-start gap-3 rounded-lg border p-3 transition-colors',\n 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 taskLabelClass(completed: boolean): string {\n return cn(\n 'block cursor-pointer text-xs leading-relaxed font-medium transition-colors select-none',\n completed ? 'text-muted-foreground line-through' : 'text-foreground',\n )\n }\n\n taskPriorityVariant(p: ActionItem['priority']): 'destructive' | 'warning' | 'secondary' {\n if (p === 'Urgent' || p === 'High') return 'destructive'\n if (p === 'Medium') return 'warning'\n return 'secondary'\n }\n\n priorityFromString(v: string): ActionItem['priority'] {\n return (priorityOptions as string[]).includes(v) ? (v as ActionItem['priority']) : 'Medium'\n }\n\n flash(signalRef: { set: (v: boolean) => void }): void {\n signalRef.set(true)\n setTimeout(() => signalRef.set(false), 2000)\n }\n\n copyRoomLink(): void {\n try {\n navigator.clipboard?.writeText('https://zoom.us/j/4829017734')\n } catch {\n // Clipboard fallback\n }\n this.flash(this.copiedRoomLink)\n }\n\n copyNotesMarkdown(): void {\n try {\n navigator.clipboard?.writeText(this.notesMarkdown())\n } catch {\n // Clipboard fallback\n }\n this.flash(this.copiedNotes)\n }\n\n exportNotesMarkdown(): void {\n this.copyNotesMarkdown()\n }\n\n copyCodeSnippet(): void {\n try {\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 } catch {\n // Clipboard fallback\n }\n this.flash(this.copiedSnippet)\n }\n\n addNote(): void {\n if (!this.newNoteDraft().trim()) return\n this.liveNotes.update((prev) => [\n ...prev,\n {\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: this.newNoteDraft().trim(),\n tag: this.newNoteTag(),\n },\n ])\n this.newNoteDraft.set('')\n }\n\n toggleTask(id: string, checked: boolean): void {\n this.actionItems.update((prev) => prev.map((t) => (t.id === id ? { ...t, completed: checked } : t)))\n }\n\n addTask(): void {\n if (!this.newTaskTitle().trim()) return\n const attendee = this.attendees().find((a) => a.name === this.newTaskAssignee()) ?? this.attendees()[0]!\n this.actionItems.update((prev) => [\n ...prev,\n {\n id: `task-${Date.now()}`,\n title: this.newTaskTitle().trim(),\n assignee: attendee.name,\n assigneeInitials: attendee.initials,\n assigneeColor: attendee.colorClass,\n dueDate: 'Aug 30, 2026',\n priority: this.newTaskPriority(),\n completed: false,\n },\n ])\n this.newTaskTitle.set('')\n }\n\n notesMarkdown(): string {\n return `# Q3 Product Architecture & Monorepo Scaling Sync\n**Date:** Friday, Aug 21, 2026 · 14:00 - 15:00 PST\n**Attendees:** Elena Rostova (Host), Marcus Vance, Sarah Jenkins, David Chen, Sofia Rossi, Alex Rivera\n\n## Timeboxed Agenda\n${this.agendaTopics()\n .map((t) => `- [${t.status === 'completed' ? 'x' : ' '}] **${t.title}** (${t.duration} · ${t.timeRange}) - ${t.lead}`)\n .join('\\n')}\n\n## Key Architectural Decisions\n${this.keyDecisions()\n .map((d) => `${d.number}. **${d.title}** [${d.status}]`)\n .join('\\n')}\n\n## Action Items\n${this.actionItems()\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 }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/meeting-agenda-notes/meeting-agenda-notes.component.ts" }, { "path": "packages/registry-angular/blocks/meeting-agenda-notes/index.ts", "content": "export {\n UiMeetingAgendaNotesComponent,\n type Attendee,\n type AgendaTopic,\n type NoteEntry,\n type ActionItem,\n type KeyDecision,\n} from './meeting-agenda-notes.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/meeting-agenda-notes/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/checkbox.json", "https://uipkge.dev/r/angular/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" ] }