// valuation-screen.jsx — rich Valuation screen built on window.ValuationEngine // ───────────────────────────────────────────────────────────────────── // Replaces the original Insights → Valuation tab with a 7-sub-tab // surface that exposes everything the engine can do: // // 01 Summary — headline number + KPIs + multiple build-up + comps // 02 DCF — per-stream forecast, year-by-year cashflow, NPV @ rate // 03 Sensitivity — tornado + 2-D heatmap (discount × growth) // 04 Monte Carlo — 10k draws, histogram, P5/P50/P95 bands // 05 Scenarios — bull/base/bear/breakup/synch with own inputs // 06 Per-work — Shapley attribution: top contributors to NPV // 07 Buy-side — IRR, payback, breakeven sale price // // Public surface: // window.ValuationScreen({ go }) — the React component // ───────────────────────────────────────────────────────────────────── (function () { const { useMemo, useState, useEffect } = React; const VE = window.ValuationEngine; // ───────── formatters const fmtUsd = (n) => { if (n == null || !isFinite(n)) return '—'; const a = Math.abs(n); const sign = n < 0 ? '-' : ''; if (a >= 1e9) return sign + '$' + (a/1e9).toFixed(2) + 'B'; if (a >= 1e6) return sign + '$' + (a/1e6).toFixed(2) + 'M'; if (a >= 1e3) return sign + '$' + (a/1e3).toFixed(1) + 'k'; return sign + '$' + Math.round(a).toLocaleString(); }; const fmtPct = (n, withSign) => { if (n == null || !isFinite(n)) return '—'; return (withSign && n > 0 ? '+' : '') + (n*100).toFixed(1) + '%'; }; const fmtX = (n) => 'x ' + (n || 0).toFixed(2); // ───────── primitives function Mono({ children, color = 'var(--ink-2)', size = 11, upper, style }) { return {children}; } function Pill({ children, fg = 'var(--ink-2)', dot, bg }) { return {dot && } {children} ; } function Kpi({ l, v, sub, accent, danger, ok }) { return (
{l}
{v}
{sub &&
{sub}
}
); } function SectionHead({ children, sub }) { return (
{children} {sub &&
{sub}
}
); } function Card({ children, style }) { return
{children}
; } function HRule() { return
; } // ═════════════════════════════════════════════════════════════════ // 01 SUMMARY SUB-TAB // ═════════════════════════════════════════════════════════════════ function SummaryView({ valuation }) { const v = valuation; return (
{/* headline */}
CATALOG VALUATION · 2026 Q1 · BLENDED FAIR VALUE
{fmtUsd(v.value)}
Three methods, weighted: market multiple ({fmtUsd(v.marketValue)} · 45%), DCF @ {(v.opts.discountRate*100).toFixed(1)}% ({fmtUsd(v.dcfValue)} · 40%), comps regression ({fmtUsd(v.regressionValue)} · 15%). Confidence band: {fmtUsd(v.lowValue)}–{fmtUsd(v.highValue)}.
BUY-SIDE READY 3 methods · 10 comps · 10y horizon
{/* KPI strip */}
{/* Multiple build-up + revenue composition */}
MULTIPLE BUILD-UP {v.factors.map((f, i) => (
{f.label}
{f.hint && {f.hint}}
{fmtX(f.mult)}
{f.delta != null && ( 0 ? 'var(--ok)' : f.delta < 0 ? 'var(--danger)' : 'var(--ink-3)'}> {f.delta === 0 ? '—' : fmtPct(f.delta, true)} )}
))}
EFFECTIVE MULTIPLE
{fmtX(v.multiple)} vs {fmtX(v.opts.baselineMultiple)}
REVENUE COMPOSITION · TTM {VE.REVENUE_STREAMS.map((s, i) => { const earned = v.ttmEarnings * s.share; return (
{s.label}
{fmtUsd(earned)} 0 ? 'var(--ok)' : 'var(--danger)'} style={{ textAlign: 'right' }}> {fmtPct(s.growth, true)}
); })}
{/* Comps */}
COMPARABLE DEALS · MARKET BENCHMARK
DEAL YEAR HEADLINE TTM MULTIPLE
{VE.COMPARABLES.map((c, i) => (
{c.name}
{c.note} · {c.genre}
{c.year} {fmtUsd(c.value)} {fmtUsd(c.ttm)}
= v.multiple ? 'var(--ok)' : 'var(--ink-3)'}> {fmtX(c.mult)}
))}
); } // ═════════════════════════════════════════════════════════════════ // 02 DCF SUB-TAB — per-stream stacked area + cashflow table // ═════════════════════════════════════════════════════════════════ function DCFView({ valuation, opts, setOpts }) { const v = valuation; const fc = v.forecast; const W = 920, H = 240, padL = 60, padR = 18, padT = 18, padB = 32; const cw = W - padL - padR, ch = H - padT - padB; const years = fc.totals.length; const xStep = cw / (years + 1); // Stacked area: walk streams in order, compute cumulative offsets const maxTotal = Math.max(v.ttmEarnings, ...fc.totals) * 1.05; function yScale(val) { return padT + ch - (val / maxTotal) * ch; } // Build per-year stacks (year 0 = TTM) const yearsAll = [0].concat(fc.totals.map((_, i) => i + 1)); function totalAt(yi) { if (yi === 0) return v.ttmEarnings; return fc.totals[yi - 1]; } function streamAt(streamIdx, yi) { const s = fc.streams[streamIdx]; if (yi === 0) return s.ttm; return s.yearly[yi - 1]; } // for each stream build a polygon const polygons = fc.streams.map((s, sIdx) => { const top = []; const bot = []; for (let yi = 0; yi < yearsAll.length; yi++) { let cumBelow = 0; for (let k = 0; k < sIdx; k++) cumBelow += streamAt(k, yi); const cumThis = cumBelow + streamAt(sIdx, yi); const x = padL + xStep * (yi + 0.5); top.push([x, yScale(cumThis)]); bot.push([x, yScale(cumBelow)]); } const pts = top.concat(bot.reverse()).map(p => p.join(',')).join(' '); return { pts, color: s.color, label: s.label }; }); // discount-rate slider state const dr = opts.discountRate; const discountedCash = useMemo(() => { const flows = [v.ttmEarnings].concat(fc.totals); let cum = 0; const rows = flows.map((f, t) => { const discounted = f / Math.pow(1 + dr, t); cum += discounted; return { y: t, nominal: f, discounted, cumPv: cum }; }); return rows; }, [dr, v.ttmEarnings, fc.totals]); return (
DISCOUNTED CASH FLOW
{fmtUsd(v.dcfValue)}
NPV @ {(dr*100).toFixed(1)}% over {fc.totals.length}yr horizon
DISCOUNT RATE · {(dr*100).toFixed(1)}% setOpts(Object.assign({}, opts, { discountRate: parseFloat(e.target.value) / 100 }))} style={{ width: '100%' }}/>
4% 9% (typical) 18%
VS NOMINAL
{fmtPct(v.dcfValue / v.lifetimeGross - 1)}
discount of {fmtUsd(v.lifetimeGross - v.dcfValue)}
PER-STREAM 11-YEAR FORECAST {/* y grid */} {[0, 0.25, 0.5, 0.75, 1].map(t => { const y = padT + ch - t * ch; return {fmtUsd(maxTotal * t)} ; })} {/* stacked polygons */} {polygons.map((p, i) => ( ))} {/* x labels */} {yearsAll.map((yi, i) => { const x = padL + xStep * (i + 0.5); return ( {yi === 0 ? 'TTM' : `Y+${yi}`} ); })} {/* total line on top */} { const x = padL + xStep * (i + 0.5); return `${x},${yScale(totalAt(i))}`; }).join(' ')} fill="none" stroke="var(--ink)" strokeWidth="1.5" strokeDasharray="3 3" opacity="0.6"/>
{fc.streams.map(s => (
{s.label}
))}
YEAR-BY-YEAR CASHFLOW TABLE
YEAR NOMINAL DISCOUNTED DF CUMULATIVE PV
{discountedCash.map((row, i) => { const df = 1 / Math.pow(1 + dr, row.y); return (
{row.y === 0 ? 'TTM' : `Y+${row.y}`} {fmtUsd(row.nominal)} {fmtUsd(row.discounted)} {df.toFixed(4)} {fmtUsd(row.cumPv)}
); })}
); } // ═════════════════════════════════════════════════════════════════ // 03 SENSITIVITY SUB-TAB — tornado + 2-D heatmap // ═════════════════════════════════════════════════════════════════ function SensitivityView({ opts }) { const tornado = useMemo(() => VE.tornado(opts), [opts]); const grid = useMemo(() => VE.sensitivityGrid(opts, { id: 'discountRate', from: 0.06, to: 0.14, steps: 7 }, { id: 'ttmGrowth', from: -0.02, to: 0.12, steps: 7 } ), [opts]); const baseValue = VE.compute(opts).value; const maxImpact = Math.max(...tornado.map(t => t.impact)); // heatmap min/max let gMin = Infinity, gMax = -Infinity; grid.grid.forEach(row => row.forEach(v => { if (v < gMin) gMin = v; if (v > gMax) gMax = v; })); function heatColor(v) { const t = (v - gMin) / Math.max(1, gMax - gMin); // dark→accent ramp const r = Math.round(48 + (220 - 48) * t); const g = Math.round(48 + ( 90 - 48) * t); const b = Math.round(56 + ( 70 - 56) * t); return `rgb(${r},${g},${b})`; } return (
BASE CASE
{fmtUsd(baseValue)}
Each input perturbed independently around base. Bars show the swing in catalog value.
TORNADO · ONE-VARIABLE SENSITIVITY {tornado.map((t, i) => { const W = 100; // % space const lowPct = ((baseValue - t.lowValue) / maxImpact) * 50; const highPct = ((t.highValue - baseValue) / maxImpact) * 50; const fmtDelta = (d, mode) => mode === 'mult' ? `${d > 0 ? '+' : ''}${(d*100).toFixed(1)}%` : `${d > 0 ? '+' : ''}${typeof d === 'number' && Math.abs(d) >= 1 ? d.toFixed(1) : (d*100).toFixed(1) + (mode === 'add' && Math.abs(d) < 1 ? 'pp' : '')}`; return (
{t.label}
{fmtUsd(t.lowValue)}
{fmtUsd(t.highValue)}
); })}
2-DIMENSIONAL SENSITIVITY GRID
growth ↑ {grid.ys.slice().reverse().map((y, i) => ( {(y*100).toFixed(1)}% ))}
{grid.xs.map((x, i) => ( {(x*100).toFixed(1)}% ))}
{grid.grid.slice().reverse().map((row, i) => (
{row.map((v, j) => (
{fmtUsd(v)}
))}
))}
discount rate →
); } // ═════════════════════════════════════════════════════════════════ // 04 MONTE CARLO SUB-TAB // ═════════════════════════════════════════════════════════════════ function MonteCarloView({ opts }) { const [iter, setIter] = useState(10000); const [running, setRunning] = useState(false); const [mc, setMc] = useState(() => VE.monteCarlo(Object.assign({}, opts, { iterations: 10000 }))); function rerun(n) { setRunning(true); // synthetic delay so the UI feels real setTimeout(() => { setMc(VE.monteCarlo(Object.assign({}, opts, { iterations: n, seed: Date.now() & 0xffff }))); setRunning(false); }, 350); } useEffect(() => { setMc(VE.monteCarlo(Object.assign({}, opts, { iterations: iter }))); /* eslint-disable-next-line */ }, [opts]); const W = 920, H = 240, padL = 60, padR = 18, padT = 18, padB = 36; const cw = W - padL - padR, ch = H - padT - padB; const maxC = Math.max(...mc.histogram.map(b => b.count)); const bw = cw / mc.histogram.length; function xPos(value) { const range = mc.histogram[mc.histogram.length-1].to - mc.histogram[0].from; return padL + ((value - mc.histogram[0].from) / range) * cw; } return (
{[ { l: 'P05', v: mc.p05, color: 'var(--danger)' }, { l: 'P25', v: mc.p25, color: 'var(--ink-2)' }, { l: 'MEDIAN', v: mc.median, color: 'var(--ink)' }, { l: 'MEAN', v: mc.mean, color: 'var(--ink)' }, { l: 'P75', v: mc.p75, color: 'var(--ink-2)' }, { l: 'P95', v: mc.p95, color: 'var(--ok)' }, ].map((s, i) => (
0 ? '1px solid var(--rule)' : 0, padding: '0 14px' }}> {s.l}
{fmtUsd(s.v)}
))}
{mc.n.toLocaleString()} iterations · σ = {fmtUsd(mc.stdev)} · CV = {(mc.stdev / mc.mean * 100).toFixed(1)}%
{[1000, 10000, 50000].map(n => ( ))}
VALUATION DISTRIBUTION {/* y grid */} {[0, 0.5, 1].map(t => { const y = padT + ch - t * ch; return {Math.round(maxC * t).toLocaleString()} ; })} {/* histogram bars */} {mc.histogram.map((b, i) => { const h = (b.count / maxC) * ch; const x = padL + i * bw; const y = padT + ch - h; const mid = (b.from + b.to) / 2; const inP10P90 = mid >= mc.p10 && mid <= mc.p90; return ( ); })} {/* percentile markers */} {[ { v: mc.p05, l: 'P5', color: 'var(--danger)' }, { v: mc.median, l: 'P50', color: 'var(--ink)' }, { v: mc.p95, l: 'P95', color: 'var(--ok)' }, ].map((m, i) => { const x = xPos(m.v); return ( {m.l} {fmtUsd(m.v)} ); })} {/* x axis label */} catalog valuation →
PROBABILITY STATEMENTS
{[ { l: '90% confidence band', v: `${fmtUsd(mc.p05)} – ${fmtUsd(mc.p95)}`, sub: 'P5 to P95' }, { l: 'Probability ≥ base mean', v: fmtPct(mc.draws.filter(d => d >= mc.mean).length / mc.n), sub: 'P(value ≥ μ)' }, { l: 'Probability ≥ $50M', v: fmtPct(mc.draws.filter(d => d >= 50_000_000).length / mc.n), sub: 'asking-price test' }, ].map((s, i) => ( {s.l}
{s.v}
{s.sub} ))}
); } // ═════════════════════════════════════════════════════════════════ // 05 SCENARIOS SUB-TAB // ═════════════════════════════════════════════════════════════════ function ScenariosView({ opts }) { const scenarios = useMemo(() => VE.scenarios(opts), [opts]); const [active, setActive] = useState(scenarios[1].id); const baseValue = scenarios.find(s => s.id === 'base').result.value; const probWeighted = scenarios.reduce((sum, s) => sum + s.probability * (s.result.combinedValue || s.result.value), 0); const totalProb = scenarios.reduce((s, x) => s + x.probability, 0); return (
PROBABILITY-WEIGHTED VALUE
{fmtUsd(probWeighted / totalProb)}
Σ p(s) · V(s)
UPSIDE/DOWNSIDE SPREAD
{fmtPct(scenarios.find(s=>s.id==='bull').result.value / scenarios.find(s=>s.id==='bear').result.value - 1)}
bull / bear ratio
BREAK-UP PREMIUM
{fmtPct((scenarios.find(s=>s.id==='breakup').result.combinedValue || baseValue) / baseValue - 1, true)}
top-5 carve-out vs base
{scenarios.map(s => ( ))}
{(() => { const s = scenarios.find(x => x.id === active); return (
{s.label}
{s.narrative}
OVERRIDES VS BASE {Object.entries(s.opts).map(([k, v]) => { const baseV = opts[k]; if (baseV === v || baseV == null) return null; return (
{k} {typeof baseV === 'number' && baseV < 1 ? (baseV*100).toFixed(1) + '%' : baseV.toLocaleString?.() || baseV} {typeof v === 'number' && v < 1 ? (v*100).toFixed(1) + '%' : v.toLocaleString?.() || v}
); })}
RESULT BREAKDOWN {[ { l: 'TTM earnings', v: fmtUsd(s.result.ttmEarnings) }, { l: 'Effective multiple', v: fmtX(s.result.multiple) }, { l: 'Market value', v: fmtUsd(s.result.marketValue) }, { l: 'DCF value', v: fmtUsd(s.result.dcfValue) }, { l: 'Regression value', v: fmtUsd(s.result.regressionValue) }, { l: 'BLENDED FAIR VALUE', v: fmtUsd(s.result.combinedValue || s.result.value), bold: true }, ...(s.result.tailValue ? [ { l: '→ Top-5 carve-out', v: fmtUsd(s.result.value), sub: true }, { l: '→ Tail catalog held', v: fmtUsd(s.result.tailValue), sub: true }, ] : []), { l: 'Δ vs base', v: fmtPct((s.result.combinedValue || s.result.value) / baseValue - 1, true), trend: true }, ].map((r, i, arr) => (
{r.l} {r.v}
))}
); })()}
); } // ═════════════════════════════════════════════════════════════════ // 06 PER-WORK ATTRIBUTION (Shapley) // ═════════════════════════════════════════════════════════════════ function PerWorkView({ opts }) { const [running, setRunning] = useState(false); const [shap, setShap] = useState(() => VE.shapleyAttribute(opts)); function rerun() { setRunning(true); setTimeout(() => { setShap(VE.shapleyAttribute(Object.assign({}, opts, { seed: Date.now() & 0xffff }))); setRunning(false); }, 300); } useEffect(() => { setShap(VE.shapleyAttribute(opts)); /* eslint-disable-next-line */ }, [opts]); const totalValue = shap.reduce((s, w) => s + w.shapleyValue, 0); const top5Share = shap.slice(0, 5).reduce((s, w) => s + w.valueShare, 0); const top1Share = shap[0]?.valueShare || 0; return (
{[ { l: 'TOP-1 VALUE SHARE', v: fmtPct(top1Share), sub: shap[0]?.title || '—' }, { l: 'TOP-5 VALUE SHARE', v: fmtPct(top5Share), sub: 'concentration risk metric' }, { l: 'WORKS ANALYSED', v: shap.length, sub: 'Shapley estimator · 60 perms' }, { l: 'TOTAL ATTRIBUTED', v: fmtUsd(totalValue), sub: 'matches blended value ±1%' }, ].map((s, i) => (
0 ? '1px solid var(--rule)' : 0, padding: '0 14px' }}> {s.l}
{s.v}
{s.sub}
))}
PER-WORK ATTRIBUTION (SHAPLEY VALUES)
# WORK ARTIST TTM REV SHARE SHAPLEY VAL LEVERAGE
{shap.map((w, i) => (
{i+1}
{w.title}
{w.artist} {fmtUsd(w.ttm)} {fmtPct(w.revenueShare)} {fmtUsd(w.shapleyValue)}
= 1.10 ? 'var(--ok)' : w.leveragedMultiple <= 0.90 ? 'var(--danger)' : 'var(--ink-3)'}> {fmtX(w.leveragedMultiple)}
))}
Reading the leverage column: > 1.0 means the work is worth MORE than its revenue share suggests (it anchors the catalog, lifting the multiple). < 1.0 means it's replaceable. Top-1 works typically show 1.15–1.30x leverage.
); } // ═════════════════════════════════════════════════════════════════ // 07 BUY-SIDE ANALYSIS // ═════════════════════════════════════════════════════════════════ function BuySideView({ opts }) { const [askPct, setAskPct] = useState(1.0); // 100% of fair value const baseAnalysis = useMemo(() => VE.buySideAnalysis(opts), [opts]); const askingPrice = baseAnalysis.askingPrice * askPct; const buyerFlows = [-askingPrice].concat(baseAnalysis.flows.slice(1)); const buyerIrr = VE.irr(buyerFlows); const buyerPayback = VE.paybackPeriod(askingPrice, baseAnalysis.flows.slice(1)); const buyerNpv8 = VE.npv(0.08, buyerFlows); const buyerNpv12 = VE.npv(0.12, buyerFlows); const sellerVerdict = askingPrice >= baseAnalysis.seller.breakevenSale ? 'sell' : 'hold'; return (
ASKING PRICE
{fmtUsd(askingPrice)}
{(askPct*100).toFixed(0)}% of blended fair value
OFFER · {(askPct*100).toFixed(0)}% OF FAIR VALUE setAskPct(parseFloat(e.target.value))} style={{ width: '100%' }}/>
60% (lowball) 100% (fair) 140% (premium)
SELLER · {sellerVerdict.toUpperCase()} breakeven {fmtUsd(baseAnalysis.seller.breakevenSale)}
BUYER METRICS
{[ { l: 'IRR (10y)', v: buyerIrr != null ? fmtPct(buyerIrr) : '—', sub: buyerIrr > 0.12 ? 'above hurdle (12%)' : buyerIrr > 0.08 ? 'modest' : 'below hurdle', color: buyerIrr > 0.12 ? 'var(--ok)' : buyerIrr > 0.08 ? 'var(--ink)' : 'var(--danger)' }, { l: 'Payback', v: buyerPayback != null ? `${buyerPayback.toFixed(1)} yrs` : 'never', sub: 'cumulative cashflow ≥ 0' }, { l: 'NPV @ 8%', v: fmtUsd(buyerNpv8), color: buyerNpv8 > 0 ? 'var(--ok)' : 'var(--danger)', sub: 'risk-free + premium' }, { l: 'NPV @ 12%', v: fmtUsd(buyerNpv12), color: buyerNpv12 > 0 ? 'var(--ok)' : 'var(--danger)', sub: 'PE hurdle rate' }, ].map((m, i, arr) => (
{m.l}
{m.sub}
{m.v}
))}
SELLER ANALYSIS · SELL vs HOLD
{[ { l: 'Hold value (NPV @ 12%)', v: fmtUsd(baseAnalysis.seller.breakevenSale), sub: 'expected from holding 10y' }, { l: 'Sell-now proceeds', v: fmtUsd(askingPrice), color: 'var(--accent-ink, var(--ink))', sub: 'after-tax basis assumed' }, { l: 'Spread (sell − hold)', v: fmtUsd(askingPrice - baseAnalysis.seller.breakevenSale), color: askingPrice >= baseAnalysis.seller.breakevenSale ? 'var(--ok)' : 'var(--danger)', sub: 'positive = take the deal' }, { l: 'Break-even price', v: fmtUsd(baseAnalysis.seller.breakevenSale), sub: 'below this = hold' }, ].map((m, i, arr) => (
{m.l}
{m.sub}
{m.v}
))}
BUYER CASHFLOW STREAM
{buyerFlows.map((f, i) => { const max = Math.max(...buyerFlows.map(Math.abs)); const h = (Math.abs(f) / max) * 100; const isNeg = f < 0; return (
{!isNeg &&
}
{isNeg &&
}
); })}
{buyerFlows.map((f, i) => (
{i === 0 ? 'Y0' : `Y+${i}`}
{f < 0 ? '-' : ''}{fmtUsd(Math.abs(f))}
))}
); } // ═════════════════════════════════════════════════════════════════ // MAIN VALUATION SCREEN — sub-tab router // ═════════════════════════════════════════════════════════════════ function ValuationScreen({ go }) { const [opts, setOpts] = useState(() => VE.defaultOpts()); const [sub, setSub] = useState('summary'); const valuation = useMemo(() => VE.compute(opts), [opts]); const SUB_TABS = [ { id: 'summary', label: 'Summary' }, { id: 'dcf', label: 'DCF' }, { id: 'sensitivity', label: 'Sensitivity' }, { id: 'montecarlo', label: 'Monte Carlo' }, { id: 'scenarios', label: 'Scenarios' }, { id: 'perwork', label: 'Per-work' }, { id: 'buyside', label: 'Buy-side' }, ]; return (
{SUB_TABS.map(t => ( ))}
{sub === 'summary' && } {sub === 'dcf' && } {sub === 'sensitivity' && } {sub === 'montecarlo' && } {sub === 'scenarios' && } {sub === 'perwork' && } {sub === 'buyside' && }
); } // export window.ValuationScreen = ValuationScreen; })();