stimeo-ui 0.15.0 → 0.16.0

data/dist/controllers/countdown_controller.js

@@ -99,7 +99,12 @@ var SafeInterval = class extends TimerRegistry {
 
 // src/controllers/countdown_controller.ts
 var SECOND_MS = 1e3;
+var OWNED_STATUS = "owns-status";
 var CountdownController = class extends Controller {
+  /** The status marker, in the namespace this controller is registered under. */
+  get #ownedStatus() {
+    return `data-${this.identifier}-${OWNED_STATUS}`;
+  }
   static targets = ["days", "hours", "minutes", "seconds", "status"];
   static values = {
     deadline: { type: String, default: "" },
@@ -115,6 +120,12 @@ var CountdownController = class extends Controller {
   #intervalId = null;
   /** Collapses a morph that swaps several render inputs at once into one re-derive. */
   #resync = new MicrotaskCoalescer(() => this.#resyncToValues());
+  /**
+   * Whether `connect()` has run for this connection. Stimulus delivers Value
+   * callbacks ahead of it, while the run state is still the markup's own and not
+   * yet settled; `connect()` brings the status up to date once it is.
+   */
+  #connected = false;
   /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */
   #reference = 0;
   /** Amount (ms) captured at pause, so resume can restore the same display. */
@@ -127,28 +138,25 @@ var CountdownController = class extends Controller {
    */
   #renderedAmount = 0;
   connect() {
+    this.#connected = true;
     this.#resync.activate();
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
     this.#pausedAmount = this.#renderedAmount;
     const authored = this.element.getAttribute("data-state");
+    const settled = authored === "complete" && this.#isSettled(amount);
     if (authored === null) {
-      if (this.autostartValue && this.#isValidDeadline) {
-        this.start();
-        return;
-      }
+      if (this.autostartValue && this.#isValidDeadline) this.start();
+      else this.element.setAttribute("data-state", "paused");
+    } else if (!settled) {
       this.element.setAttribute("data-state", "paused");
-      return;
+      if (authored === "running") this.start();
     }
-    if (authored === "complete" && this.#isDown && amount <= 0) {
-      return;
-    }
-    const wasRunning = authored === "running";
-    this.element.setAttribute("data-state", "paused");
-    if (wasRunning) this.start();
+    this.#syncStatus();
   }
   disconnect() {
+    this.#connected = false;
     this.#resync.cancel();
     this.#intervals.clearAll();
     this.#intervalId = null;
@@ -161,6 +169,31 @@ var CountdownController = class extends Controller {
   directionValueChanged() {
     this.#resync.schedule();
   }
+  /**
+   * Follows a completion label swapped in place by a morph.
+   *
+   * Render only: `complete` is neither dispatched nor announced again. The status
+   * changes only after the countdown has completed, and only while it still shows
+   * the text this controller wrote there and nothing else, so text or an element
+   * the consumer put in the slot stays. A change delivered ahead of `connect()` is
+   * left to `connect()`.
+   */
+  completeLabelValueChanged() {
+    if (this.#connected) this.#syncStatus();
+  }
+  /**
+   * Keeps a status that still shows this controller's text, and nothing else, on
+   * what the run state calls for: the label in force while complete; otherwise the
+   * text is taken back, marker and all. A status holding anything else is the
+   * consumer's and is left alone, marker included.
+   *
+   * @stimeoRenderRoot
+   */
+  #syncStatus() {
+    if (!this.hasStatusTarget || !this.#ownsStatus(this.statusTarget)) return;
+    if (this.#state === "complete") this.#writeStatus(this.statusTarget, this.completeLabelValue);
+    else this.#releaseStatus(this.statusTarget);
+  }
   /**
    * Points the anchor at the current `deadline` / `direction` and repaints.
    *
@@ -168,13 +201,27 @@ var CountdownController = class extends Controller {
    * paused timer run or replay a milestone. A running one needs no restart either —
    * every tick reads the anchor, so moving it is enough. While paused the stored
    * amount follows the new reading, or resume would continue from the old deadline.
+   * A completion the new reading no longer settles (a deadline moved forward, or a
+   * count turned `up`) is handed back paused, as `connect()` hands back a restored
+   * one, so `resume()` counts again; the completion text this controller wrote goes
+   * with it, from a status slot that still shows it and nothing else.
+   *
+   * @stimeoRenderRoot
    */
   #resyncToValues() {
     this.#initReference();
-    this.#render(this.#currentAmount());
+    const amount = this.#currentAmount();
+    this.#render(amount);
+    if (this.#state === "complete" && !this.#isSettled(amount)) {
+      this.element.setAttribute("data-state", "paused");
+      this.#syncStatus();
+    }
     if (this.#state !== "running") this.#pausedAmount = this.#renderedAmount;
   }
-  /** Starts (or restarts after pause) ticking toward the deadline. */
+  /**
+   * Starts (or restarts after pause) ticking toward the deadline. Counting on from a
+   * completion takes this controller's completion text back out of the status.
+   */
   start() {
     if (this.#state === "running" || !this.#isValidDeadline) return;
     if (this.#isDown && this.#currentAmount() <= 0) {
@@ -212,10 +259,8 @@ var CountdownController = class extends Controller {
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
-    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {
-      this.statusTarget.textContent = "";
-    }
     this.element.setAttribute("data-state", "paused");
+    this.#syncStatus();
     if (wasRunning && this.#isValidDeadline) {
       this.#pausedAmount = 0;
       this.start();
@@ -223,9 +268,19 @@ var CountdownController = class extends Controller {
       this.#pausedAmount = this.#renderedAmount;
     }
   }
-  /** Schedules the repeating tick and marks the timer running. */
+  /**
+   * Schedules the repeating tick and marks the timer running. This is the one way
+   * into `running`, and a running timer keeps none of this controller's completion
+   * text in the status, so the status is settled here as on every other way out of
+   * `complete`: `start()` leaves a completion directly when `direction` flips to
+   * `up` and `start()` runs in the same task, ahead of the direction callback.
+   *
+   * @stimeoRuntimeOnly `interval` is the period of the one timer this call arms; the running state
+   *   it writes does not depend on a Value.
+   */
   #runInterval() {
     this.element.setAttribute("data-state", "running");
+    this.#syncStatus();
     this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);
   }
   /** Cancels the repeating tick, if any. */
@@ -246,21 +301,73 @@ var CountdownController = class extends Controller {
       this.#complete();
     }
   }
-  /** Stops at zero, marks completion, announces it, and emits `complete`. */
+  /**
+   * Stops at zero, marks completion, writes the completion label, emits `complete`,
+   * and announces it.
+   *
+   * @stimeoRenderRoot
+   */
   #complete() {
     this.#teardownInterval();
     this.#render(0);
     this.element.setAttribute("data-state", "complete");
-    if (this.hasStatusTarget && this.completeLabelValue.length > 0) {
-      this.statusTarget.textContent = this.completeLabelValue;
-    }
+    this.#claimStatus();
     this.dispatch("complete", { detail: {} });
+    this.#announceCompletion();
+  }
+  /**
+   * Writes the label in force into the status slot as this controller's text. An
+   * empty label puts no text there: it claims a slot that is already empty — no
+   * text and no element — empties one that is still this controller's, and leaves
+   * any other slot, the consumer's, alone.
+   */
+  #claimStatus() {
+    if (!this.hasStatusTarget) return;
+    const status = this.statusTarget;
+    const label = this.completeLabelValue;
+    if (label === "" && !this.#isEmpty(status) && !this.#ownsStatus(status)) return;
+    this.#writeStatus(status, label);
+  }
+  /**
+   * Whether the status slot shows the text this controller wrote there and nothing
+   * else: the text matches the marker, and the slot holds no element. Writing the
+   * slot's text replaces every child node, so an element the consumer puts in the
+   * slot makes it theirs even while the text still matches. An empty marker
+   * matches the slot whenever it is empty.
+   */
+  #ownsStatus(status) {
+    return status.getAttribute(this.#ownedStatus) === status.textContent && status.firstElementChild === null;
+  }
+  /** Whether the status slot holds nothing at all: no text and no element. */
+  #isEmpty(status) {
+    return status.textContent === "" && status.firstElementChild === null;
+  }
+  /** Puts `text` into the status slot and records it as this controller's. */
+  #writeStatus(status, text) {
+    if (status.textContent !== text) status.textContent = text;
+    status.setAttribute(this.#ownedStatus, text);
+  }
+  /** Takes this controller's text out of the status slot, marker and all. */
+  #releaseStatus(status) {
+    status.textContent = "";
+    status.removeAttribute(this.#ownedStatus);
+  }
+  /**
+   * Reads the completion out through the shared announcer.
+   *
+   * @stimeoRuntimeOnly `announceText` words the one announcement a completion makes.
+   */
+  #announceCompletion() {
     announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Sets the time anchor from the `deadline` value. */
   #initReference() {
     this.#reference = Date.parse(this.deadlineValue);
   }
+  /** Whether a reading of `amount` leaves nothing to count: only a countdown at zero. */
+  #isSettled(amount) {
+    return this.#isDown && amount <= 0;
+  }
   /** Remaining (down) or elapsed (up) ms, never negative. */
   #currentAmount() {
     if (!this.#isValidDeadline) return 0;
@@ -268,11 +375,7 @@ var CountdownController = class extends Controller {
     const raw = this.#isDown ? this.#reference - now : now - this.#reference;
     return Math.max(0, raw);
   }
-  /**
-   * Writes the amount into the day/hour/minute/second slots.
-   *
-   * @stimeoRenderRoot
-   */
+  /** Writes the amount into the day/hour/minute/second slots. */
   #render(amount) {
     const totalSeconds = Math.floor(amount / SECOND_MS);
     this.#renderedAmount = totalSeconds * SECOND_MS;

data/dist/controllers/currency_input_controller.js

@@ -3,11 +3,19 @@ import { Controller } from '@hotwired/stimulus';
 // src/controllers/currency_input_controller.ts
 
 // src/utils/composition_tracker.ts
+var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "insertCompositionText",
+  "insertFromComposition",
+  "deleteCompositionText",
+  "deleteByComposition"
+]);
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
   #activeTargets = /* @__PURE__ */ new Set();
   #onStart;
   #onEnd;
+  /** The field whose confirming `input` is still owed, while the window is open. */
+  #confirmedTarget = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
@@ -17,6 +25,7 @@ var CompositionTracker = class {
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
     target.addEventListener("compositionend", this.#handleEnd);
+    target.addEventListener("keydown", this.#handleKeydown);
     this.#observedTargets.add(target);
   }
   /** Stops tracking one target and clears any active composition it owned. */
@@ -24,29 +33,52 @@ var CompositionTracker = class {
     if (!this.#observedTargets.delete(target)) return;
     target.removeEventListener("compositionstart", this.#handleStart);
     target.removeEventListener("compositionend", this.#handleEnd);
+    target.removeEventListener("keydown", this.#handleKeydown);
     this.#activeTargets.delete(target);
+    if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
   /** Releases every listener and clears state so reconnect starts cleanly. */
   disconnect() {
     for (const target of this.#observedTargets) {
       target.removeEventListener("compositionstart", this.#handleStart);
       target.removeEventListener("compositionend", this.#handleEnd);
+      target.removeEventListener("keydown", this.#handleKeydown);
     }
     this.#observedTargets.clear();
     this.#activeTargets.clear();
+    this.#confirmedTarget = null;
   }
   /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
     return this.#activeTargets.size > 0 || event?.isComposing === true;
   }
+  /**
+   * Whether `event` is the `input` echoing the composition just confirmed.
+   *
+   * Asking closes the window either way, so one confirmation is folded at most
+   * once and a consumer asks once per `input`.
+   */
+  consumesConfirmedInput(event) {
+    const confirmed = this.#confirmedTarget;
+    this.#confirmedTarget = null;
+    if (confirmed === null || confirmed !== event.target) return false;
+    const inputType = event.inputType;
+    return !inputType || COMPOSITION_INPUT_TYPES.has(inputType);
+  }
   #handleStart = (event) => {
+    this.#confirmedTarget = null;
     if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
     this.#onStart?.(event);
   };
   #handleEnd = (event) => {
     if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
+  /** A key on an observed field opens an edit of its own, so no echo is owed. */
+  #handleKeydown = () => {
+    this.#confirmedTarget = null;
+  };
 };
 
 // src/utils/half_width.ts
@@ -103,15 +135,24 @@ var CurrencyInputController = class extends Controller {
     precision: { type: Number, default: 2 }
   };
   static actions = ["format", "onInput"];
-  static events = ["change"];
-  /** Last committed numeric value, to suppress duplicate `change` dispatches. */
+  static events = ["change", "reconcile"];
+  /** The numeric value last committed; both events report only a move away from it. */
   #lastValue = null;
   #started = false;
+  /** A declaration change that arrived mid-composition, applied once nothing composes. */
+  #changeHeld = false;
+  /** The display a composition is running on, until that composition ends. */
+  #composing = null;
+  /**
+   * The display text this controller last rendered. It tells this controller's own
+   * text, written with the separators in force, from text the page wrote.
+   */
+  #rendered = null;
   /** Validated mirrors of the Values; the hot path never reads a raw Value. */
   #locale;
   #currency = "";
   #precision = 2;
-  /** Formatters rebuilt only when a Value changes, never per keystroke. */
+  /** Formatters rebuilt when the declarations are taken in, never per keystroke. */
   #grouping;
   #fixed;
   #accessible;
@@ -119,11 +160,25 @@ var CurrencyInputController = class extends Controller {
   #decimal = ".";
   /** The locale's non-Latin digits mapped back to ASCII (empty for Latin locales). */
   #digits = /* @__PURE__ */ new Map();
-  /** Holds mid-composition input so the IME's uncommitted text is never rewritten. */
+  /**
+   * Holds mid-composition input so the IME's uncommitted text is never rewritten.
+   * The confirmed text is formatted once, and a declaration change the composition
+   * held back is applied after it.
+   */
   #composition = new CompositionTracker({
-    onEnd: () => this.#reformat(false)
+    onStart: (event) => {
+      this.#composing = event.currentTarget;
+    },
+    onEnd: () => {
+      this.#composing = null;
+      this.#reformat(false, "edit");
+      this.#applyHeldChange();
+    }
   });
-  /** Re-validates on declaration changes and re-renders the committed display. */
+  /**
+   * Re-validates on declaration changes and re-renders the committed display,
+   * reporting a value the re-render moved as `reconcile`.
+   */
   localeValueChanged() {
     this.#applyValueChange();
   }
@@ -134,52 +189,123 @@ var CurrencyInputController = class extends Controller {
     this.#applyValueChange();
   }
   /**
-   * Scans the display under the *outgoing* configuration (its separators wrote
-   * that text), then revalidates and re-renders under the new one — so a locale
-   * switch re-interprets the value, never the old text with new separators.
+   * Reads the display with the declarations its text was written for, then
+   * re-renders it under the new ones — so a locale switch re-interprets the
+   * value, never the old text with new separators, and text the page wrote for
+   * the declarations it changes is never read with the old ones.
+   *
+   * While the display is composing, its text is the IME's: the change is held,
+   * configuration and all, until the composition ends, so the confirmed text is
+   * read with the separators it was typed against before the change applies.
+   *
+   * @stimeoRenderRoot
    */
   #applyValueChange() {
-    const scan = this.#started && this.hasDisplayTarget ? this.#scan(this.displayTarget.value) : null;
-    this.#revalidate();
-    if (!scan || !this.hasDisplayTarget) return;
+    if (this.#composition.isComposing()) {
+      this.#changeHeld = true;
+      return;
+    }
+    if (!this.#started || !this.hasDisplayTarget) return;
+    const scan = this.#readDisplay();
     if (document.activeElement === this.displayTarget) {
       const formatted = this.#render(scan.parts);
-      this.displayTarget.value = formatted;
-      this.#reflect(scan.value, formatted);
-    } else if (scan.value === null) {
-      this.displayTarget.value = "";
-      this.#reflect(null, "");
+      this.#show(formatted);
+      this.#reflect(scan.value, formatted, "reconcile");
     } else {
-      const rounded = round(scan.value, this.#precision);
-      const formatted = this.#fixed.format(rounded);
-      this.displayTarget.value = formatted;
-      this.#reflect(rounded, formatted);
+      this.#renderFixed(scan.value, "reconcile");
     }
   }
-  /** Normalizes any pre-filled display value to its fixed-precision form. */
+  /** Applies a declaration change a composition held back. */
+  #applyHeldChange() {
+    if (!this.#changeHeld) return;
+    this.#changeHeld = false;
+    this.#applyValueChange();
+  }
+  /**
+   * Reads the display and takes in the declarations the page carries now. This
+   * controller's own rendering was written with the separators in force, so it
+   * is read before they change; any other text is the page's, written for the
+   * declarations it carries, so it is read after.
+   */
+  #readDisplay() {
+    const text = this.displayTarget.value;
+    const own = text === this.#rendered ? this.#scan(text) : null;
+    this.#takeInDeclarations();
+    return own ?? this.#scan(text);
+  }
+  /** Takes in the declarations the page carries now, a change a composition held among them. */
+  #takeInDeclarations() {
+    this.#changeHeld = false;
+    this.#revalidate();
+  }
+  /**
+   * Takes in the declarations the page carries now and normalizes the display
+   * to its fixed-precision form.
+   *
+   * A display still showing this controller's own last rendering is not read
+   * back: its separators may belong to declarations that changed while the
+   * controller was away, and the committed value is known anyway. That value is
+   * re-rendered at the current fixed precision, which rounds it whether
+   * `precision` changed meanwhile or the entry was left unrounded mid-typing, and
+   * a move the rounding causes is reported as `reconcile`. Any other text is the
+   * page's, written for the declarations it carries, so it is read with them.
+   */
   connect() {
     this.#started = true;
+    this.#takeInDeclarations();
     if (!this.hasDisplayTarget) return;
+    if (this.displayTarget.value === this.#rendered) {
+      this.#renderFixed(this.#lastValue, "reconcile");
+      return;
+    }
     const { value } = this.#scan(this.displayTarget.value);
     this.#lastValue = value === null ? null : round(value, this.#precision);
-    if (value === null) {
-      this.displayTarget.value = "";
-      this.#reflect(null, "");
-    } else {
-      this.#reformat(true);
-    }
+    this.#renderFixed(value, "reconcile");
   }
+  /**
+   * Releases the composition listeners. A composition still running hears no
+   * `compositionend` once they are gone, so it ends here; a change it held is
+   * taken in on the next `connect()`.
+   */
   disconnect() {
-    this.#started = false;
+    this.#endUntrackedComposition();
     this.#composition.disconnect();
+    this.#started = false;
   }
-  /** Tracks composition on an arriving (or swapped-in) display and normalizes it. */
+  /**
+   * Tracks composition on an arriving (or swapped-in) display and normalizes it
+   * under the declarations the page carries now, reading this controller's own
+   * rendering with the separators it was written under; an amount that differs
+   * from the committed one is the page's, so it is reported as `reconcile`.
+   */
   displayTargetConnected(target) {
     this.#composition.observe(target);
-    if (this.#started) this.#reformat(true);
+    if (!this.#started) return;
+    this.#renderFixed(this.#readDisplay().value, "reconcile");
   }
+  /**
+   * Stops tracking a display that leaves. A composition running on it hears no
+   * `compositionend` any more, so it ends here; a change it held waits for the
+   * next display to be read.
+   */
   displayTargetDisconnected(target) {
     this.#composition.unobserve(target);
+    this.#endUntrackedComposition();
+  }
+  /**
+   * Ends a composition no `compositionend` will reach. A display still in place —
+   * one a move re-inserted, or the display of a controller that moves — holds the
+   * text the composition left, typed against the declarations in force, so it is
+   * read as `compositionend` would read it and becomes this controller's own
+   * rendering. The page's move ended the composition, so a value it moves is
+   * reported as `reconcile`. A display that left takes its composition along.
+   */
+  #endUntrackedComposition() {
+    const display = this.#composing;
+    this.#composing = null;
+    if (this.hasDisplayTarget && this.displayTarget === display) {
+      this.#reformat(false, "reconcile");
+    }
   }
   /** Syncs a late-arriving hidden field without touching the display or events. */
   fieldTargetConnected() {
@@ -192,33 +318,23 @@ var CurrencyInputController = class extends Controller {
   /** Re-groups digits as the user types, preserving the caret position. */
   onInput(event) {
     if (this.#composition.isComposing(event)) return;
-    this.#reformat(false);
+    this.#reformat(false, "edit");
   }
   /** Applies the fixed-precision rounding on blur. */
   format() {
-    this.#reformat(true);
+    this.#reformat(true, "edit");
   }
   /**
    * Parses the display value, rewrites it grouped (optionally at fixed
    * precision), keeps the caret stable by significant characters, and syncs the
-   * field, the screen-reader span, and the `change` event.
-   *
-   * @stimeoRenderRoot
+   * field, the screen-reader span, and the event `cause` selects.
    */
-  #reformat(fixedPrecision) {
+  #reformat(fixedPrecision, cause) {
     if (!this.hasDisplayTarget) return;
     const raw = this.displayTarget.value;
     const { parts, value } = this.#scan(raw);
     if (fixedPrecision) {
-      if (value === null) {
-        this.displayTarget.value = "";
-        this.#reflect(null, "");
-        return;
-      }
-      const rounded = round(value, this.#precision);
-      const formatted2 = this.#fixed.format(rounded);
-      this.displayTarget.value = formatted2;
-      this.#reflect(rounded, formatted2);
+      this.#renderFixed(value, cause);
       return;
     }
     const formatted = this.#render(parts);
@@ -228,12 +344,31 @@ var CurrencyInputController = class extends Controller {
       this.displayTarget.value = formatted;
       if (anchor !== null) this.#restoreCaret(formatted, anchor);
     }
-    this.#reflect(value, value === null ? "" : formatted);
+    this.#rendered = formatted;
+    this.#reflect(value, formatted, cause);
+  }
+  /**
+   * Shows `value` at the fixed precision — an empty display for no value — and
+   * reports a move under the event `cause` selects.
+   */
+  #renderFixed(value, cause) {
+    if (value === null) {
+      this.#show("");
+      this.#reflect(null, "", cause);
+      return;
+    }
+    const rounded = round(value, this.#precision);
+    const formatted = this.#fixed.format(rounded);
+    this.#show(formatted);
+    this.#reflect(rounded, formatted, cause);
+  }
+  /** Writes `text` to the display as this controller's own rendering. */
+  #show(text) {
+    this.displayTarget.value = text;
+    this.#rendered = text;
   }
   /**
    * The in-progress rendering: grouped integer, sign and fraction as typed.
-   *
-   * @stimeoRenderRoot
    */
   #render(parts) {
     const int = parts.int === "" ? "" : this.#grouping.format(BigInt(parts.int));
@@ -293,15 +428,22 @@ var CurrencyInputController = class extends Controller {
     if (this.hasSrValueTarget) {
       this.srValueTarget.textContent = isEmpty ? "" : this.#accessible.format(value);
     }
-    this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+    this.element.toggleAttribute(`data-${this.identifier}-empty`, isEmpty);
   }
-  /** {@link #write}, then reports a moved value as `change` (`""` rides with `null`). */
-  #reflect(value, formatted) {
+  /**
+   * {@link #write}, then reports a moved value under the event `cause` selects:
+   * `change` for the user's edit, `reconcile` for a move the page caused. The
+   * display may hold an in-progress `-`, but a `null` value always rides with an
+   * empty `formatted`, whichever event reports it, so consumers can treat the
+   * pair as cleared.
+   */
+  #reflect(value, formatted, cause) {
     this.#write(value);
-    if (value !== this.#lastValue) {
-      this.#lastValue = value;
-      this.dispatch("change", { detail: { value, formatted } });
-    }
+    if (value === this.#lastValue) return;
+    this.#lastValue = value;
+    const detail = { value, formatted: value === null ? "" : formatted };
+    if (cause === "edit") this.dispatch("change", { detail });
+    else this.dispatch("reconcile", { detail });
   }
   /**
    * Scans arbitrary input text into its number-shaped parts and value. Keeps
@@ -333,10 +475,15 @@ var CurrencyInputController = class extends Controller {
   #isDecimalMark(ch) {
     return ch === this.#decimal || ch === "." && this.#group !== ".";
   }
-  /** Re-syncs field / srValue / hook from the current display without dispatching. */
+  /**
+   * Re-syncs field / srValue / hook without dispatching: from the display, or —
+   * while it is composing, when its text is not committed yet — from the value
+   * last committed.
+   */
   #resync() {
     if (!this.hasDisplayTarget) return;
-    this.#write(this.#scan(this.displayTarget.value).value);
+    const value = this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
+    this.#write(value);
   }
   /**
    * Validates the declared Values, falling back to each Value's default when a