stimeo-ui 0.1.0.pre.alpha.1

data/dist/controllers/command_palette_controller.js

@@ -0,0 +1,381 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/command_palette_controller.ts
+
+// src/utils/focus_trap.ts
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FocusTrap = class {
+  /** The element focused before activation, restored on deactivation. */
+  #previouslyFocused = null;
+  /** The body's inline `overflow` before locking, restored on deactivation. */
+  #previousBodyOverflow = "";
+  /** Whether scroll was locked this activation (so it is only restored if applied). */
+  #scrollLocked = false;
+  /** Background siblings made `inert` while active, restored on deactivation. */
+  #inertedSiblings = [];
+  /** Whether the modal side effects are currently applied. */
+  #activeState = false;
+  /** Returns the trapped element; called on every operation for the live target. */
+  #getContainer;
+  /** Closing/focus hooks; see {@link FocusTrapOptions}. */
+  #options;
+  /**
+   * @param getContainer - Returns the trapped element. Called on every operation
+   *   so the live target is always used.
+   * @param options - Closing/focus hooks; see {@link FocusTrapOptions}.
+   */
+  constructor(getContainer, options = {}) {
+    this.#getContainer = getContainer;
+    this.#options = options;
+  }
+  /** Whether the trap is currently active. */
+  get active() {
+    return this.#activeState;
+  }
+  /**
+   * Applies the trap: records the current focus, optionally locks background scroll
+   * and makes background siblings `inert`, listens for `Tab`/`Escape`, and (unless
+   * `autoFocus` is off) moves focus inside. No-ops if already active.
+   */
+  activate() {
+    if (this.#activeState) return;
+    this.#activeState = true;
+    const active = document.activeElement;
+    this.#previouslyFocused = active instanceof HTMLElement && active !== document.body ? active : null;
+    if (this.#flag(this.#options.lockScroll, true)) {
+      this.#previousBodyOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      this.#scrollLocked = true;
+    }
+    if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
+    document.addEventListener("keydown", this.#onKeydown);
+    if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
+  }
+  /**
+   * Reverts every side effect applied by {@link activate}. No-ops if inactive, so
+   * a controller can call it defensively from both `close()` and `disconnect()`.
+   *
+   * @param restoreFocus - Move focus back to the opener (default `true`). Pass
+   *   `false` on teardown (`disconnect`), where yanking focus is undesirable.
+   */
+  deactivate({ restoreFocus = true } = {}) {
+    if (!this.#activeState) return;
+    this.#activeState = false;
+    document.removeEventListener("keydown", this.#onKeydown);
+    if (this.#scrollLocked) {
+      document.body.style.overflow = this.#previousBodyOverflow;
+      this.#scrollLocked = false;
+    }
+    this.#releaseBackground();
+    if (restoreFocus) {
+      const target = this.#previouslyFocused ?? this.#options.fallbackFocus?.() ?? null;
+      target?.focus();
+    }
+  }
+  /** Resolves a boolean-or-getter option, defaulting when it was not provided. */
+  #flag(option, fallback) {
+    if (option === void 0) return fallback;
+    return typeof option === "function" ? option() : option;
+  }
+  /** Handles `Escape` (delegated) and `Tab` (focus trap) while active. */
+  #onKeydown = (event) => {
+    if (event.key === "Escape") {
+      if (this.#options.onEscape) {
+        event.preventDefault();
+        this.#options.onEscape();
+      }
+      return;
+    }
+    if (event.key === "Tab") this.#trapTab(event);
+  };
+  /** Keeps `Tab` focus cycling within the container's focusable elements. */
+  #trapTab(event) {
+    const focusable = this.#focusableElements();
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (!(active instanceof Node) || !this.#getContainer().contains(active)) {
+      event.preventDefault();
+      first?.focus();
+      return;
+    }
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  }
+  /**
+   * Marks every element outside the container's subtree as `inert` so background
+   * content cannot be focused or reached by assistive technology, honoring the
+   * `aria-modal="true"` contract. An element that was *already* `inert` is left
+   * untracked so `#releaseBackground` does not wrongly clear it.
+   */
+  #isolateBackground() {
+    const container = this.#getContainer();
+    this.#inertedSiblings = [];
+    for (const sibling of Array.from(document.body.children)) {
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.contains(container) || sibling.inert) continue;
+      sibling.inert = true;
+      this.#inertedSiblings.push(sibling);
+    }
+  }
+  /** Reverts the `inert` flags applied by `#isolateBackground`. */
+  #releaseBackground() {
+    for (const sibling of this.#inertedSiblings) {
+      sibling.inert = false;
+    }
+    this.#inertedSiblings = [];
+  }
+  /** Moves focus to the initial target, the first focusable, or the container. */
+  #focusInitial() {
+    const preferred = this.#options.initialFocus?.();
+    if (preferred) {
+      preferred.focus();
+      return;
+    }
+    const focusable = this.#focusableElements();
+    if (focusable[0]) {
+      focusable[0].focus();
+      return;
+    }
+    const container = this.#getContainer();
+    container.tabIndex = -1;
+    container.focus();
+  }
+  /** Collects the container's currently focusable descendants in DOM order. */
+  #focusableElements() {
+    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
+      (el) => !el.hidden
+    );
+  }
+};
+
+// src/controllers/command_palette_controller.ts
+var CommandPaletteController = class extends Controller {
+  static targets = ["dialog", "input", "list", "option", "empty"];
+  static values = {
+    hotkey: { type: String, default: "mod+k" },
+    open: { type: Boolean, default: false }
+  };
+  static actions = [
+    "close",
+    "closeOnBackdrop",
+    "filter",
+    "onKeydown",
+    "open",
+    "selectByClick",
+    "toggle"
+  ];
+  static events = ["select"];
+  /** The index of the currently active option within the visible subset. */
+  #activeIndex = -1;
+  /**
+   * Owns the modal side effects (focus trap, scroll lock, background `inert`, focus
+   * restore). Escape closes; focus on open goes to the input, and is restored to
+   * whatever opened the palette on close.
+   */
+  #trap = new FocusTrap(() => this.dialogTarget, {
+    onEscape: () => this.close(),
+    initialFocus: () => this.hasInputTarget ? this.inputTarget : null
+  });
+  /**
+   * Initializes the global hotkey handler and establishes the initial open state.
+   *
+   * The DOM is the source of truth on reconnect (Turbo cache restore / morph): if
+   * the restored snapshot already shows the dialog open, honor that rather than
+   * re-deriving from the declarative `open` Value (which would slam a user-opened
+   * palette shut). The `open` Value only seeds the initial state of a genuinely
+   * fresh render. We normalize to a clean closed baseline first so {@link open}
+   * runs its full setup — the {@link FocusTrap} is a fresh instance after a
+   * reconnect and must be re-activated.
+   */
+  connect() {
+    document.addEventListener("keydown", this.#onGlobalKeydown);
+    const shouldOpen = this.#isOpen || this.openValue;
+    this.#resetToClosedState();
+    if (shouldOpen) this.open();
+  }
+  /** Tears down the global hotkey listener and reverts the modal side effects. */
+  disconnect() {
+    document.removeEventListener("keydown", this.#onGlobalKeydown);
+    this.#trap.deactivate({ restoreFocus: false });
+    this.#resetToClosedState();
+  }
+  /** Toggles the open state of the command palette. */
+  toggle() {
+    if (this.#isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  /** Opens the palette, traps focus, and shifts focus to the input. */
+  open() {
+    if (!this.hasDialogTarget || this.#isOpen) return;
+    this.dialogTarget.hidden = false;
+    this.openValue = true;
+    if (this.hasInputTarget) this.inputTarget.setAttribute("aria-expanded", "true");
+    this.#resetFilter();
+    this.#trap.activate();
+  }
+  /** Closes the palette and restores focus back to the opener. */
+  close() {
+    if (!this.hasDialogTarget || !this.#isOpen) return;
+    this.#resetToClosedState();
+    this.#trap.deactivate();
+  }
+  /** Filters option elements in-memory matching the input value. Bound to input target. */
+  filter() {
+    if (!this.hasInputTarget) return;
+    const query = this.inputTarget.value.trim().toLowerCase();
+    let hasSelectableMatch = false;
+    for (const option of this.optionTargets) {
+      const searchText = (option.dataset.searchValue || option.textContent || "").trim().toLowerCase();
+      const matches = searchText.includes(query);
+      if (matches) {
+        option.removeAttribute("hidden");
+        if (!this.#isDisabled(option)) hasSelectableMatch = true;
+      } else {
+        option.setAttribute("hidden", "true");
+      }
+    }
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.hidden = hasSelectableMatch;
+    }
+    this.#setActiveIndex(hasSelectableMatch ? 0 : -1);
+  }
+  /** Selects the clicked option. Bound to option targets. */
+  selectByClick(event) {
+    const target = event.currentTarget;
+    if (!target) return;
+    const option = target.closest("[role='option']");
+    if (option && !this.#isDisabled(option)) {
+      this.#confirmSelection(option);
+    }
+  }
+  /** Closes when the backdrop (the dialog target itself) is clicked, ignoring inner clicks. */
+  closeOnBackdrop(event) {
+    if (event.target === this.dialogTarget) this.close();
+  }
+  /**
+   * Combobox navigation keys (arrows / Home / End / Enter), bound to the input.
+   * `Tab` (focus trap) and `Escape` (close) are owned by the {@link FocusTrap} at
+   * the document level, so they work no matter which element inside the dialog has
+   * focus — not only the input.
+   */
+  onKeydown(event) {
+    if (!this.#isOpen) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.#navigate(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.#navigate(-1);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.#setActiveIndex(0);
+        break;
+      case "End":
+        event.preventDefault();
+        this.#setActiveIndex(this.#visibleOptions.length - 1);
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const activeOption = this.#visibleOptions[this.#activeIndex];
+        if (activeOption) this.#confirmSelection(activeOption);
+        break;
+      }
+    }
+  }
+  #navigate(direction) {
+    const visible = this.#visibleOptions;
+    if (visible.length === 0) return;
+    let newIndex = this.#activeIndex + direction;
+    if (newIndex >= visible.length) newIndex = 0;
+    if (newIndex < 0) newIndex = visible.length - 1;
+    this.#setActiveIndex(newIndex);
+  }
+  #setActiveIndex(index) {
+    const visible = this.#visibleOptions;
+    this.#activeIndex = index;
+    visible.forEach((option, i) => {
+      if (i === index) {
+        option.setAttribute("aria-selected", "true");
+        option.setAttribute("data-active", "true");
+        if (this.hasInputTarget) {
+          this.inputTarget.setAttribute("aria-activedescendant", option.id || "");
+        }
+        option.scrollIntoView({ block: "nearest" });
+      } else {
+        option.setAttribute("aria-selected", "false");
+        option.removeAttribute("data-active");
+      }
+    });
+    if (index === -1 && this.hasInputTarget) {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+  #confirmSelection(option) {
+    const value = option.dataset.value || option.textContent || "";
+    this.dispatch("select", { detail: { value, option } });
+    this.close();
+  }
+  #resetFilter() {
+    if (this.hasInputTarget) this.inputTarget.value = "";
+    for (const option of this.optionTargets) {
+      option.removeAttribute("hidden");
+    }
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = true;
+    this.#setActiveIndex(0);
+  }
+  get #visibleOptions() {
+    return this.optionTargets.filter(
+      (option) => !option.hasAttribute("hidden") && !this.#isDisabled(option)
+    );
+  }
+  #isDisabled(option) {
+    return option.dataset.disabled === "true";
+  }
+  get #isOpen() {
+    return this.hasDialogTarget && !this.dialogTarget.hidden;
+  }
+  #onGlobalKeydown = (event) => {
+    const hotkey = this.hotkeyValue.toLowerCase();
+    const isMod = hotkey.includes("mod+");
+    const key = hotkey.split("+").pop();
+    if (!key) return;
+    const modPressed = isMod ? event.metaKey || event.ctrlKey : !event.metaKey && !event.ctrlKey;
+    const keyMatch = event.key.toLowerCase() === key;
+    if (modPressed && keyMatch) {
+      event.preventDefault();
+      this.toggle();
+    }
+  };
+  /** Resets transient open state so reconnect starts from a predictable closed snapshot. */
+  #resetToClosedState() {
+    this.#activeIndex = -1;
+    this.openValue = false;
+    if (this.hasDialogTarget) {
+      this.dialogTarget.hidden = true;
+    }
+    if (this.hasInputTarget) {
+      this.inputTarget.setAttribute("aria-expanded", "false");
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+};
+
+export { CommandPaletteController };
+//# sourceMappingURL=command_palette_controller.js.map
+//# sourceMappingURL=command_palette_controller.js.map

data/dist/controllers/conditional_fields_controller.js

@@ -0,0 +1,112 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/conditional_fields_controller.ts
+var DISABLED_MARKER = "data-conditional-disabled";
+var ConditionalFieldsController = class extends Controller {
+  static targets = ["trigger", "region"];
+  static values = {
+    disableHidden: { type: Boolean, default: true },
+    match: { type: String, default: "any" }
+  };
+  static actions = ["evaluate"];
+  static events = ["change"];
+  #lastVisible = /* @__PURE__ */ new WeakMap();
+  #onChange = () => {
+    this.evaluate();
+  };
+  connect() {
+    this.evaluate();
+    this.element.addEventListener("change", this.#onChange);
+    this.element.addEventListener("input", this.#onChange);
+  }
+  disconnect() {
+    this.element.removeEventListener("change", this.#onChange);
+    this.element.removeEventListener("input", this.#onChange);
+  }
+  /** Re-evaluates every region against the current trigger state. */
+  evaluate() {
+    const triggers = this.triggerTargets;
+    for (const region of this.regionTargets) {
+      this.#applyRegion(region, this.#isVisible(region, triggers));
+    }
+  }
+  /** Applies a region's visibility, syncing hidden/aria/disabled and emitting change. */
+  #applyRegion(region, visible) {
+    const previous = this.#lastVisible.get(region) ?? !region.hidden;
+    if (visible === previous && this.#lastVisible.has(region)) return;
+    this.#lastVisible.set(region, visible);
+    if (visible) {
+      region.hidden = false;
+      region.removeAttribute("aria-hidden");
+      region.setAttribute("data-visible", "true");
+      this.#setRegionDisabled(region, false);
+    } else {
+      this.#retreatFocus(region);
+      region.hidden = true;
+      region.setAttribute("aria-hidden", "true");
+      region.removeAttribute("data-visible");
+      this.#setRegionDisabled(region, true);
+    }
+    if (visible !== previous) {
+      this.dispatch("change", { detail: { region, visible } });
+    }
+  }
+  /** Whether a region's declared condition holds across `triggers` per `match`. */
+  #isVisible(region, triggers) {
+    const predicate = this.#predicateFor(region);
+    if (predicate === null) return !region.hidden;
+    if (triggers.length === 0) return false;
+    return this.matchValue === "all" ? triggers.every(predicate) : triggers.some(predicate);
+  }
+  /** Builds the per-trigger predicate from the region's `data-when-*` attribute. */
+  #predicateFor(region) {
+    if (region.hasAttribute("data-when-checked")) {
+      return (trigger) => this.#isChecked(trigger);
+    }
+    if (region.hasAttribute("data-when-unchecked")) {
+      return (trigger) => !this.#isChecked(trigger);
+    }
+    const wanted = region.dataset.whenValue;
+    if (wanted !== void 0) {
+      return (trigger) => this.#matchesValue(trigger, wanted);
+    }
+    return null;
+  }
+  #isChecked(trigger) {
+    return trigger instanceof HTMLInputElement && trigger.checked;
+  }
+  /** A trigger "has" a value: selected radio/checkbox value, or the control value. */
+  #matchesValue(trigger, wanted) {
+    if (trigger instanceof HTMLInputElement && (trigger.type === "checkbox" || trigger.type === "radio")) {
+      return trigger.checked && trigger.value === wanted;
+    }
+    return trigger.value === wanted;
+  }
+  /** Enables/disables a region's inputs, tracking only the ones we disabled. */
+  #setRegionDisabled(region, disabled) {
+    if (!this.disableHiddenValue) return;
+    const controls = region.querySelectorAll("input, textarea, select, button");
+    for (const control of Array.from(controls)) {
+      if (disabled) {
+        if (!control.disabled) {
+          control.disabled = true;
+          control.setAttribute(DISABLED_MARKER, "true");
+        }
+      } else if (control.hasAttribute(DISABLED_MARKER)) {
+        control.disabled = false;
+        control.removeAttribute(DISABLED_MARKER);
+      }
+    }
+  }
+  /** Moves focus out of a region about to be hidden, to a trigger when possible. */
+  #retreatFocus(region) {
+    const active = document.activeElement;
+    if (!(active instanceof HTMLElement) || !region.contains(active)) return;
+    active.blur();
+    if (this.hasTriggerTarget) this.triggerTargets[0]?.focus();
+  }
+};
+
+export { ConditionalFieldsController };
+//# sourceMappingURL=conditional_fields_controller.js.map
+//# sourceMappingURL=conditional_fields_controller.js.map