stimeo-ui 0.13.0 → 0.15.0

data/dist/controllers/reading_progress_controller.js

@@ -31,16 +31,51 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/frame_coalescer.ts
+var FrameCoalescer = class {
+  #frame = null;
+  /**
+   * Runs `run` on the next frame, unless a frame is already pending — the first
+   * request of a burst wins and the rest are dropped. The pending frame is
+   * released before `run`, so `run` may request the next one.
+   */
+  schedule(run) {
+    if (this.#frame !== null) return;
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null;
+      run();
+    });
+  }
+  /**
+   * Drops the pending frame, and reaches the platform only when there is one.
+   *
+   * There is no handle value that stands for "nothing pending":
+   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
+   * arrives as a large positive number that the same allocator can hand out, and
+   * an idle cancel would then drop a frame belonging to someone else.
+   */
+  cancel() {
+    if (this.#frame === null) return;
+    cancelAnimationFrame(this.#frame);
+    this.#frame = null;
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
   #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));
@@ -76,14 +111,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();
   }
 };
 
@@ -148,18 +204,13 @@ var ReadingProgressController = class extends Controller {
   /** The article's own box and the viewport: either changes the span. */
   #layout = new LayoutObserver(() => this.#onScroll());
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  #frame = null;
+  /** Coalesces scroll bursts, and the connect baseline, into one frame. */
+  #frames = new FrameCoalescer();
   /** Last published progress, so `change`/`complete` fire only on movement. */
   #progress = -1;
   /** False until the connect frame has run: `complete` needs real reading. */
   #baselined = false;
-  #onScroll = () => {
-    if (this.#frame !== null) return;
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
-      this.#measure();
-    });
-  };
+  #onScroll = () => this.#frames.schedule(() => this.#measure());
   connect() {
     this.#progress = -1;
     this.#baselined = false;
@@ -168,8 +219,7 @@ var ReadingProgressController = class extends Controller {
     this.#layout.observeViewport();
     this.#beforeCache.activate();
     this.#measure();
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
+    this.#frames.schedule(() => {
       this.#measure();
       this.#baselined = true;
     });
@@ -178,7 +228,7 @@ var ReadingProgressController = class extends Controller {
     window.removeEventListener("scroll", this.#onScroll, { capture: true });
     this.#layout.disconnect();
     this.#beforeCache.deactivate();
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#lease.returnAll();
   }
   /**
@@ -189,14 +239,10 @@ var ReadingProgressController = class extends Controller {
    * value that has already been handed back.
    */
   #rewindForCache() {
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#lease.returnAll();
     this.#progress = -1;
   }
-  #cancelFrame() {
-    if (this.#frame !== null) cancelAnimationFrame(this.#frame);
-    this.#frame = null;
-  }
   /** Computes and publishes the progress; emits on movement only. */
   #measure() {
     const rect = this.element.getBoundingClientRect();

data/dist/controllers/relative_time_controller.js

@@ -31,6 +31,40 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/intl_format.ts
+var formatters = /* @__PURE__ */ new WeakMap();
+function intlFormatter(factory, locale, options, fallbackLocale) {
+  const cache = cacheFor(factory);
+  const key = cacheKey(locale, options, fallbackLocale);
+  if (cache.has(key)) return cache.get(key);
+  const formatter = construct(factory, locale, options);
+  cache.set(key, formatter);
+  return formatter;
+}
+function cacheFor(factory) {
+  const existing = formatters.get(factory);
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  formatters.set(factory, created);
+  return created;
+}
+function cacheKey(locale, options, fallbackLocale) {
+  return JSON.stringify([locale, options, fallbackLocale]);
+}
+function construct(factory, locale, options, fallbackLocale) {
+  try {
+    return new factory(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return null;
+  }
+}
+
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -128,6 +162,7 @@ var UNITS = [
   { limit: 31557600, unit: "month", ms: 26298e5 },
   YEAR_SCALE
 ];
+var RELATIVE_OPTIONS = { numeric: "auto" };
 var RelativeTimeController = class extends Controller {
   static values = {
     locale: { type: String, default: "" },
@@ -235,15 +270,11 @@ var RelativeTimeController = class extends Controller {
    * when the runtime rejects that locale.
    */
   get #formatter() {
-    try {
-      return new Intl.RelativeTimeFormat(this.#locale, { numeric: "auto" });
-    } catch {
-      return null;
-    }
-  }
-  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
-  get #locale() {
-    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
+    return intlFormatter(
+      Intl.RelativeTimeFormat,
+      resolveLocale(this.element, this.localeValue),
+      RELATIVE_OPTIONS
+    );
   }
 };
 

data/dist/controllers/reset_before_cache_controller.js

@@ -1,5 +1,27 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/reset_before_cache_controller.ts
+
+// src/utils/declared_value.ts
+function parseDeclared(raw, parse, fallback) {
+  try {
+    return parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+function validSelector(element, raw, fallback) {
+  if (raw.length === 0) return fallback;
+  return parseDeclared(
+    raw,
+    (selector) => {
+      element.matches(selector);
+      return selector;
+    },
+    fallback
+  );
+}
+
 // src/controllers/reset_before_cache_controller.ts
 var STATELESS_INPUT_TYPES = /* @__PURE__ */ new Set(["hidden", "submit", "reset", "button", "image"]);
 function restoreField(element) {
@@ -43,16 +65,7 @@ var ResetBeforeCacheController = class extends Controller {
    * silently taking the sweep down.
    */
   scopeValueChanged() {
-    const selector = this.scopeValue;
-    if (selector.length > 0) {
-      try {
-        this.element.matches(selector);
-        this.#scopeSelector = selector;
-        return;
-      } catch {
-      }
-    }
-    this.#scopeSelector = "";
+    this.#scopeSelector = validSelector(this.element, this.scopeValue, "");
   }
   connect() {
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);

data/dist/controllers/resizable_controller.js

@@ -8,6 +8,12 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/event_owner.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -154,8 +160,7 @@ var ResizableController = class extends Controller {
     const panes = [];
     if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
     if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
-    const target = event.target;
-    const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
+    const current = ownerIndex(panes, event.target);
     const next = panes[(current + 1) % panes.length];
     if (!next) return;
     event.preventDefault();

data/dist/controllers/roving_controller.js

@@ -16,6 +16,12 @@ function hasModifierChord(event) {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 
+// src/utils/event_owner.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+
 // src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
@@ -182,9 +188,7 @@ var RovingController = class extends Controller {
   };
   /** Resolves the item index owning an event target (the item or a descendant). */
   #indexOf(target) {
-    const node = target;
-    if (!node) return -1;
-    return this.itemTargets.findIndex((item) => item === node || item.contains(node));
+    return ownerIndex(this.itemTargets, target);
   }
   /** Makes `index` the tab stop (optionally focusing it), emitting `change` once. */
   #activate(index, focus) {

data/dist/controllers/scroll_area_controller.js

@@ -150,16 +150,51 @@ function hasTabStop(root) {
   return firstTabStop(root) !== null;
 }
 
+// src/utils/frame_coalescer.ts
+var FrameCoalescer = class {
+  #frame = null;
+  /**
+   * Runs `run` on the next frame, unless a frame is already pending — the first
+   * request of a burst wins and the rest are dropped. The pending frame is
+   * released before `run`, so `run` may request the next one.
+   */
+  schedule(run) {
+    if (this.#frame !== null) return;
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null;
+      run();
+    });
+  }
+  /**
+   * Drops the pending frame, and reaches the platform only when there is one.
+   *
+   * There is no handle value that stands for "nothing pending":
+   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
+   * arrives as a large positive number that the same allocator can hand out, and
+   * an idle cancel would then drop a frame belonging to someone else.
+   */
+  cancel() {
+    if (this.#frame === null) return;
+    cancelAnimationFrame(this.#frame);
+    this.#frame = null;
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
   #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));
@@ -195,14 +230,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();
   }
 };
 
@@ -359,20 +415,14 @@ var ScrollAreaController = class extends Controller {
   #observedNameIds = /* @__PURE__ */ new Set();
   #observedNameSources = [];
   #fonts = null;
-  #scrollFrame = null;
+  /** Coalesces scroll bursts into one position sync per frame. */
+  #frames = new FrameCoalescer();
   #overflowing = false;
   #lastEdge = null;
   #ownedHostMutations = /* @__PURE__ */ new Map();
-  #onScroll = () => {
-    if (this.#scrollFrame !== null) return;
-    this.#scrollFrame = requestAnimationFrame(() => {
-      this.#scrollFrame = null;
-      const viewport = this.#viewport;
-      if (viewport) this.#syncPosition(viewport, this.#overflowing);
-    });
-  };
-  #onLoad = () => {
-    this.#refresh();
+  #onScroll = (event) => {
+    const viewport = event.currentTarget;
+    this.#frames.schedule(() => this.#syncPosition(viewport, this.#overflowing));
   };
   #onFontsSettled = () => {
     this.#refresh();
@@ -387,7 +437,7 @@ var ScrollAreaController = class extends Controller {
   disconnect() {
     this.#beforeCache.deactivate();
     this.#rebind.cancel();
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#layout.disconnect();
     this.#unbindFonts();
@@ -420,7 +470,7 @@ var ScrollAreaController = class extends Controller {
       return;
     }
     next.addEventListener("scroll", this.#onScroll, { passive: true });
-    next.addEventListener("load", this.#onLoad, true);
+    this.#layout.observeDescendantLoads(next);
     this.#layout.observe(next);
     this.#bindContentObserver(next);
     this.#refresh();
@@ -455,9 +505,9 @@ var ScrollAreaController = class extends Controller {
   }
   /** Releases every resource and borrowed attribute owned by one former viewport. */
   #unbindViewport(viewport) {
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     viewport.removeEventListener("scroll", this.#onScroll);
-    viewport.removeEventListener("load", this.#onLoad, true);
+    this.#layout.unobserveDescendantLoads();
     this.#layout.unobserve(viewport);
     this.#content?.disconnect();
     this.#content = null;
@@ -472,7 +522,7 @@ var ScrollAreaController = class extends Controller {
   #refresh() {
     const viewport = this.#viewport;
     if (!viewport) return;
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     this.#syncNameSources(viewport);
     this.#overflowing = this.#syncOverflow(viewport);
     this.#syncKeyboardReach(viewport, this.#overflowing);
@@ -680,16 +730,10 @@ var ScrollAreaController = class extends Controller {
     this.#fonts?.removeEventListener("loadingerror", this.#onFontsSettled);
     this.#fonts = null;
   }
-  /** Cancels a pending scroll frame. */
-  #cancelScrollFrame() {
-    if (this.#scrollFrame === null) return;
-    cancelAnimationFrame(this.#scrollFrame);
-    this.#scrollFrame = null;
-  }
   /** Suspends live resources and returns all derived state before snapshotting. */
   #rewindForCache() {
     this.#rebind.cancel();
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#layout.disconnect();
     this.#unbindFonts();

data/dist/controllers/scroll_restore_controller.js

@@ -1,5 +1,37 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/scroll_restore_controller.ts
+
+// src/utils/frame_coalescer.ts
+var FrameCoalescer = class {
+  #frame = null;
+  /**
+   * Runs `run` on the next frame, unless a frame is already pending — the first
+   * request of a burst wins and the rest are dropped. The pending frame is
+   * released before `run`, so `run` may request the next one.
+   */
+  schedule(run) {
+    if (this.#frame !== null) return;
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null;
+      run();
+    });
+  }
+  /**
+   * Drops the pending frame, and reaches the platform only when there is one.
+   *
+   * There is no handle value that stands for "nothing pending":
+   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
+   * arrives as a large positive number that the same allocator can hand out, and
+   * an idle cancel would then drop a frame belonging to someone else.
+   */
+  cancel() {
+    if (this.#frame === null) return;
+    cancelAnimationFrame(this.#frame);
+    this.#frame = null;
+  }
+};
+
 // src/controllers/scroll_restore_controller.ts
 function parseStored(raw) {
   if (raw === null) return null;
@@ -17,8 +49,8 @@ var ScrollRestoreController = class extends Controller {
     key: { type: String, default: "" },
     axis: { type: String, default: "vertical" }
   };
-  /** Pending rAF id that coalesces scroll bursts into one save. */
-  #rafId = null;
+  /** Coalesces scroll bursts into one save per frame. */
+  #frames = new FrameCoalescer();
   /** Resolved storage key; empty disables persistence (no key and no id). */
   #storageKey = "";
   /** Last offset captured while the element was live; persisted as-is on teardown. */
@@ -46,11 +78,7 @@ var ScrollRestoreController = class extends Controller {
   #connected = false;
   #onScroll = () => {
     this.#capture();
-    if (this.#rafId !== null) return;
-    this.#rafId = requestAnimationFrame(() => {
-      this.#rafId = null;
-      this.#persist();
-    });
+    this.#frames.schedule(() => this.#persist());
   };
   connect() {
     this.#connected = true;
@@ -61,7 +89,7 @@ var ScrollRestoreController = class extends Controller {
   disconnect() {
     this.#connected = false;
     this.element.removeEventListener("scroll", this.#onScroll);
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#persist();
   }
   /** Re-derives the namespace when application code or a Turbo morph moves `key`. */
@@ -75,7 +103,7 @@ var ScrollRestoreController = class extends Controller {
   /** Rebuilds the persistence state around the Values as they now read. */
   #resync() {
     if (!this.#connected) return;
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#storageKey = this.#resolveKey();
     this.#echoTop = null;
     this.#echoLeft = null;
@@ -84,13 +112,6 @@ var ScrollRestoreController = class extends Controller {
     this.#capturedLeft = false;
     if (this.#storageKey) this.#restore();
   }
-  /** Drops the pending coalesced save, if one is queued. */
-  #cancelFrame() {
-    if (this.#rafId !== null) {
-      cancelAnimationFrame(this.#rafId);
-      this.#rafId = null;
-    }
-  }
   /**
    * Records the live scroll offset for the configured axis.
    *