stimeo-ui 0.14.0 → 0.16.0

package/dist/controllers/optimistic_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/detach_gate.ts","../../src/controllers/optimistic_controller.ts"],"names":[],"mappings":"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","file":"optimistic_controller.js","sourcesContent":["/**\n * Shared \"in-page move vs real detach\" discriminator for `disconnect()`.\n *\n * A mid-session `disconnect()` whose element is still in the document is\n * ambiguous. It can be:\n *\n * - an **in-page move** — a consumer (sortable, a teleport) re-inserted the\n *   element; Stimulus reconnects the SAME instance in the same mutation batch\n *   and the controller's runtime state must survive;\n * - a **detach that keeps the element** — `data-controller` no longer lists the\n *   identifier (a Turbo 8 morph), or the element moved outside the observed\n *   root (a scoped `Application.start(root)`, a shadow root); no reconnect will\n *   ever come and the controller must tear down or it leaks its sessions,\n *   document listeners, and moved nodes.\n *\n * Neither available signal decides this alone. A synchronous `data-controller`\n * token check catches the morph case but misses an observed-root exit (the\n * token stays, the reconnect never comes). Deferring teardown one microtask and\n * letting `connect()` cancel it catches the root exit, but leans on Stimulus\n * reconnecting moved elements within the same mutation batch — internal\n * behavior, not a public contract. {@link DetachGate} composes both: the token\n * check is the synchronous fast path (no probe, no reliance on batching), the\n * microtask probe is the fallback for the genuinely ambiguous remainder.\n *\n * Policy stays with the consumer; this util owns the discrimination only:\n *\n * - **Probe** ({@link disconnected}) when the teardown must eventually happen —\n *   live drag sessions, document listeners, teleported *content*. Call\n *   {@link cancel} from `connect()` (a reconnect means in-page move) and from\n *   the head of any direct teardown path (see below).\n * - **Keep** (bare {@link DetachGate.isDetached}) when undoing the ambiguous\n *   case would fight the controller's own effect: a controller that moves its\n *   OWN element (portal's no-`content` form) exits a scoped observed root as\n *   its normal job — a probe-driven teardown would restore the element into\n *   the root, reconnect, re-teleport, and disconnect again, forever. Such\n *   controllers keep their state on an ambiguous disconnect and tear down only\n *   on {@link DetachGate.isDetached}.\n *\n * Event convention for probe consumers: teardown into a dead (detached) tree is\n * silent — consumers restore from their own `connect()`; a detach that keeps the\n * tree alive must end an in-flight session with a `cancel` event, or composing\n * consumers strand their session bookkeeping.\n */\n\n/** The slice of a Stimulus controller the gate inspects. */\nexport interface DetachGateHost {\n  readonly element: Element;\n  readonly identifier: string;\n}\n\n/**\n * Per-controller-instance gate deciding whether a `disconnect()` is a real\n * detach. Hold one per controller (`#gate = new DetachGate()`) — Stimulus\n * reuses the instance across reconnects, so the pending probe state carries\n * over exactly as the protocol needs.\n *\n * @example\n * ```ts\n * #gate = new DetachGate();\n *\n * connect(): void {\n *   this.#gate.cancel(); // a reconnect: the element moved in-page\n *   // …\n * }\n *\n * disconnect(): void {\n *   this.#gate.disconnected(this, () => this.#teardown());\n * }\n *\n * #teardown(): void {\n *   this.#gate.cancel(); // disarm a still-queued probe (double-run guard)\n *   // …\n * }\n * ```\n */\nexport class DetachGate {\n  /** Set while a probe is queued, waiting for a reconnect to cancel it. */\n  #pending = false;\n\n  /**\n   * True while a probe is queued — the last disconnect was ambiguous and no\n   * reconnect has cancelled it yet. Read it from `connect()` to tell the\n   * reconnect half of an in-page move from a first connect: a controller whose\n   * initialisation restarts a measurement (a min-duration floor, an elapsed\n   * counter) must skip it for the move, where nothing actually restarted.\n   */\n  get pending(): boolean {\n    return this.#pending;\n  }\n\n  /**\n   * True when the disconnect is definitely a real detach — the element left\n   * the document, or `data-controller` no longer lists the identifier. False\n   * means ambiguous (in-page move or observed-root exit), NOT \"alive\".\n   */\n  static isDetached(host: DetachGateHost): boolean {\n    if (!host.element.isConnected) return true;\n    const tokens = (host.element.getAttribute(\"data-controller\") ?? \"\").split(/\\s+/);\n    return !tokens.includes(host.identifier);\n  }\n\n  /**\n   * Call from `disconnect()`: runs `teardown` synchronously on a definite\n   * detach (fast path), otherwise defers it one microtask — a reconnect\n   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.\n   * One microtask is the whole probe window: Stimulus reconnects a moved\n   * element within the same mutation batch, before the checkpoint drains.\n   */\n  disconnected(host: DetachGateHost, teardown: () => void): void {\n    if (DetachGate.isDetached(host)) {\n      // Also disarms a probe a previous ambiguous disconnect left queued\n      // (defer, element removed, disconnect again) — exactly one teardown.\n      this.#pending = false;\n      teardown();\n      return;\n    }\n    this.#pending = true;\n    queueMicrotask(() => {\n      if (!this.#pending) return;\n      this.#pending = false;\n      teardown();\n    });\n  }\n\n  /**\n   * Disarms a pending probe. Call from `connect()` (the reconnect that proves\n   * an in-page move) and from the head of any teardown path not routed through\n   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can\n   * never run the teardown a second time.\n   */\n  cancel(): void {\n    this.#pending = false;\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { DetachGate } from \"../utils/detach_gate\";\n\n/** Records that this controller wrote `hidden`, and the authored value to put back. */\nconst HIDDEN_MARKER = \"data-optimistic-toggled\";\n\n/** The same record for `aria-busy` on the controller element. */\nconst BUSY_MARKER = \"data-optimistic-busy\";\n\n/** Marker value standing for \"the attribute was not there\". */\nconst AUTHORED_ABSENT = \"absent\";\n\n/** Marker prefix carrying the authored attribute value that follows it. */\nconst AUTHORED_VALUE = \"value:\";\n\n/**\n * Stands in for the submission a synthetic lifecycle event does not name. Turbo\n * puts a `formSubmission` on both events, so this only ever pairs hand-dispatched\n * events with each other — one shared instance, so a start and its end match.\n */\nconst SYNTHETIC_SUBMISSION = {};\n\n/** The submission a Turbo lifecycle event belongs to. */\nfunction submissionOf(event: Event): unknown {\n  const detail = (event as CustomEvent<{ formSubmission?: unknown }>).detail;\n  return detail?.formSubmission ?? SYNTHETIC_SUBMISSION;\n}\n\n/**\n * Headless **optimistic UI** for Turbo form submissions — the one server-bound\n * behavior that needs no Action Cable: it wraps a Turbo form\n * and applies a *declared* optimistic state the moment the submission starts,\n * keeps it when the server confirms, and **rolls it back** when the submission\n * fails. The pattern: flip the like button instantly; the success response (a\n * Turbo Stream) replaces the fragment with the server truth anyway, so the\n * client only needs the instant flip and the failure rollback. Core (zero\n * dependencies — it rides Turbo's own `turbo:submit-*` events).\n *\n * Markup contract (identifier: `stimeo--optimistic`):\n *   <form data-controller=\"stimeo--optimistic\" method=\"post\" action=\"/likes\">\n *     <button type=\"submit\" aria-label=\"Like\">\n *       <span data-stimeo--optimistic-target=\"hide\">♡</span>\n *       <span hidden data-stimeo--optimistic-target=\"show\">♥</span>\n *     </button>\n *   </form>\n *\n * On `turbo:submit-start`, every `show` target is unhidden and every `hide`\n * target hidden, the element gains `data-optimistic=\"true\"` + `aria-busy=\"true\"`,\n * and the submission named by the event takes ownership of that state. On\n * `turbo:submit-end`: the terminal of any *other* submission is ignored; the\n * owner's terminal clears the pending hook and, on success, dispatches `commit`\n * (the toggled state stays — the server response owns the final DOM), or on\n * failure restores the authored markup and dispatches `rollback`.\n *\n * **Every write records what it displaced.** A target this controller hides or\n * reveals carries the authored `hidden` value in `data-optimistic-toggled`, and\n * the element carries the authored `aria-busy` in `data-optimistic-busy`, so a\n * rollback puts back exactly what the author wrote — not the inverse of whatever\n * the attribute says at that moment. The record lives in the DOM rather than in\n * memory because a Turbo cache snapshot has to carry it: `connect()` is what\n * rewinds a restored page.\n *\n * @remarks\n * Behavior only — what \"optimistic\" looks like is the author's markup (the\n * show/hide pair) and CSS (`[data-optimistic=\"true\"]`). Pairs with\n * `stimeo--submit-once` (double-submit guard) and `stimeo--live-counter`\n * (optimistic numbers). The listeners are delegated on the element, so a form\n * nested under it (or swapped for a new one) keeps working, and the submission\n * ownership is what keeps a sibling form's terminal from resolving this state.\n * With several submissions in flight the newest start owns the optimistic state,\n * so a submission whose terminal never arrives — its form replaced mid-flight —\n * cannot strand the element. `connect()` is idempotent: a Turbo cache snapshot\n * taken mid-submit is rewound, since no submission can be in flight across a\n * restore, while an in-page move (where the submission *does* survive) keeps it.\n * On a real detach the listeners go with the element.\n */\nexport class OptimisticController extends Controller<HTMLElement> {\n  static override targets = [\"show\", \"hide\"];\n  static events = [\"commit\", \"rollback\"] as const;\n\n  declare readonly showTargets: HTMLElement[];\n  declare readonly hideTargets: HTMLElement[];\n\n  /** The submission that owns the applied optimistic state, if any. */\n  #pending: unknown = null;\n\n  readonly #gate = new DetachGate();\n\n  /** True between `connect()` and `disconnect()`, so a repeat connect rewinds nothing. */\n  #connected = false;\n\n  override connect(): void {\n    // Only a page this instance did not apply the state to can be holding a stale\n    // one: a restored snapshot. An in-page move and a repeat connect both leave a\n    // live submission behind, so neither may rewind — the gate names the first and\n    // the connected flag the second.\n    const restored = !this.#connected && !this.#gate.pending;\n    this.#gate.cancel();\n    this.#connected = true;\n    if (restored && this.element.hasAttribute(\"data-optimistic\")) this.#revert();\n    this.element.addEventListener(\"turbo:submit-start\", this.#onSubmitStart);\n    this.element.addEventListener(\"turbo:submit-end\", this.#onSubmitEnd);\n  }\n\n  override disconnect(): void {\n    this.#connected = false;\n    this.element.removeEventListener(\"turbo:submit-start\", this.#onSubmitStart);\n    this.element.removeEventListener(\"turbo:submit-end\", this.#onSubmitEnd);\n    // Ownership outlives an in-page move: only a real detach forgets it.\n    this.#gate.disconnected(this, () => {\n      this.#pending = null;\n    });\n  }\n\n  readonly #onSubmitStart = (event: Event): void => {\n    this.#pending = submissionOf(event);\n    // Turbo owns `aria-busy` on a form and marks it before this event, so what is\n    // there now is Turbo's, not the author's. Recording it would put Turbo's value\n    // back on a page restored mid-submit, where no terminal ever arrives to clear it.\n    if (this.element instanceof HTMLFormElement && !this.element.hasAttribute(BUSY_MARKER)) {\n      this.element.setAttribute(BUSY_MARKER, AUTHORED_ABSENT);\n    }\n    this.#write(this.element, \"aria-busy\", \"true\", BUSY_MARKER);\n    this.element.setAttribute(\"data-optimistic\", \"true\");\n    for (const target of this.showTargets) this.#setHidden(target, false);\n    for (const target of this.hideTargets) this.#setHidden(target, true);\n  };\n\n  readonly #onSubmitEnd = (event: Event): void => {\n    // A terminal always names a submission, so an element holding none (nothing\n    // started, or this one already resolved) falls out here too.\n    if (submissionOf(event) !== this.#pending) return;\n    this.#pending = null;\n\n    const success = (event as CustomEvent<{ success?: boolean }>).detail?.success === true;\n    if (success) {\n      // Keep the toggled faces (the server response owns the final DOM) but drop\n      // their records, so a later failure cannot revert a confirmed state.\n      this.element.removeAttribute(\"data-optimistic\");\n      this.#restore(this.element, \"aria-busy\", BUSY_MARKER, \"true\");\n      for (const target of [...this.showTargets, ...this.hideTargets]) {\n        target.removeAttribute(HIDDEN_MARKER);\n      }\n      this.dispatch(\"commit\");\n    } else {\n      this.#revert();\n      this.dispatch(\"rollback\");\n    }\n  };\n\n  /** Hides or reveals a target, recording the authored `hidden` on first write. */\n  #setHidden(target: HTMLElement, hidden: boolean): void {\n    if (target.hasAttribute(\"hidden\") === hidden) return;\n    this.#write(target, \"hidden\", hidden ? \"\" : null, HIDDEN_MARKER);\n  }\n\n  /** Writes an attribute, recording what it displaced under `marker` once. */\n  #write(element: Element, attribute: string, value: string | null, marker: string): void {\n    if (!element.hasAttribute(marker)) {\n      const authored = element.getAttribute(attribute);\n      element.setAttribute(\n        marker,\n        authored === null ? AUTHORED_ABSENT : `${AUTHORED_VALUE}${authored}`,\n      );\n    }\n    if (value === null) element.removeAttribute(attribute);\n    else element.setAttribute(attribute, value);\n  }\n\n  /**\n   * Puts back the value `marker` recorded and drops the record.\n   *\n   * `written` is what this controller last put in the attribute. Anything else\n   * there now belongs to whoever wrote it — Turbo owns `aria-busy` on a form and\n   * clears it before the terminal arrives, and a consumer may have moved a face\n   * mid-flight — so the record is dropped without touching the attribute. A\n   * marker this build did not write names no authored value, so the attribute\n   * goes back to being absent.\n   */\n  #restore(element: Element, attribute: string, marker: string, written: string | null): void {\n    const recorded = element.getAttribute(marker);\n    if (recorded === null) return;\n    element.removeAttribute(marker);\n    if (element.getAttribute(attribute) !== written) return;\n    if (recorded.startsWith(AUTHORED_VALUE)) {\n      element.setAttribute(attribute, recorded.slice(AUTHORED_VALUE.length));\n      return;\n    }\n    element.removeAttribute(attribute);\n  }\n\n  /**\n   * Puts back exactly the markup this controller displaced (record-owned only).\n   *\n   * A face can be registered on both sides, and the hide pass runs last, so what\n   * this controller wrote there is `hidden` — matching it against the reveal's\n   * absent value instead would read as someone else's write and leave the face\n   * hidden. Each target is therefore restored once, against the write it last\n   * received.\n   */\n  #revert(): void {\n    this.element.removeAttribute(\"data-optimistic\");\n    this.#restore(this.element, \"aria-busy\", BUSY_MARKER, \"true\");\n    const hidden = new Set(this.hideTargets);\n    for (const target of new Set([...this.showTargets, ...this.hideTargets])) {\n      this.#restore(target, \"hidden\", HIDDEN_MARKER, hidden.has(target) ? \"\" : null);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/detach_gate.ts","../../src/utils/listener_set.ts","../../src/utils/transient_hooks.ts","../../src/controllers/optimistic_controller.ts"],"names":[],"mappings":"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","file":"optimistic_controller.js","sourcesContent":["/**\n * Shared \"in-page move vs real detach\" discriminator for `disconnect()`.\n *\n * A mid-session `disconnect()` whose element is still in the document is\n * ambiguous. It can be:\n *\n * - an **in-page move** — a consumer (sortable, a teleport) re-inserted the\n *   element; Stimulus reconnects the SAME instance in the same mutation batch\n *   and the controller's runtime state must survive;\n * - a **detach that keeps the element** — `data-controller` no longer lists the\n *   identifier (a Turbo 8 morph), or the element moved outside the observed\n *   root (a scoped `Application.start(root)`, a shadow root); no reconnect will\n *   ever come and the controller must tear down or it leaks its sessions,\n *   document listeners, and moved nodes.\n *\n * Neither available signal decides this alone. A synchronous `data-controller`\n * token check catches the morph case but misses an observed-root exit (the\n * token stays, the reconnect never comes). Deferring teardown one microtask and\n * letting `connect()` cancel it catches the root exit, but leans on Stimulus\n * reconnecting moved elements within the same mutation batch — internal\n * behavior, not a public contract. {@link DetachGate} composes both: the token\n * check is the synchronous fast path (no probe, no reliance on batching), the\n * microtask probe is the fallback for the genuinely ambiguous remainder.\n *\n * Policy stays with the consumer; this util owns the discrimination only:\n *\n * - **Probe** ({@link disconnected}) when the teardown must eventually happen —\n *   live drag sessions, document listeners, teleported *content*. Call\n *   {@link cancel} from `connect()` (a reconnect means in-page move) and from\n *   the head of any direct teardown path (see below).\n * - **Keep** (bare {@link DetachGate.isDetached}) when undoing the ambiguous\n *   case would fight the controller's own effect: a controller that moves its\n *   OWN element (portal's no-`content` form) exits a scoped observed root as\n *   its normal job — a probe-driven teardown would restore the element into\n *   the root, reconnect, re-teleport, and disconnect again, forever. Such\n *   controllers keep their state on an ambiguous disconnect and tear down only\n *   on {@link DetachGate.isDetached}.\n *\n * Event convention for probe consumers: teardown into a dead (detached) tree is\n * silent — consumers restore from their own `connect()`; a detach that keeps the\n * tree alive must end an in-flight session with a `cancel` event, or composing\n * consumers strand their session bookkeeping.\n */\n\n/** The slice of a Stimulus controller the gate inspects. */\nexport interface DetachGateHost {\n  readonly element: Element;\n  readonly identifier: string;\n}\n\n/**\n * Per-controller-instance gate deciding whether a `disconnect()` is a real\n * detach. Hold one per controller (`#gate = new DetachGate()`) — Stimulus\n * reuses the instance across reconnects, so the pending probe state carries\n * over exactly as the protocol needs.\n *\n * @example\n * ```ts\n * #gate = new DetachGate();\n *\n * connect(): void {\n *   this.#gate.cancel(); // a reconnect: the element moved in-page\n *   // …\n * }\n *\n * disconnect(): void {\n *   this.#gate.disconnected(this, () => this.#teardown());\n * }\n *\n * #teardown(): void {\n *   this.#gate.cancel(); // disarm a still-queued probe (double-run guard)\n *   // …\n * }\n * ```\n */\nexport class DetachGate {\n  /** Set while a probe is queued, waiting for a reconnect to cancel it. */\n  #pending = false;\n\n  /**\n   * True while a probe is queued — the last disconnect was ambiguous and no\n   * reconnect has cancelled it yet. Read it from `connect()` to tell the\n   * reconnect half of an in-page move from a first connect: a controller whose\n   * initialisation restarts a measurement (a min-duration floor, an elapsed\n   * counter) must skip it for the move, where nothing actually restarted.\n   */\n  get pending(): boolean {\n    return this.#pending;\n  }\n\n  /**\n   * True when the disconnect is definitely a real detach — the element left\n   * the document, or `data-controller` no longer lists the identifier. False\n   * means ambiguous (in-page move or observed-root exit), NOT \"alive\".\n   */\n  static isDetached(host: DetachGateHost): boolean {\n    if (!host.element.isConnected) return true;\n    const tokens = (host.element.getAttribute(\"data-controller\") ?? \"\").split(/\\s+/);\n    return !tokens.includes(host.identifier);\n  }\n\n  /**\n   * Call from `disconnect()`: runs `teardown` synchronously on a definite\n   * detach (fast path), otherwise defers it one microtask — a reconnect\n   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.\n   * One microtask is the whole probe window: Stimulus reconnects a moved\n   * element within the same mutation batch, before the checkpoint drains.\n   */\n  disconnected(host: DetachGateHost, teardown: () => void): void {\n    if (DetachGate.isDetached(host)) {\n      // Also disarms a probe a previous ambiguous disconnect left queued\n      // (defer, element removed, disconnect again) — exactly one teardown.\n      this.#pending = false;\n      teardown();\n      return;\n    }\n    this.#pending = true;\n    queueMicrotask(() => {\n      if (!this.#pending) return;\n      this.#pending = false;\n      teardown();\n    });\n  }\n\n  /**\n   * Disarms a pending probe. Call from `connect()` (the reconnect that proves\n   * an in-page move) and from the head of any teardown path not routed through\n   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can\n   * never run the teardown a second time.\n   */\n  cancel(): void {\n    this.#pending = false;\n  }\n}\n","/**\n * Owns every listener a controller attaches for one connected lifetime and\n * releases them together, so an event name is spelled once and the release\n * cannot drift from the registration.\n *\n * Detaching by hand repeats three things at the release site — the type, the\n * handler reference and the capture flag — and any one of them drifting leaves\n * a listener alive on an element the controller no longer drives. Aborting the\n * signal a registration was created with releases it whatever it was made of,\n * so the release site names nothing.\n *\n * One set per lifetime, held as a field and never rebuilt. {@link\n * ListenerSet.dispose} is the only thing that closes a generation, and it opens\n * the next one in the same step, so the lifecycle hooks can call `add` and\n * `dispose` in any order any number of times, and no `add` ever meets an\n * already aborted signal — a DOM that registers a listener on such a signal\n * would keep it forever. Rebuilding the set instead would leak:\n * `addEventListener` matches an existing registration on target, type, callback\n * and capture alone, so re-adding the same handler while the first registration\n * is live is discarded, and that live registration keeps the signal it was\n * attached with — a set built by a second `connect()` can never release what it\n * appears to own.\n *\n * Scope is the registration only. Timers, observers, leases and the order they\n * are unwound in stay with the controller, so `dispose()` belongs exactly where\n * the `removeEventListener` block stood. A receiver that changes at runtime (a\n * swapped target) is rebound by calling `dispose()` and then `add()` again from\n * the rebind, not by a second set.\n *\n * The set must own every registration of a tuple it holds: a listener the same\n * target already carries for the same type, callback and capture flag keeps the\n * right to remove it, and this set's `add` for that tuple is discarded. A\n * subscription shared between instances behind a participant count, or one that\n * lives for less than the connection, keeps its own pair of calls.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #listeners = new ListenerSet();\n *\n * connect(): void {\n *   this.#listeners.add(this.element, \"submit\", this.#onNativeSubmit, { capture: true });\n *   this.#listeners.add(this.element, \"turbo:submit-start\", this.#onSubmitStart);\n *   this.#listeners.add(this.element, \"turbo:submit-end\", this.#onSubmitEnd);\n * }\n *\n * disconnect(): void {\n *   this.#listeners.dispose();\n * }\n * ```\n */\nexport class ListenerSet {\n  /** The generation every `add` joins until the next `dispose()`. */\n  #abort = new AbortController();\n\n  /**\n   * Attaches `handler` to the open generation, exactly as the caller spelled it.\n   *\n   * The set supplies the signal, so `options` carries everything else the DOM\n   * accepts — `capture` included, which has to match at release time and no\n   * longer has a second place to drift from.\n   */\n  add(\n    target: EventTarget,\n    type: string,\n    handler: EventListener,\n    options?: Omit<AddEventListenerOptions, \"signal\">,\n  ): void {\n    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });\n  }\n\n  /**\n   * Releases every listener of the open generation, synchronously, and opens the\n   * next one. Idempotent, and safe before anything has been added.\n   */\n  dispose(): void {\n    this.#abort.abort();\n    this.#abort = new AbortController();\n  }\n}\n","/**\n * Drops the transient state hooks a connection inherited, so the cycle it opens\n * starts from a DOM that claims nothing.\n *\n * A transient hook is an attribute a controller writes to say \"this is happening\n * right now\" — a drag in progress, a form with unsaved edits, a refused\n * subscription. Its lifetime belongs to the interaction, not to the element, and\n * the two come apart whenever the element outlives the instance that wrote it: a\n * Turbo cache snapshot taken mid-interaction restores the hook with the markup,\n * and an element re-inserted elsewhere in the page carries it along. Nothing\n * takes such a hook off, because the instance that owned it is gone; consumer\n * CSS then keeps claiming a state no one is in.\n *\n * **`turbo:before-cache` cannot do this job**, which is why the pass belongs in\n * `connect()`: that event fires for a navigation only, so an in-page move — the\n * other half of the population — never reaches it, and a hook that arrived with\n * a moved element would survive. `connect()` covers both, because both end in a\n * connection.\n *\n * Scope is the **drop** only. What the fresh cycle should say instead is the\n * consumer's: a value re-read from the live DOM, a roster refilled by the\n * stream, a measurement retaken from the current scroll position, a slot emptied\n * of the last result. Those answers differ per consumer and none of them is a\n * hook removal, so the pass stops where every consumer agrees.\n *\n * A declaration names one group of hooks and carries no per-instance state, so\n * it belongs at module scope, shared by every instance the page connects. A\n * consumer writes as many as it has groups — hooks it drops under different\n * conditions cannot share one. The exception is a hook whose name is only known\n * at runtime, such as one built from the registered identifier: that\n * declaration is a field, because the name is.\n *\n * **A drop is not always right.** The population splits on one question: can the\n * state a hook describes outlive the instance that wrote it? Where it cannot — a\n * drag ends with the pointer, a subscription dies with its socket — dropping on\n * every connection is correct. Where it can — a submission in flight is not\n * interrupted by an in-page move — only a connection that follows a real restore\n * may drop, and the consumer answers \"did a session survive?\" with the signal it\n * already holds for its own teardown (a live-session field, a `DetachGate`\n * probe). The drop then sits behind that answer, as the second example shows.\n *\n * @example Unconditional — the state cannot outlive the instance.\n * ```ts\n * const TRANSIENT = new TransientHooks({ attributes: [\"data-sortable-dragging\"] });\n *\n * connect(): void {\n *   TRANSIENT.reset(this.element);\n * }\n * ```\n *\n * @example Gated — an in-page move must not drop a live state.\n * ```ts\n * const TRANSIENT = new TransientHooks({ attributes: [\"data-optimistic\"] });\n *\n * connect(): void {\n *   const restored = !this.#connected && !this.#gate.pending;\n *   this.#gate.cancel();\n *   this.#connected = true;\n *   if (restored) TRANSIENT.reset(this.element);\n * }\n * ```\n */\n\n/** What a consumer declares once about the hooks its interaction owns. */\nexport interface TransientHooksOptions {\n  /**\n   * The attribute names a connection may find written by an earlier one. Hooks\n   * a consumer drops under different conditions belong to different\n   * declarations, so each one can be reset on its own.\n   */\n  readonly attributes: readonly string[];\n}\n\n/**\n * One consumer's declaration of the hooks its interaction owns, dropped from an\n * element by {@link TransientHooks.reset}.\n *\n * Every member comment inside this class body is inlined into each consumer\n * bundle (`tsup` builds with `splitting: false`), so rationale belongs in this\n * file's own block, which `dist` drops, and only the contract belongs inside.\n */\nexport class TransientHooks {\n  readonly #attributes: readonly string[];\n\n  constructor(options: TransientHooksOptions) {\n    this.#attributes = options.attributes;\n  }\n\n  /** Drops the declared hooks from `element`; what it carries besides stays. */\n  reset(element: Element): void {\n    for (const attribute of this.#attributes) element.removeAttribute(attribute);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { DetachGate } from \"../utils/detach_gate\";\nimport { ListenerSet } from \"../utils/listener_set\";\nimport { TransientHooks } from \"../utils/transient_hooks\";\n\n/** The hook a connection may find written by an earlier, now-gone one. */\nconst TRANSIENT = new TransientHooks({ attributes: [\"data-optimistic\"] });\n\n/** Records that this controller wrote `hidden`, and the authored value to put back. */\nconst HIDDEN_MARKER = \"data-optimistic-toggled\";\n\n/** The same record for `aria-busy` on the controller element. */\nconst BUSY_MARKER = \"data-optimistic-busy\";\n\n/** Marker value standing for \"the attribute was not there\". */\nconst AUTHORED_ABSENT = \"absent\";\n\n/** Marker prefix carrying the authored attribute value that follows it. */\nconst AUTHORED_VALUE = \"value:\";\n\n/**\n * Stands in for the submission a synthetic lifecycle event does not name. Turbo\n * puts a `formSubmission` on both events, so this only ever pairs hand-dispatched\n * events with each other — one shared instance, so a start and its end match.\n */\nconst SYNTHETIC_SUBMISSION = {};\n\n/** The submission a Turbo lifecycle event belongs to. */\nfunction submissionOf(event: Event): unknown {\n  const detail = (event as CustomEvent<{ formSubmission?: unknown }>).detail;\n  return detail?.formSubmission ?? SYNTHETIC_SUBMISSION;\n}\n\n/**\n * Headless **optimistic UI** for Turbo form submissions — the one server-bound\n * behavior that needs no Action Cable: it wraps a Turbo form\n * and applies a *declared* optimistic state the moment the submission starts,\n * keeps it when the server confirms, and **rolls it back** when the submission\n * fails. The pattern: flip the like button instantly; the success response (a\n * Turbo Stream) replaces the fragment with the server truth anyway, so the\n * client only needs the instant flip and the failure rollback. Core (zero\n * dependencies — it rides Turbo's own `turbo:submit-*` events).\n *\n * Markup contract (identifier: `stimeo--optimistic`):\n *   <form data-controller=\"stimeo--optimistic\" method=\"post\" action=\"/likes\">\n *     <button type=\"submit\" aria-label=\"Like\">\n *       <span data-stimeo--optimistic-target=\"hide\">♡</span>\n *       <span hidden data-stimeo--optimistic-target=\"show\">♥</span>\n *     </button>\n *   </form>\n *\n * On `turbo:submit-start`, every `show` target is unhidden and every `hide`\n * target hidden, the element gains `data-optimistic=\"true\"` + `aria-busy=\"true\"`,\n * and the submission named by the event takes ownership of that state. On\n * `turbo:submit-end`: the terminal of any *other* submission is ignored; the\n * owner's terminal clears the pending hook and, on success, dispatches `commit`\n * (the toggled state stays — the server response owns the final DOM), or on\n * failure restores the authored markup and dispatches `rollback`.\n *\n * **Every write records what it displaced.** A target this controller hides or\n * reveals carries the authored `hidden` value in `data-optimistic-toggled`, and\n * the element carries the authored `aria-busy` in `data-optimistic-busy`, so a\n * rollback puts back exactly what the author wrote — not the inverse of whatever\n * the attribute says at that moment. The record lives in the DOM rather than in\n * memory because a Turbo cache snapshot has to carry it: `connect()` is what\n * rewinds a restored page.\n *\n * @remarks\n * Behavior only — what \"optimistic\" looks like is the author's markup (the\n * show/hide pair) and CSS (`[data-optimistic=\"true\"]`). Pairs with\n * `stimeo--submit-once` (double-submit guard) and `stimeo--live-counter`\n * (optimistic numbers). The listeners are delegated on the element, so a form\n * nested under it (or swapped for a new one) keeps working, and the submission\n * ownership is what keeps a sibling form's terminal from resolving this state.\n * With several submissions in flight the newest start owns the optimistic state,\n * so a submission whose terminal never arrives — its form replaced mid-flight —\n * cannot strand the element. `connect()` is idempotent: a Turbo cache snapshot\n * taken mid-submit is rewound, since no submission can be in flight across a\n * restore, while an in-page move (where the submission *does* survive) keeps it.\n * On a real detach the listeners go with the element.\n */\nexport class OptimisticController extends Controller<HTMLElement> {\n  static override targets = [\"show\", \"hide\"];\n  static events = [\"commit\", \"rollback\"] as const;\n\n  declare readonly showTargets: HTMLElement[];\n  declare readonly hideTargets: HTMLElement[];\n\n  /** The submission that owns the applied optimistic state, if any. */\n  #pending: unknown = null;\n\n  readonly #gate = new DetachGate();\n  readonly #listeners = new ListenerSet();\n\n  /** True between `connect()` and `disconnect()`, so a repeat connect rewinds nothing. */\n  #connected = false;\n\n  override connect(): void {\n    // Only a page this instance did not apply the state to can be holding a stale\n    // one: a restored snapshot. An in-page move and a repeat connect both leave a\n    // live submission behind, so neither may rewind — the gate names the first and\n    // the connected flag the second.\n    const restored = !this.#connected && !this.#gate.pending;\n    this.#gate.cancel();\n    this.#connected = true;\n    if (restored && this.element.hasAttribute(\"data-optimistic\")) this.#revert();\n    this.#listeners.add(this.element, \"turbo:submit-start\", this.#onSubmitStart);\n    this.#listeners.add(this.element, \"turbo:submit-end\", this.#onSubmitEnd);\n  }\n\n  override disconnect(): void {\n    this.#connected = false;\n    this.#listeners.dispose();\n    // Ownership outlives an in-page move: only a real detach forgets it.\n    this.#gate.disconnected(this, () => {\n      this.#pending = null;\n    });\n  }\n\n  readonly #onSubmitStart = (event: Event): void => {\n    this.#pending = submissionOf(event);\n    // Turbo owns `aria-busy` on a form and marks it before this event, so what is\n    // there now is Turbo's, not the author's. Recording it would put Turbo's value\n    // back on a page restored mid-submit, where no terminal ever arrives to clear it.\n    if (this.element instanceof HTMLFormElement && !this.element.hasAttribute(BUSY_MARKER)) {\n      this.element.setAttribute(BUSY_MARKER, AUTHORED_ABSENT);\n    }\n    this.#write(this.element, \"aria-busy\", \"true\", BUSY_MARKER);\n    this.element.setAttribute(\"data-optimistic\", \"true\");\n    for (const target of this.showTargets) this.#setHidden(target, false);\n    for (const target of this.hideTargets) this.#setHidden(target, true);\n  };\n\n  readonly #onSubmitEnd = (event: Event): void => {\n    // A terminal always names a submission, so an element holding none (nothing\n    // started, or this one already resolved) falls out here too.\n    if (submissionOf(event) !== this.#pending) return;\n    this.#pending = null;\n\n    const success = (event as CustomEvent<{ success?: boolean }>).detail?.success === true;\n    if (success) {\n      // Keep the toggled faces (the server response owns the final DOM) but drop\n      // their records, so a later failure cannot revert a confirmed state.\n      this.element.removeAttribute(\"data-optimistic\");\n      this.#restore(this.element, \"aria-busy\", BUSY_MARKER, \"true\");\n      for (const target of [...this.showTargets, ...this.hideTargets]) {\n        target.removeAttribute(HIDDEN_MARKER);\n      }\n      this.dispatch(\"commit\");\n    } else {\n      this.#revert();\n      this.dispatch(\"rollback\");\n    }\n  };\n\n  /** Hides or reveals a target, recording the authored `hidden` on first write. */\n  #setHidden(target: HTMLElement, hidden: boolean): void {\n    if (target.hasAttribute(\"hidden\") === hidden) return;\n    this.#write(target, \"hidden\", hidden ? \"\" : null, HIDDEN_MARKER);\n  }\n\n  /** Writes an attribute, recording what it displaced under `marker` once. */\n  #write(element: Element, attribute: string, value: string | null, marker: string): void {\n    if (!element.hasAttribute(marker)) {\n      const authored = element.getAttribute(attribute);\n      element.setAttribute(\n        marker,\n        authored === null ? AUTHORED_ABSENT : `${AUTHORED_VALUE}${authored}`,\n      );\n    }\n    if (value === null) element.removeAttribute(attribute);\n    else element.setAttribute(attribute, value);\n  }\n\n  /**\n   * Puts back the value `marker` recorded and drops the record.\n   *\n   * `written` is what this controller last put in the attribute. Anything else\n   * there now belongs to whoever wrote it — Turbo owns `aria-busy` on a form and\n   * clears it before the terminal arrives, and a consumer may have moved a face\n   * mid-flight — so the record is dropped without touching the attribute. A\n   * marker this build did not write names no authored value, so the attribute\n   * goes back to being absent.\n   */\n  #restore(element: Element, attribute: string, marker: string, written: string | null): void {\n    const recorded = element.getAttribute(marker);\n    if (recorded === null) return;\n    element.removeAttribute(marker);\n    if (element.getAttribute(attribute) !== written) return;\n    if (recorded.startsWith(AUTHORED_VALUE)) {\n      element.setAttribute(attribute, recorded.slice(AUTHORED_VALUE.length));\n      return;\n    }\n    element.removeAttribute(attribute);\n  }\n\n  /**\n   * Puts back exactly the markup this controller displaced (record-owned only).\n   *\n   * A face can be registered on both sides, and the hide pass runs last, so what\n   * this controller wrote there is `hidden` — matching it against the reveal's\n   * absent value instead would read as someone else's write and leave the face\n   * hidden. Each target is therefore restored once, against the write it last\n   * received.\n   */\n  #revert(): void {\n    TRANSIENT.reset(this.element);\n    this.#restore(this.element, \"aria-busy\", BUSY_MARKER, \"true\");\n    const hidden = new Set(this.hideTargets);\n    for (const target of new Set([...this.showTargets, ...this.hideTargets])) {\n      this.#restore(target, \"hidden\", HIDDEN_MARKER, hidden.has(target) ? \"\" : null);\n    }\n  }\n}\n"]}

package/dist/controllers/otp_controller.d.ts

@@ -39,8 +39,17 @@ import { Controller } from '@hotwired/stimulus';
  * `change` and `complete` dispatch `{ value: string }` and fire only when the
  * combined value actually moves — one confirmed IME character emits one event,
  * and a passcode re-completed with a different digit reports the new value.
- * State moved by adding or removing fields is the page's doing rather than an
- * edit, so it is reported as `reconcile` with the same `{ value: string }`.
+ * State moved by adding or removing fields, by a `pattern` change dropping
+ * entered digits it no longer accepts, or by a native form reset restoring the
+ * fields is not an edit of the passcode, so it is reported as `reconcile` with
+ * the same `{ value: string }` — once per change, after it settles — and never
+ * as `change` or `complete`. While a field is composing, the IME's uncommitted
+ * text is neither read nor written: a change already in the DOM — fields added
+ * or removed, a reset — is reported at once, counting that field by the
+ * character it had committed, while a `pattern` change's drop waits for the
+ * composition to end and is then applied and reported before the commit is
+ * taken. A composition that ends on the text the field held when it began was
+ * cancelled: no edit, so it reports nothing and focus stays.
  * Completeness belongs to that state: dropping a trailing empty field completes
  * a passcode whose combined value never moved, and that transition is reported
  * too, so a consumer reading `data-state` is never left behind a silent move.
@@ -49,15 +58,18 @@ import { Controller } from '@hotwired/stimulus';
  * Controller-owned output: `data-filled` on each entered field, `data-state`
  * (`empty` / `partial` / `complete`) on the root, and — while input is being
  * reported invalid — `aria-invalid`, `aria-errormessage`, `aria-describedby`,
- * and the `error` target's `hidden`. Those four are leased, so authored values
- * return on teardown and before the page is cached.
+ * and the `error` target's `hidden`. Authored values return on teardown and
+ * before the page is cached: the three ARIA attributes keep their lease on the
+ * field itself, so a connection that adopts a restored DOM can give them back
+ * too, and the `hidden` is leased.
  *
  * @remarks
  * Behavior only. `connect()` reads the fields back as the source of truth, which
  * is what restores consistency after a `type="password"` field returns from the
- * Turbo cache emptied, or after a native form reset. A `pattern` that cannot
- * compile falls back to `[0-9]`; the compiled matcher is built once per
- * declaration rather than per keystroke.
+ * Turbo cache emptied; a native form reset is read back the same way once the
+ * browser has restored the fields. A `pattern` that cannot compile falls back to
+ * `[0-9]`; the compiled matcher is built once per declaration rather than per
+ * keystroke.
  */
 declare class OtpController extends Controller<HTMLElement> {
     #private;
@@ -89,6 +101,9 @@ declare class OtpController extends Controller<HTMLElement> {
     /**
      * 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(): void;
     /** Handles keystroke inputs, distributes autofilled text, and advances focus. */

package/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 };