stimeo-ui 0.16.0 → 0.17.0

package/dist/controllers/collapsible_controller.js

@@ -1,8 +1,152 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/collapsible_controller.ts
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
+
+function isAttributeValue(value) {
+  return value === null || typeof value === "string";
+}
+function readLeaseRecord(element, record) {
+  try {
+    const parsed = JSON.parse(element.getAttribute(record) ?? "null");
+    if (!Array.isArray(parsed)) return void 0;
+    const [original, written, ...rest] = parsed;
+    const linked = rest[0] !== false;
+    const beneath = linked ? rest : rest.slice(1);
+    if (!beneath.every((under) => typeof under === "string")) return void 0;
+    return isAttributeValue(original) && isAttributeValue(written) ? { original, written, linked, beneath } : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var AttributeLease = class _AttributeLease {
+  static #registry = sharedRegistry(
+    "stimeo-ui.attribute-lease.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+  );
+  #attribute;
+  #record;
+  #base;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
+    this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    const names = _AttributeLease.#registry.names;
+    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
+  }
+  write(element, value) {
+    const stack = this.#stack(element);
+    const hold = this.#take(stack) ?? this.#acquire(element, stack);
+    this.#held.add(element);
+    const shows = !this.#covered(element, stack, hold);
+    hold.written = value;
+    this.#mark(element, stack);
+    if (shows) this.#reflect(element, value);
+  }
+  return(element) {
+    const held = this.#held.delete(element);
+    const known = _AttributeLease.#registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    const hold = this.#take(stack);
+    if (!hold) return false;
+    const carries = element.getAttribute(this.#attribute) === hold.written;
+    const owns = carries && !this.#covered(element, stack, hold);
+    const index = stack.indexOf(hold);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return true;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    this.#reflect(element, below ? below.written : hold.original);
+    return true;
+  }
+  returnAll() {
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #stack(element) {
+    const stacks = _AttributeLease.#registry.stacks;
+    const byAttribute = stacks.get(element) ?? /* @__PURE__ */ new Map();
+    stacks.set(element, byAttribute);
+    const stack = byAttribute.get(this.#attribute) ?? this.#seed(element);
+    byAttribute.set(this.#attribute, stack);
+    return stack;
+  }
+  #seed(element) {
+    const found = [];
+    for (const record of _AttributeLease.#registry.names.get(this.#attribute) ?? []) {
+      const read = readLeaseRecord(element, record);
+      if (read) found.push({ ...read, record });
+    }
+    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+      lease: null,
+      record,
+      written,
+      original,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === this.#record);
+    if (hold) hold.lease = this;
+    return hold;
+  }
+  #acquire(element, stack) {
+    const current = element.getAttribute(this.#attribute);
+    const top = stack.at(-1);
+    const bottom = stack[0];
+    const over = top?.written === current ? top : void 0;
+    const from = this.#base ? bottom : over;
+    const hold = {
+      lease: this,
+      record: this.#record,
+      written: current,
+      original: from ? from.original : current,
+      linked: !this.#base && over !== void 0
+    };
+    if (this.#base && bottom) {
+      bottom.linked = true;
+      stack.unshift(hold);
+    } else stack.push(hold);
+    return hold;
+  }
+  #covered(element, stack, hold) {
+    const current = element.getAttribute(this.#attribute);
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === current);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      records.set(
+        hold.record,
+        hold.written === hold.original && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.original, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
+    }
+  }
+  #reflect(element, value) {
+    if (element.getAttribute(this.#attribute) === value) return;
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
+  }
+};
 
-// src/utils/state_reason.ts
 var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
 var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
 function stateReasonFor(event) {
@@ -12,16 +156,20 @@ function stateReasonFor(event) {
   return "user";
 }
 
-// src/utils/state_regions.ts
-var StateRegions = class {
+var StateRegions = class _StateRegions {
+  static #registry = sharedRegistry(
+    "stimeo-ui.state-regions.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #whenTrue;
   #whenFalse;
-  #taken = /* @__PURE__ */ new WeakSet();
-  constructor(options) {
+  #record;
+  constructor(options, owner) {
     this.#whenTrue = options.whenTrue;
     this.#whenFalse = options.whenFalse ?? null;
+    this.#record = `data-${owner}-hidden-region`;
+    _StateRegions.#registry.names.add(this.#record);
   }
-  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
   reflect(host, isTrue) {
     const shown = this.#inside(host, this.#whenTrue());
     if (!this.#whenFalse) {
@@ -37,59 +185,140 @@ var StateRegions = class {
     for (const region of shown) this.#write(region, !isTrue);
     for (const region of hiddenSide) this.#write(region, isTrue);
   }
-  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  release(host) {
+    for (const region of [host, ...host.querySelectorAll("*")]) {
+      if (!(region instanceof HTMLElement)) continue;
+      const stack = this.#held(region);
+      const hold = stack && this.#take(stack);
+      if (!stack || !hold) continue;
+      const owns = region.hidden === hold.written && !this.#covered(region, stack, hold);
+      const index = stack.indexOf(hold);
+      stack.splice(index, 1);
+      const above = stack[index];
+      if (above) above.linked &&= hold.linked;
+      if (owns) {
+        const below = hold.linked ? stack[index - 1] : void 0;
+        if (below) {
+          if (region.hidden !== below.written) region.hidden = below.written;
+        } else if (region.getAttribute("hidden") !== hold.authored) {
+          if (hold.authored === null) region.removeAttribute("hidden");
+          else region.setAttribute("hidden", hold.authored);
+        }
+      }
+      this.#mark(region, stack);
+    }
+  }
   #write(region, hidden) {
-    if (hidden) this.#taken.add(region);
-    else this.#taken.delete(region);
-    if (region.hidden !== hidden) region.hidden = hidden;
+    const stack = this.#stack(region);
+    const hold = this.#take(stack) ?? this.#acquire(region, stack);
+    const shows = !this.#covered(region, stack, hold);
+    hold.written = hidden;
+    if (shows && region.hidden !== hidden) region.hidden = hidden;
+    this.#mark(region, stack);
   }
-  /** Returns a region this instance hid; one it never hid keeps what it carries. */
   #give(region) {
-    if (this.#taken.delete(region)) region.hidden = false;
+    const stack = this.#held(region);
+    if (stack && this.#take(stack)?.written) this.#write(region, false);
+  }
+  #held(region) {
+    return _StateRegions.#registry.stacks.has(region) || region.hasAttribute(this.#record) ? this.#stack(region) : void 0;
+  }
+  #stack(region) {
+    const stacks = _StateRegions.#registry.stacks;
+    const stack = stacks.get(region) ?? this.#seed(region);
+    stacks.set(region, stack);
+    return stack;
+  }
+  #seed(region) {
+    const found = [];
+    for (const record of _StateRegions.#registry.names) {
+      const read = this.#recorded(region, record);
+      if (read) found.push({ ...read, record });
+    }
+    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, authored, written, linked }, index) => ({
+      instance: null,
+      record,
+      authored,
+      written,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.instance === this) ?? stack.find((held) => held.instance === null && held.record === this.#record);
+    if (hold) hold.instance = this;
+    return hold;
+  }
+  #covered(region, stack, hold) {
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === region.hidden);
+  }
+  #acquire(region, stack) {
+    const top = stack.at(-1);
+    const over = top && region.hidden === top.written ? top : void 0;
+    const hold = {
+      instance: this,
+      record: this.#record,
+      authored: over ? over.authored : region.getAttribute("hidden"),
+      written: false,
+      linked: over !== void 0
+    };
+    stack.push(hold);
+    return hold;
+  }
+  #mark(region, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      records.set(
+        hold.record,
+        region.getAttribute("hidden") === hold.authored && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.authored, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      if (region.getAttribute(name) === recorded) continue;
+      if (recorded === null) region.removeAttribute(name);
+      else region.setAttribute(name, recorded);
+    }
+  }
+  #recorded(region, name) {
+    try {
+      const parsed = JSON.parse(region.getAttribute(name) ?? "null");
+      if (!Array.isArray(parsed)) return null;
+      const [authored, written, ...rest] = parsed;
+      if (authored !== null && typeof authored !== "string") return null;
+      const linked = rest[0] !== false;
+      const beneath = linked ? rest : rest.slice(1);
+      if (!beneath.every((under) => typeof under === "string")) return null;
+      return typeof written === "boolean" ? { authored, written, linked, beneath } : null;
+    } catch {
+      return null;
+    }
   }
-  /** The declared regions that sit within `host`, which may be the host itself. */
   #inside(host, regions) {
     return regions.filter((region) => host.contains(region));
   }
 };
 
-// src/utils/safe_timeout.ts
 var TimerRegistry = class {
-  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
   ids = /* @__PURE__ */ new Set();
-  /**
-   * Cancels a single tracked timer.
-   *
-   * No-ops if the id is unknown (already cleared, fired, or never owned by this
-   * registry), so callers can clear defensively without guarding.
-   */
   clear(id) {
     if (this.ids.delete(id)) {
       this.cancel(id);
     }
   }
-  /**
-   * Cancels every tracked timer. Call this from a controller's `disconnect()`
-   * to guarantee no timer outlives the element.
-   */
   clearAll() {
     for (const id of this.ids) {
       this.cancel(id);
     }
     this.ids.clear();
   }
-  /** Number of timers currently tracked (pending). */
   get size() {
     return this.ids.size;
   }
 };
 var SafeTimeout = class extends TimerRegistry {
-  /**
-   * Schedules `callback` after `delay` ms and returns the timer id.
-   *
-   * The id is removed from the registry automatically when the timeout fires,
-   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
-   */
   set(callback, delay) {
     const id = this.schedule(() => {
       this.ids.delete(id);
@@ -106,7 +335,6 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
-// src/utils/transition_completion.ts
 function timeMs(value) {
   const trimmed = value.trim();
   const amount = Number.parseFloat(trimmed);
@@ -142,13 +370,6 @@ var TransitionCompletion = class {
   #complete = null;
   #pendingProperties = null;
   #deadline = 0;
-  /**
-   * Replaces any prior wait and invokes `complete` synchronously for a 0ms
-   * transition (including when `getComputedStyle` is unavailable).
-   *
-   * With a positive `options.timeoutMs` the synchronous fast-path is skipped and
-   * the override replaces the auto-computed fallback (see {@link TransitionWaitOptions}).
-   */
   wait(element, complete, options = {}) {
     this.cancel();
     const requested = options.timeoutMs ?? 0;
@@ -168,18 +389,10 @@ var TransitionCompletion = class {
     element.addEventListener("transitioncancel", this.#onTerminal);
     this.#timers.set(() => this.#finish(), override > 0 ? override : maximum + 50);
   }
-  /** Cancels the pending wait without invoking its completion callback. */
   cancel() {
     this.#complete = null;
     this.#teardown();
   }
-  /**
-   * Handles terminal events from the observed element only.
-   *
-   * For explicit property lists, every declared positive-time property must
-   * settle. For `all`, no reliable property set exists, so an event can finish
-   * only after the computed maximum time; the safety timeout owns the usual path.
-   */
   #onTerminal = (event) => {
     if (event.target !== this.#element) return;
     const transitionEvent = event;
@@ -199,10 +412,6 @@ var TransitionCompletion = class {
     }
     if (Date.now() >= this.#deadline) this.#finish();
   };
-  /**
-   * Returns active CSS transition properties expanded to the names reported by
-   * terminal events. CSS animations and pseudo-element effects are excluded.
-   */
   #activeTransitionProperties(element) {
     if (!element || typeof element.getAnimations !== "function") return /* @__PURE__ */ new Set();
     try {
@@ -220,7 +429,6 @@ var TransitionCompletion = class {
       return /* @__PURE__ */ new Set();
     }
   }
-  /** Returns explicit positive-time properties, or `null` for the ambiguous `all`. */
   #explicitPendingProperties(timings) {
     if (timings.some(({ property }) => property === "all")) return null;
     const pending = new Set(
@@ -228,7 +436,6 @@ var TransitionCompletion = class {
     );
     return pending.size > 0 ? pending : null;
   }
-  /** Completes exactly once, releasing listeners and the fallback before the callback. */
   #finish() {
     const complete = this.#complete;
     if (!complete) return;
@@ -236,7 +443,6 @@ var TransitionCompletion = class {
     this.#teardown();
     complete();
   }
-  /** Releases the exact element listeners and timer owned by the current wait. */
   #teardown() {
     this.#timers.clearAll();
     this.#element?.removeEventListener("transitionend", this.#onTerminal);
@@ -247,7 +453,6 @@ var TransitionCompletion = class {
   }
 };
 
-// src/controllers/collapsible_controller.ts
 var CollapsibleController = class extends Controller {
   static targets = ["trigger", "content", "expandedLabel", "collapsedLabel"];
   static values = {
@@ -255,35 +460,24 @@ var CollapsibleController = class extends Controller {
   };
   static actions = ["toggle"];
   static events = ["close", "open"];
-  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #expanded = new AttributeLease("aria-expanded", this.identifier);
+  #contentHidden = new AttributeLease("hidden", this.identifier);
+  #contentState = new AttributeLease("data-state", this.identifier);
   #transition = new TransitionCompletion();
-  /** Owns `hidden` on the trigger's label pair, which follows `aria-expanded`. */
-  #labels = new StateRegions({
-    whenTrue: () => this.expandedLabelTargets,
-    whenFalse: () => this.collapsedLabelTargets
-  });
-  /** Distinguishes dynamic target churn from the callbacks that precede `connect()`. */
+  #labels = new StateRegions(
+    {
+      whenTrue: () => this.expandedLabelTargets,
+      whenFalse: () => this.collapsedLabelTargets
+    },
+    this.identifier
+  );
   #connected = false;
-  /** Whether state moves are reported: set once `connect()` settled the baseline. */
   #reporting = false;
-  /**
-   * Establishes the initial open/closed state without waiting for a close transition.
-   *
-   * The DOM is the source of truth on reconnect (Turbo cache restore / morph): an
-   * **explicit** state attribute — `aria-expanded="true"`/`"false"` (or, with no
-   * trigger, `data-state="open"`/`"closed"`) — is honored verbatim so a region the
-   * user opened *or* closed survives a back-navigation, even when the declarative
-   * `open` Value disagrees. An already-open region remains open without a
-   * close/reopen cycle. The Value only seeds a genuinely fresh render where no
-   * state attribute is present yet; any opening animation in that case belongs to
-   * the consumer's CSS.
-   */
   connect() {
     this.#connected = true;
     this.#apply(this.#initialOpen(), false, "api");
     this.#reporting = true;
   }
-  /** Resolves the connect-time state: explicit DOM state wins, else the `open` Value. */
   #initialOpen() {
     if (this.hasTriggerTarget) {
       const expanded = this.triggerTarget.getAttribute("aria-expanded");
@@ -301,72 +495,66 @@ var CollapsibleController = class extends Controller {
     this.#reporting = false;
     this.#transition.cancel();
   }
-  /** Reconciles a replacement trigger target with the content's live state. */
   triggerTargetConnected(trigger) {
-    if (!this.#connected) return;
+    if (this.#connected) this.#reconcileTrigger(trigger);
+  }
+  triggerTargetDisconnected(trigger) {
+    if (!this.triggerTargets.includes(trigger)) {
+      this.#expanded.return(trigger);
+      this.#labels.release(trigger);
+    }
+    if (this.#connected && this.hasTriggerTarget) this.#reconcileTrigger(this.triggerTarget);
+  }
+  #reconcileTrigger(trigger) {
     if (this.hasContentTarget) {
-      trigger.setAttribute(
-        "aria-expanded",
+      this.#expanded.write(
+        trigger,
         this.contentTarget.getAttribute("data-state") === "open" ? "true" : "false"
       );
     }
     this.#labels.reflect(trigger, trigger.getAttribute("aria-expanded") === "true");
   }
-  /** Settles a label that arrived after the state it belongs to was written. */
   expandedLabelTargetConnected() {
     this.#reflectLabels();
   }
-  /** Settles a label that arrived after the state it belongs to was written. */
   collapsedLabelTargetConnected() {
     this.#reflectLabels();
   }
-  /** Shows the label pair's side that belongs to the trigger's expanded state. */
   #reflectLabels() {
     if (this.#connected && this.hasTriggerTarget) {
       this.#labels.reflect(this.triggerTarget, this.#isOpen);
     }
   }
-  /** Reconciles a replacement content target with the disclosure's live state. */
   contentTargetConnected(content) {
     if (!this.#connected) return;
     this.#transition.cancel();
-    const open = this.hasTriggerTarget ? this.triggerTarget.getAttribute("aria-expanded") === "true" : content.getAttribute("data-state") === "open";
-    this.#applyContent(content, open, false);
+    this.#reconcileContent(content);
   }
-  /** Cancels a wait tied to a content target that was removed or replaced. */
-  contentTargetDisconnected() {
+  contentTargetDisconnected(content) {
     this.#transition.cancel();
+    if (!this.contentTargets.includes(content)) {
+      this.#contentHidden.return(content);
+      this.#contentState.return(content);
+    }
+    if (this.#connected && this.hasContentTarget) this.#reconcileContent(this.contentTarget);
+  }
+  #reconcileContent(content) {
+    const open = this.hasTriggerTarget ? this.triggerTarget.getAttribute("aria-expanded") === "true" : content.getAttribute("data-state") === "open";
+    this.#applyContent(content, open, false);
   }
-  /** Toggles the region open/closed. Bound via `data-action` (click). */
   toggle(event) {
     this.#apply(!this.#isOpen, true, stateReasonFor(event));
   }
-  /**
-   * Whether the region is logically open. Read from `aria-expanded` (not the
-   * content's `hidden`) so a click *during* a close transition — when `hidden`
-   * is still deferred — correctly reopens instead of re-closing.
-   */
   get #isOpen() {
     if (this.hasTriggerTarget) {
       return this.triggerTarget.getAttribute("aria-expanded") === "true";
     }
     return this.hasContentTarget && this.contentTarget.getAttribute("data-state") === "open";
   }
-  /**
-   * Drives the disclosure to `open`, syncing the trigger's `aria-expanded` and
-   * the content's `hidden` / `data-state` / height variable in an order where
-   * `hidden` never blocks measurement or the transition.
-   *
-   * @param open - Target state.
-   * @param waitForCloseTransition - When `false` (initial `connect`) the close
-   *   path applies `hidden` immediately. This flag does not suppress consumer CSS
-   *   on the open path.
-   * @param reason - What drove the move, reported when the state actually moved.
-   */
   #apply(open, waitForCloseTransition, reason) {
     const was = this.#isOpen;
     if (this.hasTriggerTarget) {
-      this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false");
+      this.#expanded.write(this.triggerTarget, open ? "true" : "false");
       this.#labels.reflect(this.triggerTarget, open);
     }
     if (this.hasContentTarget) {
@@ -378,38 +566,31 @@ var CollapsibleController = class extends Controller {
     if (open) this.dispatch("open", { detail: { reason }, cancelable: false });
     else this.dispatch("close", { detail: { reason }, cancelable: false });
   }
-  /** Reflects one content target without relying on a later target lookup. */
   #applyContent(content, open, waitForCloseTransition) {
     if (open) {
-      content.hidden = false;
+      this.#contentHidden.write(content, null);
       content.style.setProperty(
         "--stimeo--collapsible-content-height",
         `${content.scrollHeight}px`
       );
-      content.setAttribute("data-state", "open");
+      this.#contentState.write(content, "open");
       return;
     }
-    content.setAttribute("data-state", "closed");
+    this.#contentState.write(content, "closed");
     if (waitForCloseTransition) {
       this.#applyHiddenAfterTransition(content);
     } else {
-      content.hidden = true;
+      this.#contentHidden.write(content, "");
     }
   }
-  /**
-   * Re-applies `hidden` once the close transition settles. Guarded against a
-   * reopen mid-transition; the shared waiter also guarantees a bounded fallback
-   * when the browser emits no terminal transition event.
-   */
   #applyHiddenAfterTransition(content) {
     this.#transition.wait(content, () => {
       if (content.getAttribute("data-state") === "closed") {
-        content.hidden = true;
+        this.#contentHidden.write(content, "");
       }
     });
   }
 };
 
 export { CollapsibleController };
-//# sourceMappingURL=collapsible_controller.js.map
 //# sourceMappingURL=collapsible_controller.js.map