{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "service-health-matrix",
  "title": "Service Health Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/service-health-matrix/ServiceHealthMatrix.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  AlertTriangle,\n  Bell,\n  Check,\n  CheckCircle2,\n  Clock,\n  Cpu,\n  Database,\n  Globe,\n  RefreshCw,\n  Server,\n  ShieldCheck,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\n\nexport type RegionStatus = 'operational' | 'degraded' | 'outage' | 'maintenance'\nexport type DayStatus = 'up' | 'degraded' | 'down' | 'maintenance'\nexport type IncidentSeverity = 'minor' | 'major' | 'critical' | 'maintenance'\n\nexport interface RegionHealth {\n  id: string\n  name: string\n  location: string\n  code: string\n  latency: number\n  status: RegionStatus\n  uptime: number\n  p95Latency?: number\n  packetLoss?: number\n  latencyHistory?: number[]\n}\n\nexport interface ServiceHealthItem {\n  id: string\n  name: string\n  description?: string\n  icon?: 'auth' | 'cdn' | 'database' | 'webhook' | 'ai'\n  uptime: number\n  status: RegionStatus\n  days?: DayStatus[]\n}\n\nexport interface IncidentUpdate {\n  time: string\n  status: string\n  description: string\n}\n\nexport interface IncidentRecord {\n  id: string\n  title: string\n  date: string\n  severity: IncidentSeverity\n  resolved: boolean\n  duration: string\n  updates: IncidentUpdate[]\n}\n\nexport interface ServiceHealthMatrixProps {\n  systemStatus?: RegionStatus\n  systemUptime?: string\n  lastUpdated?: string\n  regions?: RegionHealth[]\n  services?: ServiceHealthItem[]\n  incidents?: IncidentRecord[]\n  class?: HTMLAttributes['class']\n}\n\nfunction generate90Days(blips: Array<{ dayAgo: number; status: DayStatus }> = []): DayStatus[] {\n  const days: DayStatus[] = Array.from({ length: 90 }, () => 'up')\n  for (const blip of blips) {\n    const idx = 89 - blip.dayAgo\n    if (idx >= 0 && idx < 90) {\n      days[idx] = blip.status\n    }\n  }\n  return days\n}\n\nconst defaultRegions: RegionHealth[] = [\n  {\n    id: 'us-east',\n    name: 'US East',\n    location: 'N. Virginia',\n    code: 'us-east-1',\n    latency: 24,\n    status: 'operational',\n    uptime: 100,\n    p95Latency: 28,\n    packetLoss: 0.0,\n    latencyHistory: [26, 25, 24, 25, 23, 24, 25, 24, 23, 24, 25, 24],\n  },\n  {\n    id: 'us-west',\n    name: 'US West',\n    location: 'Oregon',\n    code: 'us-west-2',\n    latency: 38,\n    status: 'operational',\n    uptime: 99.98,\n    p95Latency: 42,\n    packetLoss: 0.0,\n    latencyHistory: [40, 39, 38, 37, 38, 39, 38, 38, 37, 38, 39, 38],\n  },\n  {\n    id: 'eu-central',\n    name: 'EU Central',\n    location: 'Frankfurt',\n    code: 'eu-central-1',\n    latency: 18,\n    status: 'operational',\n    uptime: 100,\n    p95Latency: 21,\n    packetLoss: 0.0,\n    latencyHistory: [19, 18, 18, 17, 18, 19, 18, 18, 17, 18, 18, 18],\n  },\n  {\n    id: 'ap-south',\n    name: 'AP South',\n    location: 'Mumbai',\n    code: 'ap-south-1',\n    latency: 45,\n    status: 'operational',\n    uptime: 99.95,\n    p95Latency: 52,\n    packetLoss: 0.01,\n    latencyHistory: [47, 46, 45, 44, 45, 48, 46, 45, 44, 45, 46, 45],\n  },\n  {\n    id: 'ap-east',\n    name: 'AP East',\n    location: 'Tokyo',\n    code: 'ap-northeast-1',\n    latency: 32,\n    status: 'operational',\n    uptime: 99.99,\n    p95Latency: 36,\n    packetLoss: 0.0,\n    latencyHistory: [34, 33, 32, 31, 32, 33, 32, 32, 31, 32, 33, 32],\n  },\n  {\n    id: 'sa-east',\n    name: 'SA East',\n    location: 'São Paulo',\n    code: 'sa-east-1',\n    latency: 58,\n    status: 'operational',\n    uptime: 99.91,\n    p95Latency: 65,\n    packetLoss: 0.02,\n    latencyHistory: [62, 60, 59, 58, 61, 58, 59, 58, 57, 58, 60, 58],\n  },\n]\n\nconst defaultServices: ServiceHealthItem[] = [\n  {\n    id: 'auth-api',\n    name: 'Authentication API',\n    description: 'OAuth2 / SAML SSO · Session Tokens · JWT Validation',\n    icon: 'auth',\n    uptime: 99.99,\n    status: 'operational',\n    days: generate90Days(),\n  },\n  {\n    id: 'edge-cdn',\n    name: 'Edge CDN & DNS',\n    description: 'Anycast Global Routing · Edge Cache · SSL Termination',\n    icon: 'cdn',\n    uptime: 100.0,\n    status: 'operational',\n    days: generate90Days(),\n  },\n  {\n    id: 'postgres-cluster',\n    name: 'Postgres Database Cluster',\n    description: 'Primary Write Node · Regional Read Replicas · Pooler',\n    icon: 'database',\n    uptime: 99.97,\n    status: 'operational',\n    days: generate90Days([{ dayAgo: 42, status: 'degraded' }]),\n  },\n  {\n    id: 'webhook-dispatcher',\n    name: 'Webhook Dispatcher',\n    description: 'Event Streaming Engine · Exponential Backoff Retries',\n    icon: 'webhook',\n    uptime: 99.98,\n    status: 'operational',\n    days: generate90Days([{ dayAgo: 1, status: 'degraded' }]),\n  },\n  {\n    id: 'ai-gateway',\n    name: 'AI Inference Gateway',\n    description: 'Model Routing · Streaming Token Buffers · Semantic Cache',\n    icon: 'ai',\n    uptime: 99.95,\n    status: 'operational',\n    days: generate90Days([{ dayAgo: 18, status: 'degraded' }]),\n  },\n]\n\nconst defaultIncidents: IncidentRecord[] = [\n  {\n    id: 'inc-1',\n    title: 'Elevated latency on Webhook Dispatcher',\n    date: 'Yesterday · Aug 20, 2026',\n    severity: 'minor',\n    resolved: true,\n    duration: '18 minutes',\n    updates: [\n      {\n        time: '14:40 UTC',\n        status: 'Resolved',\n        description:\n          'The backlog of outgoing webhook payloads has fully drained. All queued webhook events were delivered with zero packet drop. Worker autoscaling thresholds have been adjusted.',\n      },\n      {\n        time: '14:22 UTC',\n        status: 'Investigating',\n        description:\n          'We identified a localized queue lock in the dispatch workers following a Redis connection pool saturation. Workers were scaled up and connection pool limits raised.',\n      },\n    ],\n  },\n  {\n    id: 'inc-2',\n    title: 'Scheduled Maintenance: Postgres Cluster Engine Upgrade',\n    date: 'Aug 14, 2026',\n    severity: 'maintenance',\n    resolved: true,\n    duration: '12 minutes',\n    updates: [\n      {\n        time: '02:12 UTC',\n        status: 'Completed',\n        description:\n          'Primary instance switchover completed smoothly. Read replicas synchronized without data lag. All database endpoints are fully operational.',\n      },\n      {\n        time: '02:00 UTC',\n        status: 'In Progress',\n        description:\n          'Scheduled rolling restart of secondary read replicas initiated while applying minor database engine updates.',\n      },\n    ],\n  },\n]\n\nconst props = withDefaults(defineProps<ServiceHealthMatrixProps>(), {\n  systemStatus: 'operational',\n  systemUptime: '99.99%',\n  lastUpdated: 'Updated 30s ago',\n})\n\nconst activeRegions = computed(() => props.regions ?? defaultRegions)\nconst activeServices = computed(() => props.services ?? defaultServices)\nconst activeIncidents = computed(() => props.incidents ?? defaultIncidents)\n\nconst isRefreshing = ref(false)\nconst isSubscribed = ref(false)\nconst showSubscribeInput = ref(false)\nconst emailInput = ref('')\nconst currentUpdatedText = ref(props.lastUpdated)\n\nfunction handleRefresh() {\n  isRefreshing.value = true\n  setTimeout(() => {\n    isRefreshing.value = false\n    currentUpdatedText.value = 'Updated just now'\n  }, 400)\n}\n\nfunction handleSubscribeSubmit() {\n  if (emailInput.value.trim().length > 0) {\n    isSubscribed.value = true\n    showSubscribeInput.value = false\n    emailInput.value = ''\n  }\n}\n\nconst statusBannerConfig: Record<\n  RegionStatus,\n  {\n    title: string\n    badge: string\n    badgeVariant: 'success' | 'warning' | 'destructive' | 'info'\n    containerClass: string\n    dotClass: string\n    textClass: string\n  }\n> = {\n  operational: {\n    title: 'All Systems Operational',\n    badge: '99.99% 90-day uptime',\n    badgeVariant: 'success',\n    containerClass: 'border-success/30 bg-success/10 text-success',\n    dotClass: 'bg-success',\n    textClass: 'text-success',\n  },\n  degraded: {\n    title: 'Active Service Degradation',\n    badge: 'Elevated Latency Detected',\n    badgeVariant: 'warning',\n    containerClass: 'border-warning/30 bg-warning/10 text-warning',\n    dotClass: 'bg-warning',\n    textClass: 'text-warning',\n  },\n  outage: {\n    title: 'Partial System Outage',\n    badge: 'Incident Under Investigation',\n    badgeVariant: 'destructive',\n    containerClass: 'border-destructive/30 bg-destructive/10 text-destructive',\n    dotClass: 'bg-destructive',\n    textClass: 'text-destructive',\n  },\n  maintenance: {\n    title: 'Scheduled Maintenance in Progress',\n    badge: 'Planned Upgrades',\n    badgeVariant: 'info',\n    containerClass: 'border-info/30 bg-info/10 text-info',\n    dotClass: 'bg-info',\n    textClass: 'text-info',\n  },\n}\n\nconst currentBanner = computed(() => statusBannerConfig[props.systemStatus] || statusBannerConfig.operational)\n\nconst dayClassMap: Record<DayStatus, string> = {\n  up: 'bg-success/80 hover:bg-success bg-success/70 dark:hover:bg-success',\n  degraded: 'bg-warning/90 hover:bg-warning',\n  down: 'bg-destructive hover:bg-destructive',\n  maintenance: 'bg-info hover:bg-info',\n}\n\nconst dayLabelMap: Record<DayStatus, string> = {\n  up: 'Operational (100%)',\n  degraded: 'Degraded Performance',\n  down: 'Major Outage',\n  maintenance: 'Scheduled Maintenance',\n}\n\nfunction getSparkline(history: number[] = [24, 24, 24, 24]) {\n  const min = Math.min(...history)\n  const max = Math.max(...history)\n  const range = max - min || 1\n  const height = 26\n  const padding = 3\n\n  const points = history.map((val, idx) => {\n    const x = (idx / (history.length - 1)) * 100\n    const y = height - ((val - min) / range) * (height - padding * 2) - padding\n    return { x, y }\n  })\n\n  let path = `M ${points[0].x},${points[0].y}`\n  for (let i = 1; i < points.length; i++) {\n    const prev = points[i - 1]\n    const curr = points[i]\n    const cx = (prev.x + curr.x) / 2\n    path += ` C ${cx},${prev.y} ${cx},${curr.y} ${curr.x},${curr.y}`\n  }\n\n  const lastPoint = points[points.length - 1]\n  const area = `${path} L 100,32 L 0,32 Z`\n\n  return { path, area, lastPoint }\n}\n\nconst severityBadgeMap: Record<\n  IncidentSeverity,\n  { variant: 'info' | 'warning' | 'destructive' | 'secondary'; label: string }\n> = {\n  minor: { variant: 'warning', label: 'Minor' },\n  major: { variant: 'destructive', label: 'Major' },\n  critical: { variant: 'destructive', label: 'Critical' },\n  maintenance: { variant: 'secondary', label: 'Maintenance' },\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full space-y-6', props.class)\" data-slot=\"service-health-matrix\">\n    <!-- Header Banner -->\n    <div\n      role=\"status\"\n      :class=\"[\n        'flex flex-col gap-4 rounded-xl border p-4 shadow-xs transition-colors sm:p-5 md:flex-row md:items-center md:justify-between',\n        currentBanner.containerClass,\n      ]\"\n    >\n      <div class=\"flex items-start gap-3.5 sm:items-center\">\n        <span class=\"relative mt-1 flex size-3 shrink-0 sm:mt-0\">\n          <span :class=\"['absolute inline-flex h-full w-full rounded-full opacity-75', currentBanner.dotClass]\" />\n          <span :class=\"['relative inline-flex size-3 rounded-full', currentBanner.dotClass]\" />\n        </span>\n        <div class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <h1 class=\"text-foreground text-base leading-none font-semibold tracking-tight sm:text-lg\">\n              {{ currentBanner.title }}\n            </h1>\n            <span :class=\"['flex items-center gap-2 text-xs font-medium sm:text-sm', currentBanner.textClass]\">\n              {{ systemUptime }} 90-day uptime\n            </span>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            Continuous synthetic telemetry and edge probe latency across all global endpoints.\n          </p>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2 self-end sm:gap-3 md:self-center\">\n        <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n          <Clock class=\"size-3.5\" />\n          <span>{{ currentUpdatedText }}</span>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            class=\"size-7 rounded-md\"\n            aria-label=\"Refresh status telemetry\"\n            @click=\"handleRefresh\"\n          >\n            <RefreshCw :class=\"['size-3.5', isRefreshing ? 'animate-spin' : '']\" />\n          </Button>\n        </div>\n\n        <div class=\"relative\">\n          <Button\n            v-if=\"!isSubscribed\"\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"h-8 gap-1.5 text-xs font-medium shadow-xs\"\n            @click=\"showSubscribeInput = !showSubscribeInput\"\n          >\n            <Bell class=\"size-3.5\" />\n            <span>Subscribe to Updates</span>\n          </Button>\n          <Badge wrap v-else variant=\"success\" class=\"h-8 gap-1.5 px-3 text-xs font-medium\">\n            <Check class=\"size-3.5\" />\n            Subscribed\n          </Badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Collapsible Subscribe Input Form -->\n    <div\n      v-if=\"showSubscribeInput && !isSubscribed\"\n      class=\"border-border bg-card text-card-foreground flex flex-col items-stretch gap-2 rounded-lg border p-3 shadow-xs sm:flex-row sm:items-center\"\n    >\n      <div class=\"flex-1\">\n        <p class=\"text-foreground text-xs font-medium\">Get instant outage alerts via Email</p>\n        <p class=\"text-muted-foreground text-xs\">\n          We will only notify you for major severity incidents and maintenance.\n        </p>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <input\n          v-model=\"emailInput\"\n          type=\"email\"\n          placeholder=\"admin@company.com\"\n          class=\"border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border px-2.5 text-xs focus-visible:ring-2 focus-visible:outline-none sm:w-64\"\n          @keydown.enter=\"handleSubscribeSubmit\"\n        />\n        <Button size=\"sm\" class=\"h-8 shrink-0 px-3 text-xs\" @click=\"handleSubscribeSubmit\"> Subscribe </Button>\n      </div>\n    </div>\n\n    <!-- Section 1: Global Region Latency Grid -->\n    <div class=\"space-y-3\">\n      <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h2 class=\"text-foreground text-sm font-semibold tracking-tight\">Global Region Latency Grid</h2>\n          <p class=\"text-muted-foreground text-xs\">Real-time edge response round-trip time and packet loss metrics.</p>\n        </div>\n        <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n          <span class=\"bg-success inline-flex size-2 rounded-full\" />\n          <span>All 6 Edge Zones Live</span>\n        </div>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        <Card\n          v-for=\"region in activeRegions\"\n          :key=\"region.id\"\n          class=\"border-border/80 bg-card text-card-foreground hover:border-border shadow-xs transition-colors\"\n        >\n          <CardHeader class=\"p-4 pb-2\">\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"flex items-center gap-2.5\">\n                <div\n                  class=\"bg-muted/70 text-muted-foreground border-border/50 flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                >\n                  <Globe class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-sm leading-snug font-semibold\">\n                    {{ region.name }}\n                  </CardTitle>\n                  <CardDescription class=\"text-xs\">\n                    {{ region.location }} · <span class=\"text-muted-foreground font-mono\">{{ region.code }}</span>\n                  </CardDescription>\n                </div>\n              </div>\n\n              <Badge\n                :variant=\"\n                  region.status === 'operational' ? 'success' : region.status === 'degraded' ? 'warning' : 'destructive'\n                \"\n                class=\"shrink-0 text-xs font-medium whitespace-normal capitalize\"\n              >\n                <span\n                  :class=\"[\n                    'mr-1 size-1.5 rounded-full',\n                    region.status === 'operational'\n                      ? 'bg-success'\n                      : region.status === 'degraded'\n                        ? 'bg-warning'\n                        : 'bg-destructive',\n                  ]\"\n                />\n                {{ region.status }}\n              </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 p-4 pt-1\">\n            <!-- Latency big metric & status -->\n            <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 pt-1\">\n              <div class=\"flex items-baseline gap-1.5\">\n                <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">{{ region.latency }}ms</span>\n                <span class=\"text-muted-foreground text-xs\">ping</span>\n              </div>\n              <div\n                :class=\"[\n                  'flex items-center gap-1 text-xs font-medium',\n                  region.latency < 30 ? 'text-success' : region.latency < 50 ? 'text-info' : 'text-warning',\n                ]\"\n              >\n                <Activity class=\"size-3\" />\n                <span>{{ region.latency < 30 ? 'Optimal' : region.latency < 50 ? 'Normal' : 'Elevated' }}</span>\n              </div>\n            </div>\n\n            <!-- SVG Sparkline -->\n            <div class=\"h-9 w-full overflow-hidden pt-1\" :aria-label=\"`${region.name} latency sparkline`\">\n              <svg class=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 32\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient :id=\"`grad-${region.id}`\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"0%\"\n                      :stop-color=\"\n                        region.status === 'operational'\n                          ? 'var(--color-emerald-500, #10b981)'\n                          : 'var(--color-amber-500, #f59e0b)'\n                      \"\n                      stop-opacity=\"0.25\"\n                    />\n                    <stop\n                      offset=\"100%\"\n                      :stop-color=\"\n                        region.status === 'operational'\n                          ? 'var(--color-emerald-500, #10b981)'\n                          : 'var(--color-amber-500, #f59e0b)'\n                      \"\n                      stop-opacity=\"0.0\"\n                    />\n                  </linearGradient>\n                </defs>\n                <!-- Area -->\n                <path :d=\"getSparkline(region.latencyHistory).area\" :fill=\"`url(#grad-${region.id})`\" />\n                <!-- Stroke line -->\n                <path\n                  :d=\"getSparkline(region.latencyHistory).path\"\n                  fill=\"none\"\n                  :stroke=\"\n                    region.status === 'operational'\n                      ? 'var(--color-emerald-500, #10b981)'\n                      : 'var(--color-amber-500, #f59e0b)'\n                  \"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n                <!-- Latest dot -->\n                <circle\n                  :cx=\"getSparkline(region.latencyHistory).lastPoint.x\"\n                  :cy=\"getSparkline(region.latencyHistory).lastPoint.y\"\n                  r=\"2.5\"\n                  :class=\"region.status === 'operational' ? 'fill-success' : 'fill-warning'\"\n                />\n              </svg>\n            </div>\n\n            <!-- Footer Stats -->\n            <div\n              class=\"border-border/50 text-muted-foreground flex items-center justify-between border-t pt-2.5 text-xs\"\n            >\n              <div class=\"text-foreground flex items-center gap-1 font-medium\">\n                <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n                <span>{{ region.uptime }}% uptime</span>\n              </div>\n              <div class=\"flex items-center gap-2 font-mono\">\n                <span>P95: {{ region.p95Latency ?? 28 }}ms</span>\n                <span>·</span>\n                <span>{{ region.packetLoss ?? 0 }}% loss</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Section 2: Core Services Component Health List -->\n    <div class=\"space-y-3\">\n      <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h2 class=\"text-foreground text-sm font-semibold tracking-tight\">Core Services Component Health</h2>\n          <p class=\"text-muted-foreground text-xs\">90-day daily uptime history and service availability breakdown.</p>\n        </div>\n\n        <!-- Legend -->\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-3 text-xs\">\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-success size-2 rounded-full\" />\n            <span>Operational</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-warning size-2 rounded-full\" />\n            <span>Degraded</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-destructive size-2 rounded-full\" />\n            <span>Outage</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-info size-2 rounded-full\" />\n            <span>Maintenance</span>\n          </div>\n        </div>\n      </div>\n\n      <Card class=\"border-border/80 bg-card text-card-foreground overflow-hidden shadow-xs\">\n        <div class=\"divide-border/60 divide-y\">\n          <div\n            v-for=\"service in activeServices\"\n            :key=\"service.id\"\n            class=\"hover:bg-muted/15 space-y-3 p-4 transition-colors sm:p-5\"\n          >\n            <!-- Service Header Row -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <div\n                  class=\"bg-muted text-muted-foreground border-border/50 flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n                >\n                  <ShieldCheck v-if=\"service.icon === 'auth'\" class=\"size-4\" />\n                  <Globe v-else-if=\"service.icon === 'cdn'\" class=\"size-4\" />\n                  <Database v-else-if=\"service.icon === 'database'\" class=\"size-4\" />\n                  <Zap v-else-if=\"service.icon === 'webhook'\" class=\"size-4\" />\n                  <Cpu v-else-if=\"service.icon === 'ai'\" class=\"size-4\" />\n                  <Server v-else class=\"size-4\" />\n                </div>\n                <div>\n                  <p class=\"text-foreground text-sm leading-tight font-semibold\">{{ service.name }}</p>\n                  <p v-if=\"service.description\" class=\"text-muted-foreground mt-0.5 text-xs\">\n                    {{ service.description }}\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"flex items-center gap-3 self-start sm:self-auto\">\n                <span class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">\n                  {{ service.uptime }}% uptime\n                </span>\n                <Badge\n                  :variant=\"\n                    service.status === 'operational'\n                      ? 'success'\n                      : service.status === 'degraded'\n                        ? 'warning'\n                        : 'destructive'\n                  \"\n                  class=\"text-xs font-medium whitespace-normal capitalize\"\n                >\n                  <span\n                    :class=\"[\n                      'mr-1 size-1.5 rounded-full',\n                      service.status === 'operational' ? 'bg-success' : 'bg-warning',\n                    ]\"\n                  />\n                  {{ service.status }}\n                </Badge>\n              </div>\n            </div>\n\n            <!-- 90-day pill bar track -->\n            <div class=\"space-y-1.5\">\n              <div\n                class=\"flex w-full gap-px overflow-hidden sm:gap-[2px]\"\n                role=\"img\"\n                :aria-label=\"`${service.name} 90-day availability history (${service.uptime}%)`\"\n              >\n                <span\n                  v-for=\"(day, dayIdx) in service.days || generate90Days()\"\n                  :key=\"dayIdx\"\n                  :class=\"[\n                    'h-6 min-w-px flex-1 cursor-pointer rounded-xs transition-transform hover:scale-y-125',\n                    dayClassMap[day],\n                  ]\"\n                  :title=\"`Day ${90 - dayIdx} ago: ${dayLabelMap[day]}`\"\n                />\n              </div>\n\n              <!-- Time axis labels -->\n              <div class=\"text-muted-foreground flex items-center justify-between pt-0.5 text-xs\">\n                <span>90 days ago</span>\n                <span class=\"hidden sm:inline\">100% daily health check baseline</span>\n                <span>Today</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n\n    <!-- Section 3: Past Incidents Timeline -->\n    <div class=\"space-y-3\">\n      <div>\n        <h2 class=\"text-foreground text-sm font-semibold tracking-tight\">Past Incidents & Maintenance</h2>\n        <p class=\"text-muted-foreground text-xs\">Detailed post-mortems and scheduled infrastructure updates.</p>\n      </div>\n\n      <Card class=\"border-border/80 bg-card text-card-foreground p-5 shadow-xs sm:p-6\">\n        <div v-if=\"activeIncidents && activeIncidents.length > 0\" class=\"space-y-8\">\n          <div\n            v-for=\"incident in activeIncidents\"\n            :key=\"incident.id\"\n            class=\"border-border/80 relative space-y-3 border-l-2 pb-2 pl-6 last:border-l-transparent sm:pl-8\"\n          >\n            <!-- Timeline Node Dot -->\n            <div\n              :class=\"[\n                'bg-background absolute top-0 -left-[11px] flex size-5 items-center justify-center rounded-full border',\n                incident.resolved ? 'border-success text-success' : 'border-warning text-warning',\n              ]\"\n            >\n              <Check v-if=\"incident.resolved\" class=\"size-3\" />\n              <AlertTriangle v-else class=\"size-3\" />\n            </div>\n\n            <!-- Incident Header -->\n            <div class=\"flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <h3 class=\"text-foreground text-sm font-semibold\">{{ incident.title }}</h3>\n                  <Badge :variant=\"incident.resolved ? 'success' : 'warning'\" class=\"text-xs whitespace-normal\">\n                    {{ incident.resolved ? 'Resolved' : 'Ongoing' }}\n                  </Badge>\n                  <Badge wrap :variant=\"severityBadgeMap[incident.severity].variant\" class=\"text-xs\">\n                    {{ severityBadgeMap[incident.severity].label }}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">{{ incident.date }}</p>\n              </div>\n\n              <span class=\"text-muted-foreground font-mono text-xs whitespace-nowrap\">\n                Duration: {{ incident.duration }}\n              </span>\n            </div>\n\n            <!-- Incident Updates Log -->\n            <div class=\"bg-muted/40 border-border/60 space-y-3 rounded-lg border p-3.5 text-xs sm:p-4\">\n              <div\n                v-for=\"(update, uIdx) in incident.updates\"\n                :key=\"uIdx\"\n                class=\"border-border/40 space-y-1 border-b pb-2.5 last:border-b-0 last:pb-0\"\n              >\n                <div class=\"text-foreground flex items-center gap-2 font-medium\">\n                  <span class=\"text-muted-foreground font-mono\">{{ update.time }}</span>\n                  <span>·</span>\n                  <span\n                    :class=\"\n                      update.status === 'Resolved' || update.status === 'Completed' ? 'text-success' : 'text-foreground'\n                    \"\n                  >\n                    {{ update.status }}\n                  </span>\n                </div>\n                <p class=\"text-muted-foreground pl-0 leading-relaxed sm:pl-2\">\n                  {{ update.description }}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div v-else class=\"flex flex-col items-center justify-center py-8 text-center\">\n          <CheckCircle2 class=\"text-success mb-2 size-8\" />\n          <p class=\"text-foreground text-sm font-medium\">No incidents reported</p>\n          <p class=\"text-muted-foreground mt-0.5 text-xs\">All services have maintained 100% operational integrity.</p>\n        </div>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ServiceHealthMatrix.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"
  ],
  "description": "Statuspage and BetterStack style global region latency & infrastructure health matrix with overall operational status banner, 6-region latency grid with sparklines, 90-day core service uptime bars, and incident history timeline.",
  "categories": [
    "devops",
    "dashboard"
  ]
}