stimeo-ui 0.14.0 → 0.16.0

data/dist/controllers/otp_controller.js

@@ -106,11 +106,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;
@@ -120,6 +128,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. */
@@ -127,29 +136,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/declared_value.ts
@@ -171,6 +203,54 @@ function compileRegExp(source, anchor = "none") {
   );
 }
 
+// src/utils/form_reset_watcher.ts
+var FormResetWatcher = class {
+  #owns;
+  #onReset;
+  #frames = /* @__PURE__ */ new Set();
+  #generation = 0;
+  /**
+   * @param owns - whether `form` owns a control this controller derives from.
+   * @param onReset - the reconciliation pass, run once per honoured reset.
+   */
+  constructor(owns, onReset) {
+    this.#owns = owns;
+    this.#onReset = onReset;
+  }
+  /** Subscribes to `reset` at the document; call from `connect()`. Idempotent. */
+  observe() {
+    document.addEventListener("reset", this.#handleReset, true);
+  }
+  /** Unsubscribes and drops every pending pass; call from `disconnect()`. */
+  disconnect() {
+    document.removeEventListener("reset", this.#handleReset, true);
+    this.#generation += 1;
+    for (const frame of this.#frames) cancelAnimationFrame(frame);
+    this.#frames.clear();
+  }
+  #handleReset = (event) => {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement) || !this.#owns(form)) return;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation) return;
+      if (event.eventPhase === Event.NONE) {
+        this.#settle(event);
+        return;
+      }
+      const frame = requestAnimationFrame(() => {
+        this.#frames.delete(frame);
+        this.#settle(event);
+      });
+      this.#frames.add(frame);
+    });
+  };
+  /** Runs the pass unless a listener cancelled the reset before it landed. */
+  #settle(event) {
+    if (!event.defaultPrevented) this.#onReset();
+  }
+};
+
 // src/utils/half_width.ts
 var FULL_WIDTH_SHIFT = 65248;
 function halfWidthChar(char) {
@@ -219,6 +299,27 @@ var MicrotaskCoalescer = class {
 };
 
 // src/controllers/otp_controller.ts
+var LEASE_MARKERS = {
+  "aria-invalid": "data-otp-invalid-lease",
+  "aria-errormessage": "data-otp-errormessage-lease",
+  "aria-describedby": "data-otp-describedby-lease"
+};
+function isErrorLease(value) {
+  const lease = value;
+  return typeof lease?.written === "string" && (lease.authored === null || typeof lease.authored === "string");
+}
+function readLease(field, marker) {
+  try {
+    const parsed = JSON.parse(field.getAttribute(marker) ?? "null");
+    return isErrorLease(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function describedByWith(described, errorId) {
+  const tokens = (described ?? "").split(/\s+/).filter((token) => token.length > 0 && token !== errorId);
+  return [...tokens, errorId].join(" ");
+}
 var DEFAULT_PATTERN = "[0-9]";
 var DEFAULT_MATCHER = new RegExp(`^(?:${DEFAULT_PATTERN})$`);
 function hasModifier(event) {
@@ -240,38 +341,59 @@ var OtpController = class extends Controller {
   #patternSource = DEFAULT_PATTERN;
   /** Public state carried by the last dispatch; keeps a no-op sync silent. */
   #published = null;
-  /** Field whose confirming `input` after `compositionend` is already handled. */
-  #confirmedField = null;
   /** True between connect and disconnect, so pre-connect Value changes stay silent. */
   #connected = false;
   /** Digit each field last committed, restored when rejected input replaced it. */
   #committed = /* @__PURE__ */ new WeakMap();
-  /** Collapses one batch of field target callbacks into a single reconciliation. */
+  /** The field being composed, and the text it held when the composition began. */
+  #composing = null;
+  /** A `pattern` change whose rejected characters wait for the composition to end. */
+  #dropHeld = false;
+  /**
+   * Collapses one batch of page changes — field target and `pattern` callbacks, a
+   * form reset — into a single reconciliation.
+   */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileFields());
-  #ariaInvalid = new AttributeLease("aria-invalid");
-  #ariaErrorMessage = new AttributeLease("aria-errormessage");
-  #ariaDescribedBy = new AttributeLease("aria-describedby");
   #errorHidden = new AttributeLease("hidden");
   #state = new AttributeLease("data-state");
   /** Rewinds the transient error surface before Turbo freezes the page. */
   #beforeCache = new BeforeCacheReset(() => this.#clearError());
-  /** Owns IME lifecycle state across every digit field. */
+  /** Reads the fields back once a native reset restored them, as a reconciliation. */
+  #formReset = new FormResetWatcher(
+    (form) => this.#ownedBy(form),
+    () => {
+      this.#adopt();
+      this.#reconcile.schedule();
+    }
+  );
+  /**
+   * Owns IME lifecycle state across every digit field. When a composition ends, a
+   * `pattern` drop it held back applies first — it was declared first — and the
+   * user's commit is taken after it.
+   */
   #composition = new CompositionTracker({
-    onStart: () => {
-      this.#confirmedField = null;
+    onStart: (event) => {
+      const field = this.#fieldFrom(event);
+      if (field) this.#composing = { field, before: field.value };
     },
     onEnd: (event) => {
+      const composing = this.#composing;
+      this.#composing = null;
       const input = this.#fieldFrom(event);
-      if (!input) return;
-      this.#confirmedField = input;
-      const committed = event.data ?? "";
-      this.#accept(input, committed.length > input.value.length ? committed : input.value);
+      const data = event.data ?? "";
+      const text = input && data.length <= input.value.length ? input.value : data;
+      const commit = input !== null && (composing?.field !== input || text !== composing.before);
+      if (this.#dropHeld) {
+        if (input && commit) input.value = this.#committed.get(input) ?? "";
+        this.#reconcileFields();
+      }
+      if (input && commit) this.#accept(input, text);
     }
   });
   connect() {
     this.#connected = true;
     for (const field of this.fieldTargets) this.#bind(field);
-    document.addEventListener("reset", this.#onReset, true);
+    this.#formReset.observe();
     this.#beforeCache.activate();
     this.#reconcile.activate();
     this.#adopt();
@@ -281,9 +403,10 @@ var OtpController = class extends Controller {
     this.#connected = false;
     for (const field of this.fieldTargets) this.#unbind(field);
     this.#composition.disconnect();
-    document.removeEventListener("reset", this.#onReset, true);
+    this.#formReset.disconnect();
     this.#beforeCache.deactivate();
     this.#reconcile.cancel();
+    this.#dropHeld = false;
     this.#clearError();
     this.#state.return(this.element);
   }
@@ -300,18 +423,29 @@ var OtpController = class extends Controller {
   /** Releases a dropped field's listeners and leases, then reconciles the rest. */
   fieldTargetDisconnected(element) {
     this.#unbind(element);
-    this.#returnFieldLeases(element);
+    this.#returnLeases(element);
     this.#reconcile.schedule();
   }
   /**
    * Re-validates a changed `pattern` declaration once and drops any entered digit
    * the new pattern no longer accepts, so the combined value stays interpretable.
+   * The page changed the declaration, so the move joins the same reconciliation
+   * as fields added or removed in that mutation. While a field is composing, its
+   * text is the IME's, and the drop waits for the composition to end.
    */
   patternValueChanged() {
     const compiled = compileRegExp(this.patternValue, "exact");
     this.#patternSource = compiled ? this.patternValue : DEFAULT_PATTERN;
     this.#pattern = compiled ?? DEFAULT_MATCHER;
     if (!this.#connected) return;
+    if (this.#composing !== null) {
+      this.#dropHeld = true;
+      return;
+    }
+    if (this.#dropRejected()) this.#reconcile.schedule();
+  }
+  /** Empties every writable field holding a character the pattern rejects; whether one did. */
+  #dropRejected() {
     let dropped = false;
     for (const field of this.fieldTargets) {
       if (field.value === "" || !this.#isWritable(field)) continue;
@@ -319,15 +453,13 @@ var OtpController = class extends Controller {
       this.#writeField(field, "");
       dropped = true;
     }
-    if (dropped) this.#syncAndDispatch();
+    return dropped;
   }
   /** Handles keystroke inputs, distributes autofilled text, and advances focus. */
   onInput(event) {
     const input = this.#fieldFrom(event);
     if (!input) return;
-    const confirmed = this.#confirmedField;
-    this.#confirmedField = null;
-    if (confirmed === input) return;
+    if (this.#composition.consumesConfirmedInput(event)) return;
     if (this.#composition.isComposing(event)) return;
     this.#accept(input);
   }
@@ -336,7 +468,6 @@ var OtpController = class extends Controller {
     if (isReservedArrowChord(event)) return;
     const input = this.#fieldFrom(event);
     if (!input) return;
-    this.#confirmedField = null;
     if (this.#composition.isComposing(event)) return;
     const index = this.fieldTargets.indexOf(input);
     const fields = this.fieldTargets;
@@ -400,7 +531,6 @@ var OtpController = class extends Controller {
     const input = this.#fieldFrom(event);
     if (!input) return;
     event.preventDefault();
-    this.#confirmedField = null;
     this.#distribute(input, toHalfWidth(event.clipboardData?.getData("text") ?? ""));
   }
   /**
@@ -431,16 +561,6 @@ var OtpController = class extends Controller {
       input.select();
     }
   };
-  /** Reconciles derived state after a non-cancelled reset restores the fields. */
-  #onReset = (event) => {
-    const form = event.target;
-    if (!(form instanceof HTMLFormElement) || !this.#ownedBy(form)) return;
-    queueMicrotask(() => {
-      if (event.defaultPrevented) return;
-      this.#adopt();
-      this.#syncAndDispatch();
-    });
-  };
   /** Whether a form owns at least one field or the hidden combined value. */
   #ownedBy(form) {
     if (this.fieldTargets.some((field) => field.form === form)) return true;
@@ -453,7 +573,7 @@ var OtpController = class extends Controller {
   #unbind(field) {
     field.removeEventListener("focus", this.#onFieldFocus);
     this.#composition.unobserve(field);
-    if (this.#confirmedField === field) this.#confirmedField = null;
+    if (this.#composing?.field === field) this.#composing = null;
   }
   /** Reads every field back so a restored or reset group starts consistent. */
   #adopt() {
@@ -461,25 +581,55 @@ var OtpController = class extends Controller {
     this.#clearError();
     if (this.hasErrorTarget) this.errorTarget.setAttribute("hidden", "");
   }
+  /** Writes one error attribute, keeping the first authored value it displaces. */
+  #lease(field, attribute, value) {
+    const marker = LEASE_MARKERS[attribute];
+    const held = readLease(field, marker);
+    const authored = held ? held.authored : field.getAttribute(attribute);
+    field.setAttribute(marker, JSON.stringify({ authored, written: value }));
+    field.setAttribute(attribute, value);
+  }
+  /** Gives one field's error attributes back where they still hold what this wrote. */
+  #returnLeases(field) {
+    for (const [attribute, marker] of Object.entries(LEASE_MARKERS)) {
+      const held = readLease(field, marker);
+      if (!held) continue;
+      field.removeAttribute(marker);
+      if (field.getAttribute(attribute) !== held.written) continue;
+      if (held.authored === null) field.removeAttribute(attribute);
+      else field.setAttribute(attribute, held.authored);
+    }
+  }
   /** Takes one field's current value as the truth behind its derived state. */
   #adoptField(field) {
     this.#committed.set(field, field.value);
     this.#markFilled(field, field.value);
   }
   /**
-   * Absorbs a batch of field additions or removals as one state transition.
+   * Absorbs one batch of page changes — fields added or removed, entered digits a
+   * new `pattern` rejects, fields a native form reset restored — as one state
+   * transition.
    *
-   * The page, not the user, moved the state here, so it is reported as
-   * `reconcile`: automation listening for `change` must not read a re-render as
-   * an edit, and a passcode that happens to end up full must not fire the
+   * Nobody edited the passcode here, so the move is reported as `reconcile`:
+   * automation listening for `change` must not read a re-render or a reset as an
+   * edit, and a passcode that happens to end up full must not fire the
    * `complete` that submits it.
    *
    * Completeness moves on its own when the field count changes: dropping a
    * trailing empty field completes a passcode whose combined value never moved,
    * and adding one un-completes it. Comparing the whole derived state, not the
    * string it contains, is what makes those transitions reportable.
+   *
+   * A change already in the DOM — a field added or removed, a reset — is
+   * published at once, even while a field is composing: that field counts by the
+   * character it had committed, never by the IME's uncommitted text. Only a
+   * `pattern` drop waits for the composition to end.
    */
   #reconcileFields() {
+    if (this.#dropHeld && this.#composing === null) {
+      this.#dropHeld = false;
+      this.#dropRejected();
+    }
     const previous = this.#published;
     const current = this.#sync();
     if (previous && !statesDiffer(previous, current)) return;
@@ -571,12 +721,16 @@ var OtpController = class extends Controller {
     return this.fieldTargets.find((field) => field === input) ?? null;
   }
   #combinedValue() {
-    return this.fieldTargets.map((field) => field.value).join("");
+    return this.fieldTargets.map((field) => this.#publishedText(field)).join("");
   }
   /** Every field carries a character, and there is at least one field. */
   #isComplete() {
     const fields = this.fieldTargets;
-    return fields.length > 0 && fields.every((field) => field.value.length > 0);
+    return fields.length > 0 && fields.every((field) => this.#publishedText(field).length > 0);
+  }
+  /** A field's text as the combined value counts it: a composing field by its committed character. */
+  #publishedText(field) {
+    return field === this.#composing?.field ? this.#committed.get(field) ?? "" : field.value;
   }
   /**
    * Mirrors the combined value into the form and the root's readable state, and
@@ -610,31 +764,20 @@ var OtpController = class extends Controller {
   #showError() {
     const errorId = this.hasErrorTarget ? ensureId(this.errorTarget, "stimeo--otp-error") : null;
     for (const field of this.fieldTargets) {
-      this.#ariaInvalid.write(field, "true");
+      this.#lease(field, "aria-invalid", "true");
       if (!errorId) continue;
-      this.#ariaErrorMessage.write(field, errorId);
-      this.#ariaDescribedBy.write(field, this.#describedByWith(field, errorId));
+      this.#lease(field, "aria-errormessage", errorId);
+      const described = field.getAttribute("aria-describedby");
+      this.#lease(field, "aria-describedby", describedByWith(described, errorId));
     }
     if (this.hasErrorTarget) this.#errorHidden.write(this.errorTarget, null);
     this.dispatch("invalid", { detail: { pattern: this.#patternSource } });
   }
   /** Returns every error lease, restoring the authored error surface. */
   #clearError() {
-    this.#ariaInvalid.returnAll();
-    this.#ariaErrorMessage.returnAll();
-    this.#ariaDescribedBy.returnAll();
+    for (const field of this.fieldTargets) this.#returnLeases(field);
     this.#errorHidden.returnAll();
   }
-  #returnFieldLeases(field) {
-    this.#ariaInvalid.return(field);
-    this.#ariaErrorMessage.return(field);
-    this.#ariaDescribedBy.return(field);
-  }
-  /** The field's own description tokens with the error id appended once. */
-  #describedByWith(field, errorId) {
-    const tokens = (field.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((token) => token.length > 0 && token !== errorId);
-    return [...tokens, errorId].join(" ");
-  }
 };
 
 export { OtpController };