stimeo-ui 0.7.0 → 0.8.0

data/dist/controllers/spinner_controller.js

@@ -222,7 +222,7 @@ var SpinnerController = class extends Controller {
     timeout: { type: Number, default: 0 }
   };
   static actions = ["start", "stop"];
-  static events = ["hide", "show", "timeout"];
+  static events = ["hide", "show", "timeout", "reconcile"];
   #timers = new SafeTimeout();
   #floor = new MinDurationFloor(this.#timers);
   #gate = new DetachGate();
@@ -326,16 +326,18 @@ var SpinnerController = class extends Controller {
    * Returns the loading state to idle for the snapshot Turbo is about to take,
    * so a page reached with the Back button is not restored mid-load with a
    * spinner nothing can stop. State only: `data-state`, the indicator's `hidden`,
-   * and `aria-busy`. No `hide` is dispatched — the load was never observed to
-   * finish, and a snapshot rewind is not a lifecycle event the consumer can act
-   * on. The live page keeps its timers, so a navigation that never completes
-   * leaves the running cycle intact.
+   * and `aria-busy`. No `hide` is dispatched — that would claim the load finished.
+   * The rewind reports itself as `reconcile` instead, so a consumer painting from
+   * `show` can drop it before the snapshot is taken. The live page keeps its
+   * timers, so a navigation that never completes leaves the running cycle intact.
    */
   #rewindForCache() {
+    const running = this.element.getAttribute("data-state") !== "idle";
     this.#cancelTimeout();
     this.#setBusy(false);
     if (this.hasIndicatorTarget) this.indicatorTarget.hidden = true;
     this.element.setAttribute("data-state", "idle");
+    if (running) this.dispatch("reconcile", { detail: {} });
   }
   /** Reflects busy state onto the controlled region (if present). */
   #setBusy(busy) {

data/dist/controllers/submit_once_controller.js

@@ -203,7 +203,7 @@ var SubmitOnceController = class extends Controller {
     restoreFocus: { type: Boolean, default: false }
   };
   static actions = ["cancel", "finish", "start"];
-  static events = ["start", "end"];
+  static events = ["start", "end", "reconcile"];
   #timers = new SafeTimeout();
   #gate = new DetachGate();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
@@ -419,7 +419,9 @@ var SubmitOnceController = class extends Controller {
   }
   /** Keeps Turbo's cached snapshot idle, without events, announcements, or focus moves. */
   #rewindForCache() {
+    const forms = [...this.#sessions.keys()];
     this.#abandonSessions();
+    if (forms.length > 0) this.dispatch("reconcile", { detail: { forms } });
   }
   /** Tears down a true detach; an in-page move is canceled by the next `connect()`. */
   #teardown() {

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 };