stimeo-ui 0.7.0 → 0.9.0

data/dist/controllers/currency_input_controller.js

@@ -1,5 +1,63 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/currency_input_controller.ts
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  constructor(options = {}) {
+    this.#onStart = options.onStart;
+    this.#onEnd = options.onEnd;
+  }
+  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
+  observe(target) {
+    if (this.#observedTargets.has(target)) return;
+    target.addEventListener("compositionstart", this.#handleStart);
+    target.addEventListener("compositionend", this.#handleEnd);
+    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);
+    this.#activeTargets.delete(target);
+  }
+  /** 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);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
+// src/utils/half_width.ts
+var FULL_WIDTH_SHIFT = 65248;
+function halfWidthChar(char) {
+  if (char >= "\uFF01" && char <= "\uFF5E") {
+    return String.fromCharCode(char.charCodeAt(0) - FULL_WIDTH_SHIFT);
+  }
+  return char === "\u3000" ? " " : char;
+}
+
 // src/controllers/currency_input_controller.ts
 var CurrencyInputController = class extends Controller {
   static targets = ["display", "field", "srValue"];
@@ -12,19 +70,92 @@ var CurrencyInputController = class extends Controller {
   static events = ["change"];
   /** Last committed numeric value, to suppress duplicate `change` dispatches. */
   #lastValue = null;
+  #started = false;
+  /** Validated mirrors of the Values; the hot path never reads a raw Value. */
+  #locale = "en-US";
+  #currency = "";
+  #precision = 2;
+  /** Formatters rebuilt only when a Value changes, 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. */
+  #composition = new CompositionTracker({
+    onEnd: () => this.#reformat(false)
+  });
+  /** Re-validates on declaration changes and re-renders the committed display. */
+  localeValueChanged() {
+    this.#applyValueChange();
+  }
+  currencyValueChanged() {
+    this.#applyValueChange();
+  }
+  precisionValueChanged() {
+    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.
+   */
+  #applyValueChange() {
+    const scan = this.#started && this.hasDisplayTarget ? this.#scan(this.displayTarget.value) : null;
+    this.#revalidate();
+    if (!scan || !this.hasDisplayTarget) return;
+    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, "");
+    } else {
+      const rounded = round(scan.value, this.#precision);
+      const formatted = this.#fixed.format(rounded);
+      this.displayTarget.value = formatted;
+      this.#reflect(rounded, formatted);
+    }
+  }
   /** Normalizes any pre-filled display value to its fixed-precision form. */
   connect() {
+    this.#started = true;
     if (!this.hasDisplayTarget) return;
-    const parsed = this.#parse(this.displayTarget.value);
-    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);
-    if (this.displayTarget.value.trim() !== "") {
-      this.#reformat(true);
-    } else {
+    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);
     }
   }
+  disconnect() {
+    this.#started = false;
+    this.#composition.disconnect();
+  }
+  /** Tracks composition on an arriving (or swapped-in) display and normalizes it. */
+  displayTargetConnected(target) {
+    this.#composition.observe(target);
+    if (this.#started) this.#reformat(true);
+  }
+  displayTargetDisconnected(target) {
+    this.#composition.unobserve(target);
+  }
+  /** 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. */
+  srValueTargetConnected() {
+    if (this.#started) this.#resync();
+  }
   /** Re-groups digits as the user types, preserving the caret position. */
-  onInput() {
+  onInput(event) {
+    if (this.#composition.isComposing(event)) return;
     this.#reformat(false);
   }
   /** Applies the fixed-precision rounding on blur. */
@@ -33,112 +164,212 @@ var CurrencyInputController = class extends Controller {
   }
   /**
    * Parses the display value, rewrites it grouped (optionally at fixed
-   * precision), keeps the caret stable by digit count, and syncs the field,
-   * the screen-reader span, and the `change` event.
+   * precision), keeps the caret stable by significant characters, and syncs the
+   * field, the screen-reader span, and the `change` event.
+   *
+   * @stimeoRenderRoot
    */
   #reformat(fixedPrecision) {
     if (!this.hasDisplayTarget) return;
     const raw = this.displayTarget.value;
-    const number = this.#parse(raw);
-    if (number === null) {
-      this.displayTarget.value = "";
-      this.#reflect(null, "");
+    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);
       return;
     }
-    const value = fixedPrecision ? round(number, this.precisionValue) : number;
-    const caret = this.displayTarget.selectionStart;
-    const digitsBeforeCaret = typeof caret === "number" ? countDigits(raw.slice(0, caret)) : null;
-    const formatted = this.#formatNumber(value, fixedPrecision);
-    this.displayTarget.value = formatted;
-    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);
-    this.#reflect(value, formatted);
-  }
-  /** Restores the caret to sit just after the n-th digit of the new string. */
-  #restoreCaret(formatted, digitsBefore) {
+    const formatted = this.#render(parts);
+    if (formatted !== raw) {
+      const caret = this.displayTarget.selectionStart;
+      const anchor = caret === null ? null : this.#significantBefore(raw, caret);
+      this.displayTarget.value = formatted;
+      if (anchor !== null) this.#restoreCaret(formatted, anchor);
+    }
+    this.#reflect(value, value === null ? "" : formatted);
+  }
+  /**
+   * The in-progress rendering: grouped integer, sign and fraction as typed.
+   *
+   * @stimeoRenderRoot
+   */
+  #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;
     for (let i = 0; i < formatted.length; i++) {
-      if (seen >= digitsBefore) {
+      if (seen >= significantBefore) {
         position = i;
         break;
       }
-      if (/\d/.test(formatted[i])) seen += 1;
+      if (this.#isSignificant(formatted[i])) seen += 1;
     }
     try {
       this.displayTarget.setSelectionRange(position, position);
     } catch {
     }
   }
-  /** Writes the normalized value to the field, the SR span, and `change`. */
-  #reflect(value, formatted) {
+  /**
+   * 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) {
+    let count = 0;
+    let sawSign = false;
+    let sawDigit = false;
+    let sawDot = false;
+    for (const ch of this.#normalize(text.slice(0, caret))) {
+      if (ch >= "0" && ch <= "9") {
+        count += 1;
+        sawDigit = true;
+      } else if ((ch === "-" || ch === "+") && !sawSign && !sawDigit && !sawDot) {
+        count += 1;
+        sawSign = true;
+      } else if (this.#isDecimalMark(ch) && !sawDot) {
+        count += 1;
+        sawDot = true;
+      }
+    }
+    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);
     if (this.hasSrValueTarget) {
-      this.srValueTarget.textContent = isEmpty ? "" : this.#accessibleText(value);
+      this.srValueTarget.textContent = isEmpty ? "" : this.#accessible.format(value);
     }
     this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+  }
+  /** {@link #write}, then reports a moved value as `change` (`""` rides with `null`). */
+  #reflect(value, formatted) {
+    this.#write(value);
     if (value !== this.#lastValue) {
       this.#lastValue = value;
-      if (!isEmpty) this.dispatch("change", { detail: { value, formatted } });
+      this.dispatch("change", { detail: { value, formatted } });
     }
   }
-  /** Parses arbitrary input text into a finite number, or `null` when blank. */
-  #parse(text) {
-    if (text.trim() === "") return null;
-    const { decimal } = this.#separators();
-    let cleaned = "";
-    let sawDot = false;
-    for (let i = 0; i < text.length; i++) {
-      const ch = text[i];
-      if (ch >= "0" && ch <= "9") cleaned += ch;
-      else if ((ch === "-" || ch === "+") && cleaned === "") cleaned += ch;
-      else if ((ch === decimal || ch === ".") && !sawDot) {
-        cleaned += ".";
-        sawDot = true;
+  /**
+   * 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 = "";
+    let hasDot = false;
+    let frac = "";
+    for (const ch of this.#normalize(text)) {
+      if (ch >= "0" && ch <= "9") {
+        if (hasDot) frac += ch;
+        else int += ch;
+      } else if ((ch === "-" || ch === "+") && sign === "" && int === "" && !hasDot) {
+        sign = ch;
+      } else if (this.#isDecimalMark(ch) && !hasDot) {
+        hasDot = true;
       }
     }
-    if (cleaned === "" || cleaned === "-" || cleaned === "+" || cleaned === ".") return null;
-    const value = Number(cleaned);
-    return Number.isFinite(value) ? value : null;
+    const parts = { sign, int, hasDot, frac };
+    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 !== ".";
   }
-  /** Formats a number with grouping for the display field. */
-  #formatNumber(value, fixedPrecision) {
-    const formatter = new Intl.NumberFormat(this.localeValue, {
+  /** Re-syncs field / srValue / hook from the current display without dispatching. */
+  #resync() {
+    if (!this.hasDisplayTarget) return;
+    this.#write(this.#scan(this.displayTarget.value).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() {
+    this.#locale = "en-US";
+    try {
+      new Intl.NumberFormat(this.localeValue);
+      this.#locale = this.localeValue;
+    } catch {
+    }
+    const precision = this.precisionValue;
+    this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
+    this.#currency = "";
+    if (this.currencyValue !== "") {
+      try {
+        new Intl.NumberFormat(this.#locale, { style: "currency", currency: this.currencyValue });
+        this.#currency = this.currencyValue;
+      } catch {
+      }
+    }
+    this.#grouping = new Intl.NumberFormat(this.#locale, {
+      useGrouping: true,
+      maximumFractionDigits: 0
+    });
+    this.#fixed = new Intl.NumberFormat(this.#locale, {
       useGrouping: true,
-      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,
-      maximumFractionDigits: this.precisionValue
+      minimumFractionDigits: this.#precision,
+      maximumFractionDigits: this.#precision
     });
-    return formatter.format(value);
-  }
-  /** The text announced to assistive tech (currency-aware when configured). */
-  #accessibleText(value) {
-    if (this.currencyValue) {
-      return new Intl.NumberFormat(this.localeValue, {
-        style: "currency",
-        currency: this.currencyValue
-      }).format(value);
+    this.#accessible = this.#currency ? new Intl.NumberFormat(this.#locale, { style: "currency", currency: this.#currency }) : this.#fixed;
+    const parts = new Intl.NumberFormat(this.#locale).formatToParts(11111.1);
+    this.#group = parts.find((p) => p.type === "group")?.value ?? ",";
+    this.#decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    this.#digits.clear();
+    const digitFormatter = new Intl.NumberFormat(this.#locale, { useGrouping: false });
+    for (let i = 0; i <= 9; i++) {
+      const digit = digitFormatter.format(i);
+      if (digit !== String(i)) this.#digits.set(digit, String(i));
     }
-    return new Intl.NumberFormat(this.localeValue, {
-      minimumFractionDigits: this.precisionValue,
-      maximumFractionDigits: this.precisionValue
-    }).format(value);
-  }
-  /** Resolves the locale's grouping and decimal separator characters. */
-  #separators() {
-    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);
-    const group = parts.find((p) => p.type === "group")?.value ?? ",";
-    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
-    return { group, decimal };
+  }
+  /**
+   * 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) {
+      const mapped = this.#digits.get(ch);
+      if (mapped !== void 0) {
+        out += mapped;
+      } else if (ch === "\u2212") {
+        out += "-";
+      } else {
+        out += halfWidthChar(ch);
+      }
+    }
+    return out;
   }
 };
-function countDigits(text) {
-  let count = 0;
-  for (const ch of text) if (ch >= "0" && ch <= "9") count += 1;
-  return count;
-}
 function round(value, precision) {
   const factor = 10 ** Math.max(0, precision);
   const rounded = Math.round(value * factor) / factor;
+  if (!Number.isFinite(rounded)) return value;
   return rounded === 0 ? 0 : rounded;
 }