stimeo-ui 0.6.0 → 0.8.0

data/dist/controllers/textarea_autosize_controller.js

@@ -1,5 +1,63 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/textarea_autosize_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
 // src/controllers/textarea_autosize_controller.ts
 function px(value) {
   const n = Number.parseFloat(value);
@@ -13,18 +71,69 @@ var TextareaAutosizeController = class extends Controller {
   static actions = ["resize"];
   static events = ["resize"];
   #lastHeight = -1;
-  #onInput = () => {
+  #lastWidth = -1;
+  #started = false;
+  #pending = false;
+  #fonts = null;
+  /**
+   * Content triggers arriving while the box is collapsed (`display: none`
+   * ancestors) are deferred: `scrollHeight` is 0 there, so measuring would
+   * clamp the kept height to the `minRows` floor and dispatch a bogus
+   * `resize`. The next report from a rendered box flushes the deferral.
+   */
+  #remeasure = () => {
+    if (this.element.clientWidth === 0) {
+      this.#pending = true;
+      return;
+    }
     this.resize();
   };
+  /**
+   * Re-measures when the content width changed (re-wrapping, including a
+   * horizontal padding change under `border-box`), the applied inline height
+   * was stripped (a Turbo morph syncing attributes from server HTML that has no
+   * `style`), or a content trigger was deferred while the box was collapsed.
+   * This instance's own height writes match none of these signals, so they
+   * cannot re-enter; an authored inline height (e.g. a user dragging the native
+   * resize handle) is left alone until the next content trigger. Reports from a
+   * still-collapsed box are skipped (nothing is measurable there).
+   */
+  #layout = new LayoutObserver(() => {
+    if (this.element.clientWidth === 0) return;
+    const width = this.#contentWidth();
+    const stripped = this.element.style.height === "";
+    if (width === this.#lastWidth && !stripped && !this.#pending) return;
+    this.#lastWidth = width;
+    this.resize();
+  });
   connect() {
-    this.element.addEventListener("input", this.#onInput);
+    this.#lastHeight = Math.round(px(this.element.style.height));
+    this.#lastWidth = this.#contentWidth();
+    this.element.addEventListener("input", this.#remeasure);
+    this.element.addEventListener("change", this.#remeasure);
+    this.#layout.observe(this.element);
+    this.#bindFonts();
+    this.#started = true;
     this.resize();
   }
   disconnect() {
-    this.element.removeEventListener("input", this.#onInput);
+    this.#started = false;
+    this.element.removeEventListener("input", this.#remeasure);
+    this.element.removeEventListener("change", this.#remeasure);
+    this.#layout.disconnect();
+    this.#unbindFonts();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `minRows`. */
+  minRowsValueChanged() {
+    if (this.#started) this.#remeasure();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `maxRows`. */
+  maxRowsValueChanged() {
+    if (this.#started) this.#remeasure();
   }
   /** Re-measures the content and applies the clamped height. */
   resize() {
+    this.#pending = false;
     const el = this.element;
     const style = window.getComputedStyle(el);
     const lineHeight = this.#lineHeight(style);
@@ -58,6 +167,11 @@ var TextareaAutosizeController = class extends Controller {
       this.dispatch("resize", { detail: { height, rows } });
     }
   }
+  /** Content-box width — the wrapping input, unaffected by this instance's height writes. */
+  #contentWidth() {
+    const style = window.getComputedStyle(this.element);
+    return Math.max(0, this.element.clientWidth - px(style.paddingLeft) - px(style.paddingRight));
+  }
   /** Resolved line height, falling back to ~1.2× font-size when `normal`. */
   #lineHeight(style) {
     const lh = px(style.lineHeight);
@@ -65,6 +179,20 @@ var TextareaAutosizeController = class extends Controller {
     const fontSize = px(style.fontSize);
     return fontSize > 0 ? fontSize * 1.2 : 16;
   }
+  /** Subscribes to font completion when the current engine exposes `document.fonts`. */
+  #bindFonts() {
+    const fonts = this.element.ownerDocument.fonts;
+    if (!fonts) return;
+    this.#fonts = fonts;
+    fonts.addEventListener("loadingdone", this.#remeasure);
+    fonts.addEventListener("loadingerror", this.#remeasure);
+  }
+  /** Removes the font completion subscriptions. */
+  #unbindFonts() {
+    this.#fonts?.removeEventListener("loadingdone", this.#remeasure);
+    this.#fonts?.removeEventListener("loadingerror", this.#remeasure);
+    this.#fonts = null;
+  }
 };
 
 export { TextareaAutosizeController };

data/dist/controllers/theme_controller.js

@@ -23,15 +23,17 @@ function isReservedArrowChord(event, allow = []) {
 // src/utils/safe_storage.ts
 function readLocalStorage(key) {
   try {
-    return window.localStorage.getItem(key);
-  } catch {
-    return null;
+    return { ok: true, value: window.localStorage.getItem(key) };
+  } catch (error) {
+    return { ok: false, error };
   }
 }
 function writeLocalStorage(key, value) {
   try {
     window.localStorage.setItem(key, value);
-  } catch {
+    return { ok: true, value: void 0 };
+  } catch (error) {
+    return { ok: false, error };
   }
 }
 
@@ -169,8 +171,8 @@ var ThemeController = class extends Controller {
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
-    const value = readLocalStorage(this.storageKeyValue);
-    return isMode(value) ? value : null;
+    const result = readLocalStorage(this.storageKeyValue);
+    return result.ok && isMode(result.value) ? result.value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {

data/dist/controllers/tree_view_controller.js

@@ -24,7 +24,8 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 function canTakeFocus(element) {
-  if (element.closest("[hidden]")) return false;
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
   if (!("disabled" in element)) return true;
   if (element.disabled) return false;
   return !inheritsFieldsetDisabled(element);