@marianmeres/stuic 3.105.0 → 3.107.0

package/dist/actions/validate.svelte.js

@@ -173,6 +173,15 @@ export function validate(el, fn) {
         const _doValidate = () => {
             if (!enabled)
                 return;
+            // A focused, dirty field torn down by a route change fires a final
+            // synchronous `change`/`blur` while being removed from the DOM. That
+            // removal runs inside Svelte's flush, so writing `validation` state here
+            // would throw `state_unsafe_mutation`. By then the node is already
+            // detached (`isConnected === false`) and the field is going away — skip.
+            // No-op for normal interactive validation and for the synchronous
+            // imperative `validate()` path, both of which run while connected.
+            if (!el.isConnected)
+                return;
             el.checkValidity();
             // Store customValidator message directly - hidden inputs (type="hidden")
             // don't populate el.validationMessage even when setCustomValidity() is called.
@@ -210,9 +219,6 @@ export function validate(el, fn) {
                 return m;
             }, []);
             // console.log(1111, validityState, el);
-            // hm... Uncaught Svelte error: state_unsafe_mutation...
-            // the `tick` await helps, but I'm not really sure I understand the internals...
-            // tick().then(() => {
             setValidationResult?.({
                 validity: validityState,
                 reasons,
@@ -224,7 +230,6 @@ export function validate(el, fn) {
                     el.validationMessage ||
                     "This field is invalid. Please review and try again."),
             });
-            // });
         };
         // Expose the current validator to the host so it can trigger validation
         // imperatively (e.g., on submit). The closure captures the current

package/dist/attachments/auto-height.d.ts

@@ -26,6 +26,13 @@ import type { Attachment } from "svelte/attachments";
  * then a `ResizeObserver` keeps it in sync. With no transition configured, or under
  * `prefers-reduced-motion`, the height simply snaps and nothing is ever clipped.
  *
+ * Resize-driven measures are coalesced to the next animation frame, so the height
+ * write never happens *inside* the `ResizeObserver` delivery cycle. Mutating layout
+ * synchronously in that callback is what triggers the browser's benign-but-noisy
+ * "ResizeObserver loop completed with undelivered notifications" warning; the
+ * one-frame deferral (~16ms, imperceptible against the transition) avoids it. The
+ * initial on-mount measure stays synchronous to keep the height lock before paint.
+ *
  * @example
  * ```svelte
  * <div class="viewport" {@attach autoHeight}>

package/dist/attachments/auto-height.js

@@ -25,6 +25,13 @@
  * then a `ResizeObserver` keeps it in sync. With no transition configured, or under
  * `prefers-reduced-motion`, the height simply snaps and nothing is ever clipped.
  *
+ * Resize-driven measures are coalesced to the next animation frame, so the height
+ * write never happens *inside* the `ResizeObserver` delivery cycle. Mutating layout
+ * synchronously in that callback is what triggers the browser's benign-but-noisy
+ * "ResizeObserver loop completed with undelivered notifications" warning; the
+ * one-frame deferral (~16ms, imperceptible against the transition) avoids it. The
+ * initial on-mount measure stays synchronous to keep the height lock before paint.
+ *
  * @example
  * ```svelte
  * <div class="viewport" {@attach autoHeight}>
@@ -73,13 +80,22 @@ export const autoHeight = (node) => {
         if (e.target === node && e.propertyName === "height")
             node.style.overflow = "";
     };
+    // Defer the resize-driven measure to the next frame so the layout write
+    // never lands inside the ResizeObserver delivery cycle (see top doc comment).
+    let rafId = 0;
+    const scheduleMeasure = () => {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(measure);
+    };
+    // Initial measure stays synchronous: lock height from `auto` to px before paint.
     measure();
-    const ro = new ResizeObserver(measure);
+    const ro = new ResizeObserver(scheduleMeasure);
     if (node.firstElementChild)
         ro.observe(node.firstElementChild);
     node.addEventListener("transitionend", reveal);
     node.addEventListener("transitioncancel", reveal);
     return () => {
+        cancelAnimationFrame(rafId);
         ro.disconnect();
         node.removeEventListener("transitionend", reveal);
         node.removeEventListener("transitioncancel", reveal);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.105.0",
+	"version": "3.107.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",