{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "comparison-migration-path",
  "title": "Comparison — Migration Path",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/comparison-migration-path/ComparisonMigrationPath.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport { ArrowRight, Check, Minus, RefreshCw } from 'lucide-vue-next'\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'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\n// verdict drives the icon and tone, so rows stay declarative and a new row\n// cannot forget to style itself.\nconst rows = [\n  {\n    area: 'Warehouse and models',\n    verdict: 'keep',\n    detail: 'Untouched. We read from them, nothing is rewritten.',\n    effort: 'None',\n  },\n  {\n    area: 'dbt project',\n    verdict: 'keep',\n    detail: 'Imported as metric sources; your DAG keeps running.',\n    effort: 'Half a day',\n  },\n  {\n    area: 'Dashboard layouts',\n    verdict: 'change',\n    detail: 'Rebuilt against certified metrics, usually faster than the original.',\n    effort: '1–2 weeks',\n  },\n  {\n    area: 'Metric formulas',\n    verdict: 'change',\n    detail: 'Moved from dashboard config into versioned files.',\n    effort: '1 week',\n  },\n  {\n    area: 'Per-dashboard permissions',\n    verdict: 'retire',\n    detail: 'Replaced by row-level scope from your IdP.',\n    effort: 'None',\n  },\n  {\n    area: 'Bespoke extract jobs',\n    verdict: 'retire',\n    detail: 'Deleted once the metrics they fed are certified.',\n    effort: 'None',\n  },\n]\n\nconst tone: Record<string, { icon: Component; label: string; class: string }> = {\n  keep: { icon: Check, label: 'Keep', class: 'text-success' },\n  change: { icon: RefreshCw, label: 'Change', class: 'text-muted-foreground' },\n  retire: { icon: Minus, label: 'Retire', class: 'text-muted-foreground/60' },\n}\n</script>\n\n<template>\n  <section data-slot=\"comparison-migration-path\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Migration</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What actually changes</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Most of the stack stays exactly where it is. The effort column is measured from real rollouts.\n        </p>\n      </div>\n\n      <Card class=\"mt-10\">\n        <CardContent class=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Area</TableHead>\n                <TableHead class=\"w-28\">Verdict</TableHead>\n                <TableHead>What happens</TableHead>\n                <TableHead class=\"w-32 text-right\">Effort</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"row in rows\" :key=\"row.area\">\n                <TableCell class=\"font-medium\">{{ row.area }}</TableCell>\n                <TableCell>\n                  <span class=\"inline-flex items-center gap-1.5 text-xs\" :class=\"tone[row.verdict].class\">\n                    <component :is=\"tone[row.verdict].icon\" class=\"size-3.5\" aria-hidden=\"true\" />\n                    {{ tone[row.verdict].label }}\n                  </span>\n                </TableCell>\n                <TableCell class=\"text-muted-foreground text-sm\">{{ row.detail }}</TableCell>\n                <TableCell class=\"text-right font-mono text-xs\">{{ row.effort }}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n\n          <Separator />\n          <p class=\"text-muted-foreground px-6 py-4 text-xs leading-relaxed\">\n            Effort assumes one engineer and one analyst part-time. Teams with more than about 200 existing dashboards\n            usually stage the rebuild by department rather than doing it in one pass.\n          </p>\n        </CardContent>\n      </Card>\n\n      <Button class=\"mt-6\">\n        Get a migration estimate\n        <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ComparisonMigrationPath.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Migration-focused comparison pairing what a team keeps, what changes, and what is retired when moving from an existing tool, with an effort estimate per row.",
  "categories": [
    "marketing"
  ]
}