stimeo-ui 0.15.0 → 0.17.0

data/dist/controllers/read_more_controller.js

@@ -1,30 +1,20 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/read_more_controller.ts
-
-// src/utils/blur_deferral.ts
 var BlurDeferral = class {
-  /** Elements currently holding an update back, mapped to their `blur` listener. */
   #pending = /* @__PURE__ */ new Map();
-  /** Called after a pending element blurs and has been detached. */
   #onRelease;
-  /** @param onRelease - Invoked once `element` actually blurs; never on `release`. */
   constructor(onRelease) {
     this.#onRelease = onRelease;
   }
-  /** Number of elements currently holding an update back. */
   get size() {
     return this.#pending.size;
   }
-  /** Snapshot of the pending elements, safe to iterate while releasing them. */
   get elements() {
     return [...this.#pending.keys()];
   }
-  /** Whether `element` is currently holding an update back. */
   has(element) {
     return this.#pending.has(element);
   }
-  /** Holds an update back until `element` blurs. Idempotent (no stacked listeners). */
   defer(element) {
     if (this.#pending.has(element)) return;
     const onBlur = () => {
@@ -34,22 +24,18 @@ var BlurDeferral = class {
     this.#pending.set(element, onBlur);
     element.addEventListener("blur", onBlur);
   }
-  /** Defers `element` as the only pending entry, cancelling any others. */
   deferOnly(element) {
     for (const pending of this.elements) {
       if (pending !== element) this.#detach(pending);
     }
     this.defer(element);
   }
-  /** Cancels `element`'s deferral without completing it; no-ops when not pending. */
   release(element) {
     this.#detach(element);
   }
-  /** Cancels every deferral without completing any of them. */
   releaseAll() {
     for (const element of this.elements) this.#detach(element);
   }
-  /** Removes the `blur` listener for `element` and forgets it. */
   #detach(element) {
     const onBlur = this.#pending.get(element);
     if (onBlur) element.removeEventListener("blur", onBlur);
@@ -57,18 +43,15 @@ var BlurDeferral = class {
   }
 };
 
-// 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();
   };
@@ -76,11 +59,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) {
@@ -90,47 +68,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;
@@ -139,13 +98,177 @@ var LayoutObserver = class {
   }
 };
 
-// src/controllers/read_more_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+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;
+}
+
+var StateRegions = class _StateRegions {
+  static #registry = sharedRegistry(
+    "stimeo-ui.state-regions.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
+  #whenTrue;
+  #whenFalse;
+  #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);
+  }
+  reflect(host, isTrue) {
+    const shown = this.#inside(host, this.#whenTrue());
+    if (!this.#whenFalse) {
+      for (const region of shown) this.#write(region, !isTrue);
+      return;
+    }
+    const hiddenSide = this.#inside(host, this.#whenFalse());
+    if (shown.length === 0 || hiddenSide.length === 0) {
+      for (const region of shown) this.#give(region);
+      for (const region of hiddenSide) this.#give(region);
+      return;
+    }
+    for (const region of shown) this.#write(region, !isTrue);
+    for (const region of hiddenSide) this.#write(region, isTrue);
+  }
+  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) {
+    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);
+  }
+  #give(region) {
+    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;
+    }
+  }
+  #inside(host, regions) {
+    return regions.filter((region) => host.contains(region));
+  }
+};
+
 var ReadMoreController = class extends Controller {
-  static targets = ["content", "trigger"];
+  static targets = ["content", "trigger", "expandedLabel", "collapsedLabel"];
   static values = {
     collapsed: { type: Boolean, default: true }
   };
   static actions = ["toggle"];
+  static events = ["close", "open"];
   #connected = false;
   #collapsed = true;
   #observedContent = null;
@@ -154,7 +277,13 @@ var ReadMoreController = class extends Controller {
     if (this.#connected) this.#evaluateOverflow();
   };
   #layout = new LayoutObserver(this.#update);
-  /** Holds the trigger's hide back while it has focus; re-evaluates on blur. */
+  #labels = new StateRegions(
+    {
+      whenTrue: () => this.expandedLabelTargets,
+      whenFalse: () => this.collapsedLabelTargets
+    },
+    this.identifier
+  );
   #deferredHide = new BlurDeferral(() => {
     this.#update();
   });
@@ -179,14 +308,23 @@ var ReadMoreController = class extends Controller {
   }
   triggerTargetDisconnected(trigger) {
     this.#deferredHide.release(trigger);
+    if (!this.triggerTargets.includes(trigger)) this.#labels.release(trigger);
+    this.#syncTargets();
+  }
+  expandedLabelTargetConnected() {
+    this.#syncTargets();
+  }
+  collapsedLabelTargetConnected() {
     this.#syncTargets();
   }
-  /** Toggles between the collapsed (clamped) and expanded states. */
-  toggle() {
+  toggle(event) {
     if (!this.#connected) return;
     this.#collapsed = !this.#collapsed;
     this.#reflect();
     this.#evaluateOverflow();
+    const detail = { reason: stateReasonFor(event) };
+    if (this.#collapsed) this.dispatch("close", { detail, cancelable: false });
+    else this.dispatch("open", { detail, cancelable: false });
   }
   #initialCollapsed() {
     if (this.hasContentTarget) {
@@ -202,6 +340,7 @@ var ReadMoreController = class extends Controller {
     }
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
+      this.#labels.reflect(this.triggerTarget, !this.#collapsed);
     }
   }
   #syncTargets() {
@@ -260,5 +399,4 @@ var ReadMoreController = class extends Controller {
 };
 
 export { ReadMoreController };
-//# sourceMappingURL=read_more_controller.js.map
 //# sourceMappingURL=read_more_controller.js.map