{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "nda-agreement-generator",
  "title": "Nda Agreement Generator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/nda-agreement-generator/NdaAgreementGenerator.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  BadgeCheck,\n  Check,\n  CheckCircle2,\n  Download,\n  FileCheck,\n  Gavel,\n  Lock,\n  PenTool,\n  Printer,\n  RotateCcw,\n  Scale,\n  ShieldCheck,\n  Users,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { cn } from '@/lib/utils'\n\nexport type AgreementType = 'mutual' | 'unilateral'\nexport type TermOption = '2 Years' | '3 Years' | '5 Years' | 'Perpetual for Trade Secrets'\nexport type JurisdictionOption = 'delaware' | 'california' | 'newyork' | 'england' | 'singapore'\nexport type SignatureFont = 'serif' | 'script' | 'sans'\n\nexport interface NdaAgreementGeneratorProps {\n  class?: HTMLAttributes['class']\n  initialSigned?: boolean\n  initialAgreementType?: AgreementType\n  initialTerm?: TermOption\n  initialJurisdiction?: JurisdictionOption\n}\n\nconst props = withDefaults(defineProps<NdaAgreementGeneratorProps>(), {\n  initialSigned: false,\n  initialAgreementType: 'mutual',\n  initialTerm: '3 Years',\n  initialJurisdiction: 'delaware',\n})\n\n// Generator State\nconst agreementType = ref<AgreementType>(props.initialAgreementType)\nconst jurisdiction = ref<JurisdictionOption>(props.initialJurisdiction)\nconst confidentialityTerm = ref<TermOption>(props.initialTerm)\n\n// Parties State\nconst disclosingCompany = ref('UIPKGE Technologies Inc.')\nconst disclosingSignatory = ref('Sarah Jenkins')\nconst disclosingTitle = ref('VP of Architecture & Ecosystem')\nconst disclosingEmail = ref('s.jenkins@uipkge.dev')\n\nconst receivingCompany = ref('Vertex Solutions Corp.')\nconst receivingSignatory = ref('Marcus Vance')\nconst receivingTitle = ref('Chief Technology Officer')\nconst receivingEmail = ref('marcus.vance@vertexsolutions.io')\n\nconst purposeOfDisclosure = ref(\n  'Evaluation of potential architectural partnership, proprietary registry protocols, and API integration.',\n)\n\n// Protective Clauses Toggles\nconst clauseNonSolicit = ref(true)\nconst clauseInjunctiveRelief = ref(true)\nconst clauseReturnMaterials = ref(true)\nconst clausePermittedDisclosures = ref(true)\n\n// Signature State\nconst isSigned = ref(props.initialSigned)\nconst signatureFont = ref<SignatureFont>('serif')\nconst signerName = ref('Marcus Vance')\nconst eConsentAgreed = ref(true)\nconst downloadStatus = ref(false)\nconst draftSavedStatus = ref(false)\n\n// Jurisdiction Definitions\nconst jurisdictionMap: Record<JurisdictionOption, { name: string; statute: string; venue: string; tag: string }> = {\n  delaware: {\n    name: 'State of Delaware, United States',\n    statute: 'General Corporation Law of Delaware (DGCL) & Court of Chancery',\n    venue: 'Wilmington, Delaware, USA',\n    tag: 'US-DE',\n  },\n  california: {\n    name: 'State of California, United States',\n    statute: 'California Uniform Trade Secrets Act (Cal. Civ. Code § 3426)',\n    venue: 'San Francisco, California, USA',\n    tag: 'US-CA',\n  },\n  newyork: {\n    name: 'State of New York, United States',\n    statute: 'New York Commercial Division Jurisprudence & General Obligations Law',\n    venue: 'New York, New York, USA',\n    tag: 'US-NY',\n  },\n  england: {\n    name: 'England & Wales, United Kingdom',\n    statute: 'Laws of England and Wales & High Court of Justice (Commercial Court)',\n    venue: 'London, United Kingdom',\n    tag: 'UK-EW',\n  },\n  singapore: {\n    name: 'Republic of Singapore (SIAC)',\n    statute: 'International Arbitration Act & Singapore International Arbitration Centre',\n    venue: 'Singapore (SIAC Rules)',\n    tag: 'SG-SIAC',\n  },\n}\n\nconst currentJurisdiction = computed(() => jurisdictionMap[jurisdiction.value])\n\nconst termText = computed(() => {\n  switch (confidentialityTerm.value) {\n    case '2 Years':\n      return 'two (2) years from the Effective Date'\n    case '3 Years':\n      return 'three (3) years from the Effective Date'\n    case '5 Years':\n      return 'five (5) years from the Effective Date'\n    case 'Perpetual for Trade Secrets':\n      return 'five (5) years for general Confidential Information, and perpetually for all source code, cryptographic primitives, and core trade secrets'\n    default:\n      return 'three (3) years from the Effective Date'\n  }\n})\n\nconst activeClausesCount = computed(() => {\n  let count = 0\n  if (clauseNonSolicit.value) count++\n  if (clauseInjunctiveRelief.value) count++\n  if (clauseReturnMaterials.value) count++\n  if (clausePermittedDisclosures.value) count++\n  return count\n})\n\nconst canSign = computed(() => {\n  return eConsentAgreed.value && signerName.value.trim().length > 0 && !isSigned.value\n})\n\nfunction signAgreement() {\n  if (!canSign.value) return\n  isSigned.value = true\n}\n\nfunction resetWorkflow() {\n  isSigned.value = false\n  downloadStatus.value = false\n  draftSavedStatus.value = false\n}\n\nfunction handleSaveDraft() {\n  draftSavedStatus.value = true\n  setTimeout(() => {\n    draftSavedStatus.value = false\n  }, 2200)\n}\n\nfunction handleExportPdf() {\n  downloadStatus.value = true\n  setTimeout(() => {\n    downloadStatus.value = false\n  }, 2500)\n}\n\nfunction handlePrint() {\n  if (typeof window !== 'undefined') {\n    window.print()\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"nda-agreement-generator\" :class=\"cn('bg-background text-foreground w-full', props.class)\">\n    <div class=\"mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8\">\n      <!-- Main Header Bar -->\n      <header class=\"border-border bg-card mb-6 rounded-xl border p-5 shadow-xs sm:p-6\">\n        <div class=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n          <div class=\"space-y-1.5\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Instrument:</span>\n              <span class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">#NDA-2026-88F</span>\n              <span class=\"text-muted-foreground text-xs\">&bull;</span>\n              <Badge variant=\"outline\" class=\"border-primary/30 text-primary font-mono text-xs\">\n                {{ agreementType === 'mutual' ? 'Mutual / Bilateral' : 'Unilateral' }}\n              </Badge>\n              <span class=\"text-muted-foreground text-xs\">&bull;</span>\n              <Badge v-if=\"isSigned\" class=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\">\n                <BadgeCheck class=\"size-3.5\" />\n                <span>Fully Executed &amp; Legally Binding</span>\n              </Badge>\n              <Badge v-else class=\"border-warning/30 bg-warning/10 text-warning gap-1.5 text-xs font-medium\">\n                <AlertCircle class=\"size-3.5\" />\n                <span>Ready for E-Signature</span>\n              </Badge>\n            </div>\n            <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl lg:text-3xl\">\n              Non-Disclosure Agreement (NDA) Generator\n            </h1>\n            <p class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n              <Scale class=\"size-4 shrink-0\" />\n              <span>Governing Jurisdiction: {{ currentJurisdiction.name }} &bull; Effective Aug 21, 2026</span>\n            </p>\n          </div>\n\n          <!-- Action Buttons -->\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"handlePrint\">\n              <Printer class=\"size-4\" />\n              <span>Print</span>\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"handleSaveDraft\">\n              <FileCheck class=\"size-4\" />\n              <span>{{ draftSavedStatus ? 'Draft Saved ✓' : 'Save Draft' }}</span>\n            </Button>\n            <Button\n              aria-label=\"Download attachment\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs font-semibold shadow-xs\"\n              :variant=\"isSigned ? 'default' : 'outline'\"\n              @click=\"handleExportPdf\"\n            >\n              <Download class=\"size-4\" />\n              <span>{{\n                downloadStatus ? 'Exporting PDF...' : isSigned ? 'Export Signed PDF' : 'Download Draft PDF'\n              }}</span>\n            </Button>\n            <Button\n              v-if=\"isSigned\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"border-muted-foreground/30 gap-1.5 text-xs\"\n              @click=\"resetWorkflow\"\n            >\n              <RotateCcw class=\"size-3.5\" />\n              <span>Reset Demo</span>\n            </Button>\n          </div>\n        </div>\n\n        <Separator class=\"my-4\" />\n\n        <!-- Quick Parameter Switches in Header -->\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <!-- Agreement Type Toggle -->\n          <div class=\"bg-muted/40 border-border rounded-lg border p-3\">\n            <label class=\"text-muted-foreground block text-xs font-medium\"> Agreement Type </label>\n            <div class=\"bg-muted/60 mt-2 grid grid-cols-2 gap-1 rounded-md p-0.5\">\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded px-2.5 py-1 text-xs font-medium transition-colors',\n                    agreementType === 'mutual'\n                      ? 'bg-card text-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"agreementType = 'mutual'\"\n              >\n                Mutual (Bilateral)\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded px-2.5 py-1 text-xs font-medium transition-colors',\n                    agreementType === 'unilateral'\n                      ? 'bg-card text-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"agreementType = 'unilateral'\"\n              >\n                Unilateral\n              </button>\n            </div>\n          </div>\n\n          <!-- Jurisdiction Selector -->\n          <div class=\"bg-muted/40 border-border rounded-lg border p-3\">\n            <label class=\"text-muted-foreground block text-xs font-medium\"> Governing Jurisdiction </label>\n            <div class=\"mt-2\">\n              <Select v-model=\"jurisdiction\">\n                <SelectTrigger class=\"bg-card h-8 text-xs font-medium\">\n                  <SelectValue placeholder=\"Select jurisdiction\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"delaware\">Delaware, USA</SelectItem>\n                  <SelectItem value=\"california\">California, USA</SelectItem>\n                  <SelectItem value=\"newyork\">New York, USA</SelectItem>\n                  <SelectItem value=\"england\">England &amp; Wales, UK</SelectItem>\n                  <SelectItem value=\"singapore\">Singapore (SIAC)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n\n          <!-- Term of Protection -->\n          <div class=\"bg-muted/40 border-border rounded-lg border p-3\">\n            <label class=\"text-muted-foreground block text-xs font-medium\"> Protection Term </label>\n            <div class=\"mt-2\">\n              <Select v-model=\"confidentialityTerm\">\n                <SelectTrigger class=\"bg-card h-8 text-xs font-medium\">\n                  <SelectValue placeholder=\"Select term\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"2 Years\">2 Years</SelectItem>\n                  <SelectItem value=\"3 Years\">3 Years (Standard)</SelectItem>\n                  <SelectItem value=\"5 Years\">5 Years</SelectItem>\n                  <SelectItem value=\"Perpetual for Trade Secrets\">Perpetual (Trade Secrets)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n\n          <!-- Active Protective Clauses Summary -->\n          <div class=\"bg-muted/40 border-border rounded-lg border p-3\">\n            <label class=\"text-muted-foreground block text-xs font-medium\"> Active Protective Covenants </label>\n            <div class=\"mt-2 flex items-center justify-between\">\n              <span class=\"text-foreground text-xs font-semibold\">{{ activeClausesCount }} of 4 Clauses Active</span>\n              <Badge variant=\"secondary\" class=\"font-mono text-xs tabular-nums\">\n                {{ Math.round((activeClausesCount / 4) * 100) }}% Coverage\n              </Badge>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      <!-- 2-Column Document Builder & Live Parchment Canvas -->\n      <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n        <!-- Left Column: Builder, Clauses, Parties Form (40%) -->\n        <aside class=\"space-y-6 lg:col-span-5\">\n          <!-- Contracting Parties Card -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md font-bold\">\n                    <Users class=\"size-4\" />\n                  </div>\n                  <div>\n                    <CardTitle class=\"text-sm font-semibold\">Contracting Parties</CardTitle>\n                    <CardDescription class=\"text-xs\"\n                      >Entities bound under this confidentiality covenants</CardDescription\n                    >\n                  </div>\n                </div>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\">2 Legal Entities</Badge>\n              </div>\n            </CardHeader>\n            <CardContent class=\"space-y-4 p-4 pt-2 sm:p-5 sm:pt-2\">\n              <!-- Disclosing Party -->\n              <div class=\"border-border/80 bg-muted/20 space-y-2.5 rounded-lg border p-3.5\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground text-xs font-medium\"> Party A &bull; Disclosing Entity </span>\n                  <Badge variant=\"secondary\" class=\"text-xs\">Original Licensor</Badge>\n                </div>\n                <div>\n                  <label class=\"text-muted-foreground block text-xs font-medium\">Company Legal Name</label>\n                  <Input\n                    v-model=\"disclosingCompany\"\n                    size=\"small\"\n                    class=\"mt-1\"\n                    placeholder=\"e.g. UIPKGE Technologies Inc.\"\n                  />\n                </div>\n                <div class=\"grid grid-cols-2 gap-2\">\n                  <div>\n                    <label class=\"text-muted-foreground block text-xs font-medium\">Authorized Signatory</label>\n                    <Input v-model=\"disclosingSignatory\" size=\"small\" class=\"mt-1\" placeholder=\"e.g. Sarah Jenkins\" />\n                  </div>\n                  <div>\n                    <label class=\"text-muted-foreground block text-xs font-medium\">Corporate Title</label>\n                    <Input v-model=\"disclosingTitle\" size=\"small\" class=\"mt-1\" placeholder=\"e.g. VP of Architecture\" />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Receiving Party -->\n              <div class=\"border-border/80 bg-muted/20 space-y-2.5 rounded-lg border p-3.5\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground text-xs font-medium\"> Party B &bull; Receiving Entity </span>\n                  <Badge variant=\"secondary\" class=\"text-xs\">Counterparty</Badge>\n                </div>\n                <div>\n                  <label class=\"text-muted-foreground block text-xs font-medium\">Recipient Company Name</label>\n                  <Input\n                    v-model=\"receivingCompany\"\n                    size=\"small\"\n                    class=\"mt-1\"\n                    placeholder=\"e.g. Vertex Solutions Corp.\"\n                  />\n                </div>\n                <div class=\"grid grid-cols-2 gap-2\">\n                  <div>\n                    <label class=\"text-muted-foreground block text-xs font-medium\">Recipient Signatory</label>\n                    <Input v-model=\"receivingSignatory\" size=\"small\" class=\"mt-1\" placeholder=\"e.g. Marcus Vance\" />\n                  </div>\n                  <div>\n                    <label class=\"text-muted-foreground block text-xs font-medium\">Corporate Title</label>\n                    <Input\n                      v-model=\"receivingTitle\"\n                      size=\"small\"\n                      class=\"mt-1\"\n                      placeholder=\"e.g. Chief Technology Officer\"\n                    />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Purpose Statement -->\n              <div>\n                <label class=\"text-foreground block text-xs font-semibold\"> Authorized Purpose of Disclosure </label>\n                <p class=\"text-muted-foreground mt-0.5 text-xs\">\n                  Defines the strict commercial boundary for information exchange\n                </p>\n                <Input\n                  v-model=\"purposeOfDisclosure\"\n                  size=\"middle\"\n                  class=\"mt-1.5 font-mono text-xs\"\n                  placeholder=\"e.g. Evaluation of architectural partnership...\"\n                />\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Standard Clauses Customizer -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md font-bold\">\n                    <Gavel class=\"size-4\" />\n                  </div>\n                  <div>\n                    <CardTitle class=\"text-sm font-bold\">Standard Legal Covenants</CardTitle>\n                    <CardDescription class=\"text-xs\"\n                      >Toggle and enforce protective clauses in real time</CardDescription\n                    >\n                  </div>\n                </div>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\">Custom Covenants</Badge>\n              </div>\n            </CardHeader>\n            <CardContent class=\"space-y-3.5 p-4 pt-2 sm:p-5 sm:pt-2\">\n              <!-- Clause 1: Non-Solicitation -->\n              <div\n                class=\"border-border/80 bg-card hover:bg-muted/20 flex items-start justify-between gap-3 rounded-lg border p-3 transition-colors\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <p class=\"text-foreground text-xs font-semibold\">1. Non-Solicitation of Employees</p>\n                    <Badge variant=\"secondary\" class=\"text-xs\">12 Months</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    Restricts either party from directly soliciting, recruiting, or hiring key technical personnel and\n                    architects.\n                  </p>\n                </div>\n                <Switch v-model=\"clauseNonSolicit\" aria-label=\"Toggle Non-Solicitation Clause\" />\n              </div>\n\n              <!-- Clause 2: Injunctive Relief -->\n              <div\n                class=\"border-border/80 bg-card hover:bg-muted/20 flex items-start justify-between gap-3 rounded-lg border p-3 transition-colors\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <p class=\"text-foreground text-xs font-semibold\">2. Injunctive &amp; Equitable Relief</p>\n                    <Badge variant=\"secondary\" class=\"text-xs\">No Bond Required</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    Stipulates that breach causes irreparable harm, entitling Disclosing Party to emergency restraining\n                    orders without posting a bond.\n                  </p>\n                </div>\n                <Switch v-model=\"clauseInjunctiveRelief\" aria-label=\"Toggle Injunctive Relief Clause\" />\n              </div>\n\n              <!-- Clause 3: Return of Materials -->\n              <div\n                class=\"border-border/80 bg-card hover:bg-muted/20 flex items-start justify-between gap-3 rounded-lg border p-3 transition-colors\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <p class=\"text-foreground text-xs font-semibold\">3. Return &amp; Certified Destruction</p>\n                    <Badge variant=\"secondary\" class=\"text-xs\">14 Calendar Days</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    Mandates formal return or certified cryptographic shredding of all confidential technical assets\n                    within 14 days of request.\n                  </p>\n                </div>\n                <Switch v-model=\"clauseReturnMaterials\" aria-label=\"Toggle Return of Materials Clause\" />\n              </div>\n\n              <!-- Clause 4: Permitted Disclosures -->\n              <div\n                class=\"border-border/80 bg-card hover:bg-muted/20 flex items-start justify-between gap-3 rounded-lg border p-3 transition-colors\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <p class=\"text-foreground text-xs font-semibold\">4. Permitted Compelled Disclosures</p>\n                    <Badge variant=\"secondary\" class=\"text-xs\">Subpoena Carve-Out</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    Carves out court order / statutory subpoena compliance with mandatory prompt written notification to\n                    the other party.\n                  </p>\n                </div>\n                <Switch v-model=\"clausePermittedDisclosures\" aria-label=\"Toggle Permitted Disclosures Clause\" />\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- E-Signature Pad Execution Card -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md font-bold\">\n                    <PenTool class=\"size-4\" />\n                  </div>\n                  <div>\n                    <CardTitle class=\"text-sm font-bold\">Electronic Signature Pad</CardTitle>\n                    <CardDescription class=\"text-xs\"\n                      >Adopt official digital signature style for execution</CardDescription\n                    >\n                  </div>\n                </div>\n                <Badge :variant=\"isSigned ? 'default' : 'outline'\" class=\"font-mono text-xs\">\n                  {{ isSigned ? 'Executed' : 'Signer 2/2' }}\n                </Badge>\n              </div>\n            </CardHeader>\n            <CardContent class=\"space-y-4 p-4 pt-2 sm:p-5 sm:pt-2\">\n              <!-- Signer Name Input -->\n              <div>\n                <label class=\"text-foreground block text-xs font-medium\">Recipient Signatory Full Name</label>\n                <Input\n                  v-model=\"signerName\"\n                  :disabled=\"isSigned\"\n                  size=\"middle\"\n                  class=\"mt-1\"\n                  placeholder=\"e.g. Marcus Vance\"\n                />\n              </div>\n\n              <!-- Signature Style Picker -->\n              <div>\n                <label class=\"text-muted-foreground block text-xs font-medium\">Adopted Typography Style</label>\n                <div class=\"bg-muted/60 mt-1.5 grid grid-cols-3 gap-1 rounded-lg p-1\">\n                  <button\n                    type=\"button\"\n                    :disabled=\"isSigned\"\n                    :class=\"\n                      cn(\n                        'rounded-md py-1.5 text-center text-xs font-medium transition-colors',\n                        signatureFont === 'serif'\n                          ? 'bg-card text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                        isSigned && 'cursor-not-allowed opacity-60',\n                      )\n                    \"\n                    @click=\"signatureFont = 'serif'\"\n                  >\n                    Formal Serif\n                  </button>\n                  <button\n                    type=\"button\"\n                    :disabled=\"isSigned\"\n                    :class=\"\n                      cn(\n                        'rounded-md py-1.5 text-center text-xs font-medium transition-colors',\n                        signatureFont === 'script'\n                          ? 'bg-card text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                        isSigned && 'cursor-not-allowed opacity-60',\n                      )\n                    \"\n                    @click=\"signatureFont = 'script'\"\n                  >\n                    Script Elegance\n                  </button>\n                  <button\n                    type=\"button\"\n                    :disabled=\"isSigned\"\n                    :class=\"\n                      cn(\n                        'rounded-md py-1.5 text-center text-xs font-medium transition-colors',\n                        signatureFont === 'sans'\n                          ? 'bg-card text-foreground shadow-xs'\n                          : 'text-muted-foreground hover:text-foreground',\n                        isSigned && 'cursor-not-allowed opacity-60',\n                      )\n                    \"\n                    @click=\"signatureFont = 'sans'\"\n                  >\n                    Modern Sans\n                  </button>\n                </div>\n              </div>\n\n              <!-- Visual Preview Box -->\n              <div class=\"border-border bg-muted/20 relative rounded-lg border p-4 text-center\">\n                <p class=\"text-muted-foreground text-xs font-medium\">Adopted Signature Preview</p>\n                <div class=\"my-3 flex min-h-[52px] items-center justify-center\">\n                  <span\n                    :class=\"\n                      cn(\n                        'text-foreground text-2xl transition-colors select-none',\n                        signatureFont === 'serif' && 'font-medium tracking-wide italic',\n                        signatureFont === 'script' && 'font-medium tracking-widest italic',\n                        signatureFont === 'sans' && 'font-semibold tracking-tight',\n                      )\n                    \"\n                  >\n                    {{ signerName || 'Marcus Vance' }}\n                  </span>\n                </div>\n                <div class=\"text-muted-foreground flex items-center justify-center gap-1.5 font-mono text-xs\">\n                  <ShieldCheck class=\"text-success size-3.5\" />\n                  <span>256-Bit eIDAS / ESIGN Act Compliant</span>\n                </div>\n              </div>\n\n              <!-- Consent Checkbox -->\n              <label class=\"text-muted-foreground flex cursor-pointer items-start gap-2.5 text-xs\">\n                <input\n                  v-model=\"eConsentAgreed\"\n                  type=\"checkbox\"\n                  :disabled=\"isSigned\"\n                  class=\"text-primary focus:ring-ring border-border mt-0.5 size-4 rounded\"\n                />\n                <span class=\"leading-relaxed\">\n                  I agree to execute this Non-Disclosure Agreement electronically and confirm my electronic signature\n                  legally binds\n                  <strong>{{ receivingCompany }}</strong> under the U.S. ESIGN Act and {{ currentJurisdiction.name }}.\n                </span>\n              </label>\n\n              <!-- Main Execution Action Button -->\n              <div class=\"space-y-2 pt-1\">\n                <Button\n                  v-if=\"!isSigned\"\n                  type=\"button\"\n                  class=\"w-full gap-2 text-sm font-semibold shadow-xs\"\n                  :disabled=\"!canSign\"\n                  @click=\"signAgreement\"\n                >\n                  <PenTool class=\"size-4\" />\n                  <span>Sign &amp; Execute Agreement</span>\n                </Button>\n\n                <div v-else class=\"border-success/30 bg-success/10 space-y-2 rounded-lg border p-3.5 text-center\">\n                  <div class=\"text-success flex items-center justify-center gap-1.5 text-xs font-semibold\">\n                    <CheckCircle2 class=\"size-4\" />\n                    <span>Agreement Digitally Executed!</span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Both parties have countersigned this NDA. Cryptographic SHA-256 certificate has been logged in the\n                    audit trail.\n                  </p>\n                  <Button\n                    aria-label=\"Download attachment\"\n                    size=\"sm\"\n                    class=\"mt-2 w-full gap-1.5 text-xs\"\n                    @click=\"handleExportPdf\"\n                  >\n                    <Download class=\"size-3.5\" />\n                    <span>Export Countersigned PDF</span>\n                  </Button>\n                </div>\n\n                <p v-if=\"!isSigned && !canSign\" class=\"text-muted-foreground text-center text-xs\">\n                  {{\n                    !eConsentAgreed\n                      ? 'Please check the legal electronic consent box to proceed.'\n                      : 'Please provide a valid signatory name.'\n                  }}\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Audit Log Miniature Card -->\n          <div\n            class=\"border-border bg-card/60 text-muted-foreground space-y-1.5 rounded-lg border p-3.5 text-xs shadow-xs\"\n          >\n            <div class=\"text-foreground flex items-center gap-1.5 font-semibold\">\n              <Lock class=\"text-primary size-3.5\" />\n              <span>Immutable Legal Audit Ledger</span>\n            </div>\n            <p class=\"leading-relaxed\">\n              Every clause configuration and signature execution generates a tamper-evident SHA-256 cryptographic digest\n              with RFC 3161 trusted timestamping.\n            </p>\n          </div>\n        </aside>\n\n        <!-- Right Column: Live Document Parchment Canvas (60%) -->\n        <main class=\"space-y-6 lg:col-span-7\">\n          <div class=\"border-border bg-card rounded-xl border p-6 shadow-xs sm:p-8 lg:p-10\">\n            <!-- Document Title Bar -->\n            <div class=\"border-border border-b pb-6 text-center\">\n              <Badge variant=\"outline\" class=\"font-mono text-xs tracking-widest uppercase\">\n                Official Legal Instrument &bull; {{ currentJurisdiction.tag }}\n              </Badge>\n              <h2 class=\"text-foreground mt-3 text-lg font-semibold tracking-tight sm:text-xl lg:text-2xl\">\n                {{\n                  agreementType === 'mutual' ? 'Mutual Non-Disclosure Agreement' : 'Unilateral Non-Disclosure Agreement'\n                }}\n              </h2>\n              <p class=\"text-muted-foreground mt-1.5 font-mono text-xs\">\n                Governing Law: {{ currentJurisdiction.name }} &bull; Ref: #NDA-2026-88F\n              </p>\n            </div>\n\n            <!-- Agreement Key Terms Summary Box -->\n            <div class=\"my-6\">\n              <div class=\"bg-muted/40 border-border rounded-lg border p-4 sm:p-5\">\n                <div class=\"mb-3 flex items-center justify-between\">\n                  <h3 class=\"text-foreground text-xs font-semibold\">Contract Terms &amp; Scope Summary</h3>\n                  <Badge variant=\"secondary\" class=\"font-mono text-xs\">\n                    {{ agreementType === 'mutual' ? 'Bilateral Protection' : 'Unilateral Protection' }}\n                  </Badge>\n                </div>\n                <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n                  <div class=\"border-border/60 bg-card rounded-md border p-3\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Disclosing Party</p>\n                    <p class=\"text-foreground mt-1 truncate text-xs font-bold\">{{ disclosingCompany }}</p>\n                    <p class=\"text-muted-foreground mt-0.5 truncate text-xs\">{{ disclosingSignatory }}</p>\n                  </div>\n                  <div class=\"border-border/60 bg-card rounded-md border p-3\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Receiving Party</p>\n                    <p class=\"text-foreground mt-1 truncate text-xs font-bold\">{{ receivingCompany }}</p>\n                    <p class=\"text-muted-foreground mt-0.5 truncate text-xs\">{{ receivingSignatory }}</p>\n                  </div>\n                  <div class=\"border-border/60 bg-card rounded-md border p-3\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Protection Term</p>\n                    <p class=\"text-foreground mt-1 text-xs font-bold\">{{ confidentialityTerm }}</p>\n                    <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">From Effective Date</p>\n                  </div>\n                  <div class=\"border-border/60 bg-card rounded-md border p-3\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Exclusive Venue</p>\n                    <p class=\"text-foreground mt-1 truncate text-xs font-bold\">\n                      {{ currentJurisdiction.venue.split(',')[0] }}\n                    </p>\n                    <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">{{ currentJurisdiction.tag }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Legal Sections Content -->\n            <div class=\"text-foreground/90 space-y-7 text-xs leading-relaxed sm:text-sm\">\n              <!-- Preamble & Recitals -->\n              <section class=\"space-y-3\">\n                <p class=\"text-muted-foreground leading-relaxed\">\n                  This Non-Disclosure Agreement (this &ldquo;Agreement&rdquo;), effective as of the\n                  <strong class=\"text-foreground\">21st day of August, 2026</strong> (&ldquo;Effective Date&rdquo;), is\n                  entered into by and between:\n                </p>\n                <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                  <div class=\"border-border bg-muted/20 rounded-lg border p-3.5\">\n                    <p class=\"text-foreground text-xs font-medium\">Disclosing Party (&ldquo;Party A&rdquo;)</p>\n                    <p class=\"text-foreground mt-1 font-bold\">{{ disclosingCompany }}</p>\n                    <p class=\"text-muted-foreground text-xs\">{{ disclosingSignatory }} &bull; {{ disclosingTitle }}</p>\n                    <p class=\"text-muted-foreground font-mono text-xs\">{{ disclosingEmail }}</p>\n                  </div>\n                  <div class=\"border-border bg-muted/20 rounded-lg border p-3.5\">\n                    <p class=\"text-foreground text-xs font-medium\">Receiving Party (&ldquo;Party B&rdquo;)</p>\n                    <p class=\"text-foreground mt-1 font-bold\">{{ receivingCompany }}</p>\n                    <p class=\"text-muted-foreground text-xs\">{{ receivingSignatory }} &bull; {{ receivingTitle }}</p>\n                    <p class=\"text-muted-foreground font-mono text-xs\">{{ receivingEmail }}</p>\n                  </div>\n                </div>\n                <p class=\"text-muted-foreground italic\">\n                  <strong>RECITALS:</strong> WHEREAS, Disclosing Party possesses certain non-public proprietary\n                  technology, software architectures, and business data, and Receiving Party desires to receive such\n                  information strictly for the purpose of\n                  <strong class=\"text-foreground not-italic\">&ldquo;{{ purposeOfDisclosure }}&rdquo;</strong> (the\n                  &ldquo;Authorized Purpose&rdquo;).\n                  {{\n                    agreementType === 'mutual'\n                      ? 'Each party may act as both a Disclosing Party and a Receiving Party under this Agreement.'\n                      : ''\n                  }}\n                </p>\n              </section>\n\n              <Separator />\n\n              <!-- Section 1: Definition of Confidential Information -->\n              <section class=\"space-y-2.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">01</span>\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                    Definition of Confidential Information\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  &ldquo;Confidential Information&rdquo; refers to all non-public, proprietary, or confidential\n                  technical and business data disclosed by Disclosing Party to Receiving Party, whether orally,\n                  electronically, in writing, or by inspection of tangible objects, including but not limited to: source\n                  code, software algorithms, API specifications, component registries, cryptographic tokens, database\n                  schemas, product roadmaps, financial forecasts, customer records, and trade secrets.\n                </p>\n              </section>\n\n              <Separator />\n\n              <!-- Section 2: Non-Disclosure & Duty of Care -->\n              <section class=\"space-y-2.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">02</span>\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                    Obligations of Non-Disclosure &amp; Standard of Care\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  Receiving Party agrees to maintain the strict confidentiality of all Confidential Information with at\n                  least the same degree of care that it uses to protect its own confidential assets of similar nature,\n                  but in no event less than a reasonable degree of care. Receiving Party shall:\n                </p>\n                <ul class=\"text-muted-foreground list-disc space-y-1.5 pl-4\">\n                  <li>\n                    Use Confidential Information solely and exclusively for the Authorized Purpose defined herein.\n                  </li>\n                  <li>\n                    Restrict disclosure strictly to its authorized officers, directors, employees, and legal counsel who\n                    have a clear need-to-know and are bound by confidentiality covenants no less stringent than this\n                    Agreement.\n                  </li>\n                  <li>\n                    Refrain from reverse engineering, decompiling, or disassembling any software or architectural\n                    artifacts provided.\n                  </li>\n                </ul>\n              </section>\n\n              <Separator />\n\n              <!-- Section 3: Exclusions from Confidentiality -->\n              <section class=\"space-y-2.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">03</span>\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                    Exclusions from Confidential Treatment\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  Confidential Information does not encompass information that: (a) is or becomes publicly available\n                  through no act or omission of Receiving Party; (b) was rightfully in Receiving Party&rsquo;s\n                  possession prior to disclosure without restriction; (c) is independently developed by Receiving Party\n                  without reference to or reliance upon Disclosing Party&rsquo;s Confidential Information; or (d) is\n                  lawfully obtained from a third party free of any confidentiality obligations.\n                </p>\n              </section>\n\n              <Separator />\n\n              <!-- Section 4: Term & Expiration -->\n              <section class=\"space-y-2.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">04</span>\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                    Term of Confidentiality Obligations\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  The obligations of confidentiality and non-use established under this Agreement shall commence on the\n                  Effective Date and continue in full force and effect for a period of\n                  <strong class=\"text-foreground\">{{ termText }}</strong\n                  >.\n                </p>\n              </section>\n\n              <!-- Dynamic Section: Non-Solicitation -->\n              <template v-if=\"clauseNonSolicit\">\n                <Separator />\n                <section class=\"space-y-2.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">05</span>\n                    <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                      Non-Solicitation of Technical Personnel\n                    </h3>\n                  </div>\n                  <p class=\"text-muted-foreground\">\n                    During the term of this Agreement and for a period of\n                    <strong class=\"text-foreground\">twelve (12) calendar months</strong>\n                    immediately following its expiration or termination, neither party shall directly or indirectly\n                    solicit, recruit, or entice any software engineer, systems architect, or executive officer of the\n                    other party involved in this collaboration to terminate their employment relationship.\n                  </p>\n                </section>\n              </template>\n\n              <!-- Dynamic Section: Injunctive Relief -->\n              <template v-if=\"clauseInjunctiveRelief\">\n                <Separator />\n                <section class=\"space-y-2.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      {{ clauseNonSolicit ? '06' : '05' }}\n                    </span>\n                    <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                      Injunctive &amp; Equitable Remedies\n                    </h3>\n                  </div>\n                  <p class=\"text-muted-foreground\">\n                    The parties acknowledge that unauthorized disclosure or use of Confidential Information will cause\n                    irreparable injury for which monetary damages alone would be inadequate. Consequently, Disclosing\n                    Party shall be entitled to seek immediate injunctive relief, specific performance, and other\n                    equitable remedies in any court of competent jurisdiction without the requirement of posting a bond\n                    or proving monetary damages.\n                  </p>\n                </section>\n              </template>\n\n              <!-- Dynamic Section: Return & Certified Destruction -->\n              <template v-if=\"clauseReturnMaterials\">\n                <Separator />\n                <section class=\"space-y-2.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      {{ (clauseNonSolicit ? 1 : 0) + (clauseInjunctiveRelief ? 1 : 0) + 5 }}\n                    </span>\n                    <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                      Return &amp; Certified Destruction of Materials\n                    </h3>\n                  </div>\n                  <p class=\"text-muted-foreground\">\n                    Upon written request by Disclosing Party or upon termination of discussions, Receiving Party shall\n                    within\n                    <strong class=\"text-foreground\">fourteen (14) calendar days</strong>: (a) return all tangible\n                    materials containing Confidential Information; and (b) permanently erase and cryptographically shred\n                    all digital records, backups, and derivative works, providing a formal officer Certificate of\n                    Destruction.\n                  </p>\n                </section>\n              </template>\n\n              <!-- Dynamic Section: Permitted Compelled Disclosures -->\n              <template v-if=\"clausePermittedDisclosures\">\n                <Separator />\n                <section class=\"space-y-2.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      {{\n                        (clauseNonSolicit ? 1 : 0) +\n                        (clauseInjunctiveRelief ? 1 : 0) +\n                        (clauseReturnMaterials ? 1 : 0) +\n                        5\n                      }}\n                    </span>\n                    <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                      Permitted Compelled Disclosures &amp; Subpoenas\n                    </h3>\n                  </div>\n                  <p class=\"text-muted-foreground\">\n                    Receiving Party may disclose Confidential Information pursuant to a valid judicial order or\n                    statutory subpoena; provided that Receiving Party delivers prompt written notice (within 48 hours)\n                    to Disclosing Party prior to disclosure, enabling Disclosing Party an opportunity to seek an\n                    appropriate protective order.\n                  </p>\n                </section>\n              </template>\n\n              <Separator />\n\n              <!-- Governing Law Section -->\n              <section class=\"space-y-2.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                    {{ activeClausesCount + 5 }}\n                  </span>\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                    Governing Law &amp; Dispute Jurisdiction\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  This Agreement shall be governed by, construed, and enforced in accordance with the substantive laws\n                  of\n                  <strong class=\"text-foreground\">{{ currentJurisdiction.name }}</strong> ({{\n                    currentJurisdiction.statute\n                  }}). The parties consent to the exclusive jurisdiction and venue of the courts situated in\n                  <strong class=\"text-foreground\">{{ currentJurisdiction.venue }}</strong\n                  >.\n                </p>\n              </section>\n\n              <Separator />\n\n              <!-- Dual Signature Execution Block -->\n              <section class=\"space-y-4 pt-2\">\n                <div class=\"flex items-center justify-between\">\n                  <h3 class=\"text-foreground text-sm font-semibold tracking-tight sm:text-base\">\n                    In Witness Whereof &bull; Execution Signatures\n                  </h3>\n                  <span class=\"text-muted-foreground font-mono text-xs\">2 of 2 Parties Bound</span>\n                </div>\n\n                <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  <!-- Disclosing Party Signature Block -->\n                  <div class=\"border-border bg-muted/20 rounded-lg border p-4\">\n                    <div class=\"flex items-center justify-between\">\n                      <p class=\"text-foreground text-xs font-medium\">Disclosing Party Signature</p>\n                      <Badge variant=\"outline\" class=\"border-success/40 bg-success/10 text-success font-mono text-xs\">\n                        <Check class=\"mr-1 size-3\" /> Signed &amp; Verified\n                      </Badge>\n                    </div>\n                    <div class=\"border-border/60 bg-card my-3 rounded-md border p-3 text-center\">\n                      <p class=\"text-success text-success text-xl font-medium tracking-wide italic\">\n                        {{ disclosingSignatory }}\n                      </p>\n                      <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                        {{ disclosingTitle }} &bull; {{ disclosingCompany }}\n                      </p>\n                    </div>\n                    <div class=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                      <p class=\"flex justify-between\">\n                        <span>Date Countersigned:</span>\n                        <span class=\"text-foreground font-semibold tabular-nums\">Aug 21, 2026 &bull; 09:30 EDT</span>\n                      </p>\n                      <p class=\"flex justify-between\">\n                        <span>Certificate ID:</span>\n                        <span class=\"text-foreground font-semibold\">DS-CERT-UIPKGE-9941</span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <!-- Receiving Party Signature Block -->\n                  <div\n                    :class=\"\n                      cn(\n                        'rounded-lg border p-4 transition-colors duration-200',\n                        isSigned ? 'border-success/40 bg-success/5' : 'border-border bg-muted/10 border-dashed',\n                      )\n                    \"\n                  >\n                    <div class=\"flex items-center justify-between\">\n                      <p class=\"text-foreground text-xs font-medium\">Receiving Party Signature</p>\n                      <Badge\n                        v-if=\"isSigned\"\n                        class=\"border-success/40 bg-success/10 text-success font-mono text-xs font-medium\"\n                      >\n                        <Check class=\"mr-1 size-3\" /> Signed &amp; Bound\n                      </Badge>\n                      <Badge v-else class=\"border-warning/40 bg-warning/10 text-warning font-mono text-xs font-medium\">\n                        Awaiting Signature\n                      </Badge>\n                    </div>\n\n                    <div\n                      :class=\"\n                        cn(\n                          'my-3 rounded-md border p-3 text-center transition-colors',\n                          isSigned\n                            ? 'bg-card border-success/40'\n                            : 'border-muted-foreground/30 bg-muted/20 border-dashed',\n                        )\n                      \"\n                    >\n                      <template v-if=\"isSigned\">\n                        <p\n                          :class=\"\n                            cn(\n                              'text-success text-xl font-medium tracking-wide',\n                              signatureFont === 'serif' && 'font-medium tracking-wide italic',\n                              signatureFont === 'script' && 'font-medium tracking-widest italic',\n                              signatureFont === 'sans' && 'font-semibold tracking-tight',\n                            )\n                          \"\n                        >\n                          {{ signerName || receivingSignatory }}\n                        </p>\n                        <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                          {{ receivingTitle }} &bull; {{ receivingCompany }}\n                        </p>\n                      </template>\n                      <template v-else>\n                        <p class=\"text-muted-foreground text-xs italic\">Awaiting signature execution via left panel</p>\n                        <p class=\"text-muted-foreground/80 mt-1 text-xs\">\n                          Click &ldquo;Sign &amp; Execute Agreement&rdquo; to bind {{ receivingCompany }}\n                        </p>\n                      </template>\n                    </div>\n\n                    <div class=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                      <p class=\"flex justify-between\">\n                        <span>Date Executed:</span>\n                        <span class=\"text-foreground font-semibold tabular-nums\">\n                          {{ isSigned ? 'Aug 21, 2026 • 11:20 EDT' : 'Pending' }}\n                        </span>\n                      </p>\n                      <p class=\"flex justify-between\">\n                        <span>Digital Audit Hash:</span>\n                        <span class=\"text-foreground font-semibold\">\n                          {{ isSigned ? 'SHA256:d91c7a...77a1' : 'Unsigned' }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </section>\n\n              <!-- Parchment Footer Seal -->\n              <div\n                class=\"border-border/60 bg-muted/20 flex flex-col items-center justify-between gap-2 rounded-lg border p-3 text-xs sm:flex-row\"\n              >\n                <div class=\"text-muted-foreground flex items-center gap-2 font-mono text-xs\">\n                  <ShieldCheck class=\"text-success size-4\" />\n                  <span>256-Bit Cryptographic Ledger Seal &bull; RFC 3161 Authenticated</span>\n                </div>\n                <span class=\"text-muted-foreground font-mono text-xs\"\n                  >Doc ID: #NDA-2026-88F-{{ currentJurisdiction.tag }}</span\n                >\n              </div>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/NdaAgreementGenerator.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/switch.json"
  ],
  "description": "Interactive Non-Disclosure Agreement (NDA) generator and contract customizer with bilateral/unilateral modes, customizable legal covenants, real-time contract parchment preview, and e-signature execution workflow.",
  "categories": [
    "legal",
    "finance",
    "app"
  ]
}