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

data/dist/controllers/context_menu_controller.js

@@ -1,17 +1,171 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/context_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/context_menu_controller.ts
 var ContextMenuController = class extends Controller {
   static targets = ["region", "menu", "item"];
   static actions = ["activate", "onItemKeydown", "onRegionKeydown", "open"];
-  /** Starts closed and registers the outside-click listener. */
+  #timers = new SafeTimeout();
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** Starts closed and registers delegated activation and outside-pointer listeners. */
   connect() {
     this.#closeMenu();
-    document.addEventListener("click", this.#onOutsideClick);
+    this.element.addEventListener("click", this.#onItemClickCapture, true);
+    document.addEventListener("click", this.#onOutsidePointer);
+    document.addEventListener("contextmenu", this.#onOutsidePointer);
   }
-  /** Removes the document-level listener registered in {@link connect}. */
+  /** Releases the listeners, stack membership, and pending Tab-close task. */
   disconnect() {
-    document.removeEventListener("click", this.#onOutsideClick);
+    this.#timers.clearAll();
+    this.#escapeLayer.deactivate();
+    this.element.removeEventListener("click", this.#onItemClickCapture, true);
+    document.removeEventListener("click", this.#onOutsidePointer);
+    document.removeEventListener("contextmenu", this.#onOutsidePointer);
   }
   /**
    * Opens the menu from a `contextmenu` event: suppresses the native menu and
@@ -36,11 +190,17 @@ var ContextMenuController = class extends Controller {
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        if (items.length > 0) items[(currentIndex + 1) % items.length]?.focus();
+        if (items.length > 0) {
+          const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        }
         break;
       case "ArrowUp":
         event.preventDefault();
-        if (items.length > 0) items[(currentIndex - 1 + items.length) % items.length]?.focus();
+        if (items.length > 0) {
+          const previousIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+          items[(previousIndex + items.length) % items.length]?.focus();
+        }
         break;
       case "Home":
         event.preventDefault();
@@ -50,12 +210,9 @@ var ContextMenuController = class extends Controller {
         event.preventDefault();
         items[items.length - 1]?.focus();
         break;
-      case "Escape":
-        event.preventDefault();
-        this.#closeAndRestore();
-        break;
       case "Tab":
-        this.#closeMenu();
+        this.#timers.clearAll();
+        this.#timers.set(() => this.#closeMenu(), 0);
         break;
     }
   }
@@ -66,6 +223,11 @@ var ContextMenuController = class extends Controller {
   /** Opens the menu at viewport coordinates `(x, y)` and focuses the first item. */
   #openAt(x, y) {
     if (!this.hasMenuTarget) return;
+    this.#timers.clearAll();
+    this.#escapeLayer.activate(document, {
+      onDismiss: () => this.#closeAndRestore(),
+      claims: claimsWhileFocusWithin(this.element)
+    });
     this.menuTarget.style.setProperty("--stimeo-context-menu-x", `${x}px`);
     this.menuTarget.style.setProperty("--stimeo-context-menu-y", `${y}px`);
     this.menuTarget.hidden = false;
@@ -74,6 +236,8 @@ var ContextMenuController = class extends Controller {
   }
   /** Hides the menu and reflects the collapsed state on the region. */
   #closeMenu() {
+    this.#timers.clearAll();
+    this.#escapeLayer.deactivate();
     if (!this.hasMenuTarget) return;
     this.menuTarget.hidden = true;
     if (this.hasRegionTarget) this.regionTarget.setAttribute("data-state", "closed");
@@ -83,10 +247,24 @@ var ContextMenuController = class extends Controller {
     this.#closeMenu();
     if (this.hasRegionTarget) this.regionTarget.focus();
   }
-  /** Closes the menu when a click lands outside the controller's element. */
-  #onOutsideClick = (event) => {
+  /** Closes when a click or context-menu invocation lands outside this instance. */
+  #onOutsidePointer = (event) => {
     if (this.#isOpen && !this.element.contains(event.target)) this.#closeMenu();
   };
+  /**
+   * Captures clicks so `aria-disabled` commands cannot reach consumer handlers.
+   * Native Enter/Space activation also synthesizes a click and is blocked here.
+   */
+  #onItemClickCapture = (event) => {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    const disabled = this.itemTargets.some(
+      (item) => item.getAttribute("aria-disabled") === "true" && item.contains(target)
+    );
+    if (!disabled) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
   /** Menu items eligible for roving focus (excludes disabled / hidden). */
   get #navigableItems() {
     return this.itemTargets.filter((item) => this.#isNavigable(item));

data/dist/controllers/count_up_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/count_up_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
@@ -32,7 +39,7 @@ var CountUpController = class extends Controller {
     this.#finalText = this.element.textContent ?? "";
     const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
     if (Number.isNaN(target)) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;

data/dist/controllers/countdown_controller.js

@@ -107,8 +107,8 @@ var CountdownController = class extends Controller {
    * paused (or completed) one resets the displayed amount but stays paused until the
    * user resumes — it never silently restarts. The run state is read from the DOM,
    * not re-derived from the declarative `autostart` Value (which only governs the
-   * initial state on connect); re-deriving it would override a user's pause, the same
-   * anti-pattern the Turbo-lifecycle guide warns about.
+   * initial state on connect); re-deriving it would override a user's pause —
+   * the DOM, not a re-run of declarative config, is the source of truth.
    */
   reset() {
     const wasRunning = this.#state === "running";

data/dist/controllers/currency_input_controller.js

@@ -0,0 +1,147 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/currency_input_controller.ts
+var CurrencyInputController = class extends Controller {
+  static targets = ["display", "field", "srValue"];
+  static values = {
+    locale: { type: String, default: "en-US" },
+    currency: { type: String, default: "" },
+    precision: { type: Number, default: 2 }
+  };
+  static actions = ["format", "onInput"];
+  static events = ["change"];
+  /** Last committed numeric value, to suppress duplicate `change` dispatches. */
+  #lastValue = null;
+  /** Normalizes any pre-filled display value to its fixed-precision form. */
+  connect() {
+    if (!this.hasDisplayTarget) return;
+    const parsed = this.#parse(this.displayTarget.value);
+    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);
+    if (this.displayTarget.value.trim() !== "") {
+      this.#reformat(true);
+    } else {
+      this.#reflect(null, "");
+    }
+  }
+  /** Re-groups digits as the user types, preserving the caret position. */
+  onInput() {
+    this.#reformat(false);
+  }
+  /** Applies the fixed-precision rounding on blur. */
+  format() {
+    this.#reformat(true);
+  }
+  /**
+   * Parses the display value, rewrites it grouped (optionally at fixed
+   * precision), keeps the caret stable by digit count, and syncs the field,
+   * the screen-reader span, and the `change` event.
+   */
+  #reformat(fixedPrecision) {
+    if (!this.hasDisplayTarget) return;
+    const raw = this.displayTarget.value;
+    const number = this.#parse(raw);
+    if (number === null) {
+      this.displayTarget.value = "";
+      this.#reflect(null, "");
+      return;
+    }
+    const value = fixedPrecision ? round(number, this.precisionValue) : number;
+    const caret = this.displayTarget.selectionStart;
+    const digitsBeforeCaret = typeof caret === "number" ? countDigits(raw.slice(0, caret)) : null;
+    const formatted = this.#formatNumber(value, fixedPrecision);
+    this.displayTarget.value = formatted;
+    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);
+    this.#reflect(value, formatted);
+  }
+  /** Restores the caret to sit just after the n-th digit of the new string. */
+  #restoreCaret(formatted, digitsBefore) {
+    let seen = 0;
+    let position = formatted.length;
+    for (let i = 0; i < formatted.length; i++) {
+      if (seen >= digitsBefore) {
+        position = i;
+        break;
+      }
+      if (/\d/.test(formatted[i])) seen += 1;
+    }
+    try {
+      this.displayTarget.setSelectionRange(position, position);
+    } catch {
+    }
+  }
+  /** Writes the normalized value to the field, the SR span, and `change`. */
+  #reflect(value, formatted) {
+    const isEmpty = value === null;
+    if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
+    if (this.hasSrValueTarget) {
+      this.srValueTarget.textContent = isEmpty ? "" : this.#accessibleText(value);
+    }
+    this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+    if (value !== this.#lastValue) {
+      this.#lastValue = value;
+      if (!isEmpty) this.dispatch("change", { detail: { value, formatted } });
+    }
+  }
+  /** Parses arbitrary input text into a finite number, or `null` when blank. */
+  #parse(text) {
+    if (text.trim() === "") return null;
+    const { decimal } = this.#separators();
+    let cleaned = "";
+    let sawDot = false;
+    for (let i = 0; i < text.length; i++) {
+      const ch = text[i];
+      if (ch >= "0" && ch <= "9") cleaned += ch;
+      else if ((ch === "-" || ch === "+") && cleaned === "") cleaned += ch;
+      else if ((ch === decimal || ch === ".") && !sawDot) {
+        cleaned += ".";
+        sawDot = true;
+      }
+    }
+    if (cleaned === "" || cleaned === "-" || cleaned === "+" || cleaned === ".") return null;
+    const value = Number(cleaned);
+    return Number.isFinite(value) ? value : null;
+  }
+  /** Formats a number with grouping for the display field. */
+  #formatNumber(value, fixedPrecision) {
+    const formatter = new Intl.NumberFormat(this.localeValue, {
+      useGrouping: true,
+      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,
+      maximumFractionDigits: this.precisionValue
+    });
+    return formatter.format(value);
+  }
+  /** The text announced to assistive tech (currency-aware when configured). */
+  #accessibleText(value) {
+    if (this.currencyValue) {
+      return new Intl.NumberFormat(this.localeValue, {
+        style: "currency",
+        currency: this.currencyValue
+      }).format(value);
+    }
+    return new Intl.NumberFormat(this.localeValue, {
+      minimumFractionDigits: this.precisionValue,
+      maximumFractionDigits: this.precisionValue
+    }).format(value);
+  }
+  /** Resolves the locale's grouping and decimal separator characters. */
+  #separators() {
+    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);
+    const group = parts.find((p) => p.type === "group")?.value ?? ",";
+    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    return { group, decimal };
+  }
+};
+function countDigits(text) {
+  let count = 0;
+  for (const ch of text) if (ch >= "0" && ch <= "9") count += 1;
+  return count;
+}
+function round(value, precision) {
+  const factor = 10 ** Math.max(0, precision);
+  const rounded = Math.round(value * factor) / factor;
+  return rounded === 0 ? 0 : rounded;
+}
+
+export { CurrencyInputController };
+//# sourceMappingURL=currency_input_controller.js.map
+//# sourceMappingURL=currency_input_controller.js.map

data/dist/controllers/data_grid_controller.js

@@ -0,0 +1,168 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/data_grid_controller.ts
+var SORT_CYCLE = ["none", "ascending", "descending"];
+function nextSortDirection(current) {
+  const index = SORT_CYCLE.indexOf(current);
+  const from = index < 0 ? 0 : index;
+  return SORT_CYCLE[(from + 1) % SORT_CYCLE.length] ?? "ascending";
+}
+var DataGridController = class extends Controller {
+  static targets = ["columnHeader", "row", "cell"];
+  static values = {
+    selection: { type: String, default: "none" }
+  };
+  static actions = ["onKeydown", "sort", "toggleSelect"];
+  static events = ["selectionchange", "sort"];
+  /** Establishes a single tab stop across all navigable cells/headers. */
+  connect() {
+    const cells = this.#navigableCells();
+    const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
+    this.#setActiveCell(active, { focus: false });
+  }
+  /**
+   * Keeps `aria-multiselectable` in step with the `selection` Value. Fires on connect
+   * (so it self-heals after a Turbo morph) and on any runtime change, so the ARIA
+   * never drifts from the selection logic, which reads `selectionValue` live.
+   */
+  selectionValueChanged() {
+    this.#syncSelectable();
+  }
+  /**
+   * Mirrors `selection="multiple"` onto `aria-multiselectable` (APG Grid) so SRs
+   * announce that more than one row can be selected; cleared for single/none so a
+   * grid never carries a misleading attribute.
+   */
+  #syncSelectable() {
+    if (this.selectionValue === "multiple") {
+      this.element.setAttribute("aria-multiselectable", "true");
+    } else {
+      this.element.removeAttribute("aria-multiselectable");
+    }
+  }
+  /** Cycles the activated column header's sort and emits `sort`. */
+  sort(event) {
+    const header = event.currentTarget;
+    if (!this.columnHeaderTargets.includes(header)) return;
+    const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
+    for (const other of this.columnHeaderTargets) {
+      other.setAttribute("aria-sort", other === header ? direction : "none");
+    }
+    this.#setActiveCell(header, { focus: false });
+    this.dispatch("sort", { detail: { column: header, direction } });
+  }
+  /** Toggles selection of the row owning the event target. Bound optionally. */
+  toggleSelect(event) {
+    const row = event.currentTarget.closest("[role='row']");
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+  }
+  /** Grid navigation + sort/select activation. Bound to cells and headers. */
+  onKeydown(event) {
+    const cell = event.currentTarget;
+    const matrix = this.#matrix();
+    const position = this.#locate(matrix, cell);
+    if (!position) return;
+    const [row, col] = position;
+    const rowCells = matrix[row] ?? [];
+    let target;
+    switch (event.key) {
+      case "ArrowRight":
+        target = this.#cellInRow(matrix, row, col + 1);
+        break;
+      case "ArrowLeft":
+        target = this.#cellInRow(matrix, row, Math.max(col - 1, 0));
+        break;
+      case "ArrowDown":
+        target = this.#cellInRow(matrix, Math.min(row + 1, matrix.length - 1), col);
+        break;
+      case "ArrowUp":
+        target = this.#cellInRow(matrix, Math.max(row - 1, 0), col);
+        break;
+      case "Home":
+        target = event.ctrlKey ? this.#cellInRow(matrix, 0, 0) : rowCells[0];
+        break;
+      case "End":
+        target = event.ctrlKey ? this.#cellInRow(matrix, matrix.length - 1, Number.POSITIVE_INFINITY) : rowCells[rowCells.length - 1];
+        break;
+      case "Enter":
+      case " ":
+        this.#activate(cell);
+        event.preventDefault();
+        return;
+      default:
+        return;
+    }
+    if (target) {
+      event.preventDefault();
+      this.#setActiveCell(target, { focus: true });
+    }
+  }
+  /** Performs a header's sort or a cell row's selection toggle on activation. */
+  #activate(cell) {
+    if (this.columnHeaderTargets.includes(cell)) {
+      this.#cycleSort(cell);
+      return;
+    }
+    if (this.selectionValue === "none") return;
+    const row = cell.closest("[role='row']");
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+  }
+  /** Shared sort logic for both click and keyboard activation. */
+  #cycleSort(header) {
+    const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
+    for (const other of this.columnHeaderTargets) {
+      other.setAttribute("aria-sort", other === header ? direction : "none");
+    }
+    this.dispatch("sort", { detail: { column: header, direction } });
+  }
+  /** Toggles a row's `aria-selected`, honoring single vs. multiple selection. */
+  #toggleRow(row) {
+    const selected = row.getAttribute("aria-selected") === "true";
+    if (this.selectionValue === "single" && !selected) {
+      for (const other of this.rowTargets) other.setAttribute("aria-selected", "false");
+    }
+    row.setAttribute("aria-selected", selected ? "false" : "true");
+    const rows = this.rowTargets.filter((r) => r.getAttribute("aria-selected") === "true");
+    this.dispatch("selectionchange", { detail: { rows } });
+  }
+  /** Makes `cell` the single tabbable cell (roving) and optionally focuses it. */
+  #setActiveCell(cell, { focus }) {
+    if (!cell) return;
+    for (const candidate of this.#navigableCells()) {
+      candidate.tabIndex = candidate === cell ? 0 : -1;
+    }
+    if (focus) cell.focus();
+  }
+  /** All navigable elements (headers + cells) in DOM order. */
+  #navigableCells() {
+    return this.#matrix().flat();
+  }
+  /** The grid as rows of navigable cells, derived from each `role="row"`. */
+  #matrix() {
+    const navigable = /* @__PURE__ */ new Set([...this.columnHeaderTargets, ...this.cellTargets]);
+    const rows = Array.from(this.element.querySelectorAll("[role='row']"));
+    return rows.map(
+      (row) => Array.from(row.children).filter(
+        (child) => navigable.has(child)
+      )
+    ).filter((cells) => cells.length > 0);
+  }
+  /** Finds `[rowIndex, colIndex]` of `cell` within `matrix`, or null. */
+  #locate(matrix, cell) {
+    for (let row = 0; row < matrix.length; row++) {
+      const col = (matrix[row] ?? []).indexOf(cell);
+      if (col !== -1) return [row, col];
+    }
+    return null;
+  }
+  /** The cell at `[row, col]`, clamping `col` to that row's last cell. */
+  #cellInRow(matrix, row, col) {
+    const cells = matrix[row];
+    if (!cells || cells.length === 0) return void 0;
+    return cells[Math.min(col, cells.length - 1)];
+  }
+};
+
+export { DataGridController };
+//# sourceMappingURL=data_grid_controller.js.map
+//# sourceMappingURL=data_grid_controller.js.map