{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "code-diff-review",
  "title": "Code — Diff Review",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/code-diff-review/CodeDiffReview.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Check, FileDiff, MessageSquare } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\n// tone drives the row treatment, so individual lines carry no styling of their own.\nconst hunk = [\n  { old: 12, new: 12, tone: 'same', text: 'metric revenue_net {' },\n  { old: 13, new: 13, tone: 'same', text: '  owner: finance-analytics' },\n  { old: 14, new: null, tone: 'remove', text: '  window: trailing_30d' },\n  { old: null, new: 14, tone: 'add', text: '  window: trailing_28d' },\n  { old: null, new: 15, tone: 'add', text: '  restated_from: 2026-01-01' },\n  { old: 15, new: 16, tone: 'same', text: '  source: warehouse.orders' },\n  { old: 16, new: 17, tone: 'same', text: '}' },\n]\n\nconst added = computed(() => hunk.filter((line) => line.tone === 'add').length)\nconst removed = computed(() => hunk.filter((line) => line.tone === 'remove').length)\n\nfunction rowClass(tone: string) {\n  if (tone === 'add') return 'bg-success/10 text-foreground'\n  if (tone === 'remove') return 'bg-destructive/10 text-muted-foreground'\n  return 'text-muted-foreground'\n}\n\nfunction marker(tone: string) {\n  return tone === 'add' ? '+' : tone === 'remove' ? '-' : ' '\n}\n</script>\n\n<template>\n  <section data-slot=\"code-diff-review\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-3xl px-6 py-20\">\n      <Badge variant=\"secondary\" class=\"gap-1.5\">\n        <FileDiff class=\"size-3\" aria-hidden=\"true\" />\n        Change review\n      </Badge>\n      <h2 class=\"mt-4 text-2xl font-semibold tracking-tight\">Every metric change is a reviewable diff</h2>\n      <p class=\"text-muted-foreground mt-2\">\n        Definitions live in the repo, so changing one opens a pull request with an owner and a revert path.\n      </p>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <div class=\"border-border flex items-center gap-3 border-b px-4 py-2.5\">\n            <code class=\"min-w-0 truncate font-mono text-xs\">metrics/revenue_net.yml</code>\n            <div class=\"ml-auto flex shrink-0 items-center gap-2 font-mono text-xs\">\n              <span class=\"text-success\">+{{ added }}</span>\n              <span class=\"text-destructive\">−{{ removed }}</span>\n            </div>\n          </div>\n\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full border-collapse font-mono text-xs\">\n              <caption class=\"sr-only\">\n                Unified diff for metrics/revenue_net.yml\n              </caption>\n              <tbody>\n                <tr v-for=\"(line, index) in hunk\" :key=\"index\" :class=\"rowClass(line.tone)\">\n                  <td class=\"text-muted-foreground/60 w-10 px-2 py-1 text-right select-none\">{{ line.old ?? '' }}</td>\n                  <td class=\"text-muted-foreground/60 w-10 px-2 py-1 text-right select-none\">{{ line.new ?? '' }}</td>\n                  <td class=\"w-4 py-1 pl-2 select-none\">{{ marker(line.tone) }}</td>\n                  <td class=\"py-1 pr-4 whitespace-pre\">{{ line.text }}</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n\n          <Separator />\n\n          <div class=\"flex items-start gap-3 px-4 py-3\">\n            <Avatar class=\"size-7\">\n              <AvatarFallback class=\"text-xs\">EW</AvatarFallback>\n            </Avatar>\n            <div class=\"min-w-0\">\n              <p class=\"text-xs\">\n                <span class=\"font-medium\">Erin Walsh</span>\n                <span class=\"text-muted-foreground\"> on line 14</span>\n              </p>\n              <p class=\"text-muted-foreground mt-1 text-xs leading-relaxed\">\n                Restating from January means Q1 reports change. Flag it in the release note before this merges.\n              </p>\n            </div>\n            <Button variant=\"ghost\" size=\"sm\" class=\"ml-auto h-7 shrink-0 gap-1.5 text-xs\">\n              <MessageSquare class=\"size-3\" aria-hidden=\"true\" />\n              Reply\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n\n      <div class=\"text-muted-foreground mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs\">\n        <span class=\"flex items-center gap-1.5\">\n          <Check class=\"text-success size-3.5\" aria-hidden=\"true\" />\n          Reconciliation passed against the prior four quarters\n        </span>\n        <span class=\"flex items-center gap-1.5\">\n          <Check class=\"text-success size-3.5\" aria-hidden=\"true\" />\n          41 downstream consumers identified\n        </span>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CodeDiffReview.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Unified diff panel with added and removed lines, a file path header, a reviewer note anchored to a line, and a summary bar counting the changes.",
  "categories": [
    "marketing"
  ]
}