{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "changelog-release-notes-timeline",
  "title": "Changelog Release Notes Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/changelog-release-notes-timeline/ChangelogReleaseNotesTimeline.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Calendar, CheckCircle2, GitCommit, History, Layers, Wrench, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\n\ninterface ChangelogEntry {\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: ChangelogEntry[] = [\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\nconst selectedVersion = ref<string>('all')\n\nconst filteredEntries = computed(() => {\n  if (selectedVersion.value === 'all') return entries\n  return entries.filter((e) => e.version === selectedVersion.value)\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"changelog-release-notes-timeline\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto max-w-4xl space-y-12\">\n      <!-- Header -->\n      <div class=\"mx-auto max-w-2xl space-y-4 text-center\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <History class=\"text-primary size-3.5\" />\n          Changelog &amp; Release History\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">Continuous craft updates.</h2>\n        <p class=\"text-muted-foreground text-base\">\n          Explore every version release, architectural improvement, and new block added to the registry.\n        </p>\n\n        <!-- Version Filters -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <button\n            type=\"button\"\n            class=\"rounded-lg border px-3 py-1 font-mono text-xs transition-colors\"\n            :class=\"\n              selectedVersion === 'all'\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            @click=\"selectedVersion = 'all'\"\n          >\n            All Releases\n          </button>\n          <button\n            v-for=\"e in entries\"\n            :key=\"e.version\"\n            type=\"button\"\n            class=\"rounded-lg border px-3 py-1 font-mono text-xs transition-colors\"\n            :class=\"\n              selectedVersion === e.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            @click=\"selectedVersion = e.version\"\n          >\n            {{ e.version }}\n          </button>\n        </div>\n      </div>\n\n      <!-- Timeline Feed -->\n      <div class=\"border-border/80 relative ml-2 space-y-12 border-l pl-6 text-left sm:ml-4 sm:pl-8\">\n        <div v-for=\"entry in filteredEntries\" :key=\"entry.version\" class=\"group relative\">\n          <!-- Timeline Node Circle -->\n          <div\n            class=\"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            :class=\"entry.isLatest ? 'border-primary bg-primary/20' : 'border-muted-foreground/40'\"\n          >\n            <div v-if=\"entry.isLatest\" class=\"bg-primary size-1.5 animate-pulse rounded-full\" />\n          </div>\n\n          <!-- Entry Card -->\n          <Card class=\"border-border bg-card/95 space-y-6 rounded-2xl p-6 shadow-xl sm:p-8\">\n            <!-- Header Row: Version pill, Date, Commit Diff -->\n            <div class=\"border-border/60 flex flex-wrap items-center justify-between gap-4 border-b pb-4\">\n              <div class=\"flex items-center gap-2.5\">\n                <Badge :variant=\"entry.isLatest ? 'default' : 'secondary'\" class=\"px-2.5 py-0.5 font-mono text-xs\">\n                  {{ entry.version }}\n                </Badge>\n                <span v-if=\"entry.isLatest\" class=\"text-success font-mono text-xs font-bold uppercase\">\n                  Latest Release\n                </span>\n              </div>\n\n              <div class=\"text-muted-foreground flex items-center gap-4 font-mono text-xs\">\n                <span class=\"flex items-center gap-1\">\n                  <Calendar class=\"size-3.5\" />\n                  {{ entry.date }}\n                </span>\n                <span class=\"text-foreground/80 hover:text-foreground flex items-center gap-1\">\n                  <GitCommit class=\"text-primary size-3.5\" />\n                  <code>{{ entry.commitHash }}</code>\n                </span>\n              </div>\n            </div>\n\n            <!-- Title & Summary -->\n            <div class=\"space-y-2\">\n              <h3 class=\"text-foreground font-mono text-xl font-bold tracking-tight\">{{ entry.title }}</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">{{ entry.description }}</p>\n            </div>\n\n            <!-- Category Section 1: Features -->\n            <div v-if=\"entry.features.length\" class=\"space-y-2\">\n              <h4 class=\"text-success flex items-center gap-1.5 font-mono text-xs font-bold\">\n                <Layers class=\"size-3.5\" />\n                New Capabilities &amp; Blocks\n              </h4>\n              <ul class=\"text-foreground/90 space-y-1.5 pl-1 font-mono text-xs\">\n                <li v-for=\"(f, fIdx) in entry.features\" :key=\"fIdx\" class=\"flex items-start gap-2\">\n                  <CheckCircle2 class=\"text-success mt-0.5 size-3.5 shrink-0\" />\n                  <span>{{ f }}</span>\n                </li>\n              </ul>\n            </div>\n\n            <!-- Category Section 2: Improvements -->\n            <div v-if=\"entry.improvements.length\" class=\"space-y-2\">\n              <h4 class=\"text-primary flex items-center gap-1.5 font-mono text-xs font-bold\">\n                <Zap class=\"size-3.5\" />\n                Craft &amp; Architecture Enhancements\n              </h4>\n              <ul class=\"text-foreground/90 space-y-1.5 pl-1 font-mono text-xs\">\n                <li v-for=\"(imp, iIdx) in entry.improvements\" :key=\"iIdx\" class=\"flex items-start gap-2\">\n                  <span class=\"text-primary font-bold\">&bull;</span>\n                  <span>{{ imp }}</span>\n                </li>\n              </ul>\n            </div>\n\n            <!-- Category Section 3: Fixes -->\n            <div v-if=\"entry.fixes.length\" class=\"space-y-2\">\n              <h4 class=\"text-warning flex items-center gap-1.5 font-mono text-xs font-bold\">\n                <Wrench class=\"size-3.5\" />\n                Fixes &amp; Parity Patches\n              </h4>\n              <ul class=\"text-muted-foreground space-y-1.5 pl-1 font-mono text-xs\">\n                <li v-for=\"(fix, fxIdx) in entry.fixes\" :key=\"fxIdx\" class=\"flex items-start gap-2\">\n                  <span class=\"text-warning font-bold\">&bull;</span>\n                  <span>{{ fix }}</span>\n                </li>\n              </ul>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ChangelogReleaseNotesTimeline.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Developer changelog timeline with interactive version filters, categorical changes (features, improvements, fixes), and commit hash links.",
  "categories": [
    "marketing"
  ]
}