jsswift 1.0.51 → 1.0.53

package/dist/jsswift.js

@@ -661,8 +661,7 @@
       const schedulePosition = () => {
         if (!opts.anchorEl) return;
         const raf = globalThis.requestAnimationFrame || ((fn) => setTimeout(() => fn(Date.now()), 0));
-        const caf = globalThis.cancelAnimationFrame || clearTimeout;
-        if (entry._positionFrame != null) caf(entry._positionFrame);
+        if (entry._positionFrame != null) return;
         entry._positionFrame = raf(() => {
           entry._positionFrame = null;
           position();
@@ -673,13 +672,13 @@
       if (opts.anchorEl) {
         position();
         schedulePosition();
-        const onResize = () => position();
+        const onResize = schedulePosition;
         window.addEventListener("resize", onResize);
         window.addEventListener("scroll", onResize, true);
         window.visualViewport?.addEventListener?.("resize", onResize);
         window.visualViewport?.addEventListener?.("scroll", onResize);
         if (typeof ResizeObserver === "function") {
-          const panelResizeObserver = new ResizeObserver(() => position());
+          const panelResizeObserver = new ResizeObserver(schedulePosition);
           panelResizeObserver.observe(panel);
           entry._panelResizeObserver = panelResizeObserver;
         }
@@ -2340,163 +2339,175 @@ _.dynamic = function (renderFn) {
 
     return r;
   };
-  // ===============================
-  // Two-way binding: input <-> rod
-  // ===============================
-  // ===============================
-  // Two-way binding avanzato
-  // input / checkbox / radio / select
-  // ===============================
-
-  function getInputKind(el) {
-    if (!el || !el.tagName) return null;
-
-    const tag = el.tagName.toLowerCase();
-
-    if (tag === "input") {
-      const type = (el.type || "text").toLowerCase();
-      if (type === "checkbox") return "checkbox";
-      if (type === "radio") return "radio";
-      if (type === "number") return "number";
-      return "text";
-    }
-
-    if (tag === "select") {
-      return el.multiple ? "select-multiple" : "select";
-    }
-
-    return null;
-  }
-
-  JSswift.rodModel = function (target, rodObj, opts = {}) {
-    if (!rodObj || rodObj.type !== "rod") {
-      throw new Error("[JSswift.rodModel] rodObj deve essere un rod");
-    }
-
-    // Supporta singolo elemento o lista (radio)
-    const elements = Array.isArray(target) || target instanceof NodeList
-      ? Array.from(target)
-      : [target];
-
-    const eventName = opts.event ?? "change";
-    const parse = opts.parse ?? (v => v);
-    const format = opts.format ?? (v => v);
-
-    let syncing = false;
-    const disposers = [];
-
-    // === ROD → DOM ===
-    const updateDOM = (value) => {
-      for (const el of elements) {
-        if (!el) continue;
-        const kind = getInputKind(el);
-
-        switch (kind) {
-          case "checkbox":
-            el.checked = !!value;
-            break;
-
-          case "radio":
-            el.checked = el.value == value;
-            break;
-
-          case "select":
-            el.value = value ?? "";
-            break;
-
-          case "select-multiple":
-            const arr = Array.isArray(value) ? value.map(String) : [];
-            for (const opt of el.options) {
-              opt.selected = arr.includes(opt.value);
-            }
-            break;
-
-          case "number":
-          case "text":
-          default:
-            el.value = value ?? "";
-        }
-      }
-    };
-
-    // bind rod → DOM (usa rod.action)
-    rodObj.action((v) => {
-      if (syncing) return;
-      syncing = true;
-      try {
-        updateDOM(format(v));
-      } finally {
-        syncing = false;
-      }
-    });
-
-    // sync iniziale
-    updateDOM(format(rodObj.value));
-
-    // === DOM → ROD ===
-    for (const el of elements) {
-      if (!el) continue;
-
-      const kind = getInputKind(el);
-
-      const handler = () => {
-        if (syncing) return;
-
-        let next;
-
-        switch (kind) {
-          case "checkbox":
-            next = el.checked;
-            break;
-
-          case "radio":
-            if (!el.checked) return;
-            next = el.value;
-            break;
-
-          case "select":
-            next = el.value;
-            break;
-
-          case "select-multiple":
-            next = Array.from(el.selectedOptions).map(o => o.value);
-            break;
-
-          case "number":
-            next = parse(el.value === "" ? null : Number(el.value));
-            break;
-
-          case "text":
-          default:
-            next = parse(el.value);
-        }
-
-        syncing = true;
-        try {
-          if (rodObj.value !== next) rodObj.value = next;
-        } finally {
-          syncing = false;
-        }
-      };
-
-      el.addEventListener(eventName, handler);
-      disposers.push(() => el.removeEventListener(eventName, handler));
-    }
-
-    // cleanup automatico
-    if (typeof rodObj.onDispose === "function") {
-      rodObj.onDispose(() => disposers.forEach(fn => fn()));
-    }
-
-    return () => disposers.forEach(fn => fn());
-  };
-
-
-  // input <-> signal (sugar)
-  JSswift.signalModel = function (inputEl, get, set, opts = {}) {
-    const r = JSswift.rodFromSignal(get, set);
-    return JSswift.rodModel(inputEl, r, opts);
-  };
+  // ===============================
+  // Two-way binding: input <-> rod
+  // ===============================
+  // ===============================
+  // Two-way binding avanzato
+  // input / checkbox / radio / select
+  // ===============================
+
+  function getInputKind(el) {
+    if (!el || !el.tagName) return null;
+
+    const tag = el.tagName.toLowerCase();
+
+    if (tag === "input") {
+      const type = (el.type || "text").toLowerCase();
+      if (type === "checkbox") return "checkbox";
+      if (type === "radio") return "radio";
+      if (type === "number") return "number";
+      return "text";
+    }
+
+    if (tag === "select") {
+      return el.multiple ? "select-multiple" : "select";
+    }
+
+    return null;
+  }
+
+  JSswift.rodModel = function (target, rodObj, opts = {}) {
+    if (!rodObj || rodObj.type !== "rod") {
+      throw new Error("[JSswift.rodModel] rodObj deve essere un rod");
+    }
+
+    // Supporta singolo elemento o lista (radio)
+    const elements = Array.isArray(target) || target instanceof NodeList
+      ? Array.from(target)
+      : [target];
+
+    const eventName = opts.event ?? "change";
+    const parse = opts.parse ?? (v => v);
+    const format = opts.format ?? (v => v);
+
+    let syncing = false;
+    const disposers = [];
+
+    // === ROD → DOM ===
+    const updateDOM = (value) => {
+      for (const el of elements) {
+        if (!el) continue;
+        const kind = getInputKind(el);
+
+        switch (kind) {
+          case "checkbox":
+            el.checked = !!value;
+            break;
+
+          case "radio":
+            el.checked = el.value == value;
+            break;
+
+          case "select":
+            el.value = value ?? "";
+            break;
+
+          case "select-multiple":
+            const arr = Array.isArray(value) ? value.map(String) : [];
+            for (const opt of el.options) {
+              opt.selected = arr.includes(opt.value);
+            }
+            break;
+
+          case "number":
+          case "text":
+          default:
+            el.value = value ?? "";
+        }
+      }
+    };
+
+    // bind rod → DOM (usa rod.action)
+    const onValue = (v) => {
+      if (syncing) return;
+      syncing = true;
+      try {
+        updateDOM(format(v));
+      } finally {
+        syncing = false;
+      }
+    };
+    rodObj.action(onValue);
+
+    // sync iniziale
+    updateDOM(format(rodObj.value));
+
+    // === DOM → ROD ===
+    for (const el of elements) {
+      if (!el) continue;
+
+      const kind = getInputKind(el);
+
+      const handler = () => {
+        if (syncing) return;
+
+        let next;
+
+        switch (kind) {
+          case "checkbox":
+            next = el.checked;
+            break;
+
+          case "radio":
+            if (!el.checked) return;
+            next = el.value;
+            break;
+
+          case "select":
+            next = el.value;
+            break;
+
+          case "select-multiple":
+            next = Array.from(el.selectedOptions).map(o => o.value);
+            break;
+
+          case "number":
+            next = parse(el.value === "" ? null : Number(el.value));
+            break;
+
+          case "text":
+          default:
+            next = parse(el.value);
+        }
+
+        syncing = true;
+        try {
+          if (rodObj.value !== next) rodObj.value = next;
+        } finally {
+          syncing = false;
+        }
+      };
+
+      el.addEventListener(eventName, handler);
+      disposers.push(() => el.removeEventListener(eventName, handler));
+    }
+
+    // Release both directions without disposing the caller-owned rod.
+    let disposed = false;
+    const dispose = () => {
+      if (disposed) return;
+      disposed = true;
+      disposers.splice(0).forEach(fn => fn());
+      const actionIndex = rodObj._actions?.indexOf(onValue) ?? -1;
+      if (actionIndex >= 0) rodObj._actions.splice(actionIndex, 1);
+      const hookIndex = rodObj._disposeHooks?.indexOf(dispose) ?? -1;
+      if (hookIndex >= 0 && !rodObj._disposed) rodObj._disposeHooks.splice(hookIndex, 1);
+    };
+    if (typeof rodObj.onDispose === "function") rodObj.onDispose(dispose);
+    return dispose;
+  };
+
+
+  // input <-> signal (sugar)
+  JSswift.signalModel = function (inputEl, get, set, opts = {}) {
+    const r = JSswift.rodFromSignal(get, set);
+    const stopBinding = JSswift.rodModel(inputEl, r, opts);
+    return () => {
+      stopBinding();
+      r.dispose();
+    };
+  };
   // ===============================
   // Lifecycle helpers
   // ===============================
@@ -7731,7 +7742,8 @@ const unitCover = (v, name = 'size') => {
       || typeof noteSlot === "function"
       || typeof hintSlot === "function";
     if (canReact) {
-      JSswift.reactive.effect(() => { renderMessage(); }, "UI.FormField:message");
+      const stopMessage = JSswift.reactive.effect(() => { renderMessage(); }, "UI.FormField:message");
+      JSswift._registerCleanup(wrap, stopMessage);
     } else {
       renderMessage();
     }
@@ -7754,6 +7766,16 @@ const unitCover = (v, name = 'size') => {
       value: props.value
     });
 
+    let autofillDisposed = false;
+    const autofillTimeouts = new Set();
+    const autofillLater = (fn, delay) => {
+      if (autofillDisposed) return;
+      const id = setTimeout(() => {
+        autofillTimeouts.delete(id);
+        if (!autofillDisposed) fn();
+      }, delay);
+      autofillTimeouts.add(id);
+    };
     let lastKnownValue = el.value ?? "";
     const syncAutofill = () => {
       const next = el.value ?? "";
@@ -7765,7 +7787,7 @@ const unitCover = (v, name = 'size') => {
     let autofillTimer = null;
     let autofillProbe = false;
     const scheduleAutofillProbe = () => {
-      if (autofillProbe) return;
+      if (autofillDisposed || autofillProbe) return;
       autofillProbe = true;
       let count = 0;
       const tick = () => {
@@ -7775,12 +7797,12 @@ const unitCover = (v, name = 'size') => {
           autofillProbe = false;
           return;
         }
-        setTimeout(tick, 120);
+        autofillLater(tick, 120);
       };
-      setTimeout(tick, 40);
+      autofillLater(tick, 40);
     };
     const startAutofillWatch = () => {
-      if (autofillTimer) return;
+      if (autofillDisposed || autofillTimer) return;
       autofillTimer = setInterval(() => {
         if (document.activeElement !== el) {
           clearInterval(autofillTimer);
@@ -7806,27 +7828,33 @@ const unitCover = (v, name = 'size') => {
     el.addEventListener("focus", () => {
       startAutofillWatch();
       scheduleAutofillProbe();
-      setTimeout(syncAutofill, 50);
+      autofillLater(syncAutofill, 50);
     });
     el.addEventListener("blur", () => {
       stopAutofillWatch();
-      setTimeout(syncAutofill, 0);
+      autofillLater(syncAutofill, 0);
     });
-    setTimeout(syncAutofill, 0);
+    autofillLater(syncAutofill, 0);
     scheduleAutofillProbe();
 
+    JSswift._registerCleanup(el, () => {
+      autofillDisposed = true;
+      stopAutofillWatch();
+      autofillTimeouts.forEach(clearTimeout);
+      autofillTimeouts.clear();
+    });
+
     // model binding
     const model = props.model;
     if (model) {
       // Supporta rod direttamente
       if (typeof model === "object" && typeof model._bind === "function") {
-        app.rodModel(el, model);
+        JSswift._registerCleanup(el, app.rodModel(el, model));
       }
       // Supporta [get,set] signal -> creiamo rodFromSignal
       else if (Array.isArray(model) && typeof model[0] === "function" && typeof model[1] === "function") {
-        const r = app.rodFromSignal(model[0], model[1]);
-        app.rodModel(el, r);
-        // NOTE: se vuoi cleanup automatico qui, lo facciamo nel layer component (v2)
+        const stop = JSswift.reactive.untracked(() => app.signalModel(el, model[0], model[1]));
+        JSswift._registerCleanup(el, stop);
       }
     }
     uiRegisterShortcode(el, props, {
@@ -7843,7 +7871,7 @@ const unitCover = (v, name = 'size') => {
       if (value == null || value === false) control.removeAttribute(name);
       else control.setAttribute(name, String(value));
     };
-    JSswift.reactive.effect(() => {
+    const stopAttributes = JSswift.reactive.effect(() => {
       const label = uiUnwrap(props.ariaLabel) ?? (typeof props.label === "string" ? props.label : null);
       set("aria-label", label);
       set("aria-labelledby", uiUnwrap(props.ariaLabelledBy));
@@ -7858,6 +7886,7 @@ const unitCover = (v, name = 'size') => {
           set(name.toLowerCase(), uiUnwrap(props[name]));
       }
     }, "UI.Field:controlAttributes");
+    JSswift._registerCleanup(field, stopAttributes);
   }
 
   UI.Input = (props = {}) => {
@@ -7877,6 +7906,16 @@ const unitCover = (v, name = 'size') => {
       readOnly: !!props.readonly
     });
 
+    let autofillDisposed = false;
+    const autofillTimeouts = new Set();
+    const autofillLater = (fn, delay) => {
+      if (autofillDisposed) return;
+      const id = setTimeout(() => {
+        autofillTimeouts.delete(id);
+        if (!autofillDisposed) fn();
+      }, delay);
+      autofillTimeouts.add(id);
+    };
     let lastKnownValue = input.value ?? "";
     const syncAutofill = () => {
       const next = input.value ?? "";
@@ -7888,7 +7927,7 @@ const unitCover = (v, name = 'size') => {
     let autofillTimer = null;
     let autofillProbe = false;
     const scheduleAutofillProbe = () => {
-      if (autofillProbe) return;
+      if (autofillDisposed || autofillProbe) return;
       autofillProbe = true;
       let count = 0;
       const tick = () => {
@@ -7898,12 +7937,12 @@ const unitCover = (v, name = 'size') => {
           autofillProbe = false;
           return;
         }
-        setTimeout(tick, 120);
+        autofillLater(tick, 120);
       };
-      setTimeout(tick, 40);
+      autofillLater(tick, 40);
     };
     const startAutofillWatch = () => {
-      if (autofillTimer) return;
+      if (autofillDisposed || autofillTimer) return;
       autofillTimer = setInterval(() => {
         if (document.activeElement !== input) {
           clearInterval(autofillTimer);
@@ -7932,12 +7971,12 @@ const unitCover = (v, name = 'size') => {
       props.onFocus?.(e);
       startAutofillWatch();
       scheduleAutofillProbe();
-      setTimeout(syncAutofill, 50);
+      autofillLater(syncAutofill, 50);
     });
     input.addEventListener("blur", (e) => {
       props.onBlur?.(e);
       stopAutofillWatch();
-      setTimeout(syncAutofill, 0);
+      autofillLater(syncAutofill, 0);
     });
     input.addEventListener("animationstart", (e) => {
       if (e.animationName !== "cms-autofill") return;
@@ -7945,9 +7984,16 @@ const unitCover = (v, name = 'size') => {
       startAutofillWatch();
       scheduleAutofillProbe();
     });
-    setTimeout(syncAutofill, 0);
+    autofillLater(syncAutofill, 0);
     scheduleAutofillProbe();
 
+    JSswift._registerCleanup(input, () => {
+      autofillDisposed = true;
+      stopAutofillWatch();
+      autofillTimeouts.forEach(clearTimeout);
+      autofillTimeouts.clear();
+    });
+
     // model binding
     const model = props.model;
     if (model) {
@@ -7961,11 +8007,12 @@ const unitCover = (v, name = 'size') => {
           lastKnownValue = next;
         };
 
-        rod.action((v) => {
+        const onValue = (v) => {
           if (syncing) return;
           syncing = true;
           try { updateFromRod(v); } finally { syncing = false; }
-        });
+        };
+        rod.action(onValue);
 
         // Component setup may run inside a dynamic parent render. This initial
         // hydration must not make that parent subscribe to the control model.
@@ -7982,18 +8029,26 @@ const unitCover = (v, name = 'size') => {
         input.addEventListener("input", onInput);
         input.addEventListener("compositionend", onInput);
 
-        if (typeof rod.onDispose === "function") {
-          rod.onDispose(() => {
-            input.removeEventListener("input", onInput);
-            input.removeEventListener("compositionend", onInput);
-          });
-        }
+        let disposed = false;
+        const stop = () => {
+          if (disposed) return;
+          disposed = true;
+          input.removeEventListener("input", onInput);
+          input.removeEventListener("compositionend", onInput);
+          const actionIndex = rod._actions?.indexOf(onValue) ?? -1;
+          if (actionIndex >= 0) rod._actions.splice(actionIndex, 1);
+          const hookIndex = rod._disposeHooks?.indexOf(stop) ?? -1;
+          if (hookIndex >= 0 && !rod._disposed) rod._disposeHooks.splice(hookIndex, 1);
+        };
+        rod.onDispose?.(stop);
+        JSswift._registerCleanup(input, stop);
       };
       if (typeof model === "object" && typeof model._bind === "function") {
         bindInputRod(model);
       } else if (Array.isArray(model) && typeof model[0] === "function" && typeof model[1] === "function") {
         const r = JSswift.reactive.untracked(() => JSswift.rodFromSignal(model[0], model[1]));
         bindInputRod(r);
+        JSswift._registerCleanup(input, () => r.dispose());
       }
     }
 
@@ -8077,11 +8132,12 @@ const unitCover = (v, name = 'size') => {
           textarea.value = next;
         };
 
-        rod.action((v) => {
+        const onValue = (v) => {
           if (syncing) return;
           syncing = true;
           try { updateFromRod(v); } finally { syncing = false; }
-        });
+        };
+        rod.action(onValue);
 
         JSswift.reactive.untracked(() => updateFromRod(rod.value));
 
@@ -8096,18 +8152,26 @@ const unitCover = (v, name = 'size') => {
         textarea.addEventListener("input", onInput);
         textarea.addEventListener("compositionend", onInput);
 
-        if (typeof rod.onDispose === "function") {
-          rod.onDispose(() => {
-            textarea.removeEventListener("input", onInput);
-            textarea.removeEventListener("compositionend", onInput);
-          });
-        }
+        let disposed = false;
+        const stop = () => {
+          if (disposed) return;
+          disposed = true;
+          textarea.removeEventListener("input", onInput);
+          textarea.removeEventListener("compositionend", onInput);
+          const actionIndex = rod._actions?.indexOf(onValue) ?? -1;
+          if (actionIndex >= 0) rod._actions.splice(actionIndex, 1);
+          const hookIndex = rod._disposeHooks?.indexOf(stop) ?? -1;
+          if (hookIndex >= 0 && !rod._disposed) rod._disposeHooks.splice(hookIndex, 1);
+        };
+        rod.onDispose?.(stop);
+        JSswift._registerCleanup(textarea, stop);
       };
       if (typeof model === "object" && typeof model._bind === "function") {
         bindTextareaRod(model);
       } else if (Array.isArray(model) && typeof model[0] === "function" && typeof model[1] === "function") {
         const r = JSswift.reactive.untracked(() => JSswift.rodFromSignal(model[0], model[1]));
         bindTextareaRod(r);
+        JSswift._registerCleanup(textarea, () => r.dispose());
       }
     }
 
@@ -8143,7 +8207,22 @@ const unitCover = (v, name = 'size') => {
   };
 
 
+  // Component-owned subscriptions; shared models remain caller-owned.
+  function uiSubscriptionScope() {
+    const stops = [];
+    return {
+      effect: (fn, name) => { const stop = JSswift.reactive.effect(fn, name); stops.push(stop); return stop; },
+      action: (rod, fn) => {
+        rod.action(fn);
+        stops.push(() => { const i = rod._actions?.indexOf(fn) ?? -1; if (i >= 0) rod._actions.splice(i, 1); });
+      },
+      dispose: () => stops.splice(0).forEach(stop => stop())
+    };
+  }
+
   UI.Search = (props = {}) => {
+    const scope = uiSubscriptionScope();
+    let disposed = false;
     const slots = props.slots || {};
     const isBoundValue = (v) => !!v && ((typeof v === "object" && typeof v._bind === "function") || uiIsSignal(v));
     const valueBinding = isBoundValue(props.model)
@@ -8256,6 +8335,7 @@ const unitCover = (v, name = 'size') => {
       setActive(-1);
     };
     const runSearch = async (query, options = {}) => {
+      if (disposed) return;
       const q = query == null ? "" : String(query).trim();
       const id = ++requestId;
       const endpoint = uiUnwrap(props.endpoint ?? props.url);
@@ -8310,7 +8390,7 @@ const unitCover = (v, name = 'size') => {
         } else {
           raw = [];
         }
-        if (id !== requestId) return;
+        if (disposed || id !== requestId) return;
         const mapped = typeof props.mapResponse === "function" ? props.mapResponse(raw, q) : normalizeResults(raw);
         const results = normalizeResults(mapped);
         if (cacheEnabled) cache.set(cacheKey, results);
@@ -8319,13 +8399,13 @@ const unitCover = (v, name = 'size') => {
         props.onResults?.(results, q);
       } catch (error) {
         if (error?.name === "AbortError") return;
-        if (id !== requestId) return;
+        if (disposed || id !== requestId) return;
         setError(error);
         setResults([]);
         setActive(-1);
         props.onError?.(error, q);
       } finally {
-        if (id === requestId) {
+        if (!disposed && id === requestId) {
           setLoading(false);
           activeController = null;
           scheduleMenuPosition();
@@ -8333,6 +8413,7 @@ const unitCover = (v, name = 'size') => {
       }
     };
     const scheduleSearch = (query, options = {}) => {
+      if (disposed) return;
       if (searchTimer) clearTimeout(searchTimer);
       const delay = options.immediate ? 0 : debounceMs();
       searchTimer = setTimeout(() => {
@@ -8493,18 +8574,18 @@ const unitCover = (v, name = 'size') => {
 
     if (valueBinding) {
       if (typeof valueBinding === "object" && typeof valueBinding._bind === "function") {
-        valueBinding.action((v) => setQuery(v, { fromModel: true }));
+        scope.action(valueBinding, (v) => setQuery(v, { fromModel: true }));
         modelSet = (v) => {
           if (valueBinding.value !== v) valueBinding.value = v;
         };
       } else if (Array.isArray(valueBinding) && typeof valueBinding[0] === "function" && typeof valueBinding[1] === "function") {
         const get = valueBinding[0];
         const set = valueBinding[1];
-        JSswift.reactive.effect(() => { setQuery(get(), { fromModel: true }); }, "UI.Search:model");
+        scope.effect(() => { setQuery(get(), { fromModel: true }); }, "UI.Search:model");
         modelSet = (v) => set(v);
       }
     } else if (uiIsReactive(props.value)) {
-      JSswift.reactive.effect(() => { setQuery(uiUnwrap(props.value), { fromModel: true }); }, "UI.Search:value");
+      scope.effect(() => { setQuery(uiUnwrap(props.value), { fromModel: true }); }, "UI.Search:value");
     }
 
     input.addEventListener("input", (event) => {
@@ -8578,7 +8659,7 @@ const unitCover = (v, name = 'size') => {
     };
     document.addEventListener("click", onDocClick, true);
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const openNow = getOpen();
       root.classList.toggle("open", openNow);
       input.setAttribute("aria-expanded", openNow ? "true" : "false");
@@ -8586,7 +8667,7 @@ const unitCover = (v, name = 'size') => {
       else unmountMenuPortal();
     }, "UI.Search:open");
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const d = isDisabled();
       const r = isReadonly();
       root.classList.toggle("disabled", d);
@@ -8595,7 +8676,7 @@ const unitCover = (v, name = 'size') => {
       input.readOnly = r;
     }, "UI.Search:disabled");
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const loading = getLoading();
       const error = getError();
       const results = getResults();
@@ -8649,7 +8730,7 @@ const unitCover = (v, name = 'size') => {
       scheduleMenuPosition();
     }, "UI.Search:render");
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const active = getActive();
       if (active === lastActive) return;
       if (resultNodes[lastActive]) {
@@ -8692,10 +8773,12 @@ const unitCover = (v, name = 'size') => {
     field._searchNow = () => runSearch(getQuery(), { immediate: true, open: true });
     field._getResults = getResults;
     field._setValue = (value) => setQuery(value, {});
-    let disposed = false;
     field._dispose = () => {
       if (disposed) return;
       disposed = true;
+      scope.dispose();
+      requestId++;
+      cache.clear();
       document.removeEventListener("click", onDocClick, true);
       if (searchTimer) clearTimeout(searchTimer);
       if (activeController) activeController.abort();
@@ -8716,6 +8799,8 @@ const unitCover = (v, name = 'size') => {
 
 
   UI.Select = (props = {}) => {
+    const scope = uiSubscriptionScope();
+    let disposed = false;
     const fieldProps = {
       ...props,
       label: props.label ?? props.placeholder
@@ -8758,7 +8843,7 @@ const unitCover = (v, name = 'size') => {
     if (valueBinding) {
       if (typeof valueBinding === "object" && typeof valueBinding._bind === "function") {
         JSswift.reactive.untracked(() => setValue(normalizeValue(valueBinding.value)));
-        valueBinding.action((v) => setValue(normalizeValue(v)));
+        scope.action(valueBinding, (v) => setValue(normalizeValue(v)));
         modelSet = (v) => {
           const next = normalizeValue(v);
           if (valueBinding.value !== next) valueBinding.value = next;
@@ -8767,7 +8852,7 @@ const unitCover = (v, name = 'size') => {
         const get = valueBinding[0];
         const set = valueBinding[1];
         JSswift.reactive.untracked(() => {
-          JSswift.reactive.effect(() => { setValue(normalizeValue(get())); }, "UI.Select:model");
+          scope.effect(() => { setValue(normalizeValue(get())); }, "UI.Select:model");
         });
         modelSet = (v) => set(normalizeValue(v));
       }
@@ -8834,6 +8919,7 @@ const unitCover = (v, name = 'size') => {
 
     // supports async options
     async function loadOptions() {
+      if (disposed) return;
       const src = props.options;
       let raw;
 
@@ -8847,12 +8933,13 @@ const unitCover = (v, name = 'size') => {
         } else {
           raw = v;
         }
-        buildLists(raw);
+        if (!disposed) buildLists(raw);
       } catch (e) {
+        if (disposed) return;
         console.error("[UI.Select] options load error:", e);
         buildLists([]);
       } finally {
-        setLoading(false);
+        if (!disposed) setLoading(false);
       }
     }
 
@@ -8892,11 +8979,12 @@ const unitCover = (v, name = 'size') => {
     }
 
     async function open() {
-      if (isDisabled()) return;
+      if (disposed || isDisabled()) return;
       setOpen(true);
 
       // load options (sync/async) on open
       await loadOptions();
+      if (disposed) return;
 
       // set active to current selected, otherwise first enabled
       const current = getValue();
@@ -8934,7 +9022,7 @@ const unitCover = (v, name = 'size') => {
     const valueNode = _.div({
       class: uiClass(["cms-select-value", isMulti ? "cms-select-value-multi" : ""])
     });
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const flat = getFlat();
       valueNode.innerHTML = "";
       if (isMulti) {
@@ -8981,7 +9069,7 @@ const unitCover = (v, name = 'size') => {
     }, "UI.Select:value");
 
     const arrowWrap = _.div({ class: "cms-select-arrow" });
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const arrowNode = JSswift.ui.renderSlot(slots, "arrow", { open: getOpen() }, UI.Icon("#chevron-down"));
       arrowWrap.innerHTML = "";
       renderSlotToArray(null, "default", {}, arrowNode).forEach(n => arrowWrap.appendChild(n));
@@ -9023,7 +9111,7 @@ const unitCover = (v, name = 'size') => {
       if (filterInput) filterInput.value = getFilter() || "";
     };
     JSswift.reactive.untracked(renderFilterSlot);
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const next = getFilter() || "";
       if (filterInput && "value" in filterInput && filterInput.value !== next) {
         filterInput.value = next;
@@ -9032,7 +9120,7 @@ const unitCover = (v, name = 'size') => {
 
     if (typeof filterable === "boolean") filterable ? filterWrap.classList.remove("cms-d-none") : filterWrap.classList.add("cms-d-none");
     else if (filterable?.action) {
-      filterable.action((v) => {
+      scope.action(filterable, (v) => {
         v ? filterWrap.classList.remove("cms-d-none") : filterWrap.classList.add("cms-d-none");
       });
       filterable.value ? filterWrap.classList.remove("cms-d-none") : filterWrap.classList.add("cms-d-none");;
@@ -9133,7 +9221,7 @@ const unitCover = (v, name = 'size') => {
     root.appendChild(menu);
 
     // open class + aria
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const o = getOpen();
       root.classList.toggle("open", o);
       root.setAttribute("aria-expanded", o ? "true" : "false");
@@ -9141,7 +9229,7 @@ const unitCover = (v, name = 'size') => {
       else unmountMenuPortal();
     }, "UI.Select:open");
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const d = isDisabled();
       root.classList.toggle("disabled", d);
       root.tabIndex = d ? -1 : 0;
@@ -9163,7 +9251,7 @@ const unitCover = (v, name = 'size') => {
       if (active >= 0) optionNodes[active]?.scrollIntoView({ block: "nearest" });
     }
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       const display = getList();
       const flat = getFlat();
       const filter = (getFilter() || "").toLowerCase().trim();
@@ -9260,7 +9348,7 @@ const unitCover = (v, name = 'size') => {
       if (getOpen()) scheduleMenuPosition();
     }, "UI.Select:render");
 
-    JSswift.reactive.effect(() => {
+    scope.effect(() => {
       paintActive();
     }, "UI.Select:paintActive");
 
@@ -9374,10 +9462,10 @@ const unitCover = (v, name = 'size') => {
     root.addEventListener("keydown", onKeyDown);
     filterWrap.addEventListener("keydown", onKeyDown);
 
-    let disposed = false;
     root._dispose = () => {
       if (disposed) return;
       disposed = true;
+      scope.dispose();
       document.removeEventListener("click", onDocClick, true);
       root.removeEventListener("keydown", onKeyDown);
       filterWrap.removeEventListener("keydown", onKeyDown);
@@ -9417,7 +9505,7 @@ const unitCover = (v, name = 'size') => {
     });
 
     // refresh has-value when value changes
-    JSswift.reactive.effect(() => { field._refresh?.(); }, "UI.Select:fieldRefresh");
+    scope.effect(() => { field._refresh?.(); }, "UI.Select:fieldRefresh");
 
     uiConfigureFieldControl(field, root, props);
     field._select = root;
@@ -10000,7 +10088,10 @@ const unitCover = (v, name = 'size') => {
       return {
         get: () => model.value,
         set: (v) => { if (model.value !== v) model.value = v; },
-        watch: (fn) => { if (typeof model.action === "function") model.action(fn); }
+        watch: (fn) => {
+          model.action?.(fn);
+          return () => { const i = model._actions?.indexOf(fn) ?? -1; if (i >= 0) model._actions.splice(i, 1); };
+        }
       };
     }
     if (Array.isArray(model) && typeof model[0] === "function" && typeof model[1] === "function") {
@@ -10178,7 +10269,7 @@ const unitCover = (v, name = 'size') => {
       if (getOpen() !== next) syncOpen(next);
       controlledDrawer?.set(next);
     };
-    controlledDrawer?.watch?.(() => {
+    const stopDrawerWatch = controlledDrawer?.watch?.(() => {
       const next = !!controlledDrawer.get();
       if (getOpen() !== next) syncOpen(next);
     });
@@ -10193,7 +10284,7 @@ const unitCover = (v, name = 'size') => {
       if (getNavOpen() !== next) syncNavOpen(next);
       controlledNav?.set(next);
     };
-    controlledNav?.watch?.(() => {
+    const stopNavWatch = controlledNav?.watch?.(() => {
       const next = !!controlledNav.get();
       if (getNavOpen() !== next) syncNavOpen(next);
     });
@@ -10281,6 +10372,8 @@ const unitCover = (v, name = 'size') => {
     JSswift.uiApplyResponsiveProps(p, props, JSswift.uiResponsiveStyleRules);
 
     const root = _.div(p);
+    if (stopDrawerWatch) JSswift._registerCleanup(root, stopDrawerWatch);
+    if (stopNavWatch) JSswift._registerCleanup(root, stopNavWatch);
     const tagPage = uiUnwrap(resolveLayoutProp("tagPage")) === true;
     const tags = tagPage
       ? { header: "header", aside: "aside", nav: "nav", page: "main", footer: "footer" }
@@ -21183,8 +21276,9 @@ transition: width 200ms ease;
     };
 
     let searchInput = null;
+    let stopSearchWatch;
     if (searchModel) {
-      searchModel.watch((value) => {
+      stopSearchWatch = searchModel.watch((value) => {
         const next = String(value ?? "");
         setQueryState(next);
         if (searchInput && searchInput.value !== next) searchInput.value = next;
@@ -21199,7 +21293,7 @@ transition: width 200ms ease;
       "actions", "actionsLabel", "emptyText", "loadingText", "onRowClick", "onRowDblClick",
       "tableClass", "tableStyle", "cardClass", "dense", "striped", "hover", "stickyHeader",
       "toolbar", "toolbarStart", "toolbarEnd", "caption", "footer", "status", "rowClass", "rowAttrs",
-      "minTableWidth", "hideHeader", "hideFooter", "slots", "body"
+      "minTableWidth", "hideHeader", "hideFooter", "hideStatus", "slots", "body"
     ]);
     wrapProps.class = uiClass(["cms-table-card", props.class, props.cardClass]);
     if (props.dense != null) wrapProps.dense = props.dense;
@@ -21262,7 +21356,7 @@ transition: width 200ms ease;
       statusSort,
       ...statusExtraNodes
     );
-    shell.appendChild(status);
+    if (props.hideStatus !== true) shell.appendChild(status);
 
     const captionNodes = renderSlotToArray(slots, "caption", {}, props.caption);
     if (captionNodes.length) shell.appendChild(_.div({ class: "cms-table-caption" }, ...captionNodes));
@@ -21394,7 +21488,7 @@ transition: width 200ms ease;
       );
     };
 
-    app.reactive.effect(() => {
+    const stopRender = app.reactive.effect(() => {
       const rows = tableToArray(props.rows);
       const query = String(getQuery() || "").trim();
       const currentSort = getSort();
@@ -21568,7 +21662,10 @@ transition: width 200ms ease;
     }, "UI.Table:render");
 
     wrapProps.body = shell;
-    return UI.Card(wrapProps);
+    const card = UI.Card(wrapProps);
+    JSswift._registerCleanup(card, stopRender);
+    if (stopSearchWatch) JSswift._registerCleanup(card, stopSearchWatch);
+    return card;
   };
   UI.Menu = (...args) => {
     const { props, children } = JSswift.uiNormalizeArgs(args);