stimeo-ui 0.2.0 → 0.2.1

data/dist/controllers/stepper_controller.js

@@ -9,23 +9,32 @@ var StepperController = class extends Controller {
   };
   static actions = ["goto", "next", "prev"];
   static events = ["change"];
+  #isConnected = false;
   /** Normalizes an out-of-range initial `index` and renders the initial state. */
   connect() {
-    this.indexValue = this.#clampIndex(this.indexValue);
-    this.#render();
+    this.#isConnected = true;
+    this.#normalizeAndRender();
+  }
+  disconnect() {
+    this.#isConnected = false;
+  }
+  /** Re-renders when Turbo Morph or application code changes `index` at runtime. */
+  indexValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
   }
   /** Advances to the next step (ignored at the last step). */
   next() {
-    this.#moveTo(this.indexValue + 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) + 1);
   }
   /** Returns to the previous step (ignored at the first step). */
   prev() {
-    this.#moveTo(this.indexValue - 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) - 1);
   }
   /** Jumps to the step carried in the action's `index` param. */
   goto(event) {
     const target = Number(event.params.index);
-    if (!Number.isFinite(target)) return;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     this.#moveTo(target);
   }
   /**
@@ -35,16 +44,24 @@ var StepperController = class extends Controller {
    */
   #moveTo(target) {
     const total = this.stepTargets.length;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     if (target < 0 || target >= total) return;
-    if (target === this.indexValue) return;
-    if (this.linearValue && target > this.indexValue + 1) return;
-    const previous = this.indexValue;
+    const current = this.#clampIndex(this.indexValue);
+    if (target === current) return;
+    if (this.linearValue && target > current + 1) return;
+    const previous = current;
     this.indexValue = target;
-    this.#render();
+    this.#render(target);
     this.dispatch("change", {
       detail: { index: target, previous, step: this.stepTargets[target] }
     });
   }
+  /** Normalizes the public Value and reflects it without dispatching an action event. */
+  #normalizeAndRender() {
+    const normalized = this.#clampIndex(this.indexValue);
+    if (!Object.is(normalized, this.indexValue)) this.indexValue = normalized;
+    this.#render(normalized);
+  }
   /**
    * Derives each step's `data-state` and the current button's `aria-current`.
    *
@@ -52,8 +69,7 @@ var StepperController = class extends Controller {
    * contract assumes one operable button per step. If a step needs multiple
    * buttons, mark the navigational one first (or this would target the wrong one).
    */
-  #render() {
-    const current = this.indexValue;
+  #render(current) {
     this.stepTargets.forEach((step, index) => {
       step.dataset.state = index < current ? "complete" : index === current ? "current" : "upcoming";
       const button = step.querySelector("button");
@@ -68,7 +84,7 @@ var StepperController = class extends Controller {
   /** Constrains an index to `[0, total-1]` (or `0` when there are no steps). */
   #clampIndex(index) {
     const last = this.stepTargets.length - 1;
-    if (last < 0) return 0;
+    if (last < 0 || !Number.isFinite(index)) return 0;
     return Math.min(last, Math.max(0, Math.trunc(index)));
   }
 };

data/dist/controllers/stick_to_bottom_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/stick_to_bottom_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/stick_to_bottom_controller.ts
 var countElements = (nodes) => {
   let n = 0;
@@ -87,12 +94,9 @@ var StickToBottomController = class extends Controller {
     return this.hasContentTarget ? this.contentTarget : this.element;
   }
   #behavior() {
-    if (this.#prefersReducedMotion()) return "auto";
+    if (prefersReducedMotion()) return "auto";
     return this.behaviorValue === "smooth" ? "smooth" : "auto";
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { StickToBottomController };

data/dist/controllers/sticky_observer_controller.js

@@ -3,6 +3,12 @@ import { Controller } from '@hotwired/stimulus';
 // src/controllers/sticky_observer_controller.ts
 
 // src/utils/intersection_watcher.ts
+function isBeforeRootStart(entry) {
+  const rect = entry.boundingClientRect;
+  if (rect.width === 0 && rect.height === 0) return false;
+  const rootTop = entry.rootBounds?.top ?? 0;
+  return rect.bottom <= rootTop;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -18,6 +24,11 @@ var IntersectionWatcher = class {
    * (Re)creates the observer and observes `targets`. Returns `false` — leaving
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
+   *
+   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`
+   *   or a failing `observe()`. The exception is passed through unchanged, but
+   *   the watcher rolls back first: every target observed so far is released and
+   *   `active` stays `false`, so a caller that retries starts from a clean slate.
    */
   start(targets, options = {}) {
     this.stop();
@@ -25,25 +36,42 @@ var IntersectionWatcher = class {
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
-    this.#active = true;
-    this.#observer = new IntersectionObserver(
-      (entries) => {
-        if (this.#active) this.#onEntries(entries);
-      },
-      { root, rootMargin: options.rootMargin, threshold: options.threshold }
-    );
-    for (const target of list) this.#observer.observe(target);
-    return true;
+    let observer = null;
+    try {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (this.#active && this.#observer === observer) this.#onEntries(entries);
+        },
+        { root, rootMargin: options.rootMargin, threshold: options.threshold }
+      );
+      for (const target of list) observer.observe(target);
+      this.#observer = observer;
+      this.#active = true;
+      return true;
+    } catch (error) {
+      observer?.disconnect();
+      this.#observer = null;
+      this.#active = false;
+      throw error;
+    }
   }
   /**
    * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
    * only reports *changes*, but `observe()` always reports the present state,
    * so unobserve→observe turns "still intersecting" into a fresh callback.
+   *
+   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
+   *   first, so it never stays live with a half-rearmed target.
    */
   rearm(target) {
     if (!this.#observer) return;
-    this.#observer.unobserve(target);
-    this.#observer.observe(target);
+    try {
+      this.#observer.unobserve(target);
+      this.#observer.observe(target);
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
   }
   /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {
@@ -65,23 +93,63 @@ var StickyObserverController = class extends Controller {
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
   /** Last reported stuck state, so `change` fires only on transitions. */
   #stuck = null;
+  /** Target currently owned by the watcher, used to avoid duplicate restarts. */
+  #observedSentinel = null;
+  #connected = false;
   #onIntersect(entries) {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    this.#setStuck(!entry.isIntersecting);
+    for (const entry of entries) {
+      if (!this.#connected || !this.#watcher.active) return;
+      this.#setStuck(!entry.isIntersecting && isBeforeRootStart(entry));
+    }
   }
   connect() {
-    if (!this.hasSentinelTarget) return;
-    this.#watcher.start(this.sentinelTarget, {
-      rootSelector: this.rootSelectorValue,
-      rootMargin: `-${this.offsetValue}px 0px 0px 0px`,
-      threshold: [0]
-    });
+    this.#connected = true;
+    this.#stuck = null;
+    this.#syncObserver();
   }
   disconnect() {
+    this.#connected = false;
     this.#watcher.stop();
+    this.#observedSentinel = null;
     this.#stuck = null;
   }
+  /** Starts observation when a sentinel is inserted after connection. */
+  sentinelTargetConnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Stops or transfers observation when the current sentinel is removed. */
+  sentinelTargetDisconnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Reflects the last snapshot onto an element inserted after that snapshot. */
+  elementTargetConnected(element) {
+    if (this.#stuck !== null) {
+      element.setAttribute("data-stuck", this.#stuck ? "true" : "false");
+    }
+  }
+  /** Rebuilds the observer when Turbo morphs the configured root. */
+  rootSelectorValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  /** Rebuilds the observer when Turbo morphs the configured top offset. */
+  offsetValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  #syncObserver(force = false) {
+    const sentinel = this.hasSentinelTarget ? this.sentinelTarget : null;
+    if (!force && sentinel === this.#observedSentinel && this.#watcher.active) return;
+    this.#watcher.stop();
+    this.#observedSentinel = null;
+    if (!sentinel) return;
+    const configuredOffset = this.offsetValue;
+    const offset = Number.isFinite(configuredOffset) ? configuredOffset : 0;
+    const started = this.#watcher.start(sentinel, {
+      rootSelector: this.rootSelectorValue,
+      rootMargin: `${-offset}px 0px 0px 0px`,
+      threshold: [0]
+    });
+    if (started) this.#observedSentinel = sentinel;
+  }
   /** Reflects the stuck state onto the sticky element and emits `change`. */
   #setStuck(next) {
     if (next === this.#stuck) return;

data/dist/controllers/tags_input_controller.js

@@ -0,0 +1,275 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/tags_input_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/roving_tabindex.ts
+var RovingTabindex = class {
+  /** Returns the current ordered item elements; called on every operation. */
+  #getItems;
+  /**
+   * @param getItems - Returns the current ordered item elements. Called on every
+   *   operation so the live target list is always used.
+   */
+  constructor(getItems) {
+    this.#getItems = getItems;
+  }
+  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
+  get activeIndex() {
+    return this.#getItems().findIndex((item) => item.tabIndex === 0);
+  }
+  /**
+   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
+   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
+   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
+   * "nothing is currently tabbable".
+   *
+   * @param index - Position of the item to make tabbable.
+   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.
+   */
+  setActive(index, { focus = false } = {}) {
+    const items = this.#getItems();
+    items.forEach((item, i) => {
+      item.tabIndex = i === index ? 0 : -1;
+    });
+    if (focus) items[index]?.focus();
+  }
+};
+
+// src/controllers/tags_input_controller.ts
+var TagsInputController = class extends Controller {
+  static targets = ["input", "tags", "tag", "tagTemplate", "status", "fields"];
+  static values = {
+    delimiter: { type: String, default: "," },
+    max: { type: Number, default: 0 },
+    allowDuplicates: { type: Boolean, default: false },
+    name: { type: String, default: "tags[]" }
+  };
+  static actions = ["onKeydown"];
+  static events = ["change", "reject"];
+  #roving = new RovingTabindex(() => this.#removeButtons);
+  /** Owns IME lifecycle state for commit-key guarding. */
+  #composition = new CompositionTracker();
+  /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
+  connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
+    this.tagsTarget.addEventListener("click", this.#onTagClick);
+    this.#syncState();
+  }
+  /** Releases the delegated listeners so no handler outlives the element. */
+  disconnect() {
+    this.#composition.disconnect();
+    this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
+    this.tagsTarget.removeEventListener("click", this.#onTagClick);
+  }
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
+  /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
+  onKeydown(event) {
+    if (this.#composition.isComposing(event)) return;
+    if (event.key === "Enter" || event.key === this.delimiterValue) {
+      event.preventDefault();
+      this.#commitInput();
+      return;
+    }
+    if (event.key === "Backspace" && this.inputTarget.value === "") {
+      const buttons = this.#removeButtons;
+      if (buttons.length > 0) {
+        event.preventDefault();
+        this.#removeAt(buttons.length - 1);
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft" && this.inputTarget.value === "") {
+      const buttons = this.#removeButtons;
+      if (buttons.length > 0) {
+        event.preventDefault();
+        this.#roving.setActive(buttons.length - 1, { focus: true });
+      }
+    }
+  }
+  /**
+   * Deletes the tag whose remove button was clicked. Delegated on the tags
+   * container (like `#onTagKeydown`) rather than bound per chip via
+   * `data-action`, so it works the instant a chip is appended without waiting on
+   * Stimulus to wire a freshly created element.
+   */
+  #onTagClick = (event) => {
+    const button = event.target.closest("button");
+    if (!button || !this.tagsTarget.contains(button)) return;
+    const index = this.#removeButtons.indexOf(button);
+    if (index !== -1) this.#removeAt(index);
+  };
+  /** Validates and adds the current input value as a tag, then clears the input. */
+  #commitInput() {
+    const value = this.inputTarget.value.trim();
+    if (value === "") {
+      this.#reject(value, "empty");
+      return;
+    }
+    if (this.maxValue > 0 && this.tagTargets.length >= this.maxValue) {
+      this.#reject(value, "max");
+      return;
+    }
+    if (!this.allowDuplicatesValue && this.#values.includes(value)) {
+      this.#reject(value, "duplicate");
+      return;
+    }
+    this.#appendTag(value);
+    this.inputTarget.value = "";
+    this.#announce(value);
+    this.#syncState();
+    this.dispatch("change", { detail: { tags: this.#values } });
+  }
+  /** Builds one chip from the template and appends it to the tag list. */
+  #appendTag(value) {
+    if (!this.hasTagTemplateTarget) return;
+    const fragment = this.tagTemplateTarget.content.cloneNode(true);
+    const tag = fragment.querySelector('[data-stimeo--tags-input-target="tag"]');
+    const label = fragment.querySelector('[data-tags-input-slot="label"]');
+    const button = fragment.querySelector("button");
+    if (!tag || !button) return;
+    tag.dataset.value = value;
+    if (label) label.textContent = value;
+    button.setAttribute("aria-label", `Remove ${value}`);
+    button.tabIndex = -1;
+    this.tagsTarget.appendChild(fragment);
+  }
+  /** Removes the tag at `index`, then moves focus to a neighbor or the input. */
+  #removeAt(index) {
+    const tag = this.tagTargets[index];
+    if (!tag) return;
+    const value = tag.dataset.value ?? "";
+    tag.remove();
+    this.#announce(value);
+    this.#syncState();
+    this.dispatch("change", { detail: { tags: this.#values } });
+    const remaining = this.#removeButtons;
+    if (remaining.length === 0) {
+      this.inputTarget.focus();
+    } else {
+      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
+    }
+  }
+  /** Handles arrow navigation and deletion within the chip list (delegated). */
+  #onTagKeydown = (event) => {
+    const button = event.target.closest("button");
+    if (!button) return;
+    const buttons = this.#removeButtons;
+    const index = buttons.indexOf(button);
+    if (index === -1) return;
+    switch (event.key) {
+      case "ArrowLeft":
+        if (index > 0) {
+          event.preventDefault();
+          this.#roving.setActive(index - 1, { focus: true });
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (index < buttons.length - 1) {
+          this.#roving.setActive(index + 1, { focus: true });
+        } else {
+          this.inputTarget.focus();
+        }
+        break;
+      case "Delete":
+      case "Backspace":
+        event.preventDefault();
+        this.#removeAt(index);
+        break;
+    }
+  };
+  /** Rebuilds the hidden form fields, the `full` flag, and the roving Tab stop. */
+  #syncState() {
+    if (this.hasFieldsTarget) {
+      this.fieldsTarget.replaceChildren(
+        ...this.#values.map((value) => {
+          const input = document.createElement("input");
+          input.type = "hidden";
+          input.name = this.nameValue;
+          input.value = value;
+          return input;
+        })
+      );
+    }
+    const full = this.maxValue > 0 && this.tagTargets.length >= this.maxValue;
+    this.element.toggleAttribute("data-stimeo--tags-input-full", full);
+    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1) {
+      this.#roving.setActive(0);
+    }
+  }
+  /** Mirrors the changed tag into the live region for assistive tech. */
+  #announce(value) {
+    if (this.hasStatusTarget) this.statusTarget.textContent = value;
+  }
+  /** Reports a rejected addition via `stimeo--tags-input:reject`. */
+  #reject(value, reason) {
+    this.dispatch("reject", { detail: { value, reason } });
+  }
+  /** The remove buttons in document order (the roving navigation set). */
+  get #removeButtons() {
+    return Array.from(this.tagsTarget.querySelectorAll("button"));
+  }
+  /** Current tag values in order. */
+  get #values() {
+    return this.tagTargets.map((tag) => tag.dataset.value ?? "");
+  }
+};
+
+export { TagsInputController };
+//# sourceMappingURL=tags_input_controller.js.map
+//# sourceMappingURL=tags_input_controller.js.map

data/dist/controllers/theme_controller.js

@@ -1,5 +1,22 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/theme_controller.ts
+
+// src/utils/safe_storage.ts
+function readLocalStorage(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeLocalStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+
 // src/controllers/theme_controller.ts
 var MODES = ["light", "dark", "system"];
 var isMode = (value) => typeof value === "string" && MODES.includes(value);
@@ -133,19 +150,12 @@ var ThemeController = class extends Controller {
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
-    try {
-      const value = window.localStorage.getItem(this.storageKeyValue);
-      return isMode(value) ? value : null;
-    } catch {
-      return null;
-    }
+    const value = readLocalStorage(this.storageKeyValue);
+    return isMode(value) ? value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {
-    try {
-      window.localStorage.setItem(this.storageKeyValue, mode);
-    } catch {
-    }
+    writeLocalStorage(this.storageKeyValue, mode);
   }
 };