stimeo-ui 0.16.0 → 0.17.0

data/dist/controllers/transition_controller.js

@@ -1,78 +1,110 @@
 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);
+var DetachGate = class _DetachGate {
+  #pending = false;
+  get pending() {
+    return this.#pending;
+  }
+  static isDetached(host) {
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
+  disconnected(host, teardown) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
+      this.#pending = false;
+      teardown();
+      return;
     }
+    this.#pending = true;
+    const probe = () => {
+      if (!this.#pending) return;
+      this.#pending = false;
+      teardown();
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
   }
-  /** 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);
+  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);
+  }
+  cancel() {
+    this.#pending = false;
+  }
+};
+
+var MAX_TIMER_DELAY_MS = 2147483647;
+
+var NUMBER_BOUNDS = {
+  timer: { finite: true, min: 0, max: MAX_TIMER_DELAY_MS }};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
   }
 };
 
-// src/utils/reduced_motion.ts
 function prefersReducedMotion() {
   return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 
-// src/utils/safe_timeout.ts
 var TimerRegistry = class {
-  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
   ids = /* @__PURE__ */ new Set();
-  /**
-   * Cancels a single tracked timer.
-   *
-   * No-ops if the id is unknown (already cleared, fired, or never owned by this
-   * registry), so callers can clear defensively without guarding.
-   */
   clear(id) {
     if (this.ids.delete(id)) {
       this.cancel(id);
     }
   }
-  /**
-   * Cancels every tracked timer. Call this from a controller's `disconnect()`
-   * to guarantee no timer outlives the element.
-   */
   clearAll() {
     for (const id of this.ids) {
       this.cancel(id);
     }
     this.ids.clear();
   }
-  /** Number of timers currently tracked (pending). */
   get size() {
     return this.ids.size;
   }
 };
 var SafeTimeout = class extends TimerRegistry {
-  /**
-   * Schedules `callback` after `delay` ms and returns the timer id.
-   *
-   * The id is removed from the registry automatically when the timeout fires,
-   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
-   */
   set(callback, delay) {
     const id = this.schedule(() => {
       this.ids.delete(id);
@@ -89,7 +121,6 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
-// src/utils/transition_completion.ts
 function timeMs(value) {
   const trimmed = value.trim();
   const amount = Number.parseFloat(trimmed);
@@ -125,13 +156,6 @@ var TransitionCompletion = class {
   #complete = null;
   #pendingProperties = null;
   #deadline = 0;
-  /**
-   * Replaces any prior wait and invokes `complete` synchronously for a 0ms
-   * transition (including when `getComputedStyle` is unavailable).
-   *
-   * With a positive `options.timeoutMs` the synchronous fast-path is skipped and
-   * the override replaces the auto-computed fallback (see {@link TransitionWaitOptions}).
-   */
   wait(element, complete, options = {}) {
     this.cancel();
     const requested = options.timeoutMs ?? 0;
@@ -151,18 +175,10 @@ var TransitionCompletion = class {
     element.addEventListener("transitioncancel", this.#onTerminal);
     this.#timers.set(() => this.#finish(), override > 0 ? override : maximum + 50);
   }
-  /** Cancels the pending wait without invoking its completion callback. */
   cancel() {
     this.#complete = null;
     this.#teardown();
   }
-  /**
-   * Handles terminal events from the observed element only.
-   *
-   * For explicit property lists, every declared positive-time property must
-   * settle. For `all`, no reliable property set exists, so an event can finish
-   * only after the computed maximum time; the safety timeout owns the usual path.
-   */
   #onTerminal = (event) => {
     if (event.target !== this.#element) return;
     const transitionEvent = event;
@@ -182,10 +198,6 @@ var TransitionCompletion = class {
     }
     if (Date.now() >= this.#deadline) this.#finish();
   };
-  /**
-   * Returns active CSS transition properties expanded to the names reported by
-   * terminal events. CSS animations and pseudo-element effects are excluded.
-   */
   #activeTransitionProperties(element) {
     if (!element || typeof element.getAnimations !== "function") return /* @__PURE__ */ new Set();
     try {
@@ -203,7 +215,6 @@ var TransitionCompletion = class {
       return /* @__PURE__ */ new Set();
     }
   }
-  /** Returns explicit positive-time properties, or `null` for the ambiguous `all`. */
   #explicitPendingProperties(timings) {
     if (timings.some(({ property }) => property === "all")) return null;
     const pending = new Set(
@@ -211,7 +222,6 @@ var TransitionCompletion = class {
     );
     return pending.size > 0 ? pending : null;
   }
-  /** Completes exactly once, releasing listeners and the fallback before the callback. */
   #finish() {
     const complete = this.#complete;
     if (!complete) return;
@@ -219,7 +229,6 @@ var TransitionCompletion = class {
     this.#teardown();
     complete();
   }
-  /** Releases the exact element listeners and timer owned by the current wait. */
   #teardown() {
     this.#timers.clearAll();
     this.#element?.removeEventListener("transitionend", this.#onTerminal);
@@ -230,9 +239,10 @@ var TransitionCompletion = class {
   }
 };
 
-// src/controllers/transition_controller.ts
 var tokensOf = (value) => value.split(/\s+/).filter(Boolean);
-var TransitionController = class extends Controller {
+var STAGED_RECORD = "staged";
+var TransitionController = class _TransitionController extends Controller {
+  #numbers = new NumberValueReader();
   static values = {
     enter: { type: String, default: "" },
     enterFrom: { type: String, default: "" },
@@ -242,45 +252,56 @@ var TransitionController = class extends Controller {
     leaveTo: { type: String, default: "" },
     timeout: { type: Number, default: 0 }
   };
+  static valueConstraints = {
+    timeout: NUMBER_BOUNDS.timer
+  };
   static actions = ["enter", "leave", "toggle"];
   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();
+  #gate = new DetachGate();
   connect() {
-    this.#beforeCache.activate();
+    const moved = this.#gate.pending;
+    this.#gate.cancel();
+    if (moved) return;
+    if (this.#staged.size === 0) this.#stripRecorded();
     this.#settleState();
   }
   disconnect() {
-    this.#beforeCache.deactivate();
-    this.#cancel();
+    this.#gate.disconnected(this, () => this.#cancel());
+  }
+  get #stagedRecord() {
+    return `data-${this.identifier}-${STAGED_RECORD}`;
+  }
+  #stripRecorded() {
+    const raw = this.element.getAttribute(this.#stagedRecord) ?? "null";
+    this.element.removeAttribute(this.#stagedRecord);
+    let recorded = null;
+    try {
+      recorded = JSON.parse(raw);
+    } catch {
+    }
+    if (!Array.isArray(recorded)) return;
+    for (const token of recorded) {
+      if (typeof token === "string" && token !== "") this.element.classList.remove(token);
+    }
+  }
+  #record() {
+    if (this.#staged.size === 0) this.element.removeAttribute(this.#stagedRecord);
+    else this.element.setAttribute(this.#stagedRecord, JSON.stringify([...this.#staged]));
   }
-  /** Shows the element with the enter transition. */
   enter() {
     this.#run("enter");
   }
-  /** Hides the element with the leave transition. */
   leave() {
     this.#run("leave");
   }
-  /** Reverses the current direction (enter when hidden/leaving, else leave). */
   toggle() {
     const state = this.element.getAttribute("data-transition-state");
     if (state === "entered" || state === "entering") this.leave();
     else this.enter();
   }
-  /**
-   * @stimeoRuntimeOnly The class lists and `timeout` shape this one transition; `#finish` strips
-   *   the classes, so none of them stays at rest.
-   */
   #run(kind) {
     this.#cancel();
     const isEnter = kind === "enter";
@@ -293,18 +314,16 @@ var TransitionController = class extends Controller {
     const base = isEnter ? this.enterValue : this.leaveValue;
     const from = isEnter ? this.enterFromValue : this.leaveFromValue;
     const to = isEnter ? this.enterToValue : this.leaveToValue;
+    const timeoutMs = this.#safeTimeout;
     this.#add(base, from);
     void this.element.offsetWidth;
     this.#rafId = this.#raf(() => {
       this.#rafId = null;
       this.#remove(from);
       this.#add(to);
-      this.#transition.wait(this.element, () => this.#finish(kind), {
-        timeoutMs: this.timeoutValue
-      });
+      this.#transition.wait(this.element, () => this.#finish(kind), { timeoutMs });
     });
   }
-  /** Settles the element into the completed state, clearing the stage classes. */
   #finish(kind) {
     this.#strip();
     if (kind === "enter") {
@@ -316,22 +335,9 @@ 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) {
       this.#cancelRaf(this.#rafId);
@@ -340,34 +346,24 @@ 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) {
     for (const token of lists.flatMap(tokensOf)) {
       if (this.element.classList.contains(token)) continue;
       this.element.classList.add(token);
       this.#staged.add(token);
     }
+    this.#record();
   }
-  /** Drops the named tokens that are this controller's to drop. */
   #remove(...lists) {
     for (const token of lists.flatMap(tokensOf)) {
       if (!this.#staged.delete(token)) continue;
       this.element.classList.remove(token);
     }
   }
-  /** Removes every stage class this controller applied, so none lingers. */
   #strip() {
     this.element.classList.remove(...this.#staged);
     this.#staged.clear();
+    this.#record();
   }
   #raf(callback) {
     if (typeof window.requestAnimationFrame === "function") {
@@ -379,8 +375,16 @@ var TransitionController = class extends Controller {
     if (typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(id);
     else window.clearTimeout(id);
   }
+  get #safeTimeout() {
+    return this.#numbers.read(
+      this,
+      "timeout",
+      this.timeoutValue,
+      _TransitionController.values.timeout.default,
+      _TransitionController.valueConstraints.timeout
+    );
+  }
 };
 
 export { TransitionController };
-//# sourceMappingURL=transition_controller.js.map
 //# sourceMappingURL=transition_controller.js.map