stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/currency_input_controller.js

@@ -1,55 +1,71 @@
 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;
+  #confirmedTarget = null;
   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);
+    target.addEventListener("keydown", this.#handleKeydown);
     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);
+    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;
   }
+  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);
   };
+  #handleKeydown = () => {
+    this.#confirmedTarget = null;
+  };
 };
 
-// src/utils/half_width.ts
 var FULL_WIDTH_SHIFT = 65248;
 function halfWidthChar(char) {
   if (char >= "\uFF01" && char <= "\uFF5E") {
@@ -58,7 +74,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);
@@ -88,42 +103,154 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
-// src/utils/locale.ts
 function resolveLocale(element, declared = "") {
   return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
 }
 
-// src/controllers/currency_input_controller.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();
+  }
+};
+
+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;
+  }
+  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();
+  }
+  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;
+  }
+};
+
 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"];
-  /** Last committed numeric value, to suppress duplicate `change` dispatches. */
+  static events = ["change", "reconcile"];
   #lastValue = null;
   #started = false;
-  /** Validated mirrors of the Values; the hot path never reads a raw Value. */
+  #changeHeld = false;
+  #composing = null;
+  #rendered = null;
   #locale;
   #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)
+    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. */
   localeValueChanged() {
     this.#applyValueChange();
   }
@@ -133,92 +260,98 @@ var CurrencyInputController = class extends Controller {
   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 (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. */
+  #applyHeldChange() {
+    if (!this.#changeHeld) return;
+    this.#changeHeld = false;
+    this.#applyValueChange();
+  }
+  #readDisplay() {
+    const text = this.displayTarget.value;
+    const own = text === this.#rendered ? this.#scan(text) : null;
+    this.#takeInDeclarations();
+    return own ?? this.#scan(text);
+  }
+  #takeInDeclarations() {
+    this.#changeHeld = false;
+    this.#revalidate();
+  }
+  #morph = new MorphRenderWatcher(() => this.#applyValueChange());
   connect() {
+    this.#morph.observe(this.element);
     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");
   }
   disconnect() {
-    this.#started = false;
+    this.#morph.disconnect();
+    this.#endUntrackedComposition();
     this.#composition.disconnect();
+    this.#started = false;
   }
-  /** Tracks composition on an arriving (or swapped-in) display and normalizes it. */
   displayTargetConnected(target) {
     this.#composition.observe(target);
-    if (this.#started) this.#reformat(true);
+    if (!this.#started || !this.hasDisplayTarget || this.displayTarget !== target) return;
+    this.#renderFixed(this.#readDisplay().value, "reconcile");
   }
   displayTargetDisconnected(target) {
     this.#composition.unobserve(target);
+    if (target === this.#composing) this.#endUntrackedComposition();
+    this.#applyValueChange();
+  }
+  #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() {
     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;
-    this.#reformat(false);
+    this.#reformat(false, "edit");
   }
-  /** Applies the fixed-precision rounding on blur. */
   format() {
-    this.#reformat(true);
-  }
-  /**
-   * 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
-   */
-  #reformat(fixedPrecision) {
+    this.#reformat(true, "edit");
+  }
+  #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,19 +361,29 @@ 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);
+  }
+  #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);
+  }
+  #show(text) {
+    if (this.displayTarget.value !== 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));
     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;
@@ -256,11 +399,6 @@ 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) {
     let count = 0;
     let sawSign = false;
@@ -280,36 +418,27 @@ 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);
     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) {
+  #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
-   * 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 = "";
@@ -329,27 +458,19 @@ 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 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.
-   */
+    const value = this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
+    this.#write(value);
+  }
   #revalidate() {
     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.#precision = this.#safePrecision;
     this.#currency = "";
     if (this.currencyValue !== "") {
       const declaredCurrency = intlFormatter(Intl.NumberFormat, this.#locale, {
@@ -397,12 +518,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) {
@@ -417,6 +532,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);
@@ -426,5 +550,4 @@ function round(value, precision) {
 }
 
 export { CurrencyInputController };
-//# sourceMappingURL=currency_input_controller.js.map
 //# sourceMappingURL=currency_input_controller.js.map