{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-visual-changelog-diff",
  "title": "Feature Visual Changelog Diff",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-visual-changelog-diff/FeatureVisualChangelogDiff.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, Copy, GitCommit, GitPullRequest } from 'lucide-react'\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  className?: 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\nexport function FeatureVisualChangelogDiff({\n  title = 'Continuous evolution with transparent source-level changelogs.',\n  description = 'Every architectural improvement, performance optimization, and token adjustment documented with precise git diffs.',\n  releases = DEFAULT_RELEASES,\n  className,\n}: FeatureVisualChangelogDiffProps) {\n  const [copiedSha, setCopiedSha] = React.useState<string | null>(null)\n\n  async function copySha(sha: string) {\n    try {\n      await navigator.clipboard.writeText(sha)\n      setCopiedSha(sha)\n      setTimeout(() => {\n        setCopiedSha(null)\n      }, 2000)\n    } catch {\n      // fallback\n    }\n  }\n\n  return (\n    <section\n      data-slot=\"feature-visual-changelog-diff\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#changelog\"\n            className=\"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 className=\"text-primary size-3.5\" />\n            <span>Continuous Release Ledger</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n        </div>\n\n        {/* Changelog Timeline Entries */}\n        <div className=\"mx-auto mt-12 max-w-4xl space-y-8\">\n          {releases.map((rel) => (\n            <Card key={rel.version} className=\"border-border bg-card/80 overflow-hidden shadow-xs backdrop-blur-xs\">\n              <CardContent className=\"space-y-5 p-6\">\n                {/* Header Bar */}\n                <div className=\"border-border flex flex-wrap items-center justify-between gap-2 border-b pb-3\">\n                  <div className=\"flex items-center gap-2.5\">\n                    <Badge\n                      variant=\"outline\"\n                      className=\"border-primary/40 bg-primary/10 text-primary font-mono text-xs font-bold\"\n                    >\n                      {rel.version}\n                    </Badge>\n                    <span className=\"text-foreground text-sm font-bold\">{rel.title}</span>\n                  </div>\n\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-muted-foreground font-mono text-xs\">{rel.date}</span>\n                    <button\n                      type=\"button\"\n                      className=\"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                      onClick={() => copySha(rel.commitSha)}\n                    >\n                      <GitCommit className=\"text-primary size-3\" />\n                      <span>{rel.commitSha}</span>\n                      {copiedSha === rel.commitSha ? (\n                        <Check className=\"text-success ml-0.5 size-3\" />\n                      ) : (\n                        <Copy className=\"ml-0.5 size-3\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n\n                <p className=\"text-muted-foreground text-xs leading-relaxed\">{rel.description}</p>\n\n                {/* Code Diff Box */}\n                <div className=\"border-border bg-muted/40 overflow-hidden rounded-lg border font-mono text-xs\">\n                  <div className=\"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                    <span>Unified Source Diff</span>\n                    <span className=\"text-success text-xs font-normal\">Git verified</span>\n                  </div>\n                  <div className=\"space-y-1 overflow-x-auto p-3 text-xs\">\n                    {rel.diffLines.map((line, lIdx) => (\n                      <div\n                        key={lIdx}\n                        className={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                        {line.content}\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/feature-visual-changelog-diff/FeatureVisualChangelogDiff.tsx"
    },
    {
      "path": "packages/registry-react/blocks/feature-visual-changelog-diff/index.ts",
      "content": "export { FeatureVisualChangelogDiff } from './FeatureVisualChangelogDiff'\nexport type { ChangelogRelease, FeatureVisualChangelogDiffProps } from './FeatureVisualChangelogDiff'\n",
      "type": "registry:block",
      "target": "~/components/blocks/feature-visual-changelog-diff/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Visual semantic git changelog with unified code diff highlighting and commit verification.",
  "categories": [
    "feature",
    "marketing"
  ]
}