stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/idle_controller.js

@@ -1,44 +1,82 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/idle_controller.ts
+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();
+  }
+};
+
+var MAX_TIMER_DELAY_MS = 2147483647;
+
+var NUMBER_BOUNDS = {
+  nonNegative: { finite: true, min: 0 },
+  positiveTimer: { finite: true, exclusiveMin: 0, max: MAX_TIMER_DELAY_MS }
+};
+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;
+  }
+};
 
-// 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);
@@ -55,7 +93,161 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
-// src/utils/string_list.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;
+}
+
+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));
+  }
+};
+
 function parseStringList(raw, fallback = []) {
   const text = raw.trim();
   if (text.length === 0) return [...fallback];
@@ -69,7 +261,6 @@ function parseStringList(raw, fallback = []) {
   return parsed.filter((entry) => typeof entry === "string");
 }
 
-// src/controllers/idle_controller.ts
 var DEFAULT_ACTIVITY_EVENTS = [
   "mousemove",
   "mousedown",
@@ -78,33 +269,38 @@ var DEFAULT_ACTIVITY_EVENTS = [
   "touchstart",
   "scroll"
 ];
-var IdleController = class extends Controller {
+var IdleController = class _IdleController extends Controller {
+  #numbers = new NumberValueReader();
   static values = {
     timeout: { type: Number, default: 9e5 },
     promptBefore: { type: Number, default: 0 },
-    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
-    // type: that reader throws out of the value observer before any callback
-    // runs, so one malformed attribute would stop the detector connecting.
     events: { type: String, default: "" }
   };
+  static valueConstraints = {
+    timeout: NUMBER_BOUNDS.positiveTimer,
+    promptBefore: NUMBER_BOUNDS.nonNegative
+  };
+  static targets = ["prompt", "idle"];
   static events = ["prompt", "idle", "active"];
+  #promptRegions = new StateRegions(
+    { whenTrue: () => this.promptTargets },
+    this.identifier
+  );
+  #idleRegions = new StateRegions({ whenTrue: () => this.idleTargets }, this.identifier);
   #timeouts = new SafeTimeout();
   #idle = false;
   #prompted = false;
-  /** Timestamp of the last activity; the timers self-reschedule against it. */
   #lastActivity = 0;
-  /**
-   * Activity types actually registered on `document`, so `disconnect()` unbinds the
-   * same set even when `events` changed while connected (a Turbo morph can rewrite
-   * the Value in place, and the removal must match the registration, not the Value).
-   */
+  #connected = false;
+  #activityListeners = new ListenerSet();
+  #visibilityListeners = new ListenerSet();
   #boundEvents = [];
   #onActivity = () => {
     this.#lastActivity = Date.now();
     if (this.#idle || this.#prompted) {
       this.#idle = false;
       this.#prompted = false;
-      this.element.removeAttribute("data-idle");
+      this.#reflect();
       this.dispatch("active", { detail: {} });
       this.#arm();
     }
@@ -113,62 +309,117 @@ var IdleController = class extends Controller {
     if (document.visibilityState === "visible") this.#onActivity();
   };
   connect() {
+    this.#connected = true;
     this.#idle = false;
     this.#prompted = false;
-    this.element.removeAttribute("data-idle");
-    this.#boundEvents = parseStringList(this.eventsValue, DEFAULT_ACTIVITY_EVENTS);
-    for (const type of this.#boundEvents) {
-      document.addEventListener(type, this.#onActivity, { passive: true, capture: true });
-    }
-    document.addEventListener("visibilitychange", this.#onVisibility);
+    this.#reflect();
+    this.#bindActivity(parseStringList(this.eventsValue, DEFAULT_ACTIVITY_EVENTS));
+    this.#visibilityListeners.add(document, "visibilitychange", this.#onVisibility);
     this.#arm();
   }
   disconnect() {
-    for (const type of this.#boundEvents) {
-      document.removeEventListener(type, this.#onActivity, { capture: true });
-    }
-    this.#boundEvents = [];
-    document.removeEventListener("visibilitychange", this.#onVisibility);
+    this.#connected = false;
+    this.#activityListeners.dispose();
+    this.#visibilityListeners.dispose();
     this.#timeouts.clearAll();
   }
-  /** Schedules the prompt and idle checks from the current activity baseline. */
+  eventsValueChanged() {
+    if (!this.#connected) return;
+    const types = parseStringList(this.eventsValue, DEFAULT_ACTIVITY_EVENTS);
+    if (types.length === this.#boundEvents.length && types.every((type, index) => type === this.#boundEvents[index]))
+      return;
+    this.#bindActivity(types);
+  }
+  timeoutValueChanged() {
+    if (this.#connected) this.#schedule();
+  }
+  promptBeforeValueChanged() {
+    if (this.#connected) this.#schedule();
+  }
+  #bindActivity(types) {
+    this.#activityListeners.dispose();
+    for (const type of types) {
+      this.#activityListeners.add(document, type, this.#onActivity, {
+        passive: true,
+        capture: true
+      });
+    }
+    this.#boundEvents = types;
+  }
   #arm() {
-    this.#timeouts.clearAll();
     this.#lastActivity = Date.now();
-    const { promptBeforeValue: prompt, timeoutValue: timeout } = this;
-    if (prompt > 0 && prompt < timeout) {
-      this.#timeouts.set(() => this.#checkPrompt(), timeout - prompt);
-    }
-    this.#timeouts.set(() => this.#checkIdle(), timeout);
+    this.#schedule();
+  }
+  #schedule() {
+    this.#timeouts.clearAll();
+    if (this.#idle) return;
+    const elapsed = Date.now() - this.#lastActivity;
+    const timeout = this.#safeTimeout;
+    const prompt = this.#safePromptBefore;
+    this.#timeouts.set(() => this.#checkIdle(), this.#delayFor(timeout - elapsed));
+    if (this.#prompted || prompt <= 0 || prompt >= timeout) return;
+    const left = Math.min(prompt, timeout - elapsed);
+    this.#timeouts.set(() => this.#checkPrompt(left), this.#delayFor(timeout - prompt - elapsed));
+  }
+  #delayFor(remaining) {
+    return Math.min(Math.max(remaining, 0), MAX_TIMER_DELAY_MS);
   }
-  /**
-   * Idle-timer callback: go idle only if there has genuinely been no activity for
-   * `timeout`; otherwise reschedule for the remaining time. This lets activity events
-   * stay O(1) (a timestamp write) while the deadline still tracks the last activity.
-   */
   #checkIdle() {
-    const remaining = this.timeoutValue - (Date.now() - this.#lastActivity);
+    const remaining = this.#safeTimeout - (Date.now() - this.#lastActivity);
     if (remaining > 0) {
-      this.#timeouts.set(() => this.#checkIdle(), remaining);
+      this.#timeouts.set(() => this.#checkIdle(), Math.min(remaining, MAX_TIMER_DELAY_MS));
       return;
     }
     this.#idle = true;
     this.#prompted = false;
-    this.element.setAttribute("data-idle", "true");
+    this.#reflect();
     this.dispatch("idle", { detail: {} });
   }
-  /** Prompt-timer callback: warn at `promptBefore` before the idle deadline. */
-  #checkPrompt() {
-    const remaining = this.timeoutValue - this.promptBeforeValue - (Date.now() - this.#lastActivity);
+  #checkPrompt(left = this.#safePromptBefore) {
+    if (this.#idle) return;
+    const remaining = this.#safeTimeout - this.#safePromptBefore - (Date.now() - this.#lastActivity);
     if (remaining > 0) {
-      this.#timeouts.set(() => this.#checkPrompt(), remaining);
+      this.#timeouts.set(() => this.#checkPrompt(), Math.min(remaining, MAX_TIMER_DELAY_MS));
       return;
     }
     this.#prompted = true;
-    this.dispatch("prompt", { detail: { remaining: this.promptBeforeValue } });
+    this.#reflect();
+    this.dispatch("prompt", { detail: { remaining: left } });
+  }
+  promptTargetConnected() {
+    this.#promptRegions.reflect(this.element, this.#prompted);
+  }
+  idleTargetConnected() {
+    this.#idleRegions.reflect(this.element, this.#idle);
+  }
+  #reflect() {
+    const { element } = this;
+    if (this.#prompted) element.setAttribute("data-prompt", "true");
+    else element.removeAttribute("data-prompt");
+    if (this.#idle) element.setAttribute("data-idle", "true");
+    else element.removeAttribute("data-idle");
+    this.#promptRegions.reflect(element, this.#prompted);
+    this.#idleRegions.reflect(element, this.#idle);
+  }
+  get #safeTimeout() {
+    return this.#numbers.read(
+      this,
+      "timeout",
+      this.timeoutValue,
+      _IdleController.values.timeout.default,
+      _IdleController.valueConstraints.timeout
+    );
+  }
+  get #safePromptBefore() {
+    return this.#numbers.read(
+      this,
+      "promptBefore",
+      this.promptBeforeValue,
+      _IdleController.values.promptBefore.default,
+      _IdleController.valueConstraints.promptBefore
+    );
   }
 };
 
 export { IdleController };
-//# sourceMappingURL=idle_controller.js.map
 //# sourceMappingURL=idle_controller.js.map