stimeo-ui 0.9.0 → 0.10.0

data/dist/controllers/transition_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/transition_controller.ts
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/reduced_motion.ts
 function prefersReducedMotion() {
   return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -217,12 +246,21 @@ var TransitionController = class extends Controller {
   static events = ["entered", "left"];
   /** Owns the cancellable completion wait (terminal events + bounded fallback). */
   #transition = new TransitionCompletion();
+  /** Rewinds a half-applied stage before Turbo copies the page into its snapshot. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #rafId = null;
+  /**
+   * Stage classes this controller put on the element. Removing by declaration
+   * instead would take a token the consumer also authored, and would strand the
+   * token that was applied when a Value changes mid-transition.
+   */
+  #staged = /* @__PURE__ */ new Set();
   connect() {
-    this.#strip();
-    this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
+    this.#beforeCache.activate();
+    this.#settleState();
   }
   disconnect() {
+    this.#beforeCache.deactivate();
     this.#cancel();
   }
   /** Shows the element with the enter transition. */
@@ -252,6 +290,7 @@ var TransitionController = class extends Controller {
     const from = isEnter ? this.enterFromValue : this.leaveFromValue;
     const to = isEnter ? this.enterToValue : this.leaveToValue;
     this.#add(base, from);
+    void this.element.offsetWidth;
     this.#rafId = this.#raf(() => {
       this.#rafId = null;
       this.#remove(from);
@@ -273,6 +312,21 @@ var TransitionController = class extends Controller {
       this.dispatch("left", { detail: {} });
     }
   }
+  /** Writes the state hook the element's visibility implies. */
+  #settleState() {
+    this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
+  }
+  /**
+   * Returns the element to a settled state before Turbo copies the page.
+   *
+   * The snapshot is taken while the controller is still connected, so stripping on
+   * the next `connect()` would only repair the page after it has been painted from
+   * the cache. The pass is silent: `connect()` derives the state again on restore.
+   */
+  #rewindForCache() {
+    this.#cancel();
+    this.#settleState();
+  }
   /** Cancels any in-flight transition (interruption / teardown). */
   #cancel() {
     if (this.#rafId !== null) {
@@ -282,24 +336,34 @@ var TransitionController = class extends Controller {
     this.#transition.cancel();
     this.#strip();
   }
+  /**
+   * Applies the stage tokens this controller does not already find on the
+   * element, and claims exactly those.
+   *
+   * A token already on the element is left unclaimed: it is either the consumer's
+   * standing class or one an earlier stage of this transition already claimed, and
+   * in neither case may this call take ownership of it. That is what keeps a
+   * standing class the consumer also named as a stage Value; the cost is that such
+   * a token cannot be staged, so the property it drives resolves from their CSS.
+   */
   #add(...lists) {
-    const tokens = lists.flatMap(tokensOf);
-    if (tokens.length > 0) this.element.classList.add(...tokens);
+    for (const token of lists.flatMap(tokensOf)) {
+      if (this.element.classList.contains(token)) continue;
+      this.element.classList.add(token);
+      this.#staged.add(token);
+    }
   }
+  /** Drops the named tokens that are this controller's to drop. */
   #remove(...lists) {
-    const tokens = lists.flatMap(tokensOf);
-    if (tokens.length > 0) this.element.classList.remove(...tokens);
+    for (const token of lists.flatMap(tokensOf)) {
+      if (!this.#staged.delete(token)) continue;
+      this.element.classList.remove(token);
+    }
   }
-  /** Removes every stage class so no half-applied state lingers. */
+  /** Removes every stage class this controller applied, so none lingers. */
   #strip() {
-    this.#remove(
-      this.enterValue,
-      this.enterFromValue,
-      this.enterToValue,
-      this.leaveValue,
-      this.leaveFromValue,
-      this.leaveToValue
-    );
+    this.element.classList.remove(...this.#staged);
+    this.#staged.clear();
   }
   #raf(callback) {
     if (typeof window.requestAnimationFrame === "function") {