stimeo-ui 0.6.0 → 0.7.0

data/dist/controllers/direct_upload_controller.js

@@ -2,6 +2,52 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/direct_upload_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -58,101 +104,165 @@ var SafeTimeout = class extends TimerRegistry {
 // src/controllers/direct_upload_controller.ts
 var REMOVE_DELAY = 4e3;
 var DirectUploadController = class extends Controller {
-  static targets = ["list", "row", "status"];
+  static targets = ["list", "row"];
   static values = {
-    announce: { type: Boolean, default: true },
     removeOnDone: { type: Boolean, default: false },
-    doneLabel: { type: String, default: "" },
-    errorLabel: { type: String, default: "" },
+    announceDoneText: { type: String, default: "" },
+    announceErrorText: { type: String, default: "" },
     scope: { type: String, default: "" }
   };
   static events = ["progress", "done", "error"];
   #timeouts = new SafeTimeout();
   #rows = /* @__PURE__ */ new Map();
+  #beforeCache = new BeforeCacheReset(() => this.#reset());
+  /** The validated `scope` selector; a broken declaration falls back to `""`. */
+  #scopeSelector = "";
   #onInitialize = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#rowFor(detail.id, detail.file?.name ?? "");
+    this.#rowFor(detail.id, this.#name(detail));
   };
   #onProgress = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#updateProgress(this.#key(detail.id), Math.round(detail.progress ?? 0));
+    this.#updateProgress(this.#key(detail.id), detail.progress ?? 0, this.#name(detail));
   };
   #onError = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#fail(this.#key(detail.id), detail.error ?? "");
+    const rendered = this.#fail(this.#key(detail.id), detail.error ?? "", this.#name(detail));
+    if (rendered) event.preventDefault();
   };
   #onEnd = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#complete(this.#key(detail.id), detail.file?.name ?? "");
+    this.#complete(this.#key(detail.id), this.#name(detail));
   };
   connect() {
     document.addEventListener("direct-upload:initialize", this.#onInitialize);
     document.addEventListener("direct-upload:progress", this.#onProgress);
     document.addEventListener("direct-upload:error", this.#onError);
     document.addEventListener("direct-upload:end", this.#onEnd);
+    this.#beforeCache.activate();
+    this.#rescheduleRemovals();
   }
   disconnect() {
     document.removeEventListener("direct-upload:initialize", this.#onInitialize);
     document.removeEventListener("direct-upload:progress", this.#onProgress);
     document.removeEventListener("direct-upload:error", this.#onError);
     document.removeEventListener("direct-upload:end", this.#onEnd);
+    this.#beforeCache.deactivate();
     this.#timeouts.clearAll();
-    this.#rows.clear();
+  }
+  /** Validates `scope` once so the per-event path never parses or throws. */
+  scopeValueChanged() {
+    const selector = this.scopeValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#scopeSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#scopeSelector = "";
   }
   /** Updates a row's progress and the aggregate, emitting `progress`. */
-  #updateProgress(id, percent) {
-    const row = this.#rowFor(id);
-    if (row === null) return;
-    const clamped = Math.max(0, Math.min(100, percent));
-    row.setAttribute("aria-valuenow", String(clamped));
-    row.setAttribute("aria-valuetext", `${clamped}%`);
-    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
-    this.#setField(row, "percent", `${clamped}%`);
+  #updateProgress(id, percent, name) {
+    const row = this.#rowFor(id, name);
+    if (row === null || this.#isSettled(row)) return;
+    const clamped = this.#applyProgress(row, percent);
     this.#syncAggregate();
     this.dispatch("progress", { detail: { id, percent: clamped } });
   }
-  /** Marks a row done, announces it, and emits `done`. */
-  #complete(id, name = "") {
+  /** Marks a not-yet-settled row done at 100%, announces it, and emits `done`. */
+  #complete(id, name) {
     const row = this.#rowFor(id, name);
-    if (row === null) return;
+    if (row === null || this.#isSettled(row)) return;
     row.setAttribute("data-upload-state", "done");
-    this.#announce(this.doneLabelValue, row);
+    this.#applyProgress(row, 100);
+    this.#syncAggregate();
+    this.#announce(this.announceDoneTextValue, name, row);
     this.dispatch("done", { detail: { id } });
     if (this.removeOnDoneValue) {
       this.#timeouts.set(() => this.#removeRow(id), REMOVE_DELAY);
     }
   }
-  /** Marks a row failed, announces it, and emits `error`. */
-  #fail(id, error) {
-    const row = this.#rowFor(id);
-    if (row === null) return;
+  /**
+   * Marks a not-yet-settled row failed, announces it, and emits `error`.
+   * Returns whether the failure is rendered by this widget (used to decide the
+   * `direct-upload:error` default), which also holds when the row already
+   * displays an earlier failure.
+   */
+  #fail(id, error, name) {
+    const row = this.#rowFor(id, name);
+    if (row === null) return false;
+    if (this.#isSettled(row)) return row.getAttribute("data-upload-state") === "error";
     row.setAttribute("data-upload-state", "error");
-    this.#announce(this.errorLabelValue, row);
+    this.#announce(this.announceErrorTextValue, name, row);
     this.dispatch("error", { detail: { id, error } });
+    return true;
   }
-  /** Returns an existing row or clones one from the template. */
+  /** Whether the row reached a terminal state; settled rows are never rewritten. */
+  #isSettled(row) {
+    const state = row.getAttribute("data-upload-state");
+    return state === "done" || state === "error";
+  }
+  /** Re-arms `removeOnDone` for completed rows after a reconnect. */
+  #rescheduleRemovals() {
+    if (!this.removeOnDoneValue) return;
+    this.#prune();
+    for (const [id, row] of this.#rows) {
+      if (row.getAttribute("data-upload-state") === "done") {
+        this.#timeouts.set(() => this.#removeRow(id), REMOVE_DELAY);
+      }
+    }
+  }
+  /** Returns the live row for `id`, creating (and labeling) one on first sight. */
   #rowFor(id, name) {
     const key = this.#key(id);
     const existing = this.#rows.get(key);
-    if (existing !== void 0) return existing;
+    if (existing !== void 0) {
+      if (this.#tracksRow(existing)) {
+        this.#applyName(existing, name);
+        return existing;
+      }
+      existing.remove();
+      this.#rows.delete(key);
+    }
     if (!this.hasRowTarget || !this.hasListTarget) return null;
     const clone = this.rowTarget.content.firstElementChild?.cloneNode(true);
     if (!(clone instanceof HTMLElement)) return null;
-    if (name !== void 0 && name.length > 0) {
-      this.#setField(clone, "name", name);
-      clone.setAttribute("aria-label", name);
-    }
-    clone.setAttribute("aria-valuenow", "0");
+    this.#applyName(clone, name);
     clone.setAttribute("data-upload-state", "uploading");
-    clone.style.setProperty("--stimeo--upload-progress", "0%");
+    this.#applyProgress(clone, 0);
     this.listTarget.appendChild(clone);
     this.#rows.set(key, clone);
+    this.#syncAggregate();
     return clone;
   }
+  /**
+   * Writes the event's file name into `[data-field="name"]` and, unless the row
+   * already carries a non-blank `aria-label` — authored on the template or
+   * applied by an earlier event — makes it the accessible name too. The visible
+   * name never depends on the label: an authored label keeps its wording while
+   * the field still shows which file this row tracks.
+   */
+  #applyName(row, name) {
+    if (name.length === 0) return;
+    this.#setField(row, "name", name);
+    if ((row.getAttribute("aria-label") ?? "").trim().length > 0) return;
+    row.setAttribute("aria-label", name);
+  }
+  /** Writes one progress value to every per-row hook; returns the clamped percent. */
+  #applyProgress(row, percent) {
+    const clamped = Math.max(0, Math.min(100, Math.round(percent)));
+    row.setAttribute("aria-valuenow", String(clamped));
+    row.setAttribute("aria-valuetext", `${clamped}%`);
+    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
+    this.#setField(row, "percent", `${clamped}%`);
+    return clamped;
+  }
   #removeRow(id) {
     const row = this.#rows.get(id);
     if (row === void 0) return;
@@ -160,10 +270,15 @@ var DirectUploadController = class extends Controller {
     this.#rows.delete(id);
     this.#syncAggregate();
   }
-  /** Reflects the average progress across rows on the controller element. */
+  /**
+   * Reflects the average progress across live rows on the controller element,
+   * withdrawing both hooks once no rows remain.
+   */
   #syncAggregate() {
+    this.#prune();
     if (this.#rows.size === 0) {
       this.element.removeAttribute("data-upload-progress");
+      this.element.style.removeProperty("--stimeo--upload-progress");
       return;
     }
     let total = 0;
@@ -174,11 +289,48 @@ var DirectUploadController = class extends Controller {
     this.element.setAttribute("data-upload-progress", String(overall));
     this.element.style.setProperty("--stimeo--upload-progress", `${overall}%`);
   }
-  /** Writes a consumer label (with `%{name}` substituted) to the status region. */
-  #announce(label, row) {
-    if (!this.announceValue || !this.hasStatusTarget || label.length === 0) return;
-    const name = this.#field(row, "name")?.textContent ?? "";
-    this.statusTarget.textContent = label.replace("%{name}", name);
+  /**
+   * Whether a bookkept row is still this widget's live UI: connected, and — when
+   * a `list` target is present — inside the *current* one, so re-pointing the
+   * target attribute at a new element retires rows kept alive in the old list.
+   */
+  #tracksRow(row) {
+    if (!row.isConnected) return false;
+    return !this.hasListTarget || this.listTarget.contains(row);
+  }
+  /**
+   * Retires rows that left the live UI (list swap, external removal). A retired
+   * clone is removed outright — generated rows only ever live under the current
+   * `list`, so the before-cache rewind never has an untracked leftover to miss.
+   */
+  #prune() {
+    for (const [id, row] of this.#rows) {
+      if (this.#tracksRow(row)) continue;
+      row.remove();
+      this.#rows.delete(id);
+    }
+  }
+  /**
+   * Returns the widget to its pre-upload state just before Turbo caches the
+   * page, so the snapshot never replays rows for uploads that cannot resume.
+   */
+  #reset() {
+    for (const row of this.#rows.values()) row.remove();
+    this.#rows.clear();
+    this.#timeouts.clearAll();
+    this.#syncAggregate();
+  }
+  /**
+   * Sends one consumer-worded message to the page's shared announcer. `{name}`
+   * resolves to the row's displayed name first — the event that settles an
+   * upload may omit the file although an earlier event already named the row —
+   * then the event's own name, then the accessible name (which an authored
+   * label owns, so it is the last resort, not the primary source).
+   */
+  #announce(template, name, row) {
+    const stored = this.#field(row, "name")?.textContent ?? "";
+    const label = stored.length > 0 ? stored : name.length > 0 ? name : row.getAttribute("aria-label") ?? "";
+    announce(fillTemplate(template, { name: label }));
   }
   #field(row, name) {
     return row.querySelector(`[data-field="${name}"]`);
@@ -190,17 +342,21 @@ var DirectUploadController = class extends Controller {
   #detail(event) {
     return event.detail ?? {};
   }
+  /** The file name every ActiveStorage `direct-upload:*` event carries. */
+  #name(detail) {
+    return detail.file?.name ?? "";
+  }
   /**
    * Whether an event belongs to this controller. With `scope` set, only events
    * whose target (the file input) sits inside an element matching `scope` are
-   * handled, so several upload widgets on one page do not cross-populate. Resolved
-   * with `closest()` from the target itself, so the chatty `progress` stream never
-   * pays a document-wide query. Empty `scope` handles all.
+   * handled, so several upload widgets on one page do not cross-populate.
+   * Resolved with `closest()` from the target itself, so the chatty `progress`
+   * stream never pays a document-wide query. Empty `scope` handles all.
    */
   #inScope(event) {
-    if (this.scopeValue.length === 0) return true;
+    if (this.#scopeSelector.length === 0) return true;
     const target = event.target;
-    return target instanceof Element && target.closest(this.scopeValue) !== null;
+    return target instanceof Element && target.closest(this.#scopeSelector) !== null;
   }
   #key(id) {
     return String(id ?? "");

data/dist/controllers/dirty_form_controller.js

@@ -1,60 +1,220 @@
 import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/dirty_form_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/dirty_form_controller.ts
+var visitCoordinators = /* @__PURE__ */ new WeakMap();
+var TurboVisitCoordinator = class {
+  #document;
+  #participants = /* @__PURE__ */ new Set();
+  #onBeforeVisit = (event) => {
+    let blocked = event.defaultPrevented;
+    let message;
+    for (const participant of this.#participantsInDomOrder()) {
+      if (!participant.form.isConnected) continue;
+      const decision = participant.evaluate(event);
+      blocked ||= event.defaultPrevented;
+      if (decision === null) continue;
+      if (decision.kind === "block") {
+        blocked = true;
+      } else {
+        message ??= decision.message;
+      }
+    }
+    if (blocked) {
+      event.preventDefault();
+      return;
+    }
+    if (message === void 0) return;
+    if (!this.#document.defaultView?.confirm(message)) event.preventDefault();
+  };
+  constructor(document) {
+    this.#document = document;
+  }
+  add(participant) {
+    if (this.#participants.size === 0) {
+      this.#document.addEventListener("turbo:before-visit", this.#onBeforeVisit);
+    }
+    this.#participants.add(participant);
+  }
+  /** Removes a participant and reports whether the coordinator became empty. */
+  remove(participant) {
+    this.#participants.delete(participant);
+    if (this.#participants.size > 0) return false;
+    this.#document.removeEventListener("turbo:before-visit", this.#onBeforeVisit);
+    return true;
+  }
+  #participantsInDomOrder() {
+    return Array.from(this.#participants).filter(
+      (participant) => participant.form.isConnected && participant.form.ownerDocument === this.#document
+    ).sort((left, right) => {
+      const position = left.form.compareDocumentPosition(right.form);
+      return Number(Boolean(position & Node.DOCUMENT_POSITION_PRECEDING)) - Number(Boolean(position & Node.DOCUMENT_POSITION_FOLLOWING));
+    });
+  }
+};
+function registerVisitParticipant(document, participant) {
+  const coordinator = visitCoordinators.get(document) ?? new TurboVisitCoordinator(document);
+  visitCoordinators.set(document, coordinator);
+  coordinator.add(participant);
+  return () => {
+    if (coordinator.remove(participant)) visitCoordinators.delete(document);
+  };
+}
 var DirtyFormController = class extends Controller {
   static values = {
     message: { type: String, default: "You have unsaved changes that will be lost." },
     confirmBridge: { type: Boolean, default: false }
   };
-  static actions = ["markClean"];
+  static actions = ["markClean", "acceptRestore"];
   static events = ["dirty", "guard"];
   #baseline = "";
   #dirty = false;
   #beforeunloadBound = false;
-  /** True between a form `submit` and its `turbo:submit-end`, suppressing the guard. */
+  #timeouts = new SafeTimeout();
+  /** Whether the active submission still represents the form's current values. */
   #submitting = false;
+  #submitAttempt = null;
+  #submittedBaseline = null;
+  #activeSubmission = null;
+  #unregisterVisit = null;
   #onFieldChange = () => {
     this.#submitting = false;
     this.#evaluate();
   };
-  #onSubmit = () => {
+  #onSubmit = (event) => {
+    const attempt = { event, snapshot: this.#serialize() };
+    this.#submitAttempt = attempt;
     this.#submitting = true;
+    this.#timeouts.set(() => {
+      if (this.#submitAttempt !== attempt) return;
+      this.#submitting = false;
+    }, 0);
   };
-  #onBeforeVisit = (event) => {
-    this.#guardVisit(event);
+  #onFormData = () => {
+    if (this.#submitAttempt === null) return;
+    this.#submitAttempt.snapshot = this.#serialize();
+  };
+  #onSubmitStart = (event) => {
+    const detail = event.detail;
+    this.#activeSubmission = detail?.formSubmission ?? event;
+    this.#submittedBaseline = this.#submitAttempt?.snapshot ?? this.#serialize();
+    this.#submitAttempt = null;
+    this.#submitting = this.#serialize() === this.#submittedBaseline;
   };
   #onSubmitEnd = (event) => {
+    const detail = event.detail;
+    if (detail?.formSubmission !== void 0 && (this.#activeSubmission === null || detail.formSubmission !== this.#activeSubmission)) {
+      return;
+    }
+    const submittedBaseline = this.#submittedBaseline;
     this.#submitting = false;
-    const success = event.detail?.success;
-    if (success !== false) this.markClean();
+    this.#submittedBaseline = null;
+    this.#activeSubmission = null;
+    if (detail?.success === false) return;
+    if (submittedBaseline === null) {
+      this.markClean();
+      return;
+    }
+    this.#baseline = submittedBaseline;
+    this.#evaluate();
   };
   #onBeforeUnload = (event) => {
-    if (!this.#dirty || this.#submitting) return;
+    if (!this.#dirty || this.#guardSuppressed()) return;
     event.preventDefault();
     event.returnValue = this.messageValue;
   };
   connect() {
+    this.#resetSubmission();
     this.#baseline = this.#serialize();
+    this.#setDirty(false);
     this.element.removeAttribute("data-dirty");
     this.element.addEventListener("input", this.#onFieldChange);
     this.element.addEventListener("change", this.#onFieldChange);
     this.element.addEventListener("submit", this.#onSubmit);
+    this.element.addEventListener("formdata", this.#onFormData);
+    this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
     this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
-    document.addEventListener("turbo:before-visit", this.#onBeforeVisit);
+    this.#unregisterVisit = registerVisitParticipant(this.element.ownerDocument, {
+      form: this.element,
+      evaluate: (event) => this.#evaluateVisit(event)
+    });
   }
   disconnect() {
     this.element.removeEventListener("input", this.#onFieldChange);
     this.element.removeEventListener("change", this.#onFieldChange);
     this.element.removeEventListener("submit", this.#onSubmit);
+    this.element.removeEventListener("formdata", this.#onFormData);
+    this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
     this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
-    document.removeEventListener("turbo:before-visit", this.#onBeforeVisit);
+    this.#unregisterVisit?.();
+    this.#unregisterVisit = null;
     this.#unbindBeforeUnload();
+    this.#resetSubmission();
   }
   /** Re-baselines to the current values and clears the dirty state (e.g. after a save). */
   markClean() {
     this.#baseline = this.#serialize();
     this.#setDirty(false);
   }
+  /** Adopts restored values without erasing an already-dirty user revision. */
+  acceptRestore() {
+    if (this.#dirty) return;
+    this.markClean();
+  }
   /** Recomputes dirty against the baseline and flips state when it changes. */
   #evaluate() {
     this.#setDirty(this.#serialize() !== this.#baseline);
@@ -71,21 +231,14 @@ var DirtyFormController = class extends Controller {
     }
     this.dispatch("dirty", { detail: { dirty } });
   }
-  /** Guards a Turbo visit while dirty: consumer cancel → confirmBridge → confirm. */
-  #guardVisit(event) {
-    if (!this.#dirty || this.#submitting) return;
+  /** Evaluates this form for the document-level Turbo visit coordinator. */
+  #evaluateVisit(event) {
+    if (!this.#dirty || this.#guardSuppressed()) return null;
     const guard = this.dispatch("guard", { detail: { event }, cancelable: true });
-    if (guard.defaultPrevented) {
-      event.preventDefault();
-      return;
-    }
-    if (this.confirmBridgeValue) {
-      event.preventDefault();
-      return;
-    }
-    if (!window.confirm(this.messageValue)) {
-      event.preventDefault();
-    }
+    if (guard.defaultPrevented) return { kind: "block" };
+    if (!this.element.isConnected || !this.#dirty || this.#guardSuppressed()) return null;
+    if (this.confirmBridgeValue) return { kind: "block" };
+    return { kind: "confirm", message: this.messageValue };
   }
   #bindBeforeUnload() {
     if (this.#beforeunloadBound) return;
@@ -97,6 +250,16 @@ var DirtyFormController = class extends Controller {
     window.removeEventListener("beforeunload", this.#onBeforeUnload);
     this.#beforeunloadBound = false;
   }
+  #guardSuppressed() {
+    return this.#submitting && (this.#submitAttempt === null || !this.#submitAttempt.event.defaultPrevented);
+  }
+  #resetSubmission() {
+    this.#timeouts.clearAll();
+    this.#submitting = false;
+    this.#submitAttempt = null;
+    this.#submittedBaseline = null;
+    this.#activeSubmission = null;
+  }
   /** Stable serialization of the form's controls for change detection. */
   #serialize() {
     const parts = [];
@@ -104,15 +267,15 @@ var DirtyFormController = class extends Controller {
       const name = this.#nameOf(el);
       if (name === null) continue;
       if (el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio")) {
-        parts.push(`${name}:${el.checked ? 1 : 0}`);
+        parts.push([el.type, name, el.value, el.checked ? 1 : 0]);
       } else if (el instanceof HTMLSelectElement) {
-        const value = el.multiple ? Array.from(el.selectedOptions).map((o) => o.value).join(",") : el.value;
-        parts.push(`${name}:${value}`);
+        const value = el.multiple ? Array.from(el.selectedOptions).map((option) => option.value) : el.value;
+        parts.push([el.type, name, value]);
       } else if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-        parts.push(`${name}:${el.value}`);
+        parts.push([el.type, name, el.value]);
       }
     }
-    return parts.join("|");
+    return JSON.stringify(parts);
   }
   /** A stable key for a control, or null for elements without value semantics. */
   #nameOf(el) {