stimeo-ui 0.1.0.pre.alpha.1

data/dist/controllers/idle_controller.js

@@ -0,0 +1,141 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/idle_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/idle_controller.ts
+var IdleController = class extends Controller {
+  static values = {
+    timeout: { type: Number, default: 9e5 },
+    promptBefore: { type: Number, default: 0 },
+    events: {
+      type: Array,
+      default: ["mousemove", "mousedown", "keydown", "wheel", "touchstart", "scroll"]
+    }
+  };
+  static events = ["prompt", "idle", "active"];
+  #timeouts = new SafeTimeout();
+  #idle = false;
+  #prompted = false;
+  /** Timestamp of the last activity; the timers self-reschedule against it. */
+  #lastActivity = 0;
+  #onActivity = () => {
+    this.#lastActivity = Date.now();
+    if (this.#idle || this.#prompted) {
+      this.#idle = false;
+      this.#prompted = false;
+      this.element.removeAttribute("data-idle");
+      this.dispatch("active", { detail: {} });
+      this.#arm();
+    }
+  };
+  #onVisibility = () => {
+    if (document.visibilityState === "visible") this.#onActivity();
+  };
+  connect() {
+    for (const type of this.eventsValue) {
+      document.addEventListener(type, this.#onActivity, { passive: true, capture: true });
+    }
+    document.addEventListener("visibilitychange", this.#onVisibility);
+    this.#arm();
+  }
+  disconnect() {
+    for (const type of this.eventsValue) {
+      document.removeEventListener(type, this.#onActivity, { capture: true });
+    }
+    document.removeEventListener("visibilitychange", this.#onVisibility);
+    this.#timeouts.clearAll();
+  }
+  /** Schedules the prompt and idle checks from the current activity baseline. */
+  #arm() {
+    this.#timeouts.clearAll();
+    this.#lastActivity = Date.now();
+    const { promptBeforeValue: prompt, timeoutValue: timeout } = this;
+    if (prompt > 0 && prompt < timeout) {
+      this.#timeouts.set(() => this.#checkPrompt(), timeout - prompt);
+    }
+    this.#timeouts.set(() => this.#checkIdle(), timeout);
+  }
+  /**
+   * Idle-timer callback: go idle only if there has genuinely been no activity for
+   * `timeout`; otherwise reschedule for the remaining time. This lets activity events
+   * stay O(1) (a timestamp write) while the deadline still tracks the last activity.
+   */
+  #checkIdle() {
+    const remaining = this.timeoutValue - (Date.now() - this.#lastActivity);
+    if (remaining > 0) {
+      this.#timeouts.set(() => this.#checkIdle(), remaining);
+      return;
+    }
+    this.#idle = true;
+    this.#prompted = false;
+    this.element.setAttribute("data-idle", "true");
+    this.dispatch("idle", { detail: {} });
+  }
+  /** Prompt-timer callback: warn at `promptBefore` before the idle deadline. */
+  #checkPrompt() {
+    const remaining = this.timeoutValue - this.promptBeforeValue - (Date.now() - this.#lastActivity);
+    if (remaining > 0) {
+      this.#timeouts.set(() => this.#checkPrompt(), remaining);
+      return;
+    }
+    this.#prompted = true;
+    this.dispatch("prompt", { detail: { remaining: this.promptBeforeValue } });
+  }
+};
+
+export { IdleController };
+//# sourceMappingURL=idle_controller.js.map
+//# sourceMappingURL=idle_controller.js.map

data/dist/controllers/input_mask_controller.js

@@ -0,0 +1,166 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/input_mask_controller.ts
+var DEFAULT_TOKENS = {
+  "9": "\\d",
+  a: "[A-Za-z]",
+  "*": "[A-Za-z0-9]"
+};
+var UNMASK_ATTR = "data-stimeo--input-mask-unmask";
+function applyMask(value, pattern, tokens) {
+  let masked = "";
+  let unmasked = "";
+  const tokenFlags = [];
+  let valueIndex = 0;
+  let totalTokens = 0;
+  for (const patternChar of pattern) {
+    const regex = tokens.get(patternChar);
+    if (regex) totalTokens += 1;
+    if (valueIndex >= value.length) continue;
+    if (regex) {
+      while (valueIndex < value.length && !regex.test(value[valueIndex] ?? "")) valueIndex += 1;
+      const char = value[valueIndex];
+      if (char === void 0) continue;
+      masked += char;
+      unmasked += char;
+      tokenFlags.push(true);
+      valueIndex += 1;
+    } else {
+      masked += patternChar;
+      tokenFlags.push(false);
+      if (value[valueIndex] === patternChar) valueIndex += 1;
+    }
+  }
+  return {
+    masked,
+    unmasked,
+    complete: totalTokens > 0 && unmasked.length === totalTokens,
+    tokenFlags
+  };
+}
+var InputMaskController = class extends Controller {
+  static values = {
+    pattern: { type: String, default: "" },
+    tokens: { type: Object, default: {} },
+    unmaskToHidden: { type: Boolean, default: true }
+  };
+  static actions = ["format"];
+  static events = ["change"];
+  connect() {
+    this.#apply();
+  }
+  /** Formats the field on input, preserving the caret. Bound via `data-action`. */
+  format() {
+    this.#apply();
+  }
+  /** Core reformat: mask the current value, restore the caret, sync, and announce. */
+  #apply() {
+    if (!this.patternValue) return;
+    const input = this.element;
+    const previous = input.value;
+    const caret = input.selectionStart ?? previous.length;
+    const tokens = this.#tokenRegexes();
+    const significant = this.#countSignificant(previous.slice(0, caret), tokens);
+    const result = applyMask(previous, this.patternValue, tokens);
+    input.value = result.masked;
+    this.#restoreCaret(input, result.tokenFlags, significant);
+    if (this.unmaskToHiddenValue) {
+      const unmask = this.#unmaskField();
+      if (unmask) unmask.value = result.unmasked;
+    }
+    this.#flag("data-mask-complete", result.complete);
+    this.#flag("data-mask-empty", result.masked.length === 0);
+    if (result.masked !== previous) {
+      this.dispatch("change", {
+        detail: { masked: result.masked, unmasked: result.unmasked, complete: result.complete }
+      });
+    }
+  }
+  /** Places the caret after the `n`-th token char (skipping following literals). */
+  #restoreCaret(input, tokenFlags, n) {
+    let position;
+    if (n <= 0) {
+      let i = 0;
+      while (i < tokenFlags.length && !tokenFlags[i]) i += 1;
+      position = i;
+    } else {
+      let seen = 0;
+      position = tokenFlags.length;
+      for (let i = 0; i < tokenFlags.length; i += 1) {
+        if (!tokenFlags[i]) continue;
+        seen += 1;
+        if (seen === n) {
+          let j = i + 1;
+          while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
+          position = j;
+          break;
+        }
+      }
+    }
+    try {
+      input.setSelectionRange(position, position);
+    } catch {
+    }
+  }
+  /**
+   * The hidden raw-value sink for this input, resolved so several masked inputs
+   * can coexist in one form:
+   *
+   * 1. **Explicit pairing** — a sink whose attribute value names this input's
+   *    `id` (`data-stimeo--input-mask-unmask="zip"`), looked up across the form
+   *    (or the document when the input is form-less).
+   * 2. **Nearest container** — otherwise, walking up from the input (stopping at
+   *    the form boundary), the first *value-less* sink in the closest ancestor.
+   *    Wrapped input+sink pairs each find their own sink, and the single
+   *    form-level sink keeps working unchanged. A sink claimed by another
+   *    input's id is never matched here.
+   */
+  #unmaskField() {
+    const id = this.element.id;
+    if (id.length > 0) {
+      const scope = this.element.form ?? document;
+      const quoted = id.replace(/["\\]/g, "\\$&");
+      const paired = scope.querySelector(`input[${UNMASK_ATTR}="${quoted}"]`);
+      if (paired) return paired;
+    }
+    for (let node = this.element.parentElement; node !== null; node = node.parentElement) {
+      const sink = node.querySelector(`input[${UNMASK_ATTR}=""]`);
+      if (sink) return sink;
+      if (node === this.element.form) break;
+    }
+    return null;
+  }
+  /** Counts characters in `text` that fill any token (the caret-significant chars). */
+  #countSignificant(text, tokens) {
+    let count = 0;
+    for (const char of text) {
+      for (const regex of tokens.values()) {
+        if (regex.test(char)) {
+          count += 1;
+          break;
+        }
+      }
+    }
+    return count;
+  }
+  /** Compiles the effective token map (defaults with the user `tokens` merged over). */
+  #tokenRegexes() {
+    const map = /* @__PURE__ */ new Map();
+    for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...this.tokensValue })) {
+      try {
+        map.set(key, new RegExp(`^(?:${source})$`));
+      } catch {
+      }
+    }
+    return map;
+  }
+  /** Sets a boolean `data-*` flag to `"true"` when `on`, else removes it. */
+  #flag(name, on) {
+    if (on) this.element.setAttribute(name, "true");
+    else this.element.removeAttribute(name);
+  }
+};
+
+export { InputMaskController, applyMask };
+//# sourceMappingURL=input_mask_controller.js.map
+//# sourceMappingURL=input_mask_controller.js.map

data/dist/controllers/lazy_frame_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/lazy_frame_controller.ts
+var LazyFrameController = class extends Controller {
+  static values = {
+    url: { type: String, default: "" },
+    rootMargin: { type: String, default: "0px" },
+    once: { type: Boolean, default: true }
+  };
+  static events = ["load"];
+  #observer = null;
+  #loaded = false;
+  /** Focus reaching the frame triggers the load before it intersects (keyboard / AT). */
+  #onFocus = () => this.#trigger();
+  connect() {
+    if (this.element.hasAttribute("data-lazy-loaded")) {
+      this.#loaded = true;
+      return;
+    }
+    if (!this.urlValue) return;
+    this.element.addEventListener("focusin", this.#onFocus);
+    if (typeof IntersectionObserver !== "undefined") {
+      this.#observer = new IntersectionObserver((entries) => this.#onIntersect(entries), {
+        rootMargin: this.rootMarginValue
+      });
+      this.#observer.observe(this.element);
+    }
+  }
+  disconnect() {
+    this.#stopObserving();
+  }
+  #onIntersect(entries) {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        this.#trigger();
+        return;
+      }
+    }
+  }
+  #trigger() {
+    if (!this.#loaded) this.#load();
+    else if (!this.onceValue) this.#reload();
+  }
+  /** Starts the load by writing the held URL to `src`. */
+  #load() {
+    this.#loaded = true;
+    this.element.setAttribute("src", this.urlValue);
+    this.element.setAttribute("data-lazy-loaded", "true");
+    this.dispatch("load", { detail: { url: this.urlValue } });
+    if (this.onceValue) this.#stopObserving();
+  }
+  /** Re-entry while `once` is off: ask Turbo to reload the frame's current `src`. */
+  #reload() {
+    const frame = this.element;
+    if (typeof frame.reload !== "function") return;
+    frame.reload();
+    this.dispatch("load", { detail: { url: this.urlValue } });
+  }
+  #stopObserving() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.element.removeEventListener("focusin", this.#onFocus);
+  }
+};
+
+export { LazyFrameController };
+//# sourceMappingURL=lazy_frame_controller.js.map
+//# sourceMappingURL=lazy_frame_controller.js.map

data/dist/controllers/listbox_controller.js

@@ -0,0 +1,256 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/listbox_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/listbox_controller.ts
+var TYPEAHEAD_TIMEOUT = 500;
+var ListboxController = class extends Controller {
+  static targets = ["trigger", "value", "list", "option", "field"];
+  static actions = ["close", "onTriggerKeydown", "open", "select", "toggle"];
+  static events = ["change"];
+  /** Index of the active option, or -1 when none is active. */
+  #activeIndex = -1;
+  /** Accumulated typeahead query, reset after {@link TYPEAHEAD_TIMEOUT} ms. */
+  #typeahead = "";
+  #typeaheadTimer = 0;
+  #timers = new SafeTimeout();
+  /** Starts closed and registers the outside-click listener. */
+  connect() {
+    this.close();
+    document.addEventListener("click", this.#onOutsideClick);
+  }
+  /** Removes the document listener and clears the typeahead timer. */
+  disconnect() {
+    document.removeEventListener("click", this.#onOutsideClick);
+    this.#timers.clearAll();
+  }
+  /**
+   * Toggles the list on a real mouse click. Keyboard activation of the
+   * `<button>` also fires a click (`detail === 0`); the keydown handler already
+   * drives that, so the synthetic click is ignored to avoid double-toggling.
+   */
+  toggle(event) {
+    if (event.detail === 0) return;
+    if (this.#isClosed) {
+      this.open();
+    } else {
+      this.close();
+    }
+  }
+  /** Routes trigger keyboard interaction per the APG select-only model. */
+  onTriggerKeydown(event) {
+    const length = this.optionTargets.length;
+    if (this.#isClosed) {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+        case "ArrowUp":
+          event.preventDefault();
+          this.open();
+          break;
+      }
+      return;
+    }
+    if (length === 0 && event.key !== "Escape" && event.key !== "Tab") {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.#setActive(this.#activeIndex < 0 ? 0 : (this.#activeIndex + 1) % length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.#setActive(
+          this.#activeIndex < 0 ? length - 1 : (this.#activeIndex - 1 + length) % length
+        );
+        break;
+      case "Home":
+        event.preventDefault();
+        this.#setActive(0);
+        break;
+      case "End":
+        event.preventDefault();
+        this.#setActive(length - 1);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        this.#commitActive();
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.close();
+        this.triggerTarget.focus();
+        break;
+      case "Tab":
+        this.close();
+        break;
+      default:
+        if (this.#isPrintable(event)) {
+          event.preventDefault();
+          this.#typeaheadTo(event.key);
+        }
+        break;
+    }
+  }
+  /** Selects the clicked option and closes, returning focus to the trigger. */
+  select(event) {
+    const option = event.currentTarget.closest('[role="option"]');
+    if (!option) return;
+    this.#selectOption(option);
+    this.close();
+    this.triggerTarget.focus();
+  }
+  /** Opens the list and activates the selected option (else the first). */
+  open() {
+    if (!this.hasListTarget) return;
+    this.listTarget.hidden = false;
+    this.triggerTarget.setAttribute("aria-expanded", "true");
+    if (this.optionTargets.length === 0) {
+      this.#setActive(-1);
+      return;
+    }
+    const selected = this.optionTargets.findIndex(
+      (option) => option.getAttribute("aria-selected") === "true"
+    );
+    this.#setActive(selected === -1 ? 0 : selected);
+  }
+  /** Closes the list, clears the active option, and resets the typeahead buffer. */
+  close() {
+    if (!this.hasListTarget) return;
+    this.listTarget.hidden = true;
+    this.triggerTarget.setAttribute("aria-expanded", "false");
+    this.#setActive(-1);
+    this.#resetTypeahead();
+  }
+  /** Commits the active option (keyboard) and closes, returning focus. */
+  #commitActive() {
+    const option = this.#activeIndex < 0 ? void 0 : this.optionTargets[this.#activeIndex];
+    if (option) this.#selectOption(option);
+    this.close();
+    this.triggerTarget.focus();
+  }
+  /** Applies selection: `aria-selected`, trigger label, hidden field, `change`. */
+  #selectOption(option) {
+    for (const candidate of this.optionTargets) {
+      candidate.setAttribute("aria-selected", candidate === option ? "true" : "false");
+    }
+    const label = (option.textContent ?? "").trim();
+    const value = option.dataset.value ?? label;
+    if (this.hasValueTarget) this.valueTarget.textContent = label;
+    if (this.hasFieldTarget && this.fieldTarget.value !== value) {
+      this.fieldTarget.value = value;
+      this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    this.dispatch("change", { detail: { value, option } });
+  }
+  /**
+   * Marks the option at `index` active via `data-active` and the trigger's
+   * `aria-activedescendant`. Pass `-1` to clear it (the attribute is removed, not
+   * set to empty, per the APG).
+   */
+  #setActive(index) {
+    this.#activeIndex = index;
+    const active = index < 0 ? null : this.optionTargets[index];
+    for (const option of this.optionTargets) {
+      if (option === active) {
+        option.setAttribute("data-active", "");
+      } else {
+        option.removeAttribute("data-active");
+      }
+    }
+    if (active?.id) {
+      this.triggerTarget.setAttribute("aria-activedescendant", active.id);
+    } else {
+      this.triggerTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+  /** Appends a character to the typeahead query and activates the first match. */
+  #typeaheadTo(char) {
+    this.#timers.clear(this.#typeaheadTimer);
+    this.#typeahead += char.toLowerCase();
+    this.#typeaheadTimer = this.#timers.set(() => {
+      this.#typeahead = "";
+    }, TYPEAHEAD_TIMEOUT);
+    const index = this.optionTargets.findIndex(
+      (option) => (option.textContent ?? "").trim().toLowerCase().startsWith(this.#typeahead)
+    );
+    if (index !== -1) this.#setActive(index);
+  }
+  /** Clears the typeahead query and its pending reset timer. */
+  #resetTypeahead() {
+    this.#timers.clear(this.#typeaheadTimer);
+    this.#typeahead = "";
+  }
+  /** Closes the list when a click lands outside the controller element. */
+  #onOutsideClick = (event) => {
+    if (!this.#isClosed && !this.element.contains(event.target)) this.close();
+  };
+  /** Whether `event.key` is a single printable character (no modifier chord). */
+  #isPrintable(event) {
+    return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+  }
+  /** Whether the list is currently hidden. */
+  get #isClosed() {
+    return !this.hasListTarget || this.listTarget.hidden !== false;
+  }
+};
+
+export { ListboxController };
+//# sourceMappingURL=listbox_controller.js.map
+//# sourceMappingURL=listbox_controller.js.map