{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "data-contract-governance",
  "title": "Data Contract Governance",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/data-contract-governance/DataContractGovernance.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  AlertCircle,\n  AlertTriangle,\n  Check,\n  CheckCircle2,\n  Code2,\n  Copy,\n  Download,\n  FileCode,\n  FileCode2,\n  FileJson,\n  HardDrive,\n  Key,\n  Link2,\n  Loader2,\n  Lock,\n  Play,\n  Radio,\n  RefreshCw,\n  Search,\n  Server,\n  ShieldCheck,\n  Table2,\n  Tag,\n  Terminal,\n  Users,\n  WrapText,\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 } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport interface SchemaField {\n  name: string\n  dataType: string\n  format?: string\n  nullable: boolean\n  isPrimaryKey?: boolean\n  isForeignKey?: boolean\n  foreignKeyRef?: string\n  isPii?: boolean\n  maskingStrategy?: string\n  constraints?: string\n  description: string\n}\n\nexport interface LintTestRule {\n  id: string\n  name: string\n  category: 'breaking' | 'compatibility' | 'compliance'\n  categoryLabel: string\n  status: 'pass' | 'warn' | 'fail'\n  ruleDefinition: string\n  assertionPath: string\n  executionDuration: string\n  evaluatedAt: string\n}\n\nexport interface ConsumerService {\n  id: string\n  name: string\n  team: string\n  versionSubscribed: string\n  versionStatus: 'current' | 'minor-lag' | 'major-lag'\n  status: 'compliant' | 'warning' | 'deprecated'\n  throughput: string\n  latencyP99: string\n  slaStatus: string\n  compatibility: string\n  lastEventReceived: string\n  contact: string\n}\n\nexport interface DataContractGovernanceProps {\n  contractTitle?: string\n  version?: string\n  ownerTeam?: string\n  producerService?: string\n  destinationTopic?: string\n  lakehouseTarget?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<DataContractGovernanceProps>(), {\n  contractTitle: 'orders_placed_v3.contract.yaml',\n  version: 'v3.2.0',\n  ownerTeam: 'Checkout Core Engineering Squad',\n  producerService: 'checkout-service-prod',\n  destinationTopic: 'events.orders.placed',\n  lakehouseTarget: 's3://lakehouse-analytics/tables/checkout/orders_placed_v3',\n})\n\n// --- Default Data ---\nconst rawYamlContract = `apiVersion: datacontract.com/v3.0.1\nkind: DataContract\nid: urn:datacontract:checkout:orders_placed\ninfo:\n  title: orders_placed\n  version: 3.2.0\n  status: enforced\n  owner: Checkout Core Engineering Squad\n  contact: #checkout-eng-alerts\n  description: Canonical production data contract for completed checkout orders across global storefronts.\n\nservers:\n  production:\n    type: kafka\n    topic: events.orders.placed\n    format: json_schema\n    cluster: prd-us-east-kafka.internal:9092\n  lakehouse:\n    type: iceberg\n    location: s3://lakehouse-analytics/tables/checkout/orders_placed_v3\n    format: parquet\n\nservicelevels:\n  availability:\n    percentage: 99.99%\n    description: 30-day rolling cluster uptime\n  latency:\n    threshold: 100ms\n    percentile: p99\n  freshness:\n    maxDelay: 5s\n    source: cdc_debezium_postgres\n  retention:\n    period: 365d\n    tier: hot_kafka_7d_warm_iceberg_365d\n\nschema:\n  type: object\n  required:\n    - order_id\n    - customer_id\n    - order_timestamp\n    - total_amount_cents\n    - currency_code\n    - payment_method\n    - customer_email_encrypted\n    - shipping_country\n    - line_items_count\n  properties:\n    order_id:\n      type: string\n      format: uuid\n      nullable: false\n      description: Unique primary transaction order UUID.\n    customer_id:\n      type: string\n      format: uuid\n      nullable: false\n      description: Master verified customer identity reference.\n    order_timestamp:\n      type: string\n      format: date-time\n      pattern: \"^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}Z$\"\n      nullable: false\n      description: Event generation timestamp in UTC RFC-3339.\n    total_amount_cents:\n      type: integer\n      minimum: 0\n      maximum: 5000000\n      nullable: false\n      description: Gross order value denominated in lowest currency unit.\n    currency_code:\n      type: string\n      enum: [\"USD\", \"EUR\", \"GBP\", \"JPY\", \"CAD\"]\n      nullable: false\n      description: ISO 4217 three-letter currency code.\n    payment_method:\n      type: string\n      enum: [\"credit_card\", \"apple_pay\", \"google_pay\", \"sepa_debit\"]\n      nullable: false\n      description: Authorized payment gateway instrument type.\n    customer_email_encrypted:\n      type: string\n      nullable: false\n      pii: true\n      masking: deterministic_sha256\n      classification: restricted\n      description: AES-GCM-256 encrypted customer email for fraud detection.\n    shipping_country:\n      type: string\n      pattern: \"^[A-Z]{2}$\"\n      nullable: false\n      description: ISO 3166-1 alpha-2 destination country code.\n    line_items_count:\n      type: integer\n      minimum: 1\n      maximum: 100\n      nullable: false\n      description: Number of line items purchased in order.`\n\nconst schemaFields: SchemaField[] = [\n  {\n    name: 'order_id',\n    dataType: 'string',\n    format: 'uuid',\n    nullable: false,\n    isPrimaryKey: true,\n    constraints: 'format: uuid (RFC-4122)',\n    description: 'Unique primary transaction order identifier.',\n  },\n  {\n    name: 'customer_id',\n    dataType: 'string',\n    format: 'uuid',\n    nullable: false,\n    isForeignKey: true,\n    foreignKeyRef: 'customers.customer_id',\n    constraints: 'format: uuid, not null',\n    description: 'Master verified customer identity reference.',\n  },\n  {\n    name: 'order_timestamp',\n    dataType: 'string',\n    format: 'date-time',\n    nullable: false,\n    constraints: 'pattern: RFC-3339 UTC',\n    description: 'Event generation timestamp in strict ISO-8601 / RFC-3339 UTC.',\n  },\n  {\n    name: 'total_amount_cents',\n    dataType: 'integer',\n    format: 'int64',\n    nullable: false,\n    constraints: '0 ≤ value ≤ 5,000,000',\n    description: 'Gross order value denominated in lowest currency unit (cents).',\n  },\n  {\n    name: 'currency_code',\n    dataType: 'string',\n    nullable: false,\n    constraints: 'enum: [USD, EUR, GBP, JPY, CAD]',\n    description: 'ISO-4217 three-letter currency code in which the charge occurred.',\n  },\n  {\n    name: 'payment_method',\n    dataType: 'string',\n    nullable: false,\n    constraints: 'enum: [credit_card, apple_pay, google_pay, sepa_debit]',\n    description: 'Authorized payment gateway instrument method.',\n  },\n  {\n    name: 'customer_email_encrypted',\n    dataType: 'string',\n    nullable: false,\n    isPii: true,\n    maskingStrategy: 'SHA-256 / AES-256-GCM',\n    constraints: 'pii: true, restricted',\n    description: 'Cryptographically enveloped customer email address.',\n  },\n  {\n    name: 'shipping_country',\n    dataType: 'string',\n    nullable: false,\n    constraints: 'pattern: ^[A-Z]{2}$ (ISO 3166-1)',\n    description: 'Two-letter alpha-2 shipping destination country code.',\n  },\n  {\n    name: 'line_items_count',\n    dataType: 'integer',\n    format: 'int32',\n    nullable: false,\n    constraints: '1 ≤ value ≤ 100',\n    description: 'Total count of individual catalog items inside the basket.',\n  },\n]\n\nconst lintRules: LintTestRule[] = [\n  {\n    id: 'lint-1',\n    name: \"Field 'customer_id' remains required\",\n    category: 'breaking',\n    categoryLabel: 'Requiredness Invariant',\n    status: 'pass',\n    ruleDefinition:\n      'Required string UUID field cannot be made optional or omitted without a major semantic version bump (v4.0.0).',\n    assertionPath: 'schema.properties.customer_id.nullable == false',\n    executionDuration: '14ms',\n    evaluatedAt: 'Just now',\n  },\n  {\n    id: 'lint-2',\n    name: \"Field 'currency_code' enum compatibility\",\n    category: 'compatibility',\n    categoryLabel: 'Enum Evolution',\n    status: 'pass',\n    ruleDefinition:\n      'Allowed currency enum set [USD, EUR, GBP, JPY, CAD] is a strict superset of v3.1; no historical enum values were pruned.',\n    assertionPath: 'schema.properties.currency_code.enum (5 items)',\n    executionDuration: '22ms',\n    evaluatedAt: 'Just now',\n  },\n  {\n    id: 'lint-3',\n    name: 'Timestamp ISO-8601 format compliance',\n    category: 'compliance',\n    categoryLabel: 'Format Strictness',\n    status: 'pass',\n    ruleDefinition:\n      \"Field 'order_timestamp' adheres to strict RFC 3339 / ISO-8601 UTC regex pattern with mandatory 'Z' zone identifier.\",\n    assertionPath: 'format: date-time (RFC-3339 UTC)',\n    executionDuration: '18ms',\n    evaluatedAt: 'Just now',\n  },\n  {\n    id: 'lint-4',\n    name: 'Backward compatibility for existing consumer v3.1',\n    category: 'compatibility',\n    categoryLabel: 'Consumer Simulation',\n    status: 'pass',\n    ruleDefinition:\n      'Simulated payload deserialization passed across all 8 active consumer test vectors without JSON schema deserializer exceptions.',\n    assertionPath: '8/8 consumer test vectors pass',\n    executionDuration: '145ms',\n    evaluatedAt: 'Just now',\n  },\n  {\n    id: 'lint-5',\n    name: \"Field 'customer_email_encrypted' PII Masking Rule\",\n    category: 'compliance',\n    categoryLabel: 'Security & PII',\n    status: 'pass',\n    ruleDefinition:\n      'Customer email field enforces cryptographic ciphertext masking (AES-GCM-256 / SHA-256) prior to publishing onto Kafka broker.',\n    assertionPath: 'pii: true · masking: deterministic_sha256',\n    executionDuration: '31ms',\n    evaluatedAt: 'Just now',\n  },\n  {\n    id: 'lint-6',\n    name: 'Schema type narrowing safety',\n    category: 'breaking',\n    categoryLabel: 'Type Evolution',\n    status: 'pass',\n    ruleDefinition:\n      'No existing schema properties had primitive data types narrowed or widened in a breaking manner (e.g. integer to short).',\n    assertionPath: '0 type narrowing violations detected',\n    executionDuration: '19ms',\n    evaluatedAt: 'Just now',\n  },\n]\n\nconst consumerServices: ConsumerService[] = [\n  {\n    id: 'svc-1',\n    name: 'Fraud Detection Service',\n    team: 'Security & Risk Squad',\n    versionSubscribed: 'v3.2.0',\n    versionStatus: 'current',\n    status: 'compliant',\n    throughput: '4,200 msg/s',\n    latencyP99: '38ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: '100% Compatible',\n    lastEventReceived: '1.2s ago',\n    contact: '#fraud-eng',\n  },\n  {\n    id: 'svc-2',\n    name: 'Financial Ledger Mart',\n    team: 'Finance Analytics Squad',\n    versionSubscribed: 'v3.1.0',\n    versionStatus: 'minor-lag',\n    status: 'compliant',\n    throughput: '1,850 msg/s',\n    latencyP99: '52ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: 'Backward Compat Verified',\n    lastEventReceived: '3.4s ago',\n    contact: '#fin-ledger-team',\n  },\n  {\n    id: 'svc-3',\n    name: 'Email Notification Dispatcher',\n    team: 'Customer Comms Team',\n    versionSubscribed: 'v3.2.0',\n    versionStatus: 'current',\n    status: 'compliant',\n    throughput: '850 msg/s',\n    latencyP99: '24ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: '100% Compatible',\n    lastEventReceived: '0.8s ago',\n    contact: '#comms-alerts',\n  },\n  {\n    id: 'svc-4',\n    name: 'Inventory Fulfillment Pipeline',\n    team: 'Supply Chain Engineering',\n    versionSubscribed: 'v3.2.0',\n    versionStatus: 'current',\n    status: 'compliant',\n    throughput: '2,100 msg/s',\n    latencyP99: '34ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: '100% Compatible',\n    lastEventReceived: '1.5s ago',\n    contact: '#supply-chain-dev',\n  },\n  {\n    id: 'svc-5',\n    name: 'Customer Data Platform (CDP)',\n    team: 'Growth & Marketing Tech',\n    versionSubscribed: 'v3.0.4',\n    versionStatus: 'minor-lag',\n    status: 'compliant',\n    throughput: '3,400 msg/s',\n    latencyP99: '48ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: 'v3.0 Compat Mode',\n    lastEventReceived: '2.1s ago',\n    contact: '#growth-infra',\n  },\n  {\n    id: 'svc-6',\n    name: 'Realtime Order Tracking Gateway',\n    team: 'Mobile & Web Edge Platform',\n    versionSubscribed: 'v3.2.0',\n    versionStatus: 'current',\n    status: 'compliant',\n    throughput: '5,600 msg/s',\n    latencyP99: '19ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: '100% Compatible',\n    lastEventReceived: '0.4s ago',\n    contact: '#edge-team',\n  },\n  {\n    id: 'svc-7',\n    name: 'Audit Log & Compliance Vault',\n    team: 'Infosec & Legal Systems',\n    versionSubscribed: 'v3.2.0',\n    versionStatus: 'current',\n    status: 'compliant',\n    throughput: '1,200 msg/s',\n    latencyP99: '28ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: '100% Compatible',\n    lastEventReceived: '4.2s ago',\n    contact: '#infosec-ops',\n  },\n  {\n    id: 'svc-8',\n    name: 'Search & Recommendation Indexer',\n    team: 'Discovery & ML Platform',\n    versionSubscribed: 'v3.1.2',\n    versionStatus: 'minor-lag',\n    status: 'compliant',\n    throughput: '980 msg/s',\n    latencyP99: '31ms',\n    slaStatus: 'SLA Compliant (p99 < 100ms)',\n    compatibility: 'Backward Compat Verified',\n    lastEventReceived: '1.9s ago',\n    contact: '#discovery-ml',\n  },\n]\n\n// --- State ---\nconst activeInspectorTab = ref<'yaml' | 'schema' | 'sla'>('yaml')\nconst selectedLinterFilter = ref<'all' | 'breaking' | 'compatibility' | 'compliance'>('all')\nconst consumerSearch = ref('')\nconst isValidatingYaml = ref(false)\nconst validationToast = ref<string | null>(null)\nconst isRunningLinter = ref(false)\nconst copiedYaml = ref(false)\nconst copiedSchema = ref(false)\nconst wrapYamlLines = ref(false)\nconst lastValidatedTimestamp = ref('Just now')\n\n// --- Computed ---\nconst filteredLintRules = computed(() => {\n  if (selectedLinterFilter.value === 'all') return lintRules\n  return lintRules.filter((r) => r.category === selectedLinterFilter.value)\n})\n\nconst filteredConsumers = computed(() => {\n  const q = consumerSearch.value.trim().toLowerCase()\n  if (!q) return consumerServices\n  return consumerServices.filter(\n    (c) =>\n      c.name.toLowerCase().includes(q) ||\n      c.team.toLowerCase().includes(q) ||\n      c.versionSubscribed.toLowerCase().includes(q) ||\n      c.compatibility.toLowerCase().includes(q),\n  )\n})\n\nconst passingRulesCount = computed(() => lintRules.filter((r) => r.status === 'pass').length)\n\n// --- Actions ---\nfunction handleValidateContract() {\n  if (isValidatingYaml.value) return\n  isValidatingYaml.value = true\n  validationToast.value = 'Validating 6 linter invariants & 8 consumer vectors...'\n\n  setTimeout(() => {\n    isValidatingYaml.value = false\n    lastValidatedTimestamp.value = 'Just now'\n    validationToast.value = 'Contract Validated · 0 Breaking Changes · 100% Compatible'\n    setTimeout(() => {\n      validationToast.value = null\n    }, 3500)\n  }, 750)\n}\n\nfunction handleRunLinter() {\n  if (isRunningLinter.value) return\n  isRunningLinter.value = true\n\n  setTimeout(() => {\n    isRunningLinter.value = false\n  }, 600)\n}\n\nfunction handleCopyYaml() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(rawYamlContract)\n    copiedYaml.value = true\n    setTimeout(() => {\n      copiedYaml.value = false\n    }, 2000)\n  }\n}\n\nfunction handleCopyJsonSchema() {\n  const jsonSchemaObj = {\n    $schema: 'http://json-schema.org/draft-07/schema#',\n    title: 'orders_placed',\n    description: 'Canonical production data contract for completed checkout orders across global storefronts.',\n    type: 'object',\n    required: schemaFields.filter((f) => !f.nullable).map((f) => f.name),\n    properties: Object.fromEntries(\n      schemaFields.map((f) => [\n        f.name,\n        {\n          type: f.dataType,\n          ...(f.format ? { format: f.format } : {}),\n          description: f.description,\n          ...(f.isPii ? { 'x-pii': true, 'x-masking': f.maskingStrategy } : {}),\n        },\n      ]),\n    ),\n  }\n\n  const jsonStr = JSON.stringify(jsonSchemaObj, null, 2)\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(jsonStr)\n    copiedSchema.value = true\n    setTimeout(() => {\n      copiedSchema.value = false\n    }, 2000)\n  }\n}\n\nfunction handleExportSchema() {\n  const jsonSchemaObj = {\n    $schema: 'http://json-schema.org/draft-07/schema#',\n    id: 'urn:datacontract:checkout:orders_placed',\n    version: props.version,\n    title: 'orders_placed',\n    owner: props.ownerTeam,\n    producer: props.producerService,\n    topic: props.destinationTopic,\n    exportedAt: new Date().toISOString(),\n    servicelevels: {\n      availability: '99.99%',\n      latencyP99: '< 100ms',\n      freshness: '< 5s CDC',\n      retention: '365d',\n    },\n    schema: {\n      type: 'object',\n      required: schemaFields.filter((f) => !f.nullable).map((f) => f.name),\n      properties: Object.fromEntries(\n        schemaFields.map((f) => [\n          f.name,\n          {\n            type: f.dataType,\n            ...(f.format ? { format: f.format } : {}),\n            description: f.description,\n            constraints: f.constraints,\n            ...(f.isPii ? { 'x-pii': true, 'x-masking': f.maskingStrategy } : {}),\n          },\n        ]),\n      ),\n    },\n  }\n\n  const blobData = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(jsonSchemaObj, null, 2))\n  if (typeof document !== 'undefined') {\n    const link = document.createElement('a')\n    link.setAttribute('href', blobData)\n    link.setAttribute('download', `${props.contractTitle.replace('.yaml', '')}.json`)\n    document.body.appendChild(link)\n    link.click()\n    link.remove()\n  }\n}\n</script>\n\n<template>\n  <div\n    data-slot=\"data-contract-governance\"\n    :class=\"\n      cn(\n        'border-border bg-card text-foreground flex w-full flex-col overflow-hidden rounded-xl border shadow-xs',\n        props.class,\n      )\n    \"\n  >\n    <!-- TOP HEADER -->\n    <header class=\"border-border/80 bg-muted/20 border-b p-4 sm:p-6\">\n      <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Left: Contract Title, Version, Status Badges -->\n        <div class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <div\n              class=\"bg-primary/10 text-primary border-primary/20 flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <FileCode2 class=\"size-4\" />\n            </div>\n            <div>\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h2 class=\"font-mono text-base font-bold break-all sm:text-lg\">\n                  {{ contractTitle }}\n                </h2>\n                <Badge variant=\"secondary\" class=\"gap-1 font-mono text-xs font-medium\">\n                  <Tag class=\"text-info size-3\" />\n                  {{ version }} · Semantic Versioned\n                </Badge>\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success gap-1.5 font-mono text-xs font-semibold\"\n                >\n                  <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                  <ShieldCheck class=\"text-success size-3.5\" />\n                  Contract Enforced & Passing\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          <!-- Metadata Badges & Ownership Strip -->\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1.5 font-mono text-xs\">\n            <div class=\"flex items-center gap-1.5\">\n              <Users class=\"text-info size-3\" />\n              <span>Owner:</span>\n              <span class=\"text-foreground font-medium\">{{ ownerTeam }}</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <Server class=\"text-chart-1 size-3\" />\n              <span>Producer:</span>\n              <span class=\"text-foreground font-medium\">{{ producerService }}</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <Radio class=\"text-warning size-3\" />\n              <span>Topic:</span>\n              <span class=\"text-foreground font-medium\">{{ destinationTopic }}</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <Lock class=\"text-success size-3\" />\n              <span>Classification:</span>\n              <span class=\"text-foreground font-medium\">PII Sensitive · Encrypted</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right: Primary & Secondary Action Buttons -->\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs font-medium\" @click=\"handleExportSchema\">\n            <Download class=\"text-info size-3.5\" />\n            <span>Export Schema (JSON Schema)</span>\n          </Button>\n\n          <Button\n            variant=\"default\"\n            size=\"sm\"\n            class=\"bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 text-xs font-semibold shadow-xs\"\n            :disabled=\"isValidatingYaml\"\n            @click=\"handleValidateContract\"\n          >\n            <Loader2 v-if=\"isValidatingYaml\" class=\"size-3.5 animate-spin\" />\n            <Play v-else class=\"size-3.5 fill-current\" />\n            <span>{{ isValidatingYaml ? 'Validating Contract...' : 'Validate Contract YAML' }}</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Live Feedback Notification (if validating or completed) -->\n      <div\n        v-if=\"validationToast\"\n        class=\"border-border bg-background mt-3 flex items-center justify-between rounded-lg border px-3 py-2 text-xs\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <ShieldCheck class=\"text-success size-4\" />\n          <span class=\"text-foreground font-mono font-medium\">{{ validationToast }}</span>\n        </div>\n        <span class=\"text-muted-foreground font-mono text-xs\">{{ lastValidatedTimestamp }}</span>\n      </div>\n    </header>\n\n    <!-- 4 DATA GOVERNANCE KPI CARDS -->\n    <div class=\"border-border/70 bg-border grid grid-cols-1 gap-px border-b sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Registered Consumers -->\n      <div class=\"bg-card p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between pb-2\">\n          <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\"> Registered Consumers </span>\n          <div class=\"border-info/20 bg-info/10 text-info flex size-7 items-center justify-center rounded-md border\">\n            <Users class=\"size-3.5\" />\n          </div>\n        </div>\n        <div class=\"text-2xl font-bold tracking-tight\">8 Services</div>\n        <div class=\"mt-1.5 flex flex-wrap items-center gap-1.5 font-mono text-xs\">\n          <Badge variant=\"outline\" class=\"border-info/30 bg-info/10 text-info text-xs font-normal\">\n            8 Downstream Consumer Services\n          </Badge>\n          <span class=\"text-muted-foreground\">across 3 domains</span>\n        </div>\n      </div>\n\n      <!-- Card 2: Breaking Changes Detected -->\n      <div class=\"bg-card p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between pb-2\">\n          <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\"> Breaking Changes </span>\n          <div\n            class=\"border-success/20 bg-success/10 text-success flex size-7 items-center justify-center rounded-md border\"\n          >\n            <ShieldCheck class=\"size-3.5\" />\n          </div>\n        </div>\n        <div class=\"text-success text-2xl font-bold tracking-tight\">0 Breaking</div>\n        <div class=\"mt-1.5 flex flex-wrap items-center gap-1.5 font-mono text-xs\">\n          <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n            0 Breaking Changes\n          </Badge>\n          <span class=\"text-muted-foreground\">100% backward compat</span>\n        </div>\n      </div>\n\n      <!-- Card 3: Schema Freshness SLA -->\n      <div class=\"bg-card p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between pb-2\">\n          <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\"> Freshness SLA </span>\n          <div\n            class=\"border-warning/20 bg-warning/10 text-warning flex size-7 items-center justify-center rounded-md border\"\n          >\n            <Activity class=\"size-3.5\" />\n          </div>\n        </div>\n        <div class=\"text-2xl font-bold tracking-tight\">99.9% CDC</div>\n        <div class=\"mt-1.5 flex flex-wrap items-center gap-1.5 font-mono text-xs\">\n          <Badge variant=\"outline\" class=\"border-warning/30 bg-warning/10 text-warning text-xs font-normal\">\n            SLA: 99.9% · Real-time CDC\n          </Badge>\n          <span class=\"text-muted-foreground\">p99 &lt; 85ms</span>\n        </div>\n      </div>\n\n      <!-- Card 4: Quality Assertions Bound -->\n      <div class=\"bg-card p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between pb-2\">\n          <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\"> Quality Assertions </span>\n          <div\n            class=\"border-chart-2/20 bg-chart-2/10 text-chart-2 flex size-7 items-center justify-center rounded-md border\"\n          >\n            <CheckCircle2 class=\"size-3.5\" />\n          </div>\n        </div>\n        <div class=\"text-2xl font-bold tracking-tight\">14 Active</div>\n        <div class=\"mt-1.5 flex flex-wrap items-center gap-1.5 font-mono text-xs\">\n          <Badge variant=\"outline\" class=\"border-chart-2/30 bg-chart-2/10 text-chart-2 text-xs font-normal\">\n            14 Schema Constraints Active\n          </Badge>\n          <span class=\"text-muted-foreground\">14/14 passing</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- 2-COLUMN DATA CONTRACT STUDIO -->\n    <div class=\"divide-border grid flex-1 grid-cols-1 divide-y lg:grid-cols-12 lg:divide-x lg:divide-y-0\">\n      <!-- LEFT COLUMN: CONTRACT SCHEMA & SLA INSPECTOR (45% -> lg:col-span-5) -->\n      <section class=\"bg-muted/10 flex flex-col space-y-4 p-4 sm:p-5 lg:col-span-5\">\n        <!-- Section Header -->\n        <div class=\"flex items-center justify-between\">\n          <div class=\"space-y-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <Code2 class=\"text-primary size-4\" />\n              <h3 class=\"text-sm font-semibold\">Contract Specification & SLA</h3>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              OpenDataContract v3.0 schema definitions and producer guarantees\n            </p>\n          </div>\n        </div>\n\n        <!-- Tabs Container -->\n        <Tabs default-value=\"yaml\" v-model=\"activeInspectorTab\" class=\"w-full\">\n          <div class=\"flex items-center justify-between gap-2 pb-1\">\n            <TabsList variant=\"segmented\" class=\"h-8\">\n              <TabsTrigger value=\"yaml\" class=\"h-7 gap-1 px-2.5 text-xs\">\n                <FileCode class=\"size-3.5\" />\n                <span>YAML Spec</span>\n              </TabsTrigger>\n              <TabsTrigger value=\"schema\" class=\"h-7 gap-1 px-2.5 text-xs\">\n                <Table2 class=\"size-3.5\" />\n                <span>Fields ({{ schemaFields.length }})</span>\n              </TabsTrigger>\n              <TabsTrigger value=\"sla\" class=\"h-7 gap-1 px-2.5 text-xs\">\n                <Activity class=\"size-3.5\" />\n                <span>SLA Agreements</span>\n              </TabsTrigger>\n            </TabsList>\n\n            <!-- Actions per tab -->\n            <div class=\"flex items-center gap-1\">\n              <Button\n                v-if=\"activeInspectorTab === 'yaml'\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"h-7 px-2 text-xs\"\n                :title=\"wrapYamlLines ? 'Disable line wrap' : 'Enable line wrap'\"\n                @click=\"wrapYamlLines = !wrapYamlLines\"\n              >\n                <WrapText class=\"size-3.5\" />\n              </Button>\n\n              <Button\n                v-if=\"activeInspectorTab === 'yaml'\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"h-7 gap-1 px-2 text-xs\"\n                @click=\"handleCopyYaml\"\n              >\n                <Check v-if=\"copiedYaml\" class=\"text-success size-3.5\" />\n                <Copy v-else class=\"size-3.5\" />\n                <span>{{ copiedYaml ? 'Copied' : 'Copy' }}</span>\n              </Button>\n\n              <Button\n                v-if=\"activeInspectorTab === 'schema'\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"h-7 gap-1 px-2 text-xs\"\n                @click=\"handleCopyJsonSchema\"\n              >\n                <Check v-if=\"copiedSchema\" class=\"text-success size-3.5\" />\n                <FileJson v-else class=\"size-3.5\" />\n                <span>{{ copiedSchema ? 'Copied JSON' : 'Copy JSON' }}</span>\n              </Button>\n            </div>\n          </div>\n\n          <!-- TAB 1: YAML SPECIFICATION -->\n          <TabsContent value=\"yaml\" class=\"mt-2 space-y-3 focus-visible:outline-hidden\">\n            <div\n              class=\"border-border bg-muted/40 relative overflow-hidden rounded-lg border font-mono text-xs shadow-xs\"\n            >\n              <!-- Code Header Bar -->\n              <div class=\"border-border/80 bg-muted/70 flex items-center justify-between border-b px-3 py-1.5 text-xs\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-success size-2 rounded-full\" />\n                  <span class=\"text-foreground font-semibold\">orders_placed_v3.contract.yaml</span>\n                </div>\n                <div class=\"text-muted-foreground flex items-center gap-2\">\n                  <span>UTF-8</span>\n                  <span>YAML 1.2</span>\n                </div>\n              </div>\n\n              <!-- Monospace YAML Viewer -->\n              <div\n                class=\"max-h-[540px] overflow-auto p-3\"\n                :class=\"wrapYamlLines ? 'whitespace-pre-wrap' : 'whitespace-pre'\"\n              >\n                <div\n                  v-for=\"(line, idx) in rawYamlContract.split('\\n')\"\n                  :key=\"idx\"\n                  class=\"hover:bg-muted/50 flex leading-5\"\n                >\n                  <span class=\"text-muted-foreground/60 w-7 shrink-0 pr-3 text-right font-mono text-xs select-none\">\n                    {{ idx + 1 }}\n                  </span>\n                  <span\n                    :class=\"[\n                      line.startsWith('apiVersion:') || line.startsWith('kind:') || line.startsWith('id:')\n                        ? 'text-info font-semibold'\n                        : line.startsWith('info:') ||\n                            line.startsWith('servers:') ||\n                            line.startsWith('servicelevels:') ||\n                            line.startsWith('schema:')\n                          ? 'text-chart-1 font-semibold'\n                          : line.includes('pii: true') || line.includes('masking:')\n                            ? 'text-success font-semibold'\n                            : line.trim().startsWith('#')\n                              ? 'text-muted-foreground/80 italic'\n                              : 'text-foreground/90',\n                    ]\"\n                    >{{ line }}</span\n                  >\n                </div>\n              </div>\n            </div>\n\n            <!-- Routing Details Strip -->\n            <Card class=\"border-border bg-card p-3 shadow-none\">\n              <div class=\"grid grid-cols-2 gap-2 font-mono text-xs\">\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-muted-foreground\">Kafka Cluster</span>\n                  <div class=\"text-foreground truncate font-medium\">prd-us-east-kafka.internal</div>\n                </div>\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-muted-foreground\">Lakehouse Sync</span>\n                  <div class=\"text-foreground truncate font-medium\">Apache Iceberg (Parquet)</div>\n                </div>\n              </div>\n            </Card>\n          </TabsContent>\n\n          <!-- TAB 2: SCHEMA FIELDS EXPLORER -->\n          <TabsContent value=\"schema\" class=\"mt-2 space-y-3 focus-visible:outline-hidden\">\n            <div class=\"border-border bg-card overflow-hidden rounded-lg border\">\n              <Table>\n                <TableHeader class=\"bg-muted/40\">\n                  <TableRow class=\"hover:bg-transparent\">\n                    <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\">Field Name</TableHead>\n                    <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\">Type</TableHead>\n                    <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\">Nullability</TableHead>\n                    <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\"\n                      >Tags / Constraints</TableHead\n                    >\n                  </TableRow>\n                </TableHeader>\n                <TableBody class=\"font-mono text-xs\">\n                  <TableRow v-for=\"field in schemaFields\" :key=\"field.name\" class=\"hover:bg-muted/30\">\n                    <TableCell class=\"py-2.5 font-medium\">\n                      <div class=\"flex items-center gap-1.5\">\n                        <Key v-if=\"field.isPrimaryKey\" class=\"text-warning size-3\" />\n                        <Link2 v-else-if=\"field.isForeignKey\" class=\"text-info size-3\" />\n                        <Lock v-else-if=\"field.isPii\" class=\"text-success size-3\" />\n                        <span class=\"text-foreground\">{{ field.name }}</span>\n                      </div>\n                    </TableCell>\n                    <TableCell class=\"py-2.5\">\n                      <Badge variant=\"secondary\" class=\"font-mono text-xs\">\n                        {{ field.dataType }}{{ field.format ? ` (${field.format})` : '' }}\n                      </Badge>\n                    </TableCell>\n                    <TableCell class=\"py-2.5\">\n                      <Badge :variant=\"field.nullable ? 'outline' : 'default'\" class=\"text-xs\">\n                        {{ field.nullable ? 'nullable' : 'required' }}\n                      </Badge>\n                    </TableCell>\n                    <TableCell class=\"py-2.5\">\n                      <div class=\"flex flex-col gap-0.5\">\n                        <span v-if=\"field.isPii\" class=\"text-success font-semibold\">\n                          PII: {{ field.maskingStrategy }}\n                        </span>\n                        <span class=\"text-muted-foreground text-xs\">{{ field.constraints }}</span>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </TabsContent>\n\n          <!-- TAB 3: SLA SERVICE LEVEL AGREEMENTS -->\n          <TabsContent value=\"sla\" class=\"mt-2 space-y-3 focus-visible:outline-hidden\">\n            <div class=\"grid grid-cols-1 gap-3\">\n              <!-- SLA Item 1: Latency -->\n              <Card class=\"border-border bg-card p-3.5 shadow-none\">\n                <div class=\"flex items-start justify-between\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-1.5 text-xs font-semibold\">\n                      <Zap class=\"text-warning size-3.5\" />\n                      <span>Event Latency (p99)</span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">\n                      End-to-end event publication latency from checkout commit to Kafka broker.\n                    </p>\n                  </div>\n                  <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success font-mono text-xs\">\n                    Target &lt; 100ms\n                  </Badge>\n                </div>\n                <div\n                  class=\"border-border/60 bg-muted/30 mt-3 flex items-center justify-between rounded-md border p-2 font-mono text-xs\"\n                >\n                  <span class=\"text-muted-foreground\">Observed 30-Day p99:</span>\n                  <span class=\"text-success font-bold\">42ms (Passing)</span>\n                </div>\n              </Card>\n\n              <!-- SLA Item 2: Availability -->\n              <Card class=\"border-border bg-card p-3.5 shadow-none\">\n                <div class=\"flex items-start justify-between\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-1.5 text-xs font-semibold\">\n                      <ShieldCheck class=\"text-success size-3.5\" />\n                      <span>Producer Availability</span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">\n                      Uptime commitment for producer event emission without message drops.\n                    </p>\n                  </div>\n                  <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success font-mono text-xs\">\n                    99.99% Guaranteed\n                  </Badge>\n                </div>\n                <div\n                  class=\"border-border/60 bg-muted/30 mt-3 flex items-center justify-between rounded-md border p-2 font-mono text-xs\"\n                >\n                  <span class=\"text-muted-foreground\">Actual Rolling Uptime:</span>\n                  <span class=\"text-success font-bold\">99.995%</span>\n                </div>\n              </Card>\n\n              <!-- SLA Item 3: Retention & Archival -->\n              <Card class=\"border-border bg-card p-3.5 shadow-none\">\n                <div class=\"flex items-start justify-between\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-1.5 text-xs font-semibold\">\n                      <HardDrive class=\"text-info size-3.5\" />\n                      <span>Data Retention & Tiering</span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">\n                      Hot retention on Apache Kafka broker topic with cold Iceberg archival.\n                    </p>\n                  </div>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\"> 365 Days </Badge>\n                </div>\n                <div\n                  class=\"border-border/60 bg-muted/30 mt-3 flex items-center justify-between rounded-md border p-2 font-mono text-xs\"\n                >\n                  <span class=\"text-muted-foreground\">Storage Tiers:</span>\n                  <span class=\"text-foreground font-medium\">Kafka 7d · Iceberg 365d</span>\n                </div>\n              </Card>\n\n              <!-- SLA Item 4: Escalation Contacts -->\n              <Card class=\"border-border bg-card p-3.5 shadow-none\">\n                <div class=\"space-y-1\">\n                  <div class=\"flex items-center gap-1.5 text-xs font-semibold\">\n                    <Users class=\"text-chart-2 size-3.5\" />\n                    <span>On-Call SLA Escalation</span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Tier 1 Mission Critical Producer Squad: MTTA &lt; 5 mins, MTTR &lt; 15 mins.\n                  </p>\n                </div>\n                <div\n                  class=\"border-border/60 bg-muted/30 mt-2.5 flex items-center justify-between rounded-md border p-2 font-mono text-xs\"\n                >\n                  <span class=\"text-muted-foreground\">Primary PagerDuty:</span>\n                  <span class=\"text-foreground font-medium\">@checkout-prod-lead</span>\n                </div>\n              </Card>\n            </div>\n          </TabsContent>\n        </Tabs>\n      </section>\n\n      <!-- RIGHT COLUMN: BREAKING CHANGE LINTER & VALIDATION ENGINE (55% -> lg:col-span-7) -->\n      <section class=\"bg-card flex flex-col space-y-6 p-4 sm:p-5 lg:col-span-7\">\n        <!-- Linter Section Header -->\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <ShieldCheck class=\"text-primary size-4\" />\n              <h3 class=\"text-sm font-semibold\">Breaking Change Linter & Validation Engine</h3>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              Automated schema drift detection and backward compatibility verification\n            </p>\n          </div>\n\n          <!-- Linter Action Controls -->\n          <div class=\"flex items-center gap-2\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-7 gap-1.5 text-xs font-medium\"\n              :disabled=\"isRunningLinter\"\n              @click=\"handleRunLinter\"\n            >\n              <RefreshCw class=\"size-3\" :class=\"{ 'animate-spin': isRunningLinter }\" />\n              <span>{{ isRunningLinter ? 'Linting...' : 'Re-run Linter' }}</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Linter Filters & Summary Bar -->\n        <div\n          class=\"border-border/70 bg-muted/20 flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"[\n                'h-7 px-2.5 text-xs font-medium',\n                selectedLinterFilter === 'all'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]\"\n              @click=\"selectedLinterFilter = 'all'\"\n            >\n              All Rules ({{ lintRules.length }})\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"[\n                'h-7 px-2.5 text-xs font-medium',\n                selectedLinterFilter === 'breaking'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]\"\n              @click=\"selectedLinterFilter = 'breaking'\"\n            >\n              Breaking Invariants (2)\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"[\n                'h-7 px-2.5 text-xs font-medium',\n                selectedLinterFilter === 'compatibility'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]\"\n              @click=\"selectedLinterFilter = 'compatibility'\"\n            >\n              Compatibility (2)\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"[\n                'h-7 px-2.5 text-xs font-medium',\n                selectedLinterFilter === 'compliance'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]\"\n              @click=\"selectedLinterFilter = 'compliance'\"\n            >\n              Compliance & PII (2)\n            </Button>\n          </div>\n\n          <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success font-mono text-xs font-semibold\">\n            {{ passingRulesCount }}/{{ lintRules.length }} Passing (100%)\n          </Badge>\n        </div>\n\n        <!-- LIVE BREAKING CHANGE TEST RUNNER CARDS -->\n        <div class=\"space-y-2.5\">\n          <div\n            v-for=\"rule in filteredLintRules\"\n            :key=\"rule.id\"\n            class=\"border-border bg-card/60 hover:bg-muted/20 rounded-lg border p-3 transition-colors\"\n          >\n            <div class=\"flex items-start justify-between gap-3\">\n              <div class=\"flex items-start gap-2.5\">\n                <div class=\"mt-0.5\">\n                  <CheckCircle2 v-if=\"rule.status === 'pass'\" class=\"text-success size-4\" />\n                  <AlertTriangle v-else-if=\"rule.status === 'warn'\" class=\"text-warning size-4\" />\n                  <AlertCircle v-else class=\"text-destructive size-4\" />\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <span class=\"text-foreground font-mono text-xs font-bold\">{{ rule.name }}</span>\n                    <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\">\n                      {{ rule.categoryLabel }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    {{ rule.ruleDefinition }}\n                  </p>\n                  <div\n                    class=\"border-border/60 bg-muted/40 text-muted-foreground inline-flex items-center gap-1.5 rounded px-2 py-0.5 font-mono text-xs\"\n                  >\n                    <Terminal class=\"text-info size-3\" />\n                    <span>{{ rule.assertionPath }}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"flex shrink-0 flex-col items-end gap-1\">\n                <Badge\n                  :variant=\"rule.status === 'pass' ? 'outline' : 'destructive'\"\n                  class=\"border-success/30 bg-success/10 text-success font-mono text-xs font-bold\"\n                >\n                  PASS\n                </Badge>\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ rule.executionDuration }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <Separator class=\"my-2\" />\n\n        <!-- ACTIVE CONSUMERS LIST -->\n        <div class=\"space-y-3\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <h4 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Registered Downstream Consumers ({{ consumerServices.length }})\n              </h4>\n              <p class=\"text-muted-foreground text-xs\">\n                Active consumer services subscribing to topic\n                <code class=\"text-foreground font-mono\">{{ destinationTopic }}</code>\n              </p>\n            </div>\n\n            <!-- Consumer Search Input -->\n            <div class=\"relative w-full sm:w-56\">\n              <Search class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n              <Input v-model=\"consumerSearch\" placeholder=\"Filter consumers...\" class=\"h-7 pl-8 font-mono text-xs\" />\n            </div>\n          </div>\n\n          <!-- Consumers Table -->\n          <div class=\"border-border bg-card overflow-hidden rounded-lg border\">\n            <Table>\n              <TableHeader class=\"bg-muted/40\">\n                <TableRow class=\"hover:bg-transparent\">\n                  <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\"\n                    >Consumer Service</TableHead\n                  >\n                  <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\"\n                    >Subscribed Ver</TableHead\n                  >\n                  <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\"\n                    >Throughput & SLA</TableHead\n                  >\n                  <TableHead class=\"text-muted-foreground h-8 font-mono text-xs font-semibold\">Compatibility</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody class=\"font-mono text-xs\">\n                <TableRow v-for=\"consumer in filteredConsumers\" :key=\"consumer.id\" class=\"hover:bg-muted/30\">\n                  <TableCell class=\"py-2.5\">\n                    <div class=\"space-y-0.5\">\n                      <div class=\"text-foreground font-bold\">{{ consumer.name }}</div>\n                      <div class=\"text-muted-foreground text-xs\">{{ consumer.team }} · {{ consumer.contact }}</div>\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"py-2.5\">\n                    <Badge\n                      :variant=\"consumer.versionStatus === 'current' ? 'secondary' : 'outline'\"\n                      class=\"font-mono text-xs\"\n                    >\n                      {{ consumer.versionSubscribed }}\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"py-2.5\">\n                    <div class=\"space-y-0.5\">\n                      <div class=\"text-foreground font-medium\">{{ consumer.throughput }}</div>\n                      <div class=\"text-success text-xs\">p99: {{ consumer.latencyP99 }} (OK)</div>\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"py-2.5\">\n                    <Badge\n                      variant=\"outline\"\n                      class=\"border-success/30 bg-success/10 text-success font-mono text-xs font-medium\"\n                    >\n                      <Check class=\"text-success size-3\" />\n                      {{ consumer.compatibility }}\n                    </Badge>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      </section>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DataContractGovernance.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/input.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/tabs.json"
  ],
  "description": "PayPal and OpenDataContract style Data Contracts specification editor, breaking change validator, and producer/consumer SLA agreements dashboard with YAML inspector, schema field explorer, live breaking change linter, and registered consumer status.",
  "categories": [
    "devops",
    "dashboard",
    "app",
    "data"
  ]
}