stimeo-ui 0.2.0 → 0.2.1

data/dist/controllers/password_reveal_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/password_reveal_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/password_reveal_controller.ts
+var PasswordRevealController = class extends Controller {
+  static targets = ["input", "toggle"];
+  static values = {
+    autoHide: { type: Number, default: 0 }
+  };
+  static actions = ["toggle"];
+  static events = ["toggle"];
+  /** Auto re-mask timer; torn down on disconnect. */
+  #timers = new SafeTimeout();
+  connect() {
+    this.#reflect(this.#isVisible);
+  }
+  disconnect() {
+    this.#timers.clearAll();
+  }
+  /** Toggles the input between masked and revealed. Bound via `data-action`. */
+  toggle() {
+    this.#setVisible(!this.#isVisible);
+  }
+  /** Whether the input is currently revealed (`type="text"`). */
+  get #isVisible() {
+    return this.hasInputTarget && this.inputTarget.type === "text";
+  }
+  /** Switches the masked/revealed state, preserving focus and caret. */
+  #setVisible(visible) {
+    if (!this.hasInputTarget) return;
+    const input = this.inputTarget;
+    const restoreInputFocus = document.activeElement === input;
+    const selectionStart = input.selectionStart;
+    const selectionEnd = input.selectionEnd;
+    input.type = visible ? "text" : "password";
+    if (restoreInputFocus) {
+      input.focus();
+      if (selectionStart !== null && selectionEnd !== null) {
+        try {
+          input.setSelectionRange(selectionStart, selectionEnd);
+        } catch {
+        }
+      }
+    }
+    this.#reflect(visible);
+    this.dispatch("toggle", { detail: { visible } });
+    this.#timers.clearAll();
+    if (visible && this.autoHideValue > 0) {
+      this.#timers.set(() => this.#setVisible(false), this.autoHideValue);
+    }
+  }
+  /** Reflects the visible state onto `aria-pressed` and `data-state`. */
+  #reflect(visible) {
+    if (this.hasToggleTarget) {
+      this.toggleTarget.setAttribute("aria-pressed", visible ? "true" : "false");
+    }
+    this.element.setAttribute("data-state", visible ? "visible" : "hidden");
+  }
+};
+
+export { PasswordRevealController };
+//# sourceMappingURL=password_reveal_controller.js.map
+//# sourceMappingURL=password_reveal_controller.js.map

data/dist/controllers/range_slider_controller.js

@@ -0,0 +1,166 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/range_slider_controller.ts
+var START_PROPERTY = "--stimeo-range-start";
+var END_PROPERTY = "--stimeo-range-end";
+var RangeSliderController = class extends Controller {
+  static targets = ["track", "startThumb", "endThumb"];
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    start: { type: Number, default: 0 },
+    end: { type: Number, default: 100 }
+  };
+  static actions = ["onKeydown", "onPointerDown"];
+  static events = ["change"];
+  /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
+  #dragAbort = null;
+  /** Normalizes the initial pair (clamped, snapped, ordered) and renders. */
+  connect() {
+    const lo = Math.min(this.startValue, this.endValue);
+    const hi = Math.max(this.startValue, this.endValue);
+    this.#commit(lo, hi, false);
+  }
+  /** Cancels any active pointer drag so document listeners never leak. */
+  disconnect() {
+    this.#dragAbort?.abort();
+    this.#dragAbort = null;
+  }
+  /** Keyboard stepping for whichever thumb is focused (the action's element). */
+  onKeydown(event) {
+    const thumb = event.currentTarget;
+    const isStart = this.hasStartThumbTarget && thumb === this.startThumbTarget;
+    const current = isStart ? this.startValue : this.endValue;
+    const lower = isStart ? this.minValue : this.startValue;
+    const upper = isStart ? this.endValue : this.maxValue;
+    const big = this.stepValue * 10;
+    let next = null;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + this.stepValue;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - this.stepValue;
+        break;
+      case "PageUp":
+        next = current + big;
+        break;
+      case "PageDown":
+        next = current - big;
+        break;
+      case "Home":
+        next = lower;
+        break;
+      case "End":
+        next = upper;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#moveThumb(isStart, next);
+  }
+  /** Begins a pointer drag on the track, moving the thumb nearest the press. */
+  onPointerDown(event) {
+    if (!this.hasTrackTarget) return;
+    const value = this.#valueFromClientX(event.clientX);
+    if (value === null) return;
+    event.preventDefault();
+    const useStart = Math.abs(value - this.startValue) <= Math.abs(value - this.endValue);
+    if (useStart) {
+      if (this.hasStartThumbTarget) this.startThumbTarget.focus();
+    } else if (this.hasEndThumbTarget) {
+      this.endThumbTarget.focus();
+    }
+    this.#moveThumb(useStart, value);
+    this.#dragAbort?.abort();
+    const abort = new AbortController();
+    this.#dragAbort = abort;
+    const onMove = (move) => {
+      const moved = this.#valueFromClientX(move.clientX);
+      if (moved !== null) this.#moveThumb(useStart, moved);
+    };
+    const onUp = () => {
+      abort.abort();
+      this.#dragAbort = null;
+    };
+    document.addEventListener("pointermove", onMove, { signal: abort.signal });
+    document.addEventListener("pointerup", onUp, { signal: abort.signal });
+    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+  }
+  /** Maps a pointer X coordinate to a raw value using the track geometry. */
+  #valueFromClientX(clientX) {
+    const rect = this.trackTarget.getBoundingClientRect();
+    if (rect.width === 0) return null;
+    const fraction = (clientX - rect.left) / rect.width;
+    return this.minValue + fraction * (this.maxValue - this.minValue);
+  }
+  /** Moves one thumb to a new raw value, keeping the pair ordered. */
+  #moveThumb(isStart, raw) {
+    if (isStart) {
+      this.#commit(raw, this.endValue, true);
+    } else {
+      this.#commit(this.startValue, raw, true);
+    }
+  }
+  /**
+   * Clamps and snaps `start`/`end`, enforces `start ≤ end`, stores the pair, and
+   * reflects it onto the thumbs' ARIA attributes and the range custom
+   * properties. Dispatches `change` only on user-driven updates (`notify`).
+   */
+  #commit(start, end, notify) {
+    const prevStart = this.startValue;
+    const prevEnd = this.endValue;
+    let nextStart = this.#snap(start);
+    let nextEnd = this.#snap(end);
+    if (nextStart > nextEnd) {
+      if (isUserMovingStart(start, prevStart, end, prevEnd)) nextStart = nextEnd;
+      else nextEnd = nextStart;
+    }
+    this.startValue = nextStart;
+    this.endValue = nextEnd;
+    this.#render(nextStart, nextEnd);
+    if (notify && (nextStart !== prevStart || nextEnd !== prevEnd)) {
+      this.dispatch("change", { detail: { start: nextStart, end: nextEnd } });
+    }
+  }
+  /** Reflects the current pair onto thumb ARIA attributes and CSS properties. */
+  #render(start, end) {
+    if (this.hasStartThumbTarget) {
+      this.startThumbTarget.setAttribute("aria-valuemin", String(this.minValue));
+      this.startThumbTarget.setAttribute("aria-valuemax", String(end));
+      this.startThumbTarget.setAttribute("aria-valuenow", String(start));
+    }
+    if (this.hasEndThumbTarget) {
+      this.endThumbTarget.setAttribute("aria-valuemin", String(start));
+      this.endThumbTarget.setAttribute("aria-valuemax", String(this.maxValue));
+      this.endThumbTarget.setAttribute("aria-valuenow", String(end));
+    }
+    const span = this.maxValue - this.minValue;
+    this.element.style.setProperty(
+      START_PROPERTY,
+      String(span > 0 ? (start - this.minValue) / span : 0)
+    );
+    this.element.style.setProperty(
+      END_PROPERTY,
+      String(span > 0 ? (end - this.minValue) / span : 0)
+    );
+  }
+  /** Clamps `raw` to `[min, max]` and snaps it to the nearest step from `min`. */
+  #snap(raw) {
+    const clamped = Math.min(this.maxValue, Math.max(this.minValue, raw));
+    if (this.stepValue <= 0) return clamped;
+    const stepped = Math.round((clamped - this.minValue) / this.stepValue) * this.stepValue + this.minValue;
+    return Math.min(this.maxValue, Math.max(this.minValue, stepped));
+  }
+};
+function isUserMovingStart(start, prevStart, end, prevEnd) {
+  return start !== prevStart && end === prevEnd;
+}
+
+export { RangeSliderController };
+//# sourceMappingURL=range_slider_controller.js.map
+//# sourceMappingURL=range_slider_controller.js.map

data/dist/controllers/read_more_controller.js

@@ -0,0 +1,194 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/read_more_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
+// src/controllers/read_more_controller.ts
+var ReadMoreController = class extends Controller {
+  static targets = ["content", "trigger"];
+  static values = {
+    collapsed: { type: Boolean, default: true }
+  };
+  static actions = ["toggle"];
+  #connected = false;
+  #collapsed = true;
+  #observedContent = null;
+  #contentMutationObserver = null;
+  #deferredHideTrigger = null;
+  #update = () => {
+    if (this.#connected) this.#evaluateOverflow();
+  };
+  #layout = new LayoutObserver(this.#update);
+  #onDeferredHideBlur = () => {
+    this.#clearDeferredHide();
+    this.#update();
+  };
+  connect() {
+    this.#connected = true;
+    this.#collapsed = this.#initialCollapsed();
+    this.#syncTargets();
+  }
+  disconnect() {
+    this.#connected = false;
+    this.#stopObservingContent();
+    this.#layout.disconnect();
+  }
+  contentTargetConnected() {
+    this.#syncTargets();
+  }
+  contentTargetDisconnected() {
+    this.#syncTargets();
+  }
+  triggerTargetConnected() {
+    this.#syncTargets();
+  }
+  triggerTargetDisconnected(trigger) {
+    if (this.#deferredHideTrigger === trigger) this.#clearDeferredHide();
+    this.#syncTargets();
+  }
+  /** Toggles between the collapsed (clamped) and expanded states. */
+  toggle() {
+    if (!this.#connected) return;
+    this.#collapsed = !this.#collapsed;
+    this.#reflect();
+    this.#evaluateOverflow();
+  }
+  #initialCollapsed() {
+    if (this.hasContentTarget) {
+      const state = this.contentTarget.getAttribute("data-state");
+      if (state === "expanded") return false;
+      if (state === "collapsed") return true;
+    }
+    return this.collapsedValue;
+  }
+  #reflect() {
+    if (this.hasContentTarget) {
+      this.contentTarget.setAttribute("data-state", this.#collapsed ? "collapsed" : "expanded");
+    }
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
+    }
+  }
+  #syncTargets() {
+    if (!this.#connected) return;
+    this.#syncContentObservation();
+    this.#reflect();
+    this.#evaluateOverflow();
+  }
+  #syncContentObservation() {
+    const next = this.hasContentTarget ? this.contentTarget : null;
+    if (next === this.#observedContent) return;
+    this.#stopObservingContent();
+    if (!next) return;
+    this.#observedContent = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#update, true);
+    if (typeof MutationObserver !== "undefined") {
+      this.#contentMutationObserver = new MutationObserver(this.#update);
+      this.#contentMutationObserver.observe(next, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  }
+  #stopObservingContent() {
+    this.#clearDeferredHide();
+    if (this.#observedContent) {
+      this.#layout.unobserve(this.#observedContent);
+      this.#observedContent.removeEventListener("load", this.#update, true);
+    }
+    this.#observedContent = null;
+    this.#contentMutationObserver?.disconnect();
+    this.#contentMutationObserver = null;
+    this.#layout.unobserveViewport();
+  }
+  #deferHide(trigger) {
+    if (this.#deferredHideTrigger === trigger) return;
+    this.#clearDeferredHide();
+    this.#deferredHideTrigger = trigger;
+    trigger.addEventListener("blur", this.#onDeferredHideBlur);
+  }
+  #clearDeferredHide() {
+    this.#deferredHideTrigger?.removeEventListener("blur", this.#onDeferredHideBlur);
+    this.#deferredHideTrigger = null;
+  }
+  #evaluateOverflow() {
+    if (!this.hasTriggerTarget || !this.hasContentTarget) return;
+    const trigger = this.triggerTarget;
+    const content = this.contentTarget;
+    const useful = !this.#collapsed || content.scrollHeight > content.clientHeight;
+    if (useful) {
+      this.#clearDeferredHide();
+      trigger.hidden = false;
+      return;
+    }
+    if (document.activeElement === trigger) {
+      trigger.hidden = false;
+      this.#deferHide(trigger);
+      return;
+    }
+    this.#clearDeferredHide();
+    trigger.hidden = true;
+  }
+};
+
+export { ReadMoreController };
+//# sourceMappingURL=read_more_controller.js.map
+//# sourceMappingURL=read_more_controller.js.map

data/dist/controllers/scroll_area_controller.js

@@ -58,6 +58,20 @@ var LayoutObserver = class {
   }
 };
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+function logicalScrollMetrics(element, horizontal) {
+  const max = Math.max(
+    0,
+    horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight
+  );
+  const raw = horizontal ? element.scrollLeft : element.scrollTop;
+  const position = horizontal && isRtl(element) ? -raw : raw;
+  return { position: Math.min(max, Math.max(0, position)), max };
+}
+
 // src/controllers/scroll_area_controller.ts
 var FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -131,8 +145,7 @@ var ScrollAreaController = class extends Controller {
    */
   #measurePosition(vp) {
     const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && vp.scrollHeight <= vp.clientHeight + EDGE_EPSILON;
-    const scrollPos = horizontalPrimary ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontalPrimary ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontalPrimary);
     if (maxScroll <= EDGE_EPSILON) return { position: "start", progress: 0 };
     const progress = Math.min(1, Math.max(0, scrollPos / maxScroll));
     if (scrollPos <= EDGE_EPSILON) return { position: "start", progress };

data/dist/controllers/scroll_restore_controller.js

@@ -0,0 +1,93 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/scroll_restore_controller.ts
+var ScrollRestoreController = class extends Controller {
+  static values = {
+    key: { type: String, default: "" },
+    axis: { type: String, default: "vertical" }
+  };
+  /** Pending rAF id used to coalesce scroll bursts into one save. */
+  #rafId = null;
+  /** Resolved storage key; empty disables persistence (no key and no id). */
+  #storageKey = "";
+  /** Last offset captured while the element was live; persisted as-is on teardown. */
+  #lastTop = 0;
+  #lastLeft = 0;
+  #onScroll = () => {
+    this.#capture();
+    if (this.#rafId !== null) return;
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
+      this.#persist();
+    });
+  };
+  connect() {
+    this.#storageKey = this.#resolveKey();
+    if (!this.#storageKey) return;
+    this.#restore();
+    this.element.addEventListener("scroll", this.#onScroll, { passive: true });
+  }
+  disconnect() {
+    if (!this.#storageKey) return;
+    this.element.removeEventListener("scroll", this.#onScroll);
+    if (this.#rafId !== null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+    this.#persist();
+  }
+  /** Records the live scroll offset for the configured axis. */
+  #capture() {
+    if (this.#tracksVertical) this.#lastTop = this.element.scrollTop;
+    if (this.#tracksHorizontal) this.#lastLeft = this.element.scrollLeft;
+  }
+  /** Persists the last captured scroll offset for the configured axis. */
+  #persist() {
+    const data = {};
+    if (this.#tracksVertical) data.top = this.#lastTop;
+    if (this.#tracksHorizontal) data.left = this.#lastLeft;
+    try {
+      sessionStorage.setItem(this.#storageKey, JSON.stringify(data));
+    } catch {
+    }
+  }
+  /** Applies the persisted scroll offset, if any, without moving focus. */
+  #restore() {
+    let raw = null;
+    try {
+      raw = sessionStorage.getItem(this.#storageKey);
+    } catch {
+      return;
+    }
+    if (raw === null) return;
+    let data;
+    try {
+      data = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (this.#tracksVertical && typeof data.top === "number") {
+      this.element.scrollTop = data.top;
+      this.#lastTop = data.top;
+    }
+    if (this.#tracksHorizontal && typeof data.left === "number") {
+      this.element.scrollLeft = data.left;
+      this.#lastLeft = data.left;
+    }
+  }
+  /** The `sessionStorage` key: explicit `key`, else the element `id`, else none. */
+  #resolveKey() {
+    const base = this.keyValue || this.element.id;
+    return base ? `stimeo--scroll-restore:${base}` : "";
+  }
+  get #tracksVertical() {
+    return this.axisValue !== "horizontal";
+  }
+  get #tracksHorizontal() {
+    return this.axisValue === "horizontal" || this.axisValue === "both";
+  }
+};
+
+export { ScrollRestoreController };
+//# sourceMappingURL=scroll_restore_controller.js.map
+//# sourceMappingURL=scroll_restore_controller.js.map

data/dist/controllers/scroll_visibility_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/scroll_visibility_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/scroll_visibility_controller.ts
 var ScrollVisibilityController = class extends Controller {
   static targets = ["element"];
@@ -45,7 +52,7 @@ var ScrollVisibilityController = class extends Controller {
   }
   /** Scrolls the source to the top and, optionally, moves focus to a safe target. */
   toTop() {
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
     this.#scrollSource.scrollTo({ top: 0, behavior });
     if (this.focusSelectorValue) {
       const target = document.querySelector(this.focusSelectorValue);
@@ -93,9 +100,6 @@ var ScrollVisibilityController = class extends Controller {
     }
     return this.#scrollSource.scrollTop;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { ScrollVisibilityController };