stimeo-ui 0.15.0 → 0.16.0

package/dist/controllers/number_input_controller.js

@@ -79,11 +79,19 @@ var BeforeCacheReset = class _BeforeCacheReset {
 };
 
 // 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;
@@ -93,6 +101,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. */
@@ -100,31 +109,74 @@ 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/field_mirror.ts
+function commitEdit(control) {
+  control.dispatchEvent(new Event("input", { bubbles: true }));
+  control.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+// 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;
+}
+function toHalfWidth(text) {
+  let out = "";
+  for (const char of text) out += halfWidthChar(char);
+  return out;
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -358,15 +410,34 @@ var NumberInputController = class _NumberInputController extends Controller {
   #globalGuards = null;
   /** Per-target guards allow an old button to be released without touching its replacement. */
   #buttonGuards = /* @__PURE__ */ new Map();
-  /** Tracks IME lifecycle on the current input, including confirming keys without a signal. */
-  #composition = new CompositionTracker();
+  /**
+   * Tracks IME lifecycle on the current input, including confirming keys without a
+   * signal, and runs a reconciliation the composition held back once it ends.
+   */
+  #composition = new CompositionTracker({
+    onEnd: () => {
+      if (this.#reconcileHeld) this.#repaint.schedule();
+    }
+  });
+  /** A reconciliation that arrived while the input was composing. */
+  #reconcileHeld = false;
   /** Restores authored custom-spinbutton ARIA when a target leaves or the controller stops. */
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #ariaValueNow = new AttributeLease("aria-valuenow");
   #ariaValueMin = new AttributeLease("aria-valuemin");
   #ariaValueMax = new AttributeLease("aria-valuemax");
-  /** Last reconciled or user-committed numeric value. */
+  /**
+   * The number shown last — reconciled or committed by the user — which the next
+   * move is measured from; `null` while the field is blank, and before this
+   * instance has shown one. A disconnect keeps it for the same instance
+   * connecting again.
+   */
   #lastValue = null;
+  /**
+   * Whether `connect()` has run and `disconnect()` has not since. The pass
+   * `connect()` runs takes the baseline without reporting it.
+   */
+  #connected = false;
   /** Timers for the hold delay and the suppress-reset safety net. */
   #holdTimeouts = new SafeTimeout();
   /** The running auto-repeat interval (one at a time). */
@@ -394,9 +465,16 @@ var NumberInputController = class _NumberInputController extends Controller {
     window.addEventListener("pointercancel", this.#onPointerEnd, { signal });
     window.addEventListener("blur", this.#onWindowBlur, { signal });
     this.#reconcile();
+    this.#connected = true;
   }
-  /** Releases listeners, derived attributes, timers, and transient value state. */
+  /**
+   * Releases listeners, derived attributes, timers, and the hold state. The number
+   * shown last stays: the pass the next `connect()` runs takes a new one without a
+   * report from an input that is present, and with none it stays the number an
+   * input arriving later is compared with.
+   */
   disconnect() {
+    this.#connected = false;
     this.#repaint.cancel();
     this.#composition.disconnect();
     this.#beforeCache.deactivate();
@@ -418,7 +496,6 @@ var NumberInputController = class _NumberInputController extends Controller {
     this.#ariaValueNow.returnAll();
     this.#ariaValueMin.returnAll();
     this.#ariaValueMax.returnAll();
-    this.#lastValue = null;
   }
   /** Reconciles the value against a minimum changed by application code or a Turbo morph. */
   minValueChanged() {
@@ -437,12 +514,15 @@ var NumberInputController = class _NumberInputController extends Controller {
     this.#composition.observe(input);
     this.#repaint.schedule();
   }
-  /** Releases ARIA and composition state owned by an input that left the controller. */
+  /**
+   * Releases ARIA and composition state owned by an input that left the controller.
+   * The number it showed stays the baseline, so an input swapped in holding another
+   * number is reported as `reconcile`.
+   */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
     this.#releaseInputAria(input);
     this.#stopHold(false);
-    this.#lastValue = null;
     this.#repaint.schedule();
   }
   /** Wires focus preservation and hold behavior on a runtime increment target. */
@@ -520,7 +600,7 @@ var NumberInputController = class _NumberInputController extends Controller {
         return;
     }
     event.preventDefault();
-    this.#commit(next);
+    this.#commit(next, true);
   }
   /**
    * Wires a step button: `pointerdown` keeps focus on the input and arms the
@@ -624,42 +704,58 @@ var NumberInputController = class _NumberInputController extends Controller {
    *
    * @returns Whether the value changed (drives the auto-repeat's bound stop).
    */
-  #commit(raw) {
+  #commit(raw, report = false) {
     const value = this.#normalize(raw);
     const changed = this.#lastValue === null || value !== this.#lastValue;
+    const shown = this.inputTarget.value;
     this.#write(value);
     this.#lastValue = value;
+    if (report && shown !== this.inputTarget.value) commitEdit(this.inputTarget);
     if (changed) this.dispatch("change", { detail: { value } });
     return changed;
   }
   /** Commits an adjacent endpoint/grid value and reports whether it moved. */
   #commitStep(count) {
     if (!this.hasInputTarget) return false;
-    return this.#commit(stepSteppedValue(this.#currentValue(), count, this.#steppedRange));
+    return this.#commit(stepSteppedValue(this.#currentValue(), count, this.#steppedRange), true);
   }
   /**
-   * Reflects the current value after a range or step morph, reporting a moved
-   * value as `reconcile`.
+   * Reflects the current value after a range, step or input change, reporting a
+   * number that moved from the one shown last as `reconcile`. While the input is
+   * composing, its text is the IME's: the pass waits for the composition to end
+   * instead of reading and rewriting it. With no input there is nothing to show,
+   * and the number shown last stays the baseline for the input that comes next.
    *
    * @stimeoRenderRoot
    */
   #reconcile() {
-    if (!this.hasInputTarget) {
-      this.#lastValue = null;
+    if (!this.hasInputTarget) return;
+    if (this.#composition.isComposing()) {
+      this.#reconcileHeld = true;
       return;
     }
+    this.#reconcileHeld = false;
+    const previous = this.#lastValue;
     if (this.inputTarget.value.trim() !== "") {
-      const previous = this.#lastValue;
       const value = this.#normalize(this.#currentValue());
       this.#write(value);
       this.#lastValue = value;
-      if (previous !== null && value !== previous) {
-        this.dispatch("reconcile", { detail: { value } });
-      }
     } else {
       this.#lastValue = null;
       this.#reflectEmpty();
     }
+    this.#reportMove(previous);
+  }
+  /**
+   * Reports the number shown as `reconcile` when a change the page made moved it
+   * from `previous`. The page moved it, so it is reported apart from `change`,
+   * which stays reserved for user edits. A blank field reports nothing, the way a
+   * user blanking it does: both events carry a number.
+   */
+  #reportMove(previous) {
+    const value = this.#lastValue;
+    if (!this.#connected || value === null || value === previous) return;
+    this.dispatch("reconcile", { detail: { value } });
   }
   /** Reflects `value` on the input (and ARIA for non-native hosts) and the buttons. */
   #write(value) {
@@ -719,10 +815,17 @@ var NumberInputController = class _NumberInputController extends Controller {
     button.disabled = false;
     button.removeAttribute(OWNED_DISABLED);
   }
-  /** The current numeric value, falling back to a finite min (else 0) when blank. */
+  /**
+   * The current numeric value, falling back to a finite min (else 0) when blank.
+   * Every read of the field's number comes through here, and the text is read
+   * through the shared half-width mapping: a text-type spinbutton holds whatever an
+   * IME confirmed, full-width digits and signs included (`３４`, `－５`), while a
+   * native number field's value is already half-width or empty.
+   */
   #currentValue() {
-    const parsed = Number(this.inputTarget.value);
-    if (Number.isFinite(parsed) && this.inputTarget.value.trim() !== "") return parsed;
+    const text = toHalfWidth(this.inputTarget.value);
+    const parsed = Number(text);
+    if (Number.isFinite(parsed) && text.trim() !== "") return parsed;
     return Number.isFinite(this.minValue) ? this.minValue : 0;
   }
   /** Clamps to `[min, max]` and snaps to the step grid anchored at a finite min (else 0). */