{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-mesh-domain-catalog",
  "title": "Data Mesh Domain Catalog",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/data-mesh-domain-catalog/DataMeshDomainCatalog.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Activity,\n  Copy,\n  CreditCard,\n  Database,\n  Eye,\n  FileCode2,\n  HardDrive,\n  KeyRound,\n  Layers,\n  MoreHorizontal,\n  Network,\n  Plus,\n  Search,\n  ShieldCheck,\n  Table2,\n  Terminal,\n  Truck,\n  Users,\n  Zap,\n} from 'lucide-react'\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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Progress } from '@/components/ui/progress'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { DataMeshProductDetail } from './DataMeshProductDetail'\nimport { DataMeshQueryRunner } from './DataMeshQueryRunner'\nimport { DataMeshModals } from './DataMeshModals'\nimport { DOMAINS, DATA_PRODUCTS } from './data-mesh-data'\nimport type {\n  DomainMeta,\n  OutputPortSchemaColumn,\n  OutputPortDetails,\n  DataProductItem,\n  DataMeshPortId,\n} from './data-mesh-types'\n\nexport type { DomainMeta, OutputPortSchemaColumn, OutputPortDetails, DataProductItem, DataMeshPortId }\n\nexport interface DataMeshDomainCatalogProps {\n  className?: string\n  initialSelectedProductId?: string\n  initialDomainFilter?: string\n}\n\nexport function DataMeshDomainCatalog({\n  className,\n  initialSelectedProductId = 'dp_customer_360_profile',\n  initialDomainFilter = 'all',\n}: DataMeshDomainCatalogProps) {\n  const domains = DOMAINS\n  const dataProducts = DATA_PRODUCTS\n\n  const [selectedDomainFilter, setSelectedDomainFilter] = React.useState<string>(initialDomainFilter)\n  const [selectedPortTypeFilter, setSelectedPortTypeFilter] = React.useState<string>('all')\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [selectedProductId, setSelectedProductId] = React.useState<string>(initialSelectedProductId)\n  const [activePortId, setActivePortId] = React.useState<DataMeshPortId>('snowflake')\n  const [copiedUri, setCopiedUri] = React.useState<string | null>(null)\n\n  // Modals & drawer state\n  const [isAccessModalOpen, setIsAccessModalOpen] = React.useState(false)\n  const [isRegisterModalOpen, setIsRegisterModalOpen] = React.useState(false)\n  const [isQueryDrawerOpen, setIsQueryDrawerOpen] = React.useState(false)\n  const [isSimulatingQuery, setIsSimulatingQuery] = React.useState(false)\n\n  const selectedProduct = React.useMemo(() => {\n    return dataProducts.find((p) => p.id === selectedProductId) || dataProducts[0]\n  }, [dataProducts, selectedProductId])\n\n  const activePort = React.useMemo(() => {\n    const currentPorts = selectedProduct.ports\n    return currentPorts.find((p) => p.id === activePortId) || currentPorts[0]\n  }, [selectedProduct, activePortId])\n\n  const filteredDataProducts = React.useMemo(() => {\n    return dataProducts.filter((product) => {\n      if (selectedDomainFilter !== 'all' && product.domainId !== selectedDomainFilter) {\n        return false\n      }\n      if (selectedPortTypeFilter !== 'all') {\n        const hasPort = product.ports.some((p) => p.id === selectedPortTypeFilter)\n        if (!hasPort) return false\n      }\n      if (searchQuery.trim()) {\n        const q = searchQuery.toLowerCase()\n        const matchName = product.name.toLowerCase().includes(q)\n        const matchDisplay = product.displayName.toLowerCase().includes(q)\n        const matchDomain = product.domainName.toLowerCase().includes(q)\n        const matchOwner = product.owner.name.toLowerCase().includes(q)\n        const matchDesc = product.description.toLowerCase().includes(q)\n        if (!matchName && !matchDisplay && !matchDomain && !matchOwner && !matchDesc) {\n          return false\n        }\n      }\n      return true\n    })\n  }, [dataProducts, selectedDomainFilter, selectedPortTypeFilter, searchQuery])\n\n  const selectDomain = (domainId: string) => {\n    if (selectedDomainFilter === domainId) {\n      setSelectedDomainFilter('all')\n    } else {\n      setSelectedDomainFilter(domainId)\n    }\n  }\n\n  const selectProduct = (product: DataProductItem) => {\n    setSelectedProductId(product.id)\n    if (product.ports.length > 0) {\n      setActivePortId(product.ports[0].id)\n    }\n  }\n\n  const copyToClipboard = (text: string, identifier: string) => {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(text)\n      setCopiedUri(identifier)\n      setTimeout(() => {\n        setCopiedUri(null)\n      }, 2000)\n    }\n  }\n\n  const runSimulatedQuery = () => {\n    setIsSimulatingQuery(true)\n    setTimeout(() => {\n      setIsSimulatingQuery(false)\n    }, 1000)\n  }\n\n  const handleOpenAccessModal = (product: DataProductItem) => {\n    selectProduct(product)\n    setIsAccessModalOpen(true)\n  }\n\n  const handleOpenQueryRunner = (product: DataProductItem) => {\n    selectProduct(product)\n    setIsQueryDrawerOpen(true)\n  }\n\n  return (\n    <div\n      data-slot=\"data-mesh-domain-catalog\"\n      className={cn(\n        'bg-background text-foreground border-border w-full space-y-6 rounded-xl border p-4 shadow-xs sm:p-6',\n        className,\n      )}\n    >\n      {/* Header Section */}\n      <header className=\"border-border bg-card/70 rounded-xl border p-4 sm:p-5\">\n        <div className=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n          <div className=\"space-y-2\">\n            {/* Top Row: Org Breadcrumb & Governance Status */}\n            <div className=\"flex flex-wrap items-center gap-2 text-xs\">\n              <div className=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-md\">\n                <Network className=\"size-3.5\" />\n              </div>\n              <span className=\"text-foreground font-semibold\">UIPKGE Global Data Mesh</span>\n              <span className=\"text-muted-foreground font-mono\">4 Core Domains</span>\n              <div className=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium\">\n                <span className=\"relative flex size-2\">\n                  <span className=\"bg-success absolute inline-flex size-full rounded-full opacity-75\" />\n                  <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n                </span>\n                <ShieldCheck className=\"text-success size-3.5\" />\n                <span>Federated Computational Governance Active</span>\n              </div>\n            </div>\n\n            {/* Main Title */}\n            <h1 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n              Data Mesh Domain Catalog & Data Products Directory\n            </h1>\n            <p className=\"text-muted-foreground max-w-3xl text-xs leading-relaxed sm:text-sm\">\n              Zhamak Dehghani architectural architecture for decentralized domain data ownership, discoverable polyglot\n              output ports, and automated computational governance SLA scorecards.\n            </p>\n          </div>\n\n          {/* Header Action Button */}\n          <div className=\"flex shrink-0 items-center gap-2 pt-1 lg:pt-0\">\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              className=\"h-9 gap-1.5 text-xs font-medium\"\n              onClick={() => setIsRegisterModalOpen(true)}\n            >\n              <Plus className=\"size-3.5\" />\n              <span>Register New Data Product</span>\n            </Button>\n          </div>\n        </div>\n      </header>\n\n      {/* 4 Domain Summary Cards */}\n      <section className=\"space-y-3\">\n        <div className=\"flex items-center justify-between gap-x-2 px-1\">\n          <div className=\"flex items-center gap-2\">\n            <Layers className=\"text-primary size-4\" />\n            <h2 className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n              Decentralized Domain Nodes (4)\n            </h2>\n          </div>\n          <span className=\"text-muted-foreground text-xs\">Click a domain card to filter Data Products</span>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n          {domains.map((domain) => (\n            <div\n              key={domain.id}\n              className={cn(\n                'group relative cursor-pointer space-y-3 rounded-xl border p-4 text-xs shadow-xs transition-colors',\n                selectedDomainFilter === domain.id\n                  ? 'border-primary bg-primary/5 ring-primary/30 ring-1'\n                  : 'border-border bg-card hover:border-border/80 hover:bg-muted/30',\n              )}\n              onClick={() => selectDomain(domain.id)}\n            >\n              {/* Domain Card Header */}\n              <div className=\"flex items-start justify-between gap-2\">\n                <div className=\"flex items-center gap-2.5\">\n                  <div className=\"bg-muted border-border/80 flex size-8 shrink-0 items-center justify-center rounded-lg border\">\n                    {domain.iconName === 'CreditCard' && <CreditCard className=\"text-chart-1 size-4\" />}\n                    {domain.iconName === 'Users' && <Users className=\"text-info size-4\" />}\n                    {domain.iconName === 'Truck' && <Truck className=\"text-warning size-4\" />}\n                    {domain.iconName === 'Activity' && <Activity className=\"text-success size-4\" />}\n                  </div>\n                  <div>\n                    <h3 className=\"text-foreground leading-tight font-semibold\">{domain.name}</h3>\n                    <span className=\"text-muted-foreground text-xs\">{domain.productsCount} Data Products</span>\n                  </div>\n                </div>\n\n                <Badge\n                  variant={selectedDomainFilter === domain.id ? 'default' : 'secondary'}\n                  className=\"shrink-0 font-mono text-xs\"\n                >\n                  {selectedDomainFilter === domain.id ? 'Filtered' : `${domain.slaScore}% SLA`}\n                </Badge>\n              </div>\n\n              {/* Domain Description */}\n              <p className=\"text-muted-foreground line-clamp-2 leading-relaxed\">{domain.description}</p>\n\n              {/* Domain Meta & Operational Metrics */}\n              <div className=\"border-border/60 grid grid-cols-2 gap-2 border-t pt-2.5 text-xs\">\n                <div>\n                  <span className=\"text-muted-foreground block\">Storage Vol</span>\n                  <span className=\"text-foreground font-mono font-medium\">{domain.storageVolume}</span>\n                </div>\n                <div>\n                  <span className=\"text-muted-foreground block\">Throughput</span>\n                  <span className=\"text-foreground font-mono font-medium\">{domain.throughput}</span>\n                </div>\n              </div>\n\n              {/* Domain Lead Info */}\n              <div className=\"bg-muted/50 flex items-center justify-between gap-x-2 rounded-lg px-2.5 py-1.5\">\n                <div className=\"flex items-center gap-1.5 overflow-hidden\">\n                  <Avatar className=\"size-4.5 shrink-0\">\n                    <AvatarFallback className=\"text-xs\">\n                      {domain.lead\n                        .split(' ')\n                        .map((n) => n[0])\n                        .join('')}\n                    </AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground truncate font-medium\">{domain.lead}</span>\n                </div>\n                <span className=\"text-muted-foreground shrink-0 font-mono text-xs\">\n                  {domain.activeConsumers} clients\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      {/* Data Products Table Section */}\n      <section className=\"border-border bg-card space-y-4 rounded-xl border p-4 shadow-xs sm:p-5\">\n        {/* Toolbar: Title, Search, Port Type Selector */}\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"space-y-0.5\">\n            <div className=\"flex items-center gap-2\">\n              <Database className=\"text-primary size-4\" />\n              <h2 className=\"text-foreground text-sm font-semibold\">Data Products Catalog</h2>\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                {filteredDataProducts.length} / {dataProducts.length}\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">\n              Autonomous product quantum nodes adhering to computational policies and explicit input/output schemas.\n            </p>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-2\">\n            {/* Port Filter Selector */}\n            <div className=\"flex items-center gap-1.5\">\n              <span className=\"text-muted-foreground text-xs font-medium\">Output:</span>\n              <select\n                value={selectedPortTypeFilter}\n                onChange={(e) => setSelectedPortTypeFilter(e.target.value)}\n                className=\"border-border bg-background text-foreground focus-visible:ring-ring h-8 rounded-md border px-2.5 text-xs outline-none focus-visible:ring-1\"\n              >\n                <option value=\"all\">All Ports</option>\n                <option value=\"snowflake\">Snowflake View</option>\n                <option value=\"kafka\">Kafka Stream</option>\n                <option value=\"graphql\">GraphQL Mesh</option>\n                <option value=\"s3\">S3 Delta Lake</option>\n              </select>\n            </div>\n\n            {/* Search Input */}\n            <div className=\"relative w-full sm:w-56\">\n              <Search className=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n              <input\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder=\"Search product, owner, domain...\"\n                className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border pr-3 pl-8 text-xs outline-none focus-visible:ring-1\"\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Main Data Products Table */}\n        <div className=\"border-border overflow-x-auto rounded-lg border\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"bg-muted/40\">\n                <TableHead className=\"text-xs\">Data Product & Contract</TableHead>\n                <TableHead className=\"text-xs\">Domain Node</TableHead>\n                <TableHead className=\"text-xs\">Freshness SLA</TableHead>\n                <TableHead className=\"text-xs\">Active Output Ports</TableHead>\n                <TableHead className=\"text-xs\">Consumers & Traffic</TableHead>\n                <TableHead className=\"text-right text-xs\">Actions</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {filteredDataProducts.map((product) => (\n                <TableRow\n                  key={product.id}\n                  className={cn(\n                    'hover:bg-muted/50 cursor-pointer transition-colors',\n                    selectedProductId === product.id && 'bg-primary/5 font-medium',\n                  )}\n                  onClick={() => selectProduct(product)}\n                >\n                  {/* Name & Contract */}\n                  <TableCell className=\"py-3\">\n                    <div className=\"space-y-1\">\n                      <div className=\"flex items-center gap-2\">\n                        <span className=\"text-foreground font-semibold\">{product.displayName}</span>\n                        <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                          v{product.version}\n                        </Badge>\n                      </div>\n                      <div className=\"flex items-center gap-1.5 text-xs\">\n                        <code className=\"text-muted-foreground font-mono\">{product.name}</code>\n                        <span className=\"text-muted-foreground/40\">·</span>\n                        <Badge\n                          variant={\n                            product.classification === 'PII-Confidential'\n                              ? 'destructive'\n                              : product.classification === 'Financial-Audit'\n                                ? 'default'\n                                : 'secondary'\n                          }\n                          className=\"text-xs\"\n                        >\n                          {product.classification}\n                        </Badge>\n                      </div>\n                    </div>\n                  </TableCell>\n\n                  {/* Domain Node & Owner */}\n                  <TableCell className=\"py-3\">\n                    <div className=\"space-y-1\">\n                      <span className=\"text-foreground text-xs font-medium\">{product.domainName}</span>\n                      <div className=\"flex items-center gap-1.5\">\n                        <Avatar className=\"size-4 shrink-0\">\n                          <AvatarFallback className=\"text-xs\">{product.owner.initials}</AvatarFallback>\n                        </Avatar>\n                        <span className=\"text-muted-foreground text-xs\">{product.owner.name}</span>\n                      </div>\n                    </div>\n                  </TableCell>\n\n                  {/* SLA & Quality Telemetry */}\n                  <TableCell className=\"py-3\">\n                    <div className=\"w-36 space-y-1.5\">\n                      <div className=\"flex items-center justify-between text-xs\">\n                        <span className=\"text-muted-foreground font-mono\">SLA Score</span>\n                        <span className=\"text-success font-mono font-semibold\">{{ product }.product.slaScore}%</span>\n                      </div>\n                      <Progress value={product.slaScore} className=\"h-1.5\" />\n                      <div className=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                        <span>Latency: {product.freshnessLatency}</span>\n                        <span>\n                          {product.assertionsPassed}/{product.assertionsTotal} Checks\n                        </span>\n                      </div>\n                    </div>\n                  </TableCell>\n\n                  {/* Active Output Ports Badges */}\n                  <TableCell className=\"py-3\">\n                    <div className=\"flex flex-wrap gap-1.5\">\n                      {product.ports.map((port) => (\n                        <Badge\n                          key={port.id}\n                          variant={\n                            port.id === activePortId && selectedProductId === product.id ? 'default' : 'secondary'\n                          }\n                          className=\"h-6 gap-1 font-mono text-xs\"\n                        >\n                          {port.id === 'snowflake' && <Table2 className=\"text-info size-3\" />}\n                          {port.id === 'kafka' && <Zap className=\"text-warning size-3\" />}\n                          {port.id === 'graphql' && <Network className=\"size-3 text-pink-400\" />}\n                          {port.id === 's3' && <HardDrive className=\"text-success size-3\" />}\n                          <span>{port.id.toUpperCase()}</span>\n                        </Badge>\n                      ))}\n                    </div>\n                  </TableCell>\n\n                  {/* Consumers & Volume */}\n                  <TableCell className=\"py-3\">\n                    <div className=\"space-y-0.5 text-xs\">\n                      <div className=\"flex items-center gap-1 text-xs\">\n                        <Users className=\"text-muted-foreground size-3\" />\n                        <span className=\"text-foreground font-semibold\">{product.activeConsumersCount}</span>\n                        <span className=\"text-muted-foreground\">registered apps</span>\n                      </div>\n                      <p className=\"text-muted-foreground truncate font-mono text-xs\">\n                        {product.topConsumers.slice(0, 2).join(', ')}\n                      </p>\n                    </div>\n                  </TableCell>\n\n                  {/* Row Action Dropdown */}\n                  <TableCell className=\"py-3 text-right\" onClick={(e) => e.stopPropagation()}>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"ghost\" size=\"sm\" className=\"size-8 p-0\">\n                          <MoreHorizontal className=\"size-4\" />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-48 text-xs\">\n                        <DropdownMenuLabel className=\"text-xs\">Product Actions</DropdownMenuLabel>\n                        <DropdownMenuItem className=\"cursor-pointer gap-2\" onClick={() => selectProduct(product)}>\n                          <Eye className=\"size-3.5\" />\n                          <span>View Specifications</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem\n                          className=\"cursor-pointer gap-2\"\n                          onClick={() => handleOpenQueryRunner(product)}\n                        >\n                          <Terminal className=\"text-primary size-3.5\" />\n                          <span>Interactive Query Runner</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem\n                          className=\"cursor-pointer gap-2\"\n                          onClick={() => handleOpenAccessModal(product)}\n                        >\n                          <KeyRound className=\"text-warning size-3.5\" />\n                          <span>Request Consumer Access</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem\n                          className=\"cursor-pointer gap-2\"\n                          onClick={() => copyToClipboard(product.ports[0]?.uri || '', product.id)}\n                        >\n                          <Copy className=\"size-3.5\" />\n                          <span>Copy Primary Port URI</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem\n                          className=\"cursor-pointer gap-2\"\n                          onClick={() => copyToClipboard(product.contractHash, product.contractHash)}\n                        >\n                          <FileCode2 className=\"text-chart-2 size-3.5\" />\n                          <span>Copy Contract Hash</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      </section>\n\n      {/* Data Product Output Port Architecture & Governance Card (Selected Product) */}\n      <DataMeshProductDetail\n        product={selectedProduct}\n        port={activePort}\n        activePortId={activePortId}\n        copiedKey={copiedUri}\n        onPortChange={(id) => setActivePortId(id)}\n        onCopy={copyToClipboard}\n        onRequestAccess={handleOpenAccessModal}\n        onRunQuery={handleOpenQueryRunner}\n      />\n\n      {/* Interactive Drawer / Modal: Query Output Port */}\n      <DataMeshQueryRunner\n        open={isQueryDrawerOpen}\n        product={selectedProduct}\n        port={activePort}\n        isSimulatingQuery={isSimulatingQuery}\n        onClose={() => setIsQueryDrawerOpen(false)}\n        onRunQuery={runSimulatedQuery}\n      />\n\n      {/* Modals: Request Access & Register Product */}\n      <DataMeshModals\n        accessModalOpen={isAccessModalOpen}\n        onAccessModalOpenChange={setIsAccessModalOpen}\n        registerModalOpen={isRegisterModalOpen}\n        onRegisterModalOpenChange={setIsRegisterModalOpen}\n        product={selectedProduct}\n        domains={domains}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DataMeshDomainCatalog.tsx"
    },
    {
      "path": "packages/registry-react/blocks/data-mesh-domain-catalog/DataMeshProductDetail.tsx",
      "content": "import * as React from 'react'\nimport {\n  Boxes,\n  Check,\n  Copy,\n  Database,\n  FileCode2,\n  HardDrive,\n  KeyRound,\n  Network,\n  Package,\n  Radio,\n  Server,\n  ShieldCheck,\n  Terminal,\n  Users,\n  Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { DataProductItem, OutputPortDetails, DataMeshPortId } from './data-mesh-types'\n\nexport type { DataMeshPortId }\n\nexport interface DataMeshProductDetailProps {\n  product: DataProductItem\n  port: OutputPortDetails\n  activePortId: DataMeshPortId\n  copiedKey: string | null\n  onPortChange: (id: DataMeshPortId) => void\n  onCopy: (text: string, identifier: string) => void\n  onRequestAccess: (product: DataProductItem) => void\n  onRunQuery: (product: DataProductItem) => void\n}\n\nexport function DataMeshProductDetail({\n  product,\n  port,\n  activePortId,\n  copiedKey,\n  onPortChange,\n  onCopy,\n  onRequestAccess,\n  onRunQuery,\n}: DataMeshProductDetailProps) {\n  return (\n    <section className=\"border-border bg-card/60 space-y-6 rounded-xl border p-4 sm:p-6\">\n      {/* Section Header with Selected Product Meta */}\n      <div className=\"border-border/80 flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between\">\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <div className=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-md\">\n              <Boxes className=\"size-3.5\" />\n            </div>\n            <span className=\"text-muted-foreground font-mono text-xs\">Inspecting Quantum Architecture:</span>\n            <h2 className=\"text-foreground font-mono text-base font-bold break-all sm:text-lg\">{product.name}</h2>\n            <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n              {product.version}\n            </Badge>\n            <Badge variant=\"outline\" className=\"font-mono text-xs\">\n              {product.domainName}\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-xs sm:text-sm\">{product.description}</p>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {/* Contract Hash copy pill */}\n          <div className=\"border-border bg-background inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs\">\n            <span className=\"text-muted-foreground font-mono\">Contract:</span>\n            <span className=\"text-foreground font-mono\">{product.contractHash.slice(0, 16)}...</span>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-5 px-1 text-xs\"\n              onClick={() => onCopy(product.contractHash, 'hash')}\n            >\n              {copiedKey === 'hash' ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n            </Button>\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-8.5 gap-1.5 text-xs\"\n            onClick={() => onRequestAccess(product)}\n          >\n            <KeyRound className=\"text-warning size-3.5\" />\n            <span>Request Port Access</span>\n          </Button>\n\n          <Button variant=\"default\" size=\"sm\" className=\"h-8.5 gap-1.5 text-xs\" onClick={() => onRunQuery(product)}>\n            <Terminal className=\"size-3.5\" />\n            <span>Run Port Query</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* 4 Core Pillars of Data Mesh Architecture Banner */}\n      <div className=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-4\">\n        <div className=\"border-border bg-background/80 space-y-1 rounded-lg border p-3 text-xs\">\n          <div className=\"text-primary flex items-center gap-1.5 font-semibold\">\n            <Users className=\"size-3.5\" />\n            <span>1. Domain Ownership</span>\n          </div>\n          <p className=\"text-muted-foreground text-xs leading-relaxed\">\n            Autonomous squad accountability: <span className=\"text-foreground font-medium\">{product.owner.name}</span> (\n            {product.owner.team}).\n          </p>\n        </div>\n\n        <div className=\"border-border bg-background/80 space-y-1 rounded-lg border p-3 text-xs\">\n          <div className=\"text-success flex items-center gap-1.5 font-semibold\">\n            <Package className=\"size-3.5\" />\n            <span>2. Data as a Product</span>\n          </div>\n          <p className=\"text-muted-foreground text-xs leading-relaxed\">\n            Standardized contract with{' '}\n            <span className=\"text-foreground font-mono font-medium\">{product.slaScore}% SLA</span> and automated test\n            assertions.\n          </p>\n        </div>\n\n        <div className=\"border-border bg-background/80 space-y-1 rounded-lg border p-3 text-xs\">\n          <div className=\"text-info flex items-center gap-1.5 font-semibold\">\n            <Server className=\"size-3.5\" />\n            <span>3. Self-Serve Platform</span>\n          </div>\n          <p className=\"text-muted-foreground text-xs leading-relaxed\">\n            Polyglot multi-modal output endpoints: SQL, Event Stream, API & Parquet Lake.\n          </p>\n        </div>\n\n        <div className=\"border-border bg-background/80 space-y-1 rounded-lg border p-3 text-xs\">\n          <div className=\"text-warning flex items-center gap-1.5 font-semibold\">\n            <ShieldCheck className=\"size-3.5\" />\n            <span>4. Computational Gov</span>\n          </div>\n          <p className=\"text-muted-foreground text-xs leading-relaxed\">\n            Policy-as-code OPA masking, SOC2 audit trail & automated RBAC grants.\n          </p>\n        </div>\n      </div>\n\n      {/* Output Ports Multi-Modal Tabs */}\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <Radio className=\"text-primary size-4\" />\n            <h3 className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n              Output Ports & Endpoints ({product.ports.length})\n            </h3>\n          </div>\n\n          {/* Port selector tabs */}\n          <div className=\"border-border bg-muted/60 inline-flex items-center gap-1 rounded-lg border p-1\">\n            {product.ports.map((p) => (\n              <button\n                key={p.id}\n                type=\"button\"\n                className={cn(\n                  'inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',\n                  activePortId === p.id\n                    ? 'bg-background text-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => onPortChange(p.id)}\n              >\n                {p.id === 'snowflake' && <Database className=\"text-info size-3.5\" />}\n                {p.id === 'kafka' && <Zap className=\"text-warning size-3.5\" />}\n                {p.id === 'graphql' && <Network className=\"text-chart-1 size-3.5\" />}\n                {p.id === 's3' && <HardDrive className=\"text-success size-3.5\" />}\n                <span>{p.name}</span>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Active Port Deep Inspector Container */}\n        <div className=\"border-border bg-background space-y-4 rounded-xl border p-4 sm:p-5\">\n          {/* Port Meta Bar */}\n          <div className=\"border-border/80 flex flex-col gap-3 border-b pb-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"space-y-1\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"text-foreground font-mono text-sm font-bold\">{port.name}</span>\n                <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                  {port.protocol}\n                </Badge>\n                <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                  {port.accessRole}\n                </Badge>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-muted-foreground text-xs\">Port Endpoint URI:</span>\n                <code className=\"bg-muted text-foreground border-border/60 rounded border px-2 py-0.5 font-mono text-xs\">\n                  {port.uri}\n                </code>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"h-6 px-1.5 text-xs\"\n                  onClick={() => onCopy(port.uri, port.uri)}\n                >\n                  {copiedKey === port.uri ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span className=\"ml-1 font-mono text-xs\">{copiedKey === port.uri ? 'Copied' : 'Copy'}</span>\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n              {port.throughput && (\n                <span className=\"border-border bg-muted/40 text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs\">\n                  Throughput: <strong className=\"text-foreground\">{port.throughput}</strong>\n                </span>\n              )}\n              {port.rateLimit && (\n                <span className=\"border-border bg-muted/40 text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs\">\n                  Limit: <strong className=\"text-foreground\">{port.rateLimit}</strong>\n                </span>\n              )}\n            </div>\n          </div>\n\n          {/* Port Schema Dictionary (If Columns Defined) */}\n          {port.columns && port.columns.length > 0 && (\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-foreground text-xs font-semibold\">Schema Column Definitions & Constraints</span>\n                <span className=\"text-muted-foreground font-mono text-xs\">\n                  {port.columns.length} columns registered\n                </span>\n              </div>\n\n              <div className=\"border-border bg-card overflow-hidden rounded-lg border\">\n                <Table>\n                  <TableHeader>\n                    <TableRow className=\"bg-muted/40 hover:bg-muted/40\">\n                      <TableHead className=\"text-xs font-semibold\">Column Name</TableHead>\n                      <TableHead className=\"text-xs font-semibold\">Data Type</TableHead>\n                      <TableHead className=\"text-xs font-semibold\">Nullability</TableHead>\n                      <TableHead className=\"text-xs font-semibold\">Constraint</TableHead>\n                      <TableHead className=\"text-xs font-semibold\">Description</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {port.columns.map((col) => (\n                      <TableRow key={col.name} className=\"font-mono text-xs\">\n                        <TableCell className=\"text-foreground font-bold\">\n                          <div className=\"flex items-center gap-1.5\">\n                            {col.isKey && <KeyRound className=\"text-warning size-3.5\" />}\n                            <span>{col.name}</span>\n                          </div>\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\" className=\"font-mono text-xs font-normal\">\n                            {col.type}\n                          </Badge>\n                        </TableCell>\n                        <TableCell>\n                          <span className={col.nullable ? 'text-muted-foreground' : 'text-foreground font-semibold'}>\n                            {col.nullable ? 'NULLABLE' : 'NOT NULL'}\n                          </span>\n                        </TableCell>\n                        <TableCell>\n                          {col.constraints ? (\n                            <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                              {col.constraints}\n                            </Badge>\n                          ) : (\n                            <span className=\"text-muted-foreground\">—</span>\n                          )}\n                        </TableCell>\n                        <TableCell className=\"text-muted-foreground font-sans\">{col.desc}</TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n          )}\n\n          {/* Port Code / Sample Payload Explorer */}\n          {(port.sampleQuery || port.samplePayload) && (\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <div className=\"flex items-center gap-2\">\n                  <FileCode2 className=\"text-primary size-3.5\" />\n                  <span className=\"text-foreground text-xs font-semibold\">\n                    {port.sampleQuery ? 'Sample Query / Contract Call' : 'Event Message Payload Schema'}\n                  </span>\n                </div>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"h-7 gap-1 font-mono text-xs\"\n                  onClick={() => onCopy(port.sampleQuery || port.samplePayload || '', 'code')}\n                >\n                  {copiedKey === 'code' ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span>{copiedKey === 'code' ? 'Copied' : 'Copy Code'}</span>\n                </Button>\n              </div>\n\n              <div className=\"overflow-x-auto rounded-lg bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-100 dark:bg-neutral-950\">\n                <pre className=\"whitespace-pre\">\n                  <code>{port.sampleQuery || port.samplePayload}</code>\n                </pre>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Federated Computational Governance SLA Scorecard & Compliance Matrix */}\n      <div className=\"space-y-3 pt-2\">\n        <div className=\"flex items-center gap-2\">\n          <ShieldCheck className=\"text-success size-4\" />\n          <h3 className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n            Federated Governance SLA Scorecard & Policy Rules\n          </h3>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n          {/* Scorecard Metrics */}\n          <div className=\"border-border bg-background space-y-3 rounded-lg border p-4 text-xs\">\n            <span className=\"text-foreground border-border/60 block border-b pb-1.5 font-semibold\">\n              Service Level Objectives (SLOs)\n            </span>\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">SLA Availability:</span>\n                <span className=\"text-success font-mono font-bold\">{product.uptime}</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Freshness Latency:</span>\n                <span className=\"text-foreground font-mono font-medium\">{product.freshnessLatency}</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Quality Check Assertions:</span>\n                <span className=\"text-foreground text-success font-mono font-medium\">\n                  {product.assertionsPassed}/{product.assertionsTotal} Passing\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Data Classification:</span>\n                <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                  {product.classification}\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          {/* Policy-as-Code Engine */}\n          <div className=\"border-border bg-background space-y-2.5 rounded-lg border p-4 text-xs lg:col-span-2\">\n            <span className=\"text-foreground border-border/60 block border-b pb-1.5 font-semibold\">\n              Active Computational Governance Policies (Policy-as-Code)\n            </span>\n            <div className=\"space-y-2\">\n              {product.governancePolicies.map((policy, idx) => (\n                <div\n                  key={idx}\n                  className=\"border-border/70 bg-muted/30 flex items-start gap-2.5 rounded-md border p-2.5\"\n                >\n                  <div className=\"bg-success/10 text-success mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full\">\n                    <Check className=\"size-2.5\" />\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">{policy}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DataMeshProductDetail.tsx"
    },
    {
      "path": "packages/registry-react/blocks/data-mesh-domain-catalog/DataMeshQueryRunner.tsx",
      "content": "import * as React from 'react'\nimport { RefreshCw, Terminal, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { DataProductItem, OutputPortDetails } from './data-mesh-types'\n\nexport interface DataMeshQueryRunnerProps {\n  open: boolean\n  product: DataProductItem\n  port: OutputPortDetails\n  isSimulatingQuery: boolean\n  onClose: () => void\n  onRunQuery: () => void\n}\n\nexport function DataMeshQueryRunner({\n  open,\n  product,\n  port,\n  isSimulatingQuery,\n  onClose,\n  onRunQuery,\n}: DataMeshQueryRunnerProps) {\n  if (!open) return null\n\n  return (\n    <div className=\"border-border bg-muted/30 overflow-hidden rounded-xl border transition-colors\">\n      <div className=\"border-border bg-card flex items-center justify-between gap-x-2 border-b px-4 py-2.5\">\n        <div className=\"flex items-center gap-2\">\n          <Terminal className=\"text-primary size-4\" />\n          <span className=\"text-foreground font-mono text-xs font-semibold\">\n            Interactive Query Runner · {product.name} ({port.name})\n          </span>\n          <Badge variant=\"outline\" className=\"font-mono text-xs\">\n            {port.protocol}\n          </Badge>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"default\"\n            size=\"sm\"\n            className=\"h-7 gap-1 text-xs\"\n            disabled={isSimulatingQuery}\n            onClick={onRunQuery}\n          >\n            <RefreshCw className={cn('size-3', isSimulatingQuery && 'animate-spin')} />\n            <span>{isSimulatingQuery ? 'Executing Query...' : 'Execute Run'}</span>\n          </Button>\n          <Button variant=\"ghost\" size=\"sm\" className=\"size-7 p-0\" onClick={onClose}>\n            <X className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"space-y-3 p-4\">\n        <div className=\"overflow-x-auto rounded-lg bg-neutral-950 p-3 font-mono text-xs text-neutral-100 dark:bg-neutral-950\">\n          <pre className=\"leading-relaxed whitespace-pre\">\n            <code>{port.sampleQuery || port.samplePayload}</code>\n          </pre>\n        </div>\n\n        {port.mockResults && (\n          <div className=\"border-border bg-card overflow-hidden rounded-lg border\">\n            <div className=\"border-border bg-muted/50 text-foreground flex items-center justify-between gap-x-2 border-b px-3 py-1.5 text-xs font-semibold\">\n              <span>Query Results Preview (3 Records returned in 42ms)</span>\n              <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                Snowflake XS Warehouse\n              </Badge>\n            </div>\n            <Table>\n              <TableHeader>\n                <TableRow className=\"bg-muted/30 hover:bg-muted/30\">\n                  {Object.keys(port.mockResults[0] || {}).map((key) => (\n                    <TableHead key={key} className=\"font-mono text-xs\">\n                      {key}\n                    </TableHead>\n                  ))}\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {port.mockResults.map((row, rIdx) => (\n                  <TableRow key={rIdx} className=\"font-mono text-xs\">\n                    {Object.entries(row).map(([valKey, val]) => (\n                      <TableCell key={valKey}>{String(val)}</TableCell>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DataMeshQueryRunner.tsx"
    },
    {
      "path": "packages/registry-react/blocks/data-mesh-domain-catalog/DataMeshModals.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { CheckCircle2, KeyRound, Plus, X } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport type { DataProductItem, DomainMeta } from './data-mesh-types'\n\nexport interface DataMeshModalsProps {\n  accessModalOpen: boolean\n  onAccessModalOpenChange: (open: boolean) => void\n  registerModalOpen: boolean\n  onRegisterModalOpenChange: (open: boolean) => void\n  product: DataProductItem\n  domains: DomainMeta[]\n}\n\nexport function DataMeshModals({\n  accessModalOpen,\n  onAccessModalOpenChange,\n  registerModalOpen,\n  onRegisterModalOpenChange,\n  product,\n  domains,\n}: DataMeshModalsProps) {\n  const [isAccessApproved, setIsAccessApproved] = React.useState(false)\n  const [isRegisterSuccess, setIsRegisterSuccess] = React.useState(false)\n\n  const [accessAppName, setAccessAppName] = React.useState('')\n  const [accessSquad, setAccessSquad] = React.useState('')\n  const [accessPort, setAccessPort] = React.useState('snowflake')\n  const [accessReason, setAccessReason] = React.useState('')\n\n  const [newProductName, setNewProductName] = React.useState('')\n  const [newProductDomain, setNewProductDomain] = React.useState('checkout-payments')\n  const [newProductDesc, setNewProductDesc] = React.useState('')\n  const [newProductOwner, setNewProductOwner] = React.useState('')\n  const [newProductTeam, setNewProductTeam] = React.useState('')\n  const [newProductClassification, setNewProductClassification] = React.useState<\n    'PII-Confidential' | 'Financial-Audit' | 'Internal-Ops' | 'Platform-Internal'\n  >('PII-Confidential')\n\n  const submitAccessRequest = (e: React.FormEvent) => {\n    e.preventDefault()\n    setIsAccessApproved(true)\n    setTimeout(() => {\n      onAccessModalOpenChange(false)\n      setIsAccessApproved(false)\n      setAccessAppName('')\n      setAccessSquad('')\n      setAccessReason('')\n    }, 1800)\n  }\n\n  const submitRegisterProduct = (e: React.FormEvent) => {\n    e.preventDefault()\n    setIsRegisterSuccess(true)\n    setTimeout(() => {\n      onRegisterModalOpenChange(false)\n      setIsRegisterSuccess(false)\n      setNewProductName('')\n      setNewProductDesc('')\n      setNewProductOwner('')\n      setNewProductTeam('')\n    }, 1600)\n  }\n\n  return (\n    <>\n      {/* Modal: Request Access to Output Port */}\n      {accessModalOpen && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs\"\n          onClick={() => onAccessModalOpenChange(false)}\n        >\n          <div\n            className=\"border-border bg-card text-card-foreground w-full max-w-lg space-y-4 rounded-xl border p-5 shadow-lg\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"border-border/80 flex items-start justify-between border-b pb-3\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <KeyRound className=\"text-warning size-4\" />\n                  <h3 className=\"text-foreground text-sm font-semibold\">Request Output Port Access</h3>\n                </div>\n                <p className=\"text-muted-foreground text-xs\">\n                  Automated computational governance approval workflow for{' '}\n                  <code className=\"text-foreground font-mono font-semibold\">{product.name}</code>.\n                </p>\n              </div>\n              <Button variant=\"ghost\" size=\"sm\" className=\"size-7 p-0\" onClick={() => onAccessModalOpenChange(false)}>\n                <X className=\"size-4\" />\n              </Button>\n            </div>\n\n            {isAccessApproved ? (\n              <div className=\"border-success/30 bg-success/10 space-y-2 rounded-lg border p-4 text-center\">\n                <div className=\"bg-success/20 text-success inline-flex size-8 items-center justify-center rounded-full\">\n                  <CheckCircle2 className=\"size-5\" />\n                </div>\n                <h4 className=\"text-success text-xs font-semibold\">Access Grant Provisioned</h4>\n                <p className=\"text-muted-foreground text-xs\">\n                  Federated governance policy-as-code approved request. Token and RBAC role bound to consumer\n                  application.\n                </p>\n              </div>\n            ) : (\n              <form className=\"space-y-3 text-xs\" onSubmit={submitAccessRequest}>\n                <div className=\"space-y-1\">\n                  <label className=\"text-foreground block font-medium\">Consumer Service / Application Name</label>\n                  <input\n                    value={accessAppName}\n                    onChange={(e) => setAccessAppName(e.target.value)}\n                    required\n                    placeholder=\"e.g. revops-lead-scoring-service\"\n                    className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 text-xs outline-none focus-visible:ring-1\"\n                  />\n                </div>\n\n                <div className=\"space-y-1\">\n                  <label className=\"text-foreground block font-medium\">Consumer Squad / Team</label>\n                  <input\n                    value={accessSquad}\n                    onChange={(e) => setAccessSquad(e.target.value)}\n                    required\n                    placeholder=\"e.g. #growth-eng-squad\"\n                    className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 text-xs outline-none focus-visible:ring-1\"\n                  />\n                </div>\n\n                <div className=\"space-y-1\">\n                  <label className=\"text-foreground block font-medium\">Target Output Port</label>\n                  <select\n                    value={accessPort}\n                    onChange={(e) => setAccessPort(e.target.value)}\n                    className=\"border-border bg-background text-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 text-xs outline-none focus-visible:ring-1\"\n                  >\n                    {product.ports.map((port) => (\n                      <option key={port.id} value={port.id}>\n                        {port.name} ({port.typeLabel})\n                      </option>\n                    ))}\n                  </select>\n                </div>\n\n                <div className=\"space-y-1\">\n                  <label className=\"text-foreground block font-medium\">Business Justification & Data Usage Scope</label>\n                  <textarea\n                    value={accessReason}\n                    onChange={(e) => setAccessReason(e.target.value)}\n                    required\n                    rows={2}\n                    placeholder=\"Explain how this data product will be consumed and compliance adherence...\"\n                    className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border p-2 text-xs outline-none focus-visible:ring-1\"\n                  />\n                </div>\n\n                <div className=\"border-border/80 flex items-center justify-end gap-2 border-t pt-3\">\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"h-8 text-xs\"\n                    onClick={() => onAccessModalOpenChange(false)}\n                  >\n                    Cancel\n                  </Button>\n                  <Button type=\"submit\" variant=\"default\" size=\"sm\" className=\"h-8 text-xs font-medium\">\n                    Submit Access Request\n                  </Button>\n                </div>\n              </form>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Modal: Register New Data Product */}\n      {registerModalOpen && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs\"\n          onClick={() => onRegisterModalOpenChange(false)}\n        >\n          <div\n            className=\"border-border bg-card text-card-foreground w-full max-w-lg space-y-4 rounded-xl border p-5 shadow-lg\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"border-border/80 flex items-start justify-between border-b pb-3\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <Plus className=\"text-primary size-4\" />\n                  <h3 className=\"text-foreground text-sm font-semibold\">Register New Data Product</h3>\n                </div>\n                <p className=\"text-muted-foreground text-xs\">\n                  Publish a new data product quantum to the federated Data Mesh catalog with contract SLA specs.\n                </p>\n              </div>\n              <Button variant=\"ghost\" size=\"sm\" className=\"size-7 p-0\" onClick={() => onRegisterModalOpenChange(false)}>\n                <X className=\"size-4\" />\n              </Button>\n            </div>\n\n            {isRegisterSuccess ? (\n              <div className=\"border-success/30 bg-success/10 space-y-2 rounded-lg border p-4 text-center\">\n                <div className=\"bg-success/20 text-success inline-flex size-8 items-center justify-center rounded-full\">\n                  <CheckCircle2 className=\"size-5\" />\n                </div>\n                <h4 className=\"text-success text-xs font-semibold\">Data Product Registered Successfully</h4>\n                <p className=\"text-muted-foreground text-xs\">\n                  Published to catalog registry with contract hash, automated CI/CD validation tests, and SLA telemetry.\n                </p>\n              </div>\n            ) : (\n              <form className=\"space-y-3 text-xs\" onSubmit={submitRegisterProduct}>\n                <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                  <div className=\"space-y-1\">\n                    <label className=\"text-foreground block font-medium\">Product Name / ID</label>\n                    <input\n                      value={newProductName}\n                      onChange={(e) => setNewProductName(e.target.value)}\n                      required\n                      placeholder=\"dp_merchant_settlement_ledger\"\n                      className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 font-mono text-xs outline-none focus-visible:ring-1\"\n                    />\n                  </div>\n\n                  <div className=\"space-y-1\">\n                    <label className=\"text-foreground block font-medium\">Domain Node</label>\n                    <select\n                      value={newProductDomain}\n                      onChange={(e) => setNewProductDomain(e.target.value)}\n                      className=\"border-border bg-background text-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 text-xs outline-none focus-visible:ring-1\"\n                    >\n                      {domains.map((d) => (\n                        <option key={d.id} value={d.id}>\n                          {d.name}\n                        </option>\n                      ))}\n                    </select>\n                  </div>\n                </div>\n\n                <div className=\"space-y-1\">\n                  <label className=\"text-foreground block font-medium\">Data Product Description</label>\n                  <textarea\n                    value={newProductDesc}\n                    onChange={(e) => setNewProductDesc(e.target.value)}\n                    required\n                    rows={2}\n                    placeholder=\"Describe the product quantum purpose, source transformations, and consumer target...\"\n                    className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border p-2 text-xs outline-none focus-visible:ring-1\"\n                  />\n                </div>\n\n                <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                  <div className=\"space-y-1\">\n                    <label className=\"text-foreground block font-medium\">Product Owner Name</label>\n                    <input\n                      value={newProductOwner}\n                      onChange={(e) => setNewProductOwner(e.target.value)}\n                      required\n                      placeholder=\"Marcus Vance\"\n                      className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 text-xs outline-none focus-visible:ring-1\"\n                    />\n                  </div>\n\n                  <div className=\"space-y-1\">\n                    <label className=\"text-foreground block font-medium\">Squad Slack Handle / Team</label>\n                    <input\n                      value={newProductTeam}\n                      onChange={(e) => setNewProductTeam(e.target.value)}\n                      required\n                      placeholder=\"#payments-core\"\n                      className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 font-mono text-xs outline-none focus-visible:ring-1\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"space-y-1\">\n                  <label className=\"text-foreground block font-medium\">Data Classification Tier</label>\n                  <select\n                    value={newProductClassification}\n                    onChange={(e) =>\n                      setNewProductClassification(\n                        e.target.value as 'PII-Confidential' | 'Financial-Audit' | 'Internal-Ops' | 'Platform-Internal',\n                      )\n                    }\n                    className=\"border-border bg-background text-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 text-xs outline-none focus-visible:ring-1\"\n                  >\n                    <option value=\"PII-Confidential\">PII-Confidential (GDPR Masked)</option>\n                    <option value=\"Financial-Audit\">Financial-Audit (SOX Certified)</option>\n                    <option value=\"Internal-Ops\">Internal-Ops (Standard RBAC)</option>\n                    <option value=\"Platform-Internal\">Platform-Internal (System Only)</option>\n                  </select>\n                </div>\n\n                <div className=\"border-border/80 flex items-center justify-end gap-2 border-t pt-3\">\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"h-8 text-xs\"\n                    onClick={() => onRegisterModalOpenChange(false)}\n                  >\n                    Cancel\n                  </Button>\n                  <Button type=\"submit\" variant=\"default\" size=\"sm\" className=\"h-8 text-xs font-medium\">\n                    Publish to Mesh Registry\n                  </Button>\n                </div>\n              </form>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DataMeshModals.tsx"
    },
    {
      "path": "packages/registry-react/blocks/data-mesh-domain-catalog/data-mesh-types.ts",
      "content": "export interface DomainMeta {\n  id: string\n  name: string\n  lead: string\n  role: string\n  productsCount: number\n  slaScore: number\n  activeConsumers: number\n  storageVolume: string\n  throughput: string\n  tier: string\n  description: string\n  iconName: 'CreditCard' | 'Users' | 'Truck' | 'Activity'\n}\n\nexport interface OutputPortSchemaColumn {\n  name: string\n  type: string\n  nullable: boolean\n  isKey?: boolean\n  desc: string\n  constraints?: string\n}\n\nexport type DataMeshPortId = 'snowflake' | 'kafka' | 'graphql' | 's3'\n\nexport interface OutputPortDetails {\n  id: DataMeshPortId\n  name: string\n  typeLabel: string\n  badgeVariant?: 'default' | 'secondary' | 'outline'\n  protocol: string\n  uri: string\n  accessRole: string\n  schemaRegistry?: string\n  format?: string\n  syncCadence?: string\n  throughput?: string\n  rateLimit?: string\n  columns?: OutputPortSchemaColumn[]\n  sampleQuery?: string\n  samplePayload?: string\n  mockResults?: Array<Record<string, string | number | boolean>>\n}\n\nexport interface DataProductItem {\n  id: string\n  name: string\n  displayName: string\n  domainId: string\n  domainName: string\n  version: string\n  tier: string\n  classification: 'PII-Confidential' | 'Financial-Audit' | 'Internal-Ops' | 'Platform-Internal'\n  description: string\n  contractHash: string\n  owner: {\n    name: string\n    role: string\n    handle: string\n    team: string\n    initials: string\n    avatar?: string\n  }\n  slaScore: number\n  freshnessLatency: string\n  uptime: string\n  assertionsPassed: number\n  assertionsTotal: number\n  activeConsumersCount: number\n  topConsumers: string[]\n  ports: OutputPortDetails[]\n  governancePolicies: string[]\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/data-mesh-types.ts"
    },
    {
      "path": "packages/registry-react/blocks/data-mesh-domain-catalog/data-mesh-data.ts",
      "content": "import type { DomainMeta, DataProductItem } from './data-mesh-types'\n\nexport const DOMAINS: DomainMeta[] = [\n  {\n    id: 'checkout-payments',\n    name: 'Checkout & Payments',\n    lead: 'Marcus Vance',\n    role: 'Principal Data Architect',\n    productsCount: 6,\n    slaScore: 99.8,\n    activeConsumers: 33,\n    storageVolume: '4.8 TB',\n    throughput: '45k ops/sec',\n    tier: 'Tier 1 Core Gold',\n    description:\n      'Real-time order authorization, payment settlements, GAAP recurring revenue ledgers, and fraud velocity pipelines.',\n    iconName: 'CreditCard',\n  },\n  {\n    id: 'customer-intelligence',\n    name: 'Customer Intelligence',\n    lead: 'Elena Rostova',\n    role: 'Staff Data PM',\n    productsCount: 4,\n    slaScore: 99.6,\n    activeConsumers: 24,\n    storageVolume: '12.2 TB',\n    throughput: '12k ops/sec',\n    tier: 'Tier 1 Core Gold',\n    description:\n      'Unified real-time customer 360 identity resolution graph, behavioral propensity scores, cohort attribution, and churn risk models.',\n    iconName: 'Users',\n  },\n  {\n    id: 'logistics-supply-chain',\n    name: 'Logistics & Supply Chain',\n    lead: 'David Chen',\n    role: 'Lead Data Engineer',\n    productsCount: 5,\n    slaScore: 99.5,\n    activeConsumers: 25,\n    storageVolume: '8.4 TB',\n    throughput: '18k ops/sec',\n    tier: 'Tier 2 Certified',\n    description:\n      'Global container telematics, port dwell predictions, multi-warehouse stock allocations, and carrier SLA breach risk monitors.',\n    iconName: 'Truck',\n  },\n  {\n    id: 'platform-observability',\n    name: 'Platform & Observability',\n    lead: 'Sarah Jenkins',\n    role: 'VP Data Infrastructure',\n    productsCount: 3,\n    slaScore: 99.99,\n    activeConsumers: 41,\n    storageVolume: '19.5 TB',\n    throughput: '85k ops/sec',\n    tier: 'Tier 1 Operational',\n    description:\n      'Federated query execution traces, cross-domain consumer lineage logs, SLA breach alarms, and FinOps egress telemetry.',\n    iconName: 'Activity',\n  },\n]\n\nexport const DATA_PRODUCTS: DataProductItem[] = [\n  {\n    id: 'dp_customer_360_profile',\n    name: 'dp_customer_360_profile',\n    displayName: 'Customer 360 Unified Identity Graph',\n    domainId: 'customer-intelligence',\n    domainName: 'Customer Intelligence',\n    version: 'v3.2.0',\n    tier: 'Tier 1 Core Gold',\n    classification: 'PII-Confidential',\n    description:\n      'Unified real-time customer identity graph, behavioral propensity scores, multi-touch attribution, and consent preferences.',\n    contractHash: 'sha256:8f4c9a12b3e70d4f9012a67e',\n    owner: {\n      name: 'Elena Rostova',\n      role: 'Staff Data PM',\n      handle: '@elena.rostova',\n      team: '#cust-intel-squad',\n      initials: 'ER',\n    },\n    slaScore: 99.9,\n    freshnessLatency: '< 2m',\n    uptime: '99.98%',\n    assertionsPassed: 18,\n    assertionsTotal: 18,\n    activeConsumersCount: 14,\n    topConsumers: ['RevOps Dashboard', 'Churn Predictor', 'Zendesk Sync', 'Marketing Cloud', 'Billing Automation'],\n    ports: [\n      {\n        id: 'snowflake',\n        name: 'Snowflake Analytical Mart',\n        typeLabel: 'Snowflake Table',\n        protocol: 'Snowflake SQL over Arrow Flight',\n        uri: 'snowflake://prod_dw.analytics_customer.dim_customer_360',\n        accessRole: 'ROLE: ANALYTICS_READER',\n        columns: [\n          {\n            name: 'customer_id',\n            type: 'varchar(64)',\n            nullable: false,\n            isKey: true,\n            desc: 'Globally unique customer GUID',\n            constraints: 'PRIMARY KEY',\n          },\n          {\n            name: 'email_hash',\n            type: 'varchar(64)',\n            nullable: false,\n            desc: 'SHA-256 hashed customer email for pseudonymization',\n            constraints: 'OPA MASKED',\n          },\n          {\n            name: 'lifetime_value_usd',\n            type: 'decimal(18,2)',\n            nullable: false,\n            desc: 'Cumulative GAAP realized revenue recognized',\n            constraints: 'CHECK (>= 0)',\n          },\n          {\n            name: 'churn_risk_score',\n            type: 'decimal(5,4)',\n            nullable: true,\n            desc: 'ML predicted churn risk probability (0.0000 - 1.0000)',\n            constraints: '0.0 TO 1.0',\n          },\n          {\n            name: 'primary_tier',\n            type: 'varchar(32)',\n            nullable: false,\n            desc: 'Enterprise / Pro / Team membership classification',\n          },\n          {\n            name: 'last_active_at',\n            type: 'timestamp_tz',\n            nullable: false,\n            desc: 'ISO-8601 UTC timestamp of last observed touchpoint',\n          },\n        ],\n        sampleQuery: `SELECT customer_id, primary_tier, lifetime_value_usd, churn_risk_score\\nFROM prod_dw.analytics_customer.dim_customer_360\\nWHERE churn_risk_score > 0.65\\nORDER BY lifetime_value_usd DESC\\nLIMIT 5;`,\n        mockResults: [\n          {\n            customer_id: 'cust_9821a',\n            primary_tier: 'Enterprise',\n            lifetime_value_usd: '$84,200.00',\n            churn_risk_score: '0.7820',\n          },\n          {\n            customer_id: 'cust_4412b',\n            primary_tier: 'Enterprise',\n            lifetime_value_usd: '$62,450.00',\n            churn_risk_score: '0.6910',\n          },\n          {\n            customer_id: 'cust_1109c',\n            primary_tier: 'Pro Team',\n            lifetime_value_usd: '$28,900.00',\n            churn_risk_score: '0.7140',\n          },\n        ],\n      },\n      {\n        id: 'graphql',\n        name: 'GraphQL Customer Query Endpoint',\n        typeLabel: 'GraphQL API',\n        protocol: 'GraphQL over HTTPS / HTTP/2',\n        uri: 'https://api.uipkge.internal/graphql/v1/customer-360',\n        accessRole: 'Bearer MeshToken (scope: read:customer_360)',\n        rateLimit: '5,000 req/min · P99 < 45ms',\n        sampleQuery: `query GetCustomerProfile($id: ID!) {\\n  customer(id: $id) {\\n    id\\n    primaryTier\\n    lifetimeValueUsd\\n    churnRiskScore\\n    consentPreferences {\\n      analyticsAllowed\\n      marketingAllowed\\n    }\\n  }\\n}`,\n      },\n      {\n        id: 's3',\n        name: 'S3 Parquet Lake Export',\n        typeLabel: 'Parquet S3',\n        protocol: 'S3 Object Store / AWS Lake Formation',\n        uri: 's3://uipkge-data-mesh-lake/customer-intelligence/profiles/v3/',\n        accessRole: 'AWS IAM ARN: arn:aws:iam::data-lake-reader',\n        format: 'Snappy Apache Parquet · Partitioned by date(last_active_at)',\n        syncCadence: 'Hourly Micro-batch Sync',\n      },\n    ],\n    governancePolicies: [\n      'OPA Masking: Email and phone attributes hashed on egress',\n      'GDPR Article 17: Automated erasure pipeline triggered on deletion events',\n      'Differential Privacy: ε=0.5 noise applied to aggregated analytical views',\n    ],\n  },\n  {\n    id: 'dp_realtime_order_stream',\n    name: 'dp_realtime_order_stream',\n    displayName: 'Realtime Checkout Order Stream',\n    domainId: 'checkout-payments',\n    domainName: 'Checkout & Payments',\n    version: 'v2.4.1',\n    tier: 'Tier 1 Mission Critical',\n    classification: 'Financial-Audit',\n    description:\n      'Sub-second immutable stream of global checkout events, payment authorizations, 3D Secure validations, and refunds.',\n    contractHash: 'sha256:4a7e9102c89f33b1e2a05d8c',\n    owner: {\n      name: 'Marcus Vance',\n      role: 'Principal Architect',\n      handle: '@marcus.vance',\n      team: '#payments-core',\n      initials: 'MV',\n    },\n    slaScore: 99.95,\n    freshnessLatency: '< 150ms',\n    uptime: '99.99%',\n    assertionsPassed: 24,\n    assertionsTotal: 24,\n    activeConsumersCount: 22,\n    topConsumers: ['Fraud Engine', 'Inventory Lock', 'Stripe Settlement', 'Fulfillment Dispatch', 'NetSuite ERP'],\n    ports: [\n      {\n        id: 'kafka',\n        name: 'Kafka High-Throughput Event Topic',\n        typeLabel: 'Kafka Stream',\n        protocol: 'Kafka Protocol v3.6 / Avro Schema Registry',\n        uri: 'kafka://events.kafka.internal:9092/payments.checkout.orders.v2',\n        accessRole: 'mTLS Certificate (CN=service.payments.consumer)',\n        schemaRegistry: 'Avro v2.4 (Subject: payments-checkout-orders-value)',\n        throughput: '45,000 msg/sec (16 partitions · RF: 3)',\n        samplePayload: `{\\n  \"event_id\": \"evt_9941a80c-b4\",\\n  \"order_id\": \"ord_88201\",\\n  \"customer_id\": \"cust_9821a\",\\n  \"amount_cents\": 184500,\\n  \"currency\": \"USD\",\\n  \"payment_method\": \"stripe_card_v2\",\\n  \"status\": \"AUTHORIZED\",\\n  \"timestamp_utc\": \"2026-08-21T14:28:10.194Z\"\\n}`,\n      },\n      {\n        id: 'snowflake',\n        name: 'Raw Streaming Ingestion Table',\n        typeLabel: 'Snowflake Table',\n        protocol: 'Snowpipe Streaming / Arrow Flight',\n        uri: 'snowflake://prod_dw.raw_payments.fct_orders_stream',\n        accessRole: 'ROLE: PAYMENTS_READER',\n        columns: [\n          {\n            name: 'event_id',\n            type: 'varchar(64)',\n            nullable: false,\n            isKey: true,\n            desc: 'Immutable idempotency event GUID',\n            constraints: 'PRIMARY KEY',\n          },\n          { name: 'order_id', type: 'varchar(32)', nullable: false, desc: 'Reference checkout order ID' },\n          { name: 'amount_usd', type: 'decimal(18,2)', nullable: false, desc: 'Settled transactional amount in USD' },\n          {\n            name: 'payment_status',\n            type: 'varchar(24)',\n            nullable: false,\n            desc: 'AUTHORIZED / CAPTURED / FAILED / REFUNDED',\n          },\n          {\n            name: 'event_timestamp',\n            type: 'timestamp_tz',\n            nullable: false,\n            desc: 'Sub-second event creation timestamp',\n          },\n        ],\n        sampleQuery: `SELECT event_id, order_id, amount_usd, payment_status, event_timestamp\\nFROM prod_dw.raw_payments.fct_orders_stream\\nWHERE event_timestamp >= DATEADD(minute, -15, CURRENT_TIMESTAMP())\\nORDER BY event_timestamp DESC\\nLIMIT 5;`,\n        mockResults: [\n          {\n            event_id: 'evt_9941a',\n            order_id: 'ord_88201',\n            amount_usd: '$1,845.00',\n            payment_status: 'AUTHORIZED',\n            event_timestamp: '14:28:10 UTC',\n          },\n          {\n            event_id: 'evt_9940b',\n            order_id: 'ord_88200',\n            amount_usd: '$420.50',\n            payment_status: 'CAPTURED',\n            event_timestamp: '14:28:08 UTC',\n          },\n        ],\n      },\n      {\n        id: 'graphql',\n        name: 'Realtime Orders Webhook/API',\n        typeLabel: 'GraphQL API',\n        protocol: 'GraphQL Subscriptions over WebSockets',\n        uri: 'https://api.uipkge.internal/graphql/v1/orders-stream',\n        accessRole: 'Bearer MeshToken (scope: read:orders)',\n        rateLimit: '10,000 req/min · P99 < 30ms',\n        sampleQuery: `subscription OnNewOrderAuthorized {\\n  orderAuthorized {\\n    orderId\\n    amountUsd\\n    status\\n    timestamp\\n  }\\n}`,\n      },\n    ],\n    governancePolicies: [\n      'PCI-DSS Tier 1: Zero plain-text card data in payload schema',\n      'Idempotent Delivery: Exactly-once consumer semantics guaranteed via Kafka transactional producer',\n      'Audit Immutability: Append-only write ledger with cryptographic hash chaining',\n    ],\n  },\n  {\n    id: 'dp_carrier_delivery_performance',\n    name: 'dp_carrier_delivery_performance',\n    displayName: 'Carrier Dwell & Delivery Telematics',\n    domainId: 'logistics-supply-chain',\n    domainName: 'Logistics & Supply Chain',\n    version: 'v1.8.0',\n    tier: 'Tier 2 Certified',\n    classification: 'Internal-Ops',\n    description:\n      'Real-time carrier transit telematics, port dwell times, ETA machine learning forecasts, and SLA breach risk scoring.',\n    contractHash: 'sha256:19bc2a40e87d12f4581109aa',\n    owner: {\n      name: 'David Chen',\n      role: 'Lead Data Engineer',\n      handle: '@david.chen',\n      team: '#logistics-mesh',\n      initials: 'DC',\n    },\n    slaScore: 99.4,\n    freshnessLatency: '< 5m',\n    uptime: '99.92%',\n    assertionsPassed: 12,\n    assertionsTotal: 12,\n    activeConsumersCount: 9,\n    topConsumers: ['Control Tower UI', 'Carrier Scorecard', 'Customs Broker Portal', 'Exception Dispatcher'],\n    ports: [\n      {\n        id: 'snowflake',\n        name: 'Logistics Telematics Mart',\n        typeLabel: 'Snowflake Table',\n        protocol: 'Snowflake SQL / DBT Mart',\n        uri: 'snowflake://prod_dw.logistics_marts.fct_carrier_telematics',\n        accessRole: 'ROLE: LOGISTICS_ANALYST',\n        columns: [\n          {\n            name: 'shipment_id',\n            type: 'varchar(48)',\n            nullable: false,\n            isKey: true,\n            desc: 'Global multimodal consignment identifier',\n            constraints: 'PRIMARY KEY',\n          },\n          {\n            name: 'carrier_scac',\n            type: 'varchar(8)',\n            nullable: false,\n            desc: 'Standard Carrier Alpha Code (MAEU, MSCU, COSU)',\n          },\n          {\n            name: 'port_dwell_hours',\n            type: 'decimal(6,2)',\n            nullable: false,\n            desc: 'Current container dwell interval at marine terminal',\n          },\n          {\n            name: 'eta_prediction_confidence',\n            type: 'decimal(5,4)',\n            nullable: false,\n            desc: 'ML ensemble model forecast confidence score',\n          },\n          {\n            name: 'sla_breach_flag',\n            type: 'boolean',\n            nullable: false,\n            desc: 'Flagged true if predicted delivery > guaranteed SLA',\n          },\n        ],\n        sampleQuery: `SELECT shipment_id, carrier_scac, port_dwell_hours, sla_breach_flag\\nFROM prod_dw.logistics_marts.fct_carrier_telematics\\nWHERE sla_breach_flag = TRUE\\nORDER BY port_dwell_hours DESC\\nLIMIT 5;`,\n        mockResults: [\n          { shipment_id: 'SHP-90812', carrier_scac: 'MAEU', port_dwell_hours: '74.2 hrs', sla_breach_flag: true },\n          { shipment_id: 'SHP-90804', carrier_scac: 'MSCU', port_dwell_hours: '61.5 hrs', sla_breach_flag: true },\n        ],\n      },\n      {\n        id: 's3',\n        name: 'Telematics Parquet Batch Stream',\n        typeLabel: 'Parquet S3',\n        protocol: 'S3 Data Lake / Hive Metastore',\n        uri: 's3://uipkge-data-mesh-lake/supply-chain/telematics/v1/',\n        accessRole: 'AWS IAM: arn:aws:iam::supply-chain-lake-reader',\n        format: 'Snappy Parquet partitioned by carrier_scac / year / month',\n        syncCadence: 'Every 5 minutes',\n      },\n    ],\n    governancePolicies: [\n      'Geospatial Resolution Cap: GPS telematics coordinates rounded to 3 decimal places outside geofences',\n      'SLA Alert Threshold: Automatic PagerDuty alert on > 5% carrier breach rate',\n    ],\n  },\n  {\n    id: 'dp_subscription_mrr_ledger',\n    name: 'dp_subscription_mrr_ledger',\n    displayName: 'Subscription MRR & Revenue Recognition',\n    domainId: 'checkout-payments',\n    domainName: 'Checkout & Payments',\n    version: 'v4.0.2',\n    tier: 'Tier 1 Core Gold',\n    classification: 'Financial-Audit',\n    description:\n      'GAAP/IFRS compliant monthly recurring revenue recognition ledger, expansion/contraction deltas, and cohort retention.',\n    contractHash: 'sha256:d82e1194fa8892bc0147ae55',\n    owner: {\n      name: 'Marcus Vance',\n      role: 'Principal Architect',\n      handle: '@marcus.vance',\n      team: '#payments-core',\n      initials: 'MV',\n    },\n    slaScore: 100.0,\n    freshnessLatency: '< 1h',\n    uptime: '99.99%',\n    assertionsPassed: 32,\n    assertionsTotal: 32,\n    activeConsumersCount: 11,\n    topConsumers: ['Executive Board Deck', 'NetSuite Sync', 'FP&A Forecasting', 'Investor Reporting'],\n    ports: [\n      {\n        id: 'snowflake',\n        name: 'Gold Certified Financial Mart',\n        typeLabel: 'Snowflake Table',\n        protocol: 'Snowflake SQL / Incremental Gold Mart',\n        uri: 'snowflake://prod_dw.finance_gold.fct_subscription_mrr_ledger',\n        accessRole: 'ROLE: FINANCE_EXECUTIVE',\n        columns: [\n          {\n            name: 'fiscal_month',\n            type: 'varchar(7)',\n            nullable: false,\n            isKey: true,\n            desc: 'YYYY-MM accounting partition key',\n            constraints: 'PRIMARY KEY',\n          },\n          {\n            name: 'starting_mrr',\n            type: 'decimal(18,2)',\n            nullable: false,\n            desc: 'Beginning of period monthly recurring revenue',\n          },\n          {\n            name: 'expansion_mrr',\n            type: 'decimal(18,2)',\n            nullable: false,\n            desc: 'Net upgrade and seat expansion recognized',\n          },\n          {\n            name: 'churn_mrr',\n            type: 'decimal(18,2)',\n            nullable: false,\n            desc: 'Lost subscriptions recognized in period',\n          },\n          {\n            name: 'ending_mrr',\n            type: 'decimal(18,2)',\n            nullable: false,\n            desc: 'Period closing MRR for GAAP balance sheet',\n          },\n        ],\n        sampleQuery: `SELECT fiscal_month, starting_mrr, expansion_mrr, churn_mrr, ending_mrr\\nFROM prod_dw.finance_gold.fct_subscription_mrr_ledger\\nORDER BY fiscal_month DESC\\nLIMIT 3;`,\n        mockResults: [\n          {\n            fiscal_month: '2026-03',\n            starting_mrr: '$1,220,000.00',\n            expansion_mrr: '$64,500.00',\n            churn_mrr: '-$12,450.00',\n            ending_mrr: '$1,272,050.00',\n          },\n          {\n            fiscal_month: '2026-02',\n            starting_mrr: '$1,175,000.00',\n            expansion_mrr: '$58,100.00',\n            churn_mrr: '-$13,100.00',\n            ending_mrr: '$1,220,000.00',\n          },\n        ],\n      },\n      {\n        id: 's3',\n        name: 'Finance Cold-Storage Delta Lake',\n        typeLabel: 'Parquet S3',\n        protocol: 'Delta Lake 3.0 ACID table with 7-year retention',\n        uri: 's3://uipkge-data-mesh-lake/finance/mrr-ledger/v4/',\n        accessRole: 'AWS IAM: arn:aws:iam::finance-audit-reader',\n        format: 'Delta Lake ACID Snappy Parquet',\n        syncCadence: 'Daily Fiscal Close',\n      },\n    ],\n    governancePolicies: [\n      'SOX Compliance: Dual-sign-off required before schema mutation',\n      'Cryptographic Seal: Daily ledger snapshot sealed with SHA-256 digest',\n    ],\n  },\n  {\n    id: 'dp_global_inventory_snapshot',\n    name: 'dp_global_inventory_snapshot',\n    displayName: 'Global Multi-Warehouse Inventory',\n    domainId: 'logistics-supply-chain',\n    domainName: 'Logistics & Supply Chain',\n    version: 'v2.1.0',\n    tier: 'Tier 1 Core Gold',\n    classification: 'Internal-Ops',\n    description:\n      'Multi-warehouse SKU inventory levels, safety stock thresholds, in-transit allocations, and backorder risk indices.',\n    contractHash: 'sha256:55f01e89bc21340aa482910d',\n    owner: {\n      name: 'David Chen',\n      role: 'Lead Data Engineer',\n      handle: '@david.chen',\n      team: '#logistics-mesh',\n      initials: 'DC',\n    },\n    slaScore: 99.7,\n    freshnessLatency: '< 1m',\n    uptime: '99.95%',\n    assertionsPassed: 16,\n    assertionsTotal: 16,\n    activeConsumersCount: 16,\n    topConsumers: ['Storefront Stock Badge', 'Warehouse WMS', 'Restock Bot', 'ERP Allocator'],\n    ports: [\n      {\n        id: 'snowflake',\n        name: 'Warehouse Stock Levels Table',\n        typeLabel: 'Snowflake Table',\n        protocol: 'Snowflake SQL / Materialized View',\n        uri: 'snowflake://prod_dw.inventory.dim_warehouse_stock_levels',\n        accessRole: 'ROLE: INVENTORY_OPERATOR',\n        columns: [\n          {\n            name: 'sku_id',\n            type: 'varchar(32)',\n            nullable: false,\n            isKey: true,\n            desc: 'Universal Stock Keeping Unit token',\n            constraints: 'PRIMARY KEY',\n          },\n          {\n            name: 'warehouse_code',\n            type: 'varchar(12)',\n            nullable: false,\n            isKey: true,\n            desc: 'Facility code (e.g. WH-ORD1, WH-FRA2)',\n            constraints: 'PRIMARY KEY',\n          },\n          {\n            name: 'quantity_available',\n            type: 'integer',\n            nullable: false,\n            desc: 'Unallocated physical stock ready to pick',\n          },\n          {\n            name: 'quantity_reserved',\n            type: 'integer',\n            nullable: false,\n            desc: 'Allocated to in-flight pending checkout baskets',\n          },\n          {\n            name: 'reorder_threshold',\n            type: 'integer',\n            nullable: false,\n            desc: 'Automated PO replenishment trigger watermark',\n          },\n        ],\n        sampleQuery: `SELECT sku_id, warehouse_code, quantity_available, quantity_reserved\\nFROM prod_dw.inventory.dim_warehouse_stock_levels\\nWHERE quantity_available <= reorder_threshold\\nLIMIT 5;`,\n        mockResults: [\n          { sku_id: 'SKU-8819-A', warehouse_code: 'WH-ORD1', quantity_available: 12, quantity_reserved: 8 },\n          { sku_id: 'SKU-4402-Z', warehouse_code: 'WH-FRA2', quantity_available: 4, quantity_reserved: 4 },\n        ],\n      },\n      {\n        id: 'kafka',\n        name: 'Inventory Delta Stream Topic',\n        typeLabel: 'Kafka Stream',\n        protocol: 'Kafka Event Topic / Avro v2.1',\n        uri: 'kafka://events.kafka.internal:9092/supplychain.inventory.deltas.v2',\n        accessRole: 'mTLS Certificate (CN=service.inventory.allocator)',\n        throughput: '18,000 msg/sec',\n        samplePayload: `{\\n  \"sku_id\": \"SKU-8819-A\",\\n  \"warehouse_code\": \"WH-ORD1\",\\n  \"delta_units\": -1,\\n  \"reason\": \"CHECKOUT_PICKED\",\\n  \"timestamp_utc\": \"2026-08-21T14:29:40.012Z\"\\n}`,\n      },\n    ],\n    governancePolicies: [\n      'Real-time Stock Consistency: Sub-second reconciliation against Physical WMS barcode scans',\n      'Zero Phantom Inventory: Automated cycle count variance audit',\n    ],\n  },\n  {\n    id: 'dp_mesh_observability_telemetry',\n    name: 'dp_mesh_observability_telemetry',\n    displayName: 'Mesh Observability & Query Lineage',\n    domainId: 'platform-observability',\n    domainName: 'Platform & Observability',\n    version: 'v1.5.0',\n    tier: 'Tier 1 Operational',\n    classification: 'Platform-Internal',\n    description:\n      'Federated query execution traces, cross-domain consumer lineage logs, SLA breach alarms, and FinOps egress telemetry.',\n    contractHash: 'sha256:2210aae88401bdfe771032cf',\n    owner: {\n      name: 'Sarah Jenkins',\n      role: 'VP Data Infrastructure',\n      handle: '@sarah.jenkins',\n      team: '#platform-infra',\n      initials: 'SJ',\n    },\n    slaScore: 99.99,\n    freshnessLatency: '< 500ms',\n    uptime: '99.99%',\n    assertionsPassed: 14,\n    assertionsTotal: 14,\n    activeConsumersCount: 28,\n    topConsumers: ['Mesh Control Plane', 'Datadog Gateway', 'FinOps Cost Allocator', 'Governance Engine'],\n    ports: [\n      {\n        id: 'snowflake',\n        name: 'Mesh Query Audit Table',\n        typeLabel: 'Snowflake Table',\n        protocol: 'Snowflake SQL / Observability DW',\n        uri: 'snowflake://prod_dw.observability.fct_mesh_query_logs',\n        accessRole: 'ROLE: MESH_ADMIN',\n        columns: [\n          {\n            name: 'query_execution_id',\n            type: 'varchar(64)',\n            nullable: false,\n            isKey: true,\n            desc: 'Federated query execution trace ID',\n            constraints: 'PRIMARY KEY',\n          },\n          {\n            name: 'caller_principal',\n            type: 'varchar(64)',\n            nullable: false,\n            desc: 'Service account or user querying the port',\n          },\n          {\n            name: 'target_data_product',\n            type: 'varchar(64)',\n            nullable: false,\n            desc: 'Queried Data Product identifier',\n          },\n          { name: 'duration_ms', type: 'integer', nullable: false, desc: 'Execution duration in milliseconds' },\n          {\n            name: 'bytes_scanned_mb',\n            type: 'decimal(12,2)',\n            nullable: false,\n            desc: 'Egress bandwidth volume for FinOps attribution',\n          },\n        ],\n        sampleQuery: `SELECT caller_principal, target_data_product, duration_ms, bytes_scanned_mb\\nFROM prod_dw.observability.fct_mesh_query_logs\\nORDER BY duration_ms DESC\\nLIMIT 5;`,\n        mockResults: [\n          {\n            caller_principal: 'svc_revops_dashboard',\n            target_data_product: 'dp_customer_360_profile',\n            duration_ms: 38,\n            bytes_scanned_mb: '14.2 MB',\n          },\n          {\n            caller_principal: 'svc_fraud_detector',\n            target_data_product: 'dp_realtime_order_stream',\n            duration_ms: 12,\n            bytes_scanned_mb: '4.8 MB',\n          },\n        ],\n      },\n      {\n        id: 'kafka',\n        name: 'OpenTelemetry OTLP Trace Stream',\n        typeLabel: 'Kafka Stream',\n        protocol: 'Kafka Event Topic / Protobuf v3',\n        uri: 'kafka://events.kafka.internal:9092/platform.mesh.audit.v1',\n        accessRole: 'mTLS Certificate (CN=service.mesh.observer)',\n        throughput: '85,000 msg/sec',\n        samplePayload: `{\\n  \"trace_id\": \"tr_99014ab\",\\n  \"caller\": \"svc_fraud_detector\",\\n  \"product\": \"dp_realtime_order_stream\",\\n  \"port\": \"kafka\",\\n  \"latency_ms\": 12,\\n  \"status\": 200\\n}`,\n      },\n    ],\n    governancePolicies: [\n      'FinOps Cost Attribution: Every query query-plan tagged with consumer squad ID',\n      'Zero Trust Egress: Real-time anomaly alerts on unauthorized consumer bursts',\n    ],\n  },\n]\n",
      "type": "registry:block",
      "target": "~/components/blocks/data-mesh-data.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Zhamak Dehghani Data Mesh architecture domain catalog, Data Products directory, polyglot output ports (Snowflake, Kafka, GraphQL, S3), and federated computational governance SLA scorecards.",
  "categories": [
    "devops",
    "app",
    "analytics",
    "data"
  ]
}