stimeo-ui 0.3.0 → 0.4.0

data/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() {
@@ -171,7 +270,8 @@ var CountdownController = class extends Controller {
   }
   /** Writes the amount into the day/hour/minute/second slots. */
   #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);

data/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();

data/dist/controllers/dialog_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/dialog_controller.ts
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/escape_layer.ts
 var EscapeLayer = class _EscapeLayer {
   static #registries = /* @__PURE__ */ new WeakMap();
@@ -135,7 +164,7 @@ var FocusTrap = class {
     }
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     const onEscape = this.#options.onEscape;
     if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
@@ -152,7 +181,7 @@ var FocusTrap = class {
     this.#activeState = false;
     this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     if (this.#scrollLocked) {
       document.body.style.overflow = this.#previousBodyOverflow;
       this.#scrollLocked = false;
@@ -176,9 +205,7 @@ var FocusTrap = class {
    * untouched (restore-open designs reopen against a clean baseline), and focus
    * is left alone mid-navigation. The listener lives only while active.
    */
-  #onBeforeCache = () => {
-    this.deactivate({ restoreFocus: false });
-  };
+  #beforeCache = new BeforeCacheReset(() => this.deactivate({ restoreFocus: false }));
   /**
    * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
    * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of

data/dist/controllers/drawer_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/drawer_controller.ts
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/escape_layer.ts
 var EscapeLayer = class _EscapeLayer {
   static #registries = /* @__PURE__ */ new WeakMap();
@@ -135,7 +164,7 @@ var FocusTrap = class {
     }
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     const onEscape = this.#options.onEscape;
     if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
@@ -152,7 +181,7 @@ var FocusTrap = class {
     this.#activeState = false;
     this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     if (this.#scrollLocked) {
       document.body.style.overflow = this.#previousBodyOverflow;
       this.#scrollLocked = false;
@@ -176,9 +205,7 @@ var FocusTrap = class {
    * untouched (restore-open designs reopen against a clean baseline), and focus
    * is left alone mid-navigation. The listener lives only while active.
    */
-  #onBeforeCache = () => {
-    this.deactivate({ restoreFocus: false });
-  };
+  #beforeCache = new BeforeCacheReset(() => this.deactivate({ restoreFocus: false }));
   /**
    * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
    * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of

data/dist/controllers/empty_state_controller.js

@@ -1,11 +1,31 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/empty_state_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/controllers/empty_state_controller.ts
 var EmptyStateController = class extends Controller {
   static targets = ["list", "empty"];
   static values = {
     itemSelector: { type: String, default: "" },
-    announce: { type: Boolean, default: false }
+    announceText: { type: String, default: "" },
+    announceFilledText: { type: String, default: "" }
   };
   static events = ["change"];
   #observer = null;
@@ -13,10 +33,6 @@ var EmptyStateController = class extends Controller {
   #empty = null;
   connect() {
     if (!this.hasListTarget) return;
-    if (this.announceValue && this.hasEmptyTarget && !this.#isLiveRegion(this.emptyTarget)) {
-      this.emptyTarget.setAttribute("role", "status");
-      this.emptyTarget.setAttribute("aria-live", "polite");
-    }
     if (typeof MutationObserver !== "undefined") {
       this.#observer = new MutationObserver(() => this.#apply());
       this.#observer.observe(this.listTarget, { childList: true });
@@ -42,6 +58,9 @@ var EmptyStateController = class extends Controller {
     if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;
     if (this.#empty !== null && empty !== this.#empty) {
       this.dispatch("change", { detail: { count, empty } });
+      announce(
+        fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
+      );
     }
     this.#empty = empty;
   }
@@ -55,11 +74,6 @@ var EmptyStateController = class extends Controller {
       return this.listTarget.childElementCount;
     }
   }
-  #isLiveRegion(el) {
-    if (el.hasAttribute("aria-live")) return true;
-    const role = el.getAttribute("role");
-    return role === "status" || role === "alert";
-  }
 };
 
 export { EmptyStateController };

data/dist/controllers/focus_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/focus_controller.ts
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/escape_layer.ts
 var EscapeLayer = class _EscapeLayer {
   static #registries = /* @__PURE__ */ new WeakMap();
@@ -135,7 +164,7 @@ var FocusTrap = class {
     }
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     const onEscape = this.#options.onEscape;
     if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
@@ -152,7 +181,7 @@ var FocusTrap = class {
     this.#activeState = false;
     this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     if (this.#scrollLocked) {
       document.body.style.overflow = this.#previousBodyOverflow;
       this.#scrollLocked = false;
@@ -176,9 +205,7 @@ var FocusTrap = class {
    * untouched (restore-open designs reopen against a clean baseline), and focus
    * is left alone mid-navigation. The listener lives only while active.
    */
-  #onBeforeCache = () => {
-    this.deactivate({ restoreFocus: false });
-  };
+  #beforeCache = new BeforeCacheReset(() => this.deactivate({ restoreFocus: false }));
   /**
    * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
    * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of