Before Cache Reset

<%# Markup for the before-cache reset demo.
    On turbo:before-cache the controller returns transient UI to its initial state so a
    Back-button restore is not frozen mid-interaction. This Playground has no real Turbo
    navigation, so demo.js fakes the turbo:before-cache event. Open the details, type in
    the field, and show the toast — then "Simulate before-cache" resets them all. %>
<div class="reset-demo" data-controller="stimeo--reset-before-cache">
  <p class="reset-demo__note"><%= t("components.reset_before_cache.demo.note") %></p>

  <details class="reset-demo__details" data-reset-attr="open">
    <summary><%= t("components.reset_before_cache.demo.details_summary") %></summary>
    <p><%= t("components.reset_before_cache.demo.details_body") %></p>
  </details>

  <label class="reset-demo__field">
    <span><%= t("components.reset_before_cache.demo.input_label") %></span>
    <input type="text" class="demo-input" data-reset-value
           placeholder="<%= t("components.reset_before_cache.demo.input_placeholder") %>">
  </label>

  <div class="reset-demo__toast" data-reset-demo="toast" data-reset-hidden hidden role="status">
    <%= t("components.reset_before_cache.demo.toast_text") %>
  </div>

  <div class="reset-demo__controls">
    <button type="button" class="demo-trigger" data-reset-demo="show-toast">
      <%= t("components.reset_before_cache.demo.show_toast") %>
    </button>
    <button type="button" class="demo-trigger" data-reset-demo="simulate">
      <%= t("components.reset_before_cache.demo.simulate") %>
    </button>
  </div>
</div>

/*
 * Presentation-only styles for the before-cache reset demo.
 * The library only mutates the marked elements on turbo:before-cache (removing
 * attributes, restoring fields to their authored state, re-hiding, removing
 * nodes); this CSS owns layout.
 */

.reset-demo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 32rem;
}

.reset-demo__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.reset-demo__details {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.reset-demo__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.reset-demo__toast {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--leaf-500);
  border-radius: 0.5rem;
  background: var(--leaf-50);
  color: var(--leaf-500);
  font-size: 0.9rem;
}

.reset-demo__toast[hidden] {
  display: none;
}

.reset-demo__controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

// Consumer-side JS for the before-cache reset demo (demo-only).
// Real Turbo navigation fires turbo:before-cache when caching a snapshot; this
// Playground has none, so the "Simulate" button dispatches that event to show the
// reset. The "Show toast" button reveals the transient toast the reset re-hides.
const toast = document.querySelector("[data-reset-demo='toast']");
const showToast = document.querySelector("[data-reset-demo='show-toast']");
const simulate = document.querySelector("[data-reset-demo='simulate']");

if (showToast && toast) {
  showToast.addEventListener("click", () => {
    toast.hidden = false;
  });
}

if (simulate) {
  simulate.addEventListener("click", () => {
    document.dispatchEvent(new Event("turbo:before-cache"));
  });
}

// The controller emits this once it has reset the snapshot's transient UI.
document.addEventListener("stimeo--reset-before-cache:reset", () => {
  console.log("[reset-before-cache] transient UI reset before caching");
});