stimeo-ui 0.7.0 → 0.9.0

data/dist/controllers/input_mask_controller.js

@@ -1,5 +1,74 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/input_mask_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/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+
+// src/utils/half_width.ts
+var FULL_WIDTH_SHIFT = 65248;
+function halfWidthChar(char) {
+  if (char >= "\uFF01" && char <= "\uFF5E") {
+    return String.fromCharCode(char.charCodeAt(0) - FULL_WIDTH_SHIFT);
+  }
+  return char === "\u3000" ? " " : char;
+}
+
 // src/controllers/input_mask_controller.ts
 var DEFAULT_TOKENS = {
   "9": "\\d",
@@ -7,6 +76,11 @@ var DEFAULT_TOKENS = {
   "*": "[A-Za-z0-9]"
 };
 var UNMASK_ATTR = "data-stimeo--input-mask-unmask";
+function acceptedForm(regex, char) {
+  if (regex.test(char)) return char;
+  const half = halfWidthChar(char);
+  return half !== char && regex.test(half) ? half : null;
+}
 function applyMask(value, pattern, tokens) {
   let masked = "";
   let unmasked = "";
@@ -18,17 +92,21 @@ function applyMask(value, pattern, tokens) {
     if (regex) totalTokens += 1;
     if (valueIndex >= value.length) continue;
     if (regex) {
-      while (valueIndex < value.length && !regex.test(value[valueIndex] ?? "")) valueIndex += 1;
-      const char = value[valueIndex];
-      if (char === void 0) continue;
-      masked += char;
-      unmasked += char;
+      let taken = null;
+      while (valueIndex < value.length) {
+        taken = acceptedForm(regex, value[valueIndex] ?? "");
+        if (taken !== null) break;
+        valueIndex += 1;
+      }
+      if (taken === null) continue;
+      masked += taken;
+      unmasked += taken;
       tokenFlags.push(true);
       valueIndex += 1;
     } else {
       masked += patternChar;
       tokenFlags.push(false);
-      if (value[valueIndex] === patternChar) valueIndex += 1;
+      if (halfWidthChar(value[valueIndex] ?? "") === halfWidthChar(patternChar)) valueIndex += 1;
     }
   }
   return {
@@ -38,67 +116,169 @@ function applyMask(value, pattern, tokens) {
     tokenFlags
   };
 }
+function compileTokens(declaration) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...parseTokens(declaration) })) {
+    try {
+      map.set(key, new RegExp(`^(?:${source})$`));
+    } catch {
+    }
+  }
+  return map;
+}
+function parseTokens(declaration) {
+  let parsed;
+  try {
+    parsed = JSON.parse(declaration);
+  } catch {
+    return {};
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+  const tokens = {};
+  for (const [key, source] of Object.entries(parsed)) {
+    if (typeof source === "string") tokens[key] = source;
+  }
+  return tokens;
+}
+function deletionOf(event) {
+  const inputType = event instanceof InputEvent ? event.inputType : "";
+  if (!inputType.startsWith("delete")) return null;
+  return inputType.endsWith("Forward") ? "forward" : "backward";
+}
+function tokenCharOffset(tokenFlags, n) {
+  let seen = 0;
+  for (let i = 0; i < tokenFlags.length; i += 1) {
+    if (!tokenFlags[i]) continue;
+    seen += 1;
+    if (seen === n) return i;
+  }
+  return -1;
+}
 var InputMaskController = class extends Controller {
   static values = {
     pattern: { type: String, default: "" },
-    tokens: { type: Object, default: {} },
+    tokens: { type: String, default: "" },
     unmaskToHidden: { type: Boolean, default: true }
   };
   static actions = ["format"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
+  /** The value this controller last committed, and the baseline both events compare. */
+  #lastValue = null;
+  #started = false;
+  /** Validated token map; the hot path never parses the `tokens` declaration. */
+  #tokens = compileTokens("");
+  /** Holds mid-composition input so the IME's uncommitted text is never rewritten. */
+  #composition = new CompositionTracker({ onEnd: () => this.#reformat("edit") });
+  /** Re-parses the declaration and re-formats under the tokens it now selects. */
+  tokensValueChanged() {
+    this.#tokens = compileTokens(this.tokensValue);
+    if (this.#started) this.#reformat("reconcile");
+  }
+  patternValueChanged() {
+    if (this.#started) this.#reformat("reconcile");
+  }
+  /** Clears a sink it stops maintaining so a submit cannot carry a stale raw value. */
+  unmaskToHiddenValueChanged() {
+    if (!this.#started) return;
+    if (!this.unmaskToHiddenValue) {
+      const sink = this.#resolveSink();
+      if (sink) sink.value = "";
+    }
+    this.#reformat("reconcile");
+  }
   connect() {
-    this.#apply();
+    this.#started = true;
+    this.#composition.observe(this.element);
+    this.#lastValue = this.element.value;
+    this.#reformat("reconcile");
+  }
+  disconnect() {
+    this.#started = false;
+    this.#composition.disconnect();
   }
   /** Formats the field on input, preserving the caret. Bound via `data-action`. */
-  format() {
-    this.#apply();
+  format(event) {
+    if (this.#composition.isComposing(event)) return;
+    this.#reformat("edit", deletionOf(event));
   }
-  /** Core reformat: mask the current value, restore the caret, sync, and announce. */
-  #apply() {
-    if (!this.patternValue) return;
+  /**
+   * Core reformat: mask the current value, restore the caret, sync the sink and
+   * the state hooks, and report a moved value under the event `cause` selects.
+   */
+  #reformat(cause, deletion = null) {
     const input = this.element;
-    const previous = input.value;
-    const caret = input.selectionStart ?? previous.length;
-    const tokens = this.#tokenRegexes();
-    const significant = this.#countSignificant(previous.slice(0, caret), tokens);
-    const result = applyMask(previous, this.patternValue, tokens);
+    const raw = input.value;
+    if (this.patternValue === "") {
+      this.#flag("data-mask-complete", false);
+      this.#flag("data-mask-empty", raw.length === 0);
+      this.#lastValue = raw;
+      return;
+    }
+    const caret = input.selectionStart ?? raw.length;
+    let anchor = this.#significantBefore(raw.slice(0, caret));
+    let result = applyMask(raw, this.patternValue, this.#tokens);
+    if (deletion !== null && result.masked === this.#lastValue) {
+      const target = deletion === "backward" ? anchor : anchor + 1;
+      const offset = tokenCharOffset(result.tokenFlags, target);
+      if (offset >= 0) {
+        anchor = target - 1;
+        result = applyMask(
+          result.masked.slice(0, offset) + result.masked.slice(offset + 1),
+          this.patternValue,
+          this.#tokens
+        );
+      }
+    }
+    if (input.readOnly || input.disabled || inheritsFieldsetDisabled(input)) {
+      this.#publish(result, raw);
+      this.#lastValue = raw;
+      return;
+    }
     input.value = result.masked;
-    this.#restoreCaret(input, result.tokenFlags, significant);
+    this.#restoreCaret(result.tokenFlags, anchor);
+    this.#publish(result, result.masked);
+    if (result.masked === this.#lastValue) return;
+    this.#lastValue = result.masked;
+    const detail = { masked: result.masked, unmasked: result.unmasked, complete: result.complete };
+    if (cause === "edit") this.dispatch("change", { detail });
+    else this.dispatch("reconcile", { detail });
+  }
+  /** Syncs the raw-value sink and the state hooks for the `shown` field text. */
+  #publish(result, shown) {
     if (this.unmaskToHiddenValue) {
-      const unmask = this.#unmaskField();
-      if (unmask) unmask.value = result.unmasked;
+      const sink = this.#resolveSink();
+      if (sink) sink.value = result.unmasked;
     }
     this.#flag("data-mask-complete", result.complete);
-    this.#flag("data-mask-empty", result.masked.length === 0);
-    if (result.masked !== previous) {
-      this.dispatch("change", {
-        detail: { masked: result.masked, unmasked: result.unmasked, complete: result.complete }
-      });
-    }
+    this.#flag("data-mask-empty", shown.length === 0);
+  }
+  /**
+   * How many token slots the text before the caret fills. Masking that prefix is
+   * what makes a rejected character — or a literal that also matches a token —
+   * count exactly as the rendering counts it, so the caret cannot drift.
+   */
+  #significantBefore(prefix) {
+    return applyMask(prefix, this.patternValue, this.#tokens).unmasked.length;
   }
   /** Places the caret after the `n`-th token char (skipping following literals). */
-  #restoreCaret(input, tokenFlags, n) {
+  #restoreCaret(tokenFlags, n) {
     let position;
     if (n <= 0) {
       let i = 0;
       while (i < tokenFlags.length && !tokenFlags[i]) i += 1;
       position = i;
     } else {
-      let seen = 0;
-      position = tokenFlags.length;
-      for (let i = 0; i < tokenFlags.length; i += 1) {
-        if (!tokenFlags[i]) continue;
-        seen += 1;
-        if (seen === n) {
-          let j = i + 1;
-          while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
-          position = j;
-          break;
-        }
+      const offset = tokenCharOffset(tokenFlags, n);
+      if (offset < 0) {
+        position = tokenFlags.length;
+      } else {
+        let j = offset + 1;
+        while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
+        position = j;
       }
     }
     try {
-      input.setSelectionRange(position, position);
+      this.element.setSelectionRange(position, position);
     } catch {
     }
   }
@@ -107,52 +287,47 @@ var InputMaskController = class extends Controller {
    * can coexist in one form:
    *
    * 1. **Explicit pairing** — a sink whose attribute value names this input's
-   *    `id` (`data-stimeo--input-mask-unmask="zip"`), looked up across the form
-   *    (or the document when the input is form-less).
-   * 2. **Nearest container** — otherwise, walking up from the input (stopping at
-   *    the form boundary), the first *value-less* sink in the closest ancestor.
-   *    Wrapped input+sink pairs each find their own sink, and the single
-   *    form-level sink keeps working unchanged. A sink claimed by another
-   *    input's id is never matched here.
+   *    `id` (`data-stimeo--input-mask-unmask="zip"`).
+   * 2. **Nearest container** — otherwise, walking up from the input, the first
+   *    *value-less* sink in the closest ancestor. Wrapped input+sink pairs each
+   *    find their own sink, and the single form-level sink keeps working
+   *    unchanged. A sink claimed by another input's id is never matched here.
+   *
+   * Both steps only ever consider the associated form's own controls, so a sink
+   * belonging to a different form (or to none) is never written, while one the
+   * `form` attribute associates from elsewhere in the document still resolves —
+   * for either the input or the sink, neither of which needs to contain or be
+   * contained by the form. A form-less input reads the document instead.
    */
-  #unmaskField() {
+  #resolveSink() {
+    const candidates = this.#sinkCandidates();
     const id = this.element.id;
     if (id.length > 0) {
-      const scope = this.element.form ?? document;
-      const quoted = id.replace(/["\\]/g, "\\$&");
-      const paired = scope.querySelector(`input[${UNMASK_ATTR}="${quoted}"]`);
+      const paired = candidates.find((sink) => sink.getAttribute(UNMASK_ATTR) === id);
       if (paired) return paired;
     }
+    const free = candidates.filter((sink) => sink.getAttribute(UNMASK_ATTR) === "");
     for (let node = this.element.parentElement; node !== null; node = node.parentElement) {
-      const sink = node.querySelector(`input[${UNMASK_ATTR}=""]`);
+      const ancestor = node;
+      const sink = free.find((candidate) => ancestor.contains(candidate));
       if (sink) return sink;
-      if (node === this.element.form) break;
     }
     return null;
   }
-  /** Counts characters in `text` that fill any token (the caret-significant chars). */
-  #countSignificant(text, tokens) {
-    let count = 0;
-    for (const char of text) {
-      for (const regex of tokens.values()) {
-        if (regex.test(char)) {
-          count += 1;
-          break;
-        }
-      }
-    }
-    return count;
-  }
-  /** Compiles the effective token map (defaults with the user `tokens` merged over). */
-  #tokenRegexes() {
-    const map = /* @__PURE__ */ new Map();
-    for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...this.tokensValue })) {
-      try {
-        map.set(key, new RegExp(`^(?:${source})$`));
-      } catch {
-      }
+  /**
+   * Every sink the input's form owns, in document order — one collection read per
+   * resolution, so the cost tracks the form's own controls and not the depth of
+   * the markup around it. `form.elements` lists controls the `form` attribute
+   * associates from anywhere in the document, and lists nothing another form owns.
+   */
+  #sinkCandidates() {
+    const form = this.element.form;
+    if (form === null) {
+      return Array.from(document.querySelectorAll(`input[${UNMASK_ATTR}]`));
     }
-    return map;
+    return Array.from(form.elements).filter(
+      (element) => element instanceof HTMLInputElement && element.hasAttribute(UNMASK_ATTR)
+    );
   }
   /** Sets a boolean `data-*` flag to `"true"` when `on`, else removes it. */
   #flag(name, on) {

data/dist/controllers/masonry_controller.js

@@ -58,16 +58,72 @@ var LayoutObserver = class {
   }
 };
 
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/controllers/masonry_controller.ts
 var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
+var DEFAULT_MIN_COLUMN_WIDTH = 240;
+var DEFAULT_GAP = 16;
+function usableNumber(value, fallback) {
+  return Number.isFinite(value) ? value : fallback;
+}
 var MasonryController = class extends Controller {
   static targets = ["item"];
   static values = {
-    minColumnWidth: { type: Number, default: 240 },
-    gap: { type: Number, default: 16 }
+    minColumnWidth: { type: Number, default: DEFAULT_MIN_COLUMN_WIDTH },
+    gap: { type: Number, default: DEFAULT_GAP }
   };
   static events = ["layout"];
-  #layout = new LayoutObserver(() => this.#relayout());
+  /**
+   * The declared numbers after validation, so the layout path never sees a value
+   * it cannot compute with. Both are resolved once per declaration change rather
+   * than on every pass.
+   */
+  #minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH;
+  #gap = DEFAULT_GAP;
+  /**
+   * Collapses every re-layout trigger of one DOM mutation into a single pass, and
+   * refuses to run before `connect()` or after `disconnect()`.
+   *
+   * The triggers arrive in bursts — a resize stream, a morph that syncs several
+   * attributes, a batch of rows — and each pass measures every item, so folding
+   * them keeps the work proportional to the batch rather than to the events in it.
+   */
+  #reconcile = new MicrotaskCoalescer(() => this.#relayout());
+  /** Items that left the target set and still carry the column hook. */
+  #released = /* @__PURE__ */ new Set();
+  #layout = new LayoutObserver(() => this.#reconcile.schedule());
   #mutationObserver = null;
   /** Last published column count, so `layout` fires only on real changes. */
   #lastColumns = 0;
@@ -77,20 +133,49 @@ var MasonryController = class extends Controller {
    * first pass ran before they settled; `load` does not bubble, so this is bound in
    * the capture phase to catch every descendant.
    */
-  #onLoad = () => this.#relayout();
+  #onLoad = () => this.#reconcile.schedule();
+  /** Resolves the declared column width once, falling back when it is unreadable. */
+  minColumnWidthValueChanged() {
+    this.#minColumnWidth = usableNumber(this.minColumnWidthValue, DEFAULT_MIN_COLUMN_WIDTH);
+    this.#reconcile.schedule();
+  }
+  /** Resolves the declared gap once, falling back when it is unreadable. */
+  gapValueChanged() {
+    this.#gap = usableNumber(this.gapValue, DEFAULT_GAP);
+    this.#reconcile.schedule();
+  }
+  /** Packs an element that became an item without moving in the DOM. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Queues the column hook of an element that stopped being an item for removal.
+   *
+   * The removal is queued rather than immediate because teardown reports every
+   * target as disconnected: doing it here would strip the whole grid just before
+   * a Turbo snapshot is taken. {@link MicrotaskCoalescer.cancel} drops the queue
+   * with the pass, so only a genuine target change reaches it.
+   */
+  itemTargetDisconnected(item) {
+    this.#released.add(item);
+    this.#reconcile.schedule();
+  }
   /** Observes size/content changes and performs the first layout pass. */
   connect() {
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
     if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.#relayout());
+      this.#mutationObserver = new MutationObserver(() => this.#reconcile.schedule());
       this.#mutationObserver.observe(this.element, { childList: true, subtree: true });
     }
     this.element.addEventListener("load", this.#onLoad, true);
     this.#relayout();
+    this.#reconcile.activate();
   }
   /** Releases both observers and the load listener so nothing fires after detach. */
   disconnect() {
+    this.#reconcile.cancel();
+    this.#released.clear();
     this.#layout.disconnect();
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
@@ -99,26 +184,53 @@ var MasonryController = class extends Controller {
   }
   /**
    * Recomputes the column count and assigns every item to the shortest column.
-   * Runs automatically on connect, on resize, on item add/remove, and when a
-   * descendant resource loads (private — there is no public action; the observers
-   * and the capture-phase `load` listener drive it). Items are walked in DOM
-   * order; each lands in the column with the least accumulated height, which
-   * keeps the packing balanced without reordering the DOM.
+   * Runs automatically on connect, on resize, on item add/remove, when a declared
+   * number changes, and when a descendant resource loads (private — there is no
+   * public action; the observers, the target callbacks and the capture-phase
+   * `load` listener drive it). Items are walked in DOM order; each lands in the
+   * column with the least accumulated height, which keeps the packing balanced
+   * without reordering the DOM.
+   *
+   * Every box is measured before anything is written. Interleaving the two would
+   * make a consumer's `data-column` rule invalidate style once per item, and the
+   * next measurement then has to settle layout again — once per item instead of
+   * once per pass. The assignment is independent of the measurement because the
+   * columns are uniform in width, so the order of the two passes does not change
+   * the result.
+   *
+   * @stimeoRenderRoot
    */
   #relayout() {
     const items = this.itemTargets;
     const columns = this.#columnCount();
+    const boxes = items.map((item) => item.getBoundingClientRect().height);
+    let changed = false;
+    if (this.#released.size > 0) {
+      const owned = new Set(items);
+      for (const released of this.#released) {
+        if (owned.has(released)) continue;
+        if (released.hasAttribute("data-column")) {
+          released.removeAttribute("data-column");
+          changed = true;
+        }
+      }
+      this.#released.clear();
+    }
     const heights = new Array(columns).fill(0);
-    for (const item of items) {
+    items.forEach((item, index) => {
       let shortest = 0;
       for (let col = 1; col < columns; col++) {
         if ((heights[col] ?? 0) < (heights[shortest] ?? 0)) shortest = col;
       }
-      item.setAttribute("data-column", String(shortest));
-      heights[shortest] = (heights[shortest] ?? 0) + item.getBoundingClientRect().height + this.gapValue;
-    }
+      const assigned = String(shortest);
+      if (item.getAttribute("data-column") !== assigned) {
+        item.setAttribute("data-column", assigned);
+        changed = true;
+      }
+      heights[shortest] = (heights[shortest] ?? 0) + (boxes[index] ?? 0) + this.#gap;
+    });
     this.element.style.setProperty(COLUMNS_PROPERTY, String(columns));
-    if (columns !== this.#lastColumns) {
+    if (columns !== this.#lastColumns || changed) {
       this.#lastColumns = columns;
       this.dispatch("layout", { detail: { columns } });
     }
@@ -131,9 +243,9 @@ var MasonryController = class extends Controller {
    */
   #columnCount() {
     const width = this.element.getBoundingClientRect().width;
-    const denominator = this.minColumnWidthValue + this.gapValue;
+    const denominator = this.#minColumnWidth + this.#gap;
     if (width <= 0 || denominator <= 0) return 1;
-    return Math.max(1, Math.floor((width + this.gapValue) / denominator));
+    return Math.max(1, Math.floor((width + this.#gap) / denominator));
   }
 };