stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/currency_input_controller.js

@@ -1,87 +1,190 @@
 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"
 ]);
+function isCompositionInputType(inputType) {
+  return inputType !== void 0 && COMPOSITION_INPUT_TYPES.has(inputType);
+}
+var BEFORE_MORPH_ATTRIBUTE = "turbo:before-morph-attribute";
+var textOf = (element) => element.value;
+var holdsFocus = (element) => element instanceof Node && element.getRootNode().activeElement === element;
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
-  #activeTargets = /* @__PURE__ */ new Set();
+  #composition = null;
   #onStart;
   #onEnd;
-  /** The field whose confirming `input` is still owed, while the window is open. */
+  #onAbandon;
   #confirmedTarget = null;
+  #keyComposing = false;
+  #connected = false;
+  #abandoned = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
+    this.#onAbandon = options.onAbandon;
   }
-  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
   observe(target) {
+    this.#connected = true;
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
     target.addEventListener("compositionend", this.#handleEnd);
-    target.addEventListener("keydown", this.#handleKeydown);
+    target.addEventListener("keydown", this.#handleKeydown, true);
+    target.addEventListener("beforeinput", this.#handleBeforeInput, true);
+    target.addEventListener("input", this.#handleInput, true);
+    target.addEventListener("blur", this.#handleBlur, true);
+    target.addEventListener(BEFORE_MORPH_ATTRIBUTE, this.#handleBeforeMorphAttribute);
     this.#observedTargets.add(target);
   }
-  /** Stops tracking one target and clears any active composition it owned. */
   unobserve(target) {
     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);
+    this.#release(target);
+    if (this.#composition?.target === target) this.#letGo();
     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.#connected = false;
+    for (const target of this.#observedTargets) this.#release(target);
     this.#observedTargets.clear();
-    this.#activeTargets.clear();
+    this.#letGo();
     this.#confirmedTarget = null;
+    this.#keyComposing = false;
+    this.#abandoned = 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`.
-   */
+    this.#settle();
+    return event?.isComposing === true || this.#composition !== null;
+  }
+  composingElement() {
+    this.#settle();
+    return this.#composition?.element ?? null;
+  }
+  owns(event) {
+    const element = this.composingElement();
+    return event.isComposing === true || element !== null && element === event.target;
+  }
   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);
+    return !inputType || isCompositionInputType(inputType);
+  }
+  #release(target) {
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    target.removeEventListener("keydown", this.#handleKeydown, true);
+    target.removeEventListener("beforeinput", this.#handleBeforeInput, true);
+    target.removeEventListener("input", this.#handleInput, true);
+    target.removeEventListener("blur", this.#handleBlur, true);
+    target.removeEventListener(BEFORE_MORPH_ATTRIBUTE, this.#handleBeforeMorphAttribute);
+  }
+  #letGo() {
+    const composition = this.#composition;
+    if (composition === null) return;
+    if (!holdsFocus(composition.element)) {
+      this.#composition = null;
+      return;
+    }
+    queueMicrotask(() => {
+      if (this.#composition !== composition || this.#observedTargets.has(composition.target)) {
+        return;
+      }
+      this.#composition = null;
+      if (!this.#connected) return;
+      this.#abandoned = { element: composition.element, inPlace: true };
+      this.#runAbandon();
+    });
+  }
+  #settle() {
+    const composition = this.#composition;
+    if (composition === null) return;
+    const { target, element, text } = composition;
+    if (target instanceof Node && element instanceof Node && !target.contains(element)) {
+      this.#composition = null;
+    } else if (textOf(element) !== text) {
+      this.#abandon(false);
+    }
+  }
+  #abandon(inPlace) {
+    this.#owe(inPlace);
+    this.#composition = null;
+    queueMicrotask(this.#runAbandon);
   }
+  #owe(inPlace) {
+    const composition = this.#composition;
+    if (composition !== null) this.#abandoned = { element: composition.element, inPlace };
+  }
+  #runAbandon = () => {
+    const abandoned = this.#abandoned;
+    if (abandoned === null) return;
+    this.#abandoned = null;
+    this.#onAbandon?.(abandoned.element, abandoned.inPlace);
+  };
   #handleStart = (event) => {
     this.#confirmedTarget = null;
-    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#settle();
+    this.#owe(true);
+    const target = event.currentTarget;
+    const element = event.target;
+    this.#composition = { target, element, text: textOf(element) };
+    this.#runAbandon();
     this.#onStart?.(event);
   };
   #handleEnd = (event) => {
-    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#runAbandon();
+    if (this.#composition?.target === event.currentTarget) this.#composition = null;
     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 = () => {
+  #handleKeydown = (event) => {
+    this.#settle();
+    this.#runAbandon();
     this.#confirmedTarget = null;
+    this.#keyComposing = event.isComposing === true;
+  };
+  #handleBeforeInput = (event) => {
+    const keyComposing = this.#keyComposing;
+    this.#keyComposing = false;
+    this.#settle();
+    const { isComposing, inputType } = event;
+    if (this.#composition !== null && !keyComposing && !isComposing && inputType && !isCompositionInputType(inputType)) {
+      this.#abandon(true);
+    }
+    this.#runAbandon();
+  };
+  #handleInput = (event) => {
+    const composition = this.#composition;
+    const { isTrusted, isComposing, inputType } = event;
+    if (composition !== null && event.target === composition.element && (isTrusted || isComposing || isCompositionInputType(inputType))) {
+      composition.text = textOf(composition.element);
+    } else {
+      this.#settle();
+    }
+    this.#runAbandon();
+  };
+  #handleBlur = (event) => {
+    this.#settle();
+    this.#runAbandon();
+    const composition = this.#composition;
+    if (composition === null || composition.target === composition.element) return;
+    const { element } = composition;
+    if (!(element instanceof Node) || event.target !== element) return;
+    const root = element.getRootNode();
+    if (root.activeElement !== element) this.#composition = null;
+  };
+  #handleBeforeMorphAttribute = (event) => {
+    this.#settle();
+    const composition = this.#composition;
+    if (composition?.target !== event.currentTarget || event.target !== composition.element) return;
+    const detail = event.detail;
+    if (detail?.attributeName === "value") event.preventDefault();
   };
 };
 
-// src/utils/half_width.ts
 var FULL_WIDTH_SHIFT = 65248;
 function halfWidthChar(char) {
   if (char >= "\uFF01" && char <= "\uFF5E") {
@@ -90,7 +193,6 @@ function halfWidthChar(char) {
   return char === "\u3000" ? " " : char;
 }
 
-// src/utils/intl_format.ts
 var formatters = /* @__PURE__ */ new WeakMap();
 function intlFormatter(factory, locale, options, fallbackLocale) {
   const cache = cacheFor(factory);
@@ -120,65 +222,275 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
-// src/utils/locale.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 function resolveLocale(element, declared = "") {
   return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
 }
 
-// src/controllers/currency_input_controller.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  get pending() {
+    return this.#queued;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var OwnedText = class {
+  #attribute;
+  #channel;
+  #guard;
+  #writes = /* @__PURE__ */ new WeakMap();
+  constructor(attribute, channel = "text", guard = () => true) {
+    this.#attribute = attribute;
+    this.#channel = channel;
+    this.#guard = guard;
+  }
+  hasRecord(element) {
+    return element.hasAttribute(this.#attribute);
+  }
+  read(element, evidence = {}) {
+    if (evidence.source === "live") return this.#writes.get(element) ?? null;
+    const raw = element.getAttribute(this.#attribute);
+    if (raw === null) return null;
+    try {
+      const record = JSON.parse(raw);
+      if (!Array.isArray(record) || record.length !== 3 || record[0] !== this.#channel || typeof record[1] !== "string" || typeof record[2] !== "string")
+        return null;
+      return { original: record[1], written: record[2] };
+    } catch {
+      return null;
+    }
+  }
+  owns(element, evidence = {}) {
+    return this.#ownedRecord(element, evidence) !== null;
+  }
+  #ownedRecord(element, evidence) {
+    const record = this.read(element, evidence);
+    if (record === null || !this.#guard(element)) return null;
+    if (this.#channel === "text" && element.firstElementChild !== null) return null;
+    const current = this.#current(element);
+    return current === record.written || evidence.source === "live" && evidence.allowOriginal === true && current === record.original ? record : null;
+  }
+  write(element, written, original, force = false) {
+    const current = this.#current(element);
+    if (current === null) return;
+    const before = original ?? this.#writes.get(element)?.original ?? this.read(element)?.original ?? current;
+    if (force || current !== written) this.#put(element, written);
+    this.remember(element, written, before);
+  }
+  remember(element, written, original) {
+    const current = this.#current(element);
+    if (current === null) return;
+    const before = original ?? this.#writes.get(element)?.original ?? this.read(element)?.original ?? current;
+    this.#writes.set(element, { original: before, written });
+    setAttributeIfChanged(
+      element,
+      this.#attribute,
+      JSON.stringify([this.#channel, before, written])
+    );
+  }
+  clear(element, evidence = {}) {
+    if (!this.owns(element, evidence)) return false;
+    if (this.#current(element) !== "") this.#put(element, "");
+    this.forget(element);
+    return true;
+  }
+  restore(element, evidence = {}) {
+    const record = this.#ownedRecord(element, evidence);
+    if (record === null) return false;
+    if (this.#current(element) !== record.original) this.#put(element, record.original);
+    this.forget(element);
+    return true;
+  }
+  forget(element) {
+    setAttributeIfChanged(element, this.#attribute, null);
+    this.#writes.delete(element);
+  }
+  #current(element) {
+    if (this.#channel === "text") return element.textContent ?? "";
+    return element instanceof HTMLInputElement ? element.value : null;
+  }
+  #put(element, text) {
+    if (this.#channel === "text") element.textContent = text;
+    else if (element instanceof HTMLInputElement) element.value = text;
+  }
+};
+
 var FALLBACK_LOCALE = "en-US";
-var CurrencyInputController = class extends Controller {
+var CurrencyInputController = class _CurrencyInputController extends Controller {
+  #numbers = new NumberValueReader();
   static targets = ["display", "field", "srValue"];
   static values = {
     locale: { type: String, default: "" },
     currency: { type: String, default: "" },
     precision: { type: Number, default: 2 }
   };
+  static valueConstraints = {
+    precision: { finite: true, integer: true, min: 0, max: 100 }
+  };
   static actions = ["format", "onInput"];
   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. */
+  #unsettled = null;
+  #configured = false;
+  #listeners = new ListenerSet();
+  #declarationsHeld = false;
+  #displayText = new OwnedText(
+    `data-${this.identifier}-display-text`,
+    "value"
+  );
+  #renderedDisplay = null;
+  #departed = null;
+  #formatHeld = null;
   #locale;
   #currency = "";
   #precision = 2;
-  /** Formatters rebuilt when the declarations are taken in, never per keystroke. */
   #grouping;
   #fixed;
   #accessible;
   #group = ",";
   #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.
-   * The confirmed text is formatted once, and a declaration change the composition
-   * held back is applied after it.
-   */
   #composition = new CompositionTracker({
-    onStart: (event) => {
-      this.#composing = event.currentTarget;
+    onEnd: (event) => {
+      const display = event.currentTarget;
+      if (this.#unsettled === display) this.#unsettled = null;
+      const round2 = this.#takeFormatHeld(display);
+      if (this.#inCharge(display)) this.#reformat(round2, "edit");
+      if (this.#owed(display)) this.#applyValueChange();
+      if (round2 && !this.#inCharge(display)) this.#reformat(true, "edit");
+    },
+    onAbandon: (display, inPlace) => {
+      const next = this.#composition.composingElement();
+      if (inPlace && next !== null && next !== display) {
+        this.#endUntrackedComposition(display);
+      } else {
+        this.#formatHeld = null;
+      }
+      if (next === display && inPlace || !this.#owed(display)) return;
+      if (next !== null) {
+        this.#readPageText(next);
+        return;
+      }
+      if (inPlace) this.#endUntrackedComposition(display);
+      if (this.#owed(display)) this.#applyValueChange();
     },
-    onEnd: () => {
-      this.#composing = null;
-      this.#reformat(false, "edit");
-      this.#applyHeldChange();
+    onStart: (event) => {
+      if (this.#unsettled === event.target) this.#unsettled = null;
+      if (this.#formatHeld?.heard === false) this.#formatHeld = null;
     }
   });
-  /**
-   * Re-validates on declaration changes and re-renders the committed display,
-   * reporting a value the re-render moved as `reconcile`.
-   */
   localeValueChanged() {
     this.#applyValueChange();
   }
@@ -188,73 +500,57 @@ var CurrencyInputController = class extends Controller {
   precisionValueChanged() {
     this.#applyValueChange();
   }
-  /**
-   * 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() {
+    if (!this.#started) return;
+    if (this.#holdUnsettled(false)) return;
     if (this.#composition.isComposing()) {
-      this.#changeHeld = true;
+      this.#declarationsHeld = this.#declarationsChanged();
+      this.#resync();
       return;
     }
-    if (!this.#started || !this.hasDisplayTarget) return;
-    const scan = this.#readDisplay();
+    if (!this.hasDisplayTarget) return;
+    const { scan, anchor } = this.#readDisplay();
     if (document.activeElement === this.displayTarget) {
       const formatted = this.#render(scan.parts);
-      this.#show(formatted);
+      this.#showAtCaret(formatted, anchor);
       this.#reflect(scan.value, formatted, "reconcile");
     } else {
       this.#renderFixed(scan.value, "reconcile");
     }
   }
-  /** 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;
+    const own = this.#showsOwnRendering(this.displayTarget) ? this.#read(text) : null;
     this.#revalidate();
+    return own ?? this.#read(text);
   }
-  /**
-   * 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.
-   */
+  #showsOwnRendering(display) {
+    return display === this.#renderedDisplay && this.#displayText.owns(display, { source: "live" });
+  }
+  #inCharge(source) {
+    return source === null || this.hasDisplayTarget && source === this.displayTarget;
+  }
+  #read(text) {
+    return {
+      scan: this.#scan(text),
+      anchor: this.#significantBefore(text, this.displayTarget.selectionStart)
+    };
+  }
+  #morph = new MorphRenderWatcher(() => this.#applyValueChange());
   connect() {
+    this.#morph.observe(this.element);
+    this.#listeners.add(this.element, "turbo:before-morph-attribute", this.#protectUnsettled);
     this.#started = true;
-    this.#takeInDeclarations();
+    if (!this.#configured) this.#revalidate();
+    if (this.#composition.isComposing()) {
+      this.#applyValueChange();
+      return;
+    }
+    this.#formatHeld = null;
+    if (this.#holdUnsettled(true)) return;
+    this.#revalidate();
     if (!this.hasDisplayTarget) return;
-    if (this.displayTarget.value === this.#rendered) {
+    if (this.#showsOwnRendering(this.displayTarget)) {
       this.#renderFixed(this.#lastValue, "reconcile");
       return;
     }
@@ -262,75 +558,112 @@ var CurrencyInputController = class extends Controller {
     this.#lastValue = value === null ? null : round(value, this.#precision);
     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.#endUntrackedComposition();
+    this.#morph.disconnect();
+    this.#listeners.dispose();
+    const composing = this.#composition.composingElement();
     this.#composition.disconnect();
+    if (this.#composition.composingElement() !== composing) {
+      this.#endUntrackedComposition(composing);
+    }
     this.#started = false;
   }
-  /**
-   * 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) return;
-    this.#renderFixed(this.#readDisplay().value, "reconcile");
+    if (!this.#started || !this.hasDisplayTarget || this.displayTarget !== target) return;
+    this.#applyValueChange();
   }
-  /**
-   * 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) {
+    if (target === this.#renderedDisplay && !(this.#started && this.hasDisplayTarget && this.displayTarget === target)) {
+      this.#departed = target;
+    }
+    const composing = this.#composition.composingElement() === 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 (composing && this.#composition.composingElement() !== target) {
+      this.#endUntrackedComposition(target);
+    }
+    if (this.#formatHeld?.display === target && this.#composition.composingElement() !== target) {
+      this.#formatHeld = null;
+    }
+    this.#applyValueChange();
+  }
+  #endUntrackedComposition(display) {
+    const round2 = this.#takeFormatHeld(display);
     if (this.hasDisplayTarget && this.displayTarget === display) {
-      this.#reformat(false, "reconcile");
+      this.#reformat(round2, "reconcile");
     }
   }
-  /** Syncs a late-arriving hidden field without touching the display or events. */
   fieldTargetConnected() {
     if (this.#started) this.#resync();
   }
-  /** Syncs a late-arriving screen-reader span the same way. */
+  fieldTargetDisconnected() {
+    if (this.#started) this.#resync();
+  }
   srValueTargetConnected() {
     if (this.#started) this.#resync();
   }
-  /** Re-groups digits as the user types, preserving the caret position. */
+  srValueTargetDisconnected() {
+    if (this.#started) this.#resync();
+  }
   onInput(event) {
-    if (this.#composition.isComposing(event)) return;
+    const source = event?.target ?? null;
+    if (!this.#inCharge(source)) return;
+    this.#holdUnsettled(false);
+    if (event && this.#composition.consumesConfirmedInput(event)) return;
+    const input = event;
+    if (this.#composition.isComposing(input) || isCompositionInputType(input?.inputType)) {
+      if (this.#composition.composingElement() === null && this.hasDisplayTarget) {
+        this.#beginUnsettled(this.displayTarget);
+      }
+      return;
+    }
+    const unsettled = this.#unsettled !== null;
+    if (unsettled) {
+      if (source !== this.#unsettled || input?.isComposing !== false || !input.inputType) return;
+      this.#unsettled = null;
+      this.#formatHeld = null;
+    }
     this.#reformat(false, "edit");
+    if (unsettled && this.#owed(source)) this.#applyValueChange();
+  }
+  format(event) {
+    if (!this.#inCharge(event?.target ?? null)) return;
+    const returned = this.hasDisplayTarget && this.displayTarget === this.#departed;
+    this.#holdUnsettled(false);
+    if (this.hasDisplayTarget && (this.displayTarget !== this.#renderedDisplay || returned && !this.#showsOwnRendering(this.displayTarget)) && (event?.type === "blur" || event?.type === "focusout") && this.#composition.composingElement() !== this.displayTarget) {
+      this.#beginUnsettled(this.displayTarget);
+    }
+    if (this.#unsettled !== null) {
+      this.#formatHeld = { display: this.#unsettled, heard: false };
+      return;
+    }
+    if (this.#composition.isComposing(event)) {
+      const composing = this.#composition.composingElement();
+      const display = composing ?? event?.target ?? (this.hasDisplayTarget ? this.displayTarget : null);
+      this.#formatHeld = display === null ? null : { display, heard: composing !== null };
+      if (composing === null && this.hasDisplayTarget && display === this.displayTarget) {
+        this.#beginUnsettled(this.displayTarget);
+      }
+    } else {
+      this.#formatHeld = null;
+      this.#reformat(true, "edit");
+    }
   }
-  /** Applies the fixed-precision rounding on blur. */
-  format() {
-    this.#reformat(true, "edit");
+  #takeFormatHeld(display) {
+    const held = this.#formatHeld;
+    this.#formatHeld = null;
+    return held !== null && held.display === display;
+  }
+  #readPageText(composing) {
+    if (this.#unsettled !== null || !this.#inCharge(composing) || this.#showsOwnRendering(this.displayTarget))
+      return;
+    const { scan } = this.#readDisplay();
+    this.#displayText.remember(this.displayTarget, this.displayTarget.value);
+    this.#renderedDisplay = this.displayTarget;
+    this.#reflect(scan.value, this.#render(scan.parts), "reconcile");
   }
-  /**
-   * 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 event `cause` selects.
-   */
   #reformat(fixedPrecision, cause) {
-    if (!this.hasDisplayTarget) return;
+    if (!this.hasDisplayTarget || this.#unsettled === this.displayTarget) return;
     const raw = this.displayTarget.value;
     const { parts, value } = this.#scan(raw);
     if (fixedPrecision) {
@@ -338,19 +671,17 @@ var CurrencyInputController = class extends Controller {
       return;
     }
     const formatted = this.#render(parts);
-    if (formatted !== raw) {
-      const caret = this.displayTarget.selectionStart;
-      const anchor = caret === null ? null : this.#significantBefore(raw, caret);
+    this.#showAtCaret(formatted, this.#significantBefore(raw, this.displayTarget.selectionStart));
+    this.#reflect(value, formatted, cause);
+  }
+  #showAtCaret(formatted, anchor) {
+    if (formatted !== this.displayTarget.value) {
       this.displayTarget.value = formatted;
       if (anchor !== null) this.#restoreCaret(formatted, anchor);
     }
-    this.#rendered = formatted;
-    this.#reflect(value, formatted, cause);
+    this.#displayText.remember(this.displayTarget, formatted);
+    this.#renderedDisplay = this.displayTarget;
   }
-  /**
-   * 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("");
@@ -362,20 +693,15 @@ var CurrencyInputController = class extends Controller {
     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;
+    this.#displayText.write(this.displayTarget, text);
+    this.#renderedDisplay = this.displayTarget;
   }
-  /**
-   * The in-progress rendering: grouped integer, sign and fraction as typed.
-   */
   #render(parts) {
     const int = parts.int === "" ? "" : this.#grouping.format(BigInt(parts.int));
     const frac = parts.hasDot ? this.#decimal + parts.frac : "";
     return parts.sign + int + frac;
   }
-  /** Restores the caret to sit just after the n-th significant character. */
   #restoreCaret(formatted, significantBefore) {
     let seen = 0;
     let position = formatted.length;
@@ -391,12 +717,8 @@ var CurrencyInputController = class extends Controller {
     } catch {
     }
   }
-  /**
-   * Counts the characters before `caret` that survive into the rendering,
-   * applying the same acceptance rules as {@link #scan} — a rejected keystroke
-   * (a mid-string sign, a second decimal mark) must not shift the anchor.
-   */
   #significantBefore(text, caret) {
+    if (caret === null) return null;
     let count = 0;
     let sawSign = false;
     let sawDigit = false;
@@ -415,13 +737,11 @@ var CurrencyInputController = class extends Controller {
     }
     return count;
   }
-  /** Digits, signs, and the decimal mark anchor the caret; grouping does not. */
   #isSignificant(ch) {
     if (ch >= "0" && ch <= "9") return true;
     if (ch === "-" || ch === "+") return true;
     return ch === this.#decimal || ch === "." && this.#group !== ".";
   }
-  /** Writes the normalized value to the field, the SR span, and the empty hook. */
   #write(value) {
     const isEmpty = value === null;
     if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
@@ -430,13 +750,6 @@ var CurrencyInputController = class extends Controller {
     }
     this.element.toggleAttribute(`data-${this.identifier}-empty`, isEmpty);
   }
-  /**
-   * {@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) return;
@@ -445,13 +758,6 @@ var CurrencyInputController = class extends Controller {
     if (cause === "edit") this.dispatch("change", { detail });
     else this.dispatch("reconcile", { detail });
   }
-  /**
-   * Scans arbitrary input text into its number-shaped parts and value. Keeps
-   * digits, one leading sign, one decimal mark, and the fraction verbatim;
-   * everything else (grouping, symbols, words) is dropped. An ASCII "." is only
-   * a decimal mark where it is not the locale's grouping separator. Precision
-   * plays no part here — rounding belongs to the blur-time format.
-   */
   #scan(text) {
     let sign = "";
     let int = "";
@@ -471,40 +777,82 @@ var CurrencyInputController = class extends Controller {
     const value = Number(`${sign}${int}.${frac}`);
     return { parts, value: Number.isFinite(value) ? value : null };
   }
-  /** Whether `ch` reads as this locale's decimal mark. */
   #isDecimalMark(ch) {
     return ch === this.#decimal || ch === "." && this.#group !== ".";
   }
-  /**
-   * 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;
-    const value = this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
+    const unsettled = this.#trackUnsettled(false);
+    if (this.#renderedDisplay === null) return;
+    const value = unsettled || 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
-   * declaration cannot be interpreted (a malformed locale or currency tag, a
-   * precision outside `Intl`'s 0–100 integer range), and rebuilds the cached
-   * formatters from the validated set.
-   */
-  #revalidate() {
+  #holdUnsettled(arriving) {
+    if (!this.#trackUnsettled(arriving)) return false;
+    this.#declarationsHeld = this.#declarationsChanged();
+    this.#resync();
+    return true;
+  }
+  #trackUnsettled(arriving) {
+    this.#forgetUnsettledOwner();
+    if (!this.hasDisplayTarget) return false;
+    const display = this.displayTarget;
+    const returned = display === this.#departed;
+    if (returned) this.#departed = null;
+    if (this.#unsettled === null && document.activeElement === display && (arriving || display !== this.#renderedDisplay || returned && !this.#showsOwnRendering(display)) && this.#composition.composingElement() !== display) {
+      this.#beginUnsettled(display);
+    }
+    return this.#unsettled !== null;
+  }
+  #beginUnsettled(display) {
+    if (this.#unsettled === null && this.#renderedDisplay === null && this.#declarationsChanged()) {
+      this.#revalidate();
+    }
+    this.#unsettled = display;
+  }
+  #forgetUnsettledOwner() {
+    if (this.#unsettled !== null && this.hasDisplayTarget && this.#unsettled !== this.displayTarget) {
+      if (this.#formatHeld?.display === this.#unsettled) this.#formatHeld = null;
+      this.#unsettled = null;
+    }
+  }
+  #protectUnsettled = (event) => {
+    this.#holdUnsettled(false);
+    if (this.#unsettled === null || event.target !== this.#unsettled) return;
+    const detail = event.detail;
+    if (detail?.attributeName === "value") event.preventDefault();
+  };
+  #declared() {
     const resolved = resolveLocale(this.element, this.localeValue);
     const usable = intlFormatter(Intl.NumberFormat, resolved, {});
-    this.#locale = usable === null ? FALLBACK_LOCALE : resolved;
-    const precision = this.precisionValue;
-    this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
-    this.#currency = "";
+    const locale = usable === null ? FALLBACK_LOCALE : resolved;
+    let currency = "";
     if (this.currencyValue !== "") {
-      const declaredCurrency = intlFormatter(Intl.NumberFormat, this.#locale, {
+      const declaredCurrency = intlFormatter(Intl.NumberFormat, locale, {
         style: "currency",
         currency: this.currencyValue
       });
-      if (declaredCurrency !== null) this.#currency = this.currencyValue;
+      if (declaredCurrency !== null) currency = this.currencyValue;
     }
+    return { locale, currency, precision: this.#safePrecision };
+  }
+  #owed(composed) {
+    if (this.#declarationsHeld) return true;
+    if (!this.hasDisplayTarget) return false;
+    const display = this.displayTarget;
+    return display !== this.#renderedDisplay || display !== composed && !this.#showsOwnRendering(display);
+  }
+  #declarationsChanged() {
+    const { locale, currency, precision } = this.#declared();
+    return locale !== this.#locale || currency !== this.#currency || precision !== this.#precision;
+  }
+  #revalidate() {
+    this.#configured = true;
+    this.#declarationsHeld = false;
+    const declared = this.#declared();
+    this.#locale = declared.locale;
+    this.#currency = declared.currency;
+    this.#precision = declared.precision;
     this.#grouping = intlFormatter(
       Intl.NumberFormat,
       this.#locale,
@@ -544,12 +892,6 @@ var CurrencyInputController = class extends Controller {
       if (digit !== String(i)) this.#digits.set(digit, String(i));
     }
   }
-  /**
-   * Maps the locale's own digits to ASCII, folds full-width forms (the digits,
-   * signs, and marks an IME confirms as ０-９＋－．，) through the shared
-   * half-width mapping, and reads U+2212 MINUS SIGN as "-", which some locales'
-   * formatted output uses for negatives.
-   */
   #normalize(text) {
     let out = "";
     for (const ch of text) {
@@ -564,6 +906,15 @@ var CurrencyInputController = class extends Controller {
     }
     return out;
   }
+  get #safePrecision() {
+    return this.#numbers.read(
+      this,
+      "precision",
+      this.precisionValue,
+      _CurrencyInputController.values.precision.default,
+      _CurrencyInputController.valueConstraints.precision
+    );
+  }
 };
 function round(value, precision) {
   const factor = 10 ** Math.max(0, precision);
@@ -573,5 +924,4 @@ function round(value, precision) {
 }
 
 export { CurrencyInputController };
-//# sourceMappingURL=currency_input_controller.js.map
 //# sourceMappingURL=currency_input_controller.js.map