stimeo-ui 0.16.0 → 0.17.0

package/dist/controllers/masonry_controller.js

@@ -1,19 +1,14 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/masonry_controller.ts
-
-// 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();
   };
@@ -21,11 +16,6 @@ var LayoutObserver = class {
     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) {
@@ -35,47 +25,28 @@ var LayoutObserver = class {
     }
     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);
   }
-  /**
-   * 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;
@@ -84,27 +55,22 @@ var LayoutObserver = class {
   }
 };
 
-// src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
   #queued = false;
   #active = false;
   #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
   constructor(run) {
     this.#run = run;
   }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
   activate() {
     this.#active = true;
   }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
   cancel() {
     this.#active = false;
     this.#queued = false;
     this.#generation += 1;
   }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -117,69 +83,87 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/controllers/masonry_controller.ts
+var NUMBER_BOUNDS = {
+  finite: { finite: true }};
+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;
+  }
+};
+
 var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
 var DEFAULT_MIN_COLUMN_WIDTH = 240;
 var DEFAULT_GAP = 16;
-function usableNumber(value, fallback) {
-  return Number.isFinite(value) ? value : fallback;
-}
-var MasonryController = class extends Controller {
+var MasonryController = class _MasonryController extends Controller {
+  #numbers = new NumberValueReader();
   static targets = ["item"];
   static values = {
     minColumnWidth: { type: Number, default: DEFAULT_MIN_COLUMN_WIDTH },
     gap: { type: Number, default: DEFAULT_GAP }
   };
+  static valueConstraints = {
+    minColumnWidth: NUMBER_BOUNDS.finite,
+    gap: NUMBER_BOUNDS.finite
+  };
   static events = ["layout"];
-  /**
-   * The declared numbers after validation, so the layout path never sees a value
-   * it cannot compute with. Both are resolved once per declaration change rather
-   * than on every pass.
-   */
   #minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH;
   #gap = DEFAULT_GAP;
-  /**
-   * Collapses every re-layout trigger of one DOM mutation into a single pass, and
-   * refuses to run before `connect()` or after `disconnect()`.
-   *
-   * The triggers arrive in bursts — a resize stream, a morph that syncs several
-   * attributes, a batch of rows — and each pass measures every item, so folding
-   * them keeps the work proportional to the batch rather than to the events in it.
-   */
   #reconcile = new MicrotaskCoalescer(() => this.#relayout());
-  /** Items that left the target set and still carry the column hook. */
   #released = /* @__PURE__ */ new Set();
   #layout = new LayoutObserver(() => this.#reconcile.schedule());
   #mutationObserver = null;
-  /** Last published column count, so `layout` fires only on real changes. */
   #lastColumns = 0;
-  /** Resolves the declared column width once, falling back when it is unreadable. */
   minColumnWidthValueChanged() {
-    this.#minColumnWidth = usableNumber(this.minColumnWidthValue, DEFAULT_MIN_COLUMN_WIDTH);
+    this.#minColumnWidth = this.#safeMinColumnWidth;
     this.#reconcile.schedule();
   }
-  /** Resolves the declared gap once, falling back when it is unreadable. */
   gapValueChanged() {
-    this.#gap = usableNumber(this.gapValue, DEFAULT_GAP);
+    this.#gap = this.#safeGap;
     this.#reconcile.schedule();
   }
-  /** Packs an element that became an item without moving in the DOM. */
   itemTargetConnected() {
     this.#reconcile.schedule();
   }
-  /**
-   * Queues the column hook of an element that stopped being an item for removal.
-   *
-   * The removal is queued rather than immediate because teardown reports every
-   * target as disconnected: doing it here would strip the whole grid just before
-   * a Turbo snapshot is taken. The coalescer's `cancel` drops the queue
-   * with the pass, so only a genuine target change reaches it.
-   */
   itemTargetDisconnected(item) {
     this.#released.add(item);
     this.#reconcile.schedule();
   }
-  /** Observes size/content changes and performs the first layout pass. */
   connect() {
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
@@ -191,31 +175,13 @@ var MasonryController = class extends Controller {
     this.#relayout();
     this.#reconcile.activate();
   }
-  /** Releases every observation so nothing fires after detach. */
   disconnect() {
     this.#reconcile.cancel();
-    this.#released.clear();
     this.#layout.disconnect();
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
     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, when a declared
-   * number changes, and when a descendant resource loads (private — there is no
-   * public action; the observers, the target callbacks 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.
-   *
-   * Every box is measured before anything is written. Interleaving the two would
-   * make a consumer's `data-column` rule invalidate style once per item, and the
-   * next measurement then has to settle layout again — once per item instead of
-   * once per pass. The assignment is independent of the measurement because the
-   * columns are uniform in width, so the order of the two passes does not change
-   * the result.
-   */
   #relayout() {
     const items = this.itemTargets;
     const columns = this.#columnCount();
@@ -251,20 +217,31 @@ var MasonryController = class extends Controller {
       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.#minColumnWidth + this.#gap;
     if (width <= 0 || denominator <= 0) return 1;
     return Math.max(1, Math.floor((width + this.#gap) / denominator));
   }
+  get #safeMinColumnWidth() {
+    return this.#numbers.read(
+      this,
+      "minColumnWidth",
+      this.minColumnWidthValue,
+      _MasonryController.values.minColumnWidth.default,
+      _MasonryController.valueConstraints.minColumnWidth
+    );
+  }
+  get #safeGap() {
+    return this.#numbers.read(
+      this,
+      "gap",
+      this.gapValue,
+      _MasonryController.values.gap.default,
+      _MasonryController.valueConstraints.gap
+    );
+  }
 };
 
 export { MasonryController };
-//# sourceMappingURL=masonry_controller.js.map
 //# sourceMappingURL=masonry_controller.js.map

package/dist/controllers/masonry_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/layout_observer.ts","../../src/utils/microtask_coalescer.ts","../../src/controllers/masonry_controller.ts"],"names":[],"mappings":"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","file":"masonry_controller.js","sourcesContent":["/**\n * Unified layout observation for Stimeo controllers.\n *\n * Widgets whose output is measured — an overflow boundary, a masonry column count,\n * an autosized textarea — have three sources that move the layout under them: their\n * *own* box changing — via {@link ResizeObserver} — the *viewport* changing — via the\n * `window` `resize` event — and a descendant *resource settling*, because an image or\n * a frame reports a height of zero until it has loaded. Wiring those three by hand in\n * every controller risks leaked listeners on `disconnect()`. {@link LayoutObserver}\n * owns all three behind one callback and one\n * {@link LayoutObserver.disconnect | disconnect()} that releases everything.\n *\n * Behavior only: the helper reports *that* layout changed; it never reads or\n * writes styles. Consumers decide what to recompute.\n */\n\n/** Invoked whenever an observed element or the viewport changes size. */\nexport type LayoutCallback = () => void;\n\n/** Constructs a {@link ResizeObserver}; injectable so tests stay deterministic. */\nexport type ResizeObserverFactory = (callback: ResizeObserverCallback) => ResizeObserver;\n\n/** Options for {@link LayoutObserver}. */\nexport interface LayoutObserverOptions {\n  /**\n   * Factory for the {@link ResizeObserver} used by {@link LayoutObserver.observe}.\n   * Defaults to the global constructor; override it in tests, or to no-op in\n   * environments where `ResizeObserver` is unavailable.\n   */\n  resizeObserverFactory?: ResizeObserverFactory;\n}\n\n/**\n * Observes element resizes and/or viewport resizes through a single callback,\n * with guaranteed teardown.\n *\n * @example\n * ```ts\n * #layout = new LayoutObserver(() => this.#reposition());\n *\n * connect() {\n *   this.#layout.observe(this.panelTarget);\n *   this.#layout.observeViewport();\n *   this.#layout.observeDescendantLoads(this.panelTarget);\n * }\n *\n * disconnect() {\n *   this.#layout.disconnect();\n * }\n * ```\n */\nexport class LayoutObserver {\n  readonly #callback: LayoutCallback;\n  readonly #resizeObserverFactory: ResizeObserverFactory | null;\n  #resizeObserver: ResizeObserver | null = null;\n  #observingViewport = false;\n  #loadContainer: Element | null = null;\n\n  /** Stable bound handler so add/removeEventListener target the same reference. */\n  readonly #handleViewportResize = (): void => {\n    this.#callback();\n  };\n\n  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */\n  readonly #handleDescendantLoad = (): void => {\n    this.#callback();\n  };\n\n  constructor(callback: LayoutCallback, options: LayoutObserverOptions = {}) {\n    this.#callback = callback;\n    this.#resizeObserverFactory =\n      options.resizeObserverFactory ??\n      (typeof ResizeObserver === \"undefined\" ? null : (cb) => new ResizeObserver(cb));\n  }\n\n  /**\n   * Starts observing an element's size. Repeated calls observe additional\n   * elements through the same shared observer. No-ops when no\n   * `ResizeObserver` implementation is available.\n   */\n  observe(element: Element): void {\n    if (!this.#resizeObserverFactory) return;\n    if (!this.#resizeObserver) {\n      this.#resizeObserver = this.#resizeObserverFactory(() => {\n        this.#callback();\n      });\n    }\n    this.#resizeObserver.observe(element);\n  }\n\n  /** Stops observing a single element while leaving any others in place. */\n  unobserve(element: Element): void {\n    this.#resizeObserver?.unobserve(element);\n  }\n\n  /** Starts observing viewport resizes. Idempotent: the listener is added once. */\n  observeViewport(): void {\n    if (this.#observingViewport) return;\n    this.#observingViewport = true;\n    window.addEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /** Stops observing viewport resizes without affecting element observation. */\n  unobserveViewport(): void {\n    if (!this.#observingViewport) return;\n    this.#observingViewport = false;\n    window.removeEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /**\n   * Starts reporting a `load` from anywhere inside `container` — an image or a\n   * frame settling changes the box it sits in, and it measures as zero high until\n   * then. `load` does not bubble, so the subscription is a capture-phase listener\n   * on the container itself and nothing the caller spells.\n   *\n   * **One container at a time.** A further call moves the observation, so a widget\n   * whose content element is swapped at runtime releases the element it let go by\n   * naming the new one — there is no second place for the release to drift from.\n   */\n  observeDescendantLoads(container: Element): void {\n    this.unobserveDescendantLoads();\n    this.#loadContainer = container;\n    container.addEventListener(\"load\", this.#handleDescendantLoad, true);\n  }\n\n  /** Stops reporting descendant loads without affecting element or viewport observation. */\n  unobserveDescendantLoads(): void {\n    this.#loadContainer?.removeEventListener(\"load\", this.#handleDescendantLoad, true);\n    this.#loadContainer = null;\n  }\n\n  /**\n   * Releases every observation: disconnects the {@link ResizeObserver} and removes\n   * the viewport and descendant-load listeners. Safe to call multiple times. Call\n   * this from a controller's `disconnect()`.\n   */\n  disconnect(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n    this.unobserveViewport();\n    this.unobserveDescendantLoads();\n  }\n}\n","/**\n * Collapses many Stimulus lifecycle callbacks from one DOM mutation into a\n * single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element and\n * `<name>ValueChanged` once per changed attribute. Replacing a list of N options\n * or morphing several render Values therefore delivers N callbacks — but the\n * useful unit of work is \"reconcile against the resulting declarative input\",\n * once, after the batch has settled. Every controller with reconcilable targets\n * or render Values needs the same shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers initial target and Value callbacks\n *   ahead of `connect()`. Reconciling there would compute output against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { LayoutObserver } from \"../utils/layout_observer\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\n\n/** CSS custom property exposing the current column count to consumer CSS. */\nconst COLUMNS_PROPERTY = \"--stimeo--masonry-columns\";\n\n/** Column width assumed when the declaration is absent or unreadable. */\nconst DEFAULT_MIN_COLUMN_WIDTH = 240;\n/** Item spacing assumed when the declaration is absent or unreadable. */\nconst DEFAULT_GAP = 16;\n\n/**\n * Returns `value` when it is a number the column arithmetic can use, else\n * `fallback`.\n *\n * A unit suffix is the ordinary authoring slip here (`\"240px\"`), and Stimulus'\n * Number reader answers `NaN` rather than raising — which would reach the column\n * count and make the column bookkeeping impossible to allocate, leaving the grid\n * with no hooks at all. An infinity is rejected for the same reason: it divides\n * into itself as `NaN`.\n */\nfunction usableNumber(value: number, fallback: number): number {\n  return Number.isFinite(value) ? value : fallback;\n}\n\n/**\n * Headless **Masonry** layout helper: assigns each item to the shortest column so\n * variable-height cards pack without vertical gaps. There is no APG widget — this\n * is a layout-only utility that emits state hooks, never visual structure.\n *\n * Markup contract (identifier: `stimeo--masonry`):\n *   <div data-controller=\"stimeo--masonry\"\n *        data-stimeo--masonry-min-column-width-value=\"240\"\n *        data-stimeo--masonry-gap-value=\"16\">\n *     <div data-stimeo--masonry-target=\"item\">…</div>\n *     <div data-stimeo--masonry-target=\"item\">…</div>\n *   </div>\n *\n * The column count is derived responsively from the container width and\n * `minColumnWidth`; each item is then placed into whichever column is currently\n * shortest (measured from item heights). The count is published on the controller\n * element as the `--stimeo--masonry-columns` custom property and each item gets a\n * `data-column` index, so the consumer's CSS owns the actual placement.\n *\n * `layout` dispatches `{ columns: number }` whenever the published result moves —\n * the column count changed, or some item landed in a different column. A pass that\n * reproduces the previous result stays silent.\n *\n * @remarks\n * Behavior only. **DOM order is never changed** — reading order and focus order\n * stay the source markup order (WCAG 1.3.2). The visual packing is purely the\n * column assignment a consumer reads from `data-column`; this controller writes no\n * positioning styles. Use only for independent cards whose visual order carries no\n * meaning.\n *\n * Re-layout runs on connect, on resize (`LayoutObserver`), on item\n * add/remove ({@link MutationObserver}), on an item joining or leaving the target\n * set, when a declared number changes, and when a descendant resource loads.\n * Everything but the first pass is folded into one microtask, so a burst of\n * triggers costs one pass. The observers and any pending pass are released on\n * `disconnect()` (Turbo navigation included).\n *\n * Consumer contract:\n * - A declaration that cannot be read as a number (`\"240px\"`, an infinity) falls\n *   back to that Value's default and the grid keeps working; `0` and negatives are\n *   readable numbers and are used as declared; the count falls back to one column\n *   only when `minColumnWidth + gap` is not positive, or the container has no\n *   measurable width.\n * - `data-column` belongs to this controller: it is written on every item it owns\n *   and taken back from an element that stops being one.\n */\nexport class MasonryController extends Controller<HTMLElement> {\n  static override targets = [\"item\"];\n  static override values = {\n    minColumnWidth: { type: Number, default: DEFAULT_MIN_COLUMN_WIDTH },\n    gap: { type: Number, default: DEFAULT_GAP },\n  };\n  static events = [\"layout\"] as const;\n\n  declare readonly itemTargets: HTMLElement[];\n  declare minColumnWidthValue: number;\n  declare gapValue: number;\n\n  /**\n   * The declared numbers after validation, so the layout path never sees a value\n   * it cannot compute with. Both are resolved once per declaration change rather\n   * than on every pass.\n   */\n  #minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH;\n  #gap = DEFAULT_GAP;\n\n  /**\n   * Collapses every re-layout trigger of one DOM mutation into a single pass, and\n   * refuses to run before `connect()` or after `disconnect()`.\n   *\n   * The triggers arrive in bursts — a resize stream, a morph that syncs several\n   * attributes, a batch of rows — and each pass measures every item, so folding\n   * them keeps the work proportional to the batch rather than to the events in it.\n   */\n  readonly #reconcile = new MicrotaskCoalescer(() => this.#relayout());\n\n  /** Items that left the target set and still carry the column hook. */\n  readonly #released = new Set<HTMLElement>();\n\n  readonly #layout = new LayoutObserver(() => this.#reconcile.schedule());\n  #mutationObserver: MutationObserver | null = null;\n  /** Last published column count, so `layout` fires only on real changes. */\n  #lastColumns = 0;\n\n  /** Resolves the declared column width once, falling back when it is unreadable. */\n  minColumnWidthValueChanged(): void {\n    this.#minColumnWidth = usableNumber(this.minColumnWidthValue, DEFAULT_MIN_COLUMN_WIDTH);\n    this.#reconcile.schedule();\n  }\n\n  /** Resolves the declared gap once, falling back when it is unreadable. */\n  gapValueChanged(): void {\n    this.#gap = usableNumber(this.gapValue, DEFAULT_GAP);\n    this.#reconcile.schedule();\n  }\n\n  /** Packs an element that became an item without moving in the DOM. */\n  itemTargetConnected(): void {\n    this.#reconcile.schedule();\n  }\n\n  /**\n   * Queues the column hook of an element that stopped being an item for removal.\n   *\n   * The removal is queued rather than immediate because teardown reports every\n   * target as disconnected: doing it here would strip the whole grid just before\n   * a Turbo snapshot is taken. The coalescer's `cancel` drops the queue\n   * with the pass, so only a genuine target change reaches it.\n   */\n  itemTargetDisconnected(item: HTMLElement): void {\n    this.#released.add(item);\n    this.#reconcile.schedule();\n  }\n\n  /** Observes size/content changes and performs the first layout pass. */\n  override connect(): void {\n    this.#layout.observe(this.element);\n    this.#layout.observeViewport();\n\n    if (typeof MutationObserver !== \"undefined\") {\n      this.#mutationObserver = new MutationObserver(() => this.#reconcile.schedule());\n      this.#mutationObserver.observe(this.element, { childList: true, subtree: true });\n    }\n    this.#layout.observeDescendantLoads(this.element);\n    this.#relayout();\n    this.#reconcile.activate();\n  }\n\n  /** Releases every observation so nothing fires after detach. */\n  override disconnect(): void {\n    this.#reconcile.cancel();\n    this.#released.clear();\n    this.#layout.disconnect();\n    this.#mutationObserver?.disconnect();\n    this.#mutationObserver = null;\n    this.#lastColumns = 0;\n  }\n\n  /**\n   * Recomputes the column count and assigns every item to the shortest column.\n   * Runs automatically on connect, on resize, on item add/remove, when a declared\n   * number changes, and when a descendant resource loads (private — there is no\n   * public action; the observers, the target callbacks and the capture-phase\n   * `load` listener drive it). Items are walked in DOM order; each lands in the\n   * column with the least accumulated height, which keeps the packing balanced\n   * without reordering the DOM.\n   *\n   * Every box is measured before anything is written. Interleaving the two would\n   * make a consumer's `data-column` rule invalidate style once per item, and the\n   * next measurement then has to settle layout again — once per item instead of\n   * once per pass. The assignment is independent of the measurement because the\n   * columns are uniform in width, so the order of the two passes does not change\n   * the result.\n   */\n  #relayout(): void {\n    const items = this.itemTargets;\n    const columns = this.#columnCount();\n    const boxes = items.map((item) => item.getBoundingClientRect().height);\n\n    let changed = false;\n    if (this.#released.size > 0) {\n      // An element that left and rejoined the target set within one batch is\n      // queued here while still being an item, so ownership is decided against\n      // the set this pass sees rather than against the queue alone.\n      const owned = new Set(items);\n      for (const released of this.#released) {\n        if (owned.has(released)) continue;\n        if (released.hasAttribute(\"data-column\")) {\n          released.removeAttribute(\"data-column\");\n          changed = true;\n        }\n      }\n      this.#released.clear();\n    }\n\n    const heights = new Array<number>(columns).fill(0);\n    items.forEach((item, index) => {\n      let shortest = 0;\n      for (let col = 1; col < columns; col++) {\n        if ((heights[col] ?? 0) < (heights[shortest] ?? 0)) shortest = col;\n      }\n      const assigned = String(shortest);\n      // Writing a value the item already carries would publish a change that did\n      // not happen, and the same comparison is what tells the event whether the\n      // published layout actually moved.\n      if (item.getAttribute(\"data-column\") !== assigned) {\n        item.setAttribute(\"data-column\", assigned);\n        changed = true;\n      }\n      heights[shortest] = (heights[shortest] ?? 0) + (boxes[index] ?? 0) + this.#gap;\n    });\n\n    this.element.style.setProperty(COLUMNS_PROPERTY, String(columns));\n\n    if (columns !== this.#lastColumns || changed) {\n      this.#lastColumns = columns;\n      this.dispatch(\"layout\", { detail: { columns } });\n    }\n  }\n\n  /**\n   * Derives how many columns fit: `floor((width + gap) / (minColumnWidth + gap))`,\n   * never fewer than one. When the width is unmeasurable (detached, or a layout\n   * engine that reports `0`), it falls back to a single column so every item still\n   * gets a valid `data-column`.\n   */\n  #columnCount(): number {\n    const width = this.element.getBoundingClientRect().width;\n    const denominator = this.#minColumnWidth + this.#gap;\n    if (width <= 0 || denominator <= 0) return 1;\n    return Math.max(1, Math.floor((width + this.#gap) / denominator));\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/layout_observer.ts","../../src/utils/microtask_coalescer.ts","../../src/utils/number_bounds.ts","../../src/utils/coerce.ts","../../src/utils/number_value.ts","../../src/controllers/masonry_controller.ts"],"names":[],"mappings":"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","file":"masonry_controller.js","sourcesContent":["/**\n * Unified layout observation for Stimeo controllers.\n *\n * Widgets whose output is measured — an overflow boundary, a masonry column count,\n * an autosized textarea — have three sources that move the layout under them: their\n * *own* box changing — via {@link ResizeObserver} — the *viewport* changing — via the\n * `window` `resize` event — and a descendant *resource settling*, because an image or\n * a frame reports a height of zero until it has loaded. Wiring those three by hand in\n * every controller risks leaked listeners on `disconnect()`. {@link LayoutObserver}\n * owns all three behind one callback and one\n * {@link LayoutObserver.disconnect | disconnect()} that releases everything.\n *\n * Behavior only: the helper reports *that* layout changed; it never reads or\n * writes styles. Consumers decide what to recompute.\n */\n\n/** Invoked whenever an observed element or the viewport changes size. */\nexport type LayoutCallback = () => void;\n\n/** Constructs a {@link ResizeObserver}; injectable so tests stay deterministic. */\nexport type ResizeObserverFactory = (callback: ResizeObserverCallback) => ResizeObserver;\n\n/** Options for {@link LayoutObserver}. */\nexport interface LayoutObserverOptions {\n  /**\n   * Factory for the {@link ResizeObserver} used by {@link LayoutObserver.observe}.\n   * Defaults to the global constructor; override it in tests, or to no-op in\n   * environments where `ResizeObserver` is unavailable.\n   */\n  resizeObserverFactory?: ResizeObserverFactory;\n}\n\n/**\n * Observes element resizes and/or viewport resizes through a single callback,\n * with guaranteed teardown.\n *\n * @example\n * ```ts\n * #layout = new LayoutObserver(() => this.#reposition());\n *\n * connect() {\n *   this.#layout.observe(this.panelTarget);\n *   this.#layout.observeViewport();\n *   this.#layout.observeDescendantLoads(this.panelTarget);\n * }\n *\n * disconnect() {\n *   this.#layout.disconnect();\n * }\n * ```\n */\nexport class LayoutObserver {\n  readonly #callback: LayoutCallback;\n  readonly #resizeObserverFactory: ResizeObserverFactory | null;\n  #resizeObserver: ResizeObserver | null = null;\n  #observingViewport = false;\n  #loadContainer: Element | null = null;\n\n  /** Stable bound handler so add/removeEventListener target the same reference. */\n  readonly #handleViewportResize = (): void => {\n    this.#callback();\n  };\n\n  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */\n  readonly #handleDescendantLoad = (): void => {\n    this.#callback();\n  };\n\n  constructor(callback: LayoutCallback, options: LayoutObserverOptions = {}) {\n    this.#callback = callback;\n    this.#resizeObserverFactory =\n      options.resizeObserverFactory ??\n      (typeof ResizeObserver === \"undefined\" ? null : (cb) => new ResizeObserver(cb));\n  }\n\n  /**\n   * Starts observing an element's size. Repeated calls observe additional\n   * elements through the same shared observer. No-ops when no\n   * `ResizeObserver` implementation is available.\n   */\n  observe(element: Element): void {\n    if (!this.#resizeObserverFactory) return;\n    if (!this.#resizeObserver) {\n      this.#resizeObserver = this.#resizeObserverFactory(() => {\n        this.#callback();\n      });\n    }\n    this.#resizeObserver.observe(element);\n  }\n\n  /** Stops observing a single element while leaving any others in place. */\n  unobserve(element: Element): void {\n    this.#resizeObserver?.unobserve(element);\n  }\n\n  /** Starts observing viewport resizes. Idempotent: the listener is added once. */\n  observeViewport(): void {\n    if (this.#observingViewport) return;\n    this.#observingViewport = true;\n    window.addEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /** Stops observing viewport resizes without affecting element observation. */\n  unobserveViewport(): void {\n    if (!this.#observingViewport) return;\n    this.#observingViewport = false;\n    window.removeEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /**\n   * Starts reporting a `load` from anywhere inside `container` — an image or a\n   * frame settling changes the box it sits in, and it measures as zero high until\n   * then. `load` does not bubble, so the subscription is a capture-phase listener\n   * on the container itself and nothing the caller spells.\n   *\n   * **One container at a time.** A further call moves the observation, so a widget\n   * whose content element is swapped at runtime releases the element it let go by\n   * naming the new one — there is no second place for the release to drift from.\n   */\n  observeDescendantLoads(container: Element): void {\n    this.unobserveDescendantLoads();\n    this.#loadContainer = container;\n    container.addEventListener(\"load\", this.#handleDescendantLoad, true);\n  }\n\n  /** Stops reporting descendant loads without affecting element or viewport observation. */\n  unobserveDescendantLoads(): void {\n    this.#loadContainer?.removeEventListener(\"load\", this.#handleDescendantLoad, true);\n    this.#loadContainer = null;\n  }\n\n  /**\n   * Releases every observation: disconnects the {@link ResizeObserver} and removes\n   * the viewport and descendant-load listeners. Safe to call multiple times. Call\n   * this from a controller's `disconnect()`.\n   */\n  disconnect(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n    this.unobserveViewport();\n    this.unobserveDescendantLoads();\n  }\n}\n","/**\n * Collapses many Stimulus lifecycle callbacks from one DOM mutation into a\n * single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element and\n * `<name>ValueChanged` once per changed attribute. Replacing a list of N options\n * or morphing several render Values therefore delivers N callbacks — but the\n * useful unit of work is \"reconcile against the resulting declarative input\",\n * once, after the batch has settled. Every controller with reconcilable targets\n * or render Values needs the same shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers initial target and Value callbacks\n *   ahead of `connect()`. Reconciling there would compute output against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","import { MAX_TIMER_DELAY_MS } from \"./timer_bounds\";\n\n/** Semantic constraints on an already decoded number, independent of the DOM. */\nexport interface NumberBounds {\n  /** Finite numbers are required, including when this field is omitted. */\n  readonly finite?: true;\n  /** Inclusive lower endpoint. */\n  readonly min?: number;\n  /** Inclusive upper endpoint. */\n  readonly max?: number;\n  /** Exclusive lower endpoint. */\n  readonly exclusiveMin?: number;\n  /** Require a number without a fractional part. */\n  readonly integer?: boolean;\n  /** Exact decoded numbers accepted by a discrete contract. */\n  readonly allowedValues?: readonly number[];\n  /** JSON-safe exceptions to finite-number checking for unbounded endpoints. */\n  readonly allowInfinity?: \"negative\" | \"positive\" | \"both\";\n}\n\n/** One constraint for each Number Value, including shorthand declarations. */\nexport type NumberValueConstraints<Values> = {\n  readonly [Key in keyof Values as Values[Key] extends\n    | NumberConstructor\n    | { type: NumberConstructor }\n    ? Key\n    : never]: NumberBounds;\n};\n\n/** Reusable semantic domains; fractional inputs remain fractional unless excluded. */\nexport const NUMBER_BOUNDS = {\n  finite: { finite: true },\n  nonNegative: { finite: true, min: 0 },\n  positive: { finite: true, exclusiveMin: 0 },\n  nonNegativeInteger: { finite: true, min: 0, integer: true },\n  positiveInteger: { finite: true, exclusiveMin: 0, integer: true },\n  lowerBound: { finite: true, allowInfinity: \"negative\" },\n  upperBound: { finite: true, allowInfinity: \"positive\" },\n  timer: { finite: true, min: 0, max: MAX_TIMER_DELAY_MS },\n  positiveTimer: { finite: true, exclusiveMin: 0, max: MAX_TIMER_DELAY_MS },\n} as const satisfies Record<string, NumberBounds>;\n\n/**\n * Checks all declared bounds without rounding, clamping, or coercing the input.\n * Infinity exceptions relax only finite checking; every other bound still applies.\n */\nexport function matchesNumberBounds(value: number, bounds: NumberBounds): boolean {\n  if (!Number.isFinite(value)) {\n    const direction = value === Infinity ? \"positive\" : value === -Infinity ? \"negative\" : null;\n    if (direction === null) return false;\n    if (bounds.allowInfinity !== \"both\" && bounds.allowInfinity !== direction) return false;\n  }\n  if (bounds.min !== undefined && value < bounds.min) return false;\n  if (bounds.max !== undefined && value > bounds.max) return false;\n  if (bounds.exclusiveMin !== undefined && value <= bounds.exclusiveMin) return false;\n  if (bounds.integer && !Number.isInteger(value)) return false;\n  if (bounds.allowedValues !== undefined && !bounds.allowedValues.includes(value)) return false;\n  return true;\n}\n\n/** Decodes a Number Value literal; action params use their own JSON decoder. */\nexport function decodeNumberValue(raw: string): number {\n  return Number(raw.replace(/_/g, \"\"));\n}\n","/**\n * Numeric coercion for controllers that accept a number through a Value, an action\n * param, or an event detail.\n *\n * Stimulus decodes action params as JSON when possible and leaves other text\n * untouched. CustomEvent detail can also supply a number or numeric string.\n * The reader accepts those two types while rejecting blank and non-finite input.\n */\n\nimport { matchesNumberBounds, type NumberBounds } from \"./number_bounds\";\n\n/**\n * Reads a finite number or nonblank numeric string; other input returns `null`.\n * Blank strings cannot silently reset a value to zero.\n */\nexport function toFiniteNumber(raw: unknown): number | null {\n  if (typeof raw !== \"number\" && typeof raw !== \"string\") return null;\n  if (typeof raw === \"string\" && raw.trim().length === 0) return null;\n  const value = Number(raw);\n  return Number.isFinite(value) ? value : null;\n}\n\n/**\n * Returns an accepted decoded Number Value or the caller's fallback unchanged.\n * The caller owns the fallback contract; this reader does not parse or write a Value.\n */\nexport function readNumber(raw: number, fallback: number, bounds: NumberBounds): number {\n  return matchesNumberBounds(raw, bounds) ? raw : fallback;\n}\n","import { readNumber } from \"./coerce\";\nimport { matchesNumberBounds, type NumberBounds } from \"./number_bounds\";\n\n/** The instance identity carried by a Number Value read. */\nexport interface NumberValueOwner {\n  readonly identifier: string;\n  readonly element: Element;\n}\n\n/** Reads current declarations at the point of use without rewriting their attributes. */\nexport class NumberValueReader {\n  /** The last rejected literal per Value; no history grows for an unchanged instance. */\n  readonly #lastRejected = new Map<string, string>();\n\n  /** Resolves the declared number using its own fallback and shared class contract. */\n  read(\n    owner: NumberValueOwner,\n    name: string,\n    raw: number,\n    fallback: number,\n    bounds: NumberBounds,\n  ): number {\n    const resolved = readNumber(raw, fallback, bounds);\n    if (matchesNumberBounds(raw, bounds)) {\n      this.#lastRejected.delete(name);\n      return resolved;\n    }\n    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;\n    const literal = owner.element.getAttribute(attribute);\n    if (literal === null) {\n      this.#lastRejected.delete(name);\n      return resolved;\n    }\n    if (this.#lastRejected.get(name) !== literal) {\n      this.#lastRejected.set(name, literal);\n      console.warn(\n        `Stimeo UI: \"${owner.identifier}\" has an invalid number Value \"${name}\" declaration ${JSON.stringify(literal)}; using ${fallback}.`,\n      );\n    }\n    return resolved;\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { LayoutObserver } from \"../utils/layout_observer\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\nimport { NUMBER_BOUNDS, type NumberValueConstraints } from \"../utils/number_bounds\";\nimport { NumberValueReader } from \"../utils/number_value\";\n\n/** CSS custom property exposing the current column count to consumer CSS. */\nconst COLUMNS_PROPERTY = \"--stimeo--masonry-columns\";\n\n/** Column width assumed when the declaration is absent or unreadable. */\nconst DEFAULT_MIN_COLUMN_WIDTH = 240;\n/** Item spacing assumed when the declaration is absent or unreadable. */\nconst DEFAULT_GAP = 16;\n\n/**\n * Headless **Masonry** layout helper: assigns each item to the shortest column so\n * variable-height cards pack without vertical gaps. There is no APG widget — this\n * is a layout-only utility that emits state hooks, never visual structure.\n *\n * Markup contract (identifier: `stimeo--masonry`):\n *   <div data-controller=\"stimeo--masonry\"\n *        data-stimeo--masonry-min-column-width-value=\"240\"\n *        data-stimeo--masonry-gap-value=\"16\">\n *     <div data-stimeo--masonry-target=\"item\">…</div>\n *     <div data-stimeo--masonry-target=\"item\">…</div>\n *   </div>\n *\n * The column count is derived responsively from the container width and\n * `minColumnWidth`; each item is then placed into whichever column is currently\n * shortest (measured from item heights). The count is published on the controller\n * element as the `--stimeo--masonry-columns` custom property and each item gets a\n * `data-column` index, so the consumer's CSS owns the actual placement.\n *\n * `layout` dispatches `{ columns: number }` whenever the published result moves —\n * the column count changed, or some item landed in a different column. A pass that\n * reproduces the previous result stays silent.\n *\n * @remarks\n * Behavior only. **DOM order is never changed** — reading order and focus order\n * stay the source markup order (WCAG 1.3.2). The visual packing is purely the\n * column assignment a consumer reads from `data-column`; this controller writes no\n * positioning styles. Use only for independent cards whose visual order carries no\n * meaning.\n *\n * Re-layout runs on connect, on resize (`LayoutObserver`), on item\n * add/remove ({@link MutationObserver}), on an item joining or leaving the target\n * set, when a declared number changes, and when a descendant resource loads.\n * Everything but the first pass is folded into one microtask, so a burst of\n * triggers costs one pass. The observers and any pending pass are released on\n * `disconnect()` (Turbo navigation included).\n *\n * Consumer contract:\n * - A declaration that cannot be read as a number (`\"240px\"`, an infinity) falls\n *   back to that Value's default and the grid keeps working; `0` and negatives are\n *   readable numbers and are used as declared; the count falls back to one column\n *   only when `minColumnWidth + gap` is not positive, or the container has no\n *   measurable width.\n * - `data-column` belongs to this controller: it is written on every item it owns\n *   and taken back from an element that stops being one.\n */\nexport class MasonryController extends Controller<HTMLElement> {\n  /** Numeric read boundaries share one reader for this controller instance. */\n  readonly #numbers = new NumberValueReader();\n\n  static override targets = [\"item\"];\n  static override values = {\n    minColumnWidth: { type: Number, default: DEFAULT_MIN_COLUMN_WIDTH },\n    gap: { type: Number, default: DEFAULT_GAP },\n  };\n\n  static valueConstraints = {\n    minColumnWidth: NUMBER_BOUNDS.finite,\n    gap: NUMBER_BOUNDS.finite,\n  } satisfies NumberValueConstraints<typeof MasonryController.values>;\n  static events = [\"layout\"] as const;\n\n  declare readonly itemTargets: HTMLElement[];\n  declare minColumnWidthValue: number;\n  declare gapValue: number;\n\n  /**\n   * The declared numbers after validation, so the layout path never sees a value\n   * it cannot compute with. Both are resolved once per declaration change rather\n   * than on every pass.\n   */\n  #minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH;\n  #gap = DEFAULT_GAP;\n\n  /**\n   * Collapses every re-layout trigger of one DOM mutation into a single pass, and\n   * refuses to run before `connect()` or after `disconnect()`.\n   *\n   * The triggers arrive in bursts — a resize stream, a morph that syncs several\n   * attributes, a batch of rows — and each pass measures every item, so folding\n   * them keeps the work proportional to the batch rather than to the events in it.\n   */\n  readonly #reconcile = new MicrotaskCoalescer(() => this.#relayout());\n\n  /** Items that left the target set and still carry the column hook. */\n  readonly #released = new Set<HTMLElement>();\n\n  readonly #layout = new LayoutObserver(() => this.#reconcile.schedule());\n  #mutationObserver: MutationObserver | null = null;\n  /** Last published column count, so `layout` fires only on real changes. */\n  #lastColumns = 0;\n\n  /** Resolves the declared column width once, falling back when it is unreadable. */\n  minColumnWidthValueChanged(): void {\n    this.#minColumnWidth = this.#safeMinColumnWidth;\n    this.#reconcile.schedule();\n  }\n\n  /** Resolves the declared gap once, falling back when it is unreadable. */\n  gapValueChanged(): void {\n    this.#gap = this.#safeGap;\n    this.#reconcile.schedule();\n  }\n\n  /** Packs an element that became an item without moving in the DOM. */\n  itemTargetConnected(): void {\n    this.#reconcile.schedule();\n  }\n\n  /**\n   * Queues the column hook of an element that stopped being an item for removal.\n   *\n   * The removal is queued rather than immediate because teardown reports every\n   * target as disconnected. The pass that drains the queue skips an element\n   * that is still an item, which drops what teardown queued, and keeps a departure\n   * queued before a disconnect for the pass after the reconnect.\n   */\n  itemTargetDisconnected(item: HTMLElement): void {\n    this.#released.add(item);\n    this.#reconcile.schedule();\n  }\n\n  /** Observes size/content changes and performs the first layout pass. */\n  override connect(): void {\n    this.#layout.observe(this.element);\n    this.#layout.observeViewport();\n\n    if (typeof MutationObserver !== \"undefined\") {\n      this.#mutationObserver = new MutationObserver(() => this.#reconcile.schedule());\n      this.#mutationObserver.observe(this.element, { childList: true, subtree: true });\n    }\n    this.#layout.observeDescendantLoads(this.element);\n    this.#relayout();\n    this.#reconcile.activate();\n  }\n\n  /** Releases every observation so nothing fires after detach. */\n  override disconnect(): void {\n    this.#reconcile.cancel();\n    this.#layout.disconnect();\n    this.#mutationObserver?.disconnect();\n    this.#mutationObserver = null;\n    this.#lastColumns = 0;\n  }\n\n  /**\n   * Recomputes the column count and assigns every item to the shortest column.\n   * Runs automatically on connect, on resize, on item add/remove, when a declared\n   * number changes, and when a descendant resource loads (private — there is no\n   * public action; the observers, the target callbacks and the capture-phase\n   * `load` listener drive it). Items are walked in DOM order; each lands in the\n   * column with the least accumulated height, which keeps the packing balanced\n   * without reordering the DOM.\n   *\n   * Every box is measured before anything is written. Interleaving the two would\n   * make a consumer's `data-column` rule invalidate style once per item, and the\n   * next measurement then has to settle layout again — once per item instead of\n   * once per pass. The assignment is independent of the measurement because the\n   * columns are uniform in width, so the order of the two passes does not change\n   * the result.\n   */\n  #relayout(): void {\n    const items = this.itemTargets;\n    const columns = this.#columnCount();\n    const boxes = items.map((item) => item.getBoundingClientRect().height);\n\n    let changed = false;\n    if (this.#released.size > 0) {\n      // An element that left and rejoined the target set within one batch is\n      // queued here while still being an item, so ownership is decided against\n      // the set this pass sees rather than against the queue alone.\n      const owned = new Set(items);\n      for (const released of this.#released) {\n        if (owned.has(released)) continue;\n        if (released.hasAttribute(\"data-column\")) {\n          released.removeAttribute(\"data-column\");\n          changed = true;\n        }\n      }\n      this.#released.clear();\n    }\n\n    const heights = new Array<number>(columns).fill(0);\n    items.forEach((item, index) => {\n      let shortest = 0;\n      for (let col = 1; col < columns; col++) {\n        if ((heights[col] ?? 0) < (heights[shortest] ?? 0)) shortest = col;\n      }\n      const assigned = String(shortest);\n      // Writing a value the item already carries would publish a change that did\n      // not happen, and the same comparison is what tells the event whether the\n      // published layout actually moved.\n      if (item.getAttribute(\"data-column\") !== assigned) {\n        item.setAttribute(\"data-column\", assigned);\n        changed = true;\n      }\n      heights[shortest] = (heights[shortest] ?? 0) + (boxes[index] ?? 0) + this.#gap;\n    });\n\n    this.element.style.setProperty(COLUMNS_PROPERTY, String(columns));\n\n    if (columns !== this.#lastColumns || changed) {\n      this.#lastColumns = columns;\n      this.dispatch(\"layout\", { detail: { columns } });\n    }\n  }\n\n  /**\n   * Derives how many columns fit: `floor((width + gap) / (minColumnWidth + gap))`,\n   * never fewer than one. When the width is unmeasurable (detached, or a layout\n   * engine that reports `0`), it falls back to a single column so every item still\n   * gets a valid `data-column`.\n   */\n  #columnCount(): number {\n    const width = this.element.getBoundingClientRect().width;\n    const denominator = this.#minColumnWidth + this.#gap;\n    if (width <= 0 || denominator <= 0) return 1;\n    return Math.max(1, Math.floor((width + this.#gap) / denominator));\n  }\n  /** Current `minColumnWidth` declaration resolved against its numeric contract. */\n  get #safeMinColumnWidth(): number {\n    return this.#numbers.read(\n      this,\n      \"minColumnWidth\",\n      this.minColumnWidthValue,\n      MasonryController.values.minColumnWidth.default,\n      MasonryController.valueConstraints.minColumnWidth,\n    );\n  }\n\n  /** Current `gap` declaration resolved against its numeric contract. */\n  get #safeGap(): number {\n    return this.#numbers.read(\n      this,\n      \"gap\",\n      this.gapValue,\n      MasonryController.values.gap.default,\n      MasonryController.valueConstraints.gap,\n    );\n  }\n}\n"]}

package/dist/controllers/menu_controller.d.ts

@@ -53,11 +53,17 @@ import { Controller } from '@hotwired/stimulus';
  *   dismissed first.
  * - A click outside the controller closes the menu without moving focus away
  *   from the clicked element.
+ * - A trigger or a menu that takes over — in one task, or after an earlier one
+ *   leaves in a later task — carries the open state; focus stays where the swap
+ *   left it. With no menu left the menu button reads closed and leaves the Escape
+ *   stack. One that stops resolving as the target gets back what it carried before
+ *   this controller wrote on it.
  * - Each move of the open state is reported: `stimeo--menu:open` and
  *   `stimeo--menu:close` dispatch `{ reason: StateReason }`, after the state
  *   attributes are written. Both are informational, so neither is cancelable. A
  *   call that leaves the state where it already was, the normalization in
- *   {@link connect}, and {@link disconnect} are all silent.
+ *   {@link connect}, a trigger or a menu that takes over, and {@link disconnect}
+ *   are all silent.
  *
  * Roving focus skips `hidden` and natively `disabled` items. An
  * `aria-disabled="true"` item remains discoverable by arrow-key focus, while its
@@ -69,7 +75,9 @@ declare class MenuController extends Controller<HTMLElement> {
     static actions: readonly ["activate", "close", "onItemKeydown", "onTriggerKeydown", "open", "toggle"];
     static events: readonly ["close", "open"];
     readonly triggerTarget: HTMLButtonElement;
+    readonly triggerTargets: HTMLButtonElement[];
     readonly menuTarget: HTMLElement;
+    readonly menuTargets: HTMLElement[];
     readonly itemTargets: HTMLButtonElement[];
     readonly hasTriggerTarget: boolean;
     readonly hasMenuTarget: boolean;
@@ -77,6 +85,23 @@ declare class MenuController extends Controller<HTMLElement> {
     connect(): void;
     /** Releases the listeners, stack membership, and any pending Tab-close task. */
     disconnect(): void;
+    /** Brings a trigger that arrives after connect to the open state. */
+    triggerTargetConnected(): void;
+    /**
+     * Gives a trigger that no longer resolves as one its own `aria-expanded` back — after
+     * `disconnect()` too, since dropping the identifier leaves the element on the page — and
+     * brings the trigger that stays to the open state.
+     */
+    triggerTargetDisconnected(trigger: HTMLButtonElement): void;
+    /** Applies the open state to a menu that arrives after connect in front of the others. */
+    menuTargetConnected(): void;
+    /**
+     * Applies the open state to the menu left, then gives a menu that no longer resolves as the
+     * target its own `hidden` back — after `disconnect()` too, since dropping the identifier
+     * leaves the element on the page. The open state is read off the departing menu first,
+     * while it still carries it.
+     */
+    menuTargetDisconnected(menu: HTMLElement): void;
     /** Toggles the menu open/closed. Bound via `data-action` (click). */
     toggle(event?: Event): void;
     /** Opens the menu and reflects the expanded state on the trigger. */
@@ -99,12 +124,12 @@ declare class MenuController extends Controller<HTMLElement> {
      * also reached from the delegated listener.
      *
      * Markup that carries the per-element action *and* gets the delegate would run
-     * this twice for one gesture. `close()` writes the state hooks (`hidden`,
-     * `aria-expanded`), and an identical reassign still queues a MutationRecord,
-     * so a second pass is observable to anyone watching them. The event is
-     * therefore claimed: the path that gets there first does the work, the other
-     * one finds it claimed and returns. A programmatic call with no event always
-     * runs.
+     * this twice for one gesture. The state hooks (`hidden`, `aria-expanded`) are
+     * written only when they change, so a second pass writes nothing on its own, but
+     * a page handler between the two paths — on an ancestor of the item — that opens
+     * the menu again would see the second pass close it. The event is therefore
+     * claimed: the path that gets there first does the work, the other one finds it
+     * claimed and returns. A programmatic call with no event always runs.
      */
     activate(event?: Event): void;
 }