{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "subpoena-legal-hold-manager",
  "title": "Subpoena Legal Hold Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/subpoena-legal-hold-manager/SubpoenaLegalHoldManager.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertTriangle,\n  BadgeCheck,\n  Calendar,\n  CalendarClock,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  Download,\n  FileCheck,\n  FileSpreadsheet,\n  Info,\n  Lock,\n  Mail,\n  MoreHorizontal,\n  Plus,\n  RefreshCw,\n  RotateCcw,\n  Scale,\n  Search,\n  Send,\n  Server,\n  Share2,\n  Shield,\n  ShieldCheck,\n  Users,\n  UserX,\n  X,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CustodianRecord {\n  id: string\n  name: string\n  role: string\n  department: string\n  departmentCategory: 'engineering' | 'product' | 'operations'\n  email: string\n  avatarInitials: string\n  noticeSentDate: string\n  acknowledgedDate: string\n  status: 'acknowledged' | 'pending' | 're-certified'\n  statusLabel: string\n  sha256Signature: string\n  ipAddress: string\n  dataSources: string[]\n  preservedAssets: string\n}\n\nexport interface PreservationSystem {\n  id: string\n  name: string\n  integrationType: string\n  status: 'active' | 'warning' | 'synced'\n  statusLabel: string\n  scope: string\n  lockProtocol: string\n  lastSync: string\n  iconName: 'slack' | 'aws' | 'google' | 'github'\n}\n\ninterface Props {\n  class?: HTMLAttributes['class']\n  defaultFilter?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  defaultFilter: 'all',\n})\n\nconst custodiansData: CustodianRecord[] = [\n  {\n    id: 'CUST-8801',\n    name: 'Marcus Vance',\n    role: 'VP of Engineering',\n    department: 'Engineering & Architecture',\n    departmentCategory: 'engineering',\n    email: 'marcus.vance@uipkge.internal',\n    avatarInitials: 'MV',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 15, 2026 · 09:12 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '4f8a9e62b11d87e0fa1943892c55b38d019f2a4e87dc261904a8b71239c0812e',\n    ipAddress: '198.51.100.42 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'Slack Channels', 'GitHub PRs', 'Local Drive'],\n    preservedAssets: '1,420 Commits · 84 Channels · 3.2 GB Mail',\n  },\n  {\n    id: 'CUST-8802',\n    name: 'Elena Rostova',\n    role: 'VP of Product',\n    department: 'Product & Design',\n    departmentCategory: 'product',\n    email: 'elena.rostova@uipkge.internal',\n    avatarInitials: 'ER',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 15, 2026 · 10:45 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '8b3c1d9a7402ef1904a8b71239c0812e4f8a9e62b11d87e0fa1943892c55b38d',\n    ipAddress: '198.51.100.58 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'Notion', 'Slack Channels', 'Jira'],\n    preservedAssets: '312 PRDs · 62 Channels · 1.8 GB Mail',\n  },\n  {\n    id: 'CUST-8803',\n    name: 'David Chen',\n    role: 'VP of Operations',\n    department: 'Operations & Legal',\n    departmentCategory: 'operations',\n    email: 'david.chen@uipkge.internal',\n    avatarInitials: 'DC',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 15, 2026 · 11:20 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '1a9e7f3c82904a8b71239c0812e4f8a9e62b11d87e0fa1943892c55b38d8b3c1',\n    ipAddress: '198.51.100.19 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'Box Drive', 'Slack Channels', 'Salesforce'],\n    preservedAssets: '94 Vendor Contracts · 48 Channels · 4.1 GB Mail',\n  },\n  {\n    id: 'CUST-8804',\n    name: 'Alex Rivera',\n    role: 'Lead Architect',\n    department: 'Engineering & Architecture',\n    departmentCategory: 'engineering',\n    email: 'alex.rivera@uipkge.internal',\n    avatarInitials: 'AR',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 16, 2026 · 08:30 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '7e2d5c0b912e4f8a9e62b11d87e0fa1943892c55b38d8b3c1d9a7402ef1904a8',\n    ipAddress: '198.51.100.73 (Corp Gateway)',\n    dataSources: ['Google Workspace', 'GitHub Repos', 'Figma Files', 'Slack'],\n    preservedAssets: '890 Commits · 52 Figma Files · 2.4 GB Mail',\n  },\n  {\n    id: 'CUST-8805',\n    name: 'Sarah Jenkins',\n    role: 'DevOps Lead',\n    department: 'Platform & Infrastructure',\n    departmentCategory: 'engineering',\n    email: 'sarah.jenkins@uipkge.internal',\n    avatarInitials: 'SJ',\n    noticeSentDate: 'Aug 14, 2026',\n    acknowledgedDate: 'Aug 16, 2026 · 14:05 PST',\n    status: 'acknowledged',\n    statusLabel: 'Acknowledged & Compliant',\n    sha256Signature: '5c0b3a7f4802ef1904a8b71239c0812e4f8a9e62b11d87e0fa1943892c55b38d',\n    ipAddress: '198.51.100.91 (Corp Gateway)',\n    dataSources: ['AWS CloudTrail', 'GitHub Repos', 'Slack', 'Terraform Cloud'],\n    preservedAssets: '340 TF Workspaces · CloudTrail WORM Logs',\n  },\n]\n\nconst preservationSystemsData: PreservationSystem[] = [\n  {\n    id: 'sys-slack',\n    name: 'Slack Enterprise Grid',\n    integrationType: 'e-Discovery Legal Hold Lock',\n    status: 'active',\n    statusLabel: 'Active Hold Lock · Auto-Tombstoning Halted',\n    scope: 'All direct messages, private channels, and file attachments preserved.',\n    lockProtocol: 'Immutable Hold Policy #LIT-842',\n    lastSync: 'Today at 08:15 UTC',\n    iconName: 'slack',\n  },\n  {\n    id: 'sys-aws',\n    name: 'AWS S3 Object Lock',\n    integrationType: 'WORM Compliance Storage Mode',\n    status: 'active',\n    statusLabel: 'Compliance Mode Verified · Deletions Prohibited',\n    scope: 'Production log buckets and database snapshot retention override active.',\n    lockProtocol: 'SEC Rule 17a-4 / FINRA WORM Policy',\n    lastSync: 'Today at 07:30 UTC',\n    iconName: 'aws',\n  },\n  {\n    id: 'sys-google',\n    name: 'Google Workspace Vault',\n    integrationType: 'Continuous Matter Retention Hold',\n    status: 'active',\n    statusLabel: 'Indefinite Preservation Active',\n    scope: 'Gmail threads, Google Drive revisions, and Google Chat transcripts frozen.',\n    lockProtocol: 'Vault Discovery Rule #LIT-2026-0842',\n    lastSync: 'Today at 09:00 UTC',\n    iconName: 'google',\n  },\n  {\n    id: 'sys-github',\n    name: 'GitHub Enterprise Server',\n    integrationType: 'Repository & Code Audit Preservation',\n    status: 'active',\n    statusLabel: 'Audit Lock Active · Force-Pushing Blocked',\n    scope: 'Commit trees, Pull Request reviews, and issue histories locked against deletion.',\n    lockProtocol: 'Branch & Audit Immutability Policy',\n    lastSync: 'Today at 06:45 UTC',\n    iconName: 'github',\n  },\n]\n\nconst activeFilter = ref<string>(props.defaultFilter)\nconst searchQuery = ref<string>('')\nconst selectedReceipt = ref<CustodianRecord | null>(null)\nconst isExportingLog = ref(false)\nconst notificationBanner = ref<{ message: string; type: 'success' | 'info' | 'warning' } | null>(null)\nconst isIssueHoldModalOpen = ref(false)\n\n// New Legal Hold Form state\nconst newHoldForm = ref({\n  custodianName: '',\n  custodianRole: '',\n  custodianEmail: '',\n  department: 'engineering',\n  scopeNotes:\n    'All source code repositories, direct messages, and design specifications relevant to Matter #LIT-2026-0842.',\n})\n\nconst copiedSignature = ref(false)\nconst copiedVerifyLink = ref(false)\n\nconst filterCategories = [\n  { id: 'all', label: 'All Custodians', count: 5 },\n  { id: 'engineering', label: 'Engineering', count: 3 },\n  { id: 'product', label: 'Product & Design', count: 1 },\n  { id: 'operations', label: 'Operations & Legal', count: 1 },\n]\n\nconst filteredCustodians = computed(() => {\n  return custodiansData.filter((custodian) => {\n    let matchesCategory = true\n    if (activeFilter.value === 'engineering') {\n      matchesCategory = custodian.departmentCategory === 'engineering'\n    } else if (activeFilter.value === 'product') {\n      matchesCategory = custodian.departmentCategory === 'product'\n    } else if (activeFilter.value === 'operations') {\n      matchesCategory = custodian.departmentCategory === 'operations'\n    }\n\n    const query = searchQuery.value.trim().toLowerCase()\n    if (!query) return matchesCategory\n\n    const matchesSearch =\n      custodian.name.toLowerCase().includes(query) ||\n      custodian.role.toLowerCase().includes(query) ||\n      custodian.department.toLowerCase().includes(query) ||\n      custodian.email.toLowerCase().includes(query) ||\n      custodian.dataSources.some((source) => source.toLowerCase().includes(query)) ||\n      custodian.id.toLowerCase().includes(query)\n\n    return matchesCategory && matchesSearch\n  })\n})\n\nfunction showNotification(message: string, type: 'success' | 'info' | 'warning' = 'success', duration = 4000) {\n  notificationBanner.value = { message, type }\n  setTimeout(() => {\n    if (notificationBanner.value?.message === message) {\n      notificationBanner.value = null\n    }\n  }, duration)\n}\n\nfunction handleExportAuditLog() {\n  if (isExportingLog.value) return\n  isExportingLog.value = true\n  showNotification(\n    'Compiling full litigation hold preservation receipts and cryptographic audit ledger...',\n    'info',\n    2000,\n  )\n\n  setTimeout(() => {\n    isExportingLog.value = false\n    showNotification(\n      'Export complete: LIT-2026-0842_Custodian_Preservation_Audit_Package_2026-08-21.zip (2.4 MB · 18 Custodian Receipts)',\n      'success',\n      5000,\n    )\n  }, 1400)\n}\n\nfunction openReceiptModal(custodian: CustodianRecord) {\n  selectedReceipt.value = custodian\n  copiedSignature.value = false\n  copiedVerifyLink.value = false\n}\n\nfunction handleExportAndClose() {\n  handleExportAuditLog()\n  closeReceiptModal()\n}\n\nfunction closeReceiptModal() {\n  selectedReceipt.value = null\n}\n\nfunction handleSendReminder(custodian: CustodianRecord) {\n  showNotification(\n    `Re-affirmation reminder & notice receipt dispatched to ${custodian.name} (${custodian.email}).`,\n    'info',\n  )\n}\n\nfunction handleRecertify(custodian: CustodianRecord) {\n  showNotification(\n    `Semi-annual re-certification workflow initiated for ${custodian.name}. Acknowledgment due within 5 business days.`,\n    'success',\n  )\n}\n\nfunction handleReleaseFromHold(custodian: CustodianRecord) {\n  showNotification(\n    `Hold release request queued for ${custodian.name} (${custodian.id}). Pending final authorization from Lead Litigation Counsel.`,\n    'warning',\n  )\n}\n\nfunction handleOpenIssueHoldModal() {\n  isIssueHoldModalOpen.value = true\n}\n\nfunction handleCloseIssueHoldModal() {\n  isIssueHoldModalOpen.value = false\n  newHoldForm.value = {\n    custodianName: '',\n    custodianRole: '',\n    custodianEmail: '',\n    department: 'engineering',\n    scopeNotes:\n      'All source code repositories, direct messages, and design specifications relevant to Matter #LIT-2026-0842.',\n  }\n}\n\nfunction handleIssueHoldSubmit() {\n  if (!newHoldForm.value.custodianName || !newHoldForm.value.custodianEmail) {\n    showNotification('Please enter custodian name and corporate email address.', 'warning')\n    return\n  }\n\n  const name = newHoldForm.value.custodianName\n  handleCloseIssueHoldModal()\n  showNotification(\n    `Legal Hold Notice #LIT-2026-0842-N6 dispatched to ${name}. Auto-purge suspension lock applied across endpoints.`,\n    'success',\n    5000,\n  )\n}\n\nfunction copyToClipboard(text: string, type: 'signature' | 'verifyLink') {\n  navigator.clipboard?.writeText(text)\n  if (type === 'signature') {\n    copiedSignature.value = true\n    setTimeout(() => (copiedSignature.value = false), 2000)\n  } else if (type === 'verifyLink') {\n    copiedVerifyLink.value = true\n    setTimeout(() => (copiedVerifyLink.value = false), 2000)\n  }\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    if (selectedReceipt.value) closeReceiptModal()\n    if (isIssueHoldModalOpen.value) handleCloseIssueHoldModal()\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', handleKeyDown)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', handleKeyDown)\n})\n</script>\n\n<template>\n  <div :class=\"cn('w-full space-y-6', props.class)\" data-slot=\"subpoena-legal-hold-manager\">\n    <!-- Header Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-5 sm:p-6\">\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between\">\n          <!-- Left Column: Matter Details & Compliance Badges -->\n          <div class=\"space-y-3\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"text-muted-foreground text-xs font-medium\">\n                Enterprise e-Discovery & Litigation Readiness\n              </span>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                Fed. R. Civ. P. 37(e) Active Hold\n              </Badge>\n            </div>\n\n            <div>\n              <h2 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                Matter #LIT-2026-0842: In re UI Component Intellectual Property\n              </h2>\n              <p class=\"text-muted-foreground mt-1 text-sm font-medium\">\n                Federal Civil Litigation · US District Court SDNY\n              </p>\n            </div>\n\n            <!-- Matter Metadata Strip -->\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-3 pt-1 text-xs\">\n              <div class=\"flex items-center gap-1.5 font-mono tabular-nums\">\n                <span class=\"text-muted-foreground\">Docket:</span>\n                <span class=\"text-foreground font-medium\">1:26-cv-04892-RMB</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-3.5\" />\n              <div class=\"flex items-center gap-1\">\n                <Scale class=\"text-muted-foreground size-3.5\" />\n                <span>Hon. Richard M. Berman</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-3.5\" />\n              <div class=\"flex items-center gap-1\">\n                <Shield class=\"text-muted-foreground size-3.5\" />\n                <span>Counsel: Vance &amp; Sterling LLP</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-3.5\" />\n              <div class=\"flex items-center gap-1.5 font-mono tabular-nums\">\n                <Calendar class=\"text-muted-foreground size-3.5\" />\n                <span>Issued: Aug 14, 2026</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column: Active Status Pill & Primary Action Buttons -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center lg:flex-col lg:items-end\">\n            <!-- Hold Status Pill -->\n            <div\n              class=\"border-success/30 bg-success/10 text-success dark:bg-success/10 text-success inline-flex items-center gap-2.5 rounded-lg border px-3.5 py-2 text-xs font-semibold shadow-xs\"\n            >\n              <ShieldCheck class=\"text-success size-4.5 shrink-0\" />\n              <div class=\"flex flex-col text-left\">\n                <span>Active Preservation Hold · 100% Custodian Compliance</span>\n                <span class=\"text-success/90 text-xs font-normal\"> 18/18 Signed Receipts · Auto-Purge Suspended </span>\n              </div>\n            </div>\n\n            <!-- Action Buttons -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"hover:bg-accent gap-1.5 text-xs shadow-xs\"\n                :disabled=\"isExportingLog\"\n                @click=\"handleExportAuditLog\"\n              >\n                <RefreshCw v-if=\"isExportingLog\" class=\"size-3.5 animate-spin\" />\n                <FileSpreadsheet v-else class=\"text-foreground size-3.5\" />\n                <span>{{ isExportingLog ? 'Exporting Package...' : 'Export Custodian Audit Log' }}</span>\n              </Button>\n\n              <Button variant=\"default\" size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\" @click=\"handleOpenIssueHoldModal\">\n                <Plus class=\"size-3.5\" />\n                <span>Issue New Legal Hold</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Dynamic notification banner -->\n        <div\n          v-if=\"notificationBanner\"\n          :class=\"\n            cn(\n              'mt-4 flex items-center gap-2 rounded-md border p-2.5 text-xs transition-colors',\n              notificationBanner.type === 'success' &&\n                'border-success/30 bg-success/10 text-success dark:bg-success/10 dark:text-foreground',\n              notificationBanner.type === 'info' &&\n                'border-info/30 bg-info/10 text-info dark:bg-info/10 dark:text-foreground',\n              notificationBanner.type === 'warning' &&\n                'border-warning/30 bg-warning/10 text-warning dark:bg-warning/10 dark:text-foreground',\n            )\n          \"\n        >\n          <CheckCircle2 v-if=\"notificationBanner.type === 'success'\" class=\"text-success size-4 shrink-0\" />\n          <Info v-else-if=\"notificationBanner.type === 'info'\" class=\"text-info size-4 shrink-0\" />\n          <AlertTriangle v-else class=\"text-warning size-4 shrink-0\" />\n          <span>{{ notificationBanner.message }}</span>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 Legal Hold Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Total Custodians Notified -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Total Custodians Notified </CardTitle>\n          <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n            <Users class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div\n              class=\"text-foreground flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\"\n            >\n              18 Custodians\n            </div>\n            <p class=\"text-muted-foreground text-xs\">18 / 18 custodians active under hold notice</p>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"100\" class=\"bg-primary/20 h-1.5\" />\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">Notice Delivery</span>\n              <span class=\"font-mono tabular-nums\">100% delivered</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Acknowledgements Received -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Acknowledgements Received </CardTitle>\n          <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-md\">\n            <FileCheck class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div\n              class=\"text-success text-success flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\"\n            >\n              18 / 18 Signed · 100%\n            </div>\n            <p class=\"text-muted-foreground text-xs\">Zero overdue · 100% compliant response rate</p>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"100\" class=\"bg-success/20 h-1.5\" />\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"text-success font-medium\">Zero Non-Responsive</span>\n              <span class=\"font-mono tabular-nums\">0 pending</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: Auto-Purge Suspended Systems -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Auto-Purge Suspended Systems </CardTitle>\n          <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-md\">\n            <Lock class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground font-mono text-lg font-bold tracking-tight tabular-nums sm:text-xl\">\n              4 Systems Active\n            </div>\n            <p class=\"text-info truncate text-xs font-medium\">Gmail, Slack, S3, GitHub</p>\n          </div>\n          <div class=\"border-border bg-muted/40 flex items-center justify-between rounded border px-2 py-1 text-xs\">\n            <span class=\"text-muted-foreground\">Purge Status</span>\n            <Badge wrap variant=\"outline\" class=\"border-info/30 text-info font-mono text-xs\"> Retention Paused </Badge>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: Next Annual Re-certification -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Next Re-certification </CardTitle>\n          <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-md\">\n            <CalendarClock class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground font-mono text-lg font-bold tracking-tight tabular-nums sm:text-xl\">\n              In 6 Months · Feb 2027\n            </div>\n            <p class=\"text-muted-foreground text-xs\">Semi-annual custodian confirmation cycle</p>\n          </div>\n          <div class=\"border-border bg-muted/40 flex items-center justify-between rounded border px-2 py-1 text-xs\">\n            <span class=\"text-muted-foreground\">Countdown</span>\n            <span class=\"text-warning text-warning font-mono font-medium tabular-nums\"> 178 days remaining </span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Custodian Filter Toolbar & Search -->\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n      <!-- Category Filter Pills -->\n      <div class=\"flex flex-wrap items-center gap-1.5\">\n        <button\n          v-for=\"cat in filterCategories\"\n          :key=\"cat.id\"\n          type=\"button\"\n          :class=\"\n            cn(\n              'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n              activeFilter === cat.id\n                ? 'bg-primary text-primary-foreground shadow-xs'\n                : 'border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground border',\n            )\n          \"\n          @click=\"activeFilter = cat.id\"\n        >\n          <span>{{ cat.label }}</span>\n          <span\n            :class=\"\n              cn(\n                'py-0.2 rounded-full px-1.5 font-mono text-xs tabular-nums',\n                activeFilter === cat.id\n                  ? 'bg-primary-foreground/20 text-primary-foreground'\n                  : 'bg-muted text-muted-foreground',\n              )\n            \"\n          >\n            {{ cat.count }}\n          </span>\n        </button>\n      </div>\n\n      <!-- Search Input -->\n      <div class=\"relative w-full sm:w-72\">\n        <Search class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n        <input\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Filter custodians, roles, data sources...\"\n          class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border pr-8 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n        />\n        <button\n          aria-label=\"Clear search\"\n          v-if=\"searchQuery\"\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2\"\n          @click=\"searchQuery = ''\"\n        >\n          <X class=\"size-3.5\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Custodian Acknowledgement Roster Table Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-foreground text-base font-semibold tracking-tight\">\n              Custodian Acknowledgement Roster &amp; Preservation Status\n            </CardTitle>\n            <CardDescription class=\"text-muted-foreground text-xs\">\n              Active enterprise custodians, certified preservation receipts, and electronic data source scopes.\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2 pt-2 sm:pt-0\">\n            <span class=\"text-muted-foreground text-xs\">\n              Showing\n              <span class=\"text-foreground font-mono font-medium tabular-nums\">{{ filteredCustodians.length }}</span> of\n              <span class=\"text-foreground font-mono font-medium tabular-nums\">5</span> sample custodians\n            </span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow class=\"hover:bg-transparent\">\n                <TableHead\n                  class=\"text-muted-foreground min-w-[260px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Custodian &amp; Department\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[130px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Notice Sent Date\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[170px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Acknowledged Date\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[170px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Compliance Status\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[280px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Data Sources Preserved\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[140px] py-3 text-right text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Actions\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n\n            <TableBody>\n              <TableRow\n                v-for=\"custodian in filteredCustodians\"\n                :key=\"custodian.id\"\n                class=\"hover:bg-muted/30 transition-colors\"\n              >\n                <!-- Custodian Avatar, Name & Department -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar class=\"size-8 shrink-0\">\n                      <AvatarFallback class=\"text-primary bg-primary/10 text-xs font-semibold\">\n                        {{ custodian.avatarInitials }}\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"min-w-0 space-y-0.5\">\n                      <div class=\"flex items-center gap-2\">\n                        <span class=\"text-foreground truncate text-sm font-semibold\">\n                          {{ custodian.name }}\n                        </span>\n                        <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                          {{ custodian.id }}\n                        </span>\n                      </div>\n                      <div class=\"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs\">\n                        <span class=\"text-foreground font-medium\">{{ custodian.role }}</span>\n                        <span>·</span>\n                        <span>{{ custodian.department }}</span>\n                      </div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Notice Sent Date -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"text-foreground flex items-center gap-1.5 font-mono text-xs tabular-nums\">\n                    <Send class=\"text-muted-foreground size-3.5\" />\n                    <span>{{ custodian.noticeSentDate }}</span>\n                  </div>\n                </TableCell>\n\n                <!-- Acknowledged Date -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground flex items-center gap-1.5 font-mono text-xs font-medium tabular-nums\">\n                      <Clock class=\"text-success size-3.5 shrink-0\" />\n                      <span>{{ custodian.acknowledgedDate }}</span>\n                    </div>\n                    <div\n                      class=\"text-muted-foreground max-w-[160px] truncate font-mono text-xs\"\n                      :title=\"custodian.ipAddress\"\n                    >\n                      IP: {{ custodian.ipAddress }}\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Compliance Status Badge -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-1\">\n                    <div\n                      class=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold\"\n                    >\n                      <BadgeCheck class=\"text-success size-3.5 shrink-0\" />\n                      <span>{{ custodian.statusLabel }}</span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">Receipt Verified</p>\n                  </div>\n                </TableCell>\n\n                <!-- Data Sources Preserved -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-1.5\">\n                    <div class=\"flex flex-wrap items-center gap-1\">\n                      <Badge\n                        wrap\n                        v-for=\"source in custodian.dataSources\"\n                        :key=\"source\"\n                        variant=\"secondary\"\n                        class=\"px-2 py-0.5 text-xs font-normal\"\n                      >\n                        {{ source }}\n                      </Badge>\n                    </div>\n                    <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                      Scope: {{ custodian.preservedAssets }}\n                    </p>\n                  </div>\n                </TableCell>\n\n                <!-- Actions Dropdown -->\n                <TableCell class=\"py-3.5 text-right align-middle\">\n                  <div class=\"flex items-center justify-end gap-1.5\">\n                    <Button\n                      variant=\"outline\"\n                      size=\"xs\"\n                      class=\"hover:bg-accent h-7 gap-1 px-2.5 text-xs font-medium shadow-2xs\"\n                      @click=\"openReceiptModal(custodian)\"\n                    >\n                      <FileCheck class=\"text-muted-foreground size-3\" />\n                      <span>Receipt</span>\n                    </Button>\n\n                    <DropdownMenu>\n                      <DropdownMenuTrigger as-child>\n                        <Button\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          class=\"text-muted-foreground hover:text-foreground size-7 p-0\"\n                        >\n                          <MoreHorizontal class=\"size-4\" />\n                          <span class=\"sr-only\">Open custodian options for {{ custodian.name }}</span>\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" class=\"w-52\">\n                        <DropdownMenuLabel class=\"text-xs font-semibold\"> Custodian Actions </DropdownMenuLabel>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem class=\"cursor-pointer text-xs\" @click=\"openReceiptModal(custodian)\">\n                          <FileCheck class=\"text-success mr-2 size-3.5\" />\n                          <span>View Signed Receipt</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem class=\"cursor-pointer text-xs\" @click=\"handleSendReminder(custodian)\">\n                          <Mail class=\"text-muted-foreground mr-2 size-3.5\" />\n                          <span>Send Re-affirmation Notice</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem class=\"cursor-pointer text-xs\" @click=\"handleRecertify(custodian)\">\n                          <RotateCcw class=\"text-muted-foreground mr-2 size-3.5\" />\n                          <span>Initiate Re-certification</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem\n                          class=\"text-destructive focus:text-destructive cursor-pointer text-xs\"\n                          @click=\"handleReleaseFromHold(custodian)\"\n                        >\n                          <UserX class=\"text-destructive mr-2 size-3.5\" />\n                          <span>Release from Hold...</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </div>\n                </TableCell>\n              </TableRow>\n\n              <TableRow v-if=\"filteredCustodians.length === 0\">\n                <TableCell colspan=\"6\" class=\"text-muted-foreground py-8 text-center text-xs\">\n                  No custodians match your search or filter criteria.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n\n      <!-- Table Sub-Footer -->\n      <CardFooter\n        class=\"border-border bg-muted/20 text-muted-foreground flex flex-col gap-2 border-t p-4 text-xs sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <ShieldCheck class=\"text-success size-4 shrink-0\" />\n          <span>\n            All custodian preservation receipts are immutably timestamped and hashed under SEC &amp; FRCP 37(e)\n            evidentiary rules.\n          </span>\n        </div>\n        <div class=\"flex items-center gap-2 font-mono tabular-nums\">\n          <span>Roster Hash: e7d9-4081-9bf2</span>\n          <span class=\"text-success font-medium\">18 Total Certified</span>\n        </div>\n      </CardFooter>\n    </Card>\n\n    <!-- System Preservation Integrations Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <Server class=\"text-primary size-4\" />\n              <CardTitle class=\"text-foreground text-base font-semibold tracking-tight\">\n                System Preservation Integrations &amp; Automated Storage Locks\n              </CardTitle>\n            </div>\n            <CardDescription class=\"text-muted-foreground text-xs\">\n              Automated retention policy overrides and immutable WORM lock status across enterprise infrastructure.\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"border-info/30 text-info w-fit text-xs\"> 4 / 4 Systems Enforced </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-5 pt-2\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          <div\n            v-for=\"system in preservationSystemsData\"\n            :key=\"system.id\"\n            class=\"border-border bg-muted/30 hover:bg-muted/50 flex flex-col justify-between space-y-3 rounded-lg border p-4 transition-colors\"\n          >\n            <div class=\"space-y-2\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    class=\"border-border bg-card text-foreground flex size-8 items-center justify-center rounded-md border shadow-2xs\"\n                  >\n                    <Lock class=\"text-success size-4\" />\n                  </div>\n                  <div>\n                    <h4 class=\"text-foreground text-sm font-semibold\">\n                      {{ system.name }}\n                    </h4>\n                    <p class=\"text-muted-foreground text-xs\">\n                      {{ system.integrationType }}\n                    </p>\n                  </div>\n                </div>\n                <div\n                  class=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold\"\n                >\n                  <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                  <span>Locked</span>\n                </div>\n              </div>\n\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                {{ system.scope }}\n              </p>\n            </div>\n\n            <div class=\"border-border/60 space-y-1.5 border-t pt-2.5 text-xs\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Enforcement:</span>\n                <span class=\"text-foreground font-mono font-medium\">{{ system.lockProtocol }}</span>\n              </div>\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Last Audit Sync:</span>\n                <span class=\"text-muted-foreground font-mono tabular-nums\">{{ system.lastSync }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Custodian Signed Receipt & Cryptographic Audit Modal -->\n    <div\n      v-if=\"selectedReceipt\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n      @click.self=\"closeReceiptModal\"\n    >\n      <div\n        class=\"border-border bg-card text-card-foreground animate-in fade-in zoom-in-95 relative w-full max-w-2xl overflow-hidden rounded-xl border shadow-sm duration-200\"\n      >\n        <!-- Modal Top Bar -->\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-5 py-3.5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div class=\"bg-success/10 text-success flex size-7 items-center justify-center rounded-full\">\n              <BadgeCheck class=\"size-4\" />\n            </div>\n            <div>\n              <h3 class=\"text-foreground text-xs font-semibold\">Preservation Acknowledgment Receipt</h3>\n              <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                Record ID: {{ selectedReceipt.id }} · Matter #LIT-2026-0842\n              </p>\n            </div>\n          </div>\n\n          <button\n            type=\"button\"\n            class=\"text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            aria-label=\"Close receipt modal\"\n            @click=\"closeReceiptModal\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n\n        <!-- Receipt Document Body -->\n        <div class=\"max-h-[75vh] space-y-5 overflow-y-auto p-6\">\n          <!-- Legal Receipt Certificate Frame -->\n          <div class=\"border-success/30 bg-success/5 dark:bg-success/10 relative rounded-lg border-2 border-dashed p-5\">\n            <div class=\"border-border/80 flex items-center justify-between border-b pb-3\">\n              <div class=\"space-y-0.5\">\n                <span class=\"text-success text-xs font-semibold tracking-wide\">\n                  Certified Custodian E-Discovery Receipt\n                </span>\n                <h4 class=\"text-foreground text-base font-bold\">Litigation Hold Notice &amp; Preservation Directive</h4>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"border-success/40 text-success text-xs font-semibold\">\n                100% Valid &amp; Attested\n              </Badge>\n            </div>\n\n            <div class=\"text-foreground mt-4 space-y-3 text-xs leading-relaxed\">\n              <div class=\"bg-card/60 border-border/60 grid grid-cols-2 gap-3 rounded-md border p-3 sm:grid-cols-3\">\n                <div>\n                  <span class=\"text-muted-foreground block text-xs\">Custodian Name:</span>\n                  <span class=\"text-foreground text-sm font-semibold\">{{ selectedReceipt.name }}</span>\n                </div>\n                <div>\n                  <span class=\"text-muted-foreground block text-xs\">Title &amp; Role:</span>\n                  <span class=\"text-foreground font-medium\">{{ selectedReceipt.role }}</span>\n                </div>\n                <div>\n                  <span class=\"text-muted-foreground block text-xs\">Corporate Email:</span>\n                  <span class=\"text-foreground font-mono\">{{ selectedReceipt.email }}</span>\n                </div>\n              </div>\n\n              <!-- Legal Notice Text -->\n              <div class=\"text-muted-foreground bg-muted/40 border-border/60 space-y-1.5 rounded-md border p-3 text-xs\">\n                <p class=\"text-foreground font-semibold\">Acknowledgment Declaration &amp; Legal Affirmation:</p>\n                <p>\n                  \"I hereby confirm receipt and comprehension of the Formal Legal Hold Notice for Matter #LIT-2026-0842.\n                  I have immediately ceased all automated or manual deletion, purging, and overwriting of relevant\n                  electronic documents, chat logs, code commits, emails, and physical files within my custody or\n                  control.\"\n                </p>\n              </div>\n\n              <!-- Preserved Repositories -->\n              <div class=\"space-y-1 pt-1\">\n                <span class=\"text-foreground text-xs font-semibold\">Mandatory Preserved Repositories:</span>\n                <div class=\"flex flex-wrap gap-1.5 pt-0.5\">\n                  <Badge\n                    wrap\n                    v-for=\"source in selectedReceipt.dataSources\"\n                    :key=\"source\"\n                    variant=\"secondary\"\n                    class=\"text-xs\"\n                  >\n                    {{ source }}\n                  </Badge>\n                </div>\n              </div>\n            </div>\n\n            <!-- Attestation Timestamps -->\n            <div class=\"border-border/60 mt-4 grid grid-cols-2 gap-3 border-t pt-3 text-xs sm:grid-cols-3\">\n              <div>\n                <span class=\"text-muted-foreground block\">Notice Dispatched:</span>\n                <span class=\"text-foreground font-mono font-medium tabular-nums\">{{\n                  selectedReceipt.noticeSentDate\n                }}</span>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground block\">Signed &amp; Acknowledged:</span>\n                <span class=\"text-success text-success font-mono font-medium tabular-nums\">\n                  {{ selectedReceipt.acknowledgedDate }}\n                </span>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground block\">Origin Host IP:</span>\n                <span class=\"text-foreground font-mono tabular-nums\">{{ selectedReceipt.ipAddress }}</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Cryptographic SHA-256 Signature Box -->\n          <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <ShieldCheck class=\"text-success size-3.5\" />\n                <span>Digital Signature Digest (SHA-256)</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"text-primary flex items-center gap-1 text-xs font-medium hover:underline\"\n                @click=\"copyToClipboard(selectedReceipt.sha256Signature, 'signature')\"\n              >\n                <Check v-if=\"copiedSignature\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copiedSignature ? 'Copied' : 'Copy Hash' }}</span>\n              </button>\n            </div>\n            <p\n              class=\"text-muted-foreground bg-background/80 border-border rounded border p-2 font-mono text-xs break-all\"\n            >\n              {{ selectedReceipt.sha256Signature }}\n            </p>\n            <div\n              class=\"border-border/50 text-muted-foreground flex flex-wrap items-center justify-between gap-2 border-t pt-1\"\n            >\n              <span>Attestation Engine: UIPKGE Legal Vault v4</span>\n              <span class=\"font-mono tabular-nums\">Evidentiary Standard: FRCP 37(e)</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Actions Footer -->\n        <div\n          class=\"border-border bg-muted/40 flex flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"text-xs\"\n            @click=\"copyToClipboard(`https://uipkge.dev/legal/receipt/${selectedReceipt.id}`, 'verifyLink')\"\n          >\n            <Check v-if=\"copiedVerifyLink\" class=\"text-success size-3.5\" />\n            <Share2 v-else class=\"size-3.5\" />\n            <span>{{ copiedVerifyLink ? 'Link Copied!' : 'Copy Verification Link' }}</span>\n          </Button>\n\n          <div class=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"closeReceiptModal\"> Close </Button>\n            <Button\n              aria-label=\"Download attachment\"\n              variant=\"default\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs shadow-xs\"\n              @click=\"handleExportAndClose\"\n            >\n              <Download class=\"size-3.5\" />\n              <span>Download Signed PDF</span>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Issue New Legal Hold Modal -->\n    <div\n      v-if=\"isIssueHoldModalOpen\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n      @click.self=\"handleCloseIssueHoldModal\"\n    >\n      <div\n        class=\"border-border bg-card text-card-foreground animate-in fade-in zoom-in-95 relative w-full max-w-lg overflow-hidden rounded-xl border shadow-sm duration-200\"\n      >\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-5 py-3.5\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-full\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div>\n              <h3 class=\"text-foreground text-sm font-bold\">Issue New Legal Hold Notice</h3>\n              <p class=\"text-muted-foreground text-xs\">Matter #LIT-2026-0842 · Dispatch formal preservation notice</p>\n            </div>\n          </div>\n          <button\n            aria-label=\"Close issue hold dialog\"\n            type=\"button\"\n            class=\"text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1.5 focus-visible:ring-2 focus-visible:outline-none\"\n            @click=\"handleCloseIssueHoldModal\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n\n        <div class=\"space-y-4 p-5 text-xs\">\n          <div class=\"border-info/30 bg-info/10 text-foreground rounded-md border p-3\">\n            <div class=\"flex gap-2\">\n              <Info class=\"text-info size-4 shrink-0\" />\n              <p class=\"leading-relaxed\">\n                Issuing a notice automatically suspends auto-tombstoning and scheduled purges across Gmail, Slack, and\n                cloud storage for this custodian.\n              </p>\n            </div>\n          </div>\n\n          <div class=\"space-y-3\">\n            <div>\n              <label class=\"text-foreground mb-1 block font-semibold\"> Custodian Full Name </label>\n              <input\n                v-model=\"newHoldForm.custodianName\"\n                type=\"text\"\n                placeholder=\"e.g. Jordan Mitchell\"\n                class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-3 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n              />\n            </div>\n\n            <div>\n              <label class=\"text-foreground mb-1 block font-semibold\"> Corporate Email Address </label>\n              <input\n                v-model=\"newHoldForm.custodianEmail\"\n                type=\"email\"\n                placeholder=\"e.g. jordan.mitchell@uipkge.internal\"\n                class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-3 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n              />\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-3\">\n              <div>\n                <label class=\"text-foreground mb-1 block font-semibold\"> Title &amp; Role </label>\n                <input\n                  v-model=\"newHoldForm.custodianRole\"\n                  type=\"text\"\n                  placeholder=\"e.g. Principal Engineer\"\n                  class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-3 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                />\n              </div>\n              <div>\n                <label class=\"text-foreground mb-1 block font-semibold\"> Department </label>\n                <select\n                  v-model=\"newHoldForm.department\"\n                  class=\"border-input bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-md border px-2 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <option value=\"engineering\">Engineering</option>\n                  <option value=\"product\">Product &amp; Design</option>\n                  <option value=\"operations\">Operations &amp; Legal</option>\n                </select>\n              </div>\n            </div>\n\n            <div>\n              <label class=\"text-foreground mb-1 block font-semibold\">\n                Preservation Scope &amp; Custom Instructions\n              </label>\n              <textarea\n                v-model=\"newHoldForm.scopeNotes\"\n                rows=\"3\"\n                class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border p-2.5 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n              />\n            </div>\n          </div>\n        </div>\n\n        <div class=\"border-border bg-muted/40 flex items-center justify-end gap-2 border-t p-4\">\n          <Button\n            aria-label=\"Close issue hold dialog\"\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"text-xs\"\n            @click=\"handleCloseIssueHoldModal\"\n          >\n            Cancel\n          </Button>\n          <Button variant=\"default\" size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\" @click=\"handleIssueHoldSubmit\">\n            <Send class=\"size-3.5\" />\n            <span>Dispatch Notice &amp; Apply Lock</span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SubpoenaLegalHoldManager.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts, and compliance audit log.",
  "categories": [
    "legal",
    "app",
    "compliance",
    "security"
  ]
}