{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "subpoena-legal-hold-manager",
  "title": "Subpoena Legal Hold Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/subpoena-legal-hold-manager/subpoena-legal-hold-manager.component.ts",
      "content": "// Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts,\n// and compliance audit log. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, computed, inject, signal } from '@angular/core'\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  LucideAngularModule,\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  UserX,\n  Users,\n  X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardFooterComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n  UiDropdownMenuComponent,\n  UiDropdownMenuContentComponent,\n  UiDropdownMenuItemComponent,\n  UiDropdownMenuLabelComponent,\n  UiDropdownMenuSeparatorComponent,\n  UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiTableBodyComponent,\n  UiTableCellComponent,\n  UiTableComponent,\n  UiTableHeadComponent,\n  UiTableHeaderComponent,\n  UiTableRowComponent,\n} from '@/ui/table/table.component'\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\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 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 defaultScopeNotes =\n  'All source code repositories, direct messages, and design specifications relevant to Matter #LIT-2026-0842.'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-subpoena-legal-hold-manager, [ui-subpoena-legal-hold-manager]',\n  standalone: true,\n  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardFooterComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiDropdownMenuComponent,\n    UiDropdownMenuContentComponent,\n    UiDropdownMenuItemComponent,\n    UiDropdownMenuLabelComponent,\n    UiDropdownMenuSeparatorComponent,\n    UiDropdownMenuTriggerComponent,\n    UiProgressComponent,\n    UiSeparatorComponent,\n    UiTableBodyComponent,\n    UiTableCellComponent,\n    UiTableComponent,\n    UiTableHeadComponent,\n    UiTableHeaderComponent,\n    UiTableRowComponent,\n  ],\n  template: `\n    <div data-slot=\"subpoena-legal-hold-manager\" [class]=\"rootClass\">\n      <!-- Header Card -->\n      <div ui-card class=\"border-border bg-card shadow-xs\">\n        <div ui-card-content 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                <span\n                  ui-badge\n                  wrap\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success text-xs font-medium\"\n                >\n                  Fed. R. Civ. P. 37(e) Active Hold\n                </span>\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                <ui-separator orientation=\"vertical\" class=\"h-3.5\" />\n                <div class=\"flex items-center gap-1\">\n                  <lucide-icon [img]=\"Scale\" class=\"text-muted-foreground size-3.5\" />\n                  <span>Hon. Richard M. Berman</span>\n                </div>\n                <ui-separator orientation=\"vertical\" class=\"h-3.5\" />\n                <div class=\"flex items-center gap-1\">\n                  <lucide-icon [img]=\"Shield\" class=\"text-muted-foreground size-3.5\" />\n                  <span>Counsel: Vance &amp; Sterling LLP</span>\n                </div>\n                <ui-separator orientation=\"vertical\" class=\"h-3.5\" />\n                <div class=\"flex items-center gap-1.5 font-mono tabular-nums\">\n                  <lucide-icon [img]=\"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                <lucide-icon [img]=\"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                  ui-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                  @if (isExportingLog()) {\n                    <lucide-icon [img]=\"RefreshCw\" class=\"size-3.5 animate-spin\" />\n                  } @else {\n                    <lucide-icon [img]=\"FileSpreadsheet\" class=\"text-foreground size-3.5\" />\n                  }\n                  <span>{{ isExportingLog() ? 'Exporting Package...' : 'Export Custodian Audit Log' }}</span>\n                </button>\n\n                <button\n                  ui-button\n                  variant=\"default\"\n                  size=\"sm\"\n                  class=\"gap-1.5 text-xs shadow-xs\"\n                  (click)=\"handleOpenIssueHoldModal()\"\n                >\n                  <lucide-icon [img]=\"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          @if (notificationBanner(); as banner) {\n            <div [class]=\"bannerClass(banner.type)\">\n              @if (banner.type === 'success') {\n                <lucide-icon [img]=\"CheckCircle2\" class=\"text-success size-4 shrink-0\" />\n              } @else if (banner.type === 'info') {\n                <lucide-icon [img]=\"Info\" class=\"text-info size-4 shrink-0\" />\n              } @else {\n                <lucide-icon [img]=\"AlertTriangle\" class=\"text-warning size-4 shrink-0\" />\n              }\n              <span>{{ banner.message }}</span>\n            </div>\n          }\n        </div>\n      </div>\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        <div\n          ui-card\n          class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n        >\n          <div ui-card-header class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium\">Total Custodians Notified</h3>\n            <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n              <lucide-icon [img]=\"Users\" class=\"size-4.5\" />\n            </div>\n          </div>\n          <div ui-card-content 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              <ui-progress [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          </div>\n        </div>\n\n        <!-- Card 2: Acknowledgements Received -->\n        <div\n          ui-card\n          class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n        >\n          <div ui-card-header class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium\">Acknowledgements Received</h3>\n            <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-md\">\n              <lucide-icon [img]=\"FileCheck\" class=\"size-4.5\" />\n            </div>\n          </div>\n          <div ui-card-content 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              <ui-progress [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          </div>\n        </div>\n\n        <!-- Card 3: Auto-Purge Suspended Systems -->\n        <div\n          ui-card\n          class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n        >\n          <div ui-card-header class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium\">Auto-Purge Suspended Systems</h3>\n            <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-md\">\n              <lucide-icon [img]=\"Lock\" class=\"size-4.5\" />\n            </div>\n          </div>\n          <div ui-card-content 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              <span ui-badge wrap variant=\"outline\" class=\"border-info/30 text-info font-mono text-xs\"\n                >Retention Paused</span\n              >\n            </div>\n          </div>\n        </div>\n\n        <!-- Card 4: Next Annual Re-certification -->\n        <div\n          ui-card\n          class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n        >\n          <div ui-card-header class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium\">Next Re-certification</h3>\n            <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-md\">\n              <lucide-icon [img]=\"CalendarClock\" class=\"size-4.5\" />\n            </div>\n          </div>\n          <div ui-card-content 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          </div>\n        </div>\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          @for (cat of filterCategories; track cat.id) {\n            <button type=\"button\" [class]=\"filterPillClass(cat.id)\" (click)=\"activeFilter.set(cat.id)\">\n              <span>{{ cat.label }}</span>\n              <span [class]=\"filterCountClass(cat.id)\">{{ cat.count }}</span>\n            </button>\n          }\n        </div>\n\n        <!-- Search Input -->\n        <div class=\"relative w-full sm:w-72\">\n          <lucide-icon\n            [img]=\"Search\"\n            class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n          />\n          <input\n            [value]=\"searchQuery()\"\n            (input)=\"searchQuery.set($any($event.target).value)\"\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          @if (searchQuery()) {\n            <button\n              aria-label=\"Clear search\"\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2\"\n              (click)=\"searchQuery.set('')\"\n            >\n              <lucide-icon [img]=\"X\" class=\"size-3.5\" />\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Custodian Acknowledgement Roster Table Card -->\n      <div ui-card class=\"border-border bg-card shadow-xs\">\n        <div ui-card-header 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              <h3 ui-card-title class=\"text-foreground text-base font-semibold tracking-tight\">\n                Custodian Acknowledgement Roster &amp; Preservation Status\n              </h3>\n              <p ui-card-description class=\"text-muted-foreground text-xs\">\n                Active enterprise custodians, certified preservation receipts, and electronic data source scopes.\n              </p>\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\">{{\n                  filteredCustodians().length\n                }}</span>\n                of\n                <span class=\"text-foreground font-mono font-medium tabular-nums\">5</span> sample custodians\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <div ui-card-content class=\"p-0\">\n          <div class=\"overflow-x-auto\">\n            <table ui-table>\n              <thead ui-table-header class=\"bg-muted/40\">\n                <tr ui-table-row class=\"hover:bg-transparent\">\n                  <th\n                    ui-table-head\n                    class=\"text-muted-foreground min-w-[260px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Custodian &amp; Department\n                  </th>\n                  <th\n                    ui-table-head\n                    class=\"text-muted-foreground min-w-[130px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Notice Sent Date\n                  </th>\n                  <th\n                    ui-table-head\n                    class=\"text-muted-foreground min-w-[170px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Acknowledged Date\n                  </th>\n                  <th\n                    ui-table-head\n                    class=\"text-muted-foreground min-w-[170px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Compliance Status\n                  </th>\n                  <th\n                    ui-table-head\n                    class=\"text-muted-foreground min-w-[280px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Data Sources Preserved\n                  </th>\n                  <th\n                    ui-table-head\n                    class=\"text-muted-foreground min-w-[140px] py-3 text-right text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Actions\n                  </th>\n                </tr>\n              </thead>\n\n              <tbody ui-table-body>\n                @for (custodian of filteredCustodians(); track custodian.id) {\n                  <tr ui-table-row class=\"hover:bg-muted/30 transition-colors\">\n                    <!-- Custodian Avatar, Name & Department -->\n                    <td ui-table-cell class=\"py-3.5 align-middle\">\n                      <div class=\"flex items-center gap-3\">\n                        <ui-avatar class=\"size-8 shrink-0\">\n                          <ui-avatar-fallback class=\"text-primary bg-primary/10 text-xs font-semibold\">\n                            {{ custodian.avatarInitials }}\n                          </ui-avatar-fallback>\n                        </ui-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\">{{ custodian.name }}</span>\n                            <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ custodian.id }}</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                    </td>\n\n                    <!-- Notice Sent Date -->\n                    <td ui-table-cell class=\"py-3.5 align-middle\">\n                      <div class=\"text-foreground flex items-center gap-1.5 font-mono text-xs tabular-nums\">\n                        <lucide-icon [img]=\"Send\" class=\"text-muted-foreground size-3.5\" />\n                        <span>{{ custodian.noticeSentDate }}</span>\n                      </div>\n                    </td>\n\n                    <!-- Acknowledged Date -->\n                    <td ui-table-cell class=\"py-3.5 align-middle\">\n                      <div class=\"space-y-0.5\">\n                        <div\n                          class=\"text-foreground flex items-center gap-1.5 font-mono text-xs font-medium tabular-nums\"\n                        >\n                          <lucide-icon [img]=\"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                          [attr.title]=\"custodian.ipAddress\"\n                        >\n                          IP: {{ custodian.ipAddress }}\n                        </div>\n                      </div>\n                    </td>\n\n                    <!-- Compliance Status Badge -->\n                    <td ui-table-cell 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                          <lucide-icon [img]=\"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                    </td>\n\n                    <!-- Data Sources Preserved -->\n                    <td ui-table-cell class=\"py-3.5 align-middle\">\n                      <div class=\"space-y-1.5\">\n                        <div class=\"flex flex-wrap items-center gap-1\">\n                          @for (source of custodian.dataSources; track source) {\n                            <span ui-badge wrap variant=\"secondary\" class=\"px-2 py-0.5 text-xs font-normal\">\n                              {{ source }}\n                            </span>\n                          }\n                        </div>\n                        <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                          Scope: {{ custodian.preservedAssets }}\n                        </p>\n                      </div>\n                    </td>\n\n                    <!-- Actions Dropdown -->\n                    <td ui-table-cell class=\"py-3.5 text-right align-middle\">\n                      <div class=\"flex items-center justify-end gap-1.5\">\n                        <button\n                          ui-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                          <lucide-icon [img]=\"FileCheck\" class=\"text-muted-foreground size-3\" />\n                          <span>Receipt</span>\n                        </button>\n\n                        <ui-dropdown-menu>\n                          <button\n                            ui-button\n                            ui-dropdown-menu-trigger\n                            variant=\"ghost\"\n                            size=\"icon-sm\"\n                            class=\"text-muted-foreground hover:text-foreground size-7 p-0\"\n                          >\n                            <lucide-icon [img]=\"MoreHorizontal\" class=\"size-4\" />\n                            <span class=\"sr-only\">Open custodian options for {{ custodian.name }}</span>\n                          </button>\n                          <ui-dropdown-menu-content align=\"end\" class=\"w-52\">\n                            <ui-dropdown-menu-label class=\"text-xs font-semibold\"\n                              >Custodian Actions</ui-dropdown-menu-label\n                            >\n                            <ui-dropdown-menu-separator />\n                            <ui-dropdown-menu-item\n                              class=\"cursor-pointer text-xs\"\n                              (select)=\"openReceiptModal(custodian)\"\n                            >\n                              <lucide-icon [img]=\"FileCheck\" class=\"text-success mr-2 size-3.5\" />\n                              <span>View Signed Receipt</span>\n                            </ui-dropdown-menu-item>\n                            <ui-dropdown-menu-item\n                              class=\"cursor-pointer text-xs\"\n                              (select)=\"handleSendReminder(custodian)\"\n                            >\n                              <lucide-icon [img]=\"Mail\" class=\"text-muted-foreground mr-2 size-3.5\" />\n                              <span>Send Re-affirmation Notice</span>\n                            </ui-dropdown-menu-item>\n                            <ui-dropdown-menu-item class=\"cursor-pointer text-xs\" (select)=\"handleRecertify(custodian)\">\n                              <lucide-icon [img]=\"RotateCcw\" class=\"text-muted-foreground mr-2 size-3.5\" />\n                              <span>Initiate Re-certification</span>\n                            </ui-dropdown-menu-item>\n                            <ui-dropdown-menu-separator />\n                            <ui-dropdown-menu-item\n                              class=\"text-destructive focus:text-destructive cursor-pointer text-xs\"\n                              (select)=\"handleReleaseFromHold(custodian)\"\n                            >\n                              <lucide-icon [img]=\"UserX\" class=\"text-destructive mr-2 size-3.5\" />\n                              <span>Release from Hold...</span>\n                            </ui-dropdown-menu-item>\n                          </ui-dropdown-menu-content>\n                        </ui-dropdown-menu>\n                      </div>\n                    </td>\n                  </tr>\n                }\n\n                @if (filteredCustodians().length === 0) {\n                  <tr ui-table-row>\n                    <td ui-table-cell colspan=\"6\" class=\"text-muted-foreground py-8 text-center text-xs\">\n                      No custodians match your search or filter criteria.\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        <!-- Table Sub-Footer -->\n        <div\n          ui-card-footer\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            <lucide-icon [img]=\"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        </div>\n      </div>\n\n      <!-- System Preservation Integrations Card -->\n      <div ui-card class=\"border-border bg-card shadow-xs\">\n        <div ui-card-header 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                <lucide-icon [img]=\"Server\" class=\"text-primary size-4\" />\n                <h3 ui-card-title class=\"text-foreground text-base font-semibold tracking-tight\">\n                  System Preservation Integrations &amp; Automated Storage Locks\n                </h3>\n              </div>\n              <p ui-card-description class=\"text-muted-foreground text-xs\">\n                Automated retention policy overrides and immutable WORM lock status across enterprise infrastructure.\n              </p>\n            </div>\n            <span ui-badge wrap variant=\"outline\" class=\"border-info/30 text-info w-fit text-xs\"\n              >4 / 4 Systems Enforced</span\n            >\n          </div>\n        </div>\n\n        <div ui-card-content class=\"p-5 pt-2\">\n          <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n            @for (system of preservationSystems; track system.id) {\n              <div\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                        <lucide-icon [img]=\"Lock\" class=\"text-success size-4\" />\n                      </div>\n                      <div>\n                        <h4 class=\"text-foreground text-sm font-semibold\">{{ system.name }}</h4>\n                        <p class=\"text-muted-foreground text-xs\">{{ system.integrationType }}</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\"></span>\n                      <span>Locked</span>\n                    </div>\n                  </div>\n\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ system.scope }}</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            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Custodian Signed Receipt & Cryptographic Audit Modal -->\n      @if (selectedReceipt(); as receipt) {\n        <div\n          class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n          (click)=\"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            (click)=\"$event.stopPropagation()\"\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                  <lucide-icon [img]=\"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: {{ receipt.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                <lucide-icon [img]=\"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\n                class=\"border-success/30 bg-success/5 dark:bg-success/10 relative rounded-lg border-2 border-dashed p-5\"\n              >\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\">\n                      Litigation Hold Notice &amp; Preservation Directive\n                    </h4>\n                  </div>\n                  <span ui-badge wrap variant=\"outline\" class=\"border-success/40 text-success text-xs font-semibold\">\n                    100% Valid &amp; Attested\n                  </span>\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\">{{ receipt.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\">{{ receipt.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\">{{ receipt.email }}</span>\n                    </div>\n                  </div>\n\n                  <!-- Legal Notice Text -->\n                  <div\n                    class=\"text-muted-foreground bg-muted/40 border-border/60 space-y-1.5 rounded-md border p-3 text-xs\"\n                  >\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\n                      #LIT-2026-0842. I have immediately ceased all automated or manual deletion, purging, and\n                      overwriting of relevant electronic documents, chat logs, code commits, emails, and physical files\n                      within my custody or 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                      @for (source of receipt.dataSources; track source) {\n                        <span ui-badge wrap variant=\"secondary\" class=\"text-xs\">{{ source }}</span>\n                      }\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\">{{ receipt.noticeSentDate }}</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                      {{ receipt.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\">{{ receipt.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                    <lucide-icon [img]=\"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(receipt.sha256Signature, 'signature')\"\n                  >\n                    @if (copiedSignature()) {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3\" />\n                    }\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                  {{ receipt.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                ui-button\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-xs\"\n                (click)=\"copyToClipboard(verifyLink(receipt.id), 'verifyLink')\"\n              >\n                @if (copiedVerifyLink()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" />\n                } @else {\n                  <lucide-icon [img]=\"Share2\" class=\"size-3.5\" />\n                }\n                <span>{{ copiedVerifyLink() ? 'Link Copied!' : 'Copy Verification Link' }}</span>\n              </button>\n\n              <div class=\"flex items-center gap-2\">\n                <button ui-button variant=\"outline\" size=\"sm\" class=\"text-xs\" (click)=\"closeReceiptModal()\">\n                  Close\n                </button>\n                <button\n                  ui-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                  <lucide-icon [img]=\"Download\" class=\"size-3.5\" />\n                  <span>Download Signed PDF</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Issue New Legal Hold Modal -->\n      @if (isIssueHoldModalOpen()) {\n        <div\n          class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n          (click)=\"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            (click)=\"$event.stopPropagation()\"\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                  <lucide-icon [img]=\"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\">\n                    Matter #LIT-2026-0842 · Dispatch formal preservation notice\n                  </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                <lucide-icon [img]=\"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                  <lucide-icon [img]=\"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,\n                    and 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                    [value]=\"newHoldForm().custodianName\"\n                    (input)=\"patchHoldForm({ custodianName: $any($event.target).value })\"\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                    [value]=\"newHoldForm().custodianEmail\"\n                    (input)=\"patchHoldForm({ custodianEmail: $any($event.target).value })\"\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                      [value]=\"newHoldForm().custodianRole\"\n                      (input)=\"patchHoldForm({ custodianRole: $any($event.target).value })\"\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                      [value]=\"newHoldForm().department\"\n                      (change)=\"patchHoldForm({ department: $any($event.target).value })\"\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                    [value]=\"newHoldForm().scopeNotes\"\n                    (input)=\"patchHoldForm({ scopeNotes: $any($event.target).value })\"\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                  ></textarea>\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                ui-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\n                ui-button\n                variant=\"default\"\n                size=\"sm\"\n                class=\"gap-1.5 text-xs shadow-xs\"\n                (click)=\"handleIssueHoldSubmit()\"\n              >\n                <lucide-icon [img]=\"Send\" class=\"size-3.5\" />\n                <span>Dispatch Notice &amp; Apply Lock</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class UiSubpoenaLegalHoldManagerComponent implements OnInit {\n  protected readonly AlertTriangle = AlertTriangle\n  protected readonly BadgeCheck = BadgeCheck\n  protected readonly Calendar = Calendar\n  protected readonly CalendarClock = CalendarClock\n  protected readonly Check = Check\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly Clock = Clock\n  protected readonly Copy = Copy\n  protected readonly Download = Download\n  protected readonly FileCheck = FileCheck\n  protected readonly FileSpreadsheet = FileSpreadsheet\n  protected readonly Info = Info\n  protected readonly Lock = Lock\n  protected readonly Mail = Mail\n  protected readonly MoreHorizontal = MoreHorizontal\n  protected readonly Plus = Plus\n  protected readonly RefreshCw = RefreshCw\n  protected readonly RotateCcw = RotateCcw\n  protected readonly Scale = Scale\n  protected readonly Search = Search\n  protected readonly Send = Send\n  protected readonly Server = Server\n  protected readonly Share2 = Share2\n  protected readonly Shield = Shield\n  protected readonly ShieldCheck = ShieldCheck\n  protected readonly UserX = UserX\n  protected readonly Users = Users\n  protected readonly X = X\n\n  protected readonly filterCategories = filterCategories\n  protected readonly preservationSystems = preservationSystemsData\n\n  @Input() set defaultFilter(v: string) {\n    this.activeFilter.set(v ?? 'all')\n  }\n  @Input('class') className?: string\n\n  readonly activeFilter = signal<string>('all')\n  readonly searchQuery = signal<string>('')\n  readonly selectedReceipt = signal<CustodianRecord | null>(null)\n  readonly isExportingLog = signal(false)\n  readonly notificationBanner = signal<{ message: string; type: 'success' | 'info' | 'warning' } | null>(null)\n  readonly isIssueHoldModalOpen = signal(false)\n\n  readonly newHoldForm = signal({\n    custodianName: '',\n    custodianRole: '',\n    custodianEmail: '',\n    department: 'engineering',\n    scopeNotes: defaultScopeNotes,\n  })\n\n  readonly copiedSignature = signal(false)\n  readonly copiedVerifyLink = signal(false)\n\n  private readonly onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') {\n      if (this.selectedReceipt()) this.closeReceiptModal()\n      if (this.isIssueHoldModalOpen()) this.handleCloseIssueHoldModal()\n    }\n  }\n\n  constructor() {\n    const destroyRef = inject(DestroyRef)\n    destroyRef.onDestroy(() => {\n      if (typeof window !== 'undefined') window.removeEventListener('keydown', this.onKeyDown)\n    })\n  }\n\n  ngOnInit(): void {\n    if (typeof window !== 'undefined') window.addEventListener('keydown', this.onKeyDown)\n  }\n\n  readonly filteredCustodians = computed(() => {\n    const filter = this.activeFilter()\n    const query = this.searchQuery().trim().toLowerCase()\n    return custodiansData.filter((custodian) => {\n      let matchesCategory = true\n      if (filter === 'engineering') matchesCategory = custodian.departmentCategory === 'engineering'\n      else if (filter === 'product') matchesCategory = custodian.departmentCategory === 'product'\n      else if (filter === 'operations') matchesCategory = custodian.departmentCategory === 'operations'\n\n      if (!query) return matchesCategory\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      return matchesCategory && matchesSearch\n    })\n  })\n\n  get rootClass(): string {\n    return cn('w-full space-y-6', this.className)\n  }\n\n  bannerClass(type: 'success' | 'info' | 'warning'): string {\n    return cn(\n      'mt-4 flex items-center gap-2 rounded-md border p-2.5 text-xs transition-colors',\n      type === 'success' && 'border-success/30 bg-success/10 text-success dark:bg-success/10 dark:text-foreground',\n      type === 'info' && 'border-info/30 bg-info/10 text-info dark:bg-info/10 dark:text-foreground',\n      type === 'warning' && 'border-warning/30 bg-warning/10 text-warning dark:bg-warning/10 dark:text-foreground',\n    )\n  }\n\n  filterPillClass(id: string): string {\n    return 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      this.activeFilter() === 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\n  filterCountClass(id: string): string {\n    return cn(\n      'py-0.2 rounded-full px-1.5 font-mono text-xs tabular-nums',\n      this.activeFilter() === id\n        ? 'bg-primary-foreground/20 text-primary-foreground'\n        : 'bg-muted text-muted-foreground',\n    )\n  }\n\n  verifyLink(id: string): string {\n    return `https://uipkge.dev/legal/receipt/${id}`\n  }\n\n  showNotification(message: string, type: 'success' | 'info' | 'warning' = 'success', duration = 4000): void {\n    this.notificationBanner.set({ message, type })\n    setTimeout(() => {\n      if (this.notificationBanner()?.message === message) this.notificationBanner.set(null)\n    }, duration)\n  }\n\n  handleExportAuditLog(): void {\n    if (this.isExportingLog()) return\n    this.isExportingLog.set(true)\n    this.showNotification(\n      'Compiling full litigation hold preservation receipts and cryptographic audit ledger...',\n      'info',\n      2000,\n    )\n    setTimeout(() => {\n      this.isExportingLog.set(false)\n      this.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\n  openReceiptModal(custodian: CustodianRecord): void {\n    this.selectedReceipt.set(custodian)\n    this.copiedSignature.set(false)\n    this.copiedVerifyLink.set(false)\n  }\n\n  handleExportAndClose(): void {\n    this.handleExportAuditLog()\n    this.closeReceiptModal()\n  }\n\n  closeReceiptModal(): void {\n    this.selectedReceipt.set(null)\n  }\n\n  handleSendReminder(custodian: CustodianRecord): void {\n    this.showNotification(\n      `Re-affirmation reminder & notice receipt dispatched to ${custodian.name} (${custodian.email}).`,\n      'info',\n    )\n  }\n\n  handleRecertify(custodian: CustodianRecord): void {\n    this.showNotification(\n      `Semi-annual re-certification workflow initiated for ${custodian.name}. Acknowledgment due within 5 business days.`,\n      'success',\n    )\n  }\n\n  handleReleaseFromHold(custodian: CustodianRecord): void {\n    this.showNotification(\n      `Hold release request queued for ${custodian.name} (${custodian.id}). Pending final authorization from Lead Litigation Counsel.`,\n      'warning',\n    )\n  }\n\n  handleOpenIssueHoldModal(): void {\n    this.isIssueHoldModalOpen.set(true)\n  }\n\n  handleCloseIssueHoldModal(): void {\n    this.isIssueHoldModalOpen.set(false)\n    this.newHoldForm.set({\n      custodianName: '',\n      custodianRole: '',\n      custodianEmail: '',\n      department: 'engineering',\n      scopeNotes: defaultScopeNotes,\n    })\n  }\n\n  patchHoldForm(\n    patch: Partial<{\n      custodianName: string\n      custodianRole: string\n      custodianEmail: string\n      department: string\n      scopeNotes: string\n    }>,\n  ): void {\n    this.newHoldForm.update((prev) => ({ ...prev, ...patch }))\n  }\n\n  handleIssueHoldSubmit(): void {\n    const form = this.newHoldForm()\n    if (!form.custodianName || !form.custodianEmail) {\n      this.showNotification('Please enter custodian name and corporate email address.', 'warning')\n      return\n    }\n    const name = form.custodianName\n    this.handleCloseIssueHoldModal()\n    this.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\n  copyToClipboard(text: string, type: 'signature' | 'verifyLink'): void {\n    try {\n      navigator.clipboard?.writeText(text)\n    } catch {\n      // Clipboard fallback\n    }\n    if (type === 'signature') {\n      this.copiedSignature.set(true)\n      setTimeout(() => this.copiedSignature.set(false), 2000)\n    } else if (type === 'verifyLink') {\n      this.copiedVerifyLink.set(true)\n      setTimeout(() => this.copiedVerifyLink.set(false), 2000)\n    }\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/subpoena-legal-hold-manager/subpoena-legal-hold-manager.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/subpoena-legal-hold-manager/index.ts",
      "content": "export {\n  UiSubpoenaLegalHoldManagerComponent,\n  type CustodianRecord,\n  type PreservationSystem,\n} from './subpoena-legal-hold-manager.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/subpoena-legal-hold-manager/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/dropdown-menu.json",
    "https://uipkge.dev/r/angular/progress.json",
    "https://uipkge.dev/r/angular/separator.json",
    "https://uipkge.dev/r/angular/table.json"
  ],
  "description": "Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts, and compliance audit log.",
  "categories": [
    "legal",
    "app",
    "compliance",
    "security"
  ]
}