as const — catch the missing case, not the bug report

<div class="pg">
    <h1 class="pg-title">🔒 <code>as const</code>: caught at the compiler, not in review</h1>
    <p class="pg-sub">
      One switch, flip on <code>as const</code>. Then dispatch the action whose <code>case</code> is
      missing from the reducer below and watch whether TypeScript notices — <em>before</em> the click,
      not after.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <label class="toggle">
        <input type="checkbox" id="constToggle" /><span class="switch"></span>
        <span>action creators return <code>as const</code></span>
      </label>
      <p class="hint">Off: each action creator returns a bare object literal. On: every one ends in <code>as const</code>.</p>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn" data-dispatch="add">Dispatch: add('mug')</button>
        <button class="btn" data-dispatch="remove">Dispatch: remove('mug')</button>
        <button class="btn primary" data-dispatch="reset">Dispatch: reset()</button>
        <button class="btn ghost" id="resetDemo">↺ Reset demo</button>
      </div>
      <p class="hint">The reducer below only handles <code>'add'</code> and <code>'remove'</code> — <code>'reset'</code>'s case was lost in a rebase, same as the post.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What TypeScript infers</div>
      <div class="typeline" id="typeline"></div>
      <p class="hint" id="typeCap"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What happens when you dispatch</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — try "Dispatch: reset()" first.</span>
      </div>
      <p class="panel-label" style="margin-top:16px;margin-bottom:6px">Cart state</p>
      <div class="cart" id="cart"><span class="empty">empty — add something</span></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The trade: the same switch freezes the array</div>
      <p class="hint">Same toggle. <code>METHODS</code> is declared <code>['GET', 'POST']</code> or <code>['GET', 'POST'] as const</code>.</p>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn" id="pushBtn">Try: METHODS.push('PUT')</button>
      </div>
      <div class="methods" id="methods"></div>
      <div class="status" id="pushStatus" style="margin-top:12px">
        <span class="dot info" id="pushDot"></span><span id="pushStatusText">Ready.</span>
      </div>
    </div>
  </div>

preview

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