stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/relative_time_controller.js

@@ -1,37 +1,52 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/relative_time_controller.ts
+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;
+}
 
-// 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;
+var DATETIME = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d+))?)?(Z|[+-]\d{2}:?\d{2})?)?$/;
+function readDatetime(element) {
+  const raw = element.getAttribute("datetime");
+  if (raw === null) return null;
+  const match = DATETIME.exec(raw.trim());
+  if (match === null) return null;
+  const [
+    ,
+    yearText,
+    monthText,
+    dayText,
+    hourText = "00",
+    minuteText = "00",
+    secondText = "00",
+    fraction = "",
+    zone = "Z"
+  ] = match;
+  const year = Number(yearText);
+  const month = Number(monthText);
+  const day = Number(dayText);
+  const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+  const days = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  if (month < 1 || month > 12 || day < 1 || day > (days[month - 1] ?? 0)) return null;
+  const hour = Number(hourText);
+  const minute = Number(minuteText);
+  const second = Number(secondText);
+  if (hour === 24 && (minute !== 0 || second !== 0 || /[1-9]/.test(fraction))) return null;
+  let offset = zone;
+  if (zone !== "Z") {
+    const digits = zone.slice(1).replace(":", "");
+    const offsetHour = digits.slice(0, 2);
+    const offsetMinute = digits.slice(2);
+    offset = `${zone[0]}${offsetHour}:${offsetMinute}`;
   }
-  /** 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);
-  }
-};
+  const milliseconds = fraction.slice(0, 3).padEnd(3, "0");
+  const canonical = `${yearText}-${monthText}-${dayText}T${hourText}:${minuteText}:${secondText}.${milliseconds}${offset}`;
+  const instant = Date.parse(canonical);
+  return Number.isNaN(instant) ? null : instant;
+}
 
-// src/utils/intl_format.ts
 var formatters = /* @__PURE__ */ new WeakMap();
 function intlFormatter(factory, locale, options, fallbackLocale) {
   const cache = cacheFor(factory);
@@ -60,32 +75,40 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
-// src/utils/locale.ts
 function resolveLocale(element, declared = "") {
   return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
 }
 
-// src/utils/microtask_coalescer.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 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. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -98,43 +121,99 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/safe_timeout.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MAX_TIMER_DELAY_MS = 2147483647;
+
+var NUMBER_BOUNDS = {
+  nonNegative: { finite: true, min: 0 },
+  timer: { finite: true, min: 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;
+  }
+};
+
 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);
@@ -151,7 +230,6 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
-// src/controllers/relative_time_controller.ts
 var YEAR_SCALE = { limit: Number.POSITIVE_INFINITY, unit: "year", ms: 315576e5 };
 var UNITS = [
   { limit: 60, unit: "second", ms: 1e3 },
@@ -163,112 +241,116 @@ var UNITS = [
   YEAR_SCALE
 ];
 var RELATIVE_OPTIONS = { numeric: "auto" };
-var RelativeTimeController = class extends Controller {
+var TEXT_RECORD = "text";
+var RelativeTimeController = class _RelativeTimeController extends Controller {
+  #numbers = new NumberValueReader();
   static values = {
     locale: { type: String, default: "" },
     threshold: { type: Number, default: 0 },
     tickInterval: { type: Number, default: 6e4 }
   };
+  static valueConstraints = {
+    threshold: NUMBER_BOUNDS.nonNegative,
+    tickInterval: NUMBER_BOUNDS.timer
+  };
   #timers = new SafeTimeout();
-  /** Collapses a morph that swaps several render inputs at once into one repaint. */
-  #resync = new MicrotaskCoalescer(() => this.#resyncToValues());
-  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  /** Epoch ms parsed from `datetime`; `NaN` when absent or invalid. */
+  #resync = new MorphRenderWatcher(() => {
+    const target = readDatetime(this.element) ?? Number.NaN;
+    if (!Object.is(target, this.#targetMs)) {
+      this.#targetMs = target;
+      this.#adoptAuthoredText();
+      this.#valuesDirty = true;
+    }
+    if (this.#valuesDirty) {
+      this.#valuesDirty = false;
+      this.#resyncToValues();
+    } else if (!Number.isNaN(this.#targetMs)) {
+      this.#applyAndComputeDelay();
+    }
+  });
+  #valuesDirty = false;
+  #datetimeWatch = new MutationObserver(() => this.#resync.schedule());
   #targetMs = Number.NaN;
-  /** The authored absolute text, restored when the threshold fallback kicks in. */
   #absoluteText = "";
   connect() {
-    this.#resync.activate();
-    this.#beforeCache.activate();
-    if (this.element.getAttribute("data-state") !== "relative") {
-      this.#absoluteText = (this.element.textContent ?? "").trim();
-    }
-    this.#targetMs = Date.parse(this.element.getAttribute("datetime") ?? "");
+    this.#timers.clearAll();
+    this.#valuesDirty = false;
+    this.#resync.observe(this.element);
+    this.#datetimeWatch.observe(this.element, { attributeFilter: ["datetime"] });
+    this.#adoptAuthoredText();
+    this.#targetMs = readDatetime(this.element) ?? Number.NaN;
     if (Number.isNaN(this.#targetMs)) return;
     this.#schedule();
   }
   disconnect() {
-    this.#resync.cancel();
-    this.#beforeCache.deactivate();
+    this.#resync.disconnect();
+    this.#datetimeWatch.disconnect();
     this.#timers.clearAll();
   }
-  /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */
+  #adoptAuthoredText() {
+    if (this.element.getAttribute("data-state") !== "relative") {
+      this.#absoluteText = (this.element.textContent ?? "").trim();
+    } else {
+      const recorded = this.#recordedText();
+      if (recorded !== null) this.#absoluteText = recorded;
+    }
+  }
+  get #textRecord() {
+    return `data-${this.identifier}-${TEXT_RECORD}`;
+  }
+  #recordedText() {
+    try {
+      const parsed = JSON.parse(this.element.getAttribute(this.#textRecord) ?? "null");
+      return typeof parsed === "string" ? parsed : null;
+    } catch {
+      return null;
+    }
+  }
   localeValueChanged() {
+    this.#valuesDirty = true;
     this.#resync.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `threshold` at runtime. */
   thresholdValueChanged() {
+    this.#valuesDirty = true;
     this.#resync.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `tickInterval` at runtime. */
   tickIntervalValueChanged() {
+    this.#valuesDirty = true;
     this.#resync.schedule();
   }
-  /**
-   * Renders against the current Values and re-arms the poll from now.
-   *
-   * Render only: it emits no event, and clearing first keeps the single self-arming
-   * timer single — scheduling on top of a pending one would double the poll rate for
-   * the rest of the session. A stamp whose `datetime` never parsed has nothing to
-   * render, and one that already reached its terminal fallback simply renders it
-   * again and stops.
-   */
   #resyncToValues() {
-    if (Number.isNaN(this.#targetMs)) return;
     this.#timers.clearAll();
+    if (Number.isNaN(this.#targetMs)) return;
     this.#schedule();
   }
-  /**
-   * Restores the authored absolute text and the pre-render state for the snapshot
-   * Turbo is about to take, leaving the live page's poll timer alone.
-   *
-   * With no authored text held there is nothing to restore, and `data-state` has to
-   * stay as it is: that marker is what tells the next `connect()` the visible text is
-   * a rendered relative form rather than an absolute fallback to hold on to.
-   */
-  #rewindForCache() {
-    if (!this.#absoluteText) return;
-    this.element.textContent = this.#absoluteText;
-    this.element.removeAttribute("data-state");
-  }
-  /** Renders the current representation and reschedules unless polling can stop. */
   #schedule() {
     const nextDelay = this.#applyAndComputeDelay();
     if (nextDelay !== null) {
       this.#timers.set(() => this.#schedule(), nextDelay);
     }
   }
-  /**
-   * Updates the visible text and returns the next poll delay (ms), or `null` when
-   * polling can stop: a *past* timestamp that fell back to the absolute text can
-   * never leave it again, and a locale the runtime rejects has nothing to render
-   * until that value is corrected.
-   *
-   * @stimeoRenderRoot
-   */
   #applyAndComputeDelay() {
     const deltaMs = this.#targetMs - Date.now();
     const absSeconds = Math.abs(deltaMs) / 1e3;
     const scale = UNITS.find((u) => absSeconds < u.limit) ?? YEAR_SCALE;
     const unitFloor = scale.unit === "second" || scale.unit === "minute" ? 6e4 : scale.ms;
-    const nextDelay = Math.max(this.tickIntervalValue, Math.min(unitFloor, 864e5));
-    if (this.thresholdValue > 0 && absSeconds >= this.thresholdValue && this.#absoluteText) {
+    const nextDelay = Math.max(this.#safeTickInterval, Math.min(unitFloor, 864e5));
+    if (this.#safeThreshold > 0 && absSeconds >= this.#safeThreshold && this.#absoluteText) {
       this.element.textContent = this.#absoluteText;
       this.element.setAttribute("data-state", "absolute");
+      this.element.removeAttribute(this.#textRecord);
       if (deltaMs <= 0) return null;
-      return Math.min(nextDelay, deltaMs - this.thresholdValue * 1e3 + 1);
+      return Math.max(1, Math.min(nextDelay, deltaMs - this.#safeThreshold * 1e3 + 1));
     }
     const formatter = this.#formatter;
     if (formatter === null) return null;
     const value = Math.round(deltaMs / scale.ms);
     this.element.textContent = formatter.format(value, scale.unit);
     this.element.setAttribute("data-state", "relative");
+    const record = JSON.stringify(this.#absoluteText);
+    setAttributeIfChanged(this.element, this.#textRecord, record);
     return nextDelay;
   }
-  /**
-   * A `RelativeTimeFormat` for the resolved locale (`numeric: "auto"`), or `null`
-   * when the runtime rejects that locale.
-   */
   get #formatter() {
     return intlFormatter(
       Intl.RelativeTimeFormat,
@@ -276,8 +358,25 @@ var RelativeTimeController = class extends Controller {
       RELATIVE_OPTIONS
     );
   }
+  get #safeThreshold() {
+    return this.#numbers.read(
+      this,
+      "threshold",
+      this.thresholdValue,
+      _RelativeTimeController.values.threshold.default,
+      _RelativeTimeController.valueConstraints.threshold
+    );
+  }
+  get #safeTickInterval() {
+    return this.#numbers.read(
+      this,
+      "tickInterval",
+      this.tickIntervalValue,
+      _RelativeTimeController.values.tickInterval.default,
+      _RelativeTimeController.valueConstraints.tickInterval
+    );
+  }
 };
 
 export { RelativeTimeController };
-//# sourceMappingURL=relative_time_controller.js.map
 //# sourceMappingURL=relative_time_controller.js.map