{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "lease-agreement-sign",
  "title": "Lease Agreement Sign",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/lease-agreement-sign/LeaseAgreementSign.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  BadgeCheck,\n  Building2,\n  Check,\n  CheckCircle2,\n  Download,\n  Lock,\n  Pen,\n  PenTool,\n  Printer,\n  RotateCcw,\n  ShieldCheck,\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 { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport interface LeaseAgreementSignProps {\n  class?: HTMLAttributes['class']\n  initialSigned?: boolean\n  initialInitialsCompleted?: boolean\n}\n\nconst props = withDefaults(defineProps<LeaseAgreementSignProps>(), {\n  initialSigned: false,\n  initialInitialsCompleted: false,\n})\n\nconst initial1Completed = ref(props.initialInitialsCompleted || props.initialSigned)\nconst initial2Completed = ref(props.initialInitialsCompleted || props.initialSigned)\nconst isSigned = ref(props.initialSigned)\nconst signerName = ref('Elena Rostova')\nconst signatureFont = ref<'serif' | 'script' | 'sans'>('serif')\nconst eConsentAgreed = ref(true)\nconst downloadSuccess = ref(false)\n\nconst completedCount = computed(() => {\n  let count = 0\n  if (initial1Completed.value) count++\n  if (initial2Completed.value) count++\n  if (isSigned.value) count++\n  return count\n})\n\nconst canSign = computed(() => {\n  return initial1Completed.value && initial2Completed.value && eConsentAgreed.value && !isSigned.value\n})\n\nfunction toggleInitial1() {\n  if (isSigned.value) return\n  initial1Completed.value = !initial1Completed.value\n}\n\nfunction toggleInitial2() {\n  if (isSigned.value) return\n  initial2Completed.value = !initial2Completed.value\n}\n\nfunction signAgreement() {\n  if (!canSign.value) return\n  isSigned.value = true\n}\n\nfunction resetWorkflow() {\n  initial1Completed.value = false\n  initial2Completed.value = false\n  isSigned.value = false\n  downloadSuccess.value = false\n}\n\nfunction handleDownload() {\n  downloadSuccess.value = true\n  setTimeout(() => {\n    downloadSuccess.value = false\n  }, 2500)\n}\n\nfunction handlePrint() {\n  if (typeof window !== 'undefined') {\n    window.print()\n  }\n}\n\nfunction scrollToInitial1() {\n  const el = document.getElementById('initial-marker-1')\n  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n}\n\nfunction scrollToInitial2() {\n  const el = document.getElementById('initial-marker-2')\n  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n}\n</script>\n\n<template>\n  <div data-slot=\"lease-agreement-sign\" :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      <!-- Top Header -->\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-4 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\">Agreement Ref:</span>\n              <span class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">#LSA-2026-44B</span>\n              <span class=\"text-muted-foreground text-xs\">&bull;</span>\n              <Badge\n                wrap\n                v-if=\"isSigned\"\n                class=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\"\n              >\n                <BadgeCheck class=\"size-3.5\" />\n                <span>Fully Executed &amp; Legally Binding</span>\n              </Badge>\n              <Badge\n                wrap\n                v-else-if=\"initial1Completed && initial2Completed\"\n                class=\"border-info/30 bg-info/10 text-info gap-1.5 text-xs font-medium\"\n              >\n                <PenTool class=\"size-3.5\" />\n                <span>Ready for Tenant Signature</span>\n              </Badge>\n              <Badge wrap 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\n                  >Action Required &bull; {{ (initial1Completed ? 0 : 1) + (initial2Completed ? 0 : 1) }} Signatures\n                  Needed</span\n                >\n              </Badge>\n            </div>\n            <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl lg:text-3xl\">\n              Residential Lease Agreement &bull; 12-Month Term\n            </h1>\n            <p class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n              <Building2 class=\"size-4 shrink-0\" />\n              <span>Unit 4B &bull; 742 Evergreen Terrace, Springfield, OR 97477</span>\n            </p>\n          </div>\n\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\n              aria-label=\"Download attachment\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs\"\n              @click=\"handleDownload\"\n            >\n              <Download class=\"size-4\" />\n              <span>{{ downloadSuccess ? 'Downloading PDF...' : 'Download Draft PDF' }}</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      </header>\n\n      <!-- 2-Column Layout -->\n      <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n        <!-- Left Column: Legal Lease Document -->\n        <main class=\"space-y-6 lg:col-span-8\">\n          <div class=\"border-border bg-card rounded-xl border p-6 shadow-xs sm:p-8\">\n            <!-- Document Title Bar -->\n            <div class=\"border-border border-b pb-6 text-center\">\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs tracking-widest uppercase\">\n                Official Real Estate Contract\n              </Badge>\n              <h2 class=\"text-foreground mt-3 text-lg font-bold tracking-tight uppercase sm:text-xl\">\n                Standard Residential Lease Agreement\n              </h2>\n              <p class=\"text-muted-foreground mt-1 text-xs\">\n                State of Oregon &bull; Multnomah County &bull; Governing Statute: ORS Chapter 90\n              </p>\n            </div>\n\n            <!-- Lease Summary Terms 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 tracking-wider uppercase\">\n                    Key Financial &amp; Term Summary\n                  </h3>\n                  <Badge wrap variant=\"secondary\" class=\"font-mono text-xs\">Fixed-Term</Badge>\n                </div>\n                <div class=\"grid grid-cols-2 gap-4 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\">Monthly Rent</p>\n                    <p class=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">$3,450.00</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">Due 1st of month</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\">Lease Duration</p>\n                    <p class=\"text-foreground mt-1 text-xs font-bold sm:text-sm\">12 Months</p>\n                    <p class=\"text-muted-foreground mt-0.5 font-mono text-xs tabular-nums\">\n                      Sep 01, 2026 – Aug 31, 2027\n                    </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\">Security Deposit</p>\n                    <p class=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">$3,450.00</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">Escrow Trust Acct</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\">Pet Policy</p>\n                    <p class=\"text-foreground mt-1 text-xs font-bold sm:text-sm\">Approved - 1 Dog</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">$50/mo pet rent</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Legal Sections -->\n            <div class=\"text-foreground/90 space-y-8 text-xs leading-relaxed sm:text-sm\">\n              <!-- Section 1: Parties & Premises -->\n              <section id=\"section-1\" class=\"space-y-3\">\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-bold sm:text-base\">Parties, Premises &amp; Occupancy</h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  This Residential Lease Agreement (the &ldquo;Agreement&rdquo;) is entered into on this 21st day of\n                  August, 2026, 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-semibold tracking-wider uppercase\">Landlord / Lessor</p>\n                    <p class=\"text-foreground mt-1 font-medium\">Evergreen Heritage Holdings LLC</p>\n                    <p class=\"text-muted-foreground text-xs\">Managing Agent: Marcus Vance, CPM</p>\n                    <p class=\"text-muted-foreground font-mono text-xs\">Lic #OR-994201 &bull; info@evergreenhh.com</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-semibold tracking-wider uppercase\">Tenant / Lessee</p>\n                    <p class=\"text-foreground mt-1 font-medium\">Elena Rostova</p>\n                    <p class=\"text-muted-foreground text-xs\">Primary Occupant</p>\n                    <p class=\"text-muted-foreground text-xs\">elena.rostova@example.com &bull; (555) 234-5678</p>\n                  </div>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  <strong>Premises Description:</strong> Landlord hereby leases to Tenant the residential real property\n                  situated at <strong>Unit 4B, 742 Evergreen Terrace, Springfield, OR 97477</strong>, comprising 2\n                  Bedrooms, 2 Full Bathrooms (approx. 1,120 sq ft), together with designated covered parking stall #42\n                  and storage locker #S-14.\n                </p>\n              </section>\n\n              <Separator />\n\n              <!-- Section 2: Rent Payment & Late Fees -->\n              <section id=\"section-2\" class=\"space-y-3\">\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-bold sm:text-base\">Rent Payment Schedule &amp; Late Fees</h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  Tenant agrees to pay Landlord the base monthly rent of\n                  <strong class=\"text-foreground font-mono tabular-nums\">$3,450.00 USD</strong> plus\n                  <strong class=\"text-foreground font-mono tabular-nums\">$50.00 USD</strong> monthly pet rent, for an\n                  aggregate monthly payment of\n                  <strong class=\"text-foreground font-mono tabular-nums\">$3,500.00 USD</strong>, due on or before the\n                  first (1st) day of each calendar month.\n                </p>\n                <p class=\"text-muted-foreground\">\n                  <strong>Grace Period &amp; Penalties:</strong> A grace period is provided through 11:59 PM PST on the\n                  fifth (5th) day of the month. If rent is not received in full by 12:00 AM on the sixth (6th) calendar\n                  day, a statutory late fee of\n                  <strong class=\"text-foreground font-mono tabular-nums\">$75.00 USD</strong> shall immediately apply,\n                  plus an additional charge of\n                  <strong class=\"text-foreground font-mono tabular-nums\">$10.00 USD per day</strong> until the\n                  delinquent balance is satisfied in full.\n                </p>\n\n                <!-- Initial Marker 1 -->\n                <div\n                  id=\"initial-marker-1\"\n                  :class=\"\n                    cn(\n                      'rounded-lg border p-4 transition-colors duration-200',\n                      initial1Completed\n                        ? 'border-success/40 bg-success/5'\n                        : 'border-warning/50 bg-warning/5 ring-warning/20 dark:bg-warning/10 ring-1',\n                    )\n                  \"\n                >\n                  <div class=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-center\">\n                    <div class=\"space-y-1\">\n                      <div class=\"flex items-center gap-2\">\n                        <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"\n                          >Tenant Initial Requirement &bull; Section 2</span\n                        >\n                        <Badge\n                          wrap\n                          v-if=\"initial1Completed\"\n                          class=\"border-success/40 bg-success/10 text-success text-xs font-medium\"\n                        >\n                          <Check class=\"mr-1 size-3\" /> Initialed\n                        </Badge>\n                        <Badge wrap v-else class=\"border-warning/40 bg-warning/10 text-warning text-xs font-medium\">\n                          Action Required\n                        </Badge>\n                      </div>\n                      <p class=\"text-muted-foreground text-xs\">\n                        Acknowledge and agree to the $3,450.00 rent schedule, ACH delivery, and $75.00 late assessment\n                        clauses.\n                      </p>\n                    </div>\n\n                    <Button\n                      type=\"button\"\n                      size=\"sm\"\n                      :disabled=\"isSigned\"\n                      :variant=\"initial1Completed ? 'outline' : 'default'\"\n                      :class=\"\n                        cn(\n                          'shrink-0 gap-2 text-xs font-medium',\n                          initial1Completed\n                            ? 'border-success/40 text-success hover:bg-success/10 text-success'\n                            : 'bg-warning hover:bg-warning/90 bg-warning dark:hover:bg-warning text-white',\n                        )\n                      \"\n                      @click=\"toggleInitial1\"\n                    >\n                      <template v-if=\"initial1Completed\">\n                        <span class=\"text-sm font-semibold italic\">ER</span>\n                        <span class=\"font-mono text-xs tabular-nums\">&bull; Elena Rostova [Initialed]</span>\n                      </template>\n                      <template v-else>\n                        <Pen class=\"size-3.5\" />\n                        <span>Click to Initial [ER]</span>\n                      </template>\n                    </Button>\n                  </div>\n                </div>\n              </section>\n\n              <Separator />\n\n              <!-- Section 3: Maintenance & Occupancy Rules -->\n              <section id=\"section-3\" class=\"space-y-3\">\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-bold sm:text-base\">\n                    Maintenance, Utilities &amp; Occupancy Rules\n                  </h3>\n                </div>\n                <ul class=\"text-muted-foreground space-y-2\">\n                  <li class=\"flex items-start gap-2\">\n                    <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong class=\"text-foreground\">Quiet Hours:</strong> Community quiet hours are strictly enforced\n                      between 10:00 PM and 7:00 AM daily.\n                    </span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong class=\"text-foreground\">HVAC Maintenance:</strong> Tenant shall replace HVAC air filters\n                      every 90 calendar days. Replacement filters are provided free of charge at property management.\n                    </span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong class=\"text-foreground\">Guest Policy:</strong> Guests staying exceeding 14 consecutive\n                      calendar days require written authorization from property management.\n                    </span>\n                  </li>\n                  <li class=\"flex items-start gap-2\">\n                    <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong class=\"text-foreground\">Utilities Allocation:</strong> Landlord pays municipal water,\n                      sewer, and storm drainage. Tenant is responsible for electricity (PGE), gas (NW Natural), and\n                      high-speed internet.\n                    </span>\n                  </li>\n                </ul>\n              </section>\n\n              <Separator />\n\n              <!-- Section 4: Termination & Move-out Notice -->\n              <section id=\"section-4\" class=\"space-y-3\">\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-bold sm:text-base\">\n                    Termination, Renewal &amp; Move-Out Notice\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  Either party may terminate or request non-renewal of this lease by delivering a formal written notice\n                  at least <strong>sixty (60) calendar days</strong> prior to the lease expiration date of August 31,\n                  2027.\n                </p>\n                <p class=\"text-muted-foreground\">\n                  <strong>Move-Out &amp; Carpet Certification:</strong> Upon vacating the premises, Tenant shall return\n                  all building keys (2 unit keys, 1 mailbox key, 1 garage fob) and furnish a paid receipt from a\n                  licensed professional carpet cleaning service. A joint walk-through inspection will be conducted\n                  within 72 hours of key surrender.\n                </p>\n\n                <!-- Initial Marker 2 -->\n                <div\n                  id=\"initial-marker-2\"\n                  :class=\"\n                    cn(\n                      'rounded-lg border p-4 transition-colors duration-200',\n                      initial2Completed\n                        ? 'border-success/40 bg-success/5'\n                        : 'border-warning/50 bg-warning/5 ring-warning/20 dark:bg-warning/10 ring-1',\n                    )\n                  \"\n                >\n                  <div class=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-center\">\n                    <div class=\"space-y-1\">\n                      <div class=\"flex items-center gap-2\">\n                        <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"\n                          >Tenant Initial Requirement &bull; Section 4</span\n                        >\n                        <Badge\n                          wrap\n                          v-if=\"initial2Completed\"\n                          class=\"border-success/40 bg-success/10 text-success text-xs font-medium\"\n                        >\n                          <Check class=\"mr-1 size-3\" /> Initialed\n                        </Badge>\n                        <Badge wrap v-else class=\"border-warning/40 bg-warning/10 text-warning text-xs font-medium\">\n                          Action Required\n                        </Badge>\n                      </div>\n                      <p class=\"text-muted-foreground text-xs\">\n                        Acknowledge the 60-day written move-out notice requirement and professional carpet cleaning\n                        obligation.\n                      </p>\n                    </div>\n\n                    <Button\n                      type=\"button\"\n                      size=\"sm\"\n                      :disabled=\"isSigned\"\n                      :variant=\"initial2Completed ? 'outline' : 'default'\"\n                      :class=\"\n                        cn(\n                          'shrink-0 gap-2 text-xs font-medium',\n                          initial2Completed\n                            ? 'border-success/40 text-success hover:bg-success/10 text-success'\n                            : 'bg-warning hover:bg-warning/90 bg-warning dark:hover:bg-warning text-white',\n                        )\n                      \"\n                      @click=\"toggleInitial2\"\n                    >\n                      <template v-if=\"initial2Completed\">\n                        <span class=\"text-sm font-semibold italic\">ER</span>\n                        <span class=\"font-mono text-xs tabular-nums\">&bull; Elena Rostova [Initialed]</span>\n                      </template>\n                      <template v-else>\n                        <Pen class=\"size-3.5\" />\n                        <span>Click to Initial [ER]</span>\n                      </template>\n                    </Button>\n                  </div>\n                </div>\n              </section>\n\n              <Separator />\n\n              <!-- Document Signatures Execution Box -->\n              <section class=\"space-y-4 pt-2\">\n                <div class=\"flex items-center justify-between\">\n                  <h3 class=\"text-foreground text-sm font-bold sm:text-base\">Execution &amp; Legal Signatures</h3>\n                  <span class=\"text-muted-foreground font-mono text-xs\">2 of 2 Parties</span>\n                </div>\n\n                <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  <!-- Landlord 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-semibold tracking-wider uppercase\">Landlord Signature</p>\n                      <Badge\n                        wrap\n                        variant=\"outline\"\n                        class=\"border-success/40 bg-success/10 text-success font-mono text-xs\"\n                      >\n                        <Check class=\"mr-1 size-3\" /> Signed\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\">Marcus Vance</p>\n                      <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">Agent for Evergreen Holdings LLC</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 Signed:</span>\n                        <span class=\"text-foreground font-semibold tabular-nums\">Aug 20, 2026 &bull; 09:15 PDT</span>\n                      </p>\n                      <p class=\"flex justify-between\">\n                        <span>Certificate ID:</span>\n                        <span class=\"text-foreground font-semibold\">DS-EHG-8842-MV</span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <!-- Tenant 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-semibold tracking-wider uppercase\">Tenant Signature</p>\n                      <Badge\n                        wrap\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\n                      </Badge>\n                      <Badge\n                        wrap\n                        v-else\n                        class=\"border-warning/40 bg-warning/10 text-warning font-mono text-xs font-medium\"\n                      >\n                        Pending 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 }}\n                        </p>\n                        <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                          e-Signed via DocuSign / UIPKGE Registry\n                        </p>\n                      </template>\n                      <template v-else>\n                        <p class=\"text-muted-foreground text-xs italic\">\n                          Awaiting signature execution via right sidebar\n                        </p>\n                        <p class=\"text-muted-foreground/80 mt-1 text-xs\">Complete 2 initials above to enable signing</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 Signed:</span>\n                        <span class=\"text-foreground font-semibold tabular-nums\">\n                          {{ isSigned ? 'Aug 21, 2026 • 10:44 PDT' : '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:7f83b1...9069' : 'Unsigned' }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </section>\n            </div>\n          </div>\n        </main>\n\n        <!-- Right Column: Sticky Signature Action Sidebar -->\n        <aside class=\"space-y-5 lg:sticky lg:top-6 lg:col-span-4 lg:self-start\">\n          <!-- Signer Identity Card -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-full font-bold\"\n                  >\n                    ER\n                  </div>\n                  <div>\n                    <CardTitle class=\"text-sm font-semibold\">{{ signerName }}</CardTitle>\n                    <CardDescription class=\"text-xs\">Primary Lessee &bull; Tenant</CardDescription>\n                  </div>\n                </div>\n                <Badge wrap variant=\"outline\" class=\"border-primary/30 text-primary font-mono text-xs\"\n                  >Signer 1/1</Badge\n                >\n              </div>\n            </CardHeader>\n            <CardContent class=\"text-muted-foreground space-y-2 p-4 pt-2 text-xs\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted-foreground\">Email:</span>\n                <span class=\"text-foreground font-medium\">elena.rostova@example.com</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted-foreground\">Auth Level:</span>\n                <span class=\"text-foreground font-medium\">SMS 2FA Verified</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted-foreground\">IP Session:</span>\n                <span class=\"text-foreground font-mono tabular-nums\">198.51.100.42 (TLS 1.3)</span>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Signature Required Checklist -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"text-sm font-semibold\">Required Action Checklist</CardTitle>\n                <Badge\n                  :variant=\"completedCount === 3 ? 'default' : 'secondary'\"\n                  class=\"font-mono text-xs whitespace-normal tabular-nums\"\n                >\n                  {{ completedCount }} / 3 Done\n                </Badge>\n              </div>\n              <CardDescription class=\"text-xs\">All initial markers must be completed prior to signing</CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-2.5 p-4 pt-2\">\n              <!-- Item 1 -->\n              <button\n                type=\"button\"\n                class=\"border-border/80 hover:bg-muted/40 flex w-full items-center justify-between rounded-lg border p-2.5 text-left text-xs transition-colors\"\n                @click=\"scrollToInitial1\"\n              >\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n                        initial1Completed ? 'bg-success bg-success text-white' : 'bg-warning/20 text-warning',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"initial1Completed\" class=\"size-3\" />\n                    <span v-else>1</span>\n                  </div>\n                  <div>\n                    <p class=\"text-foreground font-medium\">Initial Section 2 (Rent &amp; Fees)</p>\n                    <p class=\"text-muted-foreground text-xs\">Acknowledges $3,450 rent &amp; late charges</p>\n                  </div>\n                </div>\n                <Badge\n                  wrap\n                  :variant=\"initial1Completed ? 'outline' : 'secondary'\"\n                  :class=\"cn('text-xs', initial1Completed ? 'border-success/30 text-success' : 'text-warning')\"\n                >\n                  {{ initial1Completed ? 'Done' : 'Click to jump' }}\n                </Badge>\n              </button>\n\n              <!-- Item 2 -->\n              <button\n                type=\"button\"\n                class=\"border-border/80 hover:bg-muted/40 flex w-full items-center justify-between rounded-lg border p-2.5 text-left text-xs transition-colors\"\n                @click=\"scrollToInitial2\"\n              >\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n                        initial2Completed ? 'bg-success bg-success text-white' : 'bg-warning/20 text-warning',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"initial2Completed\" class=\"size-3\" />\n                    <span v-else>2</span>\n                  </div>\n                  <div>\n                    <p class=\"text-foreground font-medium\">Initial Section 4 (Move-Out)</p>\n                    <p class=\"text-muted-foreground text-xs\">Acknowledges 60-day notice &amp; cleaning</p>\n                  </div>\n                </div>\n                <Badge\n                  wrap\n                  :variant=\"initial2Completed ? 'outline' : 'secondary'\"\n                  :class=\"cn('text-xs', initial2Completed ? 'border-success/30 text-success' : 'text-warning')\"\n                >\n                  {{ initial2Completed ? 'Done' : 'Click to jump' }}\n                </Badge>\n              </button>\n\n              <!-- Item 3 -->\n              <div\n                :class=\"\n                  cn(\n                    'flex items-center justify-between rounded-lg border p-2.5 text-xs',\n                    isSigned ? 'border-success/40 bg-success/5' : 'border-border/80 bg-card',\n                  )\n                \"\n              >\n                <div class=\"flex items-center gap-2.5\">\n                  <div\n                    :class=\"\n                      cn(\n                        'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n                        isSigned ? 'bg-success bg-success text-white' : 'bg-muted text-muted-foreground',\n                      )\n                    \"\n                  >\n                    <Check v-if=\"isSigned\" class=\"size-3\" />\n                    <span v-else>3</span>\n                  </div>\n                  <div>\n                    <p class=\"text-foreground font-medium\">Sign Full Agreement</p>\n                    <p class=\"text-muted-foreground text-xs\">Execute legal lease contract</p>\n                  </div>\n                </div>\n                <Badge\n                  wrap\n                  :variant=\"isSigned ? 'outline' : 'secondary'\"\n                  :class=\"cn('text-xs', isSigned ? 'border-success/30 text-success' : 'text-muted-foreground')\"\n                >\n                  {{ isSigned ? 'Executed' : 'Pending' }}\n                </Badge>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Signature Pad / Typography Box -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2\">\n              <CardTitle class=\"text-sm font-semibold\">Electronic Signature Preview</CardTitle>\n              <CardDescription class=\"text-xs\">Adopt your legal signature typography</CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-4 p-4 pt-2\">\n              <!-- Style Selector -->\n              <div class=\"bg-muted/60 grid grid-cols-3 gap-1.5 rounded-lg p-1\">\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md py-1 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                    )\n                  \"\n                  @click=\"signatureFont = 'serif'\"\n                >\n                  Formal Serif\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md py-1 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                    )\n                  \"\n                  @click=\"signatureFont = 'script'\"\n                >\n                  Script Elegance\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md py-1 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                    )\n                  \"\n                  @click=\"signatureFont = 'sans'\"\n                >\n                  Modern Sans\n                </button>\n              </div>\n\n              <!-- Preview Display 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</p>\n                <div class=\"my-2 flex min-h-[48px] items-center justify-center\">\n                  <span\n                    :class=\"\n                      cn(\n                        'text-foreground text-2xl 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 }}\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 Certified</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>\n                  I agree to transact electronically and confirm this electronic signature legally binds me under U.S.\n                  ESIGN Act and ORS Chapter 90.\n                </span>\n              </label>\n\n              <!-- Main Execution Button -->\n              <div class=\"space-y-2 pt-2\">\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; Finalize 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>Lease Executed Successfully!</span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    A copy of the countersigned PDF has been securely dispatched to your verified email.\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=\"handleDownload\"\n                  >\n                    <Download class=\"size-3.5\" />\n                    <span>Download Signed PDF</span>\n                  </Button>\n                </div>\n\n                <p v-if=\"!isSigned && !canSign\" class=\"text-muted-foreground text-center text-xs\">\n                  {{\n                    !initial1Completed || !initial2Completed\n                      ? 'Please complete all initial checkpoints above before signing.'\n                      : 'Please check the electronic consent box.'\n                  }}\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Audit Log Mini Card -->\n          <div class=\"border-border bg-card/60 text-muted-foreground space-y-1.5 rounded-lg border p-3 text-xs\">\n            <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n              <Lock class=\"text-primary size-3.5\" />\n              <span>Cryptographic Tamper-Proof Audit Trail</span>\n            </div>\n            <p class=\"leading-relaxed\">\n              Every initial and signature event is stamped with SHA-256 integrity hash, RFC 3161 trusted timestamp, and\n              logged in the immutable lease registry ledger.\n            </p>\n          </div>\n        </aside>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/LeaseAgreementSign.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/separator.json"
  ],
  "description": "DocuSign-style digital residential lease agreement signature and review workflow with terms summary, interactive initial checkpoints, sticky signature action sidebar, and cryptographic audit execution.",
  "categories": [
    "real-estate",
    "hospitality",
    "app"
  ]
}