{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-visual-changelog-diff",
  "title": "Features — Visual Changelog Diff",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/feature-visual-changelog-diff/feature-visual-changelog-diff.component.ts",
      "content": "// Visual semantic git changelog with unified code diff highlighting and commit hash\n// copy verification. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport { ArrowRight, Check, Copy, GitCommit, GitPullRequest, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface ChangelogDiffLine {\n  type: 'add' | 'delete' | 'context'\n  content: string\n}\n\nexport interface ChangelogRelease {\n  version: string\n  date: string\n  title: string\n  description: string\n  commitSha: string\n  diffLines: ChangelogDiffLine[]\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-feature-visual-changelog-diff, [ui-feature-visual-changelog-diff]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiCardComponent, UiCardContentComponent],\n  template: `\n    <section data-slot=\"feature-visual-changelog-diff\" [class]=\"rootClass\">\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            <lucide-icon [img]=\"GitPullRequest\" class=\"text-primary size-3.5\" />\n            <span>Continuous Release Ledger</span>\n            <lucide-icon\n              [img]=\"ArrowRight\"\n              class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\"\n            />\n          </a>\n\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            {{ titleText() }}\n          </h2>\n\n          <p class=\"text-muted-foreground text-base sm:text-lg\">\n            {{ descriptionText() }}\n          </p>\n        </div>\n\n        <!-- Changelog Timeline Entries -->\n        <div class=\"mx-auto mt-12 max-w-4xl space-y-8\">\n          @for (rel of activeReleases(); track rel.version) {\n            <div ui-card class=\"border-border bg-card/80 overflow-hidden shadow-xs backdrop-blur-xs\">\n              <div ui-card-content 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                    <span\n                      ui-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                    </span>\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                      <lucide-icon [img]=\"GitCommit\" class=\"text-primary size-3\" />\n                      <span>{{ rel.commitSha }}</span>\n                      @if (copiedSha() === rel.commitSha) {\n                        <lucide-icon [img]=\"Check\" class=\"text-success ml-0.5 size-3\" />\n                      } @else {\n                        <lucide-icon [img]=\"Copy\" class=\"ml-0.5 size-3\" />\n                      }\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                    @for (line of rel.diffLines; track line.content) {\n                      <div [class]=\"diffLineClass(line.type)\">\n                        {{ line.content }}\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeatureVisualChangelogDiffComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n  protected readonly Copy = Copy\n  protected readonly GitCommit = GitCommit\n  protected readonly GitPullRequest = GitPullRequest\n\n  @Input() set title(v: string) {\n    this.titleText.set(v ?? 'Continuous evolution with transparent source-level changelogs.')\n  }\n  @Input() set description(v: string) {\n    this.descriptionText.set(\n      v ??\n        'Every architectural improvement, performance optimization, and token adjustment documented with precise git diffs.',\n    )\n  }\n  @Input() set releases(v: ChangelogRelease[] | undefined) {\n    this.releasesInput.set(v)\n  }\n  @Input('class') className?: string\n\n  readonly titleText = signal('Continuous evolution with transparent source-level changelogs.')\n  readonly descriptionText = signal(\n    'Every architectural improvement, performance optimization, and token adjustment documented with precise git diffs.',\n  )\n  private readonly releasesInput = signal<ChangelogRelease[] | undefined>(undefined)\n  readonly copiedSha = signal<string | null>(null)\n  private copyTimer: ReturnType<typeof setTimeout> | undefined\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n  }\n\n  readonly activeReleases = computed(() => this.releasesInput() ?? DEFAULT_RELEASES)\n\n  get rootClass(): string {\n    return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n  }\n\n  diffLineClass(type: ChangelogDiffLine['type']): string {\n    return cn(\n      'rounded px-2 py-0.5 leading-relaxed',\n      type === 'add'\n        ? 'bg-success/10 text-success font-medium'\n        : type === 'delete'\n          ? 'bg-destructive/10 text-destructive text-destructive line-through opacity-80'\n          : 'text-muted-foreground',\n    )\n  }\n\n  async copySha(sha: string): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(sha)\n      this.copiedSha.set(sha)\n      clearTimeout(this.copyTimer)\n      this.copyTimer = setTimeout(() => this.copiedSha.set(null), 2000)\n    } catch {\n      // Clipboard unavailable (e.g. insecure context): leave the icon unchanged.\n    }\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-visual-changelog-diff/feature-visual-changelog-diff.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/feature-visual-changelog-diff/index.ts",
      "content": "export {\n  UiFeatureVisualChangelogDiffComponent,\n  type ChangelogDiffLine,\n  type ChangelogRelease,\n} from './feature-visual-changelog-diff.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-visual-changelog-diff/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Visual semantic git changelog with unified code diff highlighting and commit verification.",
  "categories": [
    "feature",
    "marketing"
  ]
}