stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/countdown_controller.d.ts

@@ -24,6 +24,22 @@ import { Controller } from '@hotwired/stimulus';
  * slot free of live-region semantics: with `announceText` set it would say the
  * same thing twice.
  *
+ * The slot is shared with the consumer. Completion writes the label in force and
+ * marks it with `data-<identifier>-owns-status`, whose value is that text; while
+ * the slot still shows that text and nothing else, the controller keeps it on the
+ * current `completeLabel` and takes it back once the timer leaves the complete
+ * state — `reset`, `start()` counting on from it, or a completion the new reading
+ * does not settle (a deadline moved forward or a count turned `up`, in place or
+ * before a restore). All but `start()` leave it `paused`, so `resume()` counts
+ * again.
+ * An empty label puts no text there, so it never displaces what the slot already
+ * holds; completing with one claims an empty slot — no text and no element — with
+ * an empty marker, which owns the slot whenever it is empty. Text the consumer put
+ * there stays theirs while it is there, and so does a slot they put an element in,
+ * whatever its text: the label is neither followed into it nor taken back out of
+ * it, and its marker stays, until the element is gone. Only a completion with a
+ * label writes over either.
+ *
  * `complete` dispatches `{}`; `tick` dispatches
  * `{ remaining: number, direction: "down" | "up" }`, where `remaining` is in
  * milliseconds.
@@ -37,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;
@@ -68,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;
@@ -75,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;
@@ -88,11 +115,57 @@ 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. */
     directionValueChanged(): void;
-    /** Starts (or restarts after pause) ticking toward the deadline. */
+    /**
+     * 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(): 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.
+     */
     start(): void;
     /** Pauses ticking, preserving the currently displayed amount. */
     pause(): void;

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,9 +158,13 @@ var SafeInterval = class extends TimerRegistry {
   }
 };
 
-// src/controllers/countdown_controller.ts
 var SECOND_MS = 1e3;
-var CountdownController = class extends Controller {
+var OWNED_STATUS = "owns-status";
+var CountdownController = class _CountdownController extends Controller {
+  #numbers = new NumberValueReader();
+  get #ownedStatus() {
+    return `data-${this.identifier}-${OWNED_STATUS}`;
+  }
   static targets = ["days", "hours", "minutes", "seconds", "status"];
   static values = {
     deadline: { type: String, default: "" },
@@ -109,72 +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());
-  /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */
+  #armedPeriod = 0;
+  #resync = new MorphRenderWatcher(() => this.#resyncToValues());
+  #connected = false;
   #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.#resync.activate();
+    this.#connected = true;
+    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();
-        return;
-      }
-      this.element.setAttribute("data-state", "paused");
-      return;
+      if (this.autostartValue && this.#isValidDeadline) this.start();
+      else this.#setPhase("paused");
+    } else if (!settled) {
+      this.#setPhase("paused");
+      if (authored === "running") this.start();
     }
-    if (authored === "complete" && this.#isDown && amount <= 0) {
-      return;
-    }
-    const wasRunning = authored === "running";
-    this.element.setAttribute("data-state", "paused");
-    if (wasRunning) this.start();
+    this.#syncStatus();
   }
   disconnect() {
-    this.#resync.cancel();
+    this.#connected = false;
+    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();
   }
-  /**
-   * 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.
-   */
+  completeLabelValueChanged() {
+    if (this.#connected) this.#syncStatus();
+  }
+  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);
+  }
   #resyncToValues() {
+    this.#setPhase(this.#state);
+    if (!this.#valuesDirty) {
+      this.#render(this.#renderedAmount);
+      this.#syncStatus();
+      return;
+    }
+    this.#valuesDirty = false;
     this.#initReference();
-    this.#render(this.#currentAmount());
+    const amount = this.#currentAmount();
+    this.#render(amount);
+    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. */
   start() {
     if (this.#state === "running" || !this.#isValidDeadline) return;
     if (this.#isDown && this.#currentAmount() <= 0) {
@@ -183,39 +298,26 @@ 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);
-    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {
-      this.statusTarget.textContent = "";
-    }
-    this.element.setAttribute("data-state", "paused");
+    this.#setPhase("paused");
+    this.#syncStatus();
     if (wasRunning && this.#isValidDeadline) {
       this.#pausedAmount = 0;
       this.start();
@@ -223,19 +325,21 @@ var CountdownController = class extends Controller {
       this.#pausedAmount = this.#renderedAmount;
     }
   }
-  /** Schedules the repeating tick and marks the timer running. */
   #runInterval() {
-    this.element.setAttribute("data-state", "running");
-    this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);
+    this.#setPhase("running");
+    this.#syncStatus();
+    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);
@@ -246,33 +350,57 @@ var CountdownController = class extends Controller {
       this.#complete();
     }
   }
-  /** Stops at zero, marks completion, announces it, and emits `complete`. */
   #complete() {
     this.#teardownInterval();
     this.#render(0);
-    this.element.setAttribute("data-state", "complete");
-    if (this.hasStatusTarget && this.completeLabelValue.length > 0) {
-      this.statusTarget.textContent = this.completeLabelValue;
-    }
+    this.#setPhase("complete");
+    this.#claimStatus();
     this.dispatch("complete", { detail: {} });
+    this.#announceCompletion();
+  }
+  #claimStatus() {
+    if (!this.hasStatusTarget) return;
+    const status = this.statusTarget;
+    const label = this.completeLabelValue;
+    if (label === "" && !this.#isEmpty(status) && !this.#ownsStatus(status)) return;
+    this.#writeStatus(status, label);
+  }
+  #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;
+  }
+  #isEmpty(status) {
+    return status.textContent === "" && status.firstElementChild === null;
+  }
+  #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;
+    if (status.getAttribute(this.#ownedStatus) !== text)
+      status.setAttribute(this.#ownedStatus, text);
+  }
+  #releaseStatus(status) {
+    status.textContent = "";
+    status.removeAttribute(this.#ownedStatus);
+    this.#statusWrites.delete(status);
+  }
+  #announceCompletion() {
     announce(fillTemplate(this.announceTextValue, {}));
   }
-  /** Sets the time anchor from the `deadline` value. */
   #initReference() {
     this.#reference = Date.parse(this.deadlineValue);
   }
-  /** Remaining (down) or elapsed (up) ms, never negative. */
+  #isSettled(amount) {
+    return this.#isDown && amount <= 0;
+  }
   #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.
-   *
-   * @stimeoRenderRoot
-   */
   #render(amount) {
     const totalSeconds = Math.floor(amount / SECOND_MS);
     this.#renderedAmount = totalSeconds * SECOND_MS;
@@ -285,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");
   }
@@ -295,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