React form Actions — pending state playground

<div class="pg">
    <h1 class="pg-title">🎮 Pending State: Hand-Rolled vs. React Actions</h1>
    <p class="pg-sub">
      Same fake save button, two implementations. Trigger a failure and watch what
      each one does to its own "disabled" flag — then flip on the throw trap and
      watch the real <code>useActionState</code> form get caught by a real Error Boundary.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="failToggle" /><span class="switch"></span>
          <span>Simulate a failing request</span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="throwToggle" /><span class="switch"></span>
          <span>React panel: throw instead of returning the error</span>
        </label>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn ghost sm" id="resetAll">Reset both panels</button>
      </div>
      <p class="hint">Both panels share the same "simulate a failing request" flag. Submit each side separately to compare.</p>
    </div>

<div class="cols">
      <div class="panel">
        <div class="col-title">Hand-rolled <code>useState</code> <span class="tag">the way most of us wrote it</span></div>
        <div class="btn-row">
          <input id="manualName" placeholder="name" value="Ada" style="background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 9px;color:inherit;font:inherit" />
          <button class="btn primary" id="manualSubmit">Save</button>
        </div>
        <div class="status" id="manualStatus" style="margin-top:12px">
          <span class="dot info" id="manualDot"></span><span id="manualStatusText">Ready.</span>
        </div>
        <div class="log" id="manualLog" style="margin-top:10px; max-height:120px; overflow:auto"></div>
      </div>

<div class="panel">
        <div class="col-title"><code>useActionState</code> <span class="tag">real React 19</span></div>
        <div id="reactRoot"></div>
        <div class="log" id="reactLog" style="margin-top:10px; max-height:120px; overflow:auto"></div>
      </div>
    </div>

<div class="banner info show" id="cdnBanner">
      Loading React 19.2 from esm.sh… if this banner doesn't go away, the CDN is
      blocked from wherever you're viewing this — the manual panel on the left
      still works, since it's plain JavaScript.
    </div>
  </div>

preview

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