stimeo-ui 0.16.0 → 0.17.0

package/dist/controllers/countdown_controller.d.ts

@@ -53,7 +53,10 @@ import { Controller } from '@hotwired/stimulus';
  * source of truth — `autostart` only decides the state of a timer whose markup does
  * not carry one. The interval is owned by `SafeInterval` and torn down on
  * `disconnect()` (Turbo navigation included); nothing else needs carrying across,
- * because every reading is re-derived from `deadline` and the wall clock.
+ * because every reading is re-derived from `deadline` and the wall clock. A change to
+ * `interval` while the timer runs re-arms the tick at the new period, keeping the run
+ * state, the reading and the completion; a paused or completed timer picks it up when
+ * it next runs.
  */
 declare class CountdownController extends Controller<HTMLElement> {
     #private;
@@ -84,6 +87,13 @@ declare class CountdownController extends Controller<HTMLElement> {
             default: string;
         };
     };
+    static valueConstraints: {
+        interval: {
+            readonly finite: true;
+            readonly exclusiveMin: 0;
+            readonly max: 2147483647;
+        };
+    };
     static actions: readonly ["pause", "reset", "resume", "start"];
     static events: readonly ["complete", "tick"];
     readonly daysTarget: HTMLElement;
@@ -91,6 +101,7 @@ declare class CountdownController extends Controller<HTMLElement> {
     readonly minutesTarget: HTMLElement;
     readonly secondsTarget: HTMLElement;
     readonly statusTarget: HTMLElement;
+    readonly statusTargets: HTMLElement[];
     readonly hasDaysTarget: boolean;
     readonly hasHoursTarget: boolean;
     readonly hasMinutesTarget: boolean;
@@ -104,6 +115,30 @@ declare class CountdownController extends Controller<HTMLElement> {
     announceTextValue: string;
     connect(): void;
     disconnect(): void;
+    /** Writes the reading on screen into a days slot that arrives at runtime. */
+    daysTargetConnected(): void;
+    /** Writes the reading on screen into the days slot that stays after another leaves. */
+    daysTargetDisconnected(): void;
+    /** Writes the reading on screen into an hours slot that arrives at runtime. */
+    hoursTargetConnected(): void;
+    /** Writes the reading on screen into the hours slot that stays after another leaves. */
+    hoursTargetDisconnected(): void;
+    /** Writes the reading on screen into a minutes slot that arrives at runtime. */
+    minutesTargetConnected(): void;
+    /** Writes the reading on screen into the minutes slot that stays after another leaves. */
+    minutesTargetDisconnected(): void;
+    /** Writes the reading on screen into a seconds slot that arrives at runtime. */
+    secondsTargetConnected(): void;
+    /** Writes the reading on screen into the seconds slot that stays after another leaves. */
+    secondsTargetDisconnected(): void;
+    /** Brings a status that arrives at runtime, when it shows this controller's text, in line. */
+    statusTargetConnected(): void;
+    /**
+     * Takes the claim off a status that no longer resolves, even after `disconnect()`, when
+     * it still shows this controller's text alone; the text stays. Brings the status that
+     * stays in line.
+     */
+    statusTargetDisconnected(status: HTMLElement): void;
     /** Re-derives the display when a morph swaps the deadline in place. */
     deadlineValueChanged(): void;
     /** Re-derives the display when a morph flips the counting direction in place. */
@@ -118,6 +153,15 @@ declare class CountdownController extends Controller<HTMLElement> {
      * left to `connect()`.
      */
     completeLabelValueChanged(): void;
+    /**
+     * Follows a tick period changed at runtime. A running countdown swaps its one interval
+     * for one at the new period, starting from now; its run state, reading, deadline and
+     * completion are untouched, and nothing ticks or repaints until the next period ends. A
+     * paused or completed countdown starts nothing and uses the new period when it next
+     * runs, and a declaration that resolves to the period already running changes nothing.
+     * Stimulus also calls this ahead of `connect()`, when no interval runs.
+     */
+    intervalValueChanged(): void;
     /**
      * Starts (or restarts after pause) ticking toward the deadline. Counting on from a
      * completion takes this controller's completion text back out of the status.

package/dist/controllers/countdown_controller.js

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/countdown_controller.ts
-
-// src/utils/announce.ts
 function announce(message, options = {}) {
   const text = message.trim();
   if (text.length === 0) return;
@@ -19,27 +16,33 @@ function fillTemplate(template, values) {
   });
 }
 
-// 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. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -52,38 +55,96 @@ 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();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MAX_TIMER_DELAY_MS = 2147483647;
+
+var NUMBER_BOUNDS = {
+  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;
+  }
+};
+
 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 SafeInterval = class extends TimerRegistry {
-  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */
   set(callback, delay) {
     const id = this.schedule(callback, delay);
     this.ids.add(id);
@@ -97,11 +158,10 @@ var SafeInterval = class extends TimerRegistry {
   }
 };
 
-// src/controllers/countdown_controller.ts
 var SECOND_MS = 1e3;
 var OWNED_STATUS = "owns-status";
-var CountdownController = class extends Controller {
-  /** The status marker, in the namespace this controller is registered under. */
+var CountdownController = class _CountdownController extends Controller {
+  #numbers = new NumberValueReader();
   get #ownedStatus() {
     return `data-${this.identifier}-${OWNED_STATUS}`;
   }
@@ -114,114 +174,122 @@ var CountdownController = class extends Controller {
     completeLabel: { type: String, default: "" },
     announceText: { type: String, default: "" }
   };
+  static valueConstraints = {
+    interval: NUMBER_BOUNDS.positiveTimer
+  };
   static actions = ["pause", "reset", "resume", "start"];
   static events = ["complete", "tick"];
   #intervals = new SafeInterval();
   #intervalId = null;
-  /** Collapses a morph that swaps several render inputs at once into one re-derive. */
-  #resync = new MicrotaskCoalescer(() => this.#resyncToValues());
-  /**
-   * Whether `connect()` has run for this connection. Stimulus delivers Value
-   * callbacks ahead of it, while the run state is still the markup's own and not
-   * yet settled; `connect()` brings the status up to date once it is.
-   */
+  #armedPeriod = 0;
+  #resync = new MorphRenderWatcher(() => this.#resyncToValues());
   #connected = false;
-  /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */
   #reference = 0;
-  /** Amount (ms) captured at pause, so resume can restore the same display. */
   #pausedAmount = 0;
-  /**
-   * The amount the slots are currently showing, floored to the second they render.
-   * It lags {@link #currentAmount} by up to one tick, and it — not the live reading —
-   * is what a pause has to preserve: storing the fraction behind the display instead
-   * makes the first tick after a resume step by two units.
-   */
   #renderedAmount = 0;
+  #phase = "paused";
+  #valuesDirty = false;
+  #statusWrites = /* @__PURE__ */ new WeakMap();
   connect() {
     this.#connected = true;
-    this.#resync.activate();
+    this.#resync.observe(this.element);
+    this.#valuesDirty = false;
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
     this.#pausedAmount = this.#renderedAmount;
     const authored = this.element.getAttribute("data-state");
+    this.#phase = authored ?? "paused";
     const settled = authored === "complete" && this.#isSettled(amount);
     if (authored === null) {
       if (this.autostartValue && this.#isValidDeadline) this.start();
-      else this.element.setAttribute("data-state", "paused");
+      else this.#setPhase("paused");
     } else if (!settled) {
-      this.element.setAttribute("data-state", "paused");
+      this.#setPhase("paused");
       if (authored === "running") this.start();
     }
     this.#syncStatus();
   }
   disconnect() {
     this.#connected = false;
-    this.#resync.cancel();
+    this.#resync.disconnect();
     this.#intervals.clearAll();
     this.#intervalId = null;
   }
-  /** Re-derives the display when a morph swaps the deadline in place. */
+  daysTargetConnected() {
+    this.#resync.schedule();
+  }
+  daysTargetDisconnected() {
+    this.#resync.schedule();
+  }
+  hoursTargetConnected() {
+    this.#resync.schedule();
+  }
+  hoursTargetDisconnected() {
+    this.#resync.schedule();
+  }
+  minutesTargetConnected() {
+    this.#resync.schedule();
+  }
+  minutesTargetDisconnected() {
+    this.#resync.schedule();
+  }
+  secondsTargetConnected() {
+    this.#resync.schedule();
+  }
+  secondsTargetDisconnected() {
+    this.#resync.schedule();
+  }
+  statusTargetConnected() {
+    this.#resync.schedule();
+  }
+  statusTargetDisconnected(status) {
+    if (!this.statusTargets.includes(status) && this.#ownsStatus(status)) {
+      status.removeAttribute(this.#ownedStatus);
+      this.#statusWrites.delete(status);
+    }
+    this.#resync.schedule();
+  }
   deadlineValueChanged() {
+    this.#valuesDirty = true;
     this.#resync.schedule();
   }
-  /** Re-derives the display when a morph flips the counting direction in place. */
   directionValueChanged() {
+    this.#valuesDirty = true;
     this.#resync.schedule();
   }
-  /**
-   * Follows a completion label swapped in place by a morph.
-   *
-   * Render only: `complete` is neither dispatched nor announced again. The status
-   * changes only after the countdown has completed, and only while it still shows
-   * the text this controller wrote there and nothing else, so text or an element
-   * the consumer put in the slot stays. A change delivered ahead of `connect()` is
-   * left to `connect()`.
-   */
   completeLabelValueChanged() {
     if (this.#connected) this.#syncStatus();
   }
-  /**
-   * Keeps a status that still shows this controller's text, and nothing else, on
-   * what the run state calls for: the label in force while complete; otherwise the
-   * text is taken back, marker and all. A status holding anything else is the
-   * consumer's and is left alone, marker included.
-   *
-   * @stimeoRenderRoot
-   */
+  intervalValueChanged() {
+    if (this.#intervalId === null || this.#armedPeriod === this.#safeInterval) return;
+    this.#teardownInterval();
+    this.#armTick();
+  }
   #syncStatus() {
     if (!this.hasStatusTarget || !this.#ownsStatus(this.statusTarget)) return;
     if (this.#state === "complete") this.#writeStatus(this.statusTarget, this.completeLabelValue);
     else this.#releaseStatus(this.statusTarget);
   }
-  /**
-   * Points the anchor at the current `deadline` / `direction` and repaints.
-   *
-   * Render only: it starts no interval and emits no event, so a morph cannot make a
-   * paused timer run or replay a milestone. A running one needs no restart either —
-   * every tick reads the anchor, so moving it is enough. While paused the stored
-   * amount follows the new reading, or resume would continue from the old deadline.
-   * A completion the new reading no longer settles (a deadline moved forward, or a
-   * count turned `up`) is handed back paused, as `connect()` hands back a restored
-   * one, so `resume()` counts again; the completion text this controller wrote goes
-   * with it, from a status slot that still shows it and nothing else.
-   *
-   * @stimeoRenderRoot
-   */
   #resyncToValues() {
+    this.#setPhase(this.#state);
+    if (!this.#valuesDirty) {
+      this.#render(this.#renderedAmount);
+      this.#syncStatus();
+      return;
+    }
+    this.#valuesDirty = false;
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
-    if (this.#state === "complete" && !this.#isSettled(amount)) {
-      this.element.setAttribute("data-state", "paused");
-      this.#syncStatus();
+    if (this.#state === "running" && !this.#isValidDeadline) {
+      this.#teardownInterval();
+      this.#setPhase("paused");
     }
+    if (this.#state === "complete" && !this.#isSettled(amount)) this.#setPhase("paused");
     if (this.#state !== "running") this.#pausedAmount = this.#renderedAmount;
+    this.#syncStatus();
   }
-  /**
-   * Starts (or restarts after pause) ticking toward the deadline. Counting on from a
-   * completion takes this controller's completion text back out of the status.
-   */
   start() {
     if (this.#state === "running" || !this.#isValidDeadline) return;
     if (this.#isDown && this.#currentAmount() <= 0) {
@@ -230,36 +298,25 @@ var CountdownController = class extends Controller {
     }
     this.#runInterval();
   }
-  /** Pauses ticking, preserving the currently displayed amount. */
   pause() {
     if (this.#state !== "running") return;
     this.#pausedAmount = this.#renderedAmount;
     this.#teardownInterval();
-    this.element.setAttribute("data-state", "paused");
+    this.#setPhase("paused");
   }
-  /** Resumes from a pause, continuing from the preserved amount. */
   resume() {
     if (this.#state !== "paused" || !this.#isValidDeadline) return;
     const now = Date.now();
     this.#reference = this.#isDown ? now + this.#pausedAmount : now - this.#pausedAmount;
     this.start();
   }
-  /**
-   * Re-syncs to the deadline and clears any pause offset, **preserving the current
-   * run state**: a running timer keeps counting down from the reset amount, while a
-   * paused (or completed) one resets the displayed amount but stays paused until the
-   * user resumes — it never silently restarts. The run state is read from the DOM,
-   * not re-derived from the declarative `autostart` Value (which governs only markup
-   * that states no run state at all); re-deriving it would override a user's pause —
-   * the DOM, not a re-run of declarative config, is the source of truth.
-   */
   reset() {
     const wasRunning = this.#state === "running";
     this.#teardownInterval();
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
-    this.element.setAttribute("data-state", "paused");
+    this.#setPhase("paused");
     this.#syncStatus();
     if (wasRunning && this.#isValidDeadline) {
       this.#pausedAmount = 0;
@@ -268,29 +325,21 @@ var CountdownController = class extends Controller {
       this.#pausedAmount = this.#renderedAmount;
     }
   }
-  /**
-   * Schedules the repeating tick and marks the timer running. This is the one way
-   * into `running`, and a running timer keeps none of this controller's completion
-   * text in the status, so the status is settled here as on every other way out of
-   * `complete`: `start()` leaves a completion directly when `direction` flips to
-   * `up` and `start()` runs in the same task, ahead of the direction callback.
-   *
-   * @stimeoRuntimeOnly `interval` is the period of the one timer this call arms; the running state
-   *   it writes does not depend on a Value.
-   */
   #runInterval() {
-    this.element.setAttribute("data-state", "running");
+    this.#setPhase("running");
     this.#syncStatus();
-    this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);
+    this.#armTick();
+  }
+  #armTick() {
+    this.#armedPeriod = this.#safeInterval;
+    this.#intervalId = this.#intervals.set(() => this.#tick(), this.#armedPeriod);
   }
-  /** Cancels the repeating tick, if any. */
   #teardownInterval() {
     if (this.#intervalId !== null) {
       this.#intervals.clear(this.#intervalId);
       this.#intervalId = null;
     }
   }
-  /** Recomputes, renders, emits `tick`, and completes when a countdown hits 0. */
   #tick() {
     const amount = this.#currentAmount();
     this.#render(amount);
@@ -301,26 +350,14 @@ var CountdownController = class extends Controller {
       this.#complete();
     }
   }
-  /**
-   * Stops at zero, marks completion, writes the completion label, emits `complete`,
-   * and announces it.
-   *
-   * @stimeoRenderRoot
-   */
   #complete() {
     this.#teardownInterval();
     this.#render(0);
-    this.element.setAttribute("data-state", "complete");
+    this.#setPhase("complete");
     this.#claimStatus();
     this.dispatch("complete", { detail: {} });
     this.#announceCompletion();
   }
-  /**
-   * Writes the label in force into the status slot as this controller's text. An
-   * empty label puts no text there: it claims a slot that is already empty — no
-   * text and no element — empties one that is still this controller's, and leaves
-   * any other slot, the consumer's, alone.
-   */
   #claimStatus() {
     if (!this.hasStatusTarget) return;
     const status = this.statusTarget;
@@ -328,54 +365,42 @@ var CountdownController = class extends Controller {
     if (label === "" && !this.#isEmpty(status) && !this.#ownsStatus(status)) return;
     this.#writeStatus(status, label);
   }
-  /**
-   * Whether the status slot shows the text this controller wrote there and nothing
-   * else: the text matches the marker, and the slot holds no element. Writing the
-   * slot's text replaces every child node, so an element the consumer puts in the
-   * slot makes it theirs even while the text still matches. An empty marker
-   * matches the slot whenever it is empty.
-   */
   #ownsStatus(status) {
+    const held = this.#statusWrites.get(status);
+    if (!status.hasAttribute(this.#ownedStatus) && held && status.firstElementChild === null && (status.textContent === held.text || status.textContent === held.original))
+      return true;
     return status.getAttribute(this.#ownedStatus) === status.textContent && status.firstElementChild === null;
   }
-  /** Whether the status slot holds nothing at all: no text and no element. */
   #isEmpty(status) {
     return status.textContent === "" && status.firstElementChild === null;
   }
-  /** Puts `text` into the status slot and records it as this controller's. */
   #writeStatus(status, text) {
+    const original = this.#statusWrites.get(status)?.original ?? status.textContent ?? "";
+    this.#statusWrites.set(status, { original, text });
     if (status.textContent !== text) status.textContent = text;
-    status.setAttribute(this.#ownedStatus, text);
+    if (status.getAttribute(this.#ownedStatus) !== text)
+      status.setAttribute(this.#ownedStatus, text);
   }
-  /** Takes this controller's text out of the status slot, marker and all. */
   #releaseStatus(status) {
     status.textContent = "";
     status.removeAttribute(this.#ownedStatus);
+    this.#statusWrites.delete(status);
   }
-  /**
-   * Reads the completion out through the shared announcer.
-   *
-   * @stimeoRuntimeOnly `announceText` words the one announcement a completion makes.
-   */
   #announceCompletion() {
     announce(fillTemplate(this.announceTextValue, {}));
   }
-  /** Sets the time anchor from the `deadline` value. */
   #initReference() {
     this.#reference = Date.parse(this.deadlineValue);
   }
-  /** Whether a reading of `amount` leaves nothing to count: only a countdown at zero. */
   #isSettled(amount) {
     return this.#isDown && amount <= 0;
   }
-  /** Remaining (down) or elapsed (up) ms, never negative. */
   #currentAmount() {
     if (!this.#isValidDeadline) return 0;
     const now = Date.now();
     const raw = this.#isDown ? this.#reference - now : now - this.#reference;
     return Math.max(0, raw);
   }
-  /** Writes the amount into the day/hour/minute/second slots. */
   #render(amount) {
     const totalSeconds = Math.floor(amount / SECOND_MS);
     this.#renderedAmount = totalSeconds * SECOND_MS;
@@ -388,7 +413,6 @@ var CountdownController = class extends Controller {
     if (this.hasMinutesTarget) this.minutesTarget.textContent = this.#pad(minutes);
     if (this.hasSecondsTarget) this.secondsTarget.textContent = this.#pad(seconds);
   }
-  /** Zero-pads a unit to two digits. */
   #pad(unit) {
     return String(unit).padStart(2, "0");
   }
@@ -398,12 +422,23 @@ var CountdownController = class extends Controller {
   get #isValidDeadline() {
     return !Number.isNaN(this.#reference);
   }
-  /** Current lifecycle phase as reflected on `data-state`. */
+  #setPhase(phase) {
+    this.#phase = phase;
+    this.element.setAttribute("data-state", phase);
+  }
   get #state() {
-    return this.element.getAttribute("data-state") ?? "paused";
+    return this.element.getAttribute("data-state") ?? this.#phase;
+  }
+  get #safeInterval() {
+    return this.#numbers.read(
+      this,
+      "interval",
+      this.intervalValue,
+      _CountdownController.values.interval.default,
+      _CountdownController.valueConstraints.interval
+    );
   }
 };
 
 export { CountdownController };
-//# sourceMappingURL=countdown_controller.js.map
 //# sourceMappingURL=countdown_controller.js.map