Vue provide/inject mutation trap — playground

<div class="pg">
  <div class="pg-title">🎮 Who can write to the cart?</div>
  <p class="pg-sub">
    A real Vue <code>reactive()</code> cart is <code>provide()</code>d from the top. A
    <code>&lt;PromoBanner&gt;</code> three levels deep tries to add a free item by mutating
    the injected value directly, instead of calling the sanctioned <code>addItem()</code>.
    Switch modes to see what <code>readonly()</code> actually changes.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> How is the cart provided?</div>
      <div class="seg" role="group" aria-label="Provide mode">
        <button id="mode-unprotected" aria-pressed="true">Unprotected — provide(cart)</button>
        <button id="mode-protected" aria-pressed="false">Protected — provide(readonly(cart))</button>
      </div>
      <div class="tree">
        <b>&lt;CartProvider&gt;</b> <span class="arrow">provides cart (+ addItem) →</span>
        <b>&lt;Layout&gt;</b> <span class="arrow">→</span>
        <b>&lt;PromoBanner&gt;</b> <span class="arrow">injects cart</span>
      </div>
      <div class="btn-row">
        <button class="btn bad" id="btn-sneak">PromoBanner: sneak in a free item</button>
        <button class="btn primary" id="btn-addItem">Cart: add item via addItem()</button>
        <button class="btn ghost" id="btn-reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Cart state (real Vue reactive state)</div>
      <div class="cart-box" id="cart-box">
        <div class="row"><span>(empty)</span><span></span></div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — try the sneaky mutation in each mode.</span>
      </div>
      <p class="hint" id="hint">
        In <b>Unprotected</b> mode, <code>PromoBanner</code>'s direct push just works — nothing
        tells you it happened. In <b>Protected</b> mode, the same line hits Vue's real
        <code>readonly()</code> proxy and is blocked.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What actually happened</div>
      <p class="hint" style="margin-top:0">
        Captures real <code>console.warn</code> output from the Vue runtime when it fires —
        this isn't hand-written warning text.
      </p>
      <div class="log small-log" id="log" aria-live="polite"></div>
    </div>

</div>
</div>

preview

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