mnfst 0.5.261 → 0.5.263

package/lib/manifest.appwrite.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.261';
+const MANIFEST_BUILD_VERSION = '0.5.263';
 
 /* Manifest Data Sources - Appwrite Integration */
 

package/lib/manifest.charts.js

@@ -13,6 +13,23 @@
 	if (!window.ManifestUI) {
 		window.ManifestUI = {
 			/* Loaded data sources (current locale); never force-loads others. */
+			// One cached evaluator per expression: each Alpine.evaluate would register a cleanup on <body>, never run
+			_eval(expr) {
+				const A = window.Alpine;
+				// Magics registered after an evaluator was built stay invisible to it, so a registration drops the cache
+				if (!A.magic.__manifestMagicCounted) {
+					const magic = A.magic;
+					A.magic = function () { window.__manifestMagicVersion = (window.__manifestMagicVersion || 0) + 1; return magic.apply(this, arguments); };
+					A.magic.__manifestMagicCounted = true;
+				}
+				const version = window.__manifestMagicVersion || 0;
+				if (!this._evals || this._evalsVersion !== version) { this._evals = new Map(); this._evalsVersion = version; }
+				let fn = this._evals.get(expr);
+				if (!fn) this._evals.set(expr, fn = A.evaluateLater(document.body, expr));
+				let out;
+				fn(v => { out = v; });
+				return out;
+			},
 			_loadedSourceNames() {
 				try {
 					const store = window.ManifestDataStore && window.ManifestDataStore.rawDataStore;
@@ -24,11 +41,11 @@
 			resolve(component, fallbacks) {
 				const merged = JSON.parse(JSON.stringify(fallbacks || {}));
 				try {
-					if (!window.Alpine || typeof Alpine.evaluate !== 'function') return merged;
-					try { Alpine.evaluate(document.body, 'typeof $locale !== "undefined" && $locale.current'); } catch (_) { } // dep → re-resolve on locale switch
+					if (!window.Alpine || typeof Alpine.evaluateLater !== 'function') return merged;
+					try { this._eval('typeof $locale !== "undefined" && $locale.current'); } catch (_) { } // dep → re-resolve on locale switch
 					for (const name of this._loadedSourceNames()) {
 						let ui;
-						try { ui = Alpine.evaluate(document.body, `$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
+						try { ui = this._eval(`$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
 						if (ui && typeof ui === 'object' && !Array.isArray(ui)) this._deepOverlay(merged, ui);
 					}
 				} catch (_) { }

package/lib/manifest.colorpicker.js

@@ -10,6 +10,23 @@ function initializeColorpickerPlugin() {
     if (!window.ManifestUI) {
         window.ManifestUI = {
             // Names of loaded data sources (current locale); never force-loads others.
+            // One cached evaluator per expression: each Alpine.evaluate would register a cleanup on <body>, never run
+            _eval(expr) {
+                const A = window.Alpine;
+                // Magics registered after an evaluator was built stay invisible to it, so a registration drops the cache
+                if (!A.magic.__manifestMagicCounted) {
+                    const magic = A.magic;
+                    A.magic = function () { window.__manifestMagicVersion = (window.__manifestMagicVersion || 0) + 1; return magic.apply(this, arguments); };
+                    A.magic.__manifestMagicCounted = true;
+                }
+                const version = window.__manifestMagicVersion || 0;
+                if (!this._evals || this._evalsVersion !== version) { this._evals = new Map(); this._evalsVersion = version; }
+                let fn = this._evals.get(expr);
+                if (!fn) this._evals.set(expr, fn = A.evaluateLater(document.body, expr));
+                let out;
+                fn(v => { out = v; });
+                return out;
+            },
             _loadedSourceNames() {
                 try {
                     const store = window.ManifestDataStore && window.ManifestDataStore.rawDataStore;
@@ -22,11 +39,11 @@ function initializeColorpickerPlugin() {
             resolve(component, fallbacks) {
                 const merged = JSON.parse(JSON.stringify(fallbacks || {}));
                 try {
-                    if (!window.Alpine || typeof Alpine.evaluate !== 'function') return merged;
-                    try { Alpine.evaluate(document.body, 'typeof $locale !== "undefined" && $locale.current'); } catch (_) { } // dep → re-resolve on locale switch
+                    if (!window.Alpine || typeof Alpine.evaluateLater !== 'function') return merged;
+                    try { this._eval('typeof $locale !== "undefined" && $locale.current'); } catch (_) { } // dep → re-resolve on locale switch
                     for (const name of this._loadedSourceNames()) {
                         let ui;
-                        try { ui = Alpine.evaluate(document.body, `$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
+                        try { ui = this._eval(`$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
                         if (ui && typeof ui === 'object' && !Array.isArray(ui)) this._deepOverlay(merged, ui);
                     }
                 } catch (_) { }
@@ -563,7 +580,7 @@ function initializeColorpickerPlugin() {
         try {
             if (window.Alpine?.evaluate) {
                 const expr = isBareRef && !hasInterp ? trimmed : '`' + trimmed + '`';
-                const out = Alpine.evaluate(document.body, expr);
+                const out = window.ManifestUI?._eval ? window.ManifestUI._eval(expr) : Alpine.evaluate(document.body, expr);
                 if (out == null) return val;
                 return typeof out === 'string' ? out : String(out);
             }
@@ -1068,6 +1085,8 @@ function initializeColorpickerPlugin() {
 
         const state = {
             rootEl,
+            _effects: [],
+            _observers: [],
             pickerUid,
 
             // Data
@@ -1615,9 +1634,9 @@ function initializeColorpickerPlugin() {
                 if (this.libraryRootValue && window.Alpine?.effect && window.Alpine?.evaluateLater) {
                     // Explicit expression — bypass discovery, re-render on dep change.
                     const evalFn = Alpine.evaluateLater(evalHost, this.libraryRootValue);
-                    Alpine.effect(() => {
+                    this._effects.push(Alpine.effect(() => {
                         evalFn(v => { this._libraryResolvedData = v; this._doRenderLibrary(); });
-                    });
+                    }));
                 } else if (window.Alpine?.effect) {
                     // Zero-config — scan $x.manifest.data for `colorpicker:`-flagged
                     // entries, collect their $x.<name> values, merge in declaration
@@ -1644,12 +1663,12 @@ function initializeColorpickerPlugin() {
                         // `colorpicker` key flagged on the data entry itself (back-compat).
                         const names = [];
                         try {
-                            const ptr = Alpine.evaluate(evalCtx, '$x && $x.manifest && $x.manifest.colorpicker');
+                            const ptr = (window.ManifestUI?._eval ? (x) => window.ManifestUI._eval(x) : (x) => Alpine.evaluate(evalCtx, x))('$x && $x.manifest && $x.manifest.colorpicker');
                             if (typeof ptr === 'string' && ptr) names.push(ptr);
                             else if (Array.isArray(ptr)) ptr.forEach(n => { if (typeof n === 'string' && n) names.push(n); });
                         } catch {}
                         let dataMap = null;
-                        try { dataMap = Alpine.evaluate(evalCtx, '$x && $x.manifest && $x.manifest.data'); } catch {}
+                        try { dataMap = (window.ManifestUI?._eval ? (x) => window.ManifestUI._eval(x) : (x) => Alpine.evaluate(evalCtx, x))('$x && $x.manifest && $x.manifest.data'); } catch {}
                         if (dataMap && typeof dataMap === 'object') {
                             for (const name of Object.keys(dataMap)) {
                                 if (name.startsWith('$') || name.startsWith('_')) continue;
@@ -1663,7 +1682,7 @@ function initializeColorpickerPlugin() {
                             }
                         }
                         const collected = names.map(name => {
-                            try { return Alpine.evaluate(evalCtx, '$x.' + name); } catch { return null; }
+                            try { return (window.ManifestUI?._eval ? (x) => window.ManifestUI._eval(x) : (x) => Alpine.evaluate(evalCtx, x))('$x.' + name); } catch { return null; }
                         });
                         const ready = names.length === 0 || collected.every(src => {
                             if (!src || typeof src !== 'object') return false;
@@ -1688,9 +1707,9 @@ function initializeColorpickerPlugin() {
                     };
 
                     // Reactive deps trigger re-runs on locale switch / manifest load.
-                    Alpine.effect(() => {
-                        try { Alpine.evaluate(evalCtx, 'typeof $locale !== "undefined" && $locale.current'); } catch {}
-                        try { Alpine.evaluate(evalCtx, '$x && $x.manifest && $x.manifest._loadedFrom'); } catch {}
+                    this._effects.push(Alpine.effect(() => {
+                        try { (window.ManifestUI?._eval ? (x) => window.ManifestUI._eval(x) : (x) => Alpine.evaluate(evalCtx, x))('typeof $locale !== "undefined" && $locale.current'); } catch {}
+                        try { (window.ManifestUI?._eval ? (x) => window.ManifestUI._eval(x) : (x) => Alpine.evaluate(evalCtx, x))('$x && $x.manifest && $x.manifest._loadedFrom'); } catch {}
                         runDiscovery();
                         // Re-localize the whole picker on locale switch.
                         this._applyUi(this.rootEl);
@@ -1705,7 +1724,7 @@ function initializeColorpickerPlugin() {
                                 }
                             }, 150);
                         }
-                    });
+                    }));
                 } else {
                     this._doRenderLibrary();
                 }
@@ -2022,6 +2041,7 @@ function initializeColorpickerPlugin() {
                         if (r.width > 0 && r.height > 0) { self.drawCanvas(); self.updateCanvasMarker(); }
                     });
                     ro.observe(refs.canvas);
+                    self._observers.push(ro);
                 }
 
                 if (refs.hueSlider) {
@@ -2453,10 +2473,17 @@ function initializeColorpickerPlugin() {
 
                 // Defer mount so child directives register first. setTimeout (not rAF)
                 // so it still fires when backgrounded.
-                setTimeout(() => state.mount(), 0);
+                setTimeout(() => { if (!state._destroyed) state.mount(); }, 0);
 
                 cleanup(() => {
                     if (el.id) delete _pickerRegistry[el.id];
+                    state._destroyed = true;
+                    state._effects.forEach((fx) => Alpine.release(fx));
+                    state._effects.length = 0;
+                    state._observers.forEach((ro) => ro.disconnect());
+                    state._observers.length = 0;
+                    clearInterval(state._libraryPollTimer);
+                    state._libraryPollTimer = null;
                     delete el._colorpickerState;
                 });
                 return;
@@ -2468,18 +2495,12 @@ function initializeColorpickerPlugin() {
             // Swatches trigger OUTSIDE any picker — handle before the ancestor check.
             // We assign IDs + the popover tag; x-dropdown owns popover mechanics.
             if (role === 'swatch') {
-                if (el._cpSwatchWired) return; // guard against re-firing via initTree
-                el._cpSwatchWired = true;
-
-                // ---- Optional x-model binding ----
-                // x-model is the swatch's source of truth: reactive background preview,
-                // plus read (open) / write (close) accessors the picker uses.
                 const modelExpr = el.getAttribute('x-model');
                 if (modelExpr && window.Alpine?.evaluateLater && window.Alpine?.effect) {
                     try {
                         const readFn = Alpine.evaluateLater(el, modelExpr);
                         // Reactive background preview
-                        Alpine.effect(() => {
+                        const modelEffect = Alpine.effect(() => {
                             readFn(v => {
                                 if (typeof v === 'string' && v.length) {
                                     el.style.setProperty('--color-picker-swatch', v);
@@ -2487,6 +2508,7 @@ function initializeColorpickerPlugin() {
                                 }
                             });
                         });
+                        cleanup(() => Alpine.release(modelEffect));
                         el._cpModelGetter = (cb) => readFn(cb);
                         // Writer: `<modelExpr> = <JSON value>` (color/gradient strings are JSON-safe).
                         el._cpModelSetter = (v) => {
@@ -2495,6 +2517,12 @@ function initializeColorpickerPlugin() {
                     } catch {}
                 }
 
+                if (el._cpSwatchWired) return; // guard against re-firing via initTree
+                el._cpSwatchWired = true;
+
+                // ---- Optional x-model binding ----
+                // x-model is the swatch's source of truth: reactive background preview,
+                // plus read (open) / write (close) accessors the picker uses.
                 // ---- Initial color via `value` attribute ----
                 // Mirrors native <input type=color>: seeds the picker on first open and
                 // the swatch CSS var so border-color paints before interaction.

package/lib/manifest.combobox.js

@@ -12,6 +12,23 @@
  * ------------------------------------------------------------------ */
 if (!window.ManifestUI) {
     window.ManifestUI = {
+        // One cached evaluator per expression: each Alpine.evaluate would register a cleanup on <body>, never run
+        _eval(expr) {
+            const A = window.Alpine;
+            // Magics registered after an evaluator was built stay invisible to it, so a registration drops the cache
+            if (!A.magic.__manifestMagicCounted) {
+                const magic = A.magic;
+                A.magic = function () { window.__manifestMagicVersion = (window.__manifestMagicVersion || 0) + 1; return magic.apply(this, arguments); };
+                A.magic.__manifestMagicCounted = true;
+            }
+            const version = window.__manifestMagicVersion || 0;
+            if (!this._evals || this._evalsVersion !== version) { this._evals = new Map(); this._evalsVersion = version; }
+            let fn = this._evals.get(expr);
+            if (!fn) this._evals.set(expr, fn = A.evaluateLater(document.body, expr));
+            let out;
+            fn(v => { out = v; });
+            return out;
+        },
         _loadedSourceNames() {
             try {
                 const store = window.ManifestDataStore && window.ManifestDataStore.rawDataStore;
@@ -22,11 +39,11 @@ if (!window.ManifestUI) {
         resolve(component, fallbacks) {
             const merged = JSON.parse(JSON.stringify(fallbacks || {}));
             try {
-                if (!window.Alpine || typeof Alpine.evaluate !== 'function') return merged;
-                try { Alpine.evaluate(document.body, 'typeof $locale !== "undefined" && $locale.current'); } catch (_) { }
+                if (!window.Alpine || typeof Alpine.evaluateLater !== 'function') return merged;
+                try { this._eval('typeof $locale !== "undefined" && $locale.current'); } catch (_) { }
                 for (const name of this._loadedSourceNames()) {
                     let ui;
-                    try { ui = Alpine.evaluate(document.body, `$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
+                    try { ui = this._eval(`$x['${name}'] && $x['${name}']._ui && $x['${name}']._ui['${component}']`); } catch (_) { ui = null; }
                     if (ui && typeof ui === 'object' && !Array.isArray(ui)) this._deepOverlay(merged, ui);
                 }
             } catch (_) { }
@@ -165,7 +182,9 @@ function initializeComboboxPlugin() {
     Alpine.directive('combobox', (el, { modifiers, expression }, { cleanup }) => {
         captureModel(el);   // fallback for any path that bypasses the above
         // Build after the current tick so sibling sources (datalist/menu) exist.
-        setTimeout(() => build(el, modifiers, expression || '', cleanup), 0);
+        let removed = false;
+        cleanup(() => { removed = true; });
+        setTimeout(() => { if (!removed) build(el, modifiers, expression || '', cleanup); }, 0);
     });
 
     // Resolve the menu's owning top-layer context fresh, every time — never cache it.
@@ -201,6 +220,8 @@ function initializeComboboxPlugin() {
             // it into wherever the owner lives now. Harmless no-op otherwise.
             const m = el.__mnfstComboboxMenu;
             if (m) reattach(el, m);
+            // A re-initialized field: its cleanup released these
+            el.__cbBindEffects?.(cleanup);
             return;
         }
         el.__mnfstCombobox = true;
@@ -941,6 +962,8 @@ function initializeComboboxPlugin() {
         disabledObserver.observe(el, { attributes: true, attributeFilter: ['disabled'] });
         if (cleanup) cleanup(() => disabledObserver.disconnect());
 
+        const effectFactories = [];
+
         // ----- Reactive model (x-model) -----
         // Render chips from the bound value on init and external change; write back on
         // add/remove. Read inside an Alpine effect so $x / nested state stay reactive.
@@ -951,7 +974,7 @@ function initializeComboboxPlugin() {
                     : (modelArrayShape === false ? vals.join(',') : vals.slice());
                 try { Alpine.evaluate(el, `${modelExpr} = ${JSON.stringify(out)}`); } catch (_) { }
             };
-            Alpine.effect(() => {
+            effectFactories.push(() => Alpine.effect(() => {
                 read(raw => {
                     if (modelArrayShape === null && raw != null && raw !== '') modelArrayShape = Array.isArray(raw);
                     const incoming = modelToValues(raw);
@@ -960,20 +983,26 @@ function initializeComboboxPlugin() {
                     if (!multiple && selected.length > 1) selected = selected.slice(-1);
                     render();
                 });
-            });
+            }));
         }
 
         // ----- Reactive locked list (config-object form, so `locked` can gate on state) -----
         if (expr.startsWith('{')) {
-            Alpine.effect(() => {
+            effectFactories.push(() => Alpine.effect(() => {
                 let c; try { c = Alpine.evaluate(el, expr); } catch (_) { return; }
                 const next = computeLocked(c && typeof c === 'object' && !Array.isArray(c) ? c : null);
                 if (next.size === lockedSet.size && [...next].every(v => lockedSet.has(v))) return;
                 lockedSet = next;
                 render();
-            });
+            }));
         }
 
+        el.__cbBindEffects = (onCleanup) => {
+            const effects = effectFactories.map((make) => make());
+            if (onCleanup) onCleanup(() => effects.forEach((fx) => Alpine.release(fx)));
+        };
+        el.__cbBindEffects(cleanup);
+
         // ----- Dynamic options: re-read when x-for / $x fills the source after build,
         //        keeping the menu, chip labels, and data-locked flags current. -----
         if (src) {

package/lib/manifest.css

@@ -2580,14 +2580,21 @@
         background-color: rgba(0, 0, 0, 0.35)
     }
 
-    /* Hide dropdowns when dialogs are open */
+    /* Hide dropdowns when dialogs are open: <html> sets flags, menus read them via style queries */
     html:has(dialog:popover-open) {
+        --dialog-open: 1;
+    }
 
-        /* Hide dropdowns outside of any dialog. A generated popover (a datepicker
-           calendar, a colorpicker panel) is appended to <body>, so DOM position alone
-           can't tell page chrome from a menu the dialog itself opened —
-           data-popover-nested marks the latter, which CSS has no way to work out. */
-        & menu[popover]:not(dialog *):not([data-popover-nested]) {
+    html:has(dialog:popover-open ~ dialog:popover-open) {
+        --dialog-stacked: 1;
+    }
+
+    /* Hide dropdowns outside of any dialog. A generated popover (a datepicker
+       calendar, a colorpicker panel) is appended to <body>, so DOM position alone
+       can't tell page chrome from a menu the dialog itself opened —
+       data-popover-nested marks the latter, which CSS has no way to work out. */
+    @container style(--dialog-open: 1) {
+        menu[popover]:not(dialog *):not([data-popover-nested]) {
             opacity: 0;
             scale: .9;
             pointer-events: none;
@@ -2600,8 +2607,8 @@
     }
 
     /* When multiple dialogs are open, hide dropdowns in all but closest dialog */
-    html:has(dialog:popover-open ~ dialog:popover-open) {
-        & dialog:popover-open:not(:last-of-type) menu[popover] {
+    @container style(--dialog-stacked: 1) {
+        dialog:popover-open:not(:last-of-type) menu[popover] {
             opacity: 0;
             scale: .9;
             pointer-events: none;

package/lib/manifest.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.261';
+const MANIFEST_BUILD_VERSION = '0.5.263';
 
 /* Manifest Data Sources - Configuration */
 
@@ -784,7 +784,8 @@ function createReactiveReferences(data, dataSourceName = null) {
                             dataSourceName,
                             data.$id,
                             bucketName,
-                            columnName
+                            columnName,
+                            { owner: newObj }
                         );
 
                         // Assign computed array to entry
@@ -6011,13 +6012,9 @@ const routeProxyCache = new Map();
 // Clear route proxy cache for a specific data source (called when store updates)
 function clearRouteProxyCacheForDataSource(dataSourceName) {
     if (!dataSourceName) return;
-    const keysToDelete = [];
-    for (const [key] of routeProxyCache.entries()) {
-        if (key.startsWith(`${dataSourceName}:`)) {
-            keysToDelete.push(key);
-        }
+    for (const [key, entry] of routeProxyCache.entries()) {
+        if (key.startsWith(`${dataSourceName}:`)) entry.stale = true;
     }
-    keysToDelete.forEach(key => routeProxyCache.delete(key));
 }
 
 // Create proxy for route-specific lookups
@@ -6025,8 +6022,13 @@ function createRouteProxy(dataSourceData, pathKey, dataSourceName) {
     // Use cache if dataSourceName is provided to avoid recreating proxies
     if (dataSourceName && pathKey) {
         const cacheKey = `${dataSourceName}:${pathKey}`;
-        if (routeProxyCache.has(cacheKey)) {
-            return routeProxyCache.get(cacheKey);
+        const cached = routeProxyCache.get(cacheKey);
+        if (cached) {
+            if (cached.stale) {
+                cached.stale = false;
+                cached.refresh(dataSourceData);
+            }
+            return cached.proxy;
         }
     }
 
@@ -6271,7 +6273,15 @@ function createRouteProxy(dataSourceData, pathKey, dataSourceName) {
     // Cache the proxy if dataSourceName and pathKey are provided
     if (dataSourceName && pathKey) {
         const cacheKey = `${dataSourceName}:${pathKey}`;
-        routeProxyCache.set(cacheKey, proxy);
+        routeProxyCache.set(cacheKey, {
+            proxy,
+            stale: false,
+            refresh(data) {
+                dataSourceData = data;
+                lastUpdateUrl = null;
+                updateReactiveTarget();
+            }
+        });
     }
 
     return proxy;
@@ -6299,7 +6309,10 @@ const reactiveFileManagers = new Map();
 
 // Create a computed files array for an entry that filters the bucket array by fileIds
 // This is the new single-source-of-truth approach
-function createComputedFilesArray(tableName, entryId, bucketName, columnName = 'fileIds') {
+// owner: the row object holding this array; the effect releases itself once the row leaves its table
+function createComputedFilesArray(tableName, entryId, bucketName, columnName = 'fileIds', options = {}) {
+    const owner = options.owner || null;
+
     if (typeof Alpine === 'undefined') {
         // Return empty array proxy if Alpine not available
         return new Proxy([], {
@@ -6405,8 +6418,9 @@ function createComputedFilesArray(tableName, entryId, bucketName, columnName = '
     };
 
     // Set up Alpine effect to watch both bucket array and entry's fileIds
+    let filesEffect = null;
     if (typeof Alpine !== 'undefined' && Alpine.effect) {
-        Alpine.effect(() => {
+        filesEffect = Alpine.effect(() => {
             // Access store to track changes
             const store = Alpine.store('data');
             if (!store) {
@@ -6414,6 +6428,14 @@ function createComputedFilesArray(tableName, entryId, bucketName, columnName = '
                 return;
             }
 
+            if (owner) {
+                const rows = store[tableName];
+                if (Array.isArray(rows) && !rows.some(row => (Alpine.raw ? Alpine.raw(row) : row) === owner)) {
+                    queueMicrotask(() => { if (filesEffect) Alpine.release(filesEffect); });
+                    return;
+                }
+            }
+
             // Track bucket array changes - access the array itself and iterate to track all elements
             const bucketFiles = store[bucketName];
             if (bucketFiles && Array.isArray(bucketFiles)) {
@@ -6460,7 +6482,7 @@ function createComputedFilesArray(tableName, entryId, bucketName, columnName = '
     recomputeFiles();
 
     // Create proxy that adds loading/error properties
-    return new Proxy(computedFiles, {
+    const computedProxy = new Proxy(computedFiles, {
         get(target, key) {
             if (key === '$loading') return loadingState.value;
             if (key === '$error') return errorState.value;
@@ -6475,6 +6497,7 @@ function createComputedFilesArray(tableName, entryId, bucketName, columnName = '
             return key in target || key === '$loading' || key === '$error';
         }
     });
+    return computedProxy;
 }
 
 // Create reactive file array that watches a function/expression for entryId changes
@@ -6908,9 +6931,7 @@ function createReactiveFileManager(tableName, entryId, bucketName, columnName) {
         });
 
         unsubscribeCallbacks.push(() => {
-            if (unwatch && typeof unwatch === 'function') {
-                unwatch();
-            }
+            if (unwatch) Alpine.release(unwatch);
         });
     };