{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lease-agreement-sign",
  "title": "Lease Agreement Sign",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/lease-agreement-sign/LeaseAgreementSign.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\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-react'\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  className?: string\n  initialSigned?: boolean\n  initialInitialsCompleted?: boolean\n}\n\nexport function LeaseAgreementSign({\n  className,\n  initialSigned = false,\n  initialInitialsCompleted = false,\n}: LeaseAgreementSignProps) {\n  const [initial1Completed, setInitial1Completed] = useState(initialInitialsCompleted || initialSigned)\n  const [initial2Completed, setInitial2Completed] = useState(initialInitialsCompleted || initialSigned)\n  const [isSigned, setIsSigned] = useState(initialSigned)\n  const [signerName] = useState('Elena Rostova')\n  const [signatureFont, setSignatureFont] = useState<'serif' | 'script' | 'sans'>('serif')\n  const [eConsentAgreed, setEConsentAgreed] = useState(true)\n  const [downloadSuccess, setDownloadSuccess] = useState(false)\n\n  const completedCount = (initial1Completed ? 1 : 0) + (initial2Completed ? 1 : 0) + (isSigned ? 1 : 0)\n  const canSign = initial1Completed && initial2Completed && eConsentAgreed && !isSigned\n\n  const toggleInitial1 = () => {\n    if (isSigned) return\n    setInitial1Completed((prev) => !prev)\n  }\n\n  const toggleInitial2 = () => {\n    if (isSigned) return\n    setInitial2Completed((prev) => !prev)\n  }\n\n  const signAgreement = () => {\n    if (!canSign) return\n    setIsSigned(true)\n  }\n\n  const resetWorkflow = () => {\n    setInitial1Completed(false)\n    setInitial2Completed(false)\n    setIsSigned(false)\n    setDownloadSuccess(false)\n  }\n\n  const handleDownload = () => {\n    setDownloadSuccess(true)\n    setTimeout(() => {\n      setDownloadSuccess(false)\n    }, 2500)\n  }\n\n  const handlePrint = () => {\n    if (typeof window !== 'undefined') {\n      window.print()\n    }\n  }\n\n  const scrollToInitial1 = () => {\n    const el = document.getElementById('react-initial-marker-1')\n    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n  }\n\n  const scrollToInitial2 = () => {\n    const el = document.getElementById('react-initial-marker-2')\n    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n  }\n\n  return (\n    <div data-slot=\"lease-agreement-sign\" className={cn('bg-background text-foreground w-full', className)}>\n      <div className=\"mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8\">\n        {/* Top Header */}\n        <header className=\"border-border bg-card mb-6 rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"space-y-1.5\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"text-muted-foreground text-xs font-medium\">Agreement Ref:</span>\n                <span className=\"text-foreground font-mono text-xs font-semibold tabular-nums\">#LSA-2026-44B</span>\n                <span className=\"text-muted-foreground text-xs\">&bull;</span>\n                {isSigned ? (\n                  <Badge wrap className=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\">\n                    <BadgeCheck className=\"size-3.5\" />\n                    <span>Fully Executed &amp; Legally Binding</span>\n                  </Badge>\n                ) : initial1Completed && initial2Completed ? (\n                  <Badge wrap className=\"border-info/30 bg-info/10 text-info gap-1.5 text-xs font-medium\">\n                    <PenTool className=\"size-3.5\" />\n                    <span>Ready for Tenant Signature</span>\n                  </Badge>\n                ) : (\n                  <Badge wrap className=\"border-warning/30 bg-warning/10 text-warning gap-1.5 text-xs font-medium\">\n                    <AlertCircle className=\"size-3.5\" />\n                    <span>\n                      Action Required &bull; {(initial1Completed ? 0 : 1) + (initial2Completed ? 0 : 1)} Signatures\n                      Needed\n                    </span>\n                  </Badge>\n                )}\n              </div>\n              <h1 className=\"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 className=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n                <Building2 className=\"size-4 shrink-0\" />\n                <span>Unit 4B &bull; 742 Evergreen Terrace, Springfield, OR 97477</span>\n              </p>\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2.5\">\n              <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\" onClick={handlePrint}>\n                <Printer className=\"size-4\" />\n                <span>Print</span>\n              </Button>\n              <Button\n                aria-label=\"Download attachment\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"gap-1.5 text-xs\"\n                onClick={handleDownload}\n              >\n                <Download className=\"size-4\" />\n                <span>{downloadSuccess ? 'Downloading PDF...' : 'Download Draft PDF'}</span>\n              </Button>\n              {isSigned && (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"border-muted-foreground/30 gap-1.5 text-xs\"\n                  onClick={resetWorkflow}\n                >\n                  <RotateCcw className=\"size-3.5\" />\n                  <span>Reset Demo</span>\n                </Button>\n              )}\n            </div>\n          </div>\n        </header>\n\n        {/* 2-Column Layout */}\n        <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n          {/* Left Column: Legal Lease Document */}\n          <main className=\"space-y-6 lg:col-span-8\">\n            <div className=\"border-border bg-card rounded-xl border p-6 shadow-xs sm:p-8\">\n              {/* Document Title Bar */}\n              <div className=\"border-border border-b pb-6 text-center\">\n                <Badge wrap variant=\"outline\" className=\"font-mono text-xs tracking-widest uppercase\">\n                  Official Real Estate Contract\n                </Badge>\n                <h2 className=\"text-foreground mt-3 text-lg font-bold tracking-tight uppercase sm:text-xl\">\n                  Standard Residential Lease Agreement\n                </h2>\n                <p className=\"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 className=\"my-6\">\n                <div className=\"bg-muted/40 border-border rounded-lg border p-4 sm:p-5\">\n                  <div className=\"mb-3 flex items-center justify-between\">\n                    <h3 className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                      Key Financial &amp; Term Summary\n                    </h3>\n                    <Badge wrap variant=\"secondary\" className=\"font-mono text-xs\">\n                      Fixed-Term\n                    </Badge>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n                    <div className=\"border-border/60 bg-card rounded-md border p-3\">\n                      <p className=\"text-muted-foreground text-xs font-medium\">Monthly Rent</p>\n                      <p className=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">$3,450.00</p>\n                      <p className=\"text-muted-foreground mt-0.5 text-xs\">Due 1st of month</p>\n                    </div>\n                    <div className=\"border-border/60 bg-card rounded-md border p-3\">\n                      <p className=\"text-muted-foreground text-xs font-medium\">Lease Duration</p>\n                      <p className=\"text-foreground mt-1 text-xs font-bold sm:text-sm\">12 Months</p>\n                      <p className=\"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 className=\"border-border/60 bg-card rounded-md border p-3\">\n                      <p className=\"text-muted-foreground text-xs font-medium\">Security Deposit</p>\n                      <p className=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">$3,450.00</p>\n                      <p className=\"text-muted-foreground mt-0.5 text-xs\">Escrow Trust Acct</p>\n                    </div>\n                    <div className=\"border-border/60 bg-card rounded-md border p-3\">\n                      <p className=\"text-muted-foreground text-xs font-medium\">Pet Policy</p>\n                      <p className=\"text-foreground mt-1 text-xs font-bold sm:text-sm\">Approved - 1 Dog</p>\n                      <p className=\"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 className=\"text-foreground/90 space-y-8 text-xs leading-relaxed sm:text-sm\">\n                {/* Section 1: Parties & Premises */}\n                <section id=\"section-1\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      01\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Parties, Premises &amp; Occupancy\n                    </h3>\n                  </div>\n                  <p className=\"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 className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                    <div className=\"border-border bg-muted/20 rounded-lg border p-3.5\">\n                      <p className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                        Landlord / Lessor\n                      </p>\n                      <p className=\"text-foreground mt-1 font-medium\">Evergreen Heritage Holdings LLC</p>\n                      <p className=\"text-muted-foreground text-xs\">Managing Agent: Marcus Vance, CPM</p>\n                      <p className=\"text-muted-foreground font-mono text-xs\">\n                        Lic #OR-994201 &bull; info@evergreenhh.com\n                      </p>\n                    </div>\n                    <div className=\"border-border bg-muted/20 rounded-lg border p-3.5\">\n                      <p className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">Tenant / Lessee</p>\n                      <p className=\"text-foreground mt-1 font-medium\">Elena Rostova</p>\n                      <p className=\"text-muted-foreground text-xs\">Primary Occupant</p>\n                      <p className=\"text-muted-foreground text-xs\">elena.rostova@example.com &bull; (555) 234-5678</p>\n                    </div>\n                  </div>\n                  <p className=\"text-muted-foreground\">\n                    <strong>Premises Description:</strong> Landlord hereby leases to Tenant the residential real\n                    property situated at <strong>Unit 4B, 742 Evergreen Terrace, Springfield, OR 97477</strong>,\n                    comprising 2 Bedrooms, 2 Full Bathrooms (approx. 1,120 sq ft), together with designated covered\n                    parking stall #42 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\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      02\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Rent Payment Schedule &amp; Late Fees\n                    </h3>\n                  </div>\n                  <p className=\"text-muted-foreground\">\n                    Tenant agrees to pay Landlord the base monthly rent of{' '}\n                    <strong className=\"text-foreground font-mono tabular-nums\">$3,450.00 USD</strong> plus{' '}\n                    <strong className=\"text-foreground font-mono tabular-nums\">$50.00 USD</strong> monthly pet rent, for\n                    an aggregate monthly payment of{' '}\n                    <strong className=\"text-foreground font-mono tabular-nums\">$3,500.00 USD</strong>, due on or before\n                    the first (1st) day of each calendar month.\n                  </p>\n                  <p className=\"text-muted-foreground\">\n                    <strong>Grace Period &amp; Penalties:</strong> A grace period is provided through 11:59 PM PST on\n                    the fifth (5th) day of the month. If rent is not received in full by 12:00 AM on the sixth (6th)\n                    calendar day, a statutory late fee of{' '}\n                    <strong className=\"text-foreground font-mono tabular-nums\">$75.00 USD</strong> shall immediately\n                    apply, plus an additional charge of{' '}\n                    <strong className=\"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=\"react-initial-marker-1\"\n                    className={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                    <div className=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-center\">\n                      <div className=\"space-y-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                            Tenant Initial Requirement &bull; Section 2\n                          </span>\n                          {initial1Completed ? (\n                            <Badge wrap className=\"border-success/40 bg-success/10 text-success text-xs font-medium\">\n                              <Check className=\"mr-1 size-3\" /> Initialed\n                            </Badge>\n                          ) : (\n                            <Badge wrap className=\"border-warning/40 bg-warning/10 text-warning text-xs font-medium\">\n                              Action Required\n                            </Badge>\n                          )}\n                        </div>\n                        <p className=\"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                        className={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                        onClick={toggleInitial1}\n                      >\n                        {initial1Completed ? (\n                          <>\n                            <span className=\"text-sm font-semibold italic\">ER</span>\n                            <span className=\"font-mono text-xs tabular-nums\">&bull; Elena Rostova [Initialed]</span>\n                          </>\n                        ) : (\n                          <>\n                            <Pen className=\"size-3.5\" />\n                            <span>Click to Initial [ER]</span>\n                          </>\n                        )}\n                      </Button>\n                    </div>\n                  </div>\n                </section>\n\n                <Separator />\n\n                {/* Section 3: Maintenance & Occupancy Rules */}\n                <section id=\"section-3\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      03\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Maintenance, Utilities &amp; Occupancy Rules\n                    </h3>\n                  </div>\n                  <ul className=\"text-muted-foreground space-y-2\">\n                    <li className=\"flex items-start gap-2\">\n                      <CheckCircle2 className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                      <span>\n                        <strong className=\"text-foreground\">Quiet Hours:</strong> Community quiet hours are strictly\n                        enforced between 10:00 PM and 7:00 AM daily.\n                      </span>\n                    </li>\n                    <li className=\"flex items-start gap-2\">\n                      <CheckCircle2 className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                      <span>\n                        <strong className=\"text-foreground\">HVAC Maintenance:</strong> Tenant shall replace HVAC air\n                        filters every 90 calendar days. Replacement filters are provided free of charge at property\n                        management.\n                      </span>\n                    </li>\n                    <li className=\"flex items-start gap-2\">\n                      <CheckCircle2 className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                      <span>\n                        <strong className=\"text-foreground\">Guest Policy:</strong> Guests staying exceeding 14\n                        consecutive calendar days require written authorization from property management.\n                      </span>\n                    </li>\n                    <li className=\"flex items-start gap-2\">\n                      <CheckCircle2 className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                      <span>\n                        <strong className=\"text-foreground\">Utilities Allocation:</strong> Landlord pays municipal\n                        water, sewer, and storm drainage. Tenant is responsible for electricity (PGE), gas (NW Natural),\n                        and 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\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      04\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Termination, Renewal &amp; Move-Out Notice\n                    </h3>\n                  </div>\n                  <p className=\"text-muted-foreground\">\n                    Either party may terminate or request non-renewal of this lease by delivering a formal written\n                    notice at least <strong>sixty (60) calendar days</strong> prior to the lease expiration date of\n                    August 31, 2027.\n                  </p>\n                  <p className=\"text-muted-foreground\">\n                    <strong>Move-Out &amp; Carpet Certification:</strong> Upon vacating the premises, Tenant shall\n                    return all building keys (2 unit keys, 1 mailbox key, 1 garage fob) and furnish a paid receipt from\n                    a 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=\"react-initial-marker-2\"\n                    className={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                    <div className=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-center\">\n                      <div className=\"space-y-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                            Tenant Initial Requirement &bull; Section 4\n                          </span>\n                          {initial2Completed ? (\n                            <Badge wrap className=\"border-success/40 bg-success/10 text-success text-xs font-medium\">\n                              <Check className=\"mr-1 size-3\" /> Initialed\n                            </Badge>\n                          ) : (\n                            <Badge wrap className=\"border-warning/40 bg-warning/10 text-warning text-xs font-medium\">\n                              Action Required\n                            </Badge>\n                          )}\n                        </div>\n                        <p className=\"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                        className={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                        onClick={toggleInitial2}\n                      >\n                        {initial2Completed ? (\n                          <>\n                            <span className=\"text-sm font-semibold italic\">ER</span>\n                            <span className=\"font-mono text-xs tabular-nums\">&bull; Elena Rostova [Initialed]</span>\n                          </>\n                        ) : (\n                          <>\n                            <Pen className=\"size-3.5\" />\n                            <span>Click to Initial [ER]</span>\n                          </>\n                        )}\n                      </Button>\n                    </div>\n                  </div>\n                </section>\n\n                <Separator />\n\n                {/* Document Signatures Execution Box */}\n                <section className=\"space-y-4 pt-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">Execution &amp; Legal Signatures</h3>\n                    <span className=\"text-muted-foreground font-mono text-xs\">2 of 2 Parties</span>\n                  </div>\n\n                  <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                    {/* Landlord Signature Block */}\n                    <div className=\"border-border bg-muted/20 rounded-lg border p-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <p className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                          Landlord Signature\n                        </p>\n                        <Badge\n                          wrap\n                          variant=\"outline\"\n                          className=\"border-success/40 bg-success/10 text-success font-mono text-xs\"\n                        >\n                          <Check className=\"mr-1 size-3\" /> Signed\n                        </Badge>\n                      </div>\n                      <div className=\"border-border/60 bg-card my-3 rounded-md border p-3 text-center\">\n                        <p className=\"text-success text-success text-xl font-medium tracking-wide italic\">\n                          Marcus Vance\n                        </p>\n                        <p className=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                          Agent for Evergreen Holdings LLC\n                        </p>\n                      </div>\n                      <div className=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                        <p className=\"flex justify-between\">\n                          <span>Date Signed:</span>\n                          <span className=\"text-foreground font-semibold tabular-nums\">\n                            Aug 20, 2026 &bull; 09:15 PDT\n                          </span>\n                        </p>\n                        <p className=\"flex justify-between\">\n                          <span>Certificate ID:</span>\n                          <span className=\"text-foreground font-semibold\">DS-EHG-8842-MV</span>\n                        </p>\n                      </div>\n                    </div>\n\n                    {/* Tenant Signature Block */}\n                    <div\n                      className={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                      <div className=\"flex items-center justify-between\">\n                        <p className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                          Tenant Signature\n                        </p>\n                        {isSigned ? (\n                          <Badge\n                            wrap\n                            className=\"border-success/40 bg-success/10 text-success font-mono text-xs font-medium\"\n                          >\n                            <Check className=\"mr-1 size-3\" /> Signed\n                          </Badge>\n                        ) : (\n                          <Badge\n                            wrap\n                            className=\"border-warning/40 bg-warning/10 text-warning font-mono text-xs font-medium\"\n                          >\n                            Pending Signature\n                          </Badge>\n                        )}\n                      </div>\n\n                      <div\n                        className={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                        {isSigned ? (\n                          <>\n                            <p\n                              className={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                              {signerName}\n                            </p>\n                            <p className=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                              e-Signed via DocuSign / UIPKGE Registry\n                            </p>\n                          </>\n                        ) : (\n                          <>\n                            <p className=\"text-muted-foreground text-xs italic\">\n                              Awaiting signature execution via right sidebar\n                            </p>\n                            <p className=\"text-muted-foreground/80 mt-1 text-xs\">\n                              Complete 2 initials above to enable signing\n                            </p>\n                          </>\n                        )}\n                      </div>\n\n                      <div className=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                        <p className=\"flex justify-between\">\n                          <span>Date Signed:</span>\n                          <span className=\"text-foreground font-semibold tabular-nums\">\n                            {isSigned ? 'Aug 21, 2026 • 10:44 PDT' : 'Pending'}\n                          </span>\n                        </p>\n                        <p className=\"flex justify-between\">\n                          <span>Digital Audit Hash:</span>\n                          <span className=\"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 className=\"space-y-5 lg:sticky lg:top-6 lg:col-span-4 lg:self-start\">\n            {/* Signer Identity Card */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-full font-bold\">\n                      ER\n                    </div>\n                    <div>\n                      <CardTitle className=\"text-sm font-semibold\">{signerName}</CardTitle>\n                      <CardDescription className=\"text-xs\">Primary Lessee &bull; Tenant</CardDescription>\n                    </div>\n                  </div>\n                  <Badge wrap variant=\"outline\" className=\"border-primary/30 text-primary font-mono text-xs\">\n                    Signer 1/1\n                  </Badge>\n                </div>\n              </CardHeader>\n              <CardContent className=\"text-muted-foreground space-y-2 p-4 pt-2 text-xs\">\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Email:</span>\n                  <span className=\"text-foreground font-medium\">elena.rostova@example.com</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Auth Level:</span>\n                  <span className=\"text-foreground font-medium\">SMS 2FA Verified</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">IP Session:</span>\n                  <span className=\"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 className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"text-sm font-semibold\">Required Action Checklist</CardTitle>\n                  <Badge\n                    wrap\n                    variant={completedCount === 3 ? 'default' : 'secondary'}\n                    className=\"font-mono text-xs tabular-nums\"\n                  >\n                    {completedCount} / 3 Done\n                  </Badge>\n                </div>\n                <CardDescription className=\"text-xs\">\n                  All initial markers must be completed prior to signing\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-2.5 p-4 pt-2\">\n                {/* Item 1 */}\n                <button\n                  type=\"button\"\n                  className=\"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                  onClick={scrollToInitial1}\n                >\n                  <div className=\"flex items-center gap-2.5\">\n                    <div\n                      className={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                      {initial1Completed ? <Check className=\"size-3\" /> : <span>1</span>}\n                    </div>\n                    <div>\n                      <p className=\"text-foreground font-medium\">Initial Section 2 (Rent &amp; Fees)</p>\n                      <p className=\"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                    className={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                  className=\"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                  onClick={scrollToInitial2}\n                >\n                  <div className=\"flex items-center gap-2.5\">\n                    <div\n                      className={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                      {initial2Completed ? <Check className=\"size-3\" /> : <span>2</span>}\n                    </div>\n                    <div>\n                      <p className=\"text-foreground font-medium\">Initial Section 4 (Move-Out)</p>\n                      <p className=\"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                    className={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                  className={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                  <div className=\"flex items-center gap-2.5\">\n                    <div\n                      className={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                      {isSigned ? <Check className=\"size-3\" /> : <span>3</span>}\n                    </div>\n                    <div>\n                      <p className=\"text-foreground font-medium\">Sign Full Agreement</p>\n                      <p className=\"text-muted-foreground text-xs\">Execute legal lease contract</p>\n                    </div>\n                  </div>\n                  <Badge\n                    wrap\n                    variant={isSigned ? 'outline' : 'secondary'}\n                    className={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 className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <CardTitle className=\"text-sm font-semibold\">Electronic Signature Preview</CardTitle>\n                <CardDescription className=\"text-xs\">Adopt your legal signature typography</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-4 p-4 pt-2\">\n                {/* Style Selector */}\n                <div className=\"bg-muted/60 grid grid-cols-3 gap-1.5 rounded-lg p-1\">\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setSignatureFont('serif')}\n                  >\n                    Formal Serif\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setSignatureFont('script')}\n                  >\n                    Script Elegance\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setSignatureFont('sans')}\n                  >\n                    Modern Sans\n                  </button>\n                </div>\n\n                {/* Preview Display Box */}\n                <div className=\"border-border bg-muted/20 relative rounded-lg border p-4 text-center\">\n                  <p className=\"text-muted-foreground text-xs font-medium\">Adopted Signature</p>\n                  <div className=\"my-2 flex min-h-[48px] items-center justify-center\">\n                    <span\n                      className={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                      {signerName}\n                    </span>\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center justify-center gap-1.5 font-mono text-xs\">\n                    <ShieldCheck className=\"text-success size-3.5\" />\n                    <span>256-Bit eIDAS / ESIGN Certified</span>\n                  </div>\n                </div>\n\n                {/* Consent Checkbox */}\n                <label className=\"text-muted-foreground flex cursor-pointer items-start gap-2.5 text-xs\">\n                  <input\n                    type=\"checkbox\"\n                    checked={eConsentAgreed}\n                    disabled={isSigned}\n                    onChange={(e) => setEConsentAgreed(e.target.checked)}\n                    className=\"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 className=\"space-y-2 pt-2\">\n                  {!isSigned ? (\n                    <Button\n                      type=\"button\"\n                      className=\"w-full gap-2 text-sm font-semibold shadow-xs\"\n                      disabled={!canSign}\n                      onClick={signAgreement}\n                    >\n                      <PenTool className=\"size-4\" />\n                      <span>Sign &amp; Finalize Agreement</span>\n                    </Button>\n                  ) : (\n                    <div className=\"border-success/30 bg-success/10 space-y-2 rounded-lg border p-3.5 text-center\">\n                      <div className=\"text-success flex items-center justify-center gap-1.5 text-xs font-semibold\">\n                        <CheckCircle2 className=\"size-4\" />\n                        <span>Lease Executed Successfully!</span>\n                      </div>\n                      <p className=\"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                        className=\"mt-2 w-full gap-1.5 text-xs\"\n                        onClick={handleDownload}\n                      >\n                        <Download className=\"size-3.5\" />\n                        <span>Download Signed PDF</span>\n                      </Button>\n                    </div>\n                  )}\n\n                  {!isSigned && !canSign && (\n                    <p className=\"text-muted-foreground text-center text-xs\">\n                      {!initial1Completed || !initial2Completed\n                        ? 'Please complete all initial checkpoints above before signing.'\n                        : 'Please check the electronic consent box.'}\n                    </p>\n                  )}\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Audit Log Mini Card */}\n            <div className=\"border-border bg-card/60 text-muted-foreground space-y-1.5 rounded-lg border p-3 text-xs\">\n              <div className=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <Lock className=\"text-primary size-3.5\" />\n                <span>Cryptographic Tamper-Proof Audit Trail</span>\n              </div>\n              <p className=\"leading-relaxed\">\n                Every initial and signature event is stamped with SHA-256 integrity hash, RFC 3161 trusted timestamp,\n                and logged in the immutable lease registry ledger.\n              </p>\n            </div>\n          </aside>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/LeaseAgreementSign.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/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"
  ]
}