phase-5: code maintenance

2026-06-04 16:28:21 -04:00
parent 57190f2945
commit 96e2840b9b
10 changed files with 525 additions and 479 deletions
@@ -0,0 +1,69 @@
+<script>
+  import { fmtPE } from '$lib/utils.js';
+  let { ctx } = $props();
+
+  // Flat list of chips so the template stays declarative
+  const chips = $derived([
+    { label: '10Y',      value: ctx.riskFreeRate?.toFixed(2) + '%' },
+    { label: 'VIX',      value: ctx.vixLevel?.toFixed(1) },
+    { label: 'S&P',      value: ctx.sp500Price?.toLocaleString() },
+    { label: 'S&P P/E',  value: fmtPE(ctx.benchmarks?.marketPE?.toFixed(1)) },
+    { label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE?.toFixed(1)) },
+    { label: 'REIT Yld', value: ctx.benchmarks?.reitYield?.toFixed(2) + '%' },
+    { label: 'IG Sprd',  value: ctx.benchmarks?.igSpread?.toFixed(2) + '%' },
+    { label: 'Rates',    value: ctx.rateRegime,      regime: ctx.rateRegime },
+    { label: 'Vol',      value: ctx.volatilityRegime, regime: ctx.volatilityRegime },
+  ]);
+</script>
+
+<div class="ctx-strip">
+  {#each chips as chip}
+    <div class="ctx-chip">
+      <span class="ctx-label">{chip.label}</span>
+      <span class="ctx-val" class:ctx-regime={!!chip.regime} data-regime={chip.regime ?? ''}>
+        {chip.value ?? '—'}
+      </span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .ctx-strip {
+    display: flex;
+    gap: 1px;
+    background: var(--border);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    margin-bottom: 20px;
+  }
+
+  .ctx-chip {
+    flex: 1;
+    min-width: 70px;
+    background: var(--bg-base);
+    padding: 10px var(--space-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .ctx-label {
+    font-size: var(--fs-2xs);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-dimmer);
+  }
+
+  .ctx-val {
+    font-size: var(--fs-lg);
+    font-weight: 700;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ctx-regime[data-regime='HIGH']   { color: var(--red);       }
+  .ctx-regime[data-regime='NORMAL'] { color: var(--text-muted); }
+  .ctx-regime[data-regime='LOW']    { color: var(--green);      }
+</style>