satisfies — validate without widening

<div class="wrap">
    <h1>🎮 <code>satisfies</code>: validate without widening</h1>
    <p class="sub">
      One route config, three ways to declare it. Flip between them and watch what TypeScript
      <em>keeps</em> vs <em>throws away</em>. (Types are checked at compile time — this simulates it.)
    </p>

<div class="panel">
      <h2>1 · How is it declared?</h2>
      <div class="seg" role="group" aria-label="Declaration style">
        <button data-mode="bare"      aria-pressed="false">bare<br><span class="mono">= { … }</span></button>
        <button data-mode="annot"     aria-pressed="true">annotation<br><span class="mono">: Record&lt;…&gt;</span></button>
        <button data-mode="satisfies" aria-pressed="false">satisfies<br><span class="mono">satisfies …</span></button>
      </div>

<div class="row">
        <button class="act" id="breakBtn" data-on="false" aria-pressed="false">💥 Break it (typo a path)</button>
        <div class="spacer"></div>
        <button class="act" id="resetBtn">↺ Reset</button>
      </div>
    </div>

<div class="panel">
      <h2>2 · What TypeScript gives you back</h2>
      <div class="res">

<div class="card">
          <div class="hd">Resolved type — click a property to inspect</div>
          <div class="pills" role="group" aria-label="Property to inspect">
            <button class="pill" data-prop="home"     aria-pressed="true">NAV.home</button>
            <button class="pill" data-prop="about"    aria-pressed="false">NAV.about</button>
            <button class="pill" data-prop="settings" aria-pressed="false">NAV.settings</button>
          </div>
          <div class="typeline" id="valType"></div>
          <div class="cap" id="valCap"></div>
        </div>

<div class="card">
          <div class="hd">Keys &amp; autocomplete <span id="keysType" class="mono"></span></div>
          <div class="ac">
            <span class="prefix">NAV.</span><span id="acLabel"></span>
            <div class="menu" id="acMenu"></div>
          </div>
          <div class="cap" id="keysCap"></div>
        </div>

<div class="card">
          <div class="hd">Validation</div>
          <div class="valline" id="valid"></div>
          <div class="cap" id="validCap"></div>
        </div>

</div>
    </div>

<div class="status" id="status"></div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.