stimeo-ui 0.3.0 → 0.5.0

package/dist/controllers/countdown_controller.js

@@ -2,6 +2,56 @@ 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;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/utils/microtask_coalescer.ts
+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;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -48,6 +98,7 @@ var SafeInterval = class extends TimerRegistry {
 };
 
 // src/controllers/countdown_controller.ts
+var SECOND_MS = 1e3;
 var CountdownController = class extends Controller {
   static targets = ["days", "hours", "minutes", "seconds", "status"];
   static values = {
@@ -55,34 +106,79 @@ var CountdownController = class extends Controller {
     interval: { type: Number, default: 1e3 },
     direction: { type: String, default: "down" },
     autostart: { type: Boolean, default: true },
-    completeLabel: { type: String, default: "" }
+    completeLabel: { type: String, default: "" },
+    announceText: { type: String, default: "" }
   };
   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). */
   #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;
   connect() {
+    this.#resync.activate();
     this.#initReference();
-    this.#render(this.#currentAmount());
-    if (this.autostartValue && this.#isValidDeadline) {
-      this.start();
-    } else {
+    const amount = this.#currentAmount();
+    this.#render(amount);
+    this.#pausedAmount = this.#renderedAmount;
+    const authored = this.element.getAttribute("data-state");
+    if (authored === null) {
+      if (this.autostartValue && this.#isValidDeadline) {
+        this.start();
+        return;
+      }
       this.element.setAttribute("data-state", "paused");
+      return;
     }
+    if (authored === "complete" && this.#isDown && amount <= 0) {
+      return;
+    }
+    const wasRunning = authored === "running";
+    this.element.setAttribute("data-state", "paused");
+    if (wasRunning) this.start();
   }
   disconnect() {
+    this.#resync.cancel();
     this.#intervals.clearAll();
     this.#intervalId = null;
   }
+  /** Re-derives the display when a morph swaps the deadline in place. */
+  deadlineValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Re-derives the display when a morph flips the counting direction in place. */
+  directionValueChanged() {
+    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.
+   */
+  #resyncToValues() {
+    this.#initReference();
+    this.#render(this.#currentAmount());
+    if (this.#state !== "running") this.#pausedAmount = this.#renderedAmount;
+  }
   /** Starts (or restarts after pause) ticking toward the deadline. */
   start() {
     if (this.#state === "running" || !this.#isValidDeadline) return;
     if (this.#isDown && this.#currentAmount() <= 0) {
-      this.#complete();
+      if (this.#state !== "complete") this.#complete();
       return;
     }
     this.#runInterval();
@@ -90,7 +186,7 @@ var CountdownController = class extends Controller {
   /** Pauses ticking, preserving the currently displayed amount. */
   pause() {
     if (this.#state !== "running") return;
-    this.#pausedAmount = this.#currentAmount();
+    this.#pausedAmount = this.#renderedAmount;
     this.#teardownInterval();
     this.element.setAttribute("data-state", "paused");
   }
@@ -106,8 +202,8 @@ var CountdownController = class extends Controller {
    * 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 only governs the
-   * initial state on connect); re-deriving it would override a user's pause —
+   * 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() {
@@ -116,13 +212,15 @@ var CountdownController = class extends Controller {
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
-    if (this.hasStatusTarget) this.statusTarget.textContent = "";
+    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {
+      this.statusTarget.textContent = "";
+    }
     this.element.setAttribute("data-state", "paused");
     if (wasRunning && this.#isValidDeadline) {
       this.#pausedAmount = 0;
       this.start();
     } else {
-      this.#pausedAmount = amount;
+      this.#pausedAmount = this.#renderedAmount;
     }
   }
   /** Schedules the repeating tick and marks the timer running. */
@@ -157,6 +255,7 @@ var CountdownController = class extends Controller {
       this.statusTarget.textContent = this.completeLabelValue;
     }
     this.dispatch("complete", { detail: {} });
+    announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Sets the time anchor from the `deadline` value. */
   #initReference() {
@@ -169,9 +268,14 @@ var CountdownController = class extends Controller {
     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. */
+  /**
+   * Writes the amount into the day/hour/minute/second slots.
+   *
+   * @stimeoRenderRoot
+   */
   #render(amount) {
-    const totalSeconds = Math.floor(amount / 1e3);
+    const totalSeconds = Math.floor(amount / SECOND_MS);
+    this.#renderedAmount = totalSeconds * SECOND_MS;
     const days = Math.floor(totalSeconds / 86400);
     const hours = Math.floor(totalSeconds % 86400 / 3600);
     const minutes = Math.floor(totalSeconds % 3600 / 60);

package/dist/controllers/countdown_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/safe_timeout.ts","../../src/controllers/countdown_controller.ts"],"names":[],"mappings":"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","file":"countdown_controller.js","sourcesContent":["/**\n * Self-cleaning timer registries shared by Stimeo controllers.\n *\n * Stimulus controllers frequently schedule `setTimeout` / `setInterval` work\n * (auto-dismiss, debouncing, polling). When the element leaves the DOM — a\n * Turbo Drive navigation, a Turbo Stream replacement, or any `disconnect()` —\n * orphaned timers keep firing against a detached controller, leaking memory and\n * mutating stale state. {@link SafeTimeout} and {@link SafeInterval} track every\n * timer they create so a single {@link TimerRegistry.clearAll | clearAll()} call\n * in `disconnect()` tears them all down.\n *\n * These are intentionally low-level primitives: they own *registration and\n * cleanup only*. Higher-level policy (pause/resume, remaining-time accounting)\n * stays in the individual controllers so per-widget semantics are not flattened\n * into a lowest-common-denominator helper.\n */\n\n/**\n * Shared registry bookkeeping for the timeout/interval variants.\n *\n * Subclasses provide the scheduling primitive ({@link schedule}) and its matching\n * canceller ({@link cancel}); this base owns the set of live ids plus the\n * per-id and bulk teardown shared by both.\n */\nabstract class TimerRegistry {\n  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */\n  protected readonly ids = new Set<number>();\n\n  /** Schedules the underlying platform timer and returns its id. */\n  protected abstract schedule(callback: () => void, delay: number): number;\n\n  /** Cancels the underlying platform timer for `id`. */\n  protected abstract cancel(id: number): void;\n\n  /**\n   * Cancels a single tracked timer.\n   *\n   * No-ops if the id is unknown (already cleared, fired, or never owned by this\n   * registry), so callers can clear defensively without guarding.\n   */\n  clear(id: number): void {\n    if (this.ids.delete(id)) {\n      this.cancel(id);\n    }\n  }\n\n  /**\n   * Cancels every tracked timer. Call this from a controller's `disconnect()`\n   * to guarantee no timer outlives the element.\n   */\n  clearAll(): void {\n    for (const id of this.ids) {\n      this.cancel(id);\n    }\n    this.ids.clear();\n  }\n\n  /** Number of timers currently tracked (pending). */\n  get size(): number {\n    return this.ids.size;\n  }\n}\n\n/**\n * `setTimeout` wrapper that auto-forgets each timer once it fires and supports\n * bulk teardown on disconnect.\n *\n * @example\n * ```ts\n * #timers = new SafeTimeout();\n *\n * connect() {\n *   this.#timers.set(() => this.dismiss(), 5000);\n * }\n *\n * disconnect() {\n *   this.#timers.clearAll();\n * }\n * ```\n */\nexport class SafeTimeout extends TimerRegistry {\n  /**\n   * Schedules `callback` after `delay` ms and returns the timer id.\n   *\n   * The id is removed from the registry automatically when the timeout fires,\n   * so {@link TimerRegistry.size | size} reflects only still-pending timers.\n   */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(() => {\n      this.ids.delete(id);\n      callback();\n    }, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setTimeout(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearTimeout(id);\n  }\n}\n\n/**\n * `setInterval` wrapper that tracks every interval for bulk teardown on\n * disconnect. Unlike {@link SafeTimeout}, intervals are retained until they are\n * explicitly cleared because they fire repeatedly.\n *\n * @example\n * ```ts\n * #intervals = new SafeInterval();\n *\n * connect() {\n *   this.#intervals.set(() => this.tick(), 1000);\n * }\n *\n * disconnect() {\n *   this.#intervals.clearAll();\n * }\n * ```\n */\nexport class SafeInterval extends TimerRegistry {\n  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(callback, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setInterval(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearInterval(id);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { SafeInterval } from \"../utils/safe_timeout\";\n\n/**\n * Headless countdown/timer behavior built on the live-region `role=\"timer\"`\n * practice (no dedicated APG pattern).\n *\n * Markup contract (identifier: `stimeo--countdown`):\n *   <div data-controller=\"stimeo--countdown\" role=\"timer\" aria-live=\"off\"\n *        data-stimeo--countdown-deadline-value=\"2026-12-31T23:59:59+09:00\"\n *        data-action=\"countdown:pause->stimeo--countdown#pause\n *                     countdown:resume->stimeo--countdown#resume\">\n *     <span data-stimeo--countdown-target=\"days\">0</span>\n *     <span data-stimeo--countdown-target=\"hours\">00</span>\n *     <span data-stimeo--countdown-target=\"minutes\">00</span>\n *     <span data-stimeo--countdown-target=\"seconds\">00</span>\n *   </div>\n *\n * Computes the time remaining to `deadline` (or elapsed since it, in\n * `direction=\"up\"`), formats it into the day/hour/minute/second slots, and ticks\n * on `interval`. `aria-live=\"off\"` is recommended so the timer is not announced\n * every second; only the milestone (completion) is surfaced — via the optional\n * `status` live region when a `completeLabel` is provided, or the `complete`\n * event for the consumer to handle.\n *\n * @remarks\n * Behavior only — slot text is updated, not styled. Pause/resume shifts an\n * internal time anchor so the displayed amount is preserved across a pause. The\n * interval is owned by {@link SafeInterval} and torn down on `disconnect()`\n * (Turbo navigation included).\n */\nexport class CountdownController extends Controller<HTMLElement> {\n  static override targets = [\"days\", \"hours\", \"minutes\", \"seconds\", \"status\"];\n  static override values = {\n    deadline: { type: String, default: \"\" },\n    interval: { type: Number, default: 1000 },\n    direction: { type: String, default: \"down\" },\n    autostart: { type: Boolean, default: true },\n    completeLabel: { type: String, default: \"\" },\n  };\n  static actions = [\"pause\", \"reset\", \"resume\", \"start\"] as const;\n  static events = [\"complete\", \"tick\"] as const;\n\n  declare readonly daysTarget: HTMLElement;\n  declare readonly hoursTarget: HTMLElement;\n  declare readonly minutesTarget: HTMLElement;\n  declare readonly secondsTarget: HTMLElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly hasDaysTarget: boolean;\n  declare readonly hasHoursTarget: boolean;\n  declare readonly hasMinutesTarget: boolean;\n  declare readonly hasSecondsTarget: boolean;\n  declare readonly hasStatusTarget: boolean;\n\n  declare deadlineValue: string;\n  declare intervalValue: number;\n  declare directionValue: string;\n  declare autostartValue: boolean;\n  declare completeLabelValue: string;\n\n  readonly #intervals = new SafeInterval();\n  #intervalId: number | null = null;\n\n  /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */\n  #reference = 0;\n  /** Amount (ms) captured at pause, so resume can restore the same display. */\n  #pausedAmount = 0;\n\n  override connect(): void {\n    this.#initReference();\n    this.#render(this.#currentAmount());\n    if (this.autostartValue && this.#isValidDeadline) {\n      this.start();\n    } else {\n      this.element.setAttribute(\"data-state\", \"paused\");\n    }\n  }\n\n  override disconnect(): void {\n    this.#intervals.clearAll();\n    this.#intervalId = null;\n  }\n\n  /** Starts (or restarts after pause) ticking toward the deadline. */\n  start(): void {\n    if (this.#state === \"running\" || !this.#isValidDeadline) return;\n    if (this.#isDown && this.#currentAmount() <= 0) {\n      this.#complete();\n      return;\n    }\n    this.#runInterval();\n  }\n\n  /** Pauses ticking, preserving the currently displayed amount. */\n  pause(): void {\n    if (this.#state !== \"running\") return;\n    this.#pausedAmount = this.#currentAmount();\n    this.#teardownInterval();\n    this.element.setAttribute(\"data-state\", \"paused\");\n  }\n\n  /** Resumes from a pause, continuing from the preserved amount. */\n  resume(): void {\n    if (this.#state !== \"paused\" || !this.#isValidDeadline) return;\n    const now = Date.now();\n    this.#reference = this.#isDown ? now + this.#pausedAmount : now - this.#pausedAmount;\n    this.start();\n  }\n\n  /**\n   * Re-syncs to the deadline and clears any pause offset, **preserving the current\n   * run state**: a running timer keeps counting down from the reset amount, while a\n   * paused (or completed) one resets the displayed amount but stays paused until the\n   * user resumes — it never silently restarts. The run state is read from the DOM,\n   * not re-derived from the declarative `autostart` Value (which only governs the\n   * initial state on connect); re-deriving it would override a user's pause —\n   * the DOM, not a re-run of declarative config, is the source of truth.\n   */\n  reset(): void {\n    const wasRunning = this.#state === \"running\";\n    this.#teardownInterval();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // A prior complete() may have written a completion message into the status live\n    // region; clear it so a reset timer does not keep showing (and announcing to a\n    // screen reader) the stale \"finished\" text.\n    if (this.hasStatusTarget) this.statusTarget.textContent = \"\";\n    // teardownInterval() leaves data-state untouched; drop any lingering \"running\" to a\n    // resting \"paused\" so start() (a no-op while \"running\") can re-arm when we resume.\n    this.element.setAttribute(\"data-state\", \"paused\");\n    if (wasRunning && this.#isValidDeadline) {\n      // Was counting down: re-arm and keep running from the reset amount.\n      this.#pausedAmount = 0;\n      this.start();\n    } else {\n      // Was paused/complete: hold at the reset amount and wait for the user to resume.\n      // Remember the amount so resume() restores it instead of snapping the anchor to 0.\n      this.#pausedAmount = amount;\n    }\n  }\n\n  /** Schedules the repeating tick and marks the timer running. */\n  #runInterval(): void {\n    this.element.setAttribute(\"data-state\", \"running\");\n    this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);\n  }\n\n  /** Cancels the repeating tick, if any. */\n  #teardownInterval(): void {\n    if (this.#intervalId !== null) {\n      this.#intervals.clear(this.#intervalId);\n      this.#intervalId = null;\n    }\n  }\n\n  /** Recomputes, renders, emits `tick`, and completes when a countdown hits 0. */\n  #tick(): void {\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // `remaining` is the displayed amount (time left when counting down, elapsed\n    // when counting up); `direction` lets consumers disambiguate the two.\n    this.dispatch(\"tick\", {\n      detail: { remaining: amount, direction: this.#isDown ? \"down\" : \"up\" },\n    });\n    if (this.#isDown && this.#reference - Date.now() <= 0) {\n      this.#complete();\n    }\n  }\n\n  /** Stops at zero, marks completion, announces it, and emits `complete`. */\n  #complete(): void {\n    this.#teardownInterval();\n    this.#render(0);\n    this.element.setAttribute(\"data-state\", \"complete\");\n    if (this.hasStatusTarget && this.completeLabelValue.length > 0) {\n      this.statusTarget.textContent = this.completeLabelValue;\n    }\n    this.dispatch(\"complete\", { detail: {} });\n  }\n\n  /** Sets the time anchor from the `deadline` value. */\n  #initReference(): void {\n    this.#reference = Date.parse(this.deadlineValue);\n  }\n\n  /** Remaining (down) or elapsed (up) ms, never negative. */\n  #currentAmount(): number {\n    if (!this.#isValidDeadline) return 0;\n    const now = Date.now();\n    const raw = this.#isDown ? this.#reference - now : now - this.#reference;\n    return Math.max(0, raw);\n  }\n\n  /** Writes the amount into the day/hour/minute/second slots. */\n  #render(amount: number): void {\n    const totalSeconds = Math.floor(amount / 1000);\n    const days = Math.floor(totalSeconds / 86400);\n    const hours = Math.floor((totalSeconds % 86400) / 3600);\n    const minutes = Math.floor((totalSeconds % 3600) / 60);\n    const seconds = totalSeconds % 60;\n\n    if (this.hasDaysTarget) this.daysTarget.textContent = String(days);\n    if (this.hasHoursTarget) this.hoursTarget.textContent = this.#pad(hours);\n    if (this.hasMinutesTarget) this.minutesTarget.textContent = this.#pad(minutes);\n    if (this.hasSecondsTarget) this.secondsTarget.textContent = this.#pad(seconds);\n  }\n\n  /** Zero-pads a unit to two digits. */\n  #pad(unit: number): string {\n    return String(unit).padStart(2, \"0\");\n  }\n\n  get #isDown(): boolean {\n    return this.directionValue !== \"up\";\n  }\n\n  get #isValidDeadline(): boolean {\n    return !Number.isNaN(this.#reference);\n  }\n\n  /** Current lifecycle phase as reflected on `data-state`. */\n  get #state(): string {\n    return this.element.getAttribute(\"data-state\") ?? \"paused\";\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/microtask_coalescer.ts","../../src/utils/safe_timeout.ts","../../src/controllers/countdown_controller.ts"],"names":[],"mappings":"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","file":"countdown_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","/**\n * Collapses many Stimulus lifecycle callbacks from one DOM mutation into a\n * single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element and\n * `<name>ValueChanged` once per changed attribute. Replacing a list of N options\n * or morphing several render Values therefore delivers N callbacks — but the\n * useful unit of work is \"reconcile against the resulting declarative input\",\n * once, after the batch has settled. Every controller with reconcilable targets\n * or render Values needs the same shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers initial target and Value callbacks\n *   ahead of `connect()`. Reconciling there would compute output against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","/**\n * Self-cleaning timer registries shared by Stimeo controllers.\n *\n * Stimulus controllers frequently schedule `setTimeout` / `setInterval` work\n * (auto-dismiss, debouncing, polling). When the element leaves the DOM — a\n * Turbo Drive navigation, a Turbo Stream replacement, or any `disconnect()` —\n * orphaned timers keep firing against a detached controller, leaking memory and\n * mutating stale state. {@link SafeTimeout} and {@link SafeInterval} track every\n * timer they create so a single {@link TimerRegistry.clearAll | clearAll()} call\n * in `disconnect()` tears them all down.\n *\n * These are intentionally low-level primitives: they own *registration and\n * cleanup only*. Higher-level policy (pause/resume, remaining-time accounting)\n * stays in the individual controllers so per-widget semantics are not flattened\n * into a lowest-common-denominator helper.\n */\n\n/**\n * Shared registry bookkeeping for the timeout/interval variants.\n *\n * Subclasses provide the scheduling primitive ({@link schedule}) and its matching\n * canceller ({@link cancel}); this base owns the set of live ids plus the\n * per-id and bulk teardown shared by both.\n */\nabstract class TimerRegistry {\n  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */\n  protected readonly ids = new Set<number>();\n\n  /** Schedules the underlying platform timer and returns its id. */\n  protected abstract schedule(callback: () => void, delay: number): number;\n\n  /** Cancels the underlying platform timer for `id`. */\n  protected abstract cancel(id: number): void;\n\n  /**\n   * Cancels a single tracked timer.\n   *\n   * No-ops if the id is unknown (already cleared, fired, or never owned by this\n   * registry), so callers can clear defensively without guarding.\n   */\n  clear(id: number): void {\n    if (this.ids.delete(id)) {\n      this.cancel(id);\n    }\n  }\n\n  /**\n   * Cancels every tracked timer. Call this from a controller's `disconnect()`\n   * to guarantee no timer outlives the element.\n   */\n  clearAll(): void {\n    for (const id of this.ids) {\n      this.cancel(id);\n    }\n    this.ids.clear();\n  }\n\n  /** Number of timers currently tracked (pending). */\n  get size(): number {\n    return this.ids.size;\n  }\n}\n\n/**\n * `setTimeout` wrapper that auto-forgets each timer once it fires and supports\n * bulk teardown on disconnect.\n *\n * @example\n * ```ts\n * #timers = new SafeTimeout();\n *\n * connect() {\n *   this.#timers.set(() => this.dismiss(), 5000);\n * }\n *\n * disconnect() {\n *   this.#timers.clearAll();\n * }\n * ```\n */\nexport class SafeTimeout extends TimerRegistry {\n  /**\n   * Schedules `callback` after `delay` ms and returns the timer id.\n   *\n   * The id is removed from the registry automatically when the timeout fires,\n   * so {@link TimerRegistry.size | size} reflects only still-pending timers.\n   */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(() => {\n      this.ids.delete(id);\n      callback();\n    }, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setTimeout(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearTimeout(id);\n  }\n}\n\n/**\n * `setInterval` wrapper that tracks every interval for bulk teardown on\n * disconnect. Unlike {@link SafeTimeout}, intervals are retained until they are\n * explicitly cleared because they fire repeatedly.\n *\n * @example\n * ```ts\n * #intervals = new SafeInterval();\n *\n * connect() {\n *   this.#intervals.set(() => this.tick(), 1000);\n * }\n *\n * disconnect() {\n *   this.#intervals.clearAll();\n * }\n * ```\n */\nexport class SafeInterval extends TimerRegistry {\n  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(callback, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setInterval(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearInterval(id);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\nimport { SafeInterval } from \"../utils/safe_timeout\";\n\n/** Display granularity: the slots render whole seconds, so amounts snap to these. */\nconst SECOND_MS = 1000;\n\n/**\n * Headless countdown/timer behavior built on the live-region `role=\"timer\"`\n * practice (no dedicated APG pattern).\n *\n * Markup contract (identifier: `stimeo--countdown`):\n *   <div data-controller=\"stimeo--countdown\" role=\"timer\" aria-live=\"off\"\n *        data-stimeo--countdown-deadline-value=\"2026-12-31T23:59:59+09:00\"\n *        data-action=\"countdown:pause->stimeo--countdown#pause\n *                     countdown:resume->stimeo--countdown#resume\">\n *     <span data-stimeo--countdown-target=\"days\">0</span>\n *     <span data-stimeo--countdown-target=\"hours\">00</span>\n *     <span data-stimeo--countdown-target=\"minutes\">00</span>\n *     <span data-stimeo--countdown-target=\"seconds\">00</span>\n *   </div>\n *\n * Computes the time remaining to `deadline` (or elapsed since it, in\n * `direction=\"up\"`), formats it into the day/hour/minute/second slots, and ticks\n * on `interval`. `aria-live=\"off\"` is recommended so the timer is not announced\n * every second; only the milestone (completion) is surfaced — read out through\n * `announceText`, shown in the optional `status` slot when a `completeLabel` is\n * provided, and handed to the consumer as the `complete` event. Keep the `status`\n * slot free of live-region semantics: with `announceText` set it would say the\n * same thing twice.\n *\n * @remarks\n * Behavior only — slot text is updated, not styled. Pause/resume shifts an\n * internal time anchor so the displayed amount is preserved across a pause, down\n * to the second actually on screen: resuming continues from that reading rather\n * than from the fraction behind it, so the first tick after a resume steps by one\n * unit like every other. The run state lives in `data-state` and the markup is its\n * source of truth — `autostart` only decides the state of a timer whose markup does\n * not carry one. The interval is owned by {@link SafeInterval} and torn down on\n * `disconnect()` (Turbo navigation included); nothing else needs carrying across,\n * because every reading is re-derived from `deadline` and the wall clock.\n */\nexport class CountdownController extends Controller<HTMLElement> {\n  static override targets = [\"days\", \"hours\", \"minutes\", \"seconds\", \"status\"];\n  static override values = {\n    deadline: { type: String, default: \"\" },\n    interval: { type: Number, default: 1000 },\n    direction: { type: String, default: \"down\" },\n    autostart: { type: Boolean, default: true },\n    completeLabel: { type: String, default: \"\" },\n    announceText: { type: String, default: \"\" },\n  };\n  static actions = [\"pause\", \"reset\", \"resume\", \"start\"] as const;\n  static events = [\"complete\", \"tick\"] as const;\n\n  declare readonly daysTarget: HTMLElement;\n  declare readonly hoursTarget: HTMLElement;\n  declare readonly minutesTarget: HTMLElement;\n  declare readonly secondsTarget: HTMLElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly hasDaysTarget: boolean;\n  declare readonly hasHoursTarget: boolean;\n  declare readonly hasMinutesTarget: boolean;\n  declare readonly hasSecondsTarget: boolean;\n  declare readonly hasStatusTarget: boolean;\n\n  declare deadlineValue: string;\n  declare intervalValue: number;\n  declare directionValue: string;\n  declare autostartValue: boolean;\n  declare completeLabelValue: string;\n  declare announceTextValue: string;\n\n  readonly #intervals = new SafeInterval();\n  #intervalId: number | null = null;\n  /** Collapses a morph that swaps several render inputs at once into one re-derive. */\n  readonly #resync = new MicrotaskCoalescer(() => this.#resyncToValues());\n\n  /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */\n  #reference = 0;\n  /** Amount (ms) captured at pause, so resume can restore the same display. */\n  #pausedAmount = 0;\n  /**\n   * The amount the slots are currently showing, floored to the second they render.\n   * It lags {@link currentAmount} by up to one tick, and it — not the live reading —\n   * is what a pause has to preserve: storing the fraction behind the display instead\n   * makes the first tick after a resume step by two units.\n   */\n  #renderedAmount = 0;\n\n  override connect(): void {\n    this.#resync.activate();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // Remember what is on screen so resume() continues from it instead of snapping\n    // the anchor to now (which would settle a countdown at once).\n    this.#pausedAmount = this.#renderedAmount;\n\n    const authored = this.element.getAttribute(\"data-state\");\n    if (authored === null) {\n      // Nothing to honor: this is the declarative first render, which is the only\n      // thing `autostart` governs.\n      if (this.autostartValue && this.#isValidDeadline) {\n        this.start();\n        return;\n      }\n      this.element.setAttribute(\"data-state\", \"paused\");\n      return;\n    }\n    if (authored === \"complete\" && this.#isDown && amount <= 0) {\n      // Still settled, so the milestone stands. Dropping it to the resting state\n      // would let a later resume() cross zero a second time and announce the same\n      // completion again; only a deadline moved forward re-arms it.\n      return;\n    }\n    // A pause the user made survives the round trip, but nothing carries a live timer\n    // across it — a restored \"running\" has to be re-armed here or it renders once and\n    // freezes, because start() is a no-op while the attribute still says \"running\".\n    const wasRunning = authored === \"running\";\n    this.element.setAttribute(\"data-state\", \"paused\");\n    if (wasRunning) this.start();\n  }\n\n  override disconnect(): void {\n    this.#resync.cancel();\n    this.#intervals.clearAll();\n    this.#intervalId = null;\n  }\n\n  /** Re-derives the display when a morph swaps the deadline in place. */\n  deadlineValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Re-derives the display when a morph flips the counting direction in place. */\n  directionValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /**\n   * Points the anchor at the current `deadline` / `direction` and repaints.\n   *\n   * Render only: it starts no interval and emits no event, so a morph cannot make a\n   * paused timer run or replay a milestone. A running one needs no restart either —\n   * every tick reads the anchor, so moving it is enough. While paused the stored\n   * amount follows the new reading, or resume would continue from the old deadline.\n   */\n  #resyncToValues(): void {\n    this.#initReference();\n    this.#render(this.#currentAmount());\n    if (this.#state !== \"running\") this.#pausedAmount = this.#renderedAmount;\n  }\n\n  /** Starts (or restarts after pause) ticking toward the deadline. */\n  start(): void {\n    if (this.#state === \"running\" || !this.#isValidDeadline) return;\n    if (this.#isDown && this.#currentAmount() <= 0) {\n      // Already settled — a restored snapshot keeps data-state=\"complete\". The\n      // milestone was announced in the visit that reached zero, so completing again\n      // here would re-emit `complete` on every reconnect.\n      if (this.#state !== \"complete\") this.#complete();\n      return;\n    }\n    this.#runInterval();\n  }\n\n  /** Pauses ticking, preserving the currently displayed amount. */\n  pause(): void {\n    if (this.#state !== \"running\") return;\n    this.#pausedAmount = this.#renderedAmount;\n    this.#teardownInterval();\n    this.element.setAttribute(\"data-state\", \"paused\");\n  }\n\n  /** Resumes from a pause, continuing from the preserved amount. */\n  resume(): void {\n    if (this.#state !== \"paused\" || !this.#isValidDeadline) return;\n    const now = Date.now();\n    this.#reference = this.#isDown ? now + this.#pausedAmount : now - this.#pausedAmount;\n    this.start();\n  }\n\n  /**\n   * Re-syncs to the deadline and clears any pause offset, **preserving the current\n   * run state**: a running timer keeps counting down from the reset amount, while a\n   * paused (or completed) one resets the displayed amount but stays paused until the\n   * user resumes — it never silently restarts. The run state is read from the DOM,\n   * not re-derived from the declarative `autostart` Value (which governs only markup\n   * that states no run state at all); re-deriving it would override a user's pause —\n   * the DOM, not a re-run of declarative config, is the source of truth.\n   */\n  reset(): void {\n    const wasRunning = this.#state === \"running\";\n    this.#teardownInterval();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // A prior complete() may have written a completion message into the status\n    // slot; clear it so a reset timer does not keep showing the stale \"finished\"\n    // text. Only that message is ours to take back — `complete()` declines to write\n    // when `completeLabel` is empty, so anything else in there belongs to the\n    // consumer.\n    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {\n      this.statusTarget.textContent = \"\";\n    }\n    // teardownInterval() leaves data-state untouched; drop any lingering \"running\" to a\n    // resting \"paused\" so start() (a no-op while \"running\") can re-arm when we resume.\n    this.element.setAttribute(\"data-state\", \"paused\");\n    if (wasRunning && this.#isValidDeadline) {\n      // Was counting down: re-arm and keep running from the reset amount.\n      this.#pausedAmount = 0;\n      this.start();\n    } else {\n      // Was paused/complete: hold at the reset amount and wait for the user to resume.\n      // Remember what is on screen so resume() restores it instead of snapping the\n      // anchor to 0.\n      this.#pausedAmount = this.#renderedAmount;\n    }\n  }\n\n  /** Schedules the repeating tick and marks the timer running. */\n  #runInterval(): void {\n    this.element.setAttribute(\"data-state\", \"running\");\n    this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);\n  }\n\n  /** Cancels the repeating tick, if any. */\n  #teardownInterval(): void {\n    if (this.#intervalId !== null) {\n      this.#intervals.clear(this.#intervalId);\n      this.#intervalId = null;\n    }\n  }\n\n  /** Recomputes, renders, emits `tick`, and completes when a countdown hits 0. */\n  #tick(): void {\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // `remaining` is the displayed amount (time left when counting down, elapsed\n    // when counting up); `direction` lets consumers disambiguate the two.\n    this.dispatch(\"tick\", {\n      detail: { remaining: amount, direction: this.#isDown ? \"down\" : \"up\" },\n    });\n    if (this.#isDown && this.#reference - Date.now() <= 0) {\n      this.#complete();\n    }\n  }\n\n  /** Stops at zero, marks completion, announces it, and emits `complete`. */\n  #complete(): void {\n    this.#teardownInterval();\n    this.#render(0);\n    this.element.setAttribute(\"data-state\", \"complete\");\n    if (this.hasStatusTarget && this.completeLabelValue.length > 0) {\n      this.statusTarget.textContent = this.completeLabelValue;\n    }\n    this.dispatch(\"complete\", { detail: {} });\n    // Reaching zero is the transition; the ticking numbers in between are state\n    // the consumer can see, and reading each one would be unusable.\n    announce(fillTemplate(this.announceTextValue, {}));\n  }\n\n  /** Sets the time anchor from the `deadline` value. */\n  #initReference(): void {\n    this.#reference = Date.parse(this.deadlineValue);\n  }\n\n  /** Remaining (down) or elapsed (up) ms, never negative. */\n  #currentAmount(): number {\n    if (!this.#isValidDeadline) return 0;\n    const now = Date.now();\n    const raw = this.#isDown ? this.#reference - now : now - this.#reference;\n    return Math.max(0, raw);\n  }\n\n  /**\n   * Writes the amount into the day/hour/minute/second slots.\n   *\n   * @stimeoRenderRoot\n   */\n  #render(amount: number): void {\n    const totalSeconds = Math.floor(amount / SECOND_MS);\n    this.#renderedAmount = totalSeconds * SECOND_MS;\n    const days = Math.floor(totalSeconds / 86400);\n    const hours = Math.floor((totalSeconds % 86400) / 3600);\n    const minutes = Math.floor((totalSeconds % 3600) / 60);\n    const seconds = totalSeconds % 60;\n\n    if (this.hasDaysTarget) this.daysTarget.textContent = String(days);\n    if (this.hasHoursTarget) this.hoursTarget.textContent = this.#pad(hours);\n    if (this.hasMinutesTarget) this.minutesTarget.textContent = this.#pad(minutes);\n    if (this.hasSecondsTarget) this.secondsTarget.textContent = this.#pad(seconds);\n  }\n\n  /** Zero-pads a unit to two digits. */\n  #pad(unit: number): string {\n    return String(unit).padStart(2, \"0\");\n  }\n\n  get #isDown(): boolean {\n    return this.directionValue !== \"up\";\n  }\n\n  get #isValidDeadline(): boolean {\n    return !Number.isNaN(this.#reference);\n  }\n\n  /** Current lifecycle phase as reflected on `data-state`. */\n  get #state(): string {\n    return this.element.getAttribute(\"data-state\") ?? \"paused\";\n  }\n}\n"]}

package/dist/controllers/date_range_picker_controller.d.ts

@@ -67,10 +67,13 @@ declare class DateRangePickerController extends Controller<HTMLElement> {
     readonly hasEndFieldTarget: boolean;
     minValue: string;
     maxValue: string;
-    /** Seeds the range from any pre-filled hidden fields and renders the grid. */
     connect(): void;
     /** Cancels any pending deferred focus so it never fires on a detached element. */
     disconnect(): void;
+    /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+    minValueChanged(): void;
+    /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+    maxValueChanged(): void;
     /** Navigates to the previous month. */
     prev(event?: Event): void;
     /** Navigates to the next month. */

package/dist/controllers/date_range_picker_controller.js

@@ -52,6 +52,39 @@ function toISOMonthString(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
 
+// src/utils/microtask_coalescer.ts
+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;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -129,7 +162,15 @@ var DateRangePickerController = class extends Controller {
   /** Deferred focus after an async month transition (cancelled on teardown). */
   #focusTimer = new SafeTimeout();
   /** Seeds the range from any pre-filled hidden fields and renders the grid. */
+  /**
+   * Collapses a morph that swaps render inputs into one repaint, and refuses the
+   * pass Stimulus delivers before `connect()`.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
   connect() {
+    this.#repaint.activate();
     this.#startDate = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
     this.#endDate = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
     const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
@@ -140,8 +181,17 @@ var DateRangePickerController = class extends Controller {
   }
   /** Cancels any pending deferred focus so it never fires on a detached element. */
   disconnect() {
+    this.#repaint.cancel();
     this.#focusTimer.clearAll();
   }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Navigates to the previous month. */
   prev(event) {
     event?.preventDefault();
@@ -305,7 +355,11 @@ var DateRangePickerController = class extends Controller {
     this.#focusedDate = target;
     this.#render();
   }
-  /** Builds the six-week grid and binds range/roving/disabled state per cell. */
+  /**
+   * Builds the six-week grid and binds range/roving/disabled state per cell.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;