stimeo-ui 0.1.0.pre.beta.3 → 0.2.1

data/dist/controllers/focus_controller.js

@@ -2,6 +2,90 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/focus_controller.ts
 
+// src/utils/escape_layer.ts
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
 // src/utils/focus_trap.ts
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
@@ -15,6 +99,8 @@ var FocusTrap = class {
   #inertedSiblings = [];
   /** Whether the modal side effects are currently applied. */
   #activeState = false;
+  /** Registers the trap on the shared Escape stack while active (see {@link EscapeLayer}). */
+  #escapeLayer = new EscapeLayer();
   /** Returns the trapped element; called on every operation for the live target. */
   #getContainer;
   /** Closing/focus hooks; see {@link FocusTrapOptions}. */
@@ -50,6 +136,8 @@ var FocusTrap = class {
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    const onEscape = this.#options.onEscape;
+    if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
   }
   /**
@@ -62,6 +150,7 @@ var FocusTrap = class {
   deactivate({ restoreFocus = true } = {}) {
     if (!this.#activeState) return;
     this.#activeState = false;
+    this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
     document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
     if (this.#scrollLocked) {
@@ -90,15 +179,12 @@ var FocusTrap = class {
   #onBeforeCache = () => {
     this.deactivate({ restoreFocus: false });
   };
-  /** Handles `Escape` (delegated) and `Tab` (focus trap) while active. */
+  /**
+   * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
+   * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
+   * which layer currently owns Escape.
+   */
   #onKeydown = (event) => {
-    if (event.key === "Escape") {
-      if (this.#options.onEscape) {
-        event.preventDefault();
-        this.#options.onEscape();
-      }
-      return;
-    }
     if (event.key === "Tab") this.#trapTab(event);
   };
   /** Keeps `Tab` focus cycling within the container's focusable elements. */

data/dist/controllers/form_validation_controller.js

@@ -181,8 +181,8 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
   /**
    * Applies (or clears) a declarative custom constraint via `setCustomValidity`,
-   * for controls that opt in with `data-stimeo--form-field-disallow`. The one
-   * supported rule today is `"whitespace"` — a value that is non-empty but blank
+   * for controls that opt in with `data-stimeo--form-field-disallow`. The supported
+   * rule is `"whitespace"` — a value that is non-empty but blank
    * after trimming (which slips past `required` / `minlength`); its message follows
    * the per-constraint (`value-missing`) → generic → default chain.
    *

data/dist/controllers/highlight_controller.js

@@ -2,6 +2,11 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/highlight_controller.ts
 
+// 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). */
@@ -89,7 +94,7 @@ var HighlightController = class extends Controller {
   }
   /** Flags `el` with `data-highlight` and schedules its removal (unless reduced-motion). */
   #highlight(el) {
-    if (this.#prefersReducedMotion()) return;
+    if (prefersReducedMotion()) return;
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
     this.#timeouts.set(() => {
@@ -97,9 +102,6 @@ var HighlightController = class extends Controller {
       this.dispatch("end", { target: el, detail: { element: el } });
     }, this.durationValue);
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { HighlightController };

data/dist/controllers/hover_card_controller.js

@@ -2,6 +2,90 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/hover_card_controller.ts
 
+// src/utils/escape_layer.ts
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -88,21 +172,26 @@ var HoverCardController = class extends Controller {
     closeDelay: { type: Number, default: 200 },
     closeOnScroll: { type: Boolean, default: false }
   };
-  static actions = ["close", "onKeydown", "open"];
-  /** Pending open/close timers, torn down together on disconnect. */
+  static actions = ["close", "open"];
+  /** Pending open/close timers, with their IDs reset on every lifecycle boundary. */
   #timers = new SafeTimeout();
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
   #pendingOpen = null;
   #pendingClose = null;
   /** Cleanup for the dismiss-on-scroll listeners while open, or `null`. */
   #stopScrollDismiss = null;
-  /** Starts closed. */
+  /** Starts closed and discards any stale pending state from a prior connection. */
   connect() {
+    this.#cancelOpen();
+    this.#cancelClose();
     this.#conceal();
   }
-  /** Clears timers and the document `Escape` / scroll listeners so nothing outlives the element. */
+  /** Clears timers, the Escape-stack membership, and scroll listeners so nothing outlives the element. */
   disconnect() {
-    this.#timers.clearAll();
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#cancelOpen();
+    this.#cancelClose();
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
   }
@@ -134,32 +223,26 @@ var HoverCardController = class extends Controller {
       this.#conceal();
     }, this.closeDelayValue);
   }
-  /** Closes immediately on `Escape` while open (keyboard dismissal from the trigger). */
-  onKeydown(event) {
-    if (event.key === "Escape" && this.#isOpen) {
-      event.preventDefault();
-      this.#dismiss();
-    }
-  }
-  /** Reveals the card, reflects state, and starts watching for a dismissing `Escape`/scroll. */
+  /** Reveals the card, reflects state, and joins the Escape stack / scroll watcher. */
   #reveal() {
     if (!this.hasCardTarget) return;
     this.cardTarget.hidden = false;
     this.cardTarget.setAttribute("data-state", "open");
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "true");
-    document.addEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.activate(document, { onDismiss: () => this.#dismiss() });
     if (this.closeOnScrollValue && !this.#stopScrollDismiss) {
       this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.#dismiss());
     }
   }
-  /** Hides the card, reflects state, and stops watching for `Escape`/scroll. */
+  /** Hides the card, reflects state, and leaves the Escape stack / scroll watcher. */
   #conceal() {
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
-    if (!this.hasCardTarget) return;
-    this.cardTarget.hidden = true;
-    this.cardTarget.setAttribute("data-state", "closed");
+    if (this.hasCardTarget) {
+      this.cardTarget.hidden = true;
+      this.cardTarget.setAttribute("data-state", "closed");
+    }
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "false");
   }
   /** Cancels pending timers and conceals immediately (shared Escape path). */
@@ -168,13 +251,6 @@ var HoverCardController = class extends Controller {
     this.#cancelClose();
     this.#conceal();
   }
-  /** Document-level `Escape` watcher (active only while open). */
-  #onDocumentKeydown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.#dismiss();
-    }
-  };
   /** Cancels any pending open timer. */
   #cancelOpen() {
     if (this.#pendingOpen !== null) {

data/dist/controllers/intersection_controller.js

@@ -3,6 +3,12 @@ import { Controller } from '@hotwired/stimulus';
 // src/controllers/intersection_controller.ts
 
 // src/utils/intersection_watcher.ts
+function isBeforeRootStart(entry) {
+  const rect = entry.boundingClientRect;
+  if (rect.width === 0 && rect.height === 0) return false;
+  const rootTop = entry.rootBounds?.top ?? 0;
+  return rect.bottom <= rootTop;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -18,6 +24,11 @@ var IntersectionWatcher = class {
    * (Re)creates the observer and observes `targets`. Returns `false` — leaving
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
+   *
+   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`
+   *   or a failing `observe()`. The exception is passed through unchanged, but
+   *   the watcher rolls back first: every target observed so far is released and
+   *   `active` stays `false`, so a caller that retries starts from a clean slate.
    */
   start(targets, options = {}) {
     this.stop();
@@ -25,25 +36,42 @@ var IntersectionWatcher = class {
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
-    this.#active = true;
-    this.#observer = new IntersectionObserver(
-      (entries) => {
-        if (this.#active) this.#onEntries(entries);
-      },
-      { root, rootMargin: options.rootMargin, threshold: options.threshold }
-    );
-    for (const target of list) this.#observer.observe(target);
-    return true;
+    let observer = null;
+    try {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (this.#active && this.#observer === observer) this.#onEntries(entries);
+        },
+        { root, rootMargin: options.rootMargin, threshold: options.threshold }
+      );
+      for (const target of list) observer.observe(target);
+      this.#observer = observer;
+      this.#active = true;
+      return true;
+    } catch (error) {
+      observer?.disconnect();
+      this.#observer = null;
+      this.#active = false;
+      throw error;
+    }
   }
   /**
    * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
    * only reports *changes*, but `observe()` always reports the present state,
    * so unobserve→observe turns "still intersecting" into a fresh callback.
+   *
+   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
+   *   first, so it never stays live with a half-rearmed target.
    */
   rearm(target) {
     if (!this.#observer) return;
-    this.#observer.unobserve(target);
-    this.#observer.observe(target);
+    try {
+      this.#observer.unobserve(target);
+      this.#observer.observe(target);
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
   }
   /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {
@@ -80,7 +108,7 @@ var IntersectionController = class extends Controller {
       this.element.style.setProperty(RATIO_PROPERTY, String(ratio));
       this.dispatch("change", { detail: { intersecting, ratio } });
       this.#syncIntersecting(intersecting, ratio, entry);
-      this.#syncPassed(!intersecting && this.#isBefore(entry));
+      this.#syncPassed(!intersecting && isBeforeRootStart(entry));
     }
   }
   connect() {
@@ -128,7 +156,7 @@ var IntersectionController = class extends Controller {
       if (this.onceValue) this.#watcher.stop();
     } else if (!intersecting && previous === "true") {
       this.dispatch("exit", {
-        detail: { ratio, position: this.#isBefore(entry) ? "before" : "after" }
+        detail: { ratio, position: isBeforeRootStart(entry) ? "before" : "after" }
       });
     }
   }
@@ -144,11 +172,6 @@ var IntersectionController = class extends Controller {
     const changed = previous === null ? passed : previous === "true" !== passed;
     if (changed) this.dispatch("passed", { detail: { passed } });
   }
-  /** True when the element sits entirely before the root's start (top) edge. */
-  #isBefore(entry) {
-    const rootTop = entry.rootBounds?.top ?? 0;
-    return entry.boundingClientRect.bottom <= rootTop;
-  }
   /** The configured `threshold`, clamped to the 0..1 the observer accepts. */
   #clampedThreshold() {
     return Math.min(1, Math.max(0, this.thresholdValue));

data/dist/controllers/lazy_frame_controller.js

@@ -18,6 +18,11 @@ var IntersectionWatcher = class {
    * (Re)creates the observer and observes `targets`. Returns `false` — leaving
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
+   *
+   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`
+   *   or a failing `observe()`. The exception is passed through unchanged, but
+   *   the watcher rolls back first: every target observed so far is released and
+   *   `active` stays `false`, so a caller that retries starts from a clean slate.
    */
   start(targets, options = {}) {
     this.stop();
@@ -25,25 +30,42 @@ var IntersectionWatcher = class {
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
-    this.#active = true;
-    this.#observer = new IntersectionObserver(
-      (entries) => {
-        if (this.#active) this.#onEntries(entries);
-      },
-      { root, rootMargin: options.rootMargin, threshold: options.threshold }
-    );
-    for (const target of list) this.#observer.observe(target);
-    return true;
+    let observer = null;
+    try {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (this.#active && this.#observer === observer) this.#onEntries(entries);
+        },
+        { root, rootMargin: options.rootMargin, threshold: options.threshold }
+      );
+      for (const target of list) observer.observe(target);
+      this.#observer = observer;
+      this.#active = true;
+      return true;
+    } catch (error) {
+      observer?.disconnect();
+      this.#observer = null;
+      this.#active = false;
+      throw error;
+    }
   }
   /**
    * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
    * only reports *changes*, but `observe()` always reports the present state,
    * so unobserve→observe turns "still intersecting" into a fresh callback.
+   *
+   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
+   *   first, so it never stays live with a half-rearmed target.
    */
   rearm(target) {
     if (!this.#observer) return;
-    this.#observer.unobserve(target);
-    this.#observer.observe(target);
+    try {
+      this.#observer.unobserve(target);
+      this.#observer.observe(target);
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
   }
   /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {

data/dist/controllers/listbox_controller.js

@@ -145,6 +145,7 @@ var ListboxController = class extends Controller {
         this.#commitActive();
         break;
       case "Escape":
+        if (event.defaultPrevented || event.isComposing) break;
         event.preventDefault();
         this.close();
         this.triggerTarget.focus();

data/dist/controllers/masonry_controller.js

@@ -0,0 +1,142 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/masonry_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    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()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
+// src/controllers/masonry_controller.ts
+var COLUMNS_PROPERTY = "--stimeo-masonry-columns";
+var MasonryController = class extends Controller {
+  static targets = ["item"];
+  static values = {
+    minColumnWidth: { type: Number, default: 240 },
+    gap: { type: Number, default: 16 }
+  };
+  static events = ["layout"];
+  #layout = new LayoutObserver(() => this.#relayout());
+  #mutationObserver = null;
+  /** Last published column count, so `layout` fires only on real changes. */
+  #lastColumns = 0;
+  /**
+   * Re-pack when a descendant resource finishes loading. Images/iframes report a
+   * height of 0 until loaded, which would skew the shortest-column packing if the
+   * first pass ran before they settled; `load` does not bubble, so this is bound in
+   * the capture phase to catch every descendant.
+   */
+  #onLoad = () => this.#relayout();
+  /** Observes size/content changes and performs the first layout pass. */
+  connect() {
+    this.#layout.observe(this.element);
+    this.#layout.observeViewport();
+    if (typeof MutationObserver !== "undefined") {
+      this.#mutationObserver = new MutationObserver(() => this.#relayout());
+      this.#mutationObserver.observe(this.element, { childList: true, subtree: true });
+    }
+    this.element.addEventListener("load", this.#onLoad, true);
+    this.#relayout();
+  }
+  /** Releases both observers and the load listener so nothing fires after detach. */
+  disconnect() {
+    this.#layout.disconnect();
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.element.removeEventListener("load", this.#onLoad, true);
+    this.#lastColumns = 0;
+  }
+  /**
+   * Recomputes the column count and assigns every item to the shortest column.
+   * Runs automatically on connect, on resize, on item add/remove, and when a
+   * descendant resource loads (private — there is no public action; the observers
+   * and the capture-phase `load` listener drive it). Items are walked in DOM
+   * order; each lands in the column with the least accumulated height, which
+   * keeps the packing balanced without reordering the DOM.
+   */
+  #relayout() {
+    const items = this.itemTargets;
+    const columns = this.#columnCount();
+    const heights = new Array(columns).fill(0);
+    for (const item of items) {
+      let shortest = 0;
+      for (let col = 1; col < columns; col++) {
+        if ((heights[col] ?? 0) < (heights[shortest] ?? 0)) shortest = col;
+      }
+      item.setAttribute("data-column", String(shortest));
+      heights[shortest] = (heights[shortest] ?? 0) + item.getBoundingClientRect().height + this.gapValue;
+    }
+    this.element.style.setProperty(COLUMNS_PROPERTY, String(columns));
+    if (columns !== this.#lastColumns) {
+      this.#lastColumns = columns;
+      this.dispatch("layout", { detail: { columns } });
+    }
+  }
+  /**
+   * Derives how many columns fit: `floor((width + gap) / (minColumnWidth + gap))`,
+   * never fewer than one. When the width is unmeasurable (detached, or a layout
+   * engine that reports `0`), it falls back to a single column so every item still
+   * gets a valid `data-column`.
+   */
+  #columnCount() {
+    const width = this.element.getBoundingClientRect().width;
+    const denominator = this.minColumnWidthValue + this.gapValue;
+    if (width <= 0 || denominator <= 0) return 1;
+    return Math.max(1, Math.floor((width + this.gapValue) / denominator));
+  }
+};
+
+export { MasonryController };
+//# sourceMappingURL=masonry_controller.js.map
+//# sourceMappingURL=masonry_controller.js.map