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

data/dist/controllers/command_palette_controller.js

@@ -2,6 +2,137 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/command_palette_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/utils/escape_layer.ts
+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/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 {
@@ -15,6 +146,8 @@ var FocusTrap = class {
   #inertedSiblings = [];
   /** Whether the modal side effects are currently applied. */
   #activeState = false;
+  /** Registers the trap on the shared Escape stack while active (see {@link EscapeLayer}). */
+  #escapeLayer = new EscapeLayer();
   /** Returns the trapped element; called on every operation for the live target. */
   #getContainer;
   /** Closing/focus hooks; see {@link FocusTrapOptions}. */
@@ -50,6 +183,8 @@ var FocusTrap = class {
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    const onEscape = this.#options.onEscape;
+    if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
   }
   /**
@@ -62,6 +197,7 @@ var FocusTrap = class {
   deactivate({ restoreFocus = true } = {}) {
     if (!this.#activeState) return;
     this.#activeState = false;
+    this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
     document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
     if (this.#scrollLocked) {
@@ -90,15 +226,12 @@ var FocusTrap = class {
   #onBeforeCache = () => {
     this.deactivate({ restoreFocus: false });
   };
-  /** Handles `Escape` (delegated) and `Tab` (focus trap) while active. */
+  /**
+   * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
+   * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
+   * which layer currently owns Escape.
+   */
   #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. */
@@ -172,7 +305,9 @@ var FocusTrap = class {
 };
 
 // src/controllers/command_palette_controller.ts
-var CommandPaletteController = class extends Controller {
+var CommandPaletteController = class _CommandPaletteController extends Controller {
+  static #ORIGINAL_ARIA_DISABLED = "data-command-palette-original-aria-disabled";
+  static #ABSENT_ARIA_DISABLED = "absent";
   static targets = ["dialog", "input", "list", "option", "empty"];
   static values = {
     hotkey: { type: String, default: "mod+k" },
@@ -190,6 +325,12 @@ var CommandPaletteController = class extends Controller {
   static events = ["select"];
   /** The index of the currently active option within the visible subset. */
   #activeIndex = -1;
+  /** Owns IME lifecycle state; confirmed text re-filters an open palette once. */
+  #composition = new CompositionTracker({
+    onEnd: () => {
+      if (this.#isOpen) this.filter();
+    }
+  });
   /**
    * 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
@@ -212,6 +353,8 @@ var CommandPaletteController = class extends Controller {
    */
   connect() {
     document.addEventListener("keydown", this.#onGlobalKeydown);
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.#syncOptionSemantics();
     const shouldOpen = this.#isOpen || this.openValue;
     this.#resetToClosedState();
     if (shouldOpen) this.open();
@@ -219,9 +362,22 @@ var CommandPaletteController = class extends Controller {
   /** Tears down the global hotkey listener and reverts the modal side effects. */
   disconnect() {
     document.removeEventListener("keydown", this.#onGlobalKeydown);
+    this.#composition.disconnect();
     this.#trap.deactivate({ restoreFocus: false });
     this.#resetToClosedState();
   }
+  /** Initializes semantics for an option added before or after the controller connects. */
+  optionTargetConnected(option) {
+    this.#syncOptionSemanticsFor(option);
+  }
+  /** Tracks an input added initially or after connect without extra consumer actions. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes controller-owned listeners when the input target is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
   /** Toggles the open state of the command palette. */
   toggle() {
     if (this.#isOpen) {
@@ -246,8 +402,9 @@ var CommandPaletteController = class extends Controller {
     this.#trap.deactivate();
   }
   /** Filters option elements in-memory matching the input value. Bound to input target. */
-  filter() {
-    if (!this.hasInputTarget) return;
+  filter(event) {
+    if (!this.hasInputTarget || this.#composition.isComposing(event)) return;
+    this.#syncOptionSemantics();
     const query = this.inputTarget.value.trim().toLowerCase();
     let hasSelectableMatch = false;
     for (const option of this.optionTargets) {
@@ -270,6 +427,7 @@ var CommandPaletteController = class extends Controller {
     const target = event.currentTarget;
     if (!target) return;
     const option = target.closest("[role='option']");
+    if (option) this.#syncOptionSemanticsFor(option);
     if (option && !this.#isDisabled(option)) {
       this.#confirmSelection(option);
     }
@@ -285,7 +443,7 @@ var CommandPaletteController = class extends Controller {
    * focus — not only the input.
    */
   onKeydown(event) {
-    if (!this.#isOpen) return;
+    if (this.#composition.isComposing(event) || !this.#isOpen) return;
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -320,23 +478,25 @@ var CommandPaletteController = class extends Controller {
     this.#setActiveIndex(newIndex);
   }
   #setActiveIndex(index) {
+    this.#syncOptionSemantics();
     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" });
+    const activeOption = visible[index] ?? null;
+    this.#activeIndex = activeOption ? index : -1;
+    for (const option of this.optionTargets) {
+      option.setAttribute("aria-selected", "false");
+      option.removeAttribute("data-active");
+    }
+    if (activeOption) {
+      activeOption.setAttribute("aria-selected", "true");
+      activeOption.setAttribute("data-active", "true");
+      activeOption.scrollIntoView({ block: "nearest" });
+    }
+    if (this.hasInputTarget) {
+      if (activeOption?.id) {
+        this.inputTarget.setAttribute("aria-activedescendant", activeOption.id);
       } else {
-        option.setAttribute("aria-selected", "false");
-        option.removeAttribute("data-active");
+        this.inputTarget.removeAttribute("aria-activedescendant");
       }
-    });
-    if (index === -1 && this.hasInputTarget) {
-      this.inputTarget.removeAttribute("aria-activedescendant");
     }
   }
   #confirmSelection(option) {
@@ -349,8 +509,9 @@ var CommandPaletteController = class extends Controller {
     for (const option of this.optionTargets) {
       option.removeAttribute("hidden");
     }
-    if (this.hasEmptyTarget) this.emptyTarget.hidden = true;
-    this.#setActiveIndex(0);
+    const hasSelectableOption = this.#visibleOptions.length > 0;
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = hasSelectableOption;
+    this.#setActiveIndex(hasSelectableOption ? 0 : -1);
   }
   get #visibleOptions() {
     return this.optionTargets.filter(
@@ -358,23 +519,66 @@ var CommandPaletteController = class extends Controller {
     );
   }
   #isDisabled(option) {
-    return option.dataset.disabled === "true";
+    return option.dataset.disabled === "true" || option.getAttribute("aria-disabled") === "true";
+  }
+  /** Synchronizes every option's controller-owned selection and disabled semantics. */
+  #syncOptionSemantics() {
+    for (const option of this.optionTargets) this.#syncOptionSemanticsFor(option);
+  }
+  /** Reflects `data-disabled` to ARIA without losing a pre-existing authored value. */
+  #syncOptionSemanticsFor(option) {
+    if (!option.hasAttribute("aria-selected")) option.setAttribute("aria-selected", "false");
+    const originalAttribute = _CommandPaletteController.#ORIGINAL_ARIA_DISABLED;
+    const originalValue = option.getAttribute(originalAttribute);
+    if (option.dataset.disabled === "true") {
+      if (originalValue === null) {
+        option.setAttribute(
+          originalAttribute,
+          option.getAttribute("aria-disabled") ?? _CommandPaletteController.#ABSENT_ARIA_DISABLED
+        );
+      }
+      option.setAttribute("aria-disabled", "true");
+      return;
+    }
+    if (originalValue === null) return;
+    if (originalValue === _CommandPaletteController.#ABSENT_ARIA_DISABLED) {
+      option.removeAttribute("aria-disabled");
+    } else {
+      option.setAttribute("aria-disabled", originalValue);
+    }
+    option.removeAttribute(originalAttribute);
   }
   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();
-    }
+    if (this.#composition.isComposing(event) || !this.#matchesHotkey(event)) return;
+    event.preventDefault();
+    this.toggle();
   };
+  /** Matches the configured `mod+key` or bare-key hotkey without extra modifiers. */
+  #matchesHotkey(event) {
+    const hotkey = this.#parseHotkey();
+    if (!hotkey || event.altKey || event.shiftKey) return false;
+    if (hotkey.requiresMod) {
+      const hasExactlyOneModKey = event.metaKey !== event.ctrlKey;
+      if (!hasExactlyOneModKey) return false;
+    } else if (event.metaKey || event.ctrlKey) {
+      return false;
+    }
+    return event.key.toLowerCase() === hotkey.key;
+  }
+  /** Parses the intentionally small public hotkey grammar. */
+  #parseHotkey() {
+    const parts = this.hotkeyValue.toLowerCase().split("+");
+    if (parts.length === 1 && parts[0] && parts[0] !== "mod") {
+      return { key: parts[0], requiresMod: false };
+    }
+    if (parts.length === 2 && parts[0] === "mod" && parts[1]) {
+      return { key: parts[1], requiresMod: true };
+    }
+    return null;
+  }
   /** Resets transient open state so reconnect starts from a predictable closed snapshot. */
   #resetToClosedState() {
     this.#activeIndex = -1;

data/dist/controllers/confirm_controller.js

@@ -2,6 +2,90 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/confirm_controller.ts
 
+// src/utils/escape_layer.ts
+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/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 {
@@ -15,6 +99,8 @@ var FocusTrap = class {
   #inertedSiblings = [];
   /** Whether the modal side effects are currently applied. */
   #activeState = false;
+  /** Registers the trap on the shared Escape stack while active (see {@link EscapeLayer}). */
+  #escapeLayer = new EscapeLayer();
   /** Returns the trapped element; called on every operation for the live target. */
   #getContainer;
   /** Closing/focus hooks; see {@link FocusTrapOptions}. */
@@ -50,6 +136,8 @@ var FocusTrap = class {
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    const onEscape = this.#options.onEscape;
+    if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
   }
   /**
@@ -62,6 +150,7 @@ var FocusTrap = class {
   deactivate({ restoreFocus = true } = {}) {
     if (!this.#activeState) return;
     this.#activeState = false;
+    this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
     document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
     if (this.#scrollLocked) {
@@ -90,15 +179,12 @@ var FocusTrap = class {
   #onBeforeCache = () => {
     this.deactivate({ restoreFocus: false });
   };
-  /** Handles `Escape` (delegated) and `Tab` (focus trap) while active. */
+  /**
+   * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
+   * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
+   * which layer currently owns Escape.
+   */
   #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. */