// ═══════════════════════════════════════════════════════════════════════════
// Three instruments, one per research question. Each is drawn from the
// mathematics of its own question, so they share a colour law (the ramp =
// cushion) but not a layout.
//
// PolicyDg f_BGZ = κ̄(n)·d/b — exposure against cushion; evidence n bends
// the slope. "Double prudence": less cushion or less data → less risk.
// TailDg Two generalised-Pareto tails that agree inside the data and part
// beyond it. Sizing to a quantile past the data edge inherits the
// tail-index error; the error grows with depth, not with n.
// CeilingDg The private-markets share a drawdown mandate can carry, against
// what static rules imply. Calls drain the liquid sleeve faster
// than distributions refill it.
// ═══════════════════════════════════════════════════════════════════════════
const useSize = (ref) => {
const [s, setS] = React.useState({ w: 0, h: 0 });
React.useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
const ro = new ResizeObserver(([e]) => {
const r = e.contentRect;
setS({ w: Math.round(r.width), h: Math.round(r.height) });
});
ro.observe(el);
return () => ro.disconnect();
}, []);
return s;
};
const Range = ({ label, value, min, max, step, onChange, display, color }) => {
const p = ((value - min) / (max - min)) * 100;
return (
);
};
const Read = ({ items }) => (
{items.map(([k, v, c]) => (
{k}
{v}
))}
);
// ── 1 · Policy ──────────────────────────────────────────────────────────────
const PolicyDg = ({ area }) => {
const box = React.useRef(null);
const { w, h } = useSize(box);
const stops = useRamp();
const [logN, setLogN] = React.useState(Math.log10(60));
const n = Math.round(10 ** logN);
const K = 2.4, NP = 140;
const kBar = K * n / (n + NP);
const id = React.useId().replace(/:/g, '');
const L = 10, R = w - 12, T = 16, B = h - 30;
const X = (d) => L + d * (R - L);
const Y = (f) => B - (f / 2.8) * (B - T);
return (
{area.formulaLabel}{area.formula}
{w > 0 && (
)}
);
};
// ── 2 · Tail ────────────────────────────────────────────────────────────────
const TAIL = { XI: 0.40, XI_HAT: 0.15, BETA: 1, S0: 1e-3 };
const xTrue = (p) => (TAIL.BETA / TAIL.XI) * (p ** -TAIL.XI - 1);
const X0 = xTrue(TAIL.S0);
const B0 = TAIL.BETA + TAIL.XI * X0; // threshold stability of the GPD
const xFit = (p) => (p >= TAIL.S0 ? xTrue(p) : X0 + (B0 / TAIL.XI_HAT) * ((p / TAIL.S0) ** -TAIL.XI_HAT - 1));
const sTrue = (x) => (1 + TAIL.XI * x / TAIL.BETA) ** (-1 / TAIL.XI);
const sFit = (x) => (x <= X0 ? sTrue(x) : TAIL.S0 * (1 + TAIL.XI_HAT * (x - X0) / B0) ** (-1 / TAIL.XI_HAT));
const TailDg = ({ area }) => {
const box = React.useRef(null);
const { w, h } = useSize(box);
const stops = useRamp();
const [lp, setLp] = React.useState(5); // −log10 p
const p = 10 ** -lp;
const depth = Math.max(0, Math.log(TAIL.S0 / p));
const over = xTrue(p) / xFit(p);
const narrow = w < 440;
const L = 10, R = w - 12, T = 14, B = h - 30;
const lx0 = 0, lx1 = 3; // log10 x
const ly0 = 0, ly1 = -6.3; // log10 S
const X = (x) => L + ((Math.log10(Math.max(1, x)) - lx0) / (lx1 - lx0)) * (R - L);
const Y = (s) => T + ((Math.log10(s) - ly0) / (ly1 - ly0)) * (B - T);
const curve = (S) => {
let d = '';
for (let i = 0; i <= 120; i++) {
const x = 10 ** (lx0 + (i / 120) * (lx1 - lx0));
const s = S(x);
if (s < 10 ** ly1) break;
d += (i ? 'L' : 'M') + X(x).toFixed(1) + ' ' + Y(s).toFixed(1);
}
return d;
};
const c = Math.max(0, 1 - depth / 8); // deeper = less cushion
const col = rampAt(stops, c);
return (
Breach probability at a 25% allocation: {m['Breach @ 25%'] || '24.7%'}. Calls (above) drain the liquid sleeve faster than distributions (below) refill it.