{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-visual-changelog-diff",
  "title": "Feature Visual Changelog Diff",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-visual-changelog-diff/FeatureVisualChangelogDiff.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Check, Copy, GitCommit, GitPullRequest } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface ChangelogRelease {\n  version: string\n  date: string\n  title: string\n  description: string\n  commitSha: string\n  diffLines: {\n    type: 'add' | 'delete' | 'context'\n    content: string\n  }[]\n}\n\nexport interface FeatureVisualChangelogDiffProps {\n  title?: string\n  description?: string\n  releases?: ChangelogRelease[]\n  class?: string\n}\n\nconst DEFAULT_RELEASES: ChangelogRelease[] = [\n  {\n    version: 'v2.4.0',\n    date: 'August 2026',\n    title: 'Tailwind CSS v4 & OKLCH Semantic Color Spaces',\n    description:\n      'Upgraded all cross-framework tokens to direct @theme inline CSS bindings. Eliminates legacy postcss configs.',\n    commitSha: '7f9a2b1',\n    diffLines: [\n      { type: 'delete', content: '- module.exports = { theme: { extend: { colors: { ... } } } }' },\n      { type: 'add', content: '+ @theme inline {' },\n      { type: 'add', content: '+   --color-background: oklch(1 0 0);' },\n      { type: 'add', content: '+   --color-primary: oklch(0.205 0 0);' },\n      { type: 'add', content: '+ }' },\n      { type: 'context', content: '  // Zero JavaScript compilation overhead in production bundles' },\n    ],\n  },\n  {\n    version: 'v2.3.0',\n    date: 'July 2026',\n    title: 'Headless Polymorphic Primitive Architecture',\n    description: 'Unified Reka UI and Radix UI state machines across Vue 3.5 and React 19 mirrors.',\n    commitSha: '4c8e1d9',\n    diffLines: [\n      { type: 'delete', content: '- import { Dialog } from \"legacy-untyped-modal\"' },\n      { type: 'add', content: '+ import { DialogRoot, DialogPortal } from \"reka-ui\"' },\n      { type: 'add', content: '+ <Primitive data-slot=\"dialog\" :as=\"as\">' },\n      { type: 'context', content: '  // Full WCAG AA focus trapping and keyboard navigation' },\n    ],\n  },\n]\n\nconst props = withDefaults(defineProps<FeatureVisualChangelogDiffProps>(), {\n  title: 'Continuous evolution with transparent source-level changelogs.',\n  description:\n    'Every architectural improvement, performance optimization, and token adjustment documented with precise git diffs.',\n})\n\nconst activeReleases = computed(() => props.releases ?? DEFAULT_RELEASES)\n\nconst copiedSha = ref<string | null>(null)\n\nasync function copySha(sha: string) {\n  try {\n    await navigator.clipboard.writeText(sha)\n    copiedSha.value = sha\n    setTimeout(() => {\n      copiedSha.value = null\n    }, 2000)\n  } catch {\n    // fallback\n  }\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-visual-changelog-diff\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#changelog\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <GitPullRequest class=\"text-primary size-3.5\" />\n          <span>Continuous Release Ledger</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n      </div>\n\n      <!-- Changelog Timeline Entries -->\n      <div class=\"mx-auto mt-12 max-w-4xl space-y-8\">\n        <Card\n          v-for=\"rel in activeReleases\"\n          :key=\"rel.version\"\n          class=\"border-border bg-card/80 overflow-hidden shadow-xs backdrop-blur-xs\"\n        >\n          <CardContent class=\"space-y-5 p-6\">\n            <!-- Header Bar -->\n            <div class=\"border-border flex flex-wrap items-center justify-between gap-2 border-b pb-3\">\n              <div class=\"flex items-center gap-2.5\">\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-primary/40 bg-primary/10 text-primary font-mono text-xs font-bold\"\n                >\n                  {{ rel.version }}\n                </Badge>\n                <span class=\"text-foreground text-sm font-bold\">{{ rel.title }}</span>\n              </div>\n\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ rel.date }}</span>\n                <button\n                  type=\"button\"\n                  class=\"border-border bg-muted/30 text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                  @click=\"copySha(rel.commitSha)\"\n                >\n                  <GitCommit class=\"text-primary size-3\" />\n                  <span>{{ rel.commitSha }}</span>\n                  <Check v-if=\"copiedSha === rel.commitSha\" class=\"text-success ml-0.5 size-3\" />\n                  <Copy v-else class=\"ml-0.5 size-3\" />\n                </button>\n              </div>\n            </div>\n\n            <p class=\"text-muted-foreground text-xs leading-relaxed\">\n              {{ rel.description }}\n            </p>\n\n            <!-- Code Diff Box -->\n            <div class=\"border-border bg-muted/40 overflow-hidden rounded-lg border font-mono text-xs\">\n              <div\n                class=\"border-border/80 bg-muted/60 text-muted-foreground flex items-center justify-between border-b px-3 py-1.5 text-xs font-bold\"\n              >\n                <span>Unified Source Diff</span>\n                <span class=\"text-success text-xs font-normal\">Git verified</span>\n              </div>\n              <div class=\"space-y-1 overflow-x-auto p-3 text-xs\">\n                <div\n                  v-for=\"(line, lIdx) in rel.diffLines\"\n                  :key=\"lIdx\"\n                  :class=\"\n                    cn(\n                      'rounded px-2 py-0.5 leading-relaxed',\n                      line.type === 'add'\n                        ? 'bg-success/10 text-success font-medium'\n                        : line.type === 'delete'\n                          ? 'bg-destructive/10 text-destructive text-destructive line-through opacity-80'\n                          : 'text-muted-foreground',\n                    )\n                  \"\n                >\n                  {{ line.content }}\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-visual-changelog-diff/FeatureVisualChangelogDiff.vue"
    },
    {
      "path": "packages/registry-vue/blocks/feature-visual-changelog-diff/index.ts",
      "content": "export { default as FeatureVisualChangelogDiff } from './FeatureVisualChangelogDiff.vue'\nexport type { ChangelogRelease, FeatureVisualChangelogDiffProps } from './FeatureVisualChangelogDiff.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-visual-changelog-diff/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Visual semantic git changelog with unified code diff highlighting and commit verification.",
  "categories": [
    "feature",
    "marketing"
  ]
}