Direct Upload Progress

<%# Direct upload demo: there is no server, so demo.js fires the ActiveStorage
    direct-upload:* events to drive the rows. The library clones the row template per
    file, updates aria-valuenow / data-upload-state / the --stimeo-upload-progress
    var, and announces completion into the status live region. This demo styles the
    bars; the sr-only status carries the announcement. %>
<div class="direct-upload-demo">
  <button type="button" class="demo-trigger" data-direct-upload-start>
    <%= t("components.direct_upload.demo.start") %>
  </button>
  <div
    class="direct-upload"
    data-controller="stimeo--direct-upload"
    data-stimeo--direct-upload-done-label-value="<%= t('components.direct_upload.demo.done') %>"
    data-stimeo--direct-upload-error-label-value="<%= t('components.direct_upload.demo.error') %>">
    <div class="direct-upload__list" data-stimeo--direct-upload-target="list"></div>
    <template data-stimeo--direct-upload-target="row">
      <div class="direct-upload__row" role="progressbar" aria-valuemin="0" aria-valuemax="100">
        <span class="direct-upload__name" data-field="name"></span>
        <span class="direct-upload__track"><span class="direct-upload__bar"></span></span>
        <span class="direct-upload__percent" data-field="percent"></span>
      </div>
    </template>
    <span class="visually-hidden" data-stimeo--direct-upload-target="status"
          aria-live="polite"></span>
  </div>
</div>

/*
 * Presentation-only styles for the direct-upload demo.
 * The library sets aria-valuenow, data-upload-state, and the
 * --stimeo-upload-progress custom property; this CSS draws the bar from that var
 * and colors the done / error states.
 */

.direct-upload-demo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 30rem;
}

.direct-upload__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.direct-upload__row {
  display: grid;
  grid-template-columns: 8rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
}

.direct-upload__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.direct-upload__track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.direct-upload__bar {
  display: block;
  height: 100%;
  width: var(--stimeo-upload-progress, 0%);
  background: var(--accent);
  transition: width 0.2s ease;
}

.direct-upload__row[data-upload-state="done"] .direct-upload__bar {
  background: var(--leaf-500);
}

.direct-upload__row[data-upload-state="error"] .direct-upload__bar {
  background: var(--danger-500);
}

.direct-upload__percent {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

// Direct upload demo (consumer-side JS).
//
// There is no server here, so this fires the ActiveStorage direct-upload:* events
// the controller subscribes to — initialize, progress (stepping to 100), then end —
// to drive the progress rows. Real apps get these from @rails/activestorage.
document.querySelectorAll(".direct-upload-demo").forEach((root) => {
  const startButton = root.querySelector("[data-direct-upload-start]");
  if (!startButton) return;

  const fire = (type, detail) => {
    document.dispatchEvent(new CustomEvent(type, { detail, bubbles: true }));
  };

  let run = 0;
  startButton.addEventListener("click", () => {
    run += 1;
    const files = [`photo-${run}.jpg`, `notes-${run}.pdf`];
    files.forEach((name, index) => {
      const id = `${run}-${index}`;
      fire("direct-upload:initialize", { id, file: { name } });
      let percent = 0;
      const timer = window.setInterval(() => {
        percent += 20;
        fire("direct-upload:progress", { id, progress: percent });
        if (percent >= 100) {
          window.clearInterval(timer);
          fire("direct-upload:end", { id });
        }
      }, 300);
    });
  });
});