{
  "name": "migration-list",
  "type": "registry:ui",
  "title": "Migration List",
  "description": "Applied and pending migrations, sorted by version. A migration applied after a later version is flagged — that is the signature of two branches merged without a rebase, and it means this schema matches no single branch.",
  "category": "Database",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "fmt",
    "lib-motion",
    "lib-styles",
    "lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/migration-list.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Check, Clock, TriangleAlert, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Fmt } from '@/components/ui/fmt'\nimport { enterFade } from '@/lib/motion'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Database migrations, applied and pending.\n *\n * Order is the version string, never the array order. Migrations are named by\n * timestamp precisely so they sort deterministically, and a list that trusts\n * the order it was handed will show a rebase artefact as the real sequence.\n *\n * A migration applied *out of order* — one whose version predates an\n * already-applied migration — is flagged. That is the signature of two branches\n * merged without rebasing, and it means the schema on this database is not the\n * schema any single branch describes.\n *\n * Irreversible migrations are marked. Knowing there is no down-path before you\n * run something is the difference between a rollback and a restore from backup.\n */\nexport type MigrationState = 'applied' | 'pending' | 'failed' | 'rolled-back'\n\nexport type Migration = {\n  /** Sortable identifier — usually a timestamp prefix. */\n  version: string\n  name: ReactNode\n  state: MigrationState\n  appliedAt?: Date\n  /** Execution time in milliseconds. */\n  duration?: number\n  /** No down migration exists. */\n  irreversible?: boolean\n  error?: ReactNode\n}\n\nconst STATE = {\n  applied: { label: 'Applied', color: 'green', Icon: Check },\n  pending: { label: 'Pending', color: 'amber', Icon: Clock },\n  failed: { label: 'Failed', color: 'destructive', Icon: X },\n  'rolled-back': { label: 'Rolled back', color: 'neutral', Icon: TriangleAlert },\n} as const\n\n/**\n * Default label formatters, hoisted out of the parameter list.\n *\n * An arrow function written inline as a default parameter is a value the\n * React Compiler cannot safely reorder, so it bails on the whole component\n * and none of it gets auto-memoised. At module scope it is a stable\n * reference and the component compiles.\n */\nconst DEFAULT_PENDING_SUMMARY: (count: number) => ReactNode = (count) => `${count} pending`\n\nfunction MigrationList({\n  migrations,\n  now,\n  locale = 'en-GB',\n  emptyLabel = 'No migrations',\n  irreversibleLabel = 'irreversible',\n  outOfOrderLabel = 'out of order',\n  outOfOrderNote = 'Applied after a later version — the usual sign of two branches merged without a rebase.',\n  pendingSummary = DEFAULT_PENDING_SUMMARY,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  migrations: Migration[]\n  now?: Date\n  locale?: string\n  emptyLabel?: ReactNode\n  irreversibleLabel?: ReactNode\n  outOfOrderLabel?: ReactNode\n  outOfOrderNote?: ReactNode\n  pendingSummary?: (count: number) => ReactNode\n}) {\n  // Sorted by version, never by the order the caller happened to supply.\n  const rows = [...migrations].sort((a, b) => a.version.localeCompare(b.version))\n\n  // Walk in the order they were actually applied: a migration whose version\n  // precedes one already run is a merge artefact, not a sequence.\n  const ordered = [...rows].sort((a, b) => {\n    const at = a.appliedAt?.getTime() ?? Infinity\n    const bt = b.appliedAt?.getTime() ?? Infinity\n    return at - bt\n  })\n  const outOfOrder = new Set<string>()\n  let seen = ''\n  for (const row of ordered) {\n    if (row.state !== 'applied') continue\n    if (seen && row.version < seen) outOfOrder.add(row.version)\n    else seen = row.version\n  }\n\n  const pending = rows.filter((row) => row.state === 'pending').length\n\n  if (rows.length === 0) {\n    return (\n      <div className={cn(surface, radius.surface, className)} {...props}>\n        <p className=\"text-muted-foreground p-8 text-center text-sm\">{emptyLabel}</p>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"migration-list\"\n      className={cn(enterFade, surface, radius.surface, 'flex flex-col overflow-hidden', className)}\n      {...props}\n    >\n      {pending > 0 && (\n        <div className=\"border-border flex items-center gap-2 border-b p-3\">\n          <Clock className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n          <span className=\"text-sm font-medium\">{pendingSummary(pending)}</span>\n        </div>\n      )}\n\n      <ul className=\"divide-border/60 list-none divide-y\">\n        {rows.map((migration) => {\n          const meta = STATE[migration.state]\n          const Icon = meta.Icon\n          const misordered = outOfOrder.has(migration.version)\n\n          return (\n            <li key={migration.version} className=\"flex items-start gap-3 p-3\">\n              <Icon\n                className={cn(\n                  'mt-0.5 size-4 shrink-0',\n                  migration.state === 'applied' && 'text-[var(--green-soft-foreground)]',\n                  migration.state === 'failed' && 'text-[var(--destructive-soft-foreground)]',\n                  migration.state === 'pending' && 'text-[var(--amber-soft-foreground)]',\n                  migration.state === 'rolled-back' && 'text-muted-foreground',\n                )}\n                aria-hidden=\"true\"\n              />\n\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"flex flex-wrap items-center gap-2\">\n                  <code className=\"text-muted-foreground shrink-0 font-mono text-xs\">\n                    {migration.version}\n                  </code>\n                  <span className=\"min-w-0 flex-1 truncate text-sm\">{migration.name}</span>\n                  {migration.irreversible && (\n                    <Badge size=\"sm\" color=\"amber\">\n                      {irreversibleLabel}\n                    </Badge>\n                  )}\n                  {misordered && (\n                    <Badge size=\"sm\" color=\"destructive\">\n                      {outOfOrderLabel}\n                    </Badge>\n                  )}\n                </p>\n\n                <p className=\"text-muted-foreground mt-0.5 flex flex-wrap gap-x-3 text-xs\">\n                  <span>{meta.label}</span>\n                  {migration.appliedAt && (\n                    <Fmt type=\"relative\" value={migration.appliedAt} now={now} locale={locale} />\n                  )}\n                  {migration.duration !== undefined && (\n                    <span className=\"tabular-nums\">{migration.duration}ms</span>\n                  )}\n                </p>\n\n                {misordered && (\n                  <p className=\"text-[var(--destructive-soft-foreground)] mt-1 text-xs\">\n                    {outOfOrderNote}\n                  </p>\n                )}\n                {migration.error && (\n                  <p className=\"text-[var(--destructive-soft-foreground)] mt-1 font-mono text-xs\">\n                    {migration.error}\n                  </p>\n                )}\n              </div>\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport { MigrationList }\n"
    }
  ]
}