{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cap-table-ownership-summary",
  "title": "Cap Table Ownership Summary",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cap-table-ownership-summary/CapTableOwnershipSummary.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Award,\n  Building2,\n  Calculator,\n  Check,\n  FileSpreadsheet,\n  Info,\n  Layers,\n  Plus,\n  RefreshCw,\n  Search,\n  ShieldCheck,\n  TrendingUp,\n  Users,\n  X,\n  Coins,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Props {\n  initialInvestment?: number\n  initialPreMoney?: number\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialInvestment: 10000000,\n  initialPreMoney: 50000000,\n})\n\n// Current Cap Table Static Baseline\nconst currentSharePrice = 4.5\nconst currentTotalShares = 10000000\nconst currentValuation = 45000000\n\ninterface Shareholder {\n  id: string\n  name: string\n  role: string\n  avatar: string\n  shareClass: 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'\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 shareholders = ref<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// Filter and Search State\nconst searchQuery = ref('')\nconst selectedClassFilter = ref<'All' | 'Common Stock' | 'Series Seed Preferred' | 'ISO Option Pool'>('All')\n\nconst filteredShareholders = computed(() => {\n  return shareholders.value.filter((sh) => {\n    if (selectedClassFilter.value !== 'All' && sh.shareClass !== selectedClassFilter.value) {\n      return false\n    }\n    if (searchQuery.value.trim()) {\n      const q = searchQuery.value.toLowerCase()\n      const matchName = sh.name.toLowerCase().includes(q)\n      const matchRole = sh.role.toLowerCase().includes(q)\n      const matchClass = sh.shareClass.toLowerCase().includes(q)\n      return matchName || matchRole || matchClass\n    }\n    return true\n  })\n})\n\n// Export feedback state\nconst isExporting = ref(false)\nconst exportSuccess = ref(false)\n\nfunction handleExportCapTable() {\n  isExporting.value = true\n  setTimeout(() => {\n    isExporting.value = false\n    exportSuccess.value = true\n    setTimeout(() => {\n      exportSuccess.value = false\n    }, 2500)\n  }, 1000)\n}\n\n// Issue Grant Modal State\nconst isGrantDialogOpen = ref(false)\nconst grantSuccessMessage = ref(false)\nconst grantName = ref('')\nconst grantRole = ref('')\nconst grantShares = ref(50000)\nconst grantClass = ref<'ISO Options' | 'NSO Options' | 'Restricted Stock'>('ISO Options')\nconst grantVesting = ref('4-Year Vesting · 1-Year Cliff (25%), then Monthly')\n\nfunction handleCreateGrant() {\n  if (!grantName.value.trim() || grantShares.value <= 0) return\n\n  grantSuccessMessage.value = true\n  setTimeout(() => {\n    grantSuccessMessage.value = false\n    isGrantDialogOpen.value = false\n    grantName.value = ''\n    grantRole.value = ''\n    grantShares.value = 50000\n  }, 1500)\n}\n\n// Round Modeling Simulator State\nconst simPreMoney = ref(props.initialPreMoney)\nconst simInvestment = ref(props.initialInvestment)\n\nfunction setPresetScenario(preMoney: number, investment: number) {\n  simPreMoney.value = preMoney\n  simInvestment.value = investment\n}\n\n// Dynamic Round Modeling Calculations\nconst simPostMoney = computed(() => simPreMoney.value + simInvestment.value)\nconst simNewSharePrice = computed(() => {\n  if (currentTotalShares <= 0) return 0\n  return simPreMoney.value / currentTotalShares\n})\nconst simNewSharesIssued = computed(() => {\n  if (simNewSharePrice.value <= 0) return 0\n  return Math.round(simInvestment.value / simNewSharePrice.value)\n})\nconst simTotalPostShares = computed(() => currentTotalShares + simNewSharesIssued.value)\n\nconst simFounderShares = 6000000\nconst simSeedShares = 2500000\nconst simOptionShares = 1500000\n\nconst simFounderPct = computed(() => (simFounderShares / simTotalPostShares.value) * 100)\nconst simSeedPct = computed(() => (simSeedShares / simTotalPostShares.value) * 100)\nconst simOptionPct = computed(() => (simOptionShares / simTotalPostShares.value) * 100)\nconst simNewInvestorPct = computed(() => (simNewSharesIssued.value / simTotalPostShares.value) * 100)\n\nconst simFounderValue = computed(() => (simFounderPct.value / 100) * simPostMoney.value)\nconst simSeedValue = computed(() => (simSeedPct.value / 100) * simPostMoney.value)\nconst simOptionValue = computed(() => (simOptionPct.value / 100) * simPostMoney.value)\nconst simNewInvestorValue = computed(() => (simNewInvestorPct.value / 100) * simPostMoney.value)\n\nfunction formatCurrency(val: number): string {\n  return val.toLocaleString('en-US', {\n    style: 'currency',\n    currency: 'USD',\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  })\n}\n\nfunction formatNumber(val: number): string {\n  return val.toLocaleString('en-US')\n}\n\nfunction formatPercent(val: number, decimals = 1): string {\n  return `${val.toFixed(decimals)}%`\n}\n</script>\n\n<template>\n  <div data-slot=\"cap-table-ownership-summary\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- Top Header -->\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div\n            class=\"bg-primary/10 text-primary border-primary/20 flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n            aria-hidden=\"true\"\n          >\n            <Building2 class=\"size-5\" />\n          </div>\n          <div>\n            <h1 class=\"text-foreground text-2xl font-bold tracking-tight\">\n              Capitalization Table &amp; Equity Ownership\n            </h1>\n          </div>\n          <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1.5 font-normal\">\n            <span class=\"bg-success size-1.5 animate-pulse rounded-full\" aria-hidden=\"true\" />\n            Audited · Series Seed\n          </Badge>\n        </div>\n\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs\">\n          <span class=\"bg-muted/70 text-foreground border-border/80 rounded border px-2 py-0.5 font-medium\">\n            UIPKGE Technologies Inc. · Delaware C-Corp\n          </span>\n          <span>EIN: 93-8472910</span>\n          <span class=\"inline-flex items-center gap-1 font-mono\">\n            <ShieldCheck class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            409A FMV: ${{ currentSharePrice.toFixed(2) }}/share\n          </span>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"gap-1.5 shadow-xs\"\n          :disabled=\"isExporting\"\n          @click=\"handleExportCapTable\"\n        >\n          <RefreshCw v-if=\"isExporting\" class=\"size-4 animate-spin\" aria-hidden=\"true\" />\n          <Check v-else-if=\"exportSuccess\" class=\"text-success size-4\" aria-hidden=\"true\" />\n          <FileSpreadsheet v-else class=\"size-4\" aria-hidden=\"true\" />\n          <span>{{\n            exportSuccess ? 'Cap Table Exported!' : isExporting ? 'Exporting...' : 'Export Cap Table (Excel)'\n          }}</span>\n        </Button>\n\n        <Button size=\"sm\" class=\"gap-1.5 shadow-xs\" @click=\"isGrantDialogOpen = true\">\n          <Plus class=\"size-4\" aria-hidden=\"true\" />\n          Issue Equity Grant\n        </Button>\n      </div>\n    </header>\n\n    <!-- Issue Equity Grant Dialog Modal Overlay -->\n    <div\n      v-if=\"isGrantDialogOpen\"\n      class=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-xs\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"grant-dialog-title\"\n    >\n      <Card class=\"border-border w-full max-w-lg shadow-lg\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n            <CardTitle id=\"grant-dialog-title\" class=\"flex items-center gap-2 text-base font-semibold\">\n              <Award class=\"text-primary size-5\" />\n              Issue New Equity Option Grant\n            </CardTitle>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              class=\"text-muted-foreground hover:text-foreground size-7\"\n              aria-label=\"Close dialog\"\n              @click=\"isGrantDialogOpen = false\"\n            >\n              <X class=\"size-4\" />\n            </Button>\n          </div>\n          <CardDescription class=\"text-xs\">\n            Authorize and draft an option grant under the 2024 Equity Incentive Plan (EIP).\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent class=\"space-y-4\">\n          <div v-if=\"grantSuccessMessage\" class=\"border-success/20 bg-success/10 rounded-lg border p-4 text-center\">\n            <Check class=\"text-success mx-auto size-6\" />\n            <p class=\"text-foreground mt-2 text-sm font-semibold\">Option Grant Issued &amp; Drafted!</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">\n              Sent to Board of Directors for electronic consent signature.\n            </p>\n          </div>\n\n          <form v-else class=\"space-y-3.5\" @submit.prevent=\"handleCreateGrant\">\n            <div class=\"space-y-1.5\">\n              <label for=\"grantee-name\" class=\"text-foreground text-xs font-medium\">Grantee Legal Name</label>\n              <Input\n                id=\"grantee-name\"\n                v-model=\"grantName\"\n                placeholder=\"e.g. Dr. Sarah Chen\"\n                required\n                class=\"h-9 text-xs\"\n              />\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div class=\"space-y-1.5\">\n                <label for=\"grantee-role\" class=\"text-foreground text-xs font-medium\">Role / Title</label>\n                <Input\n                  id=\"grantee-role\"\n                  v-model=\"grantRole\"\n                  placeholder=\"e.g. Principal AI Scientist\"\n                  required\n                  class=\"h-9 text-xs\"\n                />\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <label for=\"grant-quantity\" class=\"text-foreground text-xs font-medium\"\n                  >Number of Options / Shares</label\n                >\n                <Input\n                  id=\"grant-quantity\"\n                  v-model.number=\"grantShares\"\n                  type=\"number\"\n                  min=\"1000\"\n                  step=\"1000\"\n                  required\n                  class=\"h-9 font-mono text-xs tabular-nums\"\n                />\n              </div>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div class=\"space-y-1.5\">\n                <label class=\"text-foreground text-xs font-medium\">Equity Class</label>\n                <div\n                  class=\"border-border bg-muted/30 flex h-9 items-center justify-between rounded-md border px-3 text-xs\"\n                >\n                  <span class=\"font-medium\">{{ grantClass }}</span>\n                  <Badge variant=\"outline\" class=\"text-xs\">EIP-2024</Badge>\n                </div>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <label class=\"text-foreground text-xs font-medium\">Exercise Price (409A FMV)</label>\n                <div\n                  class=\"border-border bg-muted/30 flex h-9 items-center justify-between rounded-md border px-3 font-mono text-xs tabular-nums\"\n                >\n                  <span>${{ currentSharePrice.toFixed(2) }} / share</span>\n                  <span class=\"text-muted-foreground text-xs\">Fair Market</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Standard Vesting Schedule</label>\n              <Input v-model=\"grantVesting\" readonly class=\"bg-muted/40 h-9 text-xs\" />\n              <p class=\"text-muted-foreground text-xs\">\n                25% vests at 12-month cliff; remaining 75% vests monthly in 36 equal installments.\n              </p>\n            </div>\n\n            <div class=\"flex items-center justify-end gap-2 pt-3\">\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"isGrantDialogOpen = false\"> Cancel </Button>\n              <Button type=\"submit\" size=\"sm\" class=\"gap-1.5\">\n                <Check class=\"size-4\" />\n                Draft &amp; Issue Grant\n              </Button>\n            </div>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- 4 Capital Structure Overview Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Total Fully Diluted Shares Card -->\n      <Card class=\"border-border relative overflow-hidden shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Total Fully Diluted Shares</CardTitle>\n          <div class=\"bg-primary/10 text-primary rounded-md p-1.5\">\n            <Layers class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">10,000,000</div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n            <span>Authorized: 15,000,000</span>\n            <span class=\"text-success font-mono\">66.7% Issued</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Founder Common Stock Card -->\n      <Card class=\"border-border relative overflow-hidden shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Founder Common Stock</CardTitle>\n          <div class=\"bg-success/10 text-success rounded-md p-1.5\">\n            <Users class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">6,000,000</span>\n            <span class=\"text-success font-mono text-xs font-semibold\">60.0%</span>\n          </div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n            <span>2 Co-Founders</span>\n            <span class=\"font-mono tabular-nums\">$27,000,000.00</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Series Seed Preferred Card -->\n      <Card class=\"border-border relative overflow-hidden shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Series Seed Preferred</CardTitle>\n          <div class=\"bg-chart-2/10 text-chart-2 rounded-md p-1.5\">\n            <TrendingUp class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">2,500,000</span>\n            <span class=\"text-chart-2 font-mono text-xs font-semibold\">25.0%</span>\n          </div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n            <span>2 Seed Investors · 1.0x Pref</span>\n            <span class=\"font-mono tabular-nums\">$11,250,000.00</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Unallocated Option Pool Card -->\n      <Card class=\"border-border relative overflow-hidden shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Unallocated Option Pool</CardTitle>\n          <div class=\"bg-info/10 text-info rounded-md p-1.5\">\n            <Coins class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">1,500,000</span>\n            <span class=\"text-info font-mono text-xs font-semibold\">15.0%</span>\n          </div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n            <span>2024 EIP Pool</span>\n            <span class=\"font-mono tabular-nums\">$6,750,000.00</span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Company Valuation Hero & Visual Stacked Ownership Bar Card -->\n    <Card class=\"border-border overflow-hidden shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardDescription class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Current Post-Money Valuation\n            </CardDescription>\n            <div class=\"mt-1 flex flex-wrap items-baseline gap-3\">\n              <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums sm:text-4xl\">\n                $45,000,000.00\n              </span>\n              <div\n                class=\"border-success/20 bg-success/10 text-success text-success inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold tabular-nums\"\n              >\n                <TrendingUp class=\"size-3.5\" aria-hidden=\"true\" />\n                Seed Round Closed\n                <span class=\"text-muted-foreground ml-0.5 font-normal\">($4.50/share)</span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"text-muted-foreground flex items-center gap-3 text-xs\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n              <span>Cap Table Reconciled</span>\n            </div>\n            <span class=\"font-mono\">10,000,000 Total Units</span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4 pt-1\">\n        <!-- Multi-segment Stacked Ownership Bar -->\n        <div class=\"space-y-2\">\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n            <span class=\"text-foreground font-medium\">Fully Diluted Equity Distribution</span>\n            <span class=\"tabular-nums\">100.0% Allocation</span>\n          </div>\n\n          <div class=\"bg-muted/60 border-border/50 flex h-4 w-full gap-0.5 overflow-hidden rounded-full border p-0.5\">\n            <!-- Founders 60% Emerald -->\n            <div\n              style=\"width: 60%\"\n              class=\"bg-success h-full rounded-l-full transition-opacity duration-300 hover:opacity-90\"\n              title=\"Founders (Common Stock): 60.0% · 6,000,000 Shares\"\n            />\n            <!-- Seed Investors 25% -->\n            <div\n              style=\"width: 25%\"\n              class=\"bg-chart-2 h-full transition-opacity duration-300 hover:opacity-90\"\n              title=\"Seed Investors (Preferred): 25.0% · 2,500,000 Shares\"\n            />\n            <!-- Option Pool 15% Blue -->\n            <div\n              style=\"width: 15%\"\n              class=\"bg-info h-full rounded-r-full transition-opacity duration-300 hover:opacity-90\"\n              title=\"Unallocated Option Pool: 15.0% · 1,500,000 Shares\"\n            />\n          </div>\n\n          <!-- Stacked Bar Legend -->\n          <div class=\"grid grid-cols-1 gap-3 pt-2 sm:grid-cols-3\">\n            <div\n              class=\"border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-x-2 rounded-md border p-2.5 text-xs\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <span class=\"bg-success size-2.5 shrink-0 rounded-full shadow-xs\" aria-hidden=\"true\" />\n                <div>\n                  <div class=\"text-foreground font-medium\">Founders (Common)</div>\n                  <div class=\"text-muted-foreground font-mono tabular-nums\">6,000,000 shares</div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-foreground font-bold tabular-nums\">60.0%</div>\n                <div class=\"text-muted-foreground font-mono tabular-nums\">$27,000,000.00</div>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-x-2 rounded-md border p-2.5 text-xs\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <span class=\"bg-chart-2 size-2.5 shrink-0 rounded-full shadow-xs\" aria-hidden=\"true\" />\n                <div>\n                  <div class=\"text-foreground font-medium\">Seed Investors (Preferred)</div>\n                  <div class=\"text-muted-foreground font-mono tabular-nums\">2,500,000 shares</div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-foreground font-bold tabular-nums\">25.0%</div>\n                <div class=\"text-muted-foreground font-mono tabular-nums\">$11,250,000.00</div>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-x-2 rounded-md border p-2.5 text-xs\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <span class=\"bg-info size-2.5 shrink-0 rounded-full shadow-xs\" aria-hidden=\"true\" />\n                <div>\n                  <div class=\"text-foreground font-medium\">Employee Option Pool</div>\n                  <div class=\"text-muted-foreground font-mono tabular-nums\">1,500,000 shares</div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-foreground font-bold tabular-nums\">15.0%</div>\n                <div class=\"text-muted-foreground font-mono tabular-nums\">$6,750,000.00</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Shareholder Breakdown Table Card -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"border-border/60 border-b pb-4\">\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-foreground text-base font-semibold\">Shareholder &amp; Equity Register</CardTitle>\n            <CardDescription class=\"text-muted-foreground mt-0.5 text-xs\">\n              Detailed registry of individual grants, share classes, fully diluted ownership, and vesting timelines.\n            </CardDescription>\n          </div>\n\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n            <!-- Search -->\n            <div class=\"relative w-full sm:w-56\">\n              <Search class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n              <Input v-model=\"searchQuery\" placeholder=\"Search shareholder or role...\" class=\"h-8 pl-8 text-xs\" />\n            </div>\n\n            <!-- Share Class Filter Buttons -->\n            <div class=\"border-border bg-muted/40 flex items-center rounded-lg border p-0.5\">\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                    selectedClassFilter === 'All'\n                      ? 'bg-background text-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"selectedClassFilter = 'All'\"\n              >\n                All (5)\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                    selectedClassFilter === 'Common Stock'\n                      ? 'bg-background text-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"selectedClassFilter = 'Common Stock'\"\n              >\n                Common (2)\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                    selectedClassFilter === 'Series Seed Preferred'\n                      ? 'bg-background text-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"selectedClassFilter = 'Series Seed Preferred'\"\n              >\n                Preferred (2)\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                    selectedClassFilter === 'ISO Option Pool'\n                      ? 'bg-background text-foreground shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )\n                \"\n                @click=\"selectedClassFilter = 'ISO Option Pool'\"\n              >\n                Pool (1)\n              </button>\n            </div>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow class=\"hover:bg-transparent\">\n                <TableHead class=\"w-[260px] pl-6 text-xs font-medium\">Shareholder / Entity</TableHead>\n                <TableHead class=\"w-[180px] text-xs font-medium\">Share Class</TableHead>\n                <TableHead class=\"text-right text-xs font-medium\">Shares Owned</TableHead>\n                <TableHead class=\"text-right text-xs font-medium\">Fully Diluted %</TableHead>\n                <TableHead class=\"text-right text-xs font-medium\">Total Equity Value</TableHead>\n                <TableHead class=\"min-w-[240px] pr-6 text-xs font-medium\">Vesting &amp; Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"sh in filteredShareholders\" :key=\"sh.id\" class=\"hover:bg-muted/30 transition-colors\">\n                <!-- Shareholder Name & Role -->\n                <TableCell class=\"py-3.5 pl-6\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar class=\"border-border/80 size-9 border shadow-xs\">\n                      <AvatarFallback\n                        :class=\"\n                          cn(\n                            'text-xs font-bold',\n                            sh.shareClass === 'Common Stock'\n                              ? 'bg-success/10 text-success'\n                              : sh.shareClass === 'Series Seed Preferred'\n                                ? 'bg-chart-2/10 text-chart-2'\n                                : 'bg-info/10 text-info',\n                          )\n                        \"\n                      >\n                        {{ sh.avatar }}\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-foreground truncate text-xs font-semibold\">{{ sh.name }}</div>\n                      <div class=\"text-muted-foreground truncate text-xs\">{{ sh.role }}</div>\n                      <div class=\"text-muted-foreground/70 font-mono text-xs\">{{ sh.grantDate }}</div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Share Class Badge -->\n                <TableCell class=\"py-3.5\">\n                  <Badge\n                    v-if=\"sh.shareClass === 'Common Stock'\"\n                    variant=\"outline\"\n                    class=\"border-success/30 bg-success/10 text-success text-xs font-medium\"\n                  >\n                    Common Stock\n                  </Badge>\n                  <Badge\n                    v-else-if=\"sh.shareClass === 'Series Seed Preferred'\"\n                    variant=\"outline\"\n                    class=\"border-chart-2/30 bg-chart-2/10 text-chart-2 text-xs font-medium\"\n                  >\n                    Series Seed Preferred\n                  </Badge>\n                  <Badge v-else variant=\"outline\" class=\"border-info/30 bg-info/10 text-info text-xs font-medium\">\n                    ISO Option Pool\n                  </Badge>\n                </TableCell>\n\n                <!-- Shares Owned -->\n                <TableCell class=\"py-3.5 text-right\">\n                  <div class=\"text-foreground font-mono text-sm font-bold tabular-nums\">\n                    {{ formatNumber(sh.shares) }}\n                  </div>\n                  <div class=\"text-muted-foreground text-xs\">Shares</div>\n                </TableCell>\n\n                <!-- Fully Diluted Ownership Percentage -->\n                <TableCell class=\"py-3.5 text-right\">\n                  <div class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                    {{ formatPercent(sh.ownershipPct) }}\n                  </div>\n                  <div class=\"text-muted-foreground text-xs\">of 10,000,000</div>\n                </TableCell>\n\n                <!-- Total Equity Value -->\n                <TableCell class=\"py-3.5 text-right\">\n                  <div class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                    {{ formatCurrency(sh.equityValue) }}\n                  </div>\n                  <div class=\"text-muted-foreground text-xs\">@ $4.50/share</div>\n                </TableCell>\n\n                <!-- Vesting Status Progress -->\n                <TableCell class=\"py-3.5 pr-6\">\n                  <div class=\"space-y-1.5\">\n                    <div class=\"flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                      <span class=\"text-foreground font-medium\">\n                        {{\n                          sh.isVestedComplete\n                            ? '100% Vested'\n                            : sh.vestedMonths > 0\n                              ? `${Math.round((sh.vestedMonths / sh.totalMonths) * 100)}% Vested`\n                              : 'Unallocated'\n                        }}\n                      </span>\n                      <span class=\"text-muted-foreground font-mono tabular-nums\">\n                        {{ sh.vestedMonths }}/{{ sh.totalMonths }} mo\n                      </span>\n                    </div>\n\n                    <div class=\"bg-muted/80 relative h-2 w-full overflow-hidden rounded-full\">\n                      <div\n                        :class=\"\n                          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                        :style=\"{ width: `${sh.isVestedComplete ? 100 : (sh.vestedMonths / sh.totalMonths) * 100}%` }\"\n                      />\n                    </div>\n\n                    <div class=\"text-muted-foreground text-xs\">\n                      {{ sh.vestingDetail }}\n                    </div>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n\n        <!-- Table Summary Bar -->\n        <div\n          class=\"border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-4 border-t px-6 py-3 text-xs\"\n        >\n          <div class=\"text-muted-foreground\">\n            Showing <span class=\"text-foreground font-semibold\">{{ filteredShareholders.length }}</span> of\n            <span class=\"text-foreground font-semibold\">5</span> cap table stakeholders\n          </div>\n          <div class=\"flex flex-wrap items-center gap-6 font-mono\">\n            <div>\n              <span class=\"text-muted-foreground\">Total Shares: </span>\n              <span class=\"text-foreground font-bold tabular-nums\">10,000,000</span>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Total Ownership: </span>\n              <span class=\"text-foreground font-bold tabular-nums\">100.0%</span>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Total Valuation: </span>\n              <span class=\"text-foreground font-bold tabular-nums\">$45,000,000.00</span>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Round Modeling Simulator Card (Series A Dilution Simulator) -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary/10 text-primary rounded-md p-1.5\">\n                <Calculator class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <CardTitle class=\"text-foreground text-base font-semibold\">\n                Round Modeling Simulator (Series A Pro-Forma)\n              </CardTitle>\n            </div>\n            <CardDescription class=\"text-muted-foreground text-xs\">\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            </CardDescription>\n          </div>\n\n          <!-- Preset Scenario Buttons -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-7 text-xs font-medium\"\n              @click=\"setPresetScenario(30000000, 5000000)\"\n            >\n              $5M @ $30M Pre\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-7 text-xs font-medium\"\n              @click=\"setPresetScenario(50000000, 10000000)\"\n            >\n              $10M @ $50M Pre\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-7 text-xs font-medium\"\n              @click=\"setPresetScenario(60000000, 15000000)\"\n            >\n              $15M @ $60M Pre\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-6\">\n        <!-- Simulator Inputs -->\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          <!-- Pre-Money Valuation Input -->\n          <div class=\"bg-muted/30 border-border/80 space-y-2 rounded-lg border p-4\">\n            <div class=\"flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n              <label for=\"sim-pre-money\" class=\"text-foreground font-semibold\">Series A Pre-Money Valuation</label>\n              <span class=\"text-muted-foreground font-mono tabular-nums\"\n                >${{ (simPreMoney / 1000000).toFixed(1) }}M</span\n              >\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <Input\n                id=\"sim-pre-money\"\n                v-model.number=\"simPreMoney\"\n                type=\"number\"\n                step=\"1000000\"\n                min=\"10000000\"\n                class=\"font-mono text-base font-bold tabular-nums\"\n              />\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              Implies a share price of\n              <strong class=\"text-foreground font-mono tabular-nums\">${{ simNewSharePrice.toFixed(2) }} / share</strong>\n              (+{{ (((simNewSharePrice - currentSharePrice) / currentSharePrice) * 100).toFixed(1) }}% step-up).\n            </p>\n          </div>\n\n          <!-- New Investment Raised Input -->\n          <div class=\"bg-muted/30 border-border/80 space-y-2 rounded-lg border p-4\">\n            <div class=\"flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n              <label for=\"sim-investment\" class=\"text-foreground font-semibold\">Series A Capital Raised</label>\n              <span class=\"text-muted-foreground font-mono tabular-nums\"\n                >${{ (simInvestment / 1000000).toFixed(1) }}M</span\n              >\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <Input\n                id=\"sim-investment\"\n                v-model.number=\"simInvestment\"\n                type=\"number\"\n                step=\"1000000\"\n                min=\"1000000\"\n                class=\"font-mono text-base font-bold tabular-nums\"\n              />\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              Issues\n              <strong class=\"text-foreground font-mono tabular-nums\"\n                >{{ formatNumber(simNewSharesIssued) }} new shares</strong\n              >\n              to Series A lead syndicate.\n            </p>\n          </div>\n        </div>\n\n        <!-- Calculated Pro-Forma Summary Metrics -->\n        <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n          <div class=\"border-border/60 bg-muted/20 space-y-1 rounded-md border p-3\">\n            <div class=\"text-muted-foreground text-xs\">Post-Money Valuation</div>\n            <div class=\"text-foreground font-mono text-lg font-bold tabular-nums\">\n              {{ formatCurrency(simPostMoney) }}\n            </div>\n            <div class=\"text-muted-foreground text-xs\">Pre-Money + Investment</div>\n          </div>\n\n          <div class=\"border-border/60 bg-muted/20 space-y-1 rounded-md border p-3\">\n            <div class=\"text-muted-foreground text-xs\">Series A Share Price</div>\n            <div class=\"text-foreground font-mono text-lg font-bold tabular-nums\">\n              ${{ simNewSharePrice.toFixed(2) }}\n            </div>\n            <div class=\"text-success text-xs\">\n              vs ${{ currentSharePrice.toFixed(2) }} Seed (+{{\n                (((simNewSharePrice - currentSharePrice) / currentSharePrice) * 100).toFixed(1)\n              }}%)\n            </div>\n          </div>\n\n          <div class=\"border-border/60 bg-muted/20 space-y-1 rounded-md border p-3\">\n            <div class=\"text-muted-foreground text-xs\">Total Diluted Shares</div>\n            <div class=\"text-foreground font-mono text-lg font-bold tabular-nums\">\n              {{ formatNumber(simTotalPostShares) }}\n            </div>\n            <div class=\"text-muted-foreground text-xs\">+{{ formatNumber(simNewSharesIssued) }} New Shares</div>\n          </div>\n\n          <div class=\"border-border/60 bg-muted/20 space-y-1 rounded-md border p-3\">\n            <div class=\"text-muted-foreground text-xs\">Investor Dilution Rate</div>\n            <div class=\"text-foreground text-warning text-warning font-mono text-lg font-bold tabular-nums\">\n              {{ formatPercent(simNewInvestorPct) }}\n            </div>\n            <div class=\"text-muted-foreground text-xs\">Effective Round Dilution</div>\n          </div>\n        </div>\n\n        <!-- Post-Round Dilution & Valuation Comparison Table -->\n        <div class=\"space-y-3\">\n          <div class=\"flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n            <span class=\"text-foreground font-semibold\">Post-Series A Ownership Comparison</span>\n            <span class=\"text-muted-foreground\">Pro-Forma Stakeholder Impact</span>\n          </div>\n\n          <!-- Visual Comparison Bar -->\n          <div class=\"space-y-1.5\">\n            <div class=\"bg-muted/60 border-border/50 flex h-4 w-full gap-0.5 overflow-hidden rounded-full border p-0.5\">\n              <div\n                :style=\"{ width: `${simFounderPct}%` }\"\n                class=\"bg-success h-full rounded-l-full transition-[width] duration-300\"\n                :title=\"`Founders: ${simFounderPct.toFixed(1)}%`\"\n              />\n              <div\n                :style=\"{ width: `${simSeedPct}%` }\"\n                class=\"bg-chart-2 h-full transition-[width] duration-300\"\n                :title=\"`Seed Investors: ${simSeedPct.toFixed(1)}%`\"\n              />\n              <div\n                :style=\"{ width: `${simOptionPct}%` }\"\n                class=\"bg-info h-full transition-[width] duration-300\"\n                :title=\"`Option Pool: ${simOptionPct.toFixed(1)}%`\"\n              />\n              <div\n                :style=\"{ width: `${simNewInvestorPct}%` }\"\n                class=\"bg-warning h-full rounded-r-full transition-[width] duration-300\"\n                :title=\"`Series A Investors: ${simNewInvestorPct.toFixed(1)}%`\"\n              />\n            </div>\n          </div>\n\n          <!-- Stakeholder Comparative Grid -->\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n            <!-- Founders -->\n            <div class=\"border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs\">\n              <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground font-semibold\">Founders</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-success/30 text-success font-mono text-xs\">\n                  {{ formatPercent(simFounderPct) }}\n                </Badge>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Dilution:</span>\n                <span class=\"text-destructive text-destructive font-mono tabular-nums\">\n                  60.0% &rarr; {{ formatPercent(simFounderPct) }} (-{{ (60 - simFounderPct).toFixed(1) }}%)\n                </span>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Equity Value:</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">{{\n                  formatCurrency(simFounderValue)\n                }}</span>\n              </div>\n              <div class=\"text-success flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                <span>Value Accretion:</span>\n                <span class=\"font-mono font-semibold tabular-nums\"\n                  >+{{ formatCurrency(simFounderValue - 27000000) }}</span\n                >\n              </div>\n            </div>\n\n            <!-- Seed Investors -->\n            <div class=\"border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs\">\n              <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"bg-chart-2 size-2 rounded-full\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground font-semibold\">Seed Investors</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-chart-2/30 text-chart-2 font-mono text-xs\">\n                  {{ formatPercent(simSeedPct) }}\n                </Badge>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Dilution:</span>\n                <span class=\"text-destructive text-destructive font-mono tabular-nums\">\n                  25.0% &rarr; {{ formatPercent(simSeedPct) }} (-{{ (25 - simSeedPct).toFixed(1) }}%)\n                </span>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Equity Value:</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">{{\n                  formatCurrency(simSeedValue)\n                }}</span>\n              </div>\n              <div class=\"text-success flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                <span>Value Accretion:</span>\n                <span class=\"font-mono font-semibold tabular-nums\">+{{ formatCurrency(simSeedValue - 11250000) }}</span>\n              </div>\n            </div>\n\n            <!-- Option Pool -->\n            <div class=\"border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs\">\n              <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"bg-info size-2 rounded-full\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground font-semibold\">Option Pool</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-info/30 text-info font-mono text-xs\">\n                  {{ formatPercent(simOptionPct) }}\n                </Badge>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Dilution:</span>\n                <span class=\"text-destructive text-destructive font-mono tabular-nums\">\n                  15.0% &rarr; {{ formatPercent(simOptionPct) }} (-{{ (15 - simOptionPct).toFixed(1) }}%)\n                </span>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Equity Value:</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">{{\n                  formatCurrency(simOptionValue)\n                }}</span>\n              </div>\n              <div class=\"text-success flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                <span>Value Accretion:</span>\n                <span class=\"font-mono font-semibold tabular-nums\"\n                  >+{{ formatCurrency(simOptionValue - 6750000) }}</span\n                >\n              </div>\n            </div>\n\n            <!-- New Series A Investors -->\n            <div class=\"border-border/80 bg-card space-y-2 rounded-lg border p-3 text-xs shadow-xs\">\n              <div class=\"flex flex-wrap items-center justify-between gap-x-2\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"bg-warning size-2 rounded-full\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground font-semibold\">Series A Syndicate</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-warning/30 text-warning font-mono text-xs\"> New Investor </Badge>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>New Ownership:</span>\n                <span class=\"text-warning text-warning font-mono font-bold tabular-nums\">\n                  {{ formatPercent(simNewInvestorPct) }}\n                </span>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2\">\n                <span>Shares Purchased:</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">{{\n                  formatNumber(simNewSharesIssued)\n                }}</span>\n              </div>\n              <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 text-xs\">\n                <span>Capital Invested:</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">{{\n                  formatCurrency(simInvestment)\n                }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Insight Banner Callout -->\n        <div class=\"border-border/60 bg-muted/40 flex items-start gap-3 rounded-lg border p-3.5 text-xs\">\n          <Info class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n          <div class=\"text-muted-foreground space-y-1\">\n            <span class=\"text-foreground font-semibold\">Round Dynamics Takeaway: </span>\n            Raising <span class=\"text-foreground font-mono font-medium\">{{ formatCurrency(simInvestment) }}</span> at a\n            <span class=\"text-foreground font-mono font-medium\">{{ formatCurrency(simPreMoney) }}</span> pre-money\n            valuation generates a\n            <span class=\"text-foreground font-mono font-medium\">${{ simNewSharePrice.toFixed(2) }}</span> share price.\n            Although existing founders experience\n            <span class=\"text-foreground font-mono font-medium\">{{ (60 - simFounderPct).toFixed(1) }}%</span> dilution,\n            their net equity value increases by\n            <span class=\"text-success font-mono font-bold\">+{{ formatCurrency(simFounderValue - 27000000) }}</span>\n            (+{{ (((simFounderValue - 27000000) / 27000000) * 100).toFixed(1) }}%) due to the valuation step-up.\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CapTableOwnershipSummary.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/input.json",
    "https://uipkge.dev/r/vue/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"
  ]
}