Y Combinator Post-Money SAFE note valuation, conversion share price, effective discount, and cap table equity dilution simulator with interactive parameter controls and Series A financing sensitivity matrix.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/safe-note-calculator.json$npx shadcn@latest add https://uipkge.dev/r/react/safe-note-calculator.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/safe-note-calculator.json$bunx shadcn@latest add https://uipkge.dev/r/react/safe-note-calculator.jsonnpx shadcn@latest add @uipkge-react/safe-note-calculatorInstalls to:components/blocks/Type aliases exported from this item's source. Use these to shape the data you pass in.
PresetConfiginterface PresetConfig {
id: RoundPreset
label: string
investment: number
valuationCap: number
hasDiscount: boolean
discountRate: number
shares: number
seriesAPreMoney: number
description: string
}'use client'
import * as React from 'react'
import {
BadgePercent,
Check,
CheckCircle2,
Copy,
DollarSign,
FileSpreadsheet,
Layers,
Percent,
PieChart,
Scale,
ShieldCheck,
TrendingUp,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Slider } from '@/components/ui/slider'
import { Switch } from '@/components/ui/switch'
import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
type RoundPreset = 'seed-standard' | 'preseed-safe' | 'uncapped-discount' | 'bridge-round'
interface PresetConfig {
id: RoundPreset
label: string
investment: number
valuationCap: number
hasDiscount: boolean
discountRate: number
shares: number
seriesAPreMoney: number
description: string
}
const PRESETS: Record<RoundPreset, PresetConfig> = {
'seed-standard': {
id: 'seed-standard',
label: 'Standard Seed ($1M @ $15M)',
investment: 1_000_000,
valuationCap: 15_000_000,
hasDiscount: true,
discountRate: 20,
shares: 10_000_000,
seriesAPreMoney: 25_000_000,
description: 'Standard YC Post-Money SAFE with $15M valuation cap and optional 20% discount clause.',
},
'preseed-safe': {
id: 'preseed-safe',
label: 'Pre-Seed ($500K @ $8M)',
investment: 500_000,
valuationCap: 8_000_000,
hasDiscount: true,
discountRate: 20,
shares: 10_000_000,
seriesAPreMoney: 18_000_000,
description: 'Early-stage angel or accelerator round with $8M valuation cap.',
},
'uncapped-discount': {
id: 'uncapped-discount',
label: 'Uncapped (25% Disc)',
investment: 750_000,
valuationCap: 60_000_000,
hasDiscount: true,
discountRate: 25,
shares: 10_000_000,
seriesAPreMoney: 20_000_000,
description: 'High valuation cap structure where the 25% discount governs share conversion price.',
},
'bridge-round': {
id: 'bridge-round',
label: 'Growth Bridge ($2M @ $25M)',
investment: 2_000_000,
valuationCap: 25_000_000,
hasDiscount: true,
discountRate: 15,
shares: 10_000_000,
seriesAPreMoney: 45_000_000,
description: 'Late seed extension bridging into a larger institutional Series A equity round.',
},
}
const INVESTMENT_MARKS = {
100000: '$100K',
1000000: '$1M',
2500000: '$2.5M',
5000000: '$5M',
}
const VALUATION_CAP_MARKS = {
2000000: '$2M',
15000000: '$15M',
30000000: '$30M',
50000000: '$50M',
}
const DISCOUNT_RATE_MARKS = {
10: '10%',
15: '15%',
20: '20%',
25: '25%',
30: '30%',
}
const SERIES_A_MARKS = {
5000000: '$5M',
25000000: '$25M',
50000000: '$50M',
80000000: '$80M',
}
const SCENARIO_VALUATIONS = [10_000_000, 15_000_000, 20_000_000, 25_000_000, 40_000_000, 60_000_000]
// Number & Currency Formatters
const fmtCurrency = (val: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(val || 0)
}
const fmtCurrencyWhole = (val: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(val || 0)
}
const fmtPercent = (val: number, decimals = 2) => {
return `${(val || 0).toFixed(decimals)}%`
}
const fmtNumber = (val: number) => {
return new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
}).format(val || 0)
}
export function SafeNoteCalculator({ className }: { className?: string }) {
const [selectedPreset, setSelectedPreset] = React.useState<RoundPreset>('seed-standard')
const [investmentAmount, setInvestmentAmount] = React.useState(1_000_000)
const [valuationCap, setValuationCap] = React.useState(15_000_000)
const [hasDiscount, setHasDiscount] = React.useState(true)
const [discountRate, setDiscountRate] = React.useState(20)
const [companyCapitalization, setCompanyCapitalization] = React.useState(10_000_000)
const [seriesAPreMoney, setSeriesAPreMoney] = React.useState(25_000_000)
const [copied, setCopied] = React.useState(false)
const handlePresetChange = React.useCallback((value: string) => {
const presetId = value as RoundPreset
setSelectedPreset(presetId)
const preset = PRESETS[presetId]
if (preset) {
setInvestmentAmount(preset.investment)
setValuationCap(preset.valuationCap)
setHasDiscount(preset.hasDiscount)
setDiscountRate(preset.discountRate)
setCompanyCapitalization(preset.shares)
setSeriesAPreMoney(preset.seriesAPreMoney)
}
}, [])
// Core SAFE conversion economics
const calculations = React.useMemo(() => {
const inv = Math.max(1, investmentAmount)
const cap = Math.max(1, valuationCap)
const shares = Math.max(1, companyCapitalization)
const seriesA = Math.max(1, seriesAPreMoney)
const disc = hasDiscount ? Math.max(0, Math.min(99, discountRate)) : 0
// Series A unqualified price per share
const seriesAPricePerShare = seriesA / shares
// Cap conversion price per share
const capPricePerShare = cap / shares
// Discount conversion price per share
const discountPricePerShare = hasDiscount ? seriesAPricePerShare * (1 - disc / 100) : seriesAPricePerShare
// In YC Post-Money SAFE, investor converts at the lower of Cap Price or Discount Price
let conversionPrice = capPricePerShare
let governingMechanism: 'cap' | 'discount' = 'cap'
if (hasDiscount && discountPricePerShare < capPricePerShare) {
conversionPrice = discountPricePerShare
governingMechanism = 'discount'
} else {
conversionPrice = capPricePerShare
governingMechanism = 'cap'
}
// Converted shares issued
const safeShares = conversionPrice > 0 ? Math.round(inv / conversionPrice) : 0
// Equity percentage calculation
const safeOwnershipPct = Math.min(100, Math.max(0, (safeShares / shares) * 100))
const founderShares = Math.max(0, shares - safeShares)
const founderOwnershipPct = Math.max(0, 100 - safeOwnershipPct)
// Effective discount achieved vs Series A price
const effectiveDiscountPct =
seriesAPricePerShare > 0
? Math.max(0, ((seriesAPricePerShare - conversionPrice) / seriesAPricePerShare) * 100)
: 0
// Implied Value of SAFE stake at Series A price
const impliedSeriesAValue = safeShares * seriesAPricePerShare
const valueGain = Math.max(0, impliedSeriesAValue - inv)
const paperRoiMultiple = inv > 0 ? impliedSeriesAValue / inv : 1
return {
seriesAPricePerShare,
capPricePerShare,
discountPricePerShare,
conversionPrice,
governingMechanism,
safeShares,
founderShares,
totalShares: shares,
safeOwnershipPct,
founderOwnershipPct,
effectiveDiscountPct,
impliedSeriesAValue,
valueGain,
paperRoiMultiple,
}
}, [investmentAmount, valuationCap, companyCapitalization, seriesAPreMoney, hasDiscount, discountRate])
// Sensitivity scenarios across different Series A pre-money valuations
const scenarioResults = React.useMemo(() => {
const inv = Math.max(1, investmentAmount)
const cap = Math.max(1, valuationCap)
const shares = Math.max(1, companyCapitalization)
const disc = hasDiscount ? Math.max(0, Math.min(99, discountRate)) : 0
return SCENARIO_VALUATIONS.map((scenarioValuation) => {
const seriesAPrice = scenarioValuation / shares
const capPrice = cap / shares
const discountPrice = hasDiscount ? seriesAPrice * (1 - disc / 100) : seriesAPrice
let convPrice = capPrice
let mechanism = 'Valuation Cap'
if (hasDiscount && discountPrice < capPrice) {
convPrice = discountPrice
mechanism = `Discount (${disc}%)`
}
const issuedShares = convPrice > 0 ? Math.round(inv / convPrice) : 0
const ownershipPct = (issuedShares / shares) * 100
const effectiveDiscount = seriesAPrice > 0 ? Math.max(0, ((seriesAPrice - convPrice) / seriesAPrice) * 100) : 0
const impliedValue = issuedShares * seriesAPrice
const isCurrentTarget = scenarioValuation === seriesAPreMoney
return {
valuation: scenarioValuation,
seriesAPrice,
convPrice,
mechanism,
issuedShares,
ownershipPct,
effectiveDiscount,
impliedValue,
isCurrentTarget,
}
})
}, [investmentAmount, valuationCap, companyCapitalization, hasDiscount, discountRate, seriesAPreMoney])
const copySummary = React.useCallback(() => {
const c = calculations
const text = `YC Post-Money SAFE Conversion Summary:
- Investment Amount: ${fmtCurrency(investmentAmount)}
- Valuation Cap: ${fmtCurrency(valuationCap)}
- Series A Target: ${fmtCurrency(seriesAPreMoney)} Pre-Money
- Investor Ownership: ${fmtPercent(c.safeOwnershipPct)} (${fmtNumber(c.safeShares)} shares)
- Conversion Price: ${fmtCurrency(c.conversionPrice)} / share (vs Series A ${fmtCurrency(c.seriesAPricePerShare)})
- Effective Discount: ${fmtPercent(c.effectiveDiscountPct)}
- Governing Term: ${c.governingMechanism === 'cap' ? 'Valuation Cap' : 'Discount Rate'}`
navigator.clipboard?.writeText(text)
setCopied(true)
setTimeout(() => {
setCopied(false)
}, 2000)
}, [calculations, investmentAmount, valuationCap, seriesAPreMoney])
return (
<div
data-slot="safe-note-calculator"
className={cn('mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8', className)}
>
{/* Header */}
<div className="flex flex-col items-center gap-4 text-center">
<Badge wrap variant="outline" className="gap-1.5 px-3 py-1 text-xs font-medium tracking-wider uppercase">
<Scale className="text-primary size-3.5" />
YC Post-Money SAFE v1.1 · Valuation Cap + Discount
</Badge>
<div className="space-y-2">
<h2 className="text-foreground text-2xl font-bold tracking-tight sm:text-3xl lg:text-4xl">
Y Combinator Post-Money SAFE Calculator
</h2>
<p className="text-muted-foreground mx-auto max-w-2xl text-sm sm:text-base">
Model founder dilution, investor ownership percentages, and conversion price per share.
</p>
</div>
{/* Preset Tabs */}
<div className="mt-2 flex w-full justify-center">
<Tabs value={selectedPreset} onValueChange={handlePresetChange} className="w-full sm:w-auto">
<TabsList variant="segmented" className="grid w-full grid-cols-2 sm:flex sm:w-auto">
<TabsTrigger value="seed-standard" className="gap-1.5">
<ShieldCheck className="size-3.5" />
Standard Seed
</TabsTrigger>
<TabsTrigger value="preseed-safe" className="gap-1.5">
<TrendingUp className="size-3.5" />
Pre-Seed SAFE
</TabsTrigger>
<TabsTrigger value="uncapped-discount" className="gap-1.5">
<BadgePercent className="size-3.5" />
Uncapped Disc
</TabsTrigger>
<TabsTrigger value="bridge-round" className="gap-1.5">
<Layers className="size-3.5" />
Growth Bridge
</TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
{/* 2-Column Calculator Layout */}
<div className="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-start">
{/* Left Input Card */}
<div className="space-y-6 lg:col-span-7">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<DollarSign className="text-primary size-5" />
SAFE Terms & Round Inputs
</CardTitle>
<CardDescription>
Configure investment size, valuation cap, optional discount rate, capitalization, and Series A targets.
</CardDescription>
</CardHeader>
<CardContent className="space-y-7">
{/* 1. Investment Amount */}
<div className="space-y-3.5">
<div className="flex items-center justify-between gap-4">
<div>
<span className="text-foreground text-sm font-medium">Investment Amount</span>
<p className="text-muted-foreground text-xs">Total cash invested into the SAFE.</p>
</div>
<div className="w-36 sm:w-44">
<Input
id="safe-investment-input"
type="number"
size="small"
min={25000}
max={10000000}
step={25000}
prefix="$"
value={investmentAmount}
onChange={(e) => setInvestmentAmount(Number(e.target.value) || 0)}
/>
</div>
</div>
<div className="pb-5">
<Slider
value={[investmentAmount]}
min={100000}
max={5000000}
step={25000}
marks={INVESTMENT_MARKS}
tooltip={(val) => `$${val.toLocaleString('en-US')}`}
onValueChange={(val) => setInvestmentAmount(val[0] ?? 0)}
/>
</div>
<div className="flex flex-wrap items-center gap-1.5 pt-1">
<span className="text-muted-foreground text-xs">Quick select:</span>
{[250000, 500000, 1000000, 1500000, 2000000, 3000000].map((amt) => (
<Button
key={amt}
variant="outline"
size="sm"
className="h-6 px-2 text-xs"
onClick={() => setInvestmentAmount(amt)}
>
${amt >= 1000000 ? `${(amt / 1000000).toFixed(amt % 1000000 === 0 ? 0 : 1)}M` : `${amt / 1000}K`}
</Button>
))}
</div>
</div>
<Separator />
{/* 2. Post-Money Valuation Cap */}
<div className="space-y-3.5">
<div className="flex items-center justify-between gap-4">
<div>
<span className="text-foreground text-sm font-medium">Post-Money Valuation Cap</span>
<p className="text-muted-foreground text-xs">Maximum valuation ceiling for conversion.</p>
</div>
<div className="w-36 sm:w-44">
<Input
id="safe-cap-input"
type="number"
size="small"
min={500000}
max={100000000}
step={500000}
prefix="$"
value={valuationCap}
onChange={(e) => setValuationCap(Number(e.target.value) || 0)}
/>
</div>
</div>
<div className="pb-5">
<Slider
value={[valuationCap]}
min={2000000}
max={50000000}
step={500000}
marks={VALUATION_CAP_MARKS}
tooltip={(val) => `$${val.toLocaleString('en-US')}`}
onValueChange={(val) => setValuationCap(val[0] ?? 0)}
/>
</div>
<div className="flex flex-wrap items-center gap-1.5 pt-1">
<span className="text-muted-foreground text-xs">Cap benchmarks:</span>
{[5000000, 8000000, 12000000, 15000000, 20000000, 30000000].map((cap) => (
<Button
key={cap}
variant="outline"
size="sm"
className="h-6 px-2 text-xs"
onClick={() => setValuationCap(cap)}
>
${(cap / 1000000).toFixed(0)}M
</Button>
))}
</div>
</div>
<Separator />
{/* 3. Discount Rate Input & Toggle */}
<div className="space-y-3.5">
<div className="flex items-center justify-between gap-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<span className="text-foreground text-sm font-medium">Discount Rate Clause</span>
{hasDiscount ? (
<Badge
wrap
variant="outline"
className="border-success/20 bg-success/10 text-success text-xs font-normal"
>
Active
</Badge>
) : (
<Badge wrap variant="outline" className="text-muted-foreground text-xs font-normal">
Cap Only
</Badge>
)}
</div>
<p className="text-muted-foreground text-xs">
Percentage discount on Series A price if cap is not exceeded.
</p>
</div>
<div className="flex flex-wrap items-center gap-3">
<Switch
checked={hasDiscount}
onCheckedChange={setHasDiscount}
aria-label="Toggle discount clause"
/>
{hasDiscount && (
<div className="w-24 sm:w-28">
<Input
id="safe-discount-input"
type="number"
size="small"
min={0}
max={50}
step={1}
suffix="%"
value={discountRate}
onChange={(e) => setDiscountRate(Number(e.target.value) || 0)}
/>
</div>
)}
</div>
</div>
{hasDiscount && (
<div className="space-y-3 pt-1">
<div className="pb-5">
<Slider
value={[discountRate]}
min={5}
max={35}
step={1}
marks={DISCOUNT_RATE_MARKS}
tooltip={(val) => `${val}% Discount`}
onValueChange={(val) => setDiscountRate(val[0] ?? 0)}
/>
</div>
<div className="flex flex-wrap items-center gap-1.5 pt-1">
<span className="text-muted-foreground text-xs">Standard rates:</span>
{[10, 15, 20, 25, 30].map((rate) => (
<Button
key={rate}
variant={discountRate === rate ? 'default' : 'outline'}
size="sm"
className="h-6 px-2 text-xs"
onClick={() => setDiscountRate(rate)}
>
{rate}%
</Button>
))}
</div>
</div>
)}
</div>
<Separator />
{/* 4. Company Existing Capitalization */}
<div className="space-y-3.5">
<div className="flex items-center justify-between gap-4">
<div>
<span className="text-foreground text-sm font-medium">Company Existing Capitalization</span>
<p className="text-muted-foreground text-xs">Total pre-conversion issued shares and option pool.</p>
</div>
<div className="w-36 sm:w-44">
<Input
id="safe-shares-input"
type="number"
size="small"
min={1000000}
max={100000000}
step={500000}
suffix="Shares"
value={companyCapitalization}
onChange={(e) => setCompanyCapitalization(Number(e.target.value) || 0)}
/>
</div>
</div>
<div className="flex flex-wrap items-center gap-1.5 pt-1">
<span className="text-muted-foreground text-xs">Common share counts:</span>
{[5000000, 8000000, 10000000, 12000000, 15000000].map((count) => (
<Button
key={count}
variant={companyCapitalization === count ? 'default' : 'outline'}
size="sm"
className="h-6 px-2 text-xs"
onClick={() => setCompanyCapitalization(count)}
>
{(count / 1000000).toFixed(0)}M Shares
</Button>
))}
</div>
</div>
<Separator />
{/* 5. Series A Pre-Money Target */}
<div className="space-y-3.5">
<div className="flex items-center justify-between gap-4">
<div>
<span className="text-foreground text-sm font-medium">Series A Pre-Money Target</span>
<p className="text-muted-foreground text-xs">Target qualified financing equity valuation.</p>
</div>
<div className="w-36 sm:w-44">
<Input
id="safe-series-a-input"
type="number"
size="small"
min={1000000}
max={200000000}
step={1000000}
prefix="$"
value={seriesAPreMoney}
onChange={(e) => setSeriesAPreMoney(Number(e.target.value) || 0)}
/>
</div>
</div>
<div className="pb-5">
<Slider
value={[seriesAPreMoney]}
min={5000000}
max={80000000}
step={1000000}
marks={SERIES_A_MARKS}
tooltip={(val) => `$${val.toLocaleString('en-US')}`}
onValueChange={(val) => setSeriesAPreMoney(val[0] ?? 0)}
/>
</div>
<div className="flex flex-wrap items-center gap-1.5 pt-1">
<span className="text-muted-foreground text-xs">Series A benchmarks:</span>
{[15000000, 20000000, 25000000, 35000000, 50000000, 75000000].map((target) => (
<Button
key={target}
variant="outline"
size="sm"
className="h-6 px-2 text-xs"
onClick={() => setSeriesAPreMoney(target)}
>
${(target / 1000000).toFixed(0)}M
</Button>
))}
</div>
</div>
</CardContent>
</Card>
</div>
{/* Right Results Card (Sticky on desktop) */}
<div className="lg:sticky lg:top-8 lg:col-span-5">
<Card className="border-border bg-card shadow-xs">
<CardHeader className="pb-4">
<div className="flex items-center justify-between">
<span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
Investor Ownership Stake
</span>
<Badge
variant="secondary"
className={
calculations.governingMechanism === 'cap'
? 'bg-primary/10 text-primary border-primary/20 text-xs font-semibold'
: 'border-success/20 bg-success/10 text-success text-xs font-semibold'
}
>
{calculations.governingMechanism === 'cap' ? 'Cap Governs' : 'Discount Governs'}
</Badge>
</div>
<div className="mt-4">
<div className="flex items-baseline gap-2">
<span className="text-foreground text-3xl font-bold tracking-tight tabular-nums sm:text-4xl">
{fmtPercent(calculations.safeOwnershipPct)}
</span>
<span className="text-muted-foreground text-sm font-medium">Post-SAFE Ownership</span>
</div>
<p className="text-muted-foreground mt-1 text-xs">
SAFE investor receives{' '}
<span className="text-foreground font-semibold tabular-nums">
{fmtNumber(calculations.safeShares)}
</span>{' '}
shares at conversion.
</p>
</div>
</CardHeader>
<CardContent className="space-y-5">
<Separator />
{/* Key Economics Metrics Grid */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<div className="bg-muted/40 rounded-lg border p-3">
<span className="text-muted-foreground block text-xs">SAFE Conversion Price</span>
<span className="text-foreground text-base font-bold tabular-nums">
{fmtCurrency(calculations.conversionPrice)}
</span>
<span className="text-muted-foreground block text-xs tabular-nums">
vs Series A {fmtCurrency(calculations.seriesAPricePerShare)}
</span>
</div>
<div className="bg-muted/40 rounded-lg border p-3">
<span className="text-muted-foreground block text-xs">Converted Shares Issued</span>
<span className="text-foreground text-base font-bold tabular-nums">
{fmtNumber(calculations.safeShares)}
</span>
<span className="text-muted-foreground block text-xs">Equity units</span>
</div>
<div className="bg-muted/40 rounded-lg border p-3">
<span className="text-muted-foreground block text-xs">Effective Discount</span>
<span className="text-success text-success text-base font-bold tabular-nums">
{fmtPercent(calculations.effectiveDiscountPct)}
</span>
<span className="text-muted-foreground block text-xs">Savings vs Series A</span>
</div>
<div className="bg-muted/40 rounded-lg border p-3">
<span className="text-muted-foreground block text-xs">Implied Series A Value</span>
<span className="text-foreground text-base font-bold tabular-nums">
{fmtCurrencyWhole(calculations.impliedSeriesAValue)}
</span>
<span className="text-success text-success block text-xs tabular-nums">
+{fmtCurrencyWhole(calculations.valueGain)} ({calculations.paperRoiMultiple.toFixed(2)}x)
</span>
</div>
</div>
<Separator />
{/* Visual Equity Distribution Bar */}
<div className="space-y-2.5">
<div className="flex items-center justify-between text-xs font-medium">
<span className="text-foreground">Founders vs. SAFE Investor</span>
<span className="text-muted-foreground tabular-nums">
{fmtPercent(calculations.founderOwnershipPct)} / {fmtPercent(calculations.safeOwnershipPct)}
</span>
</div>
<div className="bg-muted relative flex h-3 w-full overflow-hidden rounded-full shadow-inner">
<div
className="bg-primary h-full transition-[width] duration-300"
style={{ width: `${calculations.founderOwnershipPct}%` }}
/>
<div
className="bg-success h-full transition-[width] duration-300"
style={{ width: `${calculations.safeOwnershipPct}%` }}
/>
</div>
<div className="text-muted-foreground flex flex-col gap-1.5 text-xs sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-1.5">
<span className="bg-primary size-2 shrink-0 rounded-full" />
<span>
Founders: {fmtPercent(calculations.founderOwnershipPct)} ({fmtNumber(calculations.founderShares)}{' '}
sh)
</span>
</div>
<div className="flex items-center gap-1.5">
<span className="bg-success size-2 shrink-0 rounded-full" />
<span>
SAFE: {fmtPercent(calculations.safeOwnershipPct)} ({fmtNumber(calculations.safeShares)} sh)
</span>
</div>
</div>
</div>
<Separator />
{/* Post-Conversion Dilution Breakdown Table */}
<div className="space-y-2">
<span className="text-foreground text-xs font-semibold tracking-wider uppercase">
Post-Conversion Dilution Breakdown
</span>
<div className="overflow-hidden rounded-lg border">
<div className="overflow-x-auto">
<Table density="compact">
<TableHeader>
<TableRow>
<TableHead className="text-xs">Stakeholder</TableHead>
<TableHead className="text-right text-xs">Ownership</TableHead>
<TableHead className="text-right text-xs">Shares</TableHead>
<TableHead className="text-right text-xs">Implied Value</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="text-xs font-medium">Founders & Existing</TableCell>
<TableCell className="text-right text-xs font-medium tabular-nums">
{fmtPercent(calculations.founderOwnershipPct)}
</TableCell>
<TableCell className="text-right text-xs tabular-nums">
{fmtNumber(calculations.founderShares)}
</TableCell>
<TableCell className="text-right text-xs tabular-nums">
{fmtCurrencyWhole(calculations.founderShares * calculations.seriesAPricePerShare)}
</TableCell>
</TableRow>
<TableRow>
<TableCell className="text-success text-xs font-medium">SAFE Seed Investors</TableCell>
<TableCell className="text-success text-success text-right text-xs font-bold tabular-nums">
{fmtPercent(calculations.safeOwnershipPct)}
</TableCell>
<TableCell className="text-right text-xs font-semibold tabular-nums">
{fmtNumber(calculations.safeShares)}
</TableCell>
<TableCell className="text-right text-xs font-semibold tabular-nums">
{fmtCurrencyWhole(calculations.impliedSeriesAValue)}
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell className="text-xs font-bold">Total Post-SAFE</TableCell>
<TableCell className="text-right text-xs font-bold tabular-nums">100.00%</TableCell>
<TableCell className="text-right text-xs font-bold tabular-nums">
{fmtNumber(calculations.totalShares)}
</TableCell>
<TableCell className="text-right text-xs font-bold tabular-nums">
{fmtCurrencyWhole(seriesAPreMoney)}
</TableCell>
</TableRow>
</TableFooter>
</Table>
</div>
</div>
</div>
<Separator />
{/* Key SAFE Takeaways Checklist */}
<ul className="text-muted-foreground space-y-2 text-xs">
<li className="flex items-center gap-2">
<CheckCircle2 className="text-primary size-3.5 shrink-0" />
<span>Post-money cap fixes ownership before Series A round</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle2 className="text-primary size-3.5 shrink-0" />
<span>Converts to Preferred Stock with investor liquidation preference</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle2 className="text-primary size-3.5 shrink-0" />
<span>No debt maturity dates, no interest accrual compounding</span>
</li>
</ul>
</CardContent>
<CardFooter className="flex flex-col gap-2.5 pt-2">
<Button className="w-full gap-2 font-semibold shadow-xs" size="lg" onClick={copySummary}>
{copied ? <Check className="text-success size-4" /> : <Copy className="size-4" />}
{copied ? 'Copied Summary to Clipboard!' : 'Copy Valuation Breakdown'}
</Button>
<Button variant="outline" className="w-full gap-2" size="default">
<FileSpreadsheet className="size-4" />
Export Cap Table Summary
</Button>
</CardFooter>
</Card>
</div>
</div>
{/* Bottom Section: Series A Valuation Sensitivity Table */}
<Card>
<CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="text-primary size-5" />
Series A Qualified Financing Sensitivity Matrix
</CardTitle>
<CardDescription>
Simulate how SAFE investor ownership percentage, share price, and conversion mechanism respond across
different next-round valuations.
</CardDescription>
</div>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<Table density="cozy">
<TableHeader>
<TableRow>
<TableHead>Series A Valuation</TableHead>
<TableHead className="text-right">Series A Price</TableHead>
<TableHead className="text-right">SAFE Conversion Price</TableHead>
<TableHead>Governing Term</TableHead>
<TableHead className="text-right">Shares Issued</TableHead>
<TableHead className="text-right">SAFE Ownership</TableHead>
<TableHead className="text-right">Effective Savings</TableHead>
<TableHead className="text-right">Implied Stake Value</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{scenarioResults.map((row) => (
<TableRow key={row.valuation} className={row.isCurrentTarget ? 'bg-primary/5 font-medium' : ''}>
<TableCell className="font-medium">
<div className="flex items-center gap-2">
<span className="tabular-nums">{fmtCurrencyWhole(row.valuation)}</span>
{row.isCurrentTarget && (
<Badge wrap variant="default" className="h-5 px-1.5 text-xs">
Current Target
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-right tabular-nums">{fmtCurrency(row.seriesAPrice)}</TableCell>
<TableCell className="text-foreground text-right font-semibold tabular-nums">
{fmtCurrency(row.convPrice)}
</TableCell>
<TableCell>
<Badge
variant="outline"
className={
row.mechanism === 'Valuation Cap'
? 'border-primary/20 bg-primary/10 text-primary text-xs'
: 'border-success/20 bg-success/10 text-success text-xs'
}
>
{row.mechanism}
</Badge>
</TableCell>
<TableCell className="text-right tabular-nums">{fmtNumber(row.issuedShares)}</TableCell>
<TableCell className="text-foreground text-right font-bold tabular-nums">
{fmtPercent(row.ownershipPct)}
</TableCell>
<TableCell className="text-success text-success text-right font-medium tabular-nums">
{fmtPercent(row.effectiveDiscount)}
</TableCell>
<TableCell className="text-right font-semibold tabular-nums">
{fmtCurrencyWhole(row.impliedValue)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
{/* Post-Money SAFE Legal & Governance Guide */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<Card className="p-4">
<div className="flex items-start gap-3">
<div className="bg-primary/10 text-primary mt-0.5 rounded-md p-2">
<ShieldCheck className="size-4" />
</div>
<div className="space-y-1">
<h4 className="text-foreground text-sm font-semibold">Post-Money Cap Protection</h4>
<p className="text-muted-foreground text-xs leading-relaxed">
Acts as an ownership percentage guarantee for seed investors prior to the priced round, regardless of
subsequent SAFE issuances.
</p>
</div>
</div>
</Card>
<Card className="p-4">
<div className="flex items-start gap-3">
<div className="bg-success/10 text-success mt-0.5 rounded-md p-2">
<Percent className="size-4" />
</div>
<div className="space-y-1">
<h4 className="text-foreground text-sm font-semibold">Discount Rate Safety Net</h4>
<p className="text-muted-foreground text-xs leading-relaxed">
Protects investors if Series A prices below the valuation cap, guaranteeing a 15%–25% discount off the
institutional share price.
</p>
</div>
</div>
</Card>
<Card className="p-4">
<div className="flex items-start gap-3">
<div className="bg-warning/10 text-warning mt-0.5 rounded-md p-2">
<PieChart className="size-4" />
</div>
<div className="space-y-1">
<h4 className="text-foreground text-sm font-semibold">Founder Dilution Transparency</h4>
<p className="text-muted-foreground text-xs leading-relaxed">
YC v1.1 post-money SAFEs dilute only founders and common shareholders, eliminating pre-money SAFE
circular dilution surprises.
</p>
</div>
</div>
</Card>
</div>
</div>
)
}
export default SafeNoteCalculator
Raw manifest:https://uipkge.dev/r/react/safe-note-calculator.json
