stimeo-ui 0.1.0.pre.beta.3 → 0.2.1

data/dist/controllers/navigation_menu_controller.js

@@ -0,0 +1,384 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/navigation_menu_controller.ts
+
+// src/utils/escape_layer.ts
+function claimsWhileFocusWithin(element) {
+  return () => {
+    const active = element.ownerDocument.activeElement;
+    return active === null || active === element.ownerDocument.body || element.contains(active);
+  };
+}
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
+// 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/navigation_menu_controller.ts
+var NavigationMenuController = class extends Controller {
+  static targets = ["trigger", "panel", "hoverArea"];
+  static values = {
+    openOnHover: { type: Boolean, default: false },
+    hoverDelay: { type: Number, default: 150 }
+  };
+  static actions = ["onTriggerKeydown", "toggle"];
+  /** Open/close delay timers for hover mode; cleared together on disconnect. */
+  #hoverTimers = new SafeTimeout();
+  /**
+   * Elements currently carrying hover listeners. Removal always mirrors this
+   * set (not a recomputed target snapshot), so add/remove stays symmetric even
+   * when targets churn between connect and disconnect.
+   */
+  #hoverWired = /* @__PURE__ */ new Set();
+  /** Escape-stack membership while any panel is open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** Establishes the closed baseline and the dismissal listeners. */
+  connect() {
+    this.#closeAll();
+    document.addEventListener("click", this.#onOutsideClick);
+    this.element.addEventListener("focusout", this.#onFocusOut);
+    if (this.openOnHoverValue) this.#addHoverListeners();
+  }
+  /** Removes every listener, pending hover timer, and stack membership registered while connected. */
+  disconnect() {
+    this.#escapeLayer.deactivate();
+    document.removeEventListener("click", this.#onOutsideClick);
+    this.element.removeEventListener("focusout", this.#onFocusOut);
+    this.#removeHoverListeners();
+    this.#hoverTimers.clearAll();
+  }
+  /** Re-wires hover listeners when a target is added after connect (Turbo Streams etc.). */
+  triggerTargetConnected() {
+    this.#rewireHoverListeners();
+  }
+  /** Re-wires hover listeners when a target is removed while connected. */
+  triggerTargetDisconnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetConnected}. */
+  panelTargetConnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetDisconnected}. */
+  panelTargetDisconnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetConnected}. */
+  hoverAreaTargetConnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetDisconnected}. */
+  hoverAreaTargetDisconnected() {
+    this.#rewireHoverListeners();
+  }
+  /** Toggles a trigger's panel (single-open). Bound via `data-action` (click). */
+  toggle(event) {
+    const trigger = event.currentTarget;
+    if (this.#isExpanded(trigger)) {
+      this.#closePanel(trigger);
+    } else {
+      this.#openPanel(trigger);
+    }
+  }
+  /** `ArrowLeft`/`ArrowRight` move focus between triggers (keeping Tab order). */
+  onTriggerKeydown(event) {
+    const triggers = this.triggerTargets;
+    const index = triggers.indexOf(event.currentTarget);
+    if (index === -1) return;
+    const length = triggers.length;
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      triggers[(index + 1) % length]?.focus();
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      triggers[(index - 1 + length) % length]?.focus();
+    }
+  }
+  /** Opens `trigger`'s panel, closing any other open panel first. */
+  #openPanel(trigger) {
+    this.#closeAll();
+    const panel = this.#panelFor(trigger);
+    if (!panel) return;
+    panel.hidden = false;
+    trigger.setAttribute("aria-expanded", "true");
+    this.#syncEscapeLayer();
+  }
+  /** Closes `trigger`'s panel and reflects the collapsed state. */
+  #closePanel(trigger) {
+    const panel = this.#panelFor(trigger);
+    if (panel) panel.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    this.#syncEscapeLayer();
+  }
+  /** Closes every open panel. */
+  #closeAll() {
+    for (const trigger of this.triggerTargets) this.#closePanel(trigger);
+  }
+  /**
+   * Aligns Escape-stack membership with the open state: joins (or re-asserts to
+   * the top) while a panel is open, leaves once none is. Re-asserting when the
+   * user switches panels is deliberate — the nav is again the newest layer.
+   */
+  #syncEscapeLayer() {
+    if (this.#isAnyOpen) {
+      this.#escapeLayer.activate(document, {
+        onDismiss: () => this.#closeAndRestore(),
+        claims: claimsWhileFocusWithin(this.element)
+      });
+    } else {
+      this.#escapeLayer.deactivate();
+    }
+  }
+  /** Closes any open panel and returns focus to its trigger (Escape path). */
+  #closeAndRestore() {
+    const open = this.#openTrigger;
+    if (!open) return;
+    this.#closePanel(open);
+    open.focus();
+  }
+  /** Closes panels when a click lands outside the nav element. */
+  #onOutsideClick = (event) => {
+    if (this.#isAnyOpen && !this.element.contains(event.target)) this.#closeAll();
+  };
+  /**
+   * Closes (without restoring focus) when focus leaves the nav for a known
+   * external destination. A null/non-Node destination is indeterminate:
+   * browsers use it for clicks on non-focusable content and for window
+   * deactivation, so those never close the nav here (matching the popover
+   * convention) — the outside-click handler decides pointer dismissal, and the
+   * Escape stack's body-focus claim keeps keyboard dismissal working.
+   */
+  #onFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (!(next instanceof Node) || this.element.contains(next)) return;
+    this.#closeAll();
+  };
+  /** Opens a trigger's panel after the hover delay (hover mode). */
+  #onPointerEnter = (event) => {
+    const trigger = this.#triggerForHover(event.currentTarget);
+    if (!trigger) return;
+    this.#hoverTimers.clearAll();
+    this.#hoverTimers.set(() => this.#openPanel(trigger), this.hoverDelayValue);
+  };
+  /**
+   * Closes the open panel after the hover delay (hover mode) — unless the
+   * pointer moved directly into another part of the hover region (an adjacent
+   * trigger, panel, or hoverArea): crossing a shared edge must not schedule a
+   * spurious close, e.g. a hoverArea whose panel sits outside it as a sibling.
+   */
+  #onPointerLeave = (event) => {
+    const next = event instanceof MouseEvent ? event.relatedTarget : null;
+    if (next instanceof Node && this.#hoverElements.some((el) => el.contains(next))) return;
+    this.#hoverTimers.clearAll();
+    this.#hoverTimers.set(() => this.#closeAll(), this.hoverDelayValue);
+  };
+  /** Wires hover open/close on each hover element (opt-in), tracking what was wired. */
+  #addHoverListeners() {
+    for (const element of this.#hoverElements) {
+      element.addEventListener("mouseenter", this.#onPointerEnter);
+      element.addEventListener("mouseleave", this.#onPointerLeave);
+      this.#hoverWired.add(element);
+    }
+  }
+  /** Removes the hover listeners from exactly the elements that were wired. */
+  #removeHoverListeners() {
+    for (const element of this.#hoverWired) {
+      element.removeEventListener("mouseenter", this.#onPointerEnter);
+      element.removeEventListener("mouseleave", this.#onPointerLeave);
+    }
+    this.#hoverWired.clear();
+  }
+  /**
+   * Rebuilds the hover wiring from the current targets. Target callbacks call
+   * this so items added or removed after connect (e.g. a Turbo Stream append)
+   * participate in hover; the wired-set removal keeps the rebuild symmetric.
+   */
+  #rewireHoverListeners() {
+    if (!this.openOnHoverValue) return;
+    this.#removeHoverListeners();
+    this.#addHoverListeners();
+  }
+  /**
+   * Elements that participate in hover: each `hoverArea`, plus every trigger and
+   * panel **not** wrapped by one. A wrapped trigger/panel must defer to its
+   * wrapper — its own mouseleave would otherwise schedule a close while the
+   * pointer is still inside the area (mouseenter does not re-fire on the wrapper
+   * when moving among its descendants), flickering the panel shut.
+   */
+  get #hoverElements() {
+    const areas = this.hoverAreaTargets;
+    const covered = (element) => areas.some((area) => area.contains(element));
+    return [
+      ...areas,
+      ...this.triggerTargets.filter((trigger) => !covered(trigger)),
+      ...this.panelTargets.filter((panel) => !covered(panel))
+    ];
+  }
+  /**
+   * Resolves the trigger for a hovered element: the trigger itself, the trigger
+   * controlling a hovered panel, or the first trigger contained in a hovered
+   * `hoverArea` wrapper.
+   */
+  #triggerForHover(element) {
+    if (this.triggerTargets.includes(element)) return element;
+    if (this.panelTargets.includes(element)) {
+      return this.triggerTargets.find((trigger) => this.#panelFor(trigger) === element) ?? null;
+    }
+    if (this.hoverAreaTargets.includes(element)) {
+      return this.triggerTargets.find((trigger) => element.contains(trigger)) ?? null;
+    }
+    return null;
+  }
+  /** The panel controlled by `trigger` (matched by `aria-controls`/`id`). */
+  #panelFor(trigger) {
+    const id = trigger.getAttribute("aria-controls");
+    return id ? this.panelTargets.find((panel) => panel.id === id) ?? null : null;
+  }
+  /** Whether `trigger`'s panel is currently expanded. */
+  #isExpanded(trigger) {
+    return trigger.getAttribute("aria-expanded") === "true";
+  }
+  /** The trigger whose panel is currently open, if any. */
+  get #openTrigger() {
+    return this.triggerTargets.find((trigger) => this.#isExpanded(trigger)) ?? null;
+  }
+  /** Whether any panel is currently open. */
+  get #isAnyOpen() {
+    return this.#openTrigger !== null;
+  }
+};
+
+export { NavigationMenuController };
+//# sourceMappingURL=navigation_menu_controller.js.map
+//# sourceMappingURL=navigation_menu_controller.js.map

data/dist/controllers/otp_controller.js

@@ -1,5 +1,54 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/otp_controller.ts
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  constructor(options = {}) {
+    this.#onStart = options.onStart;
+    this.#onEnd = options.onEnd;
+  }
+  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
+  observe(target) {
+    if (this.#observedTargets.has(target)) return;
+    target.addEventListener("compositionstart", this.#handleStart);
+    target.addEventListener("compositionend", this.#handleEnd);
+    this.#observedTargets.add(target);
+  }
+  /** Stops tracking one target and clears any active composition it owned. */
+  unobserve(target) {
+    if (!this.#observedTargets.delete(target)) return;
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    this.#activeTargets.delete(target);
+  }
+  /** Releases every listener and clears state so reconnect starts cleanly. */
+  disconnect() {
+    for (const target of this.#observedTargets) {
+      target.removeEventListener("compositionstart", this.#handleStart);
+      target.removeEventListener("compositionend", this.#handleEnd);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
 // src/controllers/otp_controller.ts
 var OtpController = class extends Controller {
   static targets = ["field", "value", "error"];
@@ -9,21 +58,24 @@ var OtpController = class extends Controller {
   };
   static actions = ["onInput", "onKeydown", "onPaste"];
   static events = ["change", "complete", "invalid"];
-  #isComposing = /* @__PURE__ */ new Map();
+  /** Owns IME lifecycle state across every digit field. */
+  #composition = new CompositionTracker({
+    onEnd: (event) => {
+      const input = event.currentTarget;
+      if (input) this.#handleInputValidation(input);
+    }
+  });
   connect() {
     for (const field of this.fieldTargets) {
       field.addEventListener("focus", this.#onFieldFocus);
-      field.addEventListener("compositionstart", this.#onCompositionStart);
-      field.addEventListener("compositionend", this.#onCompositionEnd);
+      this.#composition.observe(field);
     }
   }
   disconnect() {
     for (const field of this.fieldTargets) {
       field.removeEventListener("focus", this.#onFieldFocus);
-      field.removeEventListener("compositionstart", this.#onCompositionStart);
-      field.removeEventListener("compositionend", this.#onCompositionEnd);
     }
-    this.#isComposing.clear();
+    this.#composition.disconnect();
   }
   /**
    * Stimulus lifecycle callback when a new field target enters the DOM.
@@ -31,21 +83,18 @@ var OtpController = class extends Controller {
    */
   fieldTargetConnected(element) {
     element.addEventListener("focus", this.#onFieldFocus);
-    element.addEventListener("compositionstart", this.#onCompositionStart);
-    element.addEventListener("compositionend", this.#onCompositionEnd);
+    this.#composition.observe(element);
   }
   /** Removes focus listeners when fields are dropped. */
   fieldTargetDisconnected(element) {
     element.removeEventListener("focus", this.#onFieldFocus);
-    element.removeEventListener("compositionstart", this.#onCompositionStart);
-    element.removeEventListener("compositionend", this.#onCompositionEnd);
-    this.#isComposing.delete(element);
+    this.#composition.unobserve(element);
   }
   /** Handles keystroke inputs and advances focus to the next field. */
   onInput(event) {
     const input = event.currentTarget;
     if (!input) return;
-    if (this.#isComposing.get(input)) return;
+    if (this.#composition.isComposing(event)) return;
     this.#handleInputValidation(input);
   }
   /** Handles Backspace retreating, arrows, and home/end navigation. */
@@ -54,7 +103,7 @@ var OtpController = class extends Controller {
     if (!input) return;
     const index = this.fieldTargets.indexOf(input);
     if (index === -1) return;
-    if (this.#isComposing.get(input)) return;
+    if (this.#composition.isComposing(event)) return;
     switch (event.key) {
       case "Backspace":
         if (!input.value) {
@@ -136,15 +185,6 @@ var OtpController = class extends Controller {
       input.select();
     }
   };
-  #onCompositionStart = (event) => {
-    const input = event.currentTarget;
-    this.#isComposing.set(input, true);
-  };
-  #onCompositionEnd = (event) => {
-    const input = event.currentTarget;
-    this.#isComposing.set(input, false);
-    this.#handleInputValidation(input);
-  };
   #handleInputValidation(input) {
     const index = this.fieldTargets.indexOf(input);
     if (index === -1) return;