stimeo-ui 0.14.0 → 0.15.0

data/dist/controllers/stick_to_bottom_controller.js

@@ -8,10 +8,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -47,14 +52,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 

data/dist/controllers/submit_once_controller.js

@@ -138,6 +138,30 @@ var DetachGate = class _DetachGate {
   }
 };
 
+// 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/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -206,6 +230,7 @@ var SubmitOnceController = class extends Controller {
   static events = ["start", "end", "reconcile"];
   #timers = new SafeTimeout();
   #gate = new DetachGate();
+  #listeners = new ListenerSet();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #sessions = /* @__PURE__ */ new Map();
   #disabled = new AttributeLease("disabled");
@@ -230,14 +255,12 @@ var SubmitOnceController = class extends Controller {
   connect() {
     this.#gate.cancel();
     this.#beforeCache.activate();
-    this.element.addEventListener("submit", this.#onNativeSubmit, true);
-    this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.add(this.element, "submit", this.#onNativeSubmit, { capture: true });
+    this.#listeners.add(this.element, "turbo:submit-start", this.#onSubmitStart);
+    this.#listeners.add(this.element, "turbo:submit-end", this.#onSubmitEnd);
   }
   disconnect() {
-    this.element.removeEventListener("submit", this.#onNativeSubmit, true);
-    this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.dispose();
     this.#beforeCache.deactivate();
     this.#gate.disconnected(this, () => this.#teardown());
   }

data/dist/controllers/textarea_autosize_controller.js

@@ -8,10 +8,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -47,14 +52,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 

data/dist/controllers/toast_controller.js

@@ -55,6 +55,121 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/keyed_timers.ts
+var KeyedTimers = class {
+  #timers = new SafeTimeout();
+  /** The pending timer of each key; an entry lives exactly as long as its timer. */
+  #pending = /* @__PURE__ */ new Map();
+  /**
+   * Arms `callback` after `delay` ms for `key`, cancelling the timer `key` had
+   * pending. The entry is dropped before the callback runs, so the callback sees
+   * the key unarmed and may arm it again for the next round.
+   */
+  set(key, callback, delay) {
+    this.clear(key);
+    const id = this.#timers.set(() => {
+      this.#pending.delete(key);
+      callback();
+    }, delay);
+    this.#pending.set(key, id);
+  }
+  /**
+   * Cancels `key`'s pending timer, if it has one.
+   *
+   * A timer id is a positive integer, so `-1` stands for "nothing pending" and
+   * the registry ignores an id it does not own — the unarmed case needs no
+   * branch of its own, and no other key's timer can be reached from here.
+   */
+  clear(key) {
+    this.#timers.clear(this.#pending.get(key) ?? -1);
+    this.#pending.delete(key);
+  }
+  /**
+   * Cancels every pending timer and forgets every key. Call this from a
+   * controller's `disconnect()` so no timer, and no entry, outlives the element.
+   */
+  clearAll() {
+    this.#timers.clearAll();
+    this.#pending.clear();
+  }
+  /** Whether `key` has a timer pending. */
+  has(key) {
+    return this.#pending.has(key);
+  }
+};
+
+// src/utils/pausable_timers.ts
+var PausableTimers = class {
+  #timers = new KeyedTimers();
+  /** Every key armed or held; an entry goes as its timer fires, or with the key. */
+  #entries = /* @__PURE__ */ new Map();
+  /**
+   * Arms `callback` after `delay` ms for `key`, replacing whatever `key` had.
+   * A held key stays held and banks `delay` for its resume.
+   */
+  set(key, callback, delay) {
+    const reasons = this.#entries.get(key)?.reasons ?? /* @__PURE__ */ new Set();
+    const entry = { callback, startedAt: 0, remaining: delay, reasons };
+    this.#entries.set(key, entry);
+    if (reasons.size === 0) this.#arm(key, entry);
+  }
+  /**
+   * Holds `key` for `reason` and banks the time left, with a floor of one
+   * millisecond. Reports whether this call is the one that stopped a running
+   * timer, so the caller can write its held-state hook exactly once.
+   */
+  pause(key, reason) {
+    const entry = this.#entries.get(key);
+    if (entry === void 0) return false;
+    entry.reasons.add(reason);
+    if (!this.#timers.has(key)) return false;
+    this.#timers.clear(key);
+    entry.remaining = Math.max(1, entry.remaining - (Date.now() - entry.startedAt));
+    return true;
+  }
+  /**
+   * Releases `reason` on `key`, arming the banked time again once no reason is
+   * left. Reports whether this call is the one that started the timer again.
+   */
+  resume(key, reason) {
+    const entry = this.#entries.get(key);
+    if (entry === void 0) return false;
+    entry.reasons.delete(reason);
+    if (entry.reasons.size > 0 || this.#timers.has(key)) return false;
+    this.#arm(key, entry);
+    return true;
+  }
+  /** Whether `key` is armed or held — that is, whether this registry drives it at all. */
+  tracks(key) {
+    return this.#entries.has(key);
+  }
+  /** Cancels `key`'s timer and drops its hold. */
+  clear(key) {
+    this.#timers.clear(key);
+    this.#entries.delete(key);
+  }
+  /**
+   * Cancels every timer and forgets every key. Call this from a controller's
+   * `disconnect()` so neither a timer nor a hold outlives the element.
+   */
+  clearAll() {
+    this.#timers.clearAll();
+    this.#entries.clear();
+  }
+  /** Starts `entry`'s banked time running for `key`, and drops it as it fires. */
+  #arm(key, entry) {
+    entry.startedAt = Date.now();
+    this.#timers.set(
+      key,
+      () => {
+        this.#entries.delete(key);
+        entry.callback();
+      },
+      entry.remaining
+    );
+  }
+};
+
 // src/utils/transition_completion.ts
 function timeMs(value) {
   const trimmed = value.trim();
@@ -99,30 +214,23 @@ var ToastController = class extends Controller {
   };
   static actions = ["dismiss", "onKeydown", "pause", "resume", "show"];
   static events = ["dismiss", "show"];
-  /**
-   * Registry for every auto-dismiss and transition-finalize timer the controller
-   * schedules. `SafeTimeout` owns *registration and teardown only*; the
-   * pause/resume remaining-time accounting stays in `#activeTimeouts` so the
-   * per-widget WCAG 2.2.1 semantics are not flattened into the helper.
-   */
+  /** Removal timers for the leaving transition; the auto-dismiss ones live below. */
   #timers = new SafeTimeout();
+  /** Per-toast auto-dismiss, held open while the toast is hovered or focused. */
+  #dismiss = new PausableTimers();
   /**
    * Pending one-shot `requestAnimationFrame` handles (the entering→visible flip).
    * Tracked so {@link disconnect} can cancel any that have not fired, preventing a
    * detached element from being mutated after it leaves the DOM (Turbo).
    */
   #rafHandles = /* @__PURE__ */ new Map();
-  /** Track active timeouts mapped by each toast element for safe cancellation. */
-  #activeTimeouts = /* @__PURE__ */ new Map();
-  /** Track active pause reasons (hover/focus) per toast for WCAG 2.2.1 pause/resume. */
-  #pauseReasons = /* @__PURE__ */ new Map();
   /** The stable list that owns delegated listeners for dynamically added items. */
   #delegatedList = null;
   connect() {
     this.#connectDelegatedEvents();
     this.enforceMaxLimit();
     for (const item of this.itemTargets) {
-      if (!this.#activeTimeouts.has(item) && item.dataset.state !== "leaving") {
+      if (!this.#dismiss.tracks(item) && item.dataset.state !== "leaving") {
         this.#startTimer(item);
       }
     }
@@ -130,12 +238,11 @@ var ToastController = class extends Controller {
   disconnect() {
     this.#disconnectDelegatedEvents();
     this.#timers.clearAll();
+    this.#dismiss.clearAll();
     for (const handle of this.#rafHandles.values()) {
       window.cancelAnimationFrame(handle);
     }
     this.#rafHandles.clear();
-    this.#activeTimeouts.clear();
-    this.#pauseReasons.clear();
   }
   /** Rebinds delegated interaction when Turbo replaces the list target in place. */
   listTargetConnected(element) {
@@ -148,18 +255,9 @@ var ToastController = class extends Controller {
   durationValueChanged() {
     for (const item of this.itemTargets) {
       if (item.dataset.state === "leaving") continue;
-      const pauseReasons = this.#pauseReasons.get(item);
-      this.#clearTimer(item);
       if (this.durationValue <= 0) {
+        this.#dismiss.clear(item);
         item.removeAttribute("data-paused");
-      } else if (pauseReasons && pauseReasons.size > 0) {
-        this.#pauseReasons.set(item, pauseReasons);
-        this.#activeTimeouts.set(item, {
-          id: 0,
-          startedAt: 0,
-          remaining: this.durationValue
-        });
-        item.setAttribute("data-paused", "true");
       } else {
         this.#startTimer(item);
       }
@@ -188,7 +286,7 @@ var ToastController = class extends Controller {
   }
   /** Clears any active timer when a toast is removed from the DOM. */
   itemTargetDisconnected(element) {
-    this.#clearTimer(element);
+    this.#dismiss.clear(element);
     this.#cancelAnimation(element);
   }
   /**
@@ -260,35 +358,16 @@ var ToastController = class extends Controller {
    */
   pause(event) {
     const item = this.#itemFromEvent(event);
-    if (!item || this.durationValue <= 0) return;
-    const timeout = this.#activeTimeouts.get(item);
-    if (!timeout) return;
-    const reasons = this.#pauseReasonsFor(item);
-    const wasActive = reasons.size > 0;
-    reasons.add(this.#pauseReason(event));
-    if (wasActive || timeout.id === 0) return;
-    this.#timers.clear(timeout.id);
-    const elapsed = Date.now() - timeout.startedAt;
-    const remaining = Math.max(0, timeout.remaining - elapsed);
-    if (remaining <= 0) {
-      this.#removeWithTransition(item, "timeout");
-      return;
+    if (item && this.#dismiss.pause(item, this.#pauseReason(event))) {
+      item.setAttribute("data-paused", "true");
     }
-    this.#activeTimeouts.set(item, { id: 0, startedAt: 0, remaining });
-    item.setAttribute("data-paused", "true");
   }
   /** Resumes the auto-dismiss timer once both hover and focus have been released. */
   resume(event) {
     const item = this.#itemFromEvent(event);
-    if (!item || this.durationValue <= 0) return;
-    const reasons = this.#pauseReasonsFor(item);
-    reasons.delete(this.#pauseReason(event));
-    if (reasons.size > 0) return;
-    const timeout = this.#activeTimeouts.get(item);
-    if (!timeout) return;
-    if (timeout.id !== 0 || timeout.remaining <= 0) return;
-    item.removeAttribute("data-paused");
-    this.#startTimer(item, timeout.remaining);
+    if (item && this.#dismiss.resume(item, this.#pauseReason(event))) {
+      item.removeAttribute("data-paused");
+    }
   }
   /** Resolves the toast item element a pause/resume event targets. */
   #itemFromEvent(event) {
@@ -301,36 +380,20 @@ var ToastController = class extends Controller {
   #pauseReason(event) {
     return event.type === "focusin" || event.type === "focusout" ? "focus" : "hover";
   }
-  /** Lazily creates and returns the active pause-reason set for an item. */
-  #pauseReasonsFor(item) {
-    let reasons = this.#pauseReasons.get(item);
-    if (!reasons) {
-      reasons = /* @__PURE__ */ new Set();
-      this.#pauseReasons.set(item, reasons);
-    }
-    return reasons;
-  }
-  #startTimer(element, duration = this.durationValue) {
-    if (duration <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
+  /** Arms a toast's auto-dismiss; a non-positive `duration` means it never expires. */
+  #startTimer(element) {
+    if (this.durationValue <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
       return;
     }
-    this.#clearTimer(element);
-    const id = this.#timers.set(() => {
-      this.#removeWithTransition(element, "timeout");
-    }, duration);
-    this.#activeTimeouts.set(element, { id, startedAt: Date.now(), remaining: duration });
-  }
-  #clearTimer(element) {
-    const timeout = this.#activeTimeouts.get(element);
-    if (timeout) {
-      if (timeout.id) this.#timers.clear(timeout.id);
-      this.#activeTimeouts.delete(element);
-    }
-    this.#pauseReasons.delete(element);
+    this.#dismiss.set(
+      element,
+      () => this.#removeWithTransition(element, "timeout"),
+      this.durationValue
+    );
   }
   #removeWithTransition(element, reason) {
     if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
-    this.#clearTimer(element);
+    this.#dismiss.clear(element);
     this.#cancelAnimation(element);
     element.setAttribute("data-state", "leaving");
     const finalize = () => {