{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "changelog-release-notes-timeline", "title": "Changelog Release Notes Timeline", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/changelog-release-notes-timeline/changelog-release-notes-timeline.component.ts", "content": "// Developer changelog timeline with interactive version filters, categorical changes\n// (features, improvements, fixes), and commit hash links. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { Calendar, CheckCircle2, GitCommit, History, Layers, LucideAngularModule, Wrench, Zap } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport interface ChangelogTimelineEntry {\n version: string\n date: string\n title: string\n description: string\n commitHash: string\n isLatest?: boolean\n features: string[]\n improvements: string[]\n fixes: string[]\n}\n\nconst entries: ChangelogTimelineEntry[] = [\n {\n version: 'v2.4.0',\n date: 'August 2026',\n title: 'Marketing Blocks Expansion & Tailwind CSS v4 OKLCH Engine',\n description:\n 'Massive expansion introducing 75+ unbundled marketing blocks with zero sub-12px microtext, dual-framework AST parity, and interactive functional workbenches.',\n commitHash: '926c404',\n isLatest: true,\n features: [\n 'Interactive Hero Sandboxes with live framework and theme preview tabs.',\n 'Split Developer Workbenches for live AST code preview and schema compilation.',\n 'ROI & Usage Cost Calculators with reactive slider models and dynamic tier calculation.',\n 'Infinite CSS-driven Logo Tickers and Verified Engineer Endorsement Masonry.',\n ],\n improvements: [\n 'Strict adherence to Pioneer Craft standards (Linear, Raycast, Stripe typography scale).',\n 'Refactored token definitions into single canonical shared `@theme inline` stylesheet.',\n 'Optimized Astro SSG islands hydration for instant sub-20ms INP responsiveness.',\n ],\n fixes: [\n 'Resolved circular imports in CVA variant definitions by extracting dedicated variant files.',\n 'Fixed React JSX expression single curly braces syntax parity.',\n ],\n },\n {\n version: 'v2.3.0',\n date: 'July 2026',\n title: 'Dual-Framework Parity Engine & AST Synchronization',\n description:\n 'Automated cross-framework parity check tool ensuring 100% token and CVA variant synchronization between Vue 3.5 and React 19.',\n commitHash: 'a8b3f12',\n features: [\n 'Cross-framework parity checking CLI (`npm run check:parity`).',\n 'Direct shadcn-vue and shadcn CLI HTTP unbundled distribution.',\n ],\n improvements: [\n 'Removed all monolithic npm package bindings in favor of pure unbundled distribution.',\n 'Enhanced Lucide icon alignment across polymorphic Reka UI primitives.',\n ],\n fixes: ['Fixed SSR hydration mismatch on theme color scheme initial render.'],\n },\n {\n version: 'v2.2.0',\n date: 'June 2026',\n title: 'Ecosystem Reference Templates Launch',\n description:\n 'Introduced reference architectures for Nuxt 3 HRMS, Hospital Clinical Intelligence, and Global Shipment Tracking.',\n commitHash: 'e47c991',\n features: [\n 'Shipment Tracking Template with live GPS telemetry cards.',\n 'HRMS Nuxt Template with interactive payroll matrices and attendance timecards.',\n ],\n improvements: ['Streamlined bootstrap items (`init`, `tailwind`, `utils`, `use-theme`).'],\n fixes: ['Addressed upstream `shadcn-vue` resolver circular warning.'],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-changelog-release-notes-timeline, [ui-changelog-release-notes-timeline]',\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: [LucideAngularModule, UiBadgeComponent, UiCardComponent],\n template: `\n
\n
\n \n
\n \n \n Changelog & Release History\n \n

Continuous craft updates.

\n

\n Explore every version release, architectural improvement, and new block added to the registry.\n

\n\n \n
\n \n @for (e of allEntries; track e.version) {\n \n }\n
\n
\n\n \n
\n @for (entry of filteredEntries(); track entry.version) {\n
\n \n
\n @if (entry.isLatest) {\n
\n }\n
\n\n \n
\n \n
\n
\n \n {{ entry.version }}\n \n @if (entry.isLatest) {\n Latest Release\n }\n
\n\n
\n \n \n {{ entry.date }}\n \n \n \n {{ entry.commitHash }}\n \n
\n
\n\n \n
\n

{{ entry.title }}

\n

{{ entry.description }}

\n
\n\n \n @if (entry.features.length) {\n
\n

\n \n New Capabilities & Blocks\n

\n
    \n @for (f of entry.features; track f) {\n
  • \n \n {{ f }}\n
    • \n }\n
\n
\n }\n\n \n @if (entry.improvements.length) {\n
\n

\n \n Craft & Architecture Enhancements\n

\n
    \n @for (imp of entry.improvements; track imp) {\n
  • \n •\n {{ imp }}\n
    • \n }\n
\n
\n }\n\n \n @if (entry.fixes.length) {\n
\n

\n \n Fixes & Parity Patches\n

\n
    \n @for (fix of entry.fixes; track fix) {\n
  • \n •\n {{ fix }}\n
    • \n }\n
\n
\n }\n
\n
\n }\n
\n
\n
\n `,\n})\nexport class UiChangelogReleaseNotesTimelineComponent {\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly GitCommit = GitCommit\n protected readonly History = History\n protected readonly Layers = Layers\n protected readonly Wrench = Wrench\n protected readonly Zap = Zap\n\n protected readonly allEntries = entries\n\n @Input('class') className?: string\n\n readonly selectedVersion = signal('all')\n\n readonly filteredEntries = computed(() => {\n const v = this.selectedVersion()\n if (v === 'all') return entries\n return entries.filter((e) => e.version === v)\n })\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n nodeClass(isLatest: boolean): string {\n return cn(\n 'bg-background absolute top-1.5 -left-[31px] flex size-4 items-center justify-center rounded-full border-2 transition-colors sm:-left-[39px]',\n isLatest ? 'border-primary bg-primary/20' : 'border-muted-foreground/40',\n )\n }\n\n filterClass(version: string): string {\n return cn(\n 'rounded-lg border px-3 py-1 font-mono text-xs transition-colors',\n this.selectedVersion() === version\n ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n : 'border-border bg-card text-muted-foreground hover:text-foreground',\n )\n }\n\n selectVersion(version: string): void {\n this.selectedVersion.set(version)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/changelog-release-notes-timeline/changelog-release-notes-timeline.component.ts" }, { "path": "packages/registry-angular/blocks/changelog-release-notes-timeline/index.ts", "content": "export {\n UiChangelogReleaseNotesTimelineComponent,\n type ChangelogTimelineEntry,\n} from './changelog-release-notes-timeline.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/changelog-release-notes-timeline/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Developer changelog timeline with interactive version filters, categorical changes (features, improvements, fixes), and commit hash links.", "categories": [ "marketing" ] }