{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "contract-redline-diff", "title": "Contract Redline Diff", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/contract-redline-diff/contract-redline-diff.component.ts", "content": "// Ironclad and DocuSign CLM style legal contract redline diff viewer with clause additions,\n// deletions, liability super-cap shift analysis, and attorney comments negotiations sidebar.\n// Port of the Vue/React block 1:1 — same four counsel comments, same pending/resolved\n// filter pills, same accept-tweak / accept-all / reject-all actions, same inline reply draft.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n Clock,\n FileMinus2,\n FilePlus2,\n FileText,\n History,\n LucideAngularModule,\n MessageSquare,\n MessageSquareReply,\n Scale,\n Send,\n X,\n XCircle,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface CommentItem {\n id: string\n clauseId: string\n clauseTitle: string\n authorName: string\n authorRole: string\n authorInitials: string\n timestamp: string\n commentText: string\n proposedChange: string\n status: 'pending' | 'resolved'\n severity?: 'critical' | 'moderate' | 'standard'\n}\n\nexport interface RedlineStats {\n additions: string\n additionsSub: string\n deletions: string\n deletionsSub: string\n openComments: number\n resolvedComments: number\n liabilityCap: string\n liabilityCapSub: string\n}\n\nconst defaultComments: CommentItem[] = [\n {\n id: 'c-1',\n clauseId: 'clause-4-2',\n clauseTitle: 'Section 4.2 · Service Level Agreement Credits',\n authorName: 'Sarah Lin',\n authorRole: 'Senior Counsel, Davis Polk & Wardwell LLP',\n authorInitials: 'SL',\n timestamp: '2 hours ago',\n commentText:\n 'Acme enterprise infrastructure requires a 25% credit for downtime exceeding 4 hours given Tier-1 mission-critical workload dependency. We also propose extending the scheduled maintenance notice window to 7 business days.',\n proposedChange: '25% monthly fee credit (was 10%) · 7 business days notice (was 48 hours)',\n status: 'pending',\n severity: 'critical',\n },\n {\n id: 'c-2',\n clauseId: 'clause-8-1',\n clauseTitle: 'Section 8.1 · Limitation of Liability & Super-Cap',\n authorName: 'Marcus Vance',\n authorRole: 'VP Legal & AGC, Acme Enterprise Corp',\n authorInitials: 'MV',\n timestamp: '4 hours ago',\n commentText:\n 'We cannot agree to a standard 12-month trailing fee liability cap due to GDPR Article 82 joint-controller exposure and confidential IP storage. A $2.5M aggregate super-cap is our committee floor for cloud vendor onboarding.',\n proposedChange: 'Super-cap of $2,500,000 or 2.5x total contract value for data protection breaches',\n status: 'pending',\n severity: 'critical',\n },\n {\n id: 'c-3',\n clauseId: 'clause-12-3',\n clauseTitle: 'Section 12.3 · Governing Law & Commercial Arbitration',\n authorName: 'Elena Rostova',\n authorRole: 'Partner, Technology Transactions Counsel',\n authorInitials: 'ER',\n timestamp: 'Yesterday at 17:45',\n commentText:\n 'Replaced Delaware Chancery court litigation with AAA expedited commercial arbitration seated in New York to contain cross-border litigation exposure, expedite timeline, and guarantee reciprocal fee shifting.',\n proposedChange: 'AAA Commercial Arbitration (New York, NY) + Prevailing party attorney fee shifting',\n status: 'pending',\n severity: 'moderate',\n },\n {\n id: 'c-4',\n clauseId: 'clause-2-4',\n clauseTitle: 'Section 2.4 · Customer Data & AI Model Training',\n authorName: 'David Kim',\n authorRole: 'Lead In-House Commercial Counsel',\n authorInitials: 'DK',\n timestamp: 'Resolved 5 hours ago',\n commentText:\n 'Provider confirmed in writing that customer telemetry is strictly quarantined and excluded from foundation LLM model training. Mutually agreed language inserted.',\n proposedChange: 'Explicit carve-out prohibiting Customer Data ingestion into generative AI training sets',\n status: 'resolved',\n severity: 'standard',\n },\n]\n\nexport type RedlineFilter = 'all' | 'pending' | 'resolved'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-contract-redline-diff, [ui-contract-redline-diff]',\n standalone: true,\n // The block renders its own root
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n CLM Contract Workspace • MSA-2026-0882\n \n @if (pendingCount() > 0) {\n \n \n {{ pendingCount() }} Pending Redlines • {{ resolvedCount() }} Resolved\n \n } @else {\n \n \n All Changes Accepted • Ready for Execution\n \n }\n
\n\n

\n {{ contractTitle }}\n

\n\n
\n
\n Counterparty:\n {{ counterparty }}\n
\n \n
\n Outside Counsel:\n {{ counselFirm }}\n
\n \n
\n \n {{ versionComparison }}\n
\n
\n
\n\n \n
\n \n \n Reject Changes\n \n\n \n \n Accept All Changes\n \n
\n
\n\n \n @if (actionBannerMessage(); as banner) {\n \n
\n \n {{ banner }}\n
\n \n \n \n
\n }\n \n\n \n
\n \n
\n
\n
\n

\n Additions / Insertions\n

\n
\n \n
\n
\n
\n
\n

+14 Clauses / Sentences

\n

\n +620 words • Enhanced SLA credits, audit rights & ML carve-outs\n

\n
\n
\n\n \n
\n
\n
\n

\n Deletions / Removals\n

\n
\n \n
\n
\n
\n
\n

-8 Clauses Struck Through

\n

\n -310 words • Excised unilateral termination & uncapped liability\n

\n
\n
\n\n \n
\n
\n
\n

\n Review Comments\n

\n
\n \n
\n
\n
\n
\n

\n {{ pendingCount() }} Open Counsel Comments\n

\n

\n {{ resolvedCount() }} resolved • 2 require General Counsel sign-off\n

\n
\n
\n\n \n
\n
\n
\n

\n Liability Cap Shift\n

\n
\n \n
\n
\n
\n
\n

$1.0M → $2.5M Super-Cap

\n

\n Shifted from 1x annual fees to 2.5x aggregate contract liability\n

\n
\n
\n
\n\n \n
\n \n
\n
\n \n \n
\n \n \n Master Services Agreement (MSA) • Draft v3.2\n \n
\n\n \n
\n
\n \n Insertion (Acme Counsel)\n
\n
\n \n Deletion (Struck Out)\n
\n
\n
\n\n \n
\n \n
\n
\n
\n

\n Section 2 • Intellectual Property & Customer Data\n

\n \n [RESOLVED] • § 2.4 ML Carve-out\n \n
\n \n \n View Resolution\n \n
\n\n \n

\n 2.4 Proprietary Rights & Restrictions.\n Customer retains all right, title, and interest in and to Customer Data, including all Intellectual\n Property Rights therein. Provider shall not acquire any ownership interest in or rights to Customer\n Data, except for the limited license granted herein to perform the Services.\n \n Under no circumstances shall Provider utilize, parse, vectorize, or ingest Customer Data,\n confidential telemetry, or user communications to train, fine-tune, or benchmark any public or\n proprietary artificial intelligence, large language, or algorithmic model without express prior\n written addendum.\n \n

\n
\n \n\n \n
\n
\n
\n

\n Section 4 • Service Level Agreements & Availability Commitments\n

\n \n [DIFF-4.2] • 2 Pending Redlines\n \n
\n \n \n Comment #1 • Sarah Lin\n \n
\n\n
\n

\n 4.1 Monthly Uptime Commitment.\n Provider warrants that the Production Cloud Service will achieve a Monthly Uptime Percentage of no\n less than\n \n ninety-nine and one-half percent (99.5%)\n \n \n ninety-nine and ninety-five hundredths percent (99.95%)\n \n during each calendar billing month of the applicable Order Term (“Service Level\n Standard”).\n

\n\n

\n 4.2 SLA Failure Remedies & Maintenance Notice.\n If Provider fails to meet the Service Level Standard for any calendar month, Customer shall be\n entitled to an immediate credit against future invoices equal to\n \n ten percent (10%)\n \n \n twenty-five percent (25%)\n \n of the prorated monthly fees for such month. Scheduled Maintenance windows shall occur solely\n between 01:00 and 04:00 UTC on Sunday mornings and require no less than\n \n forty-eight (48) hours\n \n \n seven (7) business days\n \n advance electronic notice to Customer’s Lead SRE contact.\n

\n
\n
\n\n \n
\n
\n
\n

\n Section 8 • Limitation of Liability & Super-Cap Allocation\n

\n \n [DIFF-8.1] • HIGH IMPACT SHIFT\n \n
\n \n \n Comment #2 • Marcus Vance\n \n
\n\n
\n

\n 8.1 AGGREGATE LIABILITY CAP.\n EXCEPT FOR LIABILITIES ARISING FROM A BREACH OF CONFIDENTIALITY UNDER SECTION 6, FRAUD, OR\n INDEMNIFICATION OBLIGATIONS UNDER SECTION 10, NEITHER PARTY’S MAXIMUM AGGREGATE LIABILITY\n UNDER THIS AGREEMENT SHALL EXCEED\n \n THE TOTAL FEES ACTUALLY PAID BY CUSTOMER TO PROVIDER IN THE TWELVE (12) MONTHS PRECEDING THE EVENT\n GIVING RISE TO LIABILITY.\n \n \n THE GREATER OF TWO MILLION FIVE HUNDRED THOUSAND UNITED STATES DOLLARS ($2,500,000 USD) OR TWO AND\n ONE-HALF TIMES (2.5X) THE AGGREGATE FEES PAYABLE OVER THE ENTIRE ORDER FORM DURATION\n (“SUPER-CAP”).\n \n

\n\n

\n 8.2 Direct Damages Carve-Out.\n Notwithstanding anything to the contrary, the mutual waiver of consequential damages in Section 8.3\n shall not preclude or limit recovery of\n \n reasonable third-party forensic incident investigation expenses, statutory breach notification\n mailings, and credit monitoring services required under GDPR, HIPAA, or State Data Privacy laws.\n \n

\n
\n
\n\n \n
\n
\n
\n

\n Section 12 • Governing Law, Venue & Arbitration\n

\n \n [DIFF-12.3] • Modified Venue\n \n
\n \n \n Comment #3 • Elena Rostova\n \n
\n\n
\n

\n 12.1 Applicable Law.\n This Agreement shall be governed by, construed, and enforced in accordance with the substantive laws\n of the State of Delaware, without reference to its conflict-of-law principles.\n

\n\n

\n 12.3 Binding Commercial Arbitration & Fee Recovery.\n Any controversy, dispute, or claim arising out of or relating to this Agreement, or the breach\n thereof, shall be resolved by\n \n the state or federal courts situated in Wilmington, Delaware.\n \n \n binding arbitration administered by the American Arbitration Association (AAA) in accordance with\n its Commercial Arbitration Rules, before a single neutral arbitrator seated in the City and State\n of New York.\n \n \n The prevailing party in any proceeding to enforce or interpret this Agreement shall be entitled to\n recover from the non-prevailing party all reasonable attorneys’ fees, arbitrator\n compensation, and expert witness disbursements incurred in connection therewith.\n \n

\n
\n
\n
\n
\n \n\n \n \n \n \n `,\n})\nexport class UiContractRedlineDiffComponent {\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly FileMinus2 = FileMinus2\n protected readonly FilePlus2 = FilePlus2\n protected readonly FileText = FileText\n protected readonly History = History\n protected readonly MessageSquare = MessageSquare\n protected readonly MessageSquareReply = MessageSquareReply\n protected readonly Scale = Scale\n protected readonly Send = Send\n protected readonly X = X\n protected readonly XCircle = XCircle\n\n @Input() contractTitle = 'Master Services Agreement · Redline Review v3.2 vs v3.1'\n @Input() counterparty = 'Acme Enterprise Corp'\n @Input() counselFirm = 'Davis Polk & Wardwell LLP'\n @Input() versionComparison = 'v3.2 (Counterparty Redlines) vs v3.1 (Baseline Executed)'\n @Input() initialStats?: RedlineStats\n @Input() set initialComments(v: CommentItem[] | undefined) {\n if (v) this.comments.set(v.map((c) => ({ ...c })))\n }\n @Input('class') className?: string\n\n readonly comments = signal(defaultComments.map((c) => ({ ...c })))\n readonly activeCommentId = signal('c-1')\n readonly selectedFilter = signal('all')\n readonly replyingCommentId = signal(null)\n readonly replyDraftText = signal('')\n readonly actionBannerMessage = signal(null)\n\n readonly pendingCount = computed(() => this.comments().filter((c) => c.status === 'pending').length)\n readonly resolvedCount = computed(() => this.comments().filter((c) => c.status === 'resolved').length)\n\n readonly filteredComments = computed(() => {\n const filter = this.selectedFilter()\n if (filter === 'pending') return this.comments().filter((c) => c.status === 'pending')\n if (filter === 'resolved') return this.comments().filter((c) => c.status === 'resolved')\n return this.comments()\n })\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-6', this.className)\n }\n\n clauseButtonClass(id: string): string {\n return cn(\n 'h-7 gap-1.5 px-2.5 text-xs',\n this.activeCommentId() === id\n ? 'border-primary bg-primary/10 text-primary font-semibold'\n : 'text-muted-foreground',\n )\n }\n\n clauseBoxClass(id: string): string {\n return cn(\n 'border-border bg-card space-y-4 rounded-lg border p-4 text-xs leading-relaxed transition-colors sm:p-5 sm:text-sm',\n this.activeCommentId() === id && 'ring-primary/40 ring-2',\n )\n }\n\n filterPillClass(filter: RedlineFilter): string {\n return cn(\n 'focus-visible:ring-ring flex-1 rounded-md px-2 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedFilter() === filter\n ? 'bg-background text-foreground font-semibold shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n commentCardClass(comment: CommentItem): string {\n return cn(\n 'border-border hover:border-primary/40 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.activeCommentId() === comment.id ? 'border-primary/60 bg-muted/20 ring-primary/30 ring-1' : 'bg-card',\n comment.status === 'resolved' && 'opacity-75',\n )\n }\n\n commentStatusClass(comment: CommentItem): string {\n return cn(\n 'shrink-0 font-mono text-xs',\n comment.status === 'resolved'\n ? 'border-success/30 bg-success/10 text-success'\n : 'border-warning/30 bg-warning/10 text-warning',\n )\n }\n\n acceptButtonClass(comment: CommentItem): string {\n return cn('h-7 gap-1 text-xs', comment.status === 'resolved' ? 'text-muted-foreground' : 'font-medium')\n }\n\n selectComment(id: string, clauseId?: string): void {\n this.activeCommentId.set(id)\n if (clauseId && typeof document !== 'undefined') {\n const el = document.getElementById(clauseId)\n // jsdom and hidden containers have no scrollIntoView: selecting must still work.\n if (el && typeof el.scrollIntoView === 'function') {\n el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n }\n }\n }\n\n toggleAcceptTweak(id: string): void {\n const comment = this.comments().find((c) => c.id === id)\n if (!comment) return\n const nextStatus = comment.status === 'pending' ? 'resolved' : 'pending'\n this.comments.update((prev) => prev.map((c) => (c.id === id ? { ...c, status: nextStatus } : c)))\n this.actionBannerMessage.set(\n nextStatus === 'resolved'\n ? `Accepted proposed language for \"${comment.clauseTitle}\"`\n : `Reopened review for \"${comment.clauseTitle}\"`,\n )\n }\n\n handleAcceptAll(): void {\n this.comments.update((prev) => prev.map((c) => ({ ...c, status: 'resolved' as const })))\n this.actionBannerMessage.set('All 3 pending redlines and attorney comments have been accepted into draft v3.3')\n }\n\n handleRejectAll(): void {\n this.comments.update((prev) => prev.map((c) => ({ ...c, status: 'pending' as const })))\n this.actionBannerMessage.set('Redline proposals flagged for revision. Counterparty notified of rejection.')\n }\n\n toggleReply(id: string): void {\n if (this.replyingCommentId() === id) {\n this.replyingCommentId.set(null)\n this.replyDraftText.set('')\n } else {\n this.replyingCommentId.set(id)\n this.replyDraftText.set('')\n }\n }\n\n submitReply(id: string): void {\n if (!this.replyDraftText().trim()) return\n const target = this.comments().find((c) => c.id === id)\n this.actionBannerMessage.set(`Reply posted to counsel thread on ${target?.clauseTitle}`)\n this.replyingCommentId.set(null)\n this.replyDraftText.set('')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/contract-redline-diff/contract-redline-diff.component.ts" }, { "path": "packages/registry-angular/blocks/contract-redline-diff/index.ts", "content": "export {\n UiContractRedlineDiffComponent,\n type CommentItem,\n type RedlineFilter,\n type RedlineStats,\n} from './contract-redline-diff.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/contract-redline-diff/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Ironclad and DocuSign CLM style legal contract redline diff viewer with clause additions, deletions, liability super-cap shift analysis, and attorney comments negotiations sidebar.", "categories": [ "legal", "app", "management" ] }