stimeo-ui 0.17.0 → 0.18.1

package/dist/controllers/otp_controller.js

@@ -5,9 +5,9 @@ function sharedRegistry(key, create) {
   const scope = globalThis;
   const existing = scope[symbol];
   if (existing !== void 0) return existing;
-  const registry = create();
-  Object.defineProperty(globalThis, symbol, { value: registry });
-  return registry;
+  const registry2 = create();
+  Object.defineProperty(globalThis, symbol, { value: registry2 });
+  return registry2;
 }
 
 var ids = sharedRegistry("stimeo-ui.aria-ids.registry.v1", () => ({ counter: 0 }));
@@ -39,7 +39,21 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+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 registry = sharedRegistry(
+  "stimeo-ui.attribute-lease.registry.v1",
+  () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+);
 function isAttributeValue(value) {
   return value === null || typeof value === "string";
 }
@@ -56,24 +70,46 @@ function readLeaseRecord(element, record) {
     return void 0;
   }
 }
-var AttributeLease = class _AttributeLease {
-  static #registry = sharedRegistry(
-    "stimeo-ui.attribute-lease.registry.v1",
-    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
-  );
+function attributeStack(element, attribute) {
+  const byAttribute = registry.stacks.get(element) ?? /* @__PURE__ */ new Map();
+  registry.stacks.set(element, byAttribute);
+  const known = byAttribute.get(attribute);
+  if (known) return known;
+  const found = [];
+  for (const record of registry.names.get(attribute) ?? []) {
+    const read = readLeaseRecord(element, record);
+    if (read) found.push({ ...read, record });
+  }
+  const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+  const stack = found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+    lease: null,
+    record,
+    written,
+    original,
+    linked: linked && index > 0
+  }));
+  byAttribute.set(attribute, stack);
+  return stack;
+}
+function findHold(stack, lease, record) {
+  return stack.find((held) => held.lease === lease) ?? stack.find((held) => held.lease === null && held.record === record);
+}
+var AttributeLease = class {
   #attribute;
   #record;
   #base;
+  #preserveAuthor;
   #held = /* @__PURE__ */ new Set();
   constructor(attribute, owner, options = {}) {
     this.#attribute = attribute;
     this.#record = `data-${owner}-${attribute}-lease`;
     this.#base = options.base === true;
-    const names = _AttributeLease.#registry.names;
+    this.#preserveAuthor = options.preserveAuthor === true;
+    const names = registry.names;
     names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
   }
   write(element, value) {
-    const stack = this.#stack(element);
+    const stack = attributeStack(element, this.#attribute);
     const hold = this.#take(stack) ?? this.#acquire(element, stack);
     this.#held.add(element);
     const shows = !this.#covered(element, stack, hold);
@@ -83,8 +119,8 @@ var AttributeLease = class _AttributeLease {
   }
   return(element) {
     const held = this.#held.delete(element);
-    const known = _AttributeLease.#registry.stacks.get(element)?.has(this.#attribute);
-    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    const known = registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? attributeStack(element, this.#attribute) : [];
     const hold = this.#take(stack);
     if (!hold) return false;
     const carries = element.getAttribute(this.#attribute) === hold.written;
@@ -102,31 +138,8 @@ var AttributeLease = class _AttributeLease {
   returnAll() {
     for (const element of Array.from(this.#held)) this.return(element);
   }
-  #stack(element) {
-    const stacks = _AttributeLease.#registry.stacks;
-    const byAttribute = stacks.get(element) ?? /* @__PURE__ */ new Map();
-    stacks.set(element, byAttribute);
-    const stack = byAttribute.get(this.#attribute) ?? this.#seed(element);
-    byAttribute.set(this.#attribute, stack);
-    return stack;
-  }
-  #seed(element) {
-    const found = [];
-    for (const record of _AttributeLease.#registry.names.get(this.#attribute) ?? []) {
-      const read = readLeaseRecord(element, record);
-      if (read) found.push({ ...read, record });
-    }
-    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
-    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
-      lease: null,
-      record,
-      written,
-      original,
-      linked: linked && index > 0
-    }));
-  }
   #take(stack) {
-    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === this.#record);
+    const hold = findHold(stack, this, this.#record);
     if (hold) hold.lease = this;
     return hold;
   }
@@ -135,7 +148,7 @@ var AttributeLease = class _AttributeLease {
     const top = stack.at(-1);
     const bottom = stack[0];
     const over = top?.written === current ? top : void 0;
-    const from = this.#base ? bottom : over;
+    const from = this.#base ? this.#preserveAuthor && !stack.some((held) => held.written === current) ? void 0 : bottom : over;
     const hold = {
       lease: this,
       record: this.#record,
@@ -165,15 +178,11 @@ var AttributeLease = class _AttributeLease {
       );
     });
     for (const [name, recorded] of records) {
-      if (element.getAttribute(name) === recorded) continue;
-      if (recorded === null) element.removeAttribute(name);
-      else element.setAttribute(name, recorded);
+      setAttributeIfChanged(element, name, recorded);
     }
   }
   #reflect(element, value) {
-    if (element.getAttribute(this.#attribute) === value) return;
-    if (value === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, value);
+    setAttributeIfChanged(element, this.#attribute, value);
   }
 };
 
@@ -183,63 +192,182 @@ var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
   "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;
+  #onAbandon;
   #confirmedTarget = null;
+  #keyComposing = false;
+  #connected = false;
+  #abandoned = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
+    this.#onAbandon = options.onAbandon;
   }
   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);
   }
   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;
   }
   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;
   }
   isComposing(event) {
-    return this.#activeTargets.size > 0 || event?.isComposing === true;
+    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);
   };
-  #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();
   };
 };
 
@@ -314,6 +442,75 @@ function toHalfWidth(text) {
   return out;
 }
 
+var TimerRegistry = class {
+  ids = /* @__PURE__ */ new Set();
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+var KeyedTimers = class {
+  #timers = new SafeTimeout();
+  #pending = /* @__PURE__ */ new Map();
+  set(key, callback, delay) {
+    this.clear(key);
+    const id = this.#timers.set(() => {
+      this.#pending.delete(key);
+      callback();
+    }, delay);
+    this.#pending.set(key, id);
+  }
+  clear(key) {
+    this.#timers.clear(this.#pending.get(key) ?? -1);
+    this.#pending.delete(key);
+  }
+  clearAll() {
+    this.#timers.clearAll();
+    this.#pending.clear();
+  }
+  has(key) {
+    return this.#pending.has(key);
+  }
+};
+
+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;
@@ -330,6 +527,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -342,6 +542,34 @@ var MicrotaskCoalescer = class {
   }
 };
 
+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;
+  }
+};
+
 var MoveCounter = class {
   #sequence = 0;
   record() {
@@ -376,9 +604,6 @@ function describedByWith(described, errorId, earlier) {
 }
 var DEFAULT_PATTERN = "[0-9]";
 var DEFAULT_MATCHER = new RegExp(`^(?:${DEFAULT_PATTERN})$`);
-function hasModifier(event) {
-  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-}
 function statesDiffer(left, right) {
   return left.value !== right.value || left.state !== right.state;
 }
@@ -395,9 +620,15 @@ var OtpController = class extends Controller {
   #published = null;
   #connected = false;
   #committed = /* @__PURE__ */ new WeakMap();
+  #retained = /* @__PURE__ */ new WeakMap();
+  #inputBaselines = /* @__PURE__ */ new Map();
+  #inputExpiry = new KeyedTimers();
+  #endBaselines = /* @__PURE__ */ new Map();
+  #away = /* @__PURE__ */ new Set();
   #composing = null;
   #dropHeld = false;
-  #reconcile = new MicrotaskCoalescer(() => this.#reconcileFields());
+  #judgedBy = null;
+  #reconcile = new MorphRenderWatcher(() => this.#reconcileFields());
   #errorHidden = new AttributeLease("hidden", this.identifier);
   #state = new AttributeLease("data-state", this.identifier);
   #formReset = new FormResetWatcher(
@@ -410,36 +641,68 @@ var OtpController = class extends Controller {
   #composition = new CompositionTracker({
     onStart: (event) => {
       const field = this.#fieldFrom(event);
-      if (field) this.#composing = { field, before: field.value };
+      this.#clearInputBaseline();
+      if (field) this.#endBaselines.delete(field);
+      if (field && this.#composition.composingElement() === field) {
+        this.#composing = { field, before: field.value };
+      }
     },
     onEnd: (event) => {
-      const composing = this.#composing;
-      this.#composing = null;
       const input = this.#fieldFrom(event);
+      if (!input) return;
+      const baseline = this.#inputBaselines.get(input) ?? this.#endBaselines.get(input)?.baseline;
+      this.#clearEdits(input);
+      const composing = this.#composing;
+      if (!this.#composition.isComposing()) this.#composing = null;
       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) ?? "";
+      const text = data.length <= input.value.length ? input.value : data;
+      const commit = composing?.field !== input || text !== composing.before;
+      if (commit) this.#accept(input, text, baseline?.interrupted ? baseline : void 0);
+      else {
+        this.#restoreRetained(input);
+        if (this.#dropHeld) this.#reconcileFields();
+      }
+    },
+    onAbandon: (element, inPlace) => {
+      this.#composing = null;
+      if (inPlace && element instanceof HTMLInputElement && this.fieldTargets.includes(element)) {
+        const baseline = this.#inputBaselines.get(element) ?? {
+          field: element,
+          before: this.#committed.get(element) ?? "",
+          dropHeld: this.#dropHeld,
+          interrupted: true
+        };
+        baseline.interrupted = true;
+        this.#settleResidual(element);
+        this.#endBaselines.set(element, { text: element.value, baseline });
         this.#reconcileFields();
+      } else if (this.#dropHeld) {
+        this.#reconcile.schedule();
       }
-      if (input && commit) this.#accept(input, text);
     }
   });
   connect() {
     this.#connected = true;
     for (const field of this.fieldTargets) this.#bind(field);
     this.#formReset.observe();
-    this.#reconcile.activate();
+    this.#reconcile.observe(this.element);
     this.#adopt();
     this.#sync();
+    this.#judgedBy ??= this.#patternSource;
+    if (this.#judgedBy !== this.#patternSource) {
+      if (this.#composition.isComposing()) this.#dropHeld = true;
+      else if (this.#dropRejected()) this.#reconcile.schedule();
+    }
   }
   disconnect() {
     this.#connected = false;
     for (const field of this.fieldTargets) this.#unbind(field);
     this.#composition.disconnect();
+    this.#clearInputBaseline();
+    for (const field of this.#endBaselines.keys())
+      if (!this.#away.has(field)) this.#endBaselines.delete(field);
     this.#formReset.disconnect();
-    this.#reconcile.cancel();
+    this.#reconcile.disconnect();
     this.#dropHeld = false;
     this.#clearError();
     this.#state.return(this.element);
@@ -451,7 +714,7 @@ var OtpController = class extends Controller {
   }
   fieldTargetDisconnected(element) {
     this.#unbind(element);
-    this.#returnLeases(element);
+    if (!this.fieldTargets.includes(element)) this.#returnLeases(element);
     this.#reconcile.schedule();
   }
   valueTargetConnected() {
@@ -472,18 +735,28 @@ var OtpController = class extends Controller {
     this.#patternSource = compiled ? this.patternValue : DEFAULT_PATTERN;
     this.#pattern = compiled ?? DEFAULT_MATCHER;
     if (!this.#connected) return;
-    if (this.#composing !== null) {
+    if (this.#composition.isComposing()) {
       this.#dropHeld = true;
       return;
     }
     if (this.#dropRejected()) this.#reconcile.schedule();
   }
-  #dropRejected() {
+  #dropRejected(composing = null) {
+    if (composing === null) this.#judgedBy = this.#patternSource;
     let dropped = false;
     for (const field of this.fieldTargets) {
-      if (field.value === "" || !this.#isWritable(field)) continue;
-      if (this.#pattern.test(field.value)) continue;
-      this.#writeField(field, "");
+      if (field === composing) {
+        const committed = this.#committed.get(field) ?? "";
+        if (committed === "" || !this.#isWritable(field) || this.#pattern.test(committed)) continue;
+        this.#committed.set(field, "");
+        dropped = true;
+        continue;
+      }
+      const value = this.#settledText(field);
+      if (value === "" || !this.#isWritable(field)) continue;
+      if (this.#pattern.test(value)) continue;
+      if (this.#retained.has(field)) this.#holdText(field, "");
+      else this.#writeField(field, "");
       dropped = true;
     }
     return dropped;
@@ -491,20 +764,24 @@ var OtpController = class extends Controller {
   onInput(event) {
     const input = this.#fieldFrom(event);
     if (!input) return;
+    const baseline = this.#inputBaselines.get(input);
+    this.#clearEdits(input);
     if (this.#composition.consumesConfirmedInput(event)) return;
-    if (this.#composition.isComposing(event)) return;
-    this.#accept(input);
+    if (this.#composition.owns(event)) return;
+    this.#accept(input, input.value, baseline?.interrupted ? baseline : void 0);
   }
   onKeydown(event) {
+    this.#clearInputBaseline();
     if (isReservedArrowChord(event)) return;
     const input = this.#fieldFrom(event);
     if (!input) return;
-    if (this.#composition.isComposing(event)) return;
+    if (this.#composition.owns(event)) return;
+    if (!this.#prepareEdit(input)) return;
     const index = this.fieldTargets.indexOf(input);
     const fields = this.fieldTargets;
     switch (logicalArrowKey(event.key, this.element)) {
       case "Backspace":
-        if (hasModifier(event)) break;
+        if (hasModifierChord(event)) break;
         if (input.value && this.#isWritable(input)) {
           event.preventDefault();
           this.#writeField(input, "");
@@ -538,7 +815,7 @@ var OtpController = class extends Controller {
         break;
       }
       case "Home": {
-        if (hasModifier(event)) break;
+        if (hasModifierChord(event)) break;
         const first = fields.find((field) => this.#isFocusable(field));
         if (first) {
           event.preventDefault();
@@ -547,7 +824,7 @@ var OtpController = class extends Controller {
         break;
       }
       case "End": {
-        if (hasModifier(event)) break;
+        if (hasModifierChord(event)) break;
         const last = fields.slice().reverse().find((field) => this.#isFocusable(field));
         if (last) {
           event.preventDefault();
@@ -561,7 +838,8 @@ var OtpController = class extends Controller {
     const input = this.#fieldFrom(event);
     if (!input) return;
     event.preventDefault();
-    this.#distribute(input, toHalfWidth(event.clipboardData?.getData("text") ?? ""));
+    if (this.#prepareEdit(input))
+      this.#distribute(input, toHalfWidth(event.clipboardData?.getData("text") ?? ""), false);
   }
   onPointerDown(event) {
     const input = this.#fieldFrom(event);
@@ -579,6 +857,31 @@ var OtpController = class extends Controller {
     this.fieldTargets.find((field) => this.#isWritable(field))?.focus();
     this.#syncAndDispatch();
   }
+  #onBeforeInput = (event) => {
+    const field = event.currentTarget;
+    this.#clearEdits(field);
+    if (event.isComposing || !event.inputType || isCompositionInputType(event.inputType)) return;
+    this.#inputBaselines.set(field, {
+      field,
+      before: this.#committed.get(field) ?? "",
+      dropHeld: this.#dropHeld,
+      interrupted: false
+    });
+    this.#inputExpiry.set(field, () => this.#clearInputBaseline(field), 0);
+  };
+  #clearInputBaseline(field) {
+    if (field) {
+      this.#inputBaselines.delete(field);
+      this.#inputExpiry.clear(field);
+    } else {
+      this.#inputBaselines.clear();
+      this.#inputExpiry.clearAll();
+    }
+  }
+  #clearEdits(field) {
+    this.#clearInputBaseline(field);
+    this.#endBaselines.delete(field);
+  }
   #onFieldFocus = (event) => {
     const input = event.currentTarget;
     if (input) {
@@ -591,12 +894,24 @@ var OtpController = class extends Controller {
   }
   #bind(field) {
     field.addEventListener("focus", this.#onFieldFocus);
+    field.addEventListener("beforeinput", this.#onBeforeInput, true);
+    if (this.#away.delete(field) && document.activeElement !== field)
+      this.#endBaselines.delete(field);
     this.#composition.observe(field);
   }
   #unbind(field) {
     field.removeEventListener("focus", this.#onFieldFocus);
+    field.removeEventListener("beforeinput", this.#onBeforeInput, true);
+    this.#clearInputBaseline(field);
+    if (document.activeElement === field) this.#holdAway(field);
+    else this.#endBaselines.delete(field);
     this.#composition.unobserve(field);
-    if (this.#composing?.field === field) this.#composing = null;
+  }
+  #holdAway(field) {
+    this.#away.add(field);
+    queueMicrotask(() => {
+      if (this.#away.delete(field)) this.#endBaselines.delete(field);
+    });
   }
   #adopt() {
     for (const field of this.fieldTargets) this.#adoptField(field);
@@ -620,36 +935,49 @@ var OtpController = class extends Controller {
     }
   }
   #adoptField(field) {
-    this.#committed.set(field, field.value);
-    this.#markFilled(field, field.value);
+    if (this.#composition.composingElement() === field) return;
+    const value = this.#settledText(field);
+    this.#committed.set(field, value);
+    this.#markFilled(field, value);
   }
   #reconcileFields() {
-    if (this.#dropHeld && this.#composing === null) {
+    const composing = this.#composition.composingElement();
+    if (this.#dropHeld && composing === null) {
       this.#dropHeld = false;
       this.#dropRejected();
     }
+    for (const field of this.fieldTargets) {
+      if (field === composing) this.#markFilled(field, this.#publishedText(field));
+      else this.#adoptField(field);
+    }
     const previous = this.#published;
     const current = this.#sync();
-    if (previous && !statesDiffer(previous, current)) return;
-    this.#moves.record();
+    if (previous && !statesDiffer(previous, current)) return true;
+    const token = this.#moves.record();
     this.dispatch("reconcile", { detail: { value: current.value } });
+    return this.#moves.isLatest(token);
   }
-  #accept(input, text = input.value) {
+  #accept(input, text = input.value, baseline) {
+    if (!this.#prepareEdit(input, true)) return;
+    const before = baseline ? this.fieldTargets.map(
+      (field) => field === input ? baseline.dropHeld && !this.#pattern.test(baseline.before) ? "" : baseline.before : this.#publishedText(field)
+    ).join("") : void 0;
     const raw = toHalfWidth(text);
     if (raw === "") {
       this.#writeField(input, "");
       this.#clearError();
-      this.#syncAndDispatch();
+      this.#syncAndDispatch(before);
       return;
     }
-    this.#distribute(input, raw);
+    this.#distribute(input, raw, true, before);
   }
-  #distribute(from, text) {
+  #distribute(from, text, spare = true, before) {
     const accepted = Array.from(text).filter((char) => this.#pattern.test(char));
     let reached = false;
+    const composing = spare ? this.#composition.composingElement() : null;
     const slots = this.fieldTargets.filter((field) => {
       reached ||= field === from;
-      return reached && this.#isWritable(field);
+      return reached && field !== composing && this.#isWritable(field);
     });
     const filled = Math.min(accepted.length, slots.length);
     if (filled === 0) {
@@ -664,14 +992,76 @@ var OtpController = class extends Controller {
       if (field && char) this.#writeField(field, char);
     }
     const last = slots[filled - 1];
-    if (last) (this.#writableAfter(last) ?? last).focus();
+    if (last && composing === null) (this.#writableAfter(last) ?? last).focus();
     this.#clearError();
-    this.#syncAndDispatch();
+    this.#syncAndDispatch(before);
+  }
+  #prepareEdit(input, edit = false) {
+    if (!this.#dropHeld) return true;
+    if (edit) this.#holdText(input, this.#committed.get(input) ?? "");
+    const composing = this.#composition.composingElement();
+    if (composing !== null) this.#dropRejected(composing);
+    return this.#reconcileFields() && this.#connected && this.fieldTargets.includes(input) && this.#composition.composingElement() === composing;
+  }
+  #settleResidual(field) {
+    const raw = toHalfWidth(field.value);
+    const previous = this.#committed.get(field) ?? "";
+    const accepts = (text) => Array.from(text).length === 1 && this.#pattern.test(text);
+    const value = raw === "" || accepts(raw) ? raw : accepts(previous) ? previous : "";
+    if (this.#isWritable(field) && this.#composition.composingElement() !== field) {
+      const { selectionStart, selectionEnd } = field;
+      this.#writeField(field, value);
+      if (selectionStart !== null && selectionEnd !== null)
+        field.setSelectionRange(selectionStart, selectionEnd);
+    } else this.#holdText(field, value);
+  }
+  #holdText(field, value) {
+    const retained = { text: field.value, value };
+    this.#retained.set(field, retained);
+    field.setAttribute(this.#retainedMarker, JSON.stringify(retained));
+    this.#committed.set(field, value);
+  }
+  #settledText(field) {
+    const ending = this.#endBaselines.get(field);
+    if (ending && ending.text !== field.value) this.#clearEdits(field);
+    const retained = this.#retained.get(field) ?? this.#readRetained(field);
+    if (retained?.text === field.value) {
+      this.#retained.set(field, retained);
+      const marker = JSON.stringify(retained);
+      if (field.getAttribute(this.#retainedMarker) !== marker)
+        field.setAttribute(this.#retainedMarker, marker);
+      return retained.value;
+    }
+    this.#retained.delete(field);
+    field.removeAttribute(this.#retainedMarker);
+    return field.value;
+  }
+  get #retainedMarker() {
+    return `data-${this.identifier}-interrupted`;
+  }
+  #readRetained(field) {
+    try {
+      const record = JSON.parse(field.getAttribute(this.#retainedMarker) ?? "null");
+      if (typeof record === "object" && record !== null && "text" in record && "value" in record && typeof record.text === "string" && typeof record.value === "string") {
+        return { text: record.text, value: record.value };
+      }
+    } catch {
+      return null;
+    }
+    return null;
+  }
+  #restoreRetained(field) {
+    const retained = this.#retained.get(field);
+    if (retained?.text === field.value && this.#isWritable(field))
+      this.#writeField(field, retained.value);
   }
   #restore(field) {
     this.#writeField(field, this.#committed.get(field) ?? "");
   }
   #writeField(field, value) {
+    this.#retained.delete(field);
+    this.#endBaselines.delete(field);
+    field.removeAttribute(this.#retainedMarker);
     field.value = value;
     this.#committed.set(field, value);
     this.#markFilled(field, value);
@@ -714,7 +1104,7 @@ var OtpController = class extends Controller {
     return fields.length > 0 && fields.every((field) => this.#publishedText(field).length > 0);
   }
   #publishedText(field) {
-    return field === this.#composing?.field ? this.#committed.get(field) ?? "" : field.value;
+    return field === this.#composition.composingElement() ? this.#committed.get(field) ?? "" : this.#settledText(field);
   }
   #sync() {
     const combined = this.#combinedValue();
@@ -731,11 +1121,19 @@ var OtpController = class extends Controller {
     if (combined.length === 0) return "empty";
     return this.#isComplete() ? "complete" : "partial";
   }
-  #syncAndDispatch() {
+  #syncAndDispatch(before) {
     const previous = this.#published;
-    const { value: combined } = this.#sync();
-    if (previous?.value === combined) return;
+    const current = this.#sync();
+    const combined = current.value;
+    if ((before ?? previous?.value) === combined) {
+      if (previous && statesDiffer(previous, current)) {
+        this.#moves.record();
+        this.dispatch("reconcile", { detail: { value: combined } });
+      }
+      return;
+    }
     const token = this.#moves.record();
+    this.#endBaselines.clear();
     this.dispatch("change", { detail: { value: combined } });
     if (!this.#moves.isLatest(token)) return;
     if (this.#isComplete()) {