{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "freelance-work-for-hire-contract",
  "title": "Freelance Work For Hire Contract",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/freelance-work-for-hire-contract/FreelanceWorkForHireContract.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  BadgeCheck,\n  Calendar,\n  Check,\n  CheckCircle2,\n  Clock,\n  Download,\n  Lock,\n  Pen,\n  PenTool,\n  Printer,\n  RotateCcw,\n  Scale,\n  ShieldAlert,\n  ShieldCheck,\n} from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\n\nexport interface FreelanceWorkForHireContractProps {\n  class?: HTMLAttributes['class']\n  initialSigned?: boolean\n  initialInitialsCompleted?: boolean\n}\n\nconst props = withDefaults(defineProps<FreelanceWorkForHireContractProps>(), {\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 signContract() {\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('vue-initial-marker-ip')\n  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n}\n\nfunction scrollToInitial2() {\n  const el = document.getElementById('vue-initial-marker-kill-fee')\n  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n}\n\nfunction scrollToSignaturePad() {\n  const el = document.getElementById('vue-signature-pad')\n  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n}\n</script>\n\n<template>\n  <div data-slot=\"freelance-work-for-hire-contract\" :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 Agreement 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\">Contract Ref:</span>\n              <span class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">#MSA-2026-4892</span>\n              <span class=\"text-muted-foreground text-xs\">&bull;</span>\n              <span class=\"text-muted-foreground text-xs font-medium\">Total Value:</span>\n              <span class=\"text-foreground font-mono text-xs font-bold tabular-nums\">$24,000.00 USD</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-warning/30 bg-warning/10 text-warning gap-1.5 text-xs font-medium\"\n              >\n                <PenTool class=\"size-3.5\" />\n                <span>Ready for 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                  Ready for Signature &bull; {{ (initial1Completed ? 0 : 1) + (initial2Completed ? 0 : 1) }} Checkpoints\n                  Pending\n                </span>\n              </Badge>\n            </div>\n            <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl lg:text-3xl\">\n              Independent Contractor Agreement &amp; Work-for-Hire Assignment\n            </h1>\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs sm:text-sm\">\n              <span class=\"flex items-center gap-1.5\">\n                <Scale class=\"text-primary size-3.5\" />\n                <span>Governing Law: <strong>State of Delaware, US</strong></span>\n              </span>\n              <span class=\"flex items-center gap-1.5\">\n                <Calendar class=\"text-primary size-3.5\" />\n                <span>Effective Date: <strong>September 01, 2026</strong></span>\n              </span>\n              <span class=\"flex items-center gap-1.5\">\n                <ShieldCheck class=\"text-success size-3.5\" />\n                <span>Work-for-Hire (17 U.S.C. &sect; 101)</span>\n              </span>\n            </div>\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 shadow-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 shadow-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              size=\"sm\"\n              class=\"gap-1.5 text-xs font-semibold shadow-xs\"\n              @click=\"scrollToSignaturePad\"\n            >\n              <PenTool class=\"size-3.5\" />\n              <span>Sign Contract</span>\n            </Button>\n            <Button\n              v-else\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 Agreement Layout -->\n      <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n        <!-- Left Column: Contract Document Terms -->\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 Header Banner -->\n            <div class=\"border-border border-b pb-6 text-center\">\n              <div\n                class=\"border-primary/20 bg-primary/5 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold\"\n              >\n                <Scale class=\"size-3.5\" />\n                <span>MASTER SERVICES AGREEMENT (MSA) &bull; WORK-FOR-HIRE</span>\n              </div>\n              <h2 class=\"text-foreground mt-3 text-lg font-bold tracking-tight uppercase sm:text-xl\">\n                Independent Contractor Master Services Agreement\n              </h2>\n              <p class=\"text-muted-foreground mt-1 text-xs\">\n                Proprietary Rights Assignment &bull; Milestone Payment Schedule &bull; Kill Fee Terms\n              </p>\n            </div>\n\n            <!-- Parties Comparison Matrix -->\n            <div class=\"my-6\">\n              <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <!-- Client Card -->\n                <div class=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">The Client</span>\n                    <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">Principal</Badge>\n                  </div>\n                  <div class=\"mt-2.5 flex items-center gap-3\">\n                    <Avatar class=\"border-border size-10 border\">\n                      <AvatarFallback class=\"bg-primary/10 text-primary font-bold\">UP</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-bold\">UIPKGE Technologies Inc.</p>\n                      <p class=\"text-muted-foreground text-xs\">Delaware C-Corp &bull; File #6849201</p>\n                    </div>\n                  </div>\n                  <Separator class=\"my-3\" />\n                  <div class=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                    <p class=\"flex justify-between\">\n                      <span>Address:</span>\n                      <span class=\"text-foreground text-right font-sans\">548 Market St, Suite 29000, SF, CA 94104</span>\n                    </p>\n                    <p class=\"flex justify-between\">\n                      <span>Authorized Signer:</span>\n                      <span class=\"text-foreground font-sans font-semibold\">David Chen (CTO)</span>\n                    </p>\n                    <p class=\"flex justify-between\">\n                      <span>Billing Contact:</span>\n                      <span class=\"text-foreground font-sans\">legal@uipkge.dev</span>\n                    </p>\n                  </div>\n                </div>\n\n                <!-- Contractor Card -->\n                <div class=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n                  <div class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">The Contractor</span>\n                    <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">Independent Pro</Badge>\n                  </div>\n                  <div class=\"mt-2.5 flex items-center gap-3\">\n                    <Avatar class=\"border-border size-10 border\">\n                      <AvatarFallback class=\"bg-primary/10 text-primary font-bold\">ER</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-bold\">Elena Rostova Design LLC</p>\n                      <p class=\"text-muted-foreground text-xs\">New York LLC &bull; EIN: XX-XXX4910</p>\n                    </div>\n                  </div>\n                  <Separator class=\"my-3\" />\n                  <div class=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                    <p class=\"flex justify-between\">\n                      <span>Address:</span>\n                      <span class=\"text-foreground text-right font-sans\">350 5th Avenue, Suite 4100, NY, NY 10118</span>\n                    </p>\n                    <p class=\"flex justify-between\">\n                      <span>Principal Signer:</span>\n                      <span class=\"text-foreground font-sans font-semibold\">Elena Rostova (Design Architect)</span>\n                    </p>\n                    <p class=\"flex justify-between\">\n                      <span>Direct Contact:</span>\n                      <span class=\"text-foreground font-sans\">elena@rostovadesign.io</span>\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Scope of Work Executive Summary Box -->\n            <div class=\"bg-muted/30 border-border mb-8 rounded-lg border p-4 sm:p-5\">\n              <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div>\n                  <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"\n                    >Statement of Work (SOW-01)</span\n                  >\n                  <h3 class=\"text-foreground text-sm font-bold sm:text-base\">\n                    Full-Stack Design System Component Architecture &amp; Documentation\n                  </h3>\n                </div>\n                <Badge wrap variant=\"secondary\" class=\"self-start font-mono text-xs sm:self-auto\"\n                  >Fixed-Price Milestone</Badge\n                >\n              </div>\n              <p class=\"text-muted-foreground mt-2 text-xs leading-relaxed sm:text-sm\">\n                Contractor shall architect, code, test, and document a multi-framework component registry matching\n                enterprise production craft standards, comprising OKLCH design tokens, 50 headless Vue &amp; React UI\n                primitives, 50 composed application blocks, accessibility test suites, and interactive Astro live\n                documentation.\n              </p>\n              <div class=\"mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n                <div class=\"border-border/60 bg-card rounded-md border p-2.5\">\n                  <p class=\"text-muted-foreground text-xs font-medium\">Total Consideration</p>\n                  <p class=\"text-foreground mt-0.5 font-mono text-base font-bold tabular-nums sm:text-lg\">$24,000.00</p>\n                  <p class=\"text-muted-foreground text-xs\">100% Milestone-based</p>\n                </div>\n                <div class=\"border-border/60 bg-card rounded-md border p-2.5\">\n                  <p class=\"text-muted-foreground text-xs font-medium\">Payment Terms</p>\n                  <p class=\"text-foreground mt-0.5 text-xs font-bold sm:text-sm\">Net 15 Days</p>\n                  <p class=\"text-muted-foreground text-xs\">Upon acceptance</p>\n                </div>\n                <div class=\"border-border/60 bg-card rounded-md border p-2.5\">\n                  <p class=\"text-muted-foreground text-xs font-medium\">IP Ownership</p>\n                  <p class=\"text-foreground mt-0.5 text-xs font-bold sm:text-sm\">Work-for-Hire</p>\n                  <p class=\"text-muted-foreground text-xs\">17 U.S.C. &sect; 101</p>\n                </div>\n                <div class=\"border-border/60 bg-card rounded-md border p-2.5\">\n                  <p class=\"text-muted-foreground text-xs font-medium\">Kill Fee Baseline</p>\n                  <p\n                    class=\"text-foreground text-warning text-warning mt-0.5 font-mono text-base font-bold tabular-nums sm:text-lg\"\n                  >\n                    25.0%\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">On uncompleted</p>\n                </div>\n              </div>\n            </div>\n\n            <!-- Legal Sections Stream -->\n            <div class=\"text-foreground/90 space-y-8 text-xs leading-relaxed sm:text-sm\">\n              <!-- Section 1: Services & Deliverables Table -->\n              <section id=\"vue-section-1\" class=\"space-y-4\">\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\">\n                    Services, Milestone Deliverables &amp; Acceptance\n                  </h3>\n                </div>\n                <p class=\"text-muted-foreground\">\n                  Contractor agrees to perform the services and provide the specific deliverables set forth in the\n                  milestone schedule below. Each deliverable shall undergo formal review by Client within seven (7)\n                  business days of submission.\n                </p>\n\n                <!-- Itemized Deliverables Table -->\n                <div class=\"border-border overflow-hidden rounded-lg border\">\n                  <div class=\"overflow-x-auto\">\n                    <Table>\n                      <TableHeader class=\"bg-muted/50\">\n                        <TableRow>\n                          <TableHead class=\"text-xs font-bold\">Milestone &amp; Scope</TableHead>\n                          <TableHead class=\"text-xs font-bold\">Target Date</TableHead>\n                          <TableHead class=\"text-right text-xs font-bold\">Consideration</TableHead>\n                          <TableHead class=\"text-right text-xs font-bold\">Status</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell class=\"font-medium\">\n                            <div class=\"space-y-0.5\">\n                              <p class=\"text-foreground font-semibold\">\n                                Milestone 1: Architectural Discovery &amp; Token Spec\n                              </p>\n                              <p class=\"text-muted-foreground text-xs\">\n                                OKLCH token set, Tailwind v4 theme bindings, typography scale, and core utilities.\n                              </p>\n                            </div>\n                          </TableCell>\n                          <TableCell class=\"text-muted-foreground font-mono text-xs tabular-nums\"\n                            >Sep 15, 2026</TableCell\n                          >\n                          <TableCell class=\"text-foreground text-right font-mono font-bold tabular-nums\">\n                            $6,000.00\n                            <span class=\"text-muted-foreground block text-xs font-normal\">25% (Deposit)</span>\n                          </TableCell>\n                          <TableCell class=\"text-right\">\n                            <Badge wrap class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                              <Check class=\"mr-1 size-3\" /> Paid &amp; Settled\n                            </Badge>\n                          </TableCell>\n                        </TableRow>\n\n                        <TableRow>\n                          <TableCell class=\"font-medium\">\n                            <div class=\"space-y-0.5\">\n                              <p class=\"text-foreground font-semibold\">\n                                Milestone 2: Core 50 UI Primitives in Vue &amp; React\n                              </p>\n                              <p class=\"text-muted-foreground text-xs\">\n                                50 accessible headless primitives (Reka UI &amp; Radix mirror), CVA variants, and unit\n                                test suites.\n                              </p>\n                            </div>\n                          </TableCell>\n                          <TableCell class=\"text-muted-foreground font-mono text-xs tabular-nums\"\n                            >Oct 15, 2026</TableCell\n                          >\n                          <TableCell class=\"text-foreground text-right font-mono font-bold tabular-nums\">\n                            $10,000.00\n                            <span class=\"text-muted-foreground block text-xs font-normal\">41.67%</span>\n                          </TableCell>\n                          <TableCell class=\"text-right\">\n                            <Badge\n                              wrap\n                              variant=\"outline\"\n                              class=\"border-info/30 bg-info/10 text-info text-xs font-medium\"\n                            >\n                              <Clock class=\"mr-1 size-3\" /> Pending Review\n                            </Badge>\n                          </TableCell>\n                        </TableRow>\n\n                        <TableRow>\n                          <TableCell class=\"font-medium\">\n                            <div class=\"space-y-0.5\">\n                              <p class=\"text-foreground font-semibold\">\n                                Milestone 3: 50 Composed Application Blocks &amp; Docs\n                              </p>\n                              <p class=\"text-muted-foreground text-xs\">\n                                50 production application domain blocks, Astro documentation pages, story demos, and\n                                manifests.\n                              </p>\n                            </div>\n                          </TableCell>\n                          <TableCell class=\"text-muted-foreground font-mono text-xs tabular-nums\"\n                            >Nov 15, 2026</TableCell\n                          >\n                          <TableCell class=\"text-foreground text-right font-mono font-bold tabular-nums\">\n                            $8,000.00\n                            <span class=\"text-muted-foreground block text-xs font-normal\">33.33%</span>\n                          </TableCell>\n                          <TableCell class=\"text-right\">\n                            <Badge wrap variant=\"secondary\" class=\"text-muted-foreground text-xs font-medium\">\n                              Scheduled\n                            </Badge>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </div>\n                </div>\n              </section>\n\n              <Separator />\n\n              <!-- Section 2: Intellectual Property Assignment & Work-for-Hire -->\n              <section id=\"vue-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\">\n                    Intellectual Property Assignment &amp; Work-for-Hire Doctrine\n                  </h3>\n                </div>\n                <div class=\"text-muted-foreground space-y-2.5\">\n                  <p>\n                    <strong class=\"text-foreground\">2.1 Work-for-Hire Declaration:</strong> Contractor expressly\n                    acknowledges and agrees that all original works of authorship, user interface components, software\n                    architecture, codebases, design tokens, documentation, graphic assets, and associated inventions\n                    prepared, authored, or contributed by Contractor under this Agreement shall constitute a\n                    <strong class=\"text-foreground\">&ldquo;Work Made for Hire&rdquo;</strong> as defined under the\n                    United States Copyright Act (17 U.S.C. &sect; 101) for the benefit of Client.\n                  </p>\n                  <p>\n                    <strong class=\"text-foreground\">2.2 Absolute Assignment:</strong> To the extent that any Deliverable\n                    does not legally qualify as a work made for hire, Contractor hereby irrevocably, unconditionally,\n                    and perpetually transfers, assigns, and conveys to Client all worldwide right, title, and interest\n                    in and to all Intellectual Property Rights, including patents, copyrights, trade secrets,\n                    trademarks, and moral rights, effective immediately upon receipt of full payment for the applicable\n                    milestone.\n                  </p>\n                  <p>\n                    <strong class=\"text-foreground\">2.3 Pre-Existing IP &amp; Open-Source Carveout:</strong> Contractor\n                    retains sole ownership of pre-existing general toolchains and standard open-source libraries\n                    licensed under OSI-approved licenses (MIT/Apache-2.0) incorporated into the Deliverables, granting\n                    Client an irrevocable, perpetual, royalty-free, worldwide license to utilize, sub-license, and\n                    distribute such pre-existing materials.\n                  </p>\n                </div>\n\n                <!-- Initial Checkpoint Marker 1 -->\n                <div\n                  id=\"vue-initial-marker-ip\"\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                          Contractor Initial Checkpoint &bull; Section 2\n                        </span>\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                        Contractor hereby irrevocably assigns all right, title, and interest in deliverables upon\n                        receipt of full payment under 17 U.S.C. &sect; 101.\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 shadow-xs',\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: Compensation & Invoicing -->\n              <section id=\"vue-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                    Compensation, Invoicing &amp; Net 15 Terms\n                  </h3>\n                </div>\n                <div class=\"text-muted-foreground space-y-2.5\">\n                  <p>\n                    <strong class=\"text-foreground\">3.1 Aggregate Consideration:</strong> In full consideration for the\n                    timely and satisfactory completion of the Deliverables, Client shall pay Contractor an aggregate\n                    fixed fee of\n                    <strong class=\"text-foreground font-mono tabular-nums\">$24,000.00 USD</strong> according to the\n                    milestone schedule in Section 1.\n                  </p>\n                  <p>\n                    <strong class=\"text-foreground\">3.2 Invoicing &amp; Net 15 Terms:</strong> Contractor shall submit\n                    an electronic invoice upon delivery of each milestone. Client shall remit payment within\n                    <strong class=\"text-foreground\">fifteen (15) calendar days (Net 15)</strong> from the date of formal\n                    written acceptance via ACH direct deposit or international wire. Overdue undisputed balances shall\n                    accrue statutory interest at 1.5% per month.\n                  </p>\n                  <p>\n                    <strong class=\"text-foreground\">3.3 Taxes &amp; Independent Status:</strong> Contractor operates\n                    strictly as an independent contractor. Contractor is solely responsible for reporting and remitting\n                    all applicable federal, state, local, and self-employment taxes (IRS Form 1099-NEC). No employment\n                    benefits, healthcare, retirement, or worker&rsquo;s compensation coverage are provided.\n                  </p>\n                </div>\n              </section>\n\n              <Separator />\n\n              <!-- Section 4: Termination & Kill Fee -->\n              <section id=\"vue-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\">Termination &amp; 25% Kill Fee Policy</h3>\n                </div>\n                <div class=\"text-muted-foreground space-y-2.5\">\n                  <p>\n                    <strong class=\"text-foreground\">4.1 Convenience Termination:</strong> Either party may terminate\n                    this Agreement without cause upon providing\n                    <strong class=\"text-foreground\">fourteen (14) calendar days</strong> prior written notice to the\n                    other party.\n                  </p>\n                  <p>\n                    <strong class=\"text-foreground\">4.2 Kill Fee Entitlement:</strong> In the event Client elects to\n                    terminate this Agreement for convenience prior to final completion, Client shall promptly pay\n                    Contractor for: (a) all completed and accepted milestones in full, and (b) a\n                    <strong class=\"text-foreground text-warning font-semibold\"\n                      >Kill Fee of twenty-five percent (25%)</strong\n                    >\n                    of the total remaining uncompleted milestone compensation to cover reserved contractor capacity and\n                    schedule reallocation.\n                  </p>\n                  <p>\n                    <strong class=\"text-foreground\">4.3 Immediate Handover:</strong> Upon termination, Contractor shall\n                    immediately deliver to Client all completed and partially completed work product, Git branches,\n                    design system source files, and credentials up to the termination effective date.\n                  </p>\n                </div>\n\n                <!-- Initial Checkpoint Marker 2 -->\n                <div\n                  id=\"vue-initial-marker-kill-fee\"\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                          Contractor Initial Checkpoint &bull; Section 4\n                        </span>\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 14-day termination notice requirement and 25% kill fee clause on uncompleted\n                        milestones.\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 shadow-xs',\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              <!-- Execution & Signatures Section -->\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 Countersigned</span>\n                </div>\n\n                <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  <!-- Client 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\">Client Execution</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 &amp; Verified\n                      </Badge>\n                    </div>\n                    <div class=\"border-border/60 bg-card my-3 rounded-md border p-3 text-center\">\n                      <p class=\"text-success text-success text-xl font-medium tracking-wide italic\">David Chen</p>\n                      <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">CTO &bull; UIPKGE Technologies Inc.</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 Executed:</span>\n                        <span class=\"text-foreground font-semibold tabular-nums\">Aug 20, 2026 &bull; 14:22 EDT</span>\n                      </p>\n                      <p class=\"flex justify-between\">\n                        <span>Digital Cert:</span>\n                        <span class=\"text-foreground font-semibold\">CERT-UIP-2026-991A</span>\n                      </p>\n                    </div>\n                  </div>\n\n                  <!-- Contractor 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\">Contractor Execution</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                          Principal &bull; Elena Rostova Design LLC\n                        </p>\n                      </template>\n                      <template v-else>\n                        <p class=\"text-muted-foreground text-xs italic\">\n                          Awaiting contractor electronic execution via sidebar\n                        </p>\n                        <p class=\"text-muted-foreground/80 mt-1 text-xs\">\n                          Complete both initials above to enable signing\n                        </p>\n                      </template>\n                    </div>\n\n                    <div class=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                      <p class=\"flex justify-between\">\n                        <span>Date Signed:</span>\n                        <span class=\"text-foreground font-semibold tabular-nums\">\n                          {{ isSigned ? 'Aug 21, 2026 • 11:15 EDT' : 'Pending' }}\n                        </span>\n                      </p>\n                      <p class=\"flex justify-between\">\n                        <span>Audit Hash:</span>\n                        <span class=\"text-foreground font-semibold\">\n                          {{ isSigned ? 'SHA256:4b9a2...e781' : 'Unexecuted' }}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </section>\n            </div>\n          </div>\n        </main>\n\n        <!-- Right Column: Milestone & Payment Schedule + Signature Action Center -->\n        <aside class=\"space-y-5 lg:sticky lg:top-6 lg:col-span-4 lg:self-start\">\n          <!-- Contractor Signer Profile 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.5\">\n                  <Avatar class=\"border-border size-9 border\">\n                    <AvatarFallback class=\"bg-primary/10 text-primary text-xs font-bold\">ER</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <CardTitle class=\"text-sm font-semibold\">{{ signerName }}</CardTitle>\n                    <CardDescription class=\"text-xs\">Principal Design Architect</CardDescription>\n                  </div>\n                </div>\n                <Badge wrap variant=\"outline\" class=\"border-primary/30 text-primary font-mono text-xs\"\n                  >Contractor</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\">Entity:</span>\n                <span class=\"text-foreground font-medium\">Elena Rostova Design LLC</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted-foreground\">Tax Status:</span>\n                <span class=\"text-foreground font-medium\">W-9 On File (EIN Verified)</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-muted-foreground\">Disbursement:</span>\n                <span class=\"text-foreground font-mono tabular-nums\">ACH Direct Deposit (&bull;&bull;8842)</span>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Milestone & Payout Schedule 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                <CardTitle class=\"text-sm font-semibold\">Payment Milestones</CardTitle>\n                <span class=\"text-foreground font-mono text-xs font-bold tabular-nums\">$24,000.00 USD</span>\n              </div>\n              <CardDescription class=\"text-xs\">Milestone-based disbursement on acceptance</CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-3 p-4 pt-2 text-xs\">\n              <!-- Milestone 1 -->\n              <div class=\"border-border/70 bg-muted/20 rounded-lg border p-3\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground font-semibold\">1. Discovery &amp; Token Spec</span>\n                  <Badge wrap class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                    Paid $6,000\n                  </Badge>\n                </div>\n                <div class=\"text-muted-foreground mt-1.5 flex items-center justify-between\">\n                  <span>Target: Sep 15, 2026</span>\n                  <span class=\"font-mono tabular-nums\">25% Allocation</span>\n                </div>\n              </div>\n\n              <!-- Milestone 2 -->\n              <div class=\"border-border/70 bg-muted/20 rounded-lg border p-3\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground font-semibold\">2. Core 50 UI Primitives</span>\n                  <Badge wrap variant=\"outline\" class=\"border-info/30 bg-info/10 text-info text-xs font-medium\">\n                    Review $10,000\n                  </Badge>\n                </div>\n                <div class=\"text-muted-foreground mt-1.5 flex items-center justify-between\">\n                  <span>Target: Oct 15, 2026</span>\n                  <span class=\"font-mono tabular-nums\">41.67% Allocation</span>\n                </div>\n              </div>\n\n              <!-- Milestone 3 -->\n              <div class=\"border-border/70 bg-muted/20 rounded-lg border p-3\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-foreground font-semibold\">3. 50 Composed Blocks</span>\n                  <Badge wrap variant=\"secondary\" class=\"text-muted-foreground text-xs font-medium\"> Due $8,000 </Badge>\n                </div>\n                <div class=\"text-muted-foreground mt-1.5 flex items-center justify-between\">\n                  <span>Target: Nov 15, 2026</span>\n                  <span class=\"font-mono tabular-nums\">33.33% Final</span>\n                </div>\n              </div>\n\n              <!-- Progress Bar -->\n              <div class=\"space-y-1.5 pt-1\">\n                <div class=\"flex justify-between text-xs\">\n                  <span class=\"text-muted-foreground\">Payment Progress</span>\n                  <span class=\"text-foreground font-mono font-medium tabular-nums\">$6,000 / $24,000 (25%)</span>\n                </div>\n                <div class=\"bg-muted flex h-2 w-full overflow-hidden rounded-full\">\n                  <div class=\"bg-success h-full w-[25%]\" title=\"Paid (25%)\" />\n                  <div class=\"bg-info/60 h-full w-[41.67%]\" title=\"In Review (41.67%)\" />\n                  <div class=\"bg-muted-foreground/20 h-full w-[33.33%]\" title=\"Scheduled (33.33%)\" />\n                </div>\n              </div>\n\n              <!-- Kill Fee Calculation Callout -->\n              <div class=\"border-warning/30 bg-warning/10 rounded-lg border p-3 text-xs\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"text-warning flex items-center gap-1.5 font-semibold\">\n                    <ShieldAlert class=\"text-warning size-3.5 shrink-0\" />\n                    <span>25% Kill Fee Protection</span>\n                  </div>\n                  <span class=\"text-warning text-warning font-mono font-bold tabular-nums\">$4,500.00</span>\n                </div>\n                <p class=\"text-muted-foreground mt-1 text-xs\">\n                  Calculated as 25% of uncompleted milestones ($18,000.00) payable upon client convenience termination.\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Signature Action Checklist 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                <CardTitle class=\"text-sm font-semibold\">Execution 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\">Complete all mandatory checkpoints to finalize contract</CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-2.5 p-4 pt-2\">\n              <!-- Item 1: Initial Section 2 IP -->\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 (IP Assignment)</p>\n                    <p class=\"text-muted-foreground text-xs\">17 U.S.C. &sect; 101 Work-for-Hire clause</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' : 'Review' }}\n                </Badge>\n              </button>\n\n              <!-- Item 2: Initial Section 4 Kill Fee -->\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 (25% Kill Fee)</p>\n                    <p class=\"text-muted-foreground text-xs\">Termination protocol &amp; compensation</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' : 'Review' }}\n                </Badge>\n              </button>\n\n              <!-- Item 3: Full MSA Signature -->\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\">Execute Agreement</p>\n                    <p class=\"text-muted-foreground text-xs\">Contractor e-signature</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          <!-- Interactive Signature Pad Card -->\n          <Card id=\"vue-signature-pad\" class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2\">\n              <CardTitle class=\"text-sm font-semibold\">Contractor Signature Pad</CardTitle>\n              <CardDescription class=\"text-xs\">Adopt signature style &amp; execute contract</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 &amp; U.S. ESIGN Compliant</span>\n                </div>\n              </div>\n\n              <!-- Consent Checkbox -->\n              <label class=\"text-muted-foreground flex cursor-pointer items-start gap-2.5 text-xs\">\n                <input\n                  v-model=\"eConsentAgreed\"\n                  type=\"checkbox\"\n                  :disabled=\"isSigned\"\n                  class=\"text-primary focus:ring-ring border-border mt-0.5 size-4 rounded\"\n                />\n                <span>\n                  I agree to transact electronically and execute this Master Services Agreement (#MSA-2026-4892) as a\n                  legally binding instrument.\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=\"signContract\"\n                >\n                  <PenTool class=\"size-4\" />\n                  <span>Sign &amp; Execute Agreement</span>\n                </Button>\n\n                <div v-else class=\"border-success/30 bg-success/10 space-y-2 rounded-lg border p-3.5 text-center\">\n                  <div class=\"text-success flex items-center justify-center gap-1.5 text-xs font-semibold\">\n                    <CheckCircle2 class=\"size-4\" />\n                    <span>Contract Executed Successfully!</span>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Countersigned MSA certificate dispatched to David Chen (CTO) and Elena Rostova.\n                  </p>\n                  <Button\n                    aria-label=\"Download attachment\"\n                    size=\"sm\"\n                    class=\"mt-2 w-full gap-1.5 text-xs shadow-xs\"\n                    @click=\"handleDownload\"\n                  >\n                    <Download class=\"size-3.5\" />\n                    <span>Download Executed Contract</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 both section initial checkpoints above.'\n                      : 'Please check the electronic records consent box.'\n                  }}\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Audit Ledger 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>Tamper-Proof Audit Trail Ledger</span>\n            </div>\n            <p class=\"leading-relaxed\">\n              Every initial checkpoint and signature event is stamped with SHA-256 integrity hash, RFC 3161 timestamp,\n              and recorded in the permanent contract execution audit trail.\n            </p>\n          </div>\n        </aside>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FreelanceWorkForHireContract.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Independent contractor Master Services Agreement (MSA) with work-for-hire IP assignment, payment milestones, kill fee clauses, and electronic signature workflow.",
  "categories": [
    "legal",
    "finance",
    "app",
    "contracts"
  ]
}