{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "deployment-pipeline",
  "title": "Deployment Pipeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/deployment-pipeline/DeploymentPipeline.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  ChevronUp,\n  Clock,\n  Copy,\n  ExternalLink,\n  GitBranch,\n  GitCommit,\n  Layers,\n  Loader2,\n  MoreHorizontal,\n  Play,\n  RotateCcw,\n  RotateCw,\n  Terminal,\n  Undo2,\n  XCircle,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport type DeploymentEnvironment = 'all' | 'production' | 'preview' | 'staging'\nexport type DeploymentStatus = 'ready' | 'building' | 'failed' | 'rolled-back'\nexport type DeploymentTrigger = 'push' | 'manual' | 'rollback'\n\nexport interface DeploymentRecord {\n  id: string\n  commitMessage: string\n  commitHash: string\n  branch: string\n  environment: 'production' | 'preview' | 'staging'\n  status: DeploymentStatus\n  duration: string\n  deployer: {\n    name: string\n    initials: string\n  }\n  trigger: DeploymentTrigger\n  deployedAt: string\n  url: string\n}\n\nexport interface PipelineStep {\n  id: string\n  name: string\n  duration: string\n  description: string\n  status: 'completed' | 'in-progress' | 'pending'\n}\n\ninterface Props {\n  initialEnv?: DeploymentEnvironment\n  initialLogsOpen?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialEnv: 'all',\n  initialLogsOpen: true,\n})\n\nconst selectedEnv = ref<DeploymentEnvironment>(props.initialEnv)\nconst selectedBranch = ref<string>('main')\nconst showLogs = ref<boolean>(props.initialLogsOpen)\nconst copiedLogs = ref<boolean>(false)\nconst copiedUrlId = ref<string | null>(null)\nconst isDeploying = ref<boolean>(false)\n\nconst branches = ['main', 'staging', 'preview/safari-tabs', 'preview/e2e-tests']\n\nconst pipelineSteps: PipelineStep[] = [\n  { id: 'step-1', name: 'Queued', duration: '0.2s', description: 'Worker allocated', status: 'completed' },\n  { id: 'step-2', name: 'Build & Bundle', duration: '42s', description: 'Vite & TS compilation', status: 'completed' },\n  {\n    id: 'step-3',\n    name: 'Static Generation',\n    duration: '18s',\n    description: '42 SSG pages rendered',\n    status: 'completed',\n  },\n  { id: 'step-4', name: 'Edge Propagation', duration: '3s', description: 'Synced to 310 PoPs', status: 'completed' },\n  { id: 'step-5', name: 'Ready', duration: 'Instant', description: 'Verified & live', status: 'completed' },\n]\n\nconst terminalLogs = [\n  {\n    time: '00:00:00.120',\n    type: 'info',\n    prefix: '❯ [worker]',\n    text: 'Initializing deployment worker in region iad-1 (runner-edge-iad-4)...',\n  },\n  {\n    time: '00:00:00.340',\n    type: 'info',\n    prefix: '❯ [git]',\n    text: 'Cloning repository uipkge/core-registry at commit a3f89b1 (branch: main)...',\n  },\n  {\n    time: '00:00:01.050',\n    type: 'info',\n    prefix: '❯ [cache]',\n    text: 'Restoring pnpm store cache (v9.15.0)... (1,482 packages restored, 98.4% cache hit)',\n  },\n  { time: '00:00:02.410', type: 'cmd', prefix: '$', text: 'pnpm run build:registry && pnpm run build' },\n  { time: '00:00:04.180', type: 'stdout', prefix: '  [vite]', text: 'Transformed 482 modules in 312ms' },\n  {\n    time: '00:00:15.920',\n    type: 'stdout',\n    prefix: '  [astro]',\n    text: 'Building static entrypoints for production (Vue 3.5 + React 19 islands)...',\n  },\n  { time: '00:00:32.400', type: 'stdout', prefix: '  [astro]', text: '✓ 42 static pages rendered in 16.48s' },\n  {\n    time: '00:00:44.210',\n    type: 'stdout',\n    prefix: '  [registry]',\n    text: 'Generated 120 manifests into public/r/vue/*.json and public/r/react/*.json',\n  },\n  {\n    time: '00:00:58.800',\n    type: 'info',\n    prefix: '❯ [edge]',\n    text: 'Optimizing edge assets with Brotli compression (saved 4.8 MB)...',\n  },\n  {\n    time: '00:01:01.320',\n    type: 'info',\n    prefix: '❯ [edge]',\n    text: 'Propagating edge routes to Cloudflare global network across 310 PoPs...',\n  },\n  {\n    time: '00:01:03.200',\n    type: 'success',\n    prefix: '✓ [ready]',\n    text: 'Deployment successfully verified and healthy at https://uipkge.dev',\n  },\n  {\n    time: '00:01:03.210',\n    type: 'success',\n    prefix: '✓ [exit]',\n    text: 'Process completed with exit code 0 (success in 1m 03.2s)',\n  },\n]\n\nconst deployments: DeploymentRecord[] = [\n  {\n    id: 'd-1042',\n    commitMessage: 'feat(blocks): add ecommerce suite (#412)',\n    commitHash: 'a3f89b1',\n    branch: 'main',\n    environment: 'production',\n    status: 'ready',\n    duration: '1m 03s',\n    deployer: { name: 'Jordan Diaz', initials: 'JD' },\n    trigger: 'push',\n    deployedAt: '12m ago',\n    url: 'https://uipkge.dev',\n  },\n  {\n    id: 'd-1041',\n    commitMessage: 'fix(tabs): resolve indicator jitter in safari (#411)',\n    commitHash: 'f79b20e',\n    branch: 'preview/safari-tabs',\n    environment: 'preview',\n    status: 'ready',\n    duration: '48s',\n    deployer: { name: 'Amara Osei', initials: 'AO' },\n    trigger: 'push',\n    deployedAt: '2h ago',\n    url: 'https://uipkge-pr-411.uipkge.dev',\n  },\n  {\n    id: 'd-1040',\n    commitMessage: 'refactor(avatar): extract avatar-group primitive (#410)',\n    commitHash: '91bc8d3',\n    branch: 'staging',\n    environment: 'staging',\n    status: 'ready',\n    duration: '54s',\n    deployer: { name: 'Jonas Weber', initials: 'JW' },\n    trigger: 'manual',\n    deployedAt: '5h ago',\n    url: 'https://staging.uipkge.dev',\n  },\n  {\n    id: 'd-1039',\n    commitMessage: 'test(e2e): add playwright visual regression suite (#409)',\n    commitHash: '62e08a4',\n    branch: 'preview/e2e-tests',\n    environment: 'preview',\n    status: 'building',\n    duration: '1m 12s',\n    deployer: { name: 'Priya Nair', initials: 'PN' },\n    trigger: 'push',\n    deployedAt: 'Just now',\n    url: 'https://uipkge-pr-409.uipkge.dev',\n  },\n  {\n    id: 'd-1038',\n    commitMessage: 'perf(theme): eliminate css custom property recalculation (#408)',\n    commitHash: '3d12fa9',\n    branch: 'staging',\n    environment: 'staging',\n    status: 'failed',\n    duration: '24s',\n    deployer: { name: 'Marcus Lee', initials: 'ML' },\n    trigger: 'push',\n    deployedAt: 'Yesterday',\n    url: 'https://staging-failed.uipkge.dev',\n  },\n  {\n    id: 'd-1037',\n    commitMessage: 'chore(deps): update reka-ui to v1.1.0 (#407)',\n    commitHash: '180eac2',\n    branch: 'main',\n    environment: 'production',\n    status: 'rolled-back',\n    duration: '1m 20s',\n    deployer: { name: 'Jordan Diaz', initials: 'JD' },\n    trigger: 'rollback',\n    deployedAt: '2 days ago',\n    url: 'https://uipkge-v2-rollback.uipkge.dev',\n  },\n]\n\nconst filteredDeployments = computed(() => {\n  if (selectedEnv.value === 'all') return deployments\n  return deployments.filter((d) => d.environment === selectedEnv.value)\n})\n\nfunction triggerDeployment() {\n  isDeploying.value = true\n  setTimeout(() => {\n    isDeploying.value = false\n  }, 1200)\n}\n\nfunction copyLogs() {\n  const text = terminalLogs.map((l) => `[${l.time}] ${l.prefix} ${l.text}`).join('\\n')\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(text)\n    copiedLogs.value = true\n    setTimeout(() => {\n      copiedLogs.value = false\n    }, 2000)\n  }\n}\n\nfunction copyUrl(url: string, id: string) {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(url)\n    copiedUrlId.value = id\n    setTimeout(() => {\n      copiedUrlId.value = null\n    }, 2000)\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"deployment-pipeline\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"bg-card flex size-10 items-center justify-center rounded-lg border shadow-xs\">\n          <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n        </div>\n        <div>\n          <h2 class=\"text-2xl font-bold tracking-tight\">Deployments</h2>\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <span class=\"text-foreground font-mono font-medium\">uipkge</span>\n            <span>/</span>\n            <span class=\"font-mono\">core-registry</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"outline\" size=\"sm\" class=\"font-mono text-xs\">\n              <GitBranch class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n              <span>{{ selectedBranch }}</span>\n              <ChevronDown class=\"text-muted-foreground size-3.5 opacity-60\" aria-hidden=\"true\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" class=\"w-48\">\n            <DropdownMenuLabel>Select branch</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem\n              v-for=\"branch in branches\"\n              :key=\"branch\"\n              :class=\"selectedBranch === branch ? 'bg-accent font-semibold' : ''\"\n              @click=\"selectedBranch = branch\"\n            >\n              <GitBranch class=\"mr-2 size-3.5\" aria-hidden=\"true\" />\n              <span class=\"font-mono text-xs\">{{ branch }}</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <Button size=\"sm\" :disabled=\"isDeploying\" @click=\"triggerDeployment\">\n          <Loader2 v-if=\"isDeploying\" class=\"size-3.5 animate-spin\" aria-hidden=\"true\" />\n          <Play v-else class=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n          {{ isDeploying ? 'Triggering...' : 'Trigger Deployment' }}\n        </Button>\n      </div>\n    </div>\n\n    <!-- Environment Tabs Navigation -->\n    <Tabs v-model=\"selectedEnv\" class=\"w-full\">\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <TabsList variant=\"segmented\" class=\"w-full sm:w-auto\">\n          <TabsTrigger value=\"all\">All</TabsTrigger>\n          <TabsTrigger value=\"production\">Production</TabsTrigger>\n          <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n          <TabsTrigger value=\"staging\">Staging</TabsTrigger>\n        </TabsList>\n        <span class=\"text-muted-foreground text-xs tabular-nums\">\n          Showing {{ filteredDeployments.length }} of {{ deployments.length }} deployments\n        </span>\n      </div>\n    </Tabs>\n\n    <!-- Latest Deployment Hero Card -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"space-y-4 pb-4\">\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n          <div class=\"space-y-1.5\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <CardTitle class=\"text-base font-semibold\">Latest Deployment</CardTitle>\n              <div\n                class=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\"\n              >\n                <span class=\"relative flex size-2 shrink-0\">\n                  <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n                </span>\n                Live · Production\n              </div>\n            </div>\n            <CardDescription>\n              <a\n                href=\"https://uipkge.dev\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                class=\"text-foreground hover:text-primary inline-flex min-h-6 items-center gap-1 py-0.5 font-mono text-xs font-medium underline underline-offset-4 transition-colors\"\n              >\n                https://uipkge.dev\n                <ExternalLink class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n              </a>\n            </CardDescription>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" @click=\"showLogs = !showLogs\">\n              <Terminal class=\"size-3.5\" aria-hidden=\"true\" />\n              <span>{{ showLogs ? 'Hide Build Logs' : 'View Build Logs' }}</span>\n              <component\n                :is=\"showLogs ? ChevronUp : ChevronDown\"\n                class=\"text-muted-foreground size-3.5\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              <RotateCw class=\"size-3.5\" aria-hidden=\"true\" />\n              <span>Redeploy</span>\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              <Undo2 class=\"size-3.5\" aria-hidden=\"true\" />\n              <span>Instant Rollback</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Commit Details Bar -->\n        <div class=\"bg-muted/40 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border px-3.5 py-2.5 text-xs\">\n          <div class=\"flex items-center gap-2\">\n            <Avatar class=\"size-5\">\n              <AvatarFallback class=\"text-xs font-medium\">JD</AvatarFallback>\n            </Avatar>\n            <span class=\"text-foreground font-medium\">Jordan Diaz</span>\n          </div>\n          <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n          <span class=\"text-foreground font-medium\">feat(blocks): add ecommerce suite (#412)</span>\n          <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n          <div class=\"text-muted-foreground flex items-center gap-1 font-mono\">\n            <GitCommit class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>a3f89b1</span>\n          </div>\n          <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n          <div class=\"text-muted-foreground flex items-center gap-1 font-mono\">\n            <GitBranch class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>main</span>\n          </div>\n          <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n          <div class=\"text-muted-foreground flex items-center gap-1\">\n            <Clock class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Deployed 12m ago</span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4 pt-0\">\n        <!-- Execution Stepper -->\n        <div class=\"space-y-2.5\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Pipeline Execution</span>\n            <span class=\"text-muted-foreground font-mono text-xs\">5 of 5 steps completed · 1m 03s</span>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5\">\n            <div\n              v-for=\"(step, index) in pipelineSteps\"\n              :key=\"step.id\"\n              class=\"bg-card/60 hover:bg-muted/40 flex flex-col justify-between rounded-lg border p-3 shadow-2xs transition-colors\"\n            >\n              <div class=\"flex items-center justify-between\">\n                <span class=\"bg-success/15 text-success flex size-5 items-center justify-center rounded-full\">\n                  <Check class=\"size-3 stroke-[3]\" aria-hidden=\"true\" />\n                </span>\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ step.duration }}</span>\n              </div>\n              <div class=\"mt-2\">\n                <p class=\"text-foreground text-xs font-semibold\">{{ index + 1 }}. {{ step.name }}</p>\n                <p class=\"text-muted-foreground truncate text-xs\">{{ step.description }}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Collapsible Dark Terminal / Build Log Viewer -->\n        <div\n          v-if=\"showLogs\"\n          class=\"overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 font-mono text-xs shadow-inner\"\n        >\n          <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3.5 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"bg-destructive/80 size-2.5 rounded-full\" />\n                <span class=\"bg-warning/80 size-2.5 rounded-full\" />\n                <span class=\"bg-success/80 size-2.5 rounded-full\" />\n              </div>\n              <span class=\"text-muted-foreground text-xs\">build-stdout — node v22.12.0 — runner-edge-iad-4</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-muted-foreground text-muted-foreground hidden text-xs sm:inline\">Total: 1m 03.2s</span>\n              <Button\n                variant=\"ghost\"\n                size=\"xs\"\n                class=\"h-6 gap-1 px-2 text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                @click=\"copyLogs\"\n              >\n                <Check v-if=\"copiedLogs\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                <span>{{ copiedLogs ? 'Copied' : 'Copy logs' }}</span>\n              </Button>\n            </div>\n          </div>\n\n          <div class=\"max-h-72 space-y-1 overflow-y-auto p-4 select-text\">\n            <div v-for=\"(line, idx) in terminalLogs\" :key=\"idx\" class=\"flex items-start gap-2 leading-relaxed\">\n              <span class=\"text-muted-foreground select-none\">[{{ line.time }}]</span>\n              <span\n                :class=\"\n                  cn(\n                    'font-medium select-none',\n                    line.type === 'success' && 'text-success',\n                    line.type === 'info' && 'text-info',\n                    line.type === 'cmd' && 'text-warning',\n                    line.type === 'stdout' && 'text-muted-foreground',\n                  )\n                \"\n              >\n                {{ line.prefix }}\n              </span>\n              <span\n                :class=\"\n                  cn(\n                    line.type === 'success' && 'text-success font-medium',\n                    line.type === 'cmd' && 'font-semibold text-zinc-100',\n                    line.type === 'info' && 'text-zinc-300',\n                    line.type === 'stdout' && 'text-zinc-300',\n                  )\n                \"\n              >\n                {{ line.text }}\n              </span>\n            </div>\n          </div>\n\n          <div\n            class=\"text-muted-foreground flex items-center justify-between border-t border-zinc-800 bg-zinc-900/60 px-3.5 py-1.5 text-xs\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <span class=\"bg-success/10 text-success inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-medium\">\n                <Check class=\"size-3\" aria-hidden=\"true\" /> Exit code: 0\n              </span>\n              <span>Clean build</span>\n            </div>\n            <span class=\"text-muted-foreground\">Memory: 412 MB / 2048 MB</span>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Deployment History Table -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <CardTitle class=\"text-base font-semibold\">Deployment History</CardTitle>\n        <CardDescription class=\"text-xs\"\n          >Past deployments across production, preview, and staging environments.</CardDescription\n        >\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"w-10\"><span class=\"sr-only\">Status</span></TableHead>\n                <TableHead>Commit & Message</TableHead>\n                <TableHead>Environment</TableHead>\n                <TableHead>Duration</TableHead>\n                <TableHead>Deployer</TableHead>\n                <TableHead>Trigger</TableHead>\n                <TableHead class=\"text-right\">Deployed</TableHead>\n                <TableHead class=\"w-10\"><span class=\"sr-only\">Actions</span></TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"deployment in filteredDeployments\" :key=\"deployment.id\" class=\"hover:bg-muted/50\">\n                <TableCell class=\"py-3\">\n                  <span v-if=\"deployment.status === 'ready'\" title=\"Ready\">\n                    <CheckCircle2 class=\"text-success size-4\" aria-hidden=\"true\" />\n                  </span>\n                  <span v-else-if=\"deployment.status === 'building'\" title=\"Building\">\n                    <Loader2 class=\"text-info size-4 animate-spin\" aria-hidden=\"true\" />\n                  </span>\n                  <span v-else-if=\"deployment.status === 'failed'\" title=\"Failed\">\n                    <XCircle class=\"text-destructive size-4\" aria-hidden=\"true\" />\n                  </span>\n                  <span v-else-if=\"deployment.status === 'rolled-back'\" title=\"Rolled back\">\n                    <Undo2 class=\"text-warning size-4\" aria-hidden=\"true\" />\n                  </span>\n                </TableCell>\n                <TableCell>\n                  <div class=\"min-w-[220px]\">\n                    <p class=\"text-foreground max-w-sm truncate text-sm font-medium\">{{ deployment.commitMessage }}</p>\n                    <div class=\"text-muted-foreground mt-0.5 flex items-center gap-2 font-mono text-xs\">\n                      <span class=\"flex items-center gap-1\">\n                        <GitBranch class=\"size-3\" aria-hidden=\"true\" />\n                        {{ deployment.branch }}\n                      </span>\n                      <span>·</span>\n                      <span class=\"flex items-center gap-1\">\n                        <GitCommit class=\"size-3\" aria-hidden=\"true\" />\n                        {{ deployment.commitHash }}\n                      </span>\n                    </div>\n                  </div>\n                </TableCell>\n                <TableCell>\n                  <Badge\n                    :variant=\"\n                      deployment.environment === 'production'\n                        ? 'default'\n                        : deployment.environment === 'preview'\n                          ? 'secondary'\n                          : 'outline'\n                    \"\n                    class=\"text-xs capitalize\"\n                  >\n                    {{ deployment.environment }}\n                  </Badge>\n                </TableCell>\n                <TableCell class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ deployment.duration }}\n                </TableCell>\n                <TableCell>\n                  <div class=\"flex items-center gap-2\">\n                    <Avatar class=\"size-6\">\n                      <AvatarFallback class=\"text-xs font-medium\">{{ deployment.deployer.initials }}</AvatarFallback>\n                    </Avatar>\n                    <span class=\"text-foreground text-xs\">{{ deployment.deployer.name }}</span>\n                  </div>\n                </TableCell>\n                <TableCell>\n                  <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                    <GitCommit v-if=\"deployment.trigger === 'push'\" class=\"size-3.5\" aria-hidden=\"true\" />\n                    <Play v-else-if=\"deployment.trigger === 'manual'\" class=\"size-3.5\" aria-hidden=\"true\" />\n                    <RotateCcw v-else-if=\"deployment.trigger === 'rollback'\" class=\"size-3.5\" aria-hidden=\"true\" />\n                    <span class=\"capitalize\">{{ deployment.trigger }}</span>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-muted-foreground text-right text-xs whitespace-nowrap tabular-nums\">\n                  {{ deployment.deployedAt }}\n                </TableCell>\n                <TableCell>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger as-child>\n                      <Button variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                        <MoreHorizontal class=\"size-4\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Open actions for {{ deployment.id }}</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Undo2 class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                        Rollback to this deploy\n                      </DropdownMenuItem>\n                      <DropdownMenuItem @click=\"copyUrl(deployment.url, deployment.id)\">\n                        <Check\n                          v-if=\"copiedUrlId === deployment.id\"\n                          class=\"text-success mr-2 size-4\"\n                          aria-hidden=\"true\"\n                        />\n                        <Copy v-else class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                        {{ copiedUrlId === deployment.id ? 'Copied URL' : 'Copy deployment URL' }}\n                      </DropdownMenuItem>\n                      <DropdownMenuItem @click=\"showLogs = true\">\n                        <Terminal class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                        Inspect build logs\n                      </DropdownMenuItem>\n                      <DropdownMenuItem as-child>\n                        <a :href=\"deployment.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"flex items-center\">\n                          <ExternalLink class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                          View live preview\n                        </a>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"filteredDeployments.length === 0\">\n                <TableCell colspan=\"8\" class=\"text-muted-foreground h-24 text-center text-sm\">\n                  No deployments match the selected environment filter.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DeploymentPipeline.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/dropdown-menu.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/tabs.json"
  ],
  "description": "CI/CD deployment history, active environment status, execution stepper, collapsible build log terminal with stdout timestamps, and filterable deployments table.",
  "categories": [
    "devops",
    "app"
  ]
}