{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cap-table-ownership-summary", "title": "Cap Table Ownership Summary", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/cap-table-ownership-summary/cap-table-ownership-summary.component.ts", "content": "// Carta-style company equity capitalization table, share class breakdown, fully diluted\n// ownership percentages, shareholder vesting progress, and an interactive round dilution\n// modeling simulator. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Award,\n Building2,\n Calculator,\n Check,\n Coins,\n FileSpreadsheet,\n Info,\n Layers,\n LucideAngularModule,\n Plus,\n RefreshCw,\n Search,\n ShieldCheck,\n TrendingUp,\n Users,\n X,\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 UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type CapTableShareClass = 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'\nexport type CapTableClassFilter = 'All' | CapTableShareClass\nexport type GrantEquityClass = 'ISO Options' | 'NSO Options' | 'Restricted Stock'\n\nexport interface Shareholder {\n id: string\n name: string\n role: string\n avatar: string\n shareClass: CapTableShareClass\n shares: number\n ownershipPct: number\n equityValue: number\n vestingDetail: string\n vestedMonths: number\n totalMonths: number\n isVestedComplete: boolean\n grantDate: string\n liquidationPref?: string\n}\n\nconst INITIAL_SHAREHOLDERS: Shareholder[] = [\n {\n id: 'sh-1',\n name: 'Elena Rostova',\n role: 'Co-Founder & CEO',\n avatar: 'ER',\n shareClass: 'Common Stock',\n shares: 3500000,\n ownershipPct: 35.0,\n equityValue: 15750000,\n vestingDetail: '48-Month Vesting · 24/48 Months Vested',\n vestedMonths: 24,\n totalMonths: 48,\n isVestedComplete: false,\n grantDate: 'Feb 15, 2024 · 1-yr Cliff (Satisfied)',\n },\n {\n id: 'sh-2',\n name: 'Marcus Vance',\n role: 'Co-Founder & CTO',\n avatar: 'MV',\n shareClass: 'Common Stock',\n shares: 2500000,\n ownershipPct: 25.0,\n equityValue: 11250000,\n vestingDetail: '48-Month Vesting · 24/48 Months Vested',\n vestedMonths: 24,\n totalMonths: 48,\n isVestedComplete: false,\n grantDate: 'Feb 15, 2024 · 1-yr Cliff (Satisfied)',\n },\n {\n id: 'sh-3',\n name: 'Founders Fund / Seed Syndicate',\n role: 'Lead Seed Investor',\n avatar: 'FF',\n shareClass: 'Series Seed Preferred',\n shares: 1500000,\n ownershipPct: 15.0,\n equityValue: 6750000,\n vestingDetail: 'Fully Vested (100%) · 1.0x Non-Participating',\n vestedMonths: 48,\n totalMonths: 48,\n isVestedComplete: true,\n grantDate: 'Aug 10, 2024 · Board Seat (1)',\n liquidationPref: '1.0x Pref ($6.75M)',\n },\n {\n id: 'sh-4',\n name: 'Sequoia Scout Seed SPV',\n role: 'Seed Co-Investor',\n avatar: 'SQ',\n shareClass: 'Series Seed Preferred',\n shares: 1000000,\n ownershipPct: 10.0,\n equityValue: 4500000,\n vestingDetail: 'Fully Vested (100%) · 1.0x Non-Participating',\n vestedMonths: 48,\n totalMonths: 48,\n isVestedComplete: true,\n grantDate: 'Aug 10, 2024 · Pro-Rata Rights',\n liquidationPref: '1.0x Pref ($4.50M)',\n },\n {\n id: 'sh-5',\n name: 'Unallocated Employee Option Pool',\n role: '2024 Equity Incentive Plan (EIP)',\n avatar: 'EP',\n shareClass: 'ISO Option Pool',\n shares: 1500000,\n ownershipPct: 15.0,\n equityValue: 6750000,\n vestingDetail: 'Authorized Pool · Available for Future Key Hires',\n vestedMonths: 0,\n totalMonths: 48,\n isVestedComplete: false,\n grantDate: 'Board Authorized · Dec 01, 2024',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cap-table-ownership-summary, [ui-cap-table-ownership-summary]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n \n
\n
\n

\n Capitalization Table & Equity Ownership\n

\n
\n \n \n Audited · Series Seed\n \n
\n\n
\n \n UIPKGE Technologies Inc. · Delaware C-Corp\n \n EIN: 93-8472910\n \n \n 409A FMV: ${{ currentSharePrice.toFixed(2) }}/share\n \n
\n
\n\n \n
\n \n @if (isExporting()) {\n \n } @else if (exportSuccess()) {\n \n } @else {\n \n }\n {{ exportButtonLabel() }}\n \n\n \n
\n \n\n \n @if (isGrantDialogOpen()) {\n \n
\n
\n
\n

\n \n Issue New Equity Option Grant\n

\n \n \n \n
\n

\n Authorize and draft an option grant under the 2024 Equity Incentive Plan (EIP).\n

\n
\n\n
\n @if (grantSuccessMessage()) {\n
\n \n

Option Grant Issued & Drafted!

\n

\n Sent to Board of Directors for electronic consent signature.\n

\n
\n } @else {\n
\n
\n \n \n
\n\n
\n
\n \n \n
\n\n
\n \n \n
\n
\n\n
\n
\n \n \n {{ grantClass() }}\n EIP-2024\n
\n
\n\n
\n \n \n ${{ currentSharePrice.toFixed(2) }} / share\n Fair Market\n
\n
\n
\n\n
\n \n \n

\n 25% vests at 12-month cliff; remaining 75% vests monthly in 36 equal installments.\n

\n
\n\n
\n \n \n
\n \n }\n
\n \n \n }\n\n \n
\n \n
\n
\n

Total Fully Diluted Shares

\n
\n \n
\n
\n
\n
10,000,000
\n
\n Authorized: 15,000,000\n 66.7% Issued\n
\n
\n
\n\n \n
\n
\n

Founder Common Stock

\n
\n \n
\n
\n
\n
\n 6,000,000\n 60.0%\n
\n
\n 2 Co-Founders\n $27,000,000.00\n
\n
\n
\n\n \n
\n
\n

Series Seed Preferred

\n
\n \n
\n
\n
\n
\n 2,500,000\n 25.0%\n
\n
\n 2 Seed Investors · 1.0x Pref\n $11,250,000.00\n
\n
\n
\n\n \n
\n
\n

Unallocated Option Pool

\n
\n \n
\n
\n
\n
\n 1,500,000\n 15.0%\n
\n
\n 2024 EIP Pool\n $6,750,000.00\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

\n Current Post-Money Valuation\n

\n
\n \n $45,000,000.00\n \n \n \n Seed Round Closed\n ($4.50/share)\n
\n
\n
\n\n
\n
\n \n Cap Table Reconciled\n
\n 10,000,000 Total Units\n
\n
\n
\n\n
\n \n
\n
\n Fully Diluted Equity Distribution\n 100.0% Allocation\n
\n\n
\n \n
\n \n
\n \n
\n \n\n \n
\n \n
\n \n
\n
Founders (Common)
\n
6,000,000 shares
\n
\n
\n
\n
60.0%
\n
$27,000,000.00
\n
\n
\n\n \n
\n \n
\n
Seed Investors (Preferred)
\n
2,500,000 shares
\n
\n
\n
\n
25.0%
\n
$11,250,000.00
\n
\n \n\n \n
\n \n
\n
Employee Option Pool
\n
1,500,000 shares
\n
\n
\n
\n
15.0%
\n
$6,750,000.00
\n
\n \n \n \n \n \n\n \n
\n
\n
\n
\n

Shareholder & Equity Register

\n

\n Detailed registry of individual grants, share classes, fully diluted ownership, and vesting timelines.\n

\n
\n\n
\n \n
\n \n \n
\n\n \n
\n \n \n Common (2)\n \n \n Preferred (2)\n \n \n Pool (1)\n \n
\n
\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (sh of filteredShareholders(); track sh.id) {\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n }\n \n
Shareholder / EntityShare ClassShares OwnedFully Diluted %Total Equity ValueVesting & Status
\n
\n \n \n {{ sh.avatar }}\n \n \n
\n
{{ sh.name }}
\n
{{ sh.role }}
\n
{{ sh.grantDate }}
\n
\n
\n 		\n @if (sh.shareClass === 'Common Stock') {\n \n Common Stock\n \n } @else if (sh.shareClass === 'Series Seed Preferred') {\n \n Series Seed Preferred\n \n } @else {\n \n ISO Option Pool\n \n }\n \n
\n {{ formatNumber(sh.shares) }}\n
\n
Shares
\n 		\n
\n {{ formatPercent(sh.ownershipPct) }}\n
\n
of 10,000,000
\n 		\n
\n {{ formatCurrency(sh.equityValue) }}\n
\n
@ $4.50/share
\n 		\n
\n
\n {{ vestingLabel(sh) }}\n \n {{ sh.vestedMonths }}/{{ sh.totalMonths }} mo\n \n
\n\n
\n
\n
\n\n
{{ sh.vestingDetail }}
\n
\n
\n
\n\n \n \n
\n Showing {{ filteredShareholders().length }} of\n 5 cap table stakeholders\n
\n
\n
\n Total Shares: \n 10,000,000\n
\n
\n Total Ownership: \n 100.0%\n
\n
\n Total Valuation: \n $45,000,000.00\n
\n
\n
\n
\n \n\n \n
\n
\n
\n
\n
\n
\n \n
\n

\n Round Modeling Simulator (Series A Pro-Forma)\n

\n
\n

\n Simulate Series A pre-money valuation and capital raised to preview diluted ownership percentages, new\n share price, and stakeholder equity value accretion.\n

\n
\n\n \n
\n \n $5M @ $30M Pre\n \n \n $10M @ $50M Pre\n \n \n $15M @ $60M Pre\n \n
\n
\n
\n\n
\n \n
\n \n
\n
\n \n \n ${{ (simPreMoney() / 1000000).toFixed(1) }}M\n \n
\n
\n \n
\n

\n Implies a share price of\n \n ${{ simNewSharePrice().toFixed(2) }} / share\n (+{{ stepUpPct().toFixed(1) }}% step-up).\n

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

\n Issues\n \n {{ formatNumber(simNewSharesIssued()) }} new shares\n to Series A lead syndicate.\n

\n
\n
\n\n \n
\n
\n
Post-Money Valuation
\n
\n {{ formatCurrency(simPostMoney()) }}\n
\n
Pre-Money + Investment
\n
\n\n
\n
Series A Share Price
\n
\n ${{ simNewSharePrice().toFixed(2) }}\n
\n
\n vs ${{ currentSharePrice.toFixed(2) }} Seed (+{{ stepUpPct().toFixed(1) }}%)\n
\n
\n\n
\n
Total Diluted Shares
\n
\n {{ formatNumber(simTotalPostShares()) }}\n
\n
+{{ formatNumber(simNewSharesIssued()) }} New Shares
\n
\n\n
\n
Investor Dilution Rate
\n
\n {{ formatPercent(simNewInvestorPct()) }}\n
\n
Effective Round Dilution
\n
\n
\n\n \n
\n
\n Post-Series A Ownership Comparison\n Pro-Forma Stakeholder Impact\n
\n\n \n
\n \n
\n
\n
\n
\n \n \n\n \n
\n \n
\n
\n
\n \n Founders\n
\n \n {{ formatPercent(simFounderPct()) }}\n \n
\n
\n Dilution:\n \n 60.0% → {{ formatPercent(simFounderPct()) }} (-{{ (60 - simFounderPct()).toFixed(1) }}%)\n \n
\n
\n Equity Value:\n \n {{ formatCurrency(simFounderValue()) }}\n
\n
\n Value Accretion:\n \n +{{ formatCurrency(simFounderValue() - 27000000) }}\n
\n
\n\n \n
\n
\n
\n \n Seed Investors\n
\n \n {{ formatPercent(simSeedPct()) }}\n \n
\n
\n Dilution:\n \n 25.0% → {{ formatPercent(simSeedPct()) }} (-{{ (25 - simSeedPct()).toFixed(1) }}%)\n \n
\n
\n Equity Value:\n \n {{ formatCurrency(simSeedValue()) }}\n
\n
\n Value Accretion:\n \n +{{ formatCurrency(simSeedValue() - 11250000) }}\n
\n
\n\n \n
\n
\n
\n \n Option Pool\n
\n \n {{ formatPercent(simOptionPct()) }}\n \n
\n
\n Dilution:\n \n 15.0% → {{ formatPercent(simOptionPct()) }} (-{{ (15 - simOptionPct()).toFixed(1) }}%)\n \n
\n
\n Equity Value:\n \n {{ formatCurrency(simOptionValue()) }}\n
\n
\n Value Accretion:\n \n +{{ formatCurrency(simOptionValue() - 6750000) }}\n
\n
\n\n \n
\n
\n
\n \n Series A Syndicate\n
\n \n New Investor\n \n
\n
\n New Ownership:\n \n {{ formatPercent(simNewInvestorPct()) }}\n \n
\n
\n Shares Purchased:\n \n {{ formatNumber(simNewSharesIssued()) }}\n
\n
\n Capital Invested:\n \n {{ formatCurrency(simInvestment()) }}\n
\n
\n
\n \n\n \n
\n \n
\n Round Dynamics Takeaway: \n Raising\n {{ formatCurrency(simInvestment()) }} at a\n {{ formatCurrency(simPreMoney()) }} pre-money\n valuation generates a\n ${{ simNewSharePrice().toFixed(2) }} share\n price. Although existing founders experience\n {{ (60 - simFounderPct()).toFixed(1) }}%\n dilution, their net equity value increases by\n +{{ formatCurrency(simFounderValue() - 27000000) }}\n (+{{ founderAccretionPct().toFixed(1) }}%) due to the valuation step-up.\n
\n
\n \n \n \n `,\n})\nexport class UiCapTableOwnershipSummaryComponent {\n protected readonly Award = Award\n protected readonly Building2 = Building2\n protected readonly Calculator = Calculator\n protected readonly Check = Check\n protected readonly Coins = Coins\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly Info = Info\n protected readonly Layers = Layers\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly TrendingUp = TrendingUp\n protected readonly Users = Users\n protected readonly X = X\n\n // Current Cap Table Static Baseline\n protected readonly currentSharePrice = 4.5\n protected readonly currentTotalShares = 10000000\n protected readonly currentValuation = 45000000\n\n @Input() set initialInvestment(v: number | undefined) {\n if (v !== undefined) this.simInvestment.set(v)\n }\n @Input() set initialPreMoney(v: number | undefined) {\n if (v !== undefined) this.simPreMoney.set(v)\n }\n @Input('class') className?: string\n\n readonly shareholders = signal(INITIAL_SHAREHOLDERS.map((s) => ({ ...s })))\n\n // Filter and Search State\n readonly searchQuery = signal('')\n readonly selectedClassFilter = signal('All')\n\n readonly filteredShareholders = computed(() => {\n const filter = this.selectedClassFilter()\n const q = this.searchQuery().trim().toLowerCase()\n return this.shareholders().filter((sh) => {\n if (filter !== 'All' && sh.shareClass !== filter) return false\n if (q) {\n return (\n sh.name.toLowerCase().includes(q) ||\n sh.role.toLowerCase().includes(q) ||\n sh.shareClass.toLowerCase().includes(q)\n )\n }\n return true\n })\n })\n\n // Export feedback state\n readonly isExporting = signal(false)\n readonly exportSuccess = signal(false)\n private exportTimer: ReturnType | undefined\n private exportResetTimer: ReturnType | undefined\n\n // Issue Grant Modal State\n readonly isGrantDialogOpen = signal(false)\n readonly grantSuccessMessage = signal(false)\n readonly grantName = signal('')\n readonly grantRole = signal('')\n readonly grantShares = signal(50000)\n readonly grantClass = signal('ISO Options')\n readonly grantVesting = signal('4-Year Vesting · 1-Year Cliff (25%), then Monthly')\n private grantTimer: ReturnType | undefined\n\n // Round Modeling Simulator State\n readonly simPreMoney = signal(50000000)\n readonly simInvestment = signal(10000000)\n\n // Dynamic Round Modeling Calculations\n readonly simPostMoney = computed(() => this.simPreMoney() + this.simInvestment())\n readonly simNewSharePrice = computed(() => {\n if (this.currentTotalShares <= 0) return 0\n return this.simPreMoney() / this.currentTotalShares\n })\n readonly simNewSharesIssued = computed(() => {\n if (this.simNewSharePrice() <= 0) return 0\n return Math.round(this.simInvestment() / this.simNewSharePrice())\n })\n readonly simTotalPostShares = computed(() => this.currentTotalShares + this.simNewSharesIssued())\n\n private readonly simFounderShares = 6000000\n private readonly simSeedShares = 2500000\n private readonly simOptionShares = 1500000\n\n readonly simFounderPct = computed(() => (this.simFounderShares / this.simTotalPostShares()) * 100)\n readonly simSeedPct = computed(() => (this.simSeedShares / this.simTotalPostShares()) * 100)\n readonly simOptionPct = computed(() => (this.simOptionShares / this.simTotalPostShares()) * 100)\n readonly simNewInvestorPct = computed(() => (this.simNewSharesIssued() / this.simTotalPostShares()) * 100)\n\n readonly simFounderValue = computed(() => (this.simFounderPct() / 100) * this.simPostMoney())\n readonly simSeedValue = computed(() => (this.simSeedPct() / 100) * this.simPostMoney())\n readonly simOptionValue = computed(() => (this.simOptionPct() / 100) * this.simPostMoney())\n\n readonly stepUpPct = computed(\n () => ((this.simNewSharePrice() - this.currentSharePrice) / this.currentSharePrice) * 100,\n )\n readonly founderAccretionPct = computed(() => ((this.simFounderValue() - 27000000) / 27000000) * 100)\n\n readonly exportButtonLabel = computed(() =>\n this.exportSuccess() ? 'Cap Table Exported!' : this.isExporting() ? 'Exporting...' : 'Export Cap Table (Excel)',\n )\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n filterButtonClass(value: CapTableClassFilter): string {\n return cn(\n 'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.selectedClassFilter() === value\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n avatarFallbackClass(shareClass: CapTableShareClass): string {\n return cn(\n 'text-xs font-bold',\n shareClass === 'Common Stock'\n ? 'bg-success/10 text-success'\n : shareClass === 'Series Seed Preferred'\n ? 'bg-chart-2/10 text-chart-2'\n : 'bg-info/10 text-info',\n )\n }\n\n vestingPct(sh: Shareholder): number {\n if (sh.isVestedComplete) return 100\n return (sh.vestedMonths / sh.totalMonths) * 100\n }\n\n vestingLabel(sh: Shareholder): string {\n if (sh.isVestedComplete) return '100% Vested'\n if (sh.vestedMonths > 0) return `${Math.round((sh.vestedMonths / sh.totalMonths) * 100)}% Vested`\n return 'Unallocated'\n }\n\n vestingBarClass(sh: Shareholder): string {\n return cn(\n 'h-full transition-[width,background-color] duration-300',\n sh.isVestedComplete ? 'bg-primary' : sh.vestedMonths > 0 ? 'bg-success' : 'bg-info/40',\n )\n }\n\n numberOr(raw: string, fallback: number): number {\n const n = Number(raw)\n return Number.isFinite(n) ? n : fallback\n }\n\n formatCurrency(val: number): string {\n return val.toLocaleString('en-US', { style: 'currency', currency: 'USD' })\n }\n\n formatNumber(val: number): string {\n return val.toLocaleString('en-US')\n }\n\n formatPercent(val: number, decimals = 1): string {\n return `${val.toFixed(decimals)}%`\n }\n\n handleExportCapTable(): void {\n this.isExporting.set(true)\n clearTimeout(this.exportTimer)\n clearTimeout(this.exportResetTimer)\n this.exportTimer = setTimeout(() => {\n this.isExporting.set(false)\n this.exportSuccess.set(true)\n this.exportResetTimer = setTimeout(() => this.exportSuccess.set(false), 2500)\n }, 1000)\n }\n\n handleCreateGrant(event?: Event): void {\n event?.preventDefault()\n if (!this.grantName().trim() || this.grantShares() <= 0) return\n this.grantSuccessMessage.set(true)\n clearTimeout(this.grantTimer)\n this.grantTimer = setTimeout(() => {\n this.grantSuccessMessage.set(false)\n this.isGrantDialogOpen.set(false)\n this.grantName.set('')\n this.grantRole.set('')\n this.grantShares.set(50000)\n }, 1500)\n }\n\n setPresetScenario(preMoney: number, investment: number): void {\n this.simPreMoney.set(preMoney)\n this.simInvestment.set(investment)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cap-table-ownership-summary/cap-table-ownership-summary.component.ts" }, { "path": "packages/registry-angular/blocks/cap-table-ownership-summary/index.ts", "content": "export {\n UiCapTableOwnershipSummaryComponent,\n type CapTableClassFilter,\n type CapTableShareClass,\n type GrantEquityClass,\n type Shareholder,\n} from './cap-table-ownership-summary.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/cap-table-ownership-summary/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/input.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Carta-style company equity capitalization table, share class breakdown, fully diluted ownership percentages, shareholder vesting progress, and interactive round dilution modeling simulator.", "categories": [ "finance", "app", "dashboard" ] }