stimeo-ui 0.16.0 → 0.18.0

data/dist/controllers/reading_progress_controller.js

@@ -1,44 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/reading_progress_controller.ts
-
-// src/utils/before_cache_reset.ts
-var BeforeCacheReset = class _BeforeCacheReset {
-  /** Every subscribed instance, iterated by the one shared document listener. */
-  static #subscribers = /* @__PURE__ */ new Set();
-  /** The shared listener; installed while at least one instance is subscribed. */
-  static #onBeforeCache = () => {
-    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
-  };
-  #rewind;
-  /** @param rewind - the pass that returns this controller's state to its initial form. */
-  constructor(rewind) {
-    this.#rewind = rewind;
-  }
-  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
-  activate() {
-    const first = _BeforeCacheReset.#subscribers.size === 0;
-    _BeforeCacheReset.#subscribers.add(this);
-    if (first) {
-      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
-    }
-  }
-  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
-  deactivate() {
-    _BeforeCacheReset.#subscribers.delete(this);
-    if (_BeforeCacheReset.#subscribers.size > 0) return;
-    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
-  }
-};
-
-// src/utils/frame_coalescer.ts
 var FrameCoalescer = class {
   #frame = null;
-  /**
-   * Runs `run` on the next frame, unless a frame is already pending — the first
-   * request of a burst wins and the rest are dropped. The pending frame is
-   * released before `run`, so `run` may request the next one.
-   */
   schedule(run) {
     if (this.#frame !== null) return;
     this.#frame = requestAnimationFrame(() => {
@@ -46,14 +9,6 @@ var FrameCoalescer = class {
       run();
     });
   }
-  /**
-   * Drops the pending frame, and reaches the platform only when there is one.
-   *
-   * There is no handle value that stands for "nothing pending":
-   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
-   * arrives as a large positive number that the same allocator can hand out, and
-   * an idle cancel would then drop a frame belonging to someone else.
-   */
   cancel() {
     if (this.#frame === null) return;
     cancelAnimationFrame(this.#frame);
@@ -61,18 +16,15 @@ var FrameCoalescer = 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();
   };
@@ -80,11 +32,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) {
@@ -94,47 +41,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;
@@ -143,81 +71,196 @@ var LayoutObserver = class {
   }
 };
 
-// src/utils/style_property_lease.ts
-var StylePropertyLease = class {
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+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 StylePropertyLease = class _StylePropertyLease {
+  static #registry = sharedRegistry(
+    "stimeo-ui.style-property-lease.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+  );
   #property;
-  #records = /* @__PURE__ */ new Map();
-  /** @param property - The CSS property whose temporary values this lease owns. */
-  constructor(property) {
+  #record;
+  #held = /* @__PURE__ */ new Set();
+  constructor(property, owner) {
     this.#property = property;
+    this.#record = `data-${owner}-style-${property}-lease`;
+    const names = _StylePropertyLease.#registry.names;
+    names.set(property, (names.get(property) ?? /* @__PURE__ */ new Set()).add(this.#record));
   }
-  /** Writes or removes the leased declaration while preserving its authored value. */
   write(element, value, priority = "") {
-    const existing = this.#records.get(element);
-    if (existing) {
-      existing.writtenValue = value;
-      existing.writtenPriority = value === null ? "" : priority;
-    } else {
-      this.#records.set(element, {
-        originalValue: element.style.getPropertyValue(this.#property),
-        originalPriority: element.style.getPropertyPriority(this.#property),
-        writtenValue: value,
-        writtenPriority: value === null ? "" : priority
-      });
-    }
-    this.#reflect(element, value, priority);
+    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.writtenValue = value;
+    hold.writtenPriority = value === null ? "" : priority;
+    this.#mark(element, stack);
+    if (shows) this.#show(element, value, hold.writtenPriority);
   }
-  /** Returns one lease without overwriting a later consumer declaration. */
   return(element) {
-    const record = this.#records.get(element);
-    if (!record) return;
-    this.#records.delete(element);
-    const style = element.style;
-    const stillOwned = style.getPropertyValue(this.#property) === (record.writtenValue ?? "") && style.getPropertyPriority(this.#property) === record.writtenPriority;
-    if (stillOwned) {
-      this.#reflect(element, record.originalValue, record.originalPriority);
-    }
+    const held = this.#held.delete(element);
+    const known = _StylePropertyLease.#registry.stacks.get(element)?.has(this.#property);
+    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    const hold = this.#take(stack);
+    if (!hold) return;
+    const owns = this.#carries(element, hold) && !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;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    if (below) this.#show(element, below.writtenValue, below.writtenPriority);
+    else this.#show(element, hold.originalValue, hold.originalPriority);
   }
-  /** Returns every outstanding declaration lease. */
   returnAll() {
-    for (const element of Array.from(this.#records.keys())) this.return(element);
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #recorded(element, name) {
+    try {
+      const parsed = JSON.parse(element.getAttribute(name) ?? "null");
+      if (!Array.isArray(parsed)) return null;
+      const [originalValue, originalPriority, writtenValue, writtenPriority, ...rest] = parsed;
+      if (typeof originalValue !== "string" || typeof originalPriority !== "string") return null;
+      if (typeof writtenValue !== "string" && writtenValue !== null) return null;
+      if (typeof writtenPriority !== "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 { originalValue, originalPriority, writtenValue, writtenPriority, linked, beneath };
+    } catch {
+      return null;
+    }
   }
-  /** Reflects only a real declaration transition. */
-  #reflect(element, value, priority) {
+  #stack(element) {
+    const stacks = _StylePropertyLease.#registry.stacks;
+    const byProperty = stacks.get(element) ?? /* @__PURE__ */ new Map();
+    stacks.set(element, byProperty);
+    const stack = byProperty.get(this.#property) ?? this.#seed(element);
+    byProperty.set(this.#property, stack);
+    return stack;
+  }
+  #seed(element) {
+    const found = [];
+    for (const record of _StylePropertyLease.#registry.names.get(this.#property) ?? []) {
+      const read = this.#recorded(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((entry, index) => ({
+      lease: null,
+      record: entry.record,
+      writtenValue: entry.writtenValue,
+      writtenPriority: entry.writtenPriority,
+      originalValue: entry.originalValue,
+      originalPriority: entry.originalPriority,
+      linked: entry.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 top = stack.at(-1);
+    const over = top && this.#carries(element, top) ? top : void 0;
     const style = element.style;
-    const nextValue = value ?? "";
-    const nextPriority = value === null ? "" : priority;
-    if (style.getPropertyValue(this.#property) === nextValue && style.getPropertyPriority(this.#property) === nextPriority) {
-      return;
+    const hold = {
+      lease: this,
+      record: this.#record,
+      writtenValue: null,
+      writtenPriority: "",
+      originalValue: over ? over.originalValue : style.getPropertyValue(this.#property),
+      originalPriority: over ? over.originalPriority : style.getPropertyPriority(this.#property),
+      linked: over !== void 0
+    };
+    stack.push(hold);
+    return hold;
+  }
+  #covered(element, stack, hold) {
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => this.#carries(element, above));
+  }
+  #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];
+      const { originalValue, originalPriority, writtenValue, writtenPriority } = hold;
+      records.set(
+        hold.record,
+        (writtenValue ?? "") === originalValue && writtenPriority === originalPriority && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([
+          originalValue,
+          originalPriority,
+          writtenValue,
+          writtenPriority,
+          ...marker,
+          ...beneath
+        ])
+      );
+    });
+    for (const [name, recorded] of records) {
+      setAttributeIfChanged(element, name, recorded);
     }
-    if (value === null) style.removeProperty(this.#property);
-    else style.setProperty(this.#property, value, priority);
+  }
+  #carries(element, hold) {
+    return this.#holds(element, hold.writtenValue ?? "", hold.writtenPriority);
+  }
+  #holds(element, value, priority) {
+    const style = element.style;
+    return style.getPropertyValue(this.#property) === value && style.getPropertyPriority(this.#property) === priority;
+  }
+  #show(element, value, priority) {
+    if (this.#holds(element, value ?? "", priority)) return;
+    if (value === null) element.style.removeProperty(this.#property);
+    else element.style.setProperty(this.#property, value, priority);
   }
 };
 
-// src/controllers/reading_progress_controller.ts
 var PROGRESS_PROPERTY = "--stimeo--reading-progress";
 var ReadingProgressController = class extends Controller {
   static events = ["change", "complete"];
-  /** Owns both faces of the published property so teardown can hand them back. */
-  #lease = new StylePropertyLease(PROGRESS_PROPERTY);
-  /** The article's own box and the viewport: either changes the span. */
+  #lease = new StylePropertyLease(PROGRESS_PROPERTY, this.identifier);
   #layout = new LayoutObserver(() => this.#onScroll());
-  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  /** Coalesces scroll bursts, and the connect baseline, into one frame. */
   #frames = new FrameCoalescer();
-  /** Last published progress, so `change`/`complete` fire only on movement. */
   #progress = -1;
-  /** False until the connect frame has run: `complete` needs real reading. */
   #baselined = false;
   #onScroll = () => this.#frames.schedule(() => this.#measure());
+  #listeners = new ListenerSet();
   connect() {
     this.#progress = -1;
     this.#baselined = false;
-    window.addEventListener("scroll", this.#onScroll, { passive: true, capture: true });
+    this.#listeners.add(window, "scroll", this.#onScroll, { passive: true, capture: true });
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
-    this.#beforeCache.activate();
     this.#measure();
     this.#frames.schedule(() => {
       this.#measure();
@@ -225,25 +268,12 @@ var ReadingProgressController = class extends Controller {
     });
   }
   disconnect() {
-    window.removeEventListener("scroll", this.#onScroll, { capture: true });
+    this.#listeners.dispose();
     this.#layout.disconnect();
-    this.#beforeCache.deactivate();
-    this.#frames.cancel();
-    this.#lease.returnAll();
-  }
-  /**
-   * Hands both declarations back before the page is snapshotted, so a restored
-   * page starts from the authored DOM rather than from someone else's progress.
-   * The baseline goes back with them: a cancelled visit leaves this page on
-   * screen, and the next measurement has to publish afresh rather than match a
-   * value that has already been handed back.
-   */
-  #rewindForCache() {
     this.#frames.cancel();
-    this.#lease.returnAll();
-    this.#progress = -1;
+    this.#lease.return(this.element);
+    this.#lease.return(document.documentElement);
   }
-  /** Computes and publishes the progress; emits on movement only. */
   #measure() {
     const rect = this.element.getBoundingClientRect();
     if (rect.width === 0 && rect.height === 0) return;
@@ -262,5 +292,4 @@ var ReadingProgressController = class extends Controller {
 };
 
 export { ReadingProgressController };
-//# sourceMappingURL=reading_progress_controller.js.map
 //# sourceMappingURL=reading_progress_controller.js.map