stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/optimistic_controller.d.ts

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 
 /**
- * Headless **optimistic UI** for Turbo form submissions — the one server-bound
+ * Headless **optimistic UI** for Turbo form submissions — a server-bound
  * behavior that needs no Action Cable: it wraps a Turbo form
  * and applies a *declared* optimistic state the moment the submission starts,
  * keeps it when the server confirms, and **rolls it back** when the submission
@@ -20,11 +20,14 @@ import { Controller } from '@hotwired/stimulus';
  *
  * On `turbo:submit-start`, every `show` target is unhidden and every `hide`
  * target hidden, the element gains `data-optimistic="true"` + `aria-busy="true"`,
- * and the submission named by the event takes ownership of that state. On
- * `turbo:submit-end`: the terminal of any *other* submission is ignored; the
- * owner's terminal clears the pending hook and, on success, dispatches `commit`
+ * and the event's source and submission token take ownership of that state. On
+ * `turbo:submit-end`: only the same source and token can resolve it once. A missing
+ * or null token pairs synthetic events from the same source, separately from
+ * explicit tokens. The owner's terminal clears the pending hook and, with
+ * `success === true`, dispatches `commit`
  * (the toggled state stays — the server response owns the final DOM), or on
- * failure restores the authored markup and dispatches `rollback`.
+ * failure restores the authored markup and dispatches `rollback`. Ownership is
+ * released before either event is dispatched.
  *
  * **Every write records what it displaced.** A target this controller hides or
  * reveals carries the authored `hidden` value in `data-optimistic-toggled`, and

package/dist/controllers/optimistic_controller.js

@@ -1,117 +1,98 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/optimistic_controller.ts
-
-// src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
   get pending() {
     return this.#pending;
   }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
   static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
   disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
       this.#pending = false;
       teardown();
       return;
     }
     this.#pending = true;
-    queueMicrotask(() => {
+    const probe = () => {
       if (!this.#pending) return;
       this.#pending = false;
       teardown();
-    });
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
+  }
+  static #carried(host) {
+    const element = host.element;
+    return !element.isConnected && element.closest("[data-turbo-permanent]") !== null && _DetachGate.#listed(host);
+  }
+  static #listed(host) {
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return tokens.includes(host.identifier);
   }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
   cancel() {
     this.#pending = false;
   }
 };
 
-// src/utils/listener_set.ts
 var ListenerSet = class {
-  /** The generation every `add` joins until the next `dispose()`. */
   #abort = new AbortController();
-  /**
-   * Attaches `handler` to the open generation, exactly as the caller spelled it.
-   *
-   * The set supplies the signal, so `options` carries everything else the DOM
-   * accepts — `capture` included, which has to match at release time and no
-   * longer has a second place to drift from.
-   */
   add(target, type, handler, options) {
     target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
   }
-  /**
-   * Releases every listener of the open generation, synchronously, and opens the
-   * next one. Idempotent, and safe before anything has been added.
-   */
   dispose() {
     this.#abort.abort();
     this.#abort = new AbortController();
   }
 };
 
-// src/utils/transient_hooks.ts
+var SubmissionOwner = class {
+  #synthetic = /* @__PURE__ */ Symbol("synthetic submission");
+  #active = null;
+  begin(event) {
+    this.#active = { source: event.target, token: this.#tokenOf(event) };
+  }
+  resolve(event) {
+    if (this.#active === null || this.#active.source !== event.target || this.#active.token !== this.#tokenOf(event)) {
+      return null;
+    }
+    this.clear();
+    return this.#detailOf(event)?.success === true;
+  }
+  clear() {
+    this.#active = null;
+  }
+  #tokenOf(event) {
+    return this.#detailOf(event)?.formSubmission ?? this.#synthetic;
+  }
+  #detailOf(event) {
+    return event.detail;
+  }
+};
+
 var TransientHooks = class {
   #attributes;
   constructor(options) {
     this.#attributes = options.attributes;
   }
-  /** Drops the declared hooks from `element`; what it carries besides stays. */
   reset(element) {
     for (const attribute of this.#attributes) element.removeAttribute(attribute);
   }
 };
 
-// src/controllers/optimistic_controller.ts
 var TRANSIENT = new TransientHooks({ attributes: ["data-optimistic"] });
 var HIDDEN_MARKER = "data-optimistic-toggled";
 var BUSY_MARKER = "data-optimistic-busy";
 var AUTHORED_ABSENT = "absent";
 var AUTHORED_VALUE = "value:";
-var SYNTHETIC_SUBMISSION = {};
-function submissionOf(event) {
-  const detail = event.detail;
-  return detail?.formSubmission ?? SYNTHETIC_SUBMISSION;
-}
 var OptimisticController = class extends Controller {
   static targets = ["show", "hide"];
   static events = ["commit", "rollback"];
-  /** The submission that owns the applied optimistic state, if any. */
-  #pending = null;
+  #submission = new SubmissionOwner();
   #gate = new DetachGate();
   #listeners = new ListenerSet();
-  /** True between `connect()` and `disconnect()`, so a repeat connect rewinds nothing. */
   #connected = false;
   connect() {
     const restored = !this.#connected && !this.#gate.pending;
@@ -125,11 +106,11 @@ var OptimisticController = class extends Controller {
     this.#connected = false;
     this.#listeners.dispose();
     this.#gate.disconnected(this, () => {
-      this.#pending = null;
+      this.#submission.clear();
     });
   }
   #onSubmitStart = (event) => {
-    this.#pending = submissionOf(event);
+    this.#submission.begin(event);
     if (this.element instanceof HTMLFormElement && !this.element.hasAttribute(BUSY_MARKER)) {
       this.element.setAttribute(BUSY_MARKER, AUTHORED_ABSENT);
     }
@@ -139,9 +120,8 @@ var OptimisticController = class extends Controller {
     for (const target of this.hideTargets) this.#setHidden(target, true);
   };
   #onSubmitEnd = (event) => {
-    if (submissionOf(event) !== this.#pending) return;
-    this.#pending = null;
-    const success = event.detail?.success === true;
+    const success = this.#submission.resolve(event);
+    if (success === null) return;
     if (success) {
       this.element.removeAttribute("data-optimistic");
       this.#restore(this.element, "aria-busy", BUSY_MARKER, "true");
@@ -154,12 +134,10 @@ var OptimisticController = class extends Controller {
       this.dispatch("rollback");
     }
   };
-  /** Hides or reveals a target, recording the authored `hidden` on first write. */
   #setHidden(target, hidden) {
     if (target.hasAttribute("hidden") === hidden) return;
     this.#write(target, "hidden", hidden ? "" : null, HIDDEN_MARKER);
   }
-  /** Writes an attribute, recording what it displaced under `marker` once. */
   #write(element, attribute, value, marker) {
     if (!element.hasAttribute(marker)) {
       const authored = element.getAttribute(attribute);
@@ -171,16 +149,6 @@ var OptimisticController = class extends Controller {
     if (value === null) element.removeAttribute(attribute);
     else element.setAttribute(attribute, value);
   }
-  /**
-   * Puts back the value `marker` recorded and drops the record.
-   *
-   * `written` is what this controller last put in the attribute. Anything else
-   * there now belongs to whoever wrote it — Turbo owns `aria-busy` on a form and
-   * clears it before the terminal arrives, and a consumer may have moved a face
-   * mid-flight — so the record is dropped without touching the attribute. A
-   * marker this build did not write names no authored value, so the attribute
-   * goes back to being absent.
-   */
   #restore(element, attribute, marker, written) {
     const recorded = element.getAttribute(marker);
     if (recorded === null) return;
@@ -192,15 +160,6 @@ var OptimisticController = class extends Controller {
     }
     element.removeAttribute(attribute);
   }
-  /**
-   * Puts back exactly the markup this controller displaced (record-owned only).
-   *
-   * A face can be registered on both sides, and the hide pass runs last, so what
-   * this controller wrote there is `hidden` — matching it against the reveal's
-   * absent value instead would read as someone else's write and leave the face
-   * hidden. Each target is therefore restored once, against the write it last
-   * received.
-   */
   #revert() {
     TRANSIENT.reset(this.element);
     this.#restore(this.element, "aria-busy", BUSY_MARKER, "true");
@@ -212,5 +171,4 @@ var OptimisticController = class extends Controller {
 };
 
 export { OptimisticController };
-//# sourceMappingURL=optimistic_controller.js.map
 //# sourceMappingURL=optimistic_controller.js.map

package/dist/controllers/optimistic_controller.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../src/utils/detach_gate.ts","../../src/utils/listener_set.ts","../../src/utils/submission_owner.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 * An element out of the document is a real detach, with one exception: a\n * `data-turbo-permanent` element, or one inside it, that Turbo carries to the\n * next page. Turbo takes it out of the old `<body>`, which Stimulus answers with\n * a `disconnect()` while it is out of the document, and puts it into the new one\n * a few microtasks later in the same task, where the same instance connects\n * again. Such a disconnect is probed until the next task instead.\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 * dismiss(): void {\n *   this.#gate.cancel(); // a direct path: disarm a probe a disconnect queued\n *   this.#teardown();\n * }\n *\n * #teardown(): void {\n *   // … (`disconnected` has already disarmed the probe on its own path)\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    return !host.element.isConnected || !DetachGate.#listed(host);\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. An\n   * element Turbo carries to the next page is probed until the next task, by\n   * which time Turbo has put it back.\n   */\n  disconnected(host: DetachGateHost, teardown: () => void): void {\n    const carried = DetachGate.#carried(host);\n    if (!carried && 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    const probe = (): void => {\n      if (!this.#pending) return;\n      this.#pending = false;\n      teardown();\n    };\n    if (carried) setTimeout(probe, 0);\n    else queueMicrotask(probe);\n  }\n\n  /**\n   * Whether `host` is out of the document inside a `data-turbo-permanent` element, its\n   * identifier still listed: where Turbo holds an element it carries to the next page.\n   */\n  static #carried(host: DetachGateHost): boolean {\n    const element = host.element;\n    return (\n      !element.isConnected &&\n      element.closest(\"[data-turbo-permanent]\") !== null &&\n      DetachGate.#listed(host)\n    );\n  }\n\n  /** Whether the element's `data-controller` still lists the identifier. */\n  static #listed(host: DetachGateHost): boolean {\n    const tokens = (host.element.getAttribute(\"data-controller\") ?? \"\").split(/\\s+/);\n    return tokens.includes(host.identifier);\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","/** What {@link ListenerSet.add} passes on besides the signal it supplies itself. */\nexport type ListenerOptions = Omit<AddEventListenerOptions, \"signal\">;\n\n/**\n * The event map a target's own `addEventListener` types its handlers with: the\n * window's, a document's, an HTML or SVG element's, any other element's, or a\n * media query list's. Other targets name none.\n */\ntype EventMapOf<T extends EventTarget> = T extends Window\n  ? WindowEventMap\n  : T extends Document\n    ? DocumentEventMap\n    : T extends HTMLElement\n      ? HTMLElementEventMap\n      : T extends SVGElement\n        ? SVGElementEventMap\n        : T extends Element\n          ? ElementEventMap\n          : T extends MediaQueryList\n            ? MediaQueryListEventMap\n            : Record<never, never>;\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.\n * {@link 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, which places `dispose()` in its\n * cleanup sequence. 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 * A lifetime shorter than the connection — while a Value holds, until a first\n * load, while a subscription is open — gets a set of its own, which the end of\n * that lifetime disposes. A controller therefore holds one set per lifetime: the\n * connection's, and one for each swapped receiver or shorter span.\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, listeners of\n * several elements that come and go one at a time, and those one gesture holds\n * keep their own pair of calls or a signal of their own.\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. A removal by hand would have to repeat that\n   * flag; aborting the signal releases the listener without it.\n   *\n   * A `type` the target's own event map names types `handler` with that event,\n   * as the target's `addEventListener` does, so a handler written for a\n   * `KeyboardEvent` is passed as it is; any other `type` takes an\n   * `EventListener`.\n   */\n  add<T extends EventTarget, K extends keyof EventMapOf<T> & string>(\n    target: T,\n    type: K,\n    handler: (event: EventMapOf<T>[K]) => void,\n    options?: ListenerOptions,\n  ): void;\n  add(target: EventTarget, type: string, handler: EventListener, options?: ListenerOptions): void;\n  add(target: EventTarget, type: string, handler: EventListener, options?: ListenerOptions): 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","/** The optional identity and result carried by a Turbo submission event. */\ninterface SubmissionDetail {\n  readonly formSubmission?: unknown;\n  readonly success?: unknown;\n}\n\n/** One event source's latest submission, including an unnamed synthetic one. */\ninterface OwnedSubmission {\n  readonly source: EventTarget | null;\n  readonly token: unknown;\n}\n\n/**\n * Owns the latest submission start and consumes its matching terminal once.\n *\n * Both the event source and the submission token must match. A missing or null\n * token pairs synthetic events from that same source, independently of named\n * submissions. Only `success: true` confirms a consumed terminal; every other\n * result is a failure. Callers own snapshots, UI effects, and the lifetime of\n * this owner, and clear it when that lifetime ends.\n */\nexport class SubmissionOwner {\n  readonly #synthetic = Symbol(\"synthetic submission\");\n  #active: OwnedSubmission | null = null;\n\n  /** Gives the event's submission ownership, superseding any previous start. */\n  begin(event: Event): void {\n    this.#active = { source: event.target, token: this.#tokenOf(event) };\n  }\n\n  /** Consumes a matching terminal before returning its result, or ignores it. */\n  resolve(event: Event): boolean | null {\n    if (\n      this.#active === null ||\n      this.#active.source !== event.target ||\n      this.#active.token !== this.#tokenOf(event)\n    ) {\n      return null;\n    }\n    this.clear();\n    return this.#detailOf(event)?.success === true;\n  }\n\n  /** Drops ownership without resolving a submission or producing side effects. */\n  clear(): void {\n    this.#active = null;\n  }\n\n  #tokenOf(event: Event): unknown {\n    return this.#detailOf(event)?.formSubmission ?? this.#synthetic;\n  }\n\n  #detailOf(event: Event): SubmissionDetail | null | undefined {\n    return (event as CustomEvent<SubmissionDetail | null | undefined>).detail;\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()`: Turbo also dispatches that event on pages that stay, where the hook\n * is still true, and an in-page move — the other half of the population — never\n * reaches it, so a hook that arrived with a moved element would survive.\n * `connect()` covers both, because both end in a 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 */\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 { SubmissionOwner } from \"../utils/submission_owner\";\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 * Headless **optimistic UI** for Turbo form submissions — a 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 event's source and submission token take ownership of that state. On\n * `turbo:submit-end`: only the same source and token can resolve it once. A missing\n * or null token pairs synthetic events from the same source, separately from\n * explicit tokens. The owner's terminal clears the pending hook and, with\n * `success === true`, 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`. Ownership is\n * released before either event is dispatched.\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  readonly #submission = new SubmissionOwner();\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 or a `data-turbo-permanent` carry; a real detach\n    // forgets it.\n    this.#gate.disconnected(this, () => {\n      this.#submission.clear();\n    });\n  }\n\n  readonly #onSubmitStart = (event: Event): void => {\n    this.#submission.begin(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    const success = this.#submission.resolve(event);\n    if (success === null) return;\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 value that is neither `absent` nor `value:…` names no authored value, so\n   * the attribute 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

@@ -50,18 +50,43 @@ import { Controller } from '@hotwired/stimulus';
  * 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.
+ * An interrupted conversion is not a confirmation: only an empty residual or
+ * one whole-pattern character, after full-width normalization, is retained.
+ * Other residuals return to the prior accepted character, or empty if the current
+ * pattern rejects it. No characters are distributed and focus stays. Locked
+ * fields and a new conversion keep their DOM text; publication counts the validated
+ * character until that text is superseded. Page writes are read as page writes,
+ * never rolled back as an old residual. This cleanup reports only `reconcile`,
+ * and only if the combined value or state moved. A following ordinary input or
+ * real compositionend still reports its own edit, independently of that cleanup;
+ * the cleanup keeps the selection of a field it rewrites, so that input lands where
+ * the user put it. A real compositionend still owed survives a move that keeps its
+ * field focused within one turn (`moveBefore`); it goes when the field is released
+ * or returns without focus, stays out past the turn, or a `change` publishes a value
+ * that already carries the residual, after which the end is compared with that value.
+ * Until the conversion's end is observed, only its own field waits: a key in another
+ * field is handled as a key, a script's input there is distributed past the field
+ * still composing without moving focus, and a paste fills every writable field from
+ * its own, conversion text included, then advances focus.
+ * A `pattern` drop held for a conversion applies, reported as `reconcile`, ahead of
+ * the next key, edit or paste — to every field but one still composing, which keeps
+ * its text for its own end and counts a committed character only if the pattern
+ * accepts it or the field is locked. A listener that answers that `reconcile`
+ * synchronously with another operation — another edit or reconciliation,
+ * disconnecting the group, removing the field, starting or ending a conversion —
+ * supersedes the gesture.
  * 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.
  * `invalid` dispatches `{ pattern: string }` carrying the compiled pattern.
  *
- * Controller-owned output: `data-filled` on each entered field, `data-state`
+ * Controller-owned output: `data-filled` and a `data-stimeo--otp-interrupted`
+ * projection marker on a field whose DOM text must be preserved, `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`. 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.
+ * and the `error` target's `hidden`. Authored values return on teardown: 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
@@ -85,6 +110,7 @@ declare class OtpController extends Controller<HTMLElement> {
     readonly fieldTargets: HTMLInputElement[];
     readonly valueTarget: HTMLInputElement;
     readonly errorTarget: HTMLElement;
+    readonly errorTargets: HTMLElement[];
     readonly hasValueTarget: boolean;
     readonly hasErrorTarget: boolean;
     patternValue: string;
@@ -92,12 +118,33 @@ declare class OtpController extends Controller<HTMLElement> {
     disconnect(): void;
     /**
      * Stimulus lifecycle callback when a new field target enters the DOM.
-     * Wires the new field and folds the wider digit count into one reconciliation,
-     * which stays inert until `connect()` opens the window.
+     * Wires the new field and reads it at once, so its mark and the digit a rejected
+     * keystroke restores hold before anything else runs, then folds the wider digit
+     * count into one reconciliation, which stays inert until `connect()` opens the
+     * window.
      */
     fieldTargetConnected(element: HTMLInputElement): void;
-    /** Releases a dropped field's listeners and leases, then reconciles the rest. */
+    /**
+     * Releases a dropped field's listeners and leases, then reconciles the rest. A
+     * field that only moved within the group stays a field and keeps what it shows.
+     */
     fieldTargetDisconnected(element: HTMLInputElement): void;
+    /** Writes the combined value into a value field that arrives, in the next reconciliation. */
+    valueTargetConnected(): void;
+    /** Writes the combined value into the value field that stays when an earlier one leaves. */
+    valueTargetDisconnected(): void;
+    /**
+     * Moves rejected input still being reported onto the first error target as one arrives,
+     * and hides the first one while nothing is reported.
+     */
+    errorTargetConnected(): void;
+    /**
+     * Gives an error target that no longer resolves as one its own `hidden` back — after
+     * `disconnect()` too, since dropping the identifier leaves the element on the page —
+     * and shows rejected input still being reported on the error target that stays, or
+     * hides it while nothing is reported.
+     */
+    errorTargetDisconnected(element: HTMLElement): void;
     /**
      * Re-validates a changed `pattern` declaration once and drops any entered digit
      * the new pattern no longer accepts, so the combined value stays interpretable.