@qwik.dev/core 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.1-dev+495e8d9
+ * @qwik.dev/core 2.0.0-beta.10-dev+4669425
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -11,6 +11,13 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.qwikCore = {}, global.qwikBuild, global.qwikPreloader));
 })(this, (function (exports, build, preloader) { 'use strict';
 
+    /**
+     * QWIK_VERSION
+     *
+     * @public
+     */
+    const version = "2.0.0-beta.10-dev+4669425";
+
     // same as isDev but separate so we can test
     const qDev = globalThis.qDev !== false;
     const qInspector = globalThis.qInspector === true;
@@ -74,6 +81,30 @@
         return err;
     };
 
+    /** @private */
+    const isSerializableObject = (v) => {
+        const proto = Object.getPrototypeOf(v);
+        return proto === Object.prototype || proto === Array.prototype || proto === null;
+    };
+    const isObject = (v) => {
+        return typeof v === 'object' && v !== null;
+    };
+    const isArray = (v) => {
+        return Array.isArray(v);
+    };
+    const isString = (v) => {
+        return typeof v === 'string';
+    };
+    const isNumber$1 = (v) => {
+        return typeof v === 'number';
+    };
+    const isFunction = (v) => {
+        return typeof v === 'function';
+    };
+    const isPrimitive = (v) => {
+        return typeof v !== 'object' && typeof v !== 'function' && v !== null && v !== undefined;
+    };
+
     const codeToText = (code, ...parts) => {
         if (qDev) {
             // Keep one error, one line to make it easier to search for the error message.
@@ -118,7 +149,7 @@
             if (parts.length) {
                 text = text.replaceAll(/{{(\d+)}}/g, (_, index) => {
                     let v = parts[index];
-                    if (v && typeof v === 'object' && v.constructor === Object) {
+                    if (v && isObject(v) && v.constructor === Object) {
                         v = JSON.stringify(v).slice(0, 50);
                     }
                     return v;
@@ -197,9 +228,13 @@
         ']):not([q\\:container=' +
         "text" /* QContainerValue.TEXT */ +
         '])';
+    // Node namespaces
     const HTML_NS = 'http://www.w3.org/1999/xhtml';
     const SVG_NS = 'http://www.w3.org/2000/svg';
     const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
+    // Attributes namespaces
+    const XLINK_NS = 'http://www.w3.org/1999/xlink';
+    const XML_NS = 'http://www.w3.org/XML/1998/namespace';
     const ResourceEvent = 'qResource';
     const RenderEvent = 'qRender';
     const TaskEvent = 'qTask';
@@ -265,13 +300,6 @@
                     });
                 });
             },
-            nextTick: (fn) => {
-                return new Promise((resolve) => {
-                    setTimeout(() => {
-                        resolve(fn());
-                    });
-                });
-            },
             chunkForSymbol(symbolName, chunk) {
                 return [symbolName, chunk ?? '_'];
             },
@@ -379,7 +407,7 @@
             setTimeout(resolve, timeout);
         });
     };
-    // Retries a function that throws a promise.
+    /** Retries a function that throws a promise. */
     function retryOnPromise(fn, retryCount = 0) {
         const retryOrThrow = (e) => {
             if (isPromise(e) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
@@ -404,24 +432,6 @@
         }
     }
 
-    /** @private */
-    const isSerializableObject = (v) => {
-        const proto = Object.getPrototypeOf(v);
-        return proto === Object.prototype || proto === Array.prototype || proto === null;
-    };
-    const isObject = (v) => {
-        return !!v && typeof v === 'object';
-    };
-    const isArray = (v) => {
-        return Array.isArray(v);
-    };
-    const isString = (v) => {
-        return typeof v === 'string';
-    };
-    const isFunction = (v) => {
-        return typeof v === 'function';
-    };
-
     const ASSERT_DISCLAIMER = 'Internal assert, this is likely caused by a bug in Qwik: ';
     function assertDefined(value, text, ...parts) {
         if (qDev) {
@@ -547,6 +557,13 @@
             this.$container$ = container;
             this.$untrackedValue$ = value;
         }
+        /**
+         * Use this to force running subscribers, for example when the calculated value has mutated but
+         * remained the same object
+         */
+        force() {
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+        }
         get untrackedValue() {
             return this.$untrackedValue$;
         }
@@ -560,14 +577,7 @@
         set value(value) {
             if (value !== this.$untrackedValue$) {
                 this.$untrackedValue$ = value;
-                // TODO: move this to the scheduler
-                triggerEffects(this.$container$, this, this.$effects$);
-                // this.$container$?.$scheduler$(
-                //   ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS,
-                //   null,
-                //   this,
-                //   this.$effects$
-                // );
+                this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
             }
         }
         // prevent accidental use as value
@@ -629,23 +639,19 @@
         $funcStr$;
         $flags$;
         $hostElement$ = null;
-        $forceRunEffects$ = false;
         [_EFFECT_BACK_REF] = null;
         constructor(container, fn, args, fnStr, 
         // We need a separate flag to know when the computation needs running because
         // we need the old value to know if effects need running after computation
-        flags = 1 /* SignalFlags.INVALID */ | 2 /* WrappedSignalFlags.UNWRAP */) {
+        flags = 1 /* SignalFlags.INVALID */ | 4 /* WrappedSignalFlags.UNWRAP */) {
             super(container, NEEDS_COMPUTATION);
             this.$args$ = args;
             this.$func$ = fn;
             this.$funcStr$ = fnStr;
             this.$flags$ = flags;
         }
-        $invalidate$() {
+        invalidate() {
             this.$flags$ |= 1 /* SignalFlags.INVALID */;
-            this.$forceRunEffects$ = false;
-            // We should only call subscribers if the calculation actually changed.
-            // Therefore, we need to calculate the value now.
             this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, this.$hostElement$, this, this.$effects$);
         }
         /**
@@ -653,30 +659,26 @@
          * remained the same object.
          */
         force() {
-            this.$flags$ |= 1 /* SignalFlags.INVALID */;
-            this.$forceRunEffects$ = false;
-            triggerEffects(this.$container$, this, this.$effects$);
+            this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, this.$hostElement$, this, this.$effects$);
         }
         get untrackedValue() {
-            const didChange = this.$computeIfNeeded$();
-            if (didChange) {
-                this.$forceRunEffects$ = didChange;
-            }
+            this.$computeIfNeeded$();
             assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
             return this.$untrackedValue$;
         }
         $computeIfNeeded$() {
             if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-                return false;
+                return;
             }
             const untrackedValue = trackSignal(() => this.$func$(...this.$args$), this, "." /* EffectProperty.VNODE */, this.$container$);
-            // TODO: we should remove invalid flag here
+            // TODO: we should remove invalid flag here, but some tests are failing
             // this.$flags$ &= ~SignalFlags.INVALID;
             const didChange = untrackedValue !== this.$untrackedValue$;
             if (didChange) {
+                this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
                 this.$untrackedValue$ = untrackedValue;
             }
-            return didChange;
         }
         // Make this signal read-only
         set value(_) {
@@ -713,7 +715,6 @@
     }
 
     let _context;
-    /** @public */
     const tryGetInvokeContext = () => {
         if (!_context) {
             const context = typeof document !== 'undefined' && document && document.__q_context__;
@@ -734,6 +735,7 @@
         }
         return ctx;
     };
+    /** @internal */
     const useInvokeContext = () => {
         const ctx = tryGetInvokeContext();
         if (!ctx || ctx.$event$ !== RenderEvent) {
@@ -779,7 +781,7 @@
     // TODO how about putting url and locale (and event/custom?) in to a "static" object
     const newInvokeContext = (locale, hostElement, element, event, url) => {
         // ServerRequestEvent has .locale, but it's not always defined.
-        const $locale$ = locale || (typeof event === 'object' && event && 'locale' in event ? event.locale : undefined);
+        const $locale$ = locale || (event && isObject(event) && 'locale' in event ? event.locale : undefined);
         const ctx = {
             $url$: url,
             $i$: 0,
@@ -859,17 +861,38 @@
         }
     };
     /** @internal */
+    const _getContextContainer = () => {
+        const iCtx = tryGetInvokeContext();
+        if (iCtx) {
+            return iCtx.$container$;
+        }
+    };
+    /** @internal */
     const _jsxBranch = (input) => {
         return input;
     };
     /** @internal */
     const _waitUntilRendered = (elm) => {
-        const containerEl = _getQContainerElement(elm);
-        if (!containerEl) {
+        const container = _getQContainerElement(elm)?.qContainer;
+        if (!container) {
             return Promise.resolve();
         }
-        const container = containerEl.qContainer;
-        return container?.renderDone ?? Promise.resolve();
+        // Multi-cycle idle: loop WAIT_FOR_QUEUE until the flush epoch stays stable
+        // across an extra microtask, which signals that no new work re-scheduled.
+        return (async () => {
+            for (;;) {
+                await container.$scheduler$(255 /* ChoreType.WAIT_FOR_QUEUE */).$returnValue$;
+                const firstEpoch = container.$flushEpoch$ || 0;
+                // Give a microtask for any immediate follow-up scheduling to enqueue
+                await Promise.resolve();
+                const secondEpoch = container.$flushEpoch$ || 0;
+                // If no epoch change occurred during and after WAIT_FOR_QUEUE, we are idle.
+                if (firstEpoch === secondEpoch) {
+                    return;
+                }
+                // Continue loop if epoch advanced, meaning more work flushed.
+            }
+        })();
     };
 
     /**
@@ -947,7 +970,7 @@
         }
         return null; // Return null if not matching expected format
     }
-    function eventNameToJsxEvent(eventName, prefix, startIdx = 0) {
+    function eventNameToJsxEvent(eventName, prefix) {
         eventName = eventName.charAt(0).toUpperCase() + eventName.substring(1);
         return prefix + eventName + EVENT_SUFFIX;
     }
@@ -1216,6 +1239,15 @@
             throw qError(11 /* QError.invalidContext */, [context]);
         }
     };
+    /** @internal */
+    const _resolveContextWithoutSequentialScope = (context) => {
+        const iCtx = getInvokeContext();
+        const hostElement = iCtx.$hostElement$;
+        if (!hostElement) {
+            return undefined;
+        }
+        return iCtx.$container$?.resolveContext(hostElement, context);
+    };
 
     const ERROR_CONTEXT = /*#__PURE__*/ createContextId('qk-error');
     const isRecoverable = (err) => {
@@ -1227,13 +1259,6 @@
         return true;
     };
 
-    /**
-     * QWIK_VERSION
-     *
-     * @public
-     */
-    const version = "2.0.0-beta.1-dev+495e8d9";
-
     /** @internal */
     const EMPTY_ARRAY = [];
     const EMPTY_OBJ = {};
@@ -1374,7 +1399,7 @@
      *
      * @internal
      */
-    const queueQRL = (...args) => {
+    const _run = (...args) => {
         // This will already check container
         const [runQrl] = useLexicalScope();
         const context = getInvokeContext();
@@ -1388,7 +1413,58 @@
         if (!scheduler) {
             throw qError(1 /* QError.schedulerNotFound */);
         }
-        return scheduler(2 /* ChoreType.RUN_QRL */, hostElement, runQrl, args);
+        // We don't return anything, the scheduler is in charge now
+        const chore = scheduler(2 /* ChoreType.RUN_QRL */, hostElement, runQrl, args);
+        return getChorePromise(chore);
+    };
+
+    /** @internal */
+    const mapApp_findIndx = (array, key, start) => {
+        assertTrue(start % 2 === 0, 'Expecting even number.');
+        let bottom = start >> 1;
+        let top = (array.length - 2) >> 1;
+        while (bottom <= top) {
+            const mid = bottom + ((top - bottom) >> 1);
+            const midKey = array[mid << 1];
+            if (midKey === key) {
+                return mid << 1;
+            }
+            if (midKey < key) {
+                bottom = mid + 1;
+            }
+            else {
+                top = mid - 1;
+            }
+        }
+        return (bottom << 1) ^ -1;
+    };
+    /** @internal */
+    const mapArray_set = (array, key, value, start, allowNullValue = false) => {
+        const indx = mapApp_findIndx(array, key, start);
+        if (indx >= 0) {
+            if (value == null && !allowNullValue) {
+                array.splice(indx, 2);
+            }
+            else {
+                array[indx + 1] = value;
+            }
+        }
+        else if (value != null || allowNullValue) {
+            array.splice(indx ^ -1, 0, key, value);
+        }
+    };
+    /** @internal */
+    const mapArray_get = (array, key, start) => {
+        const indx = mapApp_findIndx(array, key, start);
+        if (indx >= 0) {
+            return array[indx + 1];
+        }
+        else {
+            return null;
+        }
+    };
+    const mapArray_has = (array, key, start) => {
+        return mapApp_findIndx(array, key, start) >= 0;
     };
 
     /** @internal */
@@ -1397,6 +1473,8 @@
     const _VAR_PROPS = Symbol('VAR');
     /** @internal @deprecated v1 compat */
     const _IMMUTABLE = Symbol('IMMUTABLE');
+    /** @internal */
+    const _UNINITIALIZED = Symbol('UNINITIALIZED');
 
     // <docs markdown="../../readme.md#implicit$FirstArg">
     // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -1461,21 +1539,20 @@
          */
         $computeQrl$;
         $flags$;
-        $forceRunEffects$ = false;
         [_EFFECT_BACK_REF] = null;
         constructor(container, fn, 
         // We need a separate flag to know when the computation needs running because
         // we need the old value to know if effects need running after computation
-        flags = 1 /* SignalFlags.INVALID */) {
+        flags = 1 /* SignalFlags.INVALID */ |
+            32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */) {
             // The value is used for comparison when signals trigger, which can only happen
             // when it was calculated before. Therefore we can pass whatever we like.
             super(container, NEEDS_COMPUTATION);
             this.$computeQrl$ = fn;
             this.$flags$ = flags;
         }
-        $invalidate$() {
+        invalidate() {
             this.$flags$ |= 1 /* SignalFlags.INVALID */;
-            this.$forceRunEffects$ = false;
             this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
         }
         /**
@@ -1483,20 +1560,17 @@
          * remained the same object
          */
         force() {
-            this.$forceRunEffects$ = true;
-            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+            this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+            super.force();
         }
         get untrackedValue() {
-            const didChange = this.$computeIfNeeded$();
-            if (didChange) {
-                this.$forceRunEffects$ = didChange;
-            }
+            this.$computeIfNeeded$();
             assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
             return this.$untrackedValue$;
         }
         $computeIfNeeded$() {
             if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-                return false;
+                return;
             }
             const computeQrl = this.$computeQrl$;
             throwIfQRLNotResolved(computeQrl);
@@ -1515,9 +1589,12 @@
                 this.$flags$ &= ~1 /* SignalFlags.INVALID */;
                 const didChange = untrackedValue !== this.$untrackedValue$;
                 if (didChange) {
+                    // skip first computation when value is not changed
+                    if (this.$untrackedValue$ !== NEEDS_COMPUTATION) {
+                        this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+                    }
                     this.$untrackedValue$ = untrackedValue;
                 }
-                return didChange;
             }
             finally {
                 if (ctx) {
@@ -1543,12 +1620,12 @@
      */
     class SerializerSignalImpl extends ComputedSignalImpl {
         constructor(container, argQrl) {
-            super(container, argQrl);
+            super(container, argQrl, 1 /* SignalFlags.INVALID */ | 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */);
         }
         $didInitialize$ = false;
         $computeIfNeeded$() {
             if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-                return false;
+                return;
             }
             throwIfQRLNotResolved(this.$computeQrl$);
             let arg = this.$computeQrl$.resolved;
@@ -1559,16 +1636,16 @@
             const update = arg.update;
             const currentValue = this.$untrackedValue$ === NEEDS_COMPUTATION ? initial : this.$untrackedValue$;
             const untrackedValue = trackSignal(() => this.$didInitialize$
-                ? update?.(currentValue)
+                ? update?.(currentValue) || currentValue
                 : deserialize(currentValue), this, "." /* EffectProperty.VNODE */, this.$container$);
             const didChange = (this.$didInitialize$ && untrackedValue !== 'undefined') ||
                 untrackedValue !== this.$untrackedValue$;
             this.$flags$ &= -2 /* SignalFlags.INVALID */;
             this.$didInitialize$ = true;
             if (didChange) {
+                this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
                 this.$untrackedValue$ = untrackedValue;
             }
-            return didChange;
         }
     }
 
@@ -1578,6 +1655,28 @@
     const getStoreTarget = (value) => {
         return value?.[STORE_TARGET] || null;
     };
+    /**
+     * Force a store to recompute and schedule effects.
+     *
+     * @public
+     */
+    const forceStoreEffects = (value, prop) => {
+        const handler = getStoreHandler(value);
+        if (handler) {
+            handler.force(prop);
+        }
+    };
+    /**
+     * @returns True if the store has effects for the given prop
+     * @internal
+     */
+    const _hasStoreEffects = (value, prop) => {
+        const handler = getStoreHandler(value);
+        if (handler) {
+            return (handler.$effects$?.get(prop)?.size ?? 0) > 0;
+        }
+        return false;
+    };
     /**
      * Get the original object that was wrapped by the store. Useful if you want to clone a store
      * (structuredClone, IndexedDB,...)
@@ -1587,6 +1686,7 @@
     const unwrapStore = (value) => {
         return getStoreTarget(value) || value;
     };
+    /** @internal */
     const isStore = (value) => {
         return STORE_TARGET in value;
     };
@@ -1615,7 +1715,12 @@
         toString() {
             return '[Store]';
         }
+        force(prop) {
+            const target = getStoreTarget(this);
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, getEffects(target, prop, this.$effects$));
+        }
         get(target, prop) {
+            // TODO(perf): handle better `slice` calls
             if (typeof prop === 'symbol') {
                 if (prop === STORE_TARGET) {
                     return target;
@@ -1648,8 +1753,7 @@
             }
             const flags = this.$flags$;
             if (flags & 1 /* StoreFlags.RECURSIVE */ &&
-                typeof value === 'object' &&
-                value !== null &&
+                isObject(value) &&
                 !Object.isFrozen(value) &&
                 !isStore(value) &&
                 !Object.isFrozen(target)) {
@@ -1679,7 +1783,11 @@
             if (typeof prop != 'string' || !delete target[prop]) {
                 return false;
             }
-            triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$));
+            if (!Array.isArray(target)) {
+                // If the target is an array, we don't need to trigger effects.
+                // Changing the length property will trigger effects.
+                this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, getEffects(target, prop, this.$effects$));
+            }
             return true;
         }
         has(target, prop) {
@@ -1738,8 +1846,10 @@
     }
     function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
         target[prop] = value;
-        // TODO: trigger effects through the scheduler
-        triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
+        const effects = getEffects(target, prop, currentStore.$effects$);
+        if (effects) {
+            currentStore.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, currentStore, effects);
+        }
     }
     function getEffects(target, prop, storeEffects) {
         let effectsToTrigger;
@@ -1827,7 +1937,7 @@
         $loadingEffects$ = null;
         $errorEffects$ = null;
         $destroy$;
-        $promiseValue$ = null;
+        $promiseValue$ = NEEDS_COMPUTATION;
         [_EFFECT_BACK_REF] = null;
         constructor(container, fn, flags = 1 /* SignalFlags.INVALID */) {
             super(container, fn, flags);
@@ -1861,18 +1971,23 @@
         get untrackedError() {
             return this.$untrackedError$;
         }
+        invalidate() {
+            super.invalidate();
+            this.$promiseValue$ = NEEDS_COMPUTATION;
+        }
         $computeIfNeeded$() {
             if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-                return false;
+                return;
             }
             const computeQrl = this.$computeQrl$;
             throwIfQRLNotResolved(computeQrl);
             const [cleanup] = cleanupFn(this, (err) => this.$container$?.handleError(err, null));
-            const untrackedValue = this.$promiseValue$ ??
-                computeQrl.getFn()({
+            const untrackedValue = this.$promiseValue$ === NEEDS_COMPUTATION
+                ? computeQrl.getFn()({
                     track: trackFn(this, this.$container$),
                     cleanup,
-                });
+                })
+                : this.$promiseValue$;
             if (isPromise(untrackedValue)) {
                 this.untrackedLoading = true;
                 this.untrackedError = null;
@@ -1883,14 +1998,16 @@
                     this.untrackedError = null;
                 })
                     .catch((err) => {
+                    this.$promiseValue$ = err;
                     this.untrackedLoading = false;
                     this.untrackedError = err;
                 });
             }
-            this.$promiseValue$ = null;
+            this.$promiseValue$ = NEEDS_COMPUTATION;
             this.$flags$ &= -2 /* SignalFlags.INVALID */;
             const didChange = untrackedValue !== this.$untrackedValue$;
             if (didChange) {
+                this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
                 this.$untrackedValue$ = untrackedValue;
             }
             return didChange;
@@ -1902,13 +2019,15 @@
         return new SignalImpl(null, value);
     };
     /** @internal */
-    const createComputedSignal = (qrl) => {
-        throwIfQRLNotResolved(qrl);
-        return new ComputedSignalImpl(null, qrl);
+    const createComputedSignal = (qrl, options) => {
+        return new ComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || 'always'));
+    };
+    /** @internal */
+    const createAsyncComputedSignal = (qrl, options) => {
+        return new AsyncComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || 'never'));
     };
     /** @internal */
     const createSerializerSignal = (arg) => {
-        throwIfQRLNotResolved(arg);
         return new SerializerSignalImpl(null, arg);
     };
 
@@ -1927,11 +2046,22 @@
      * The QRL must be a function which returns the value of the signal. The function must not have side
      * effects, and it must be synchronous.
      *
-     * If you need the function to be async, use `useSignal` and `useTask$` instead.
+     * If you need the function to be async, use `useAsyncComputed$` instead.
      *
      * @public
      */
     const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedSignal);
+    /**
+     * Create an async computed signal which is calculated from the given QRL. A computed signal is a
+     * signal which is calculated from other signals or async operation. When the signals change, the
+     * computed signal is recalculated.
+     *
+     * The QRL must be a function which returns the value of the signal. The function must not have side
+     * effects, and it can be async.
+     *
+     * @public
+     */
+    const createAsyncComputed$ = /*#__PURE__*/ implicit$FirstArg(createAsyncComputedSignal);
     /**
      * Create a signal that holds a custom serializable value. See {@link useSerializer$} for more
      * details.
@@ -1965,7 +2095,7 @@
             if (!(obj instanceof AsyncComputedSignalImpl)) {
                 assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
             }
-            if (obj instanceof WrappedSignalImpl && obj.flags & 2 /* WrappedSignalFlags.UNWRAP */) {
+            if (obj instanceof WrappedSignalImpl && obj.flags & 4 /* WrappedSignalFlags.UNWRAP */) {
                 return obj;
             }
             return getWrapped(args);
@@ -1991,17 +2121,6 @@
         // the object is not reactive, so we can just return the value
         return obj[prop];
     };
-    /** @internal */
-    const _wrapStore = (obj, prop) => {
-        const target = getStoreTarget(obj);
-        const value = target[prop];
-        if (isSignal(value)) {
-            return value;
-        }
-        else {
-            return new WrappedSignalImpl(null, getProp, [obj, prop], null, 1 /* SignalFlags.INVALID */);
-        }
-    };
     /** @internal @deprecated v1 compat */
     const _wrapSignal = (obj, prop) => {
         const r = _wrapProp(obj, prop);
@@ -2037,7 +2156,7 @@
         return !prop.startsWith('q:') && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
     }
     /** @internal */
-    const _restProps = (props, omit, target = {}) => {
+    const _restProps = (props, omit = [], target = {}) => {
         let constPropsTarget = null;
         const constProps = props[_CONST_PROPS];
         if (constProps) {
@@ -2423,7 +2542,6 @@
             if (!isInlineComponent) {
                 container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
                 container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
-                container.setHostProp(renderHost, ELEMENT_PROPS, props);
             }
             if (vnode_isVNode(renderHost)) {
                 clearAllEffects(container, renderHost);
@@ -2437,75 +2555,83 @@
             return jsx;
         }, (err) => {
             if (isPromise(err) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
-                return err.then(() => executeComponentWithPromiseExceptionRetry(retryCount++));
+                return err.then(() => executeComponentWithPromiseExceptionRetry(++retryCount));
             }
             else {
+                if (retryCount >= MAX_RETRY_ON_PROMISE_COUNT) {
+                    throw new Error(`Max retry count of component execution reached`);
+                }
                 throw err;
             }
         });
         return executeComponentWithPromiseExceptionRetry();
     };
     /**
-     * Stores the JSX output of the last execution of the component.
-     *
-     * Component can execute multiple times because:
-     *
-     * - Component can have multiple tasks
-     * - Tasks can track signals
-     * - Task A can change signal which causes Task B to rerun.
+     * Adds `useOn` events to the JSX output.
      *
-     * So when executing a component we only care about its last JSX Output.
+     * @param jsx The JSX output to modify.
+     * @param useOnEvents The `useOn` events to add.
+     * @returns The modified JSX output.
      */
     function addUseOnEvents(jsx, useOnEvents) {
-        const jsxElement = findFirstStringJSX(jsx);
+        const jsxElement = findFirstElementNode(jsx);
         let jsxResult = jsx;
+        const qVisibleEvent = 'onQvisible$';
         return maybeThen(jsxElement, (jsxElement) => {
-            let isInvisibleComponent = false;
-            if (!jsxElement) {
-                /**
-                 * We did not find any jsx node with a string tag. This means that we should append:
-                 *
-                 * ```html
-                 * <script type="placeholder" hidden on-document:qinit="..."></script>
-                 * ```
-                 *
-                 * This is needed because use on events should have a node to attach them to.
-                 */
-                isInvisibleComponent = true;
-            }
+            // headless components are components that don't render a real DOM element
+            const isHeadless = !jsxElement;
+            // placeholder element is a <script> element that is used to add events to the document or window
+            let placeholderElement = null;
             for (const key in useOnEvents) {
                 if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) {
-                    if (isInvisibleComponent) {
-                        if (key === 'onQvisible$') {
-                            const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
-                            jsxResult = jsx;
-                            if (jsxElement) {
-                                addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
+                    let targetElement = jsxElement;
+                    let eventKey = key;
+                    if (isHeadless) {
+                        // if the component is headless, we need to add the event to the placeholder element
+                        if (key === qVisibleEvent ||
+                            key.startsWith("document:on" /* EventNameJSXScope.document */) ||
+                            key.startsWith("window:on" /* EventNameJSXScope.window */)) {
+                            if (!placeholderElement) {
+                                const [createdElement, newJsx] = injectPlaceholderElement(jsxResult);
+                                jsxResult = newJsx;
+                                placeholderElement = createdElement;
                             }
+                            targetElement = placeholderElement;
                         }
-                        else if (key.startsWith('document:') || key.startsWith('window:')) {
-                            const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
-                            jsxResult = jsx;
-                            if (jsxElement) {
-                                addUseOnEvent(jsxElement, key, useOnEvents[key]);
+                        else {
+                            if (build.isDev) {
+                                logWarn('You are trying to add an event "' +
+                                    key +
+                                    '" using `useOn` hook, ' +
+                                    'but a node to which you can add an event is not found. ' +
+                                    'Please make sure that the component has a valid element node. ');
                             }
+                            continue;
                         }
-                        else if (build.isDev) {
+                    }
+                    if (targetElement) {
+                        if (targetElement.type === 'script' && key === qVisibleEvent) {
+                            eventKey = 'document:onQInit$';
                             logWarn('You are trying to add an event "' +
                                 key +
-                                '" using `useOn` hook, ' +
+                                '" using `useVisibleTask$` hook, ' +
                                 'but a node to which you can add an event is not found. ' +
-                                'Please make sure that the component has a valid element node. ');
+                                'Using document:onQInit$ instead.');
                         }
-                    }
-                    else if (jsxElement) {
-                        addUseOnEvent(jsxElement, key, useOnEvents[key]);
+                        addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
                     }
                 }
             }
             return jsxResult;
         });
     }
+    /**
+     * Adds an event to the JSX element.
+     *
+     * @param jsxElement The JSX element to add the event to.
+     * @param key The event name.
+     * @param value The event value.
+     */
     function addUseOnEvent(jsxElement, key, value) {
         let props = jsxElement.props;
         if (props === EMPTY_OBJ) {
@@ -2521,7 +2647,13 @@
         propValue.push(...value);
         props[key] = propValue;
     }
-    function findFirstStringJSX(jsx) {
+    /**
+     * Finds the first element node in the JSX output.
+     *
+     * @param jsx The JSX output to search.
+     * @returns The first element node or null if no element node is found.
+     */
+    function findFirstElementNode(jsx) {
         const queue = [jsx];
         while (queue.length) {
             const jsx = queue.shift();
@@ -2531,44 +2663,69 @@
                 }
                 queue.push(jsx.children);
             }
-            else if (Array.isArray(jsx)) {
+            else if (isArray(jsx)) {
                 queue.push(...jsx);
             }
             else if (isPromise(jsx)) {
-                return maybeThen(jsx, (jsx) => findFirstStringJSX(jsx));
+                return maybeThen(jsx, (jsx) => findFirstElementNode(jsx));
             }
             else if (isSignal(jsx)) {
-                return findFirstStringJSX(untrack(() => jsx.value));
+                return findFirstElementNode(untrack(() => jsx.value));
             }
         }
         return null;
     }
-    function addScriptNodeForInvisibleComponents(jsx) {
+    /**
+     * Injects a placeholder <script> element into the JSX output.
+     *
+     * This is necessary for headless components (components that don't render a real DOM element) to
+     * have an anchor point for `useOn` event listeners that target the document or window.
+     *
+     * @param jsx The JSX output to modify.
+     * @returns A tuple containing the created placeholder element and the modified JSX output.
+     */
+    function injectPlaceholderElement(jsx) {
+        // For regular JSX nodes, we can append the placeholder to its children.
         if (isJSXNode(jsx)) {
-            const jsxElement = new JSXNodeImpl('script', {}, {
-                type: 'placeholder',
-                hidden: '',
-            }, null, 3);
+            const placeholder = createPlaceholderScriptNode();
+            // For slots, we can't add children, so we wrap them in a fragment.
             if (jsx.type === Slot) {
-                return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)];
+                return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
             }
             if (jsx.children == null) {
-                jsx.children = jsxElement;
+                jsx.children = placeholder;
             }
-            else if (Array.isArray(jsx.children)) {
-                jsx.children.push(jsxElement);
+            else if (isArray(jsx.children)) {
+                jsx.children.push(placeholder);
             }
             else {
-                jsx.children = [jsx.children, jsxElement];
+                jsx.children = [jsx.children, placeholder];
             }
-            return [jsxElement, jsx];
+            return [placeholder, jsx];
+        }
+        // For primitives, we can't add children, so we wrap them in a fragment.
+        if (isPrimitive(jsx)) {
+            const placeholder = createPlaceholderScriptNode();
+            return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
         }
-        else if (Array.isArray(jsx) && jsx.length) {
-            // get first element
-            const [jsxElement, _] = addScriptNodeForInvisibleComponents(jsx[0]);
-            return [jsxElement, jsx];
+        // For an array of nodes, we inject the placeholder into the first element.
+        if (isArray(jsx) && jsx.length > 0) {
+            const [createdElement, _] = injectPlaceholderElement(jsx[0]);
+            return [createdElement, jsx];
         }
-        return [null, null];
+        // For anything else we do nothing.
+        return [null, jsx];
+    }
+    /**
+     * Creates a <script> element with a placeholder type.
+     *
+     * @returns A <script> element with a placeholder type.
+     */
+    function createPlaceholderScriptNode() {
+        return new JSXNodeImpl('script', {}, {
+            type: 'placeholder',
+            hidden: '',
+        }, null, 3);
     }
 
     const applyInlineComponent = (ssr, componentHost, inlineComponentFunction, jsx) => {
@@ -2582,13 +2739,13 @@
         if (srcProps && srcProps.children) {
             delete srcProps.children;
         }
-        const scheduler = ssr.$scheduler$;
         host.setProp(OnRenderProp, componentQrl);
         host.setProp(ELEMENT_PROPS, srcProps);
         if (jsx.key !== null) {
             host.setProp(ELEMENT_KEY, jsx.key);
         }
-        return scheduler(6 /* ChoreType.COMPONENT */, host, componentQrl, srcProps);
+        const componentChore = ssr.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQrl, srcProps);
+        return getChorePromise(componentChore);
     };
 
     class ParentComponentData {
@@ -2696,7 +2853,14 @@
                             appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue);
                         }
                     }
-                    const innerHTML = ssr.openElement(type, varPropsToSsrAttrs(jsx.varProps, jsx.constProps, ssr.serializationCtx, options.styleScoped, jsx.key), constPropsToSsrAttrs(jsx.constProps, jsx.varProps, ssr.serializationCtx, options.styleScoped), qwikInspectorAttrValue);
+                    const innerHTML = ssr.openElement(type, varPropsToSsrAttrs(jsx.varProps, jsx.constProps, {
+                        serializationCtx: ssr.serializationCtx,
+                        styleScopedId: options.styleScoped,
+                        key: jsx.key,
+                    }), constPropsToSsrAttrs(jsx.constProps, jsx.varProps, {
+                        serializationCtx: ssr.serializationCtx,
+                        styleScopedId: options.styleScoped,
+                    }), qwikInspectorAttrValue);
                     if (innerHTML) {
                         ssr.htmlNode(innerHTML);
                     }
@@ -2812,16 +2976,17 @@
             }
         }
     }
-    function varPropsToSsrAttrs(varProps, constProps, serializationCtx, styleScopedId, key) {
-        return toSsrAttrs(varProps, constProps, serializationCtx, true, styleScopedId, key);
+    function varPropsToSsrAttrs(varProps, constProps, options) {
+        return toSsrAttrs(varProps, constProps, false, options);
     }
-    function constPropsToSsrAttrs(constProps, varProps, serializationCtx, styleScopedId) {
-        return toSsrAttrs(constProps, varProps, serializationCtx, false, styleScopedId);
+    function constPropsToSsrAttrs(constProps, varProps, options) {
+        return toSsrAttrs(constProps, varProps, true, options);
     }
-    function toSsrAttrs(record, anotherRecord, serializationCtx, pushMergedEventProps, styleScopedId, key) {
+    function toSsrAttrs(record, anotherRecord, isConst, options) {
         if (record == null) {
             return null;
         }
+        const pushMergedEventProps = !isConst;
         const ssrAttrs = [];
         for (const key in record) {
             let value = record[key];
@@ -2858,7 +3023,7 @@
                         }
                     }
                 }
-                const eventValue = setEvent(serializationCtx, key, value);
+                const eventValue = setEvent(options.serializationCtx, key, value);
                 if (eventValue) {
                     ssrAttrs.push(jsxEventToHtmlAttribute(key), eventValue);
                 }
@@ -2868,7 +3033,7 @@
                 // write signal as is. We will track this signal inside `writeAttrs`
                 if (isClassAttr(key)) {
                     // additionally append styleScopedId for class attr
-                    ssrAttrs.push(key, [value, styleScopedId]);
+                    ssrAttrs.push(key, [value, options.styleScopedId]);
                 }
                 else {
                     ssrAttrs.push(key, value);
@@ -2876,13 +3041,13 @@
                 continue;
             }
             if (isPreventDefault(key)) {
-                addPreventDefaultEventToSerializationContext(serializationCtx, key);
+                addPreventDefaultEventToSerializationContext(options.serializationCtx, key);
             }
-            value = serializeAttribute(key, value, styleScopedId);
+            value = serializeAttribute(key, value, options.styleScopedId);
             ssrAttrs.push(key, value);
         }
-        if (key != null) {
-            ssrAttrs.push(ELEMENT_KEY, key);
+        if (options.key != null) {
+            ssrAttrs.push(ELEMENT_KEY, options.key);
         }
         return ssrAttrs;
     }
@@ -2931,7 +3096,7 @@
              * For internal qrls (starting with `_`) we assume that they do the right thing.
              */
             if (!qrl.$symbol$.startsWith('_') && (qrl.$captureRef$ || qrl.$capture$)) {
-                qrl = createQRL(null, '_run', queueQRL, null, null, [qrl]);
+                qrl = createQRL(null, '_run', _run, null, null, [qrl]);
             }
             return qrlToString(serializationCtx, qrl);
         };
@@ -3011,10 +3176,9 @@
         // deleted and we need to be able to release the task subscriptions.
         set(task);
         const container = iCtx.$container$;
-        const promise = container.$scheduler$(3 /* ChoreType.TASK */, task);
-        if (isPromise(promise)) {
-            // TODO: should we handle this differently?
-            promise.catch(() => { });
+        const result = runTask(task, container, iCtx.$hostElement$);
+        if (isPromise(result)) {
+            throw result;
         }
     };
     const runTask = (task, container, host) => {
@@ -3026,7 +3190,7 @@
         const track = trackFn(task, container);
         const [cleanup] = cleanupFn(task, (reason) => container.handleError(reason, host));
         const taskApi = { track, cleanup };
-        const result = safeCall(() => taskFn(taskApi), cleanup, (err) => {
+        return safeCall(() => taskFn(taskApi), cleanup, (err) => {
             // If a Promise is thrown, that means we need to re-run the task.
             if (isPromise(err)) {
                 return err.then(() => runTask(task, container, host));
@@ -3035,7 +3199,6 @@
                 throw err;
             }
         });
-        return result;
     };
     const cleanupTask = (task) => {
         const destroy = task.$destroy$;
@@ -3066,6 +3229,7 @@
             this.$destroy$ = $destroy$;
         }
     }
+    /** @internal */
     const isTask = (value) => {
         return value instanceof Task;
     };
@@ -3076,7 +3240,7 @@
      */
     const scheduleTask = (_event, element) => {
         const [task] = useLexicalScope();
-        const type = task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */ ? 32 /* ChoreType.VISIBLE */ : 3 /* ChoreType.TASK */;
+        const type = task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */ ? 16 /* ChoreType.VISIBLE */ : 3 /* ChoreType.TASK */;
         const container = getDomContainer(element);
         container.$scheduler$(type, task);
     };
@@ -3328,7 +3492,7 @@
                 ? this.$constProps$[prop]
                 : this.$varProps$[prop];
             // a proxied value that the optimizer made
-            return value instanceof WrappedSignalImpl && value.$flags$ & 2 /* WrappedSignalFlags.UNWRAP */
+            return value instanceof WrappedSignalImpl && value.$flags$ & 4 /* WrappedSignalFlags.UNWRAP */
                 ? value.value
                 : value;
         }
@@ -3404,48 +3568,23 @@
     const directGetPropsProxyProp = (jsx, prop) => {
         return (jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop]);
     };
-
-    const mapApp_findIndx = (array, key, start) => {
-        assertTrue(start % 2 === 0, 'Expecting even number.');
-        let bottom = start >> 1;
-        let top = (array.length - 2) >> 1;
-        while (bottom <= top) {
-            const mid = bottom + ((top - bottom) >> 1);
-            const midKey = array[mid << 1];
-            if (midKey === key) {
-                return mid << 1;
-            }
-            if (midKey < key) {
-                bottom = mid + 1;
-            }
-            else {
-                top = mid - 1;
-            }
-        }
-        return (bottom << 1) ^ -1;
-    };
-    const mapArray_set = (array, key, value, start) => {
-        const indx = mapApp_findIndx(array, key, start);
-        if (indx >= 0) {
-            if (value == null) {
-                array.splice(indx, 2);
-            }
-            else {
-                array[indx + 1] = value;
-            }
-        }
-        else if (value != null) {
-            array.splice(indx ^ -1, 0, key, value);
+    /** @internal */
+    const _getVarProps = (props) => {
+        if (!props) {
+            return null;
         }
+        return _VAR_PROPS in props
+            ? 'children' in props
+                ? { ...props[_VAR_PROPS], children: props.children }
+                : props[_VAR_PROPS]
+            : props;
     };
-    const mapArray_get = (array, key, start) => {
-        const indx = mapApp_findIndx(array, key, start);
-        if (indx >= 0) {
-            return array[indx + 1];
-        }
-        else {
+    /** @internal */
+    const _getConstProps = (props) => {
+        if (!props) {
             return null;
         }
+        return _CONST_PROPS in props ? props[_CONST_PROPS] : null;
     };
 
     const isForeignObjectElement = (elementName) => {
@@ -3651,6 +3790,24 @@
             elementNamespaceFlag,
         };
     }
+    function getAttributeNamespace(attributeName) {
+        switch (attributeName) {
+            case 'xlink:href':
+            case 'xlink:actuate':
+            case 'xlink:arcrole':
+            case 'xlink:role':
+            case 'xlink:show':
+            case 'xlink:title':
+            case 'xlink:type':
+                return XLINK_NS;
+            case 'xml:base':
+            case 'xml:lang':
+            case 'xml:space':
+                return XML_NS;
+            default:
+                return null;
+        }
+    }
 
     function escapeHTML(html) {
         let escapedHTML = '';
@@ -3749,6 +3906,10 @@
             vNewNode = null;
             vCurrent = vnode_getFirstChild(vStartNode);
             stackPush(jsxNode, true);
+            if (vParent[0 /* VNodeProps.flags */] & 32 /* VNodeFlags.Deleted */) {
+                // Ignore diff if the parent is deleted.
+                return;
+            }
             while (stack.length) {
                 while (jsxIdx < jsxCount) {
                     assertFalse(vParent === vCurrent, "Parent and current can't be the same");
@@ -4177,8 +4338,10 @@
                         value = trackSignalAndAssignHost(value, vNewNode, key, container, signalData);
                     }
                     if (key === dangerouslySetInnerHTML) {
-                        element.innerHTML = value;
-                        element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
+                        if (value) {
+                            element.innerHTML = String(value);
+                            element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
+                        }
                         continue;
                     }
                     if (elementName === 'textarea' && key === 'value') {
@@ -4193,6 +4356,14 @@
                     }
                     value = serializeAttribute(key, value, scopedStyleIdPrefix);
                     if (value != null) {
+                        if (vNewNode[0 /* VNodeProps.flags */] & 64 /* VNodeFlags.NS_svg */) {
+                            // only svg elements can have namespace attributes
+                            const namespace = getAttributeNamespace(key);
+                            if (namespace) {
+                                element.setAttributeNS(namespace, key, String(value));
+                                continue;
+                            }
+                        }
                         element.setAttribute(key, String(value));
                     }
                 }
@@ -4271,8 +4442,13 @@
                         let returnValue = false;
                         qrls.flat(2).forEach((qrl) => {
                             if (qrl) {
-                                const value = container.$scheduler$(2 /* ChoreType.RUN_QRL */, vNode, qrl, [event, element]);
-                                returnValue = returnValue || value === true;
+                                if (isSyncQrl(qrl)) {
+                                    qrl(event, element);
+                                }
+                                else {
+                                    const value = container.$scheduler$(2 /* ChoreType.RUN_QRL */, vNode, qrl, [event, element]);
+                                    returnValue = returnValue || value === true;
+                                }
                             }
                         });
                         return returnValue;
@@ -4542,16 +4718,36 @@
                     shouldRender = true;
                 }
                 if (host) {
-                    const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
-                    shouldRender = shouldRender || propsDiffer(jsxProps, vNodeProps);
+                    let vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
+                    const propsAreDifferent = propsDiffer(jsxProps, vNodeProps);
+                    shouldRender = shouldRender || propsAreDifferent;
                     if (shouldRender) {
+                        if (propsAreDifferent) {
+                            if (vNodeProps) {
+                                // Reuse the same props instance, qrls can use the current props instance
+                                // as a capture ref, so we can't change it.
+                                // We need to do this directly, because normally we would subscribe to the signals
+                                // if any signal is there.
+                                vNodeProps[_CONST_PROPS] = jsxProps[_CONST_PROPS];
+                                vNodeProps[_VAR_PROPS] = jsxProps[_VAR_PROPS];
+                            }
+                            else if (jsxProps) {
+                                // If there is no props instance, create a new one.
+                                // We can do this because we are not using the props instance for anything else.
+                                vnode_setProp(host, ELEMENT_PROPS, jsxProps);
+                                vNodeProps = jsxProps;
+                            }
+                        }
+                        // Assign the new QRL instance to the host.
+                        // Unfortunately it is created every time, something to fix in the optimizer.
+                        vnode_setProp(host, OnRenderProp, componentQRL);
                         /**
                          * Mark host as not deleted. The host could have been marked as deleted if it there was a
                          * cleanup run. Now we found it and want to reuse it, so we need to mark it as not
                          * deleted.
                          */
                         host[0 /* VNodeProps.flags */] &= -33 /* VNodeFlags.Deleted */;
-                        container.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQRL, jsxProps);
+                        container.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQRL, vNodeProps);
                     }
                 }
                 descendContentToProject(jsxNode.children, host);
@@ -4754,7 +4950,7 @@
                                 const task = obj;
                                 clearAllEffects(container, task);
                                 if (task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                                    container.$scheduler$(48 /* ChoreType.CLEANUP_VISIBLE */, task);
+                                    container.$scheduler$(32 /* ChoreType.CLEANUP_VISIBLE */, task);
                                 }
                                 else {
                                     cleanupTask(task);
@@ -4805,7 +5001,16 @@
                      */
                     const vFirstChild = vnode_getFirstChild(vCursor);
                     if (vFirstChild) {
-                        vnode_walkVNode(vFirstChild);
+                        vnode_walkVNode(vFirstChild, (vNode) => {
+                            /**
+                             * Instead of an ID, we store a direct reference to the VNode. This is necessary to
+                             * locate the slot's parent in a detached subtree, as the ID would become invalid.
+                             */
+                            if (vNode[0 /* VNodeProps.flags */] & 2 /* VNodeFlags.Virtual */) {
+                                // The QSlotParent is used to find the slot parent during scheduling
+                                vnode_getProp(vNode, QSlotParent, (id) => vnode_locate(container.rootVNode, id));
+                            }
+                        });
                         return;
                     }
                 }
@@ -4882,8 +5087,8 @@
         const resource = createResourceReturn(container, opts);
         const el = iCtx.$hostElement$;
         const task = new Task(8 /* TaskFlags.DIRTY */ | 4 /* TaskFlags.RESOURCE */, i, el, qrl, resource, null);
-        container.$scheduler$(3 /* ChoreType.TASK */, task);
         set(resource);
+        runResource(task, container, el);
         return resource;
     };
     // <docs markdown="../readme.md#useResource">
@@ -4951,10 +5156,10 @@
     function getResourceValueAsPromise(props) {
         const resource = props.value;
         if (isResourceReturn(resource)) {
+            // create a subscription for the resource._state changes
+            const state = resource._state;
             const isBrowser = !isServerPlatform();
             if (isBrowser) {
-                // create a subscription for the resource._state changes
-                const state = resource._state;
                 if (state === 'pending' && props.onPending) {
                     return Promise.resolve().then(useBindInvokeContext(props.onPending));
                 }
@@ -4969,30 +5174,25 @@
                     }
                 }
             }
-            const value = resource.value;
-            if (value) {
-                return value.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
-            }
-            else {
-                // this is temporary value until the `runResource` is executed and promise is assigned to the value
-                return Promise.resolve(undefined);
-            }
+            return untrack(() => resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
         }
         else if (isPromise(resource)) {
             return resource.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
         }
         else if (isSignal(resource)) {
-            return Promise.resolve(resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+            const value = retryOnPromise(() => resource.value);
+            const promise = isPromise(value) ? value : Promise.resolve(value);
+            return promise.then(useBindInvokeContext(props.onResolved));
         }
         else {
-            return Promise.resolve(resource).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+            return Promise.resolve(resource).then(useBindInvokeContext(props.onResolved));
         }
     }
     const _createResourceReturn = (opts) => {
         const resource = {
             __brand: 'resource',
             value: undefined,
-            loading: isServerPlatform() ? false : true,
+            loading: !isServerPlatform(),
             _resolved: undefined,
             _error: undefined,
             _state: 'pending',
@@ -5043,19 +5243,22 @@
                 done = true;
                 if (resolved) {
                     done = true;
-                    resource.loading = false;
-                    resource._state = 'resolved';
-                    resource._resolved = value;
-                    resource._error = undefined;
+                    resourceTarget.loading = false;
+                    resourceTarget._state = 'resolved';
+                    resourceTarget._resolved = value;
+                    resourceTarget._error = undefined;
                     resolve(value);
                 }
                 else {
                     done = true;
-                    resource.loading = false;
-                    resource._state = 'rejected';
-                    resource._error = value;
+                    resourceTarget.loading = false;
+                    resourceTarget._state = 'rejected';
+                    resourceTarget._error = value;
                     reject(value);
                 }
+                if (!isServerPlatform()) {
+                    forceStoreEffects(resource, '_state');
+                }
                 return true;
             }
             return false;
@@ -5071,17 +5274,17 @@
             }
         });
         // Execute mutation inside empty invocation
+        // TODO: is it right? why we need to invoke inside context and trigger effects?
         invoke(iCtx, () => {
             // console.log('RESOURCE.pending: ');
             resource._state = 'pending';
             resource.loading = !isServerPlatform();
-            const promise = (resource.value = new Promise((r, re) => {
+            resource.value = new Promise((r, re) => {
                 resolve = r;
                 reject = re;
-            }));
-            promise.catch(ignoreErrorToPreventNodeFromCrashing);
+            });
         });
-        const promise = safeCall(() => Promise.resolve(taskFn(opts)), (value) => {
+        const promise = safeCall(() => taskFn(opts), (value) => {
             setState(true, value);
         }, (err) => {
             if (isPromise(err)) {
@@ -5104,10 +5307,6 @@
         }
         return promise;
     };
-    const ignoreErrorToPreventNodeFromCrashing = (err) => {
-        // ignore error to prevent node from crashing
-        // node will crash in promise is rejected and no one is listening to the rejection.
-    };
 
     /// These global variables are used to avoid creating new arrays for each call to `vnode_documentPosition`.
     const aVNodePath = [];
@@ -5190,11 +5389,11 @@
         let bDepth = -1;
         while (a) {
             const ssrNode = (aSsrNodePath[++aDepth] = a);
-            a = ssrNode.parentSsrNode;
+            a = ssrNode.parentComponent;
         }
         while (b) {
             const ssrNode = (bSsrNodePath[++bDepth] = b);
-            b = ssrNode.parentSsrNode;
+            b = ssrNode.parentComponent;
         }
         while (aDepth >= 0 && bDepth >= 0) {
             a = aSsrNodePath[aDepth];
@@ -5211,6 +5410,210 @@
         return aDepth < bDepth ? -1 : 1;
     };
 
+    /**
+     * Rules for determining if a chore is blocked by another chore. Some chores can block other chores.
+     * They cannot run until the blocking chore has completed.
+     *
+     * The match function is used to determine if the blocked chore is blocked by the blocking chore.
+     * The match function is called with the blocked chore, the blocking chore, and the container.
+     */
+    const VISIBLE_BLOCKING_RULES = [
+        // NODE_DIFF blocks VISIBLE on same host,
+        // if the blocked chore is a child of the blocking chore
+        // or the blocked chore is a sibling of the blocking chore
+        {
+            blockedType: 16 /* ChoreType.VISIBLE */,
+            blockingType: 4 /* ChoreType.NODE_DIFF */,
+            match: (blocked, blocking, container) => isDescendant(blocked, blocking, container) || isDescendant(blocking, blocked, container),
+        },
+        // COMPONENT blocks VISIBLE on same host
+        // if the blocked chore is a child of the blocking chore
+        // or the blocked chore is a sibling of the blocking chore
+        {
+            blockedType: 16 /* ChoreType.VISIBLE */,
+            blockingType: 6 /* ChoreType.COMPONENT */,
+            match: (blocked, blocking, container) => isDescendant(blocked, blocking, container) || isDescendant(blocking, blocked, container),
+        },
+    ];
+    const BLOCKING_RULES = [
+        // QRL_RESOLVE blocks RUN_QRL, TASK, VISIBLE on same host
+        {
+            blockedType: 2 /* ChoreType.RUN_QRL */,
+            blockingType: 1 /* ChoreType.QRL_RESOLVE */,
+            match: (blocked, blocking) => {
+                const blockedQrl = blocked.$target$;
+                const blockingQrl = blocking.$target$;
+                return isSameHost(blocked, blocking) && isSameQrl(blockedQrl, blockingQrl);
+            },
+        },
+        {
+            blockedType: 3 /* ChoreType.TASK */,
+            blockingType: 1 /* ChoreType.QRL_RESOLVE */,
+            match: (blocked, blocking) => {
+                const blockedTask = blocked.$payload$;
+                const blockingQrl = blocking.$target$;
+                return isSameHost(blocked, blocking) && isSameQrl(blockedTask.$qrl$, blockingQrl);
+            },
+        },
+        {
+            blockedType: 16 /* ChoreType.VISIBLE */,
+            blockingType: 1 /* ChoreType.QRL_RESOLVE */,
+            match: (blocked, blocking) => {
+                const blockedTask = blocked.$payload$;
+                const blockingQrl = blocking.$target$;
+                return isSameHost(blocked, blocking) && isSameQrl(blockedTask.$qrl$, blockingQrl);
+            },
+        },
+        // COMPONENT blocks NODE_DIFF, NODE_PROP on same host
+        {
+            blockedType: 4 /* ChoreType.NODE_DIFF */,
+            blockingType: 6 /* ChoreType.COMPONENT */,
+            match: (blocked, blocking) => blocked.$host$ === blocking.$host$,
+        },
+        {
+            blockedType: 5 /* ChoreType.NODE_PROP */,
+            blockingType: 6 /* ChoreType.COMPONENT */,
+            match: (blocked, blocking) => blocked.$host$ === blocking.$host$,
+        },
+        ...VISIBLE_BLOCKING_RULES,
+        // TASK blocks subsequent TASKs in the same component
+        {
+            blockedType: 3 /* ChoreType.TASK */,
+            blockingType: 3 /* ChoreType.TASK */,
+            match: (blocked, blocking, container) => {
+                if (blocked.$host$ !== blocking.$host$) {
+                    return false;
+                }
+                const blockedIdx = blocked.$idx$;
+                if (!isNumber$1(blockedIdx) || blockedIdx <= 0) {
+                    return false;
+                }
+                const previousTask = findPreviousTaskInComponent(blocked.$host$, blockedIdx, container);
+                return previousTask === blocking.$payload$;
+            },
+        },
+    ];
+    function isDescendant(descendantChore, ancestorChore, container) {
+        const descendantHost = descendantChore.$host$;
+        const ancestorHost = ancestorChore.$host$;
+        if (!vnode_isVNode(descendantHost) || !vnode_isVNode(ancestorHost)) {
+            return false;
+        }
+        return vnode_isDescendantOf(descendantHost, ancestorHost, container.rootVNode);
+    }
+    function isSameHost(a, b) {
+        return a.$host$ === b.$host$;
+    }
+    function isSameQrl(a, b) {
+        return a.$symbol$ === b.$symbol$;
+    }
+    function findBlockingChoreInQueue(chore, choreQueue, container) {
+        for (const candidate of choreQueue) {
+            // everything after VISIBLE is not blocking. Visible task, task and resource should not block anything in this rule.
+            if (candidate.$type$ >= 16 /* ChoreType.VISIBLE */ || candidate.$type$ === 3 /* ChoreType.TASK */) {
+                continue;
+            }
+            if (isDescendant(chore, candidate, container)) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    function findBlockingChore(chore, choreQueue, blockedChores, runningChores, container) {
+        const blockingChoreInChoreQueue = findBlockingChoreInQueue(chore, choreQueue, container);
+        if (blockingChoreInChoreQueue) {
+            return blockingChoreInChoreQueue;
+        }
+        const blockingChoreInBlockedChores = findBlockingChoreInQueue(chore, Array.from(blockedChores), container);
+        if (blockingChoreInBlockedChores) {
+            return blockingChoreInBlockedChores;
+        }
+        const blockingChoreInRunningChores = findBlockingChoreInQueue(chore, Array.from(runningChores), container);
+        if (blockingChoreInRunningChores) {
+            return blockingChoreInRunningChores;
+        }
+        for (const rule of BLOCKING_RULES) {
+            if (chore.$type$ !== rule.blockedType) {
+                continue;
+            }
+            // Check in choreQueue
+            // TODO(perf): better to iterate in reverse order?
+            for (const candidate of choreQueue) {
+                if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                    return candidate;
+                }
+            }
+            // Check in blockedChores
+            for (const candidate of blockedChores) {
+                if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                    return candidate;
+                }
+            }
+            // Check in runningChores
+            for (const candidate of runningChores) {
+                if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                    return candidate;
+                }
+            }
+        }
+        return null;
+    }
+    function findPreviousTaskInComponent(host, currentTaskIdx, container) {
+        const elementSeq = container.getHostProp(host, ELEMENT_SEQ);
+        if (!elementSeq || elementSeq.length <= currentTaskIdx) {
+            return null;
+        }
+        for (let i = currentTaskIdx - 1; i >= 0; i--) {
+            const candidate = elementSeq[i];
+            if (candidate instanceof Task && candidate.$flags$ & 2 /* TaskFlags.TASK */) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    function findBlockingChoreForVisible(chore, runningChores, container) {
+        for (const rule of VISIBLE_BLOCKING_RULES) {
+            if (chore.$type$ !== rule.blockedType) {
+                continue;
+            }
+            for (const candidate of runningChores) {
+                if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                    return candidate;
+                }
+            }
+        }
+        return null;
+    }
+
+    // This can't be in platform.ts because it uses MessageChannel which cannot post messages with functions
+    // TODO: move this to platform.ts somehow
+    const createNextTick = (fn) => {
+        let nextTick;
+        // according to the https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate#notes
+        if (typeof setImmediate === 'function') {
+            // setImmediate is the fastest way to schedule a task, but works only in node.js
+            nextTick = () => {
+                setImmediate(fn);
+            };
+        }
+        else if (typeof MessageChannel !== 'undefined') {
+            const channel = new MessageChannel();
+            channel.port1.onmessage = () => {
+                fn();
+            };
+            nextTick = () => {
+                channel.port2.postMessage(null);
+            };
+        }
+        else {
+            // setTimeout is a fallback, creates 4ms delay
+            nextTick = () => {
+                setTimeout(fn);
+            };
+        }
+        return nextTick;
+    };
+
     /**
      * Scheduler is responsible for running application code in predictable order.
      *
@@ -5294,29 +5697,43 @@
      */
     // Turn this on to get debug output of what the scheduler is doing.
     const DEBUG = false;
-    const getPromise = (chore) => (chore.$promise$ ||= new Promise((resolve) => {
-        chore.$resolve$ = resolve;
-    }));
-    const createScheduler = (container, scheduleDrain, journalFlush) => {
-        const choreQueue = [];
-        const qrlRuns = [];
-        let currentChore = null;
+    var ChoreState;
+    (function (ChoreState) {
+        ChoreState[ChoreState["NONE"] = 0] = "NONE";
+        ChoreState[ChoreState["RUNNING"] = 1] = "RUNNING";
+        ChoreState[ChoreState["FAILED"] = 2] = "FAILED";
+        ChoreState[ChoreState["DONE"] = 3] = "DONE";
+    })(ChoreState || (ChoreState = {}));
+    const getChorePromise = (chore) => chore.$state$ === ChoreState.NONE
+        ? (chore.$returnValue$ ||= new Promise((resolve, reject) => {
+            chore.$resolve$ = resolve;
+            chore.$reject$ = reject;
+        }))
+        : chore.$returnValue$;
+    const createScheduler = (container, journalFlush, choreQueue = [], blockedChores = new Set(), runningChores = new Set()) => {
+        let drainChore = null;
         let drainScheduled = false;
+        let isDraining = false;
+        let isJournalFlushRunning = false;
+        let flushBudgetStart = 0;
+        let currentTime = performance.now();
+        const nextTick = createNextTick(drainChoreQueue);
+        function drainInNextTick() {
+            if (!drainScheduled) {
+                drainScheduled = true;
+                nextTick();
+            }
+        }
+        // Drain for ~16.67ms, then apply journal flush for ~16.67ms, then repeat
+        // We divide by 60 because we want to run at 60fps
+        const FREQUENCY_MS = Math.floor(1000 / 60);
         return schedule;
         ///// IMPLEMENTATION /////
         function schedule(type, hostOrTask = null, targetOrQrl = null, payload = null) {
-            const isServer = !isDomContainer(container);
-            const isComponentSsr = isServer && type === 6 /* ChoreType.COMPONENT */;
-            const runLater = type !== 255 /* ChoreType.WAIT_FOR_ALL */ && !isComponentSsr && type !== 2 /* ChoreType.RUN_QRL */;
-            const isTask = type === 3 /* ChoreType.TASK */ || type === 32 /* ChoreType.VISIBLE */ || type === 48 /* ChoreType.CLEANUP_VISIBLE */;
-            const isClientOnly = type === 16 /* ChoreType.JOURNAL_FLUSH */ ||
-                type === 4 /* ChoreType.NODE_DIFF */ ||
-                type === 5 /* ChoreType.NODE_PROP */ ||
-                type === 1 /* ChoreType.QRL_RESOLVE */ ||
-                type === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */;
-            if (isServer && isClientOnly) {
-                return;
+            if (type === 255 /* ChoreType.WAIT_FOR_QUEUE */ && drainChore) {
+                return drainChore;
             }
+            const isTask = type === 3 /* ChoreType.TASK */ || type === 16 /* ChoreType.VISIBLE */ || type === 32 /* ChoreType.CLEANUP_VISIBLE */;
             if (isTask) {
                 hostOrTask.$flags$ |= 8 /* TaskFlags.DIRTY */;
             }
@@ -5330,167 +5747,310 @@
                 $host$: isTask ? hostOrTask.$el$ : hostOrTask,
                 $target$: targetOrQrl,
                 $payload$: isTask ? hostOrTask : payload,
-                $resolve$: null,
-                $promise$: null,
+                $state$: ChoreState.NONE,
+                $blockedChores$: null,
+                $startTime$: undefined,
+                $endTime$: undefined,
+                $resolve$: undefined,
+                $reject$: undefined,
                 $returnValue$: null,
-                $executed$: false,
             };
-            chore = sortedInsert(choreQueue, chore, container.rootVNode || null);
-            if (!drainScheduled && runLater) {
-                // If we are not currently draining, we need to schedule a drain.
-                drainScheduled = true;
-                schedule(16 /* ChoreType.JOURNAL_FLUSH */);
-                // Catch here to avoid unhandled promise rejection
-                scheduleDrain()?.catch?.(() => { });
+            if (type === 255 /* ChoreType.WAIT_FOR_QUEUE */) {
+                getChorePromise(chore);
+                drainChore = chore;
+                drainInNextTick();
+                return chore;
+            }
+            const isServer = isServerPlatform();
+            const isClientOnly = type === 4 /* ChoreType.NODE_DIFF */ || type === 1 /* ChoreType.QRL_RESOLVE */;
+            if (isServer && isClientOnly) {
+                // Mark skipped client-only chores as completed on the server
+                finishChore(chore, undefined);
+                return chore;
+            }
+            if (isServer && chore.$host$ && isSsrNode(chore.$host$)) {
+                const isUpdatable = !!(chore.$host$.flags & 1 /* SsrNodeFlags.Updatable */);
+                if (!isUpdatable) {
+                    if (
+                    // backpatching exceptions:
+                    // - node prop is allowed because it is used to update the node property
+                    // - recompute and schedule effects because it triggers effects (so node prop too)
+                    chore.$type$ !== 5 /* ChoreType.NODE_PROP */ &&
+                        chore.$type$ !== 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */) {
+                        // We are running on the server.
+                        // On server we can't schedule task for a different host!
+                        // Server is SSR, and therefore scheduling for anything but the current host
+                        // implies that things need to be re-run and that is not supported because of streaming.
+                        const warningMessage = `A '${choreTypeToName(chore.$type$)}' chore was scheduled on a host element that has already been streamed to the client.
+This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
+
+Problematic chore:
+  - Type: ${choreTypeToName(chore.$type$)}
+  - Host: ${chore.$host$.toString()}
+  - Nearest element location: ${chore.$host$.currentFile}
+
+This is often caused by modifying a signal in an already rendered component during SSR.`;
+                        logWarn(warningMessage);
+                        return chore;
+                    }
+                }
             }
-            // TODO figure out what to do with chore errors
-            if (runLater) {
-                return getPromise(chore);
+            const blockingChore = findBlockingChore(chore, choreQueue, blockedChores, runningChores, container);
+            if (blockingChore) {
+                addBlockedChore(chore, blockingChore, blockedChores);
+                return chore;
+            }
+            chore = sortedInsert(choreQueue, chore, container.rootVNode || null);
+            const runImmediately = (isServer && type === 6 /* ChoreType.COMPONENT */) || type === 2 /* ChoreType.RUN_QRL */;
+            if (runImmediately && !isDraining) {
+                immediateDrain();
             }
             else {
-                return drainUpTo(chore, isServer);
-            }
-        }
-        /** Execute all of the chores up to and including the given chore. */
-        function drainUpTo(runUptoChore, isServer) {
-            let maxRetries = 5000;
-            while (choreQueue.length) {
-                if (maxRetries-- < 0) {
-                    throw new Error('drainUpTo: max retries reached');
-                }
-                if (currentChore) {
-                    // Already running chore, which means we're waiting for async completion
-                    return getPromise(currentChore)
-                        .then(() => drainUpTo(runUptoChore, isServer))
-                        .catch((e) => {
-                        container.handleError(e, currentChore?.$host$);
-                    });
+                drainInNextTick();
+            }
+            return chore;
+        }
+        function immediateDrain() {
+            drainScheduled = true;
+            drainChoreQueue();
+        }
+        ////////////////////////////////////////////////////////////////////////////////
+        // Drain queue helpers
+        ////////////////////////////////////////////////////////////////////////////////
+        function applyJournalFlush() {
+            if (!isJournalFlushRunning) {
+                // prevent multiple journal flushes from running at the same time
+                isJournalFlushRunning = true;
+                journalFlush();
+                isJournalFlushRunning = false;
+                flushBudgetStart = performance.now();
+            }
+        }
+        function shouldApplyJournalFlush(isServer) {
+            return !isServer && currentTime - flushBudgetStart >= FREQUENCY_MS;
+        }
+        function drainChoreQueue() {
+            const isServer = isServerPlatform();
+            drainScheduled = false;
+            if (isDraining) {
+                return;
+            }
+            // early return if the queue is empty
+            if (!choreQueue.length) {
+                applyJournalFlush();
+                if (drainChore && !runningChores.size) {
+                    // resolve drainChore only if there are no running chores, because
+                    // we are sure that we are done
+                    drainChore.$resolve$(null);
+                    drainChore = null;
                 }
-                const nextChore = choreQueue[0];
-                if (nextChore.$executed$) {
-                    choreQueue.shift();
-                    if (nextChore === runUptoChore) {
-                        break;
+                return;
+            }
+            isDraining = true;
+            flushBudgetStart = performance.now();
+            const maybeFinishDrain = () => {
+                if (choreQueue.length) {
+                    drainInNextTick();
+                    return false;
+                }
+                if (drainChore && runningChores.size) {
+                    if (shouldApplyJournalFlush(isServer)) {
+                        // apply journal flush even if we are not finished draining the queue
+                        applyJournalFlush();
                     }
-                    continue;
+                    return false;
                 }
-                if (vNodeAlreadyDeleted(nextChore) &&
-                    // we need to process cleanup tasks for deleted nodes
-                    nextChore.$type$ !== 48 /* ChoreType.CLEANUP_VISIBLE */) {
-                    choreQueue.shift();
-                    continue;
+                currentChore = null;
+                applyJournalFlush();
+                drainChore?.$resolve$(null);
+                drainChore = null;
+                return true;
+            };
+            const scheduleBlockedChoresAndDrainIfNeeded = (chore) => {
+                let blockedChoresScheduled = false;
+                if (chore.$blockedChores$) {
+                    for (const blockedChore of chore.$blockedChores$) {
+                        const blockingChore = findBlockingChore(blockedChore, choreQueue, blockedChores, runningChores, container);
+                        if (blockingChore) {
+                            addBlockedChore(blockedChore, blockingChore, blockedChores);
+                        }
+                        else {
+                            blockedChores.delete(blockedChore);
+                            sortedInsert(choreQueue, blockedChore, container.rootVNode || null);
+                            blockedChoresScheduled = true;
+                        }
+                    }
+                    chore.$blockedChores$ = null;
                 }
-                executeChore(nextChore, isServer);
-            }
-            return runUptoChore.$returnValue$;
-        }
-        function executeChore(chore, isServer) {
-            const host = chore.$host$;
-            assertEqual(currentChore, null, 'Chore already running.');
-            currentChore = chore;
-            let returnValue = null;
+                if (blockedChoresScheduled && !isDraining) {
+                    drainInNextTick();
+                }
+            };
+            let currentChore = null;
             try {
-                switch (chore.$type$) {
-                    case 255 /* ChoreType.WAIT_FOR_ALL */:
-                        {
-                            if (isServer) {
-                                drainScheduled = false;
-                            }
-                        }
-                        break;
-                    case 16 /* ChoreType.JOURNAL_FLUSH */:
-                        {
-                            returnValue = journalFlush();
-                            drainScheduled = false;
+                while (choreQueue.length) {
+                    currentTime = performance.now();
+                    const chore = (currentChore = choreQueue.shift());
+                    if (chore.$state$ !== ChoreState.NONE) {
+                        continue;
+                    }
+                    if (vNodeAlreadyDeleted(chore) &&
+                        // we need to process cleanup tasks for deleted nodes
+                        chore.$type$ !== 32 /* ChoreType.CLEANUP_VISIBLE */) {
+                        // skip deleted chore
+                        DEBUG && debugTrace('skip chore', chore, choreQueue, blockedChores);
+                        continue;
+                    }
+                    if (chore.$type$ === 16 /* ChoreType.VISIBLE */) {
+                        // ensure that the journal flush is applied before the visible chore is executed
+                        // so that the visible chore can see the latest DOM changes
+                        applyJournalFlush();
+                        const blockingChore = findBlockingChoreForVisible(chore, runningChores, container);
+                        if (blockingChore && blockingChore.$state$ === ChoreState.RUNNING) {
+                            addBlockedChore(chore, blockingChore, blockedChores);
+                            continue;
                         }
-                        break;
-                    case 6 /* ChoreType.COMPONENT */:
-                        {
-                            returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
-                                if (isServer) {
-                                    return jsx;
+                    }
+                    // Note that this never throws
+                    chore.$startTime$ = performance.now();
+                    const result = executeChore(chore, isServer);
+                    chore.$returnValue$ = result;
+                    if (isPromise(result)) {
+                        runningChores.add(chore);
+                        chore.$state$ = ChoreState.RUNNING;
+                        result
+                            .then((value) => {
+                            finishChore(chore, value);
+                        })
+                            .catch((e) => {
+                            if (chore.$state$ !== ChoreState.RUNNING) {
+                                // we already handled the error
+                                return;
+                            }
+                            handleError(chore, e);
+                        })
+                            .finally(() => {
+                            runningChores.delete(chore);
+                            // Note that we ignore failed chores so the app keeps working
+                            // TODO decide if this is ok and document it
+                            scheduleBlockedChoresAndDrainIfNeeded(chore);
+                            // If drainChore is not null, we are waiting for it to finish.
+                            // If there are no running chores, we can finish the drain.
+                            if (!runningChores.size) {
+                                let finished = false;
+                                if (drainChore) {
+                                    finished = maybeFinishDrain();
                                 }
-                                else {
-                                    const styleScopedId = container.getHostProp(host, QScopedStyle);
-                                    return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
+                                if (!finished && !isDraining) {
+                                    // if finished, then journal flush is already applied
+                                    applyJournalFlush();
                                 }
-                            }, (err) => container.handleError(err, host));
-                        }
-                        break;
-                    case 2 /* ChoreType.RUN_QRL */:
-                        {
-                            const fn = chore.$target$.getFn();
-                            const result = retryOnPromise(() => fn(...chore.$payload$));
-                            if (isPromise(result)) {
-                                const handled = result
-                                    .finally(() => {
-                                    qrlRuns.splice(qrlRuns.indexOf(handled), 1);
-                                })
-                                    .catch((error) => {
-                                    container.handleError(error, chore.$host$);
-                                });
-                                // Don't wait for the promise to resolve
-                                // TODO come up with a better solution, we also want concurrent signal handling with tasks but serial tasks
-                                qrlRuns.push(handled);
-                                DEBUG &&
-                                    debugTrace('execute.DONE (but still running)', chore, currentChore, choreQueue);
-                                chore.$returnValue$ = handled;
-                                chore.$resolve$?.(handled);
-                                currentChore = null;
-                                chore.$executed$ = true;
-                                // early out so we don't call after()
-                                return;
                             }
-                            returnValue = null;
-                        }
-                        break;
-                    case 3 /* ChoreType.TASK */:
-                    case 32 /* ChoreType.VISIBLE */:
-                        {
-                            const payload = chore.$payload$;
-                            if (payload.$flags$ & 4 /* TaskFlags.RESOURCE */) {
-                                const result = runResource(payload, container, host);
-                                // Don't await the return value of the resource, because async resources should not be awaited.
-                                // The reason for this is that we should be able to update for example a node with loading
-                                // text. If we await the resource, the loading text will not be displayed until the resource
-                                // is loaded.
-                                // Awaiting on the client also causes a deadlock.
-                                // In any case, the resource will never throw.
-                                returnValue = isServer ? result : null;
+                        });
+                    }
+                    else {
+                        finishChore(chore, result);
+                        scheduleBlockedChoresAndDrainIfNeeded(chore);
+                    }
+                    if (shouldApplyJournalFlush(isServer)) {
+                        applyJournalFlush();
+                        drainInNextTick();
+                        return;
+                    }
+                }
+            }
+            catch (e) {
+                handleError(currentChore, e);
+                scheduleBlockedChoresAndDrainIfNeeded(currentChore);
+            }
+            finally {
+                isDraining = false;
+                maybeFinishDrain();
+            }
+        }
+        function finishChore(chore, value) {
+            chore.$endTime$ = performance.now();
+            chore.$state$ = ChoreState.DONE;
+            chore.$returnValue$ = value;
+            chore.$resolve$?.(value);
+        }
+        function handleError(chore, e) {
+            chore.$endTime$ = performance.now();
+            chore.$state$ = ChoreState.FAILED;
+            // If we used the result as promise, this won't exist
+            chore.$reject$?.(e);
+            container.handleError(e, chore.$host$);
+        }
+        function executeChore(chore, isServer) {
+            const host = chore.$host$;
+            let returnValue;
+            switch (chore.$type$) {
+                case 6 /* ChoreType.COMPONENT */:
+                    {
+                        returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
+                            if (isServer) {
+                                return jsx;
                             }
                             else {
-                                returnValue = runTask(payload, container, host);
+                                const styleScopedId = container.getHostProp(host, QScopedStyle);
+                                return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
                             }
+                        }, (err) => {
+                            handleError(chore, err);
+                        });
+                    }
+                    break;
+                case 2 /* ChoreType.RUN_QRL */:
+                    {
+                        const fn = chore.$target$.getFn();
+                        returnValue = retryOnPromise(() => fn(...chore.$payload$));
+                    }
+                    break;
+                case 3 /* ChoreType.TASK */:
+                case 16 /* ChoreType.VISIBLE */:
+                    {
+                        const payload = chore.$payload$;
+                        if (payload.$flags$ & 4 /* TaskFlags.RESOURCE */) {
+                            returnValue = runResource(payload, container, host);
                         }
-                        break;
-                    case 48 /* ChoreType.CLEANUP_VISIBLE */:
-                        {
-                            const task = chore.$payload$;
-                            cleanupTask(task);
+                        else {
+                            returnValue = runTask(payload, container, host);
                         }
-                        break;
-                    case 4 /* ChoreType.NODE_DIFF */:
-                        {
-                            const parentVirtualNode = chore.$target$;
-                            let jsx = chore.$payload$;
-                            if (isSignal(jsx)) {
-                                jsx = jsx.value;
-                            }
-                            returnValue = retryOnPromise(() => vnode_diff(container, jsx, parentVirtualNode, null));
+                    }
+                    break;
+                case 32 /* ChoreType.CLEANUP_VISIBLE */:
+                    {
+                        const task = chore.$payload$;
+                        cleanupTask(task);
+                    }
+                    break;
+                case 4 /* ChoreType.NODE_DIFF */:
+                    {
+                        const parentVirtualNode = chore.$target$;
+                        let jsx = chore.$payload$;
+                        if (isSignal(jsx)) {
+                            jsx = jsx.value;
                         }
-                        break;
-                    case 5 /* ChoreType.NODE_PROP */:
-                        {
-                            const virtualNode = chore.$host$;
-                            const payload = chore.$payload$;
-                            let value = payload.$value$;
-                            if (isSignal(value)) {
-                                value = value.value;
-                            }
-                            const isConst = payload.$isConst$;
-                            const journal = container.$journal$;
-                            const property = chore.$idx$;
-                            const serializedValue = serializeAttribute(property, value, payload.$scopedStyleIdPrefix$);
+                        returnValue = retryOnPromise(() => vnode_diff(container, jsx, parentVirtualNode, null));
+                    }
+                    break;
+                case 5 /* ChoreType.NODE_PROP */:
+                    {
+                        const virtualNode = chore.$host$;
+                        const payload = chore.$payload$;
+                        let value = payload.$value$;
+                        if (isSignal(value)) {
+                            value = value.value;
+                        }
+                        const isConst = payload.$isConst$;
+                        const journal = container.$journal$;
+                        const property = chore.$idx$;
+                        const serializedValue = serializeAttribute(property, value, payload.$scopedStyleIdPrefix$);
+                        if (isServer) {
+                            container.addBackpatchEntry(chore.$host$.id, property, serializedValue);
+                            returnValue = null;
+                        }
+                        else {
                             if (isConst) {
                                 const element = virtualNode[6 /* ElementVNodeProps.element */];
                                 journal.push(2 /* VNodeJournalOpCode.SetAttribute */, element, property, serializedValue);
@@ -5498,63 +6058,49 @@
                             else {
                                 vnode_setAttr(journal, virtualNode, property, serializedValue);
                             }
+                            returnValue = undefined;
                         }
-                        break;
-                    case 1 /* ChoreType.QRL_RESOLVE */: {
-                        {
-                            const target = chore.$target$;
-                            returnValue = !target.resolved ? target.resolve() : null;
-                        }
-                        break;
                     }
-                    case 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */: {
-                        {
-                            const target = chore.$target$;
-                            const effects = chore.$payload$;
-                            if (target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl) {
-                                const forceRunEffects = target.$forceRunEffects$;
-                                target.$forceRunEffects$ = false;
-                                if (!target.$effects$?.size) {
-                                    break;
+                    break;
+                case 1 /* ChoreType.QRL_RESOLVE */: {
+                    {
+                        const target = chore.$target$;
+                        returnValue = (!target.resolved ? target.resolve() : null);
+                    }
+                    break;
+                }
+                case 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */: {
+                    {
+                        const target = chore.$target$;
+                        const effects = chore.$payload$;
+                        if (!effects?.size) {
+                            break;
+                        }
+                        let shouldCompute = target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl;
+                        if (target instanceof AsyncComputedSignalImpl && effects !== target.$effects$) {
+                            shouldCompute = false;
+                        }
+                        if (shouldCompute) {
+                            const ctx = newInvokeContext();
+                            ctx.$container$ = container;
+                            // needed for computed signals and throwing QRLs
+                            returnValue = maybeThen(retryOnPromise(() => invoke.call(target, ctx, target.$computeIfNeeded$)), () => {
+                                if (target.$flags$ & 2 /* SignalFlags.RUN_EFFECTS */) {
+                                    target.$flags$ &= -3 /* SignalFlags.RUN_EFFECTS */;
+                                    return retryOnPromise(() => triggerEffects(container, target, effects));
                                 }
-                                returnValue = retryOnPromise(() => {
-                                    if (target.$computeIfNeeded$() || forceRunEffects) {
-                                        triggerEffects(container, target, effects);
-                                    }
-                                });
-                            }
-                            else {
-                                returnValue = retryOnPromise(() => {
-                                    triggerEffects(container, target, effects);
-                                });
-                            }
+                            });
+                        }
+                        else {
+                            returnValue = retryOnPromise(() => {
+                                triggerEffects(container, target, effects);
+                            });
                         }
-                        break;
                     }
+                    break;
                 }
             }
-            catch (e) {
-                returnValue = Promise.reject(e);
-            }
-            const after = (value, error) => {
-                currentChore = null;
-                chore.$executed$ = true;
-                if (error) {
-                    container.handleError(error, host);
-                }
-                else {
-                    chore.$returnValue$ = value;
-                    chore.$resolve$?.(value);
-                }
-            };
-            if (isPromise(returnValue)) {
-                chore.$promise$ = returnValue.then(after, (error) => after(undefined, error));
-                chore.$resolve$?.(chore.$promise$);
-                chore.$resolve$ = undefined;
-            }
-            else {
-                after(returnValue);
-            }
+            return returnValue;
         }
         /**
          * Compares two chores to determine their execution order in the scheduler's queue.
@@ -5583,15 +6129,6 @@
                 else {
                     assertFalse(vnode_isVNode(aHost), 'expected aHost to be SSRNode but it is a VNode');
                     assertFalse(vnode_isVNode(bHost), 'expected bHost to be SSRNode but it is a VNode');
-                    // we are running on the server.
-                    // On server we can't schedule task for a different host!
-                    // Server is SSR, and therefore scheduling for anything but the current host
-                    // implies that things need to be re-run nad that is not supported because of streaming.
-                    const errorMessage = `SERVER: during HTML streaming, re-running tasks on a different host is not allowed.
-          You are attempting to change a state that has already been streamed to the client.
-          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
-          Problematic Node: ${aHost.toString()}`;
-                    logWarn(errorMessage);
                     const hostDiff = ssrNodeDocumentPosition(aHost, bHost);
                     if (hostDiff !== 0) {
                         return hostDiff;
@@ -5608,12 +6145,21 @@
                 return idxDiff;
             }
             // If the host is the same (or missing), and the type is the same,  we need to compare the target.
-            if (a.$target$ !== b.$target$ || a.$payload$ !== b.$payload$) {
+            if (a.$target$ !== b.$target$) {
+                if (isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$) {
+                    return 0;
+                }
                 // 1 means that we are going to process chores as FIFO
                 return 1;
             }
-            // If the chore is the same as the current chore, we will run it again
-            if (b === currentChore) {
+            // ensure that the effect chores are scheduled for the same target
+            // TODO: can we do this better?
+            if (a.$type$ === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */ &&
+                b.$type$ === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */ &&
+                ((a.$target$ instanceof StoreHandler && b.$target$ instanceof StoreHandler) ||
+                    (a.$target$ instanceof AsyncComputedSignalImpl &&
+                        b.$target$ instanceof AsyncComputedSignalImpl)) &&
+                a.$payload$ !== b.$payload$) {
                 return 1;
             }
             // The chores are the same and will run only once
@@ -5645,6 +6191,15 @@
             /// We need to ensure that the `queue` is sorted by priority.
             /// 1. Find a place where to insert into.
             const idx = sortedFindIndex(sortedArray, value, rootVNode);
+            if (idx < 0 && runningChores.size) {
+                // 1.1. Check if the chore is already running.
+                for (const chore of runningChores) {
+                    const comp = choreComparator(value, chore, rootVNode);
+                    if (comp === 0) {
+                        return chore;
+                    }
+                }
+            }
             if (idx < 0) {
                 /// 2. Insert the chore into the queue.
                 sortedArray.splice(~idx, 0, value);
@@ -5656,12 +6211,9 @@
              * multiple times during component execution. For this reason it is necessary for us to update
              * the chore with the latest result of the signal.
              */
-            if (existing.$type$ === 4 /* ChoreType.NODE_DIFF */) {
+            if (existing.$payload$ !== value.$payload$) {
                 existing.$payload$ = value.$payload$;
             }
-            if (existing.$executed$) {
-                existing.$executed$ = false;
-            }
             return existing;
         }
     };
@@ -5673,6 +6225,25 @@
             vnode_isVNode(chore.$host$) &&
             chore.$host$[0 /* VNodeProps.flags */] & 32 /* VNodeFlags.Deleted */);
     }
+    function addBlockedChore(blockedChore, blockingChore, blockedChores) {
+        blockingChore.$blockedChores$ ||= [];
+        blockingChore.$blockedChores$.push(blockedChore);
+        blockedChores.add(blockedChore);
+    }
+    function choreTypeToName(type) {
+        return ({
+            [1 /* ChoreType.QRL_RESOLVE */]: 'Resolve QRL',
+            [2 /* ChoreType.RUN_QRL */]: 'Run QRL',
+            [3 /* ChoreType.TASK */]: 'Task',
+            [4 /* ChoreType.NODE_DIFF */]: 'Changes diffing',
+            [5 /* ChoreType.NODE_PROP */]: 'Updating node property',
+            [6 /* ChoreType.COMPONENT */]: 'Component',
+            [7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */]: 'Signal recompute',
+            [16 /* ChoreType.VISIBLE */]: 'Visible',
+            [32 /* ChoreType.CLEANUP_VISIBLE */]: 'Cleanup visible',
+            [255 /* ChoreType.WAIT_FOR_QUEUE */]: 'Wait for queue',
+        }[type] || 'Unknown: ' + type);
+    }
     function debugChoreTypeToString(type) {
         return ({
             [1 /* ChoreType.QRL_RESOLVE */]: 'QRL_RESOLVE',
@@ -5682,31 +6253,87 @@
             [5 /* ChoreType.NODE_PROP */]: 'NODE_PROP',
             [6 /* ChoreType.COMPONENT */]: 'COMPONENT',
             [7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */]: 'RECOMPUTE_SIGNAL',
-            [16 /* ChoreType.JOURNAL_FLUSH */]: 'JOURNAL_FLUSH',
-            [32 /* ChoreType.VISIBLE */]: 'VISIBLE',
-            [48 /* ChoreType.CLEANUP_VISIBLE */]: 'CLEANUP_VISIBLE',
-            [255 /* ChoreType.WAIT_FOR_ALL */]: 'WAIT_FOR_ALL',
+            [16 /* ChoreType.VISIBLE */]: 'VISIBLE',
+            [32 /* ChoreType.CLEANUP_VISIBLE */]: 'CLEANUP_VISIBLE',
+            [255 /* ChoreType.WAIT_FOR_QUEUE */]: 'WAIT_FOR_QUEUE',
         }[type] || 'UNKNOWN: ' + type);
     }
-    function debugChoreToString(chore) {
-        const type = debugChoreTypeToString(chore.$type$);
-        const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
-        const qrlTarget = chore.$target$?.$symbol$;
-        return `Chore(${type} ${chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */ ? qrlTarget : host} ${chore.$idx$})`;
-    }
-    function debugTrace(action, arg, currentChore, queue) {
-        const lines = ['===========================\nScheduler: ' + action];
-        if (arg && !('$type$' in arg)) {
-            lines.push('      arg: ' + String(arg).replaceAll(/\n.*/gim, ''));
-        }
-        if (queue) {
-            queue.forEach((chore) => {
-                const active = chore === arg ? '>>>' : '   ';
-                lines.push(`     ${active} > ` +
-                    (chore === currentChore ? '[running] ' : '') +
-                    debugChoreToString(chore));
+    function debugTrace(action, arg, queue, blockedChores) {
+        const lines = [];
+        // Header
+        lines.push(`Scheduler: ${action}`);
+        // Argument section
+        if (arg) {
+            lines.push('');
+            if (arg && '$type$' in arg) {
+                const chore = arg;
+                const type = debugChoreTypeToString(chore.$type$);
+                const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
+                const qrlTarget = chore.$target$?.$symbol$;
+                const targetOrHost = chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */
+                    ? qrlTarget
+                    : host;
+                lines.push(`🎯 Current Chore:`);
+                lines.push(`  Type: ${type}`);
+                lines.push(`  Host: ${targetOrHost}`);
+                // Show execution time if available
+                if (chore.$startTime$ && chore.$endTime$) {
+                    const executionTime = chore.$endTime$ - chore.$startTime$;
+                    lines.push(`  Time: ${executionTime.toFixed(2)}ms`);
+                }
+                else if (chore.$startTime$) {
+                    const elapsedTime = performance.now() - chore.$startTime$;
+                    lines.push(`  Time: ${elapsedTime.toFixed(2)}ms (running)`);
+                }
+                // Show blocked chores for this chore
+                if (chore.$blockedChores$ && chore.$blockedChores$.length > 0) {
+                    lines.push(`  ⛔ Blocked Chores:`);
+                    chore.$blockedChores$.forEach((blockedChore, index) => {
+                        const blockedType = debugChoreTypeToString(blockedChore.$type$);
+                        const blockedTarget = String(blockedChore.$host$).replaceAll(/\n.*/gim, '');
+                        lines.push(`    ${index + 1}. ${blockedType} ${blockedTarget} ${blockedChore.$idx$}`);
+                    });
+                }
+            }
+            else {
+                lines.push(`📝 Argument: ${String(arg).replaceAll(/\n.*/gim, '')}`);
+            }
+        }
+        // Queue section
+        if (queue && queue.length > 0) {
+            lines.push('');
+            lines.push(`📋 Queue (${queue.length} items):`);
+            queue.forEach((chore, index) => {
+                const isActive = chore === arg;
+                const activeMarker = isActive ? `▶ ` : '  ';
+                const type = debugChoreTypeToString(chore.$type$);
+                const state = chore.$state$ ? `[${ChoreState[chore.$state$]}]` : '';
+                const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
+                const qrlTarget = chore.$target$?.$symbol$;
+                const target = chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */
+                    ? qrlTarget
+                    : host;
+                const line = `${activeMarker}${state} ${type} ${target} ${chore.$idx$}`;
+                lines.push(line);
             });
         }
+        // Blocked chores section
+        if (blockedChores && blockedChores.size > 0) {
+            lines.push('');
+            lines.push(`🚫 Blocked Chores (${blockedChores.size} items):`);
+            Array.from(blockedChores).forEach((chore, index) => {
+                const type = debugChoreTypeToString(chore.$type$);
+                const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
+                const qrlTarget = chore.$target$?.$symbol$;
+                const target = chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */
+                    ? qrlTarget
+                    : host;
+                lines.push(`  ${index + 1}. ${type} ${target} ${chore.$idx$}`);
+            });
+        }
+        // Footer
+        lines.push('');
+        lines.push('─'.repeat(60));
         // eslint-disable-next-line no-console
         console.log(lines.join('\n') + '\n');
     }
@@ -5724,7 +6351,8 @@
         $currentUniqueId$ = 0;
         $instanceHash$ = null;
         $buildBase$ = null;
-        constructor(scheduleDrain, journalFlush, serverData, locale) {
+        $flushEpoch$ = 0;
+        constructor(journalFlush, serverData, locale) {
             this.$serverData$ = serverData;
             this.$locale$ = locale;
             this.$version$ = version;
@@ -5732,7 +6360,7 @@
             this.$getObjectById$ = (_id) => {
                 throw Error('Not implemented');
             };
-            this.$scheduler$ = createScheduler(this, scheduleDrain, journalFlush);
+            this.$scheduler$ = createScheduler(this, journalFlush);
         }
         trackSignalValue(signal, subscriber, property, data) {
             return trackSignalAndAssignHost(signal, subscriber, property, this, data);
@@ -5880,7 +6508,7 @@
                 const qContainer = getAttribute.call(node, Q_CONTAINER);
                 if (qContainer === null) {
                     if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
-                        return 6 /* NodeType.ELEMENT_SHADOW_ROOT */;
+                        return 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */;
                     }
                     const isQElement = hasAttribute.call(node, Q_PROPS_SEPARATOR);
                     return isQElement ? 2 /* NodeType.ELEMENT */ : 0 /* NodeType.OTHER */;
@@ -5898,10 +6526,10 @@
                     return 16 /* NodeType.COMMENT_IGNORE_START */;
                 }
                 else if (nodeValue.startsWith(Q_CONTAINER)) {
-                    return 5 /* NodeType.COMMENT_SKIP_START */;
+                    return 9 /* NodeType.COMMENT_SKIP_START */;
                 }
                 else if (nodeValue.startsWith(Q_CONTAINER_ISLAND_END)) {
-                    return 128 /* NodeType.COMMENT_ISLAND_END */;
+                    return 64 /* NodeType.COMMENT_ISLAND_END */;
                 }
                 else if (nodeValue.startsWith(Q_IGNORE_END)) {
                     return 32 /* NodeType.COMMENT_IGNORE_END */;
@@ -5948,11 +6576,6 @@
             while (node && (node = node.nextSibling) && getFastNodeType(node) === 0 /* NodeType.OTHER */) { }
             return node;
         };
-        const firstChild = (node) => {
-            // eslint-disable-next-line no-empty
-            while (node && (node = node.firstChild) && getFastNodeType(node) === 0 /* NodeType.OTHER */) { }
-            return node;
-        };
         /**
          * Process the container
          *
@@ -6013,7 +6636,7 @@
                     } while (getFastNodeType(islandNode) !== 65 /* NodeType.COMMENT_ISLAND_START */);
                     nextNode = null;
                 }
-                else if (nodeType === 128 /* NodeType.COMMENT_ISLAND_END */) {
+                else if (nodeType === 64 /* NodeType.COMMENT_ISLAND_END */) {
                     nextNode = node;
                     do {
                         nextNode = walker.nextNode();
@@ -6023,7 +6646,7 @@
                     } while (getFastNodeType(nextNode) !== 32 /* NodeType.COMMENT_IGNORE_END */);
                     nextNode = null;
                 }
-                else if (nodeType === 5 /* NodeType.COMMENT_SKIP_START */) {
+                else if (nodeType === 9 /* NodeType.COMMENT_SKIP_START */) {
                     // If we are in a container, we need to skip the children.
                     nextNode = node;
                     do {
@@ -6035,7 +6658,7 @@
                     // console.log('EXIT', nextNode?.outerHTML);
                     walkContainer(walker, node, node, nextNode, '', null);
                 }
-                else if (nodeType === 6 /* NodeType.ELEMENT_SHADOW_ROOT */) {
+                else if (nodeType === 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */) {
                     // If we are in a shadow root, we need to get the shadow root element.
                     nextNode = nextSibling(node);
                     const shadowRootContainer = node;
@@ -6043,7 +6666,7 @@
                     if (shadowRoot) {
                         walkContainer(
                         // we need to create a new walker for the shadow root
-                        document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, firstChild(shadowRoot), null, '', null);
+                        document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, shadowRoot, null, '', null);
                     }
                 }
                 if ((nodeType & 2 /* NodeType.ELEMENT */) === 2 /* NodeType.ELEMENT */) {
@@ -6100,6 +6723,7 @@
     }
 
     /** @file Public APIs for the SSR */
+    // @ts-expect-error we don't have types for the preloader
     /** @public */
     function getDomContainer(element) {
         const qContainerElement = _getQContainerElement(element);
@@ -6119,7 +6743,7 @@
     /** @internal */
     function _getQContainerElement(element) {
         const qContainerElement = Array.isArray(element)
-            ? vnode_getDomParent(element)
+            ? vnode_getDomParent(element, true)
             : element;
         return qContainerElement.closest(QContainerSelector);
     }
@@ -6134,19 +6758,20 @@
         rootVNode;
         document;
         $journal$;
-        renderDone = null;
         $rawStateData$;
         $storeProxyMap$ = new WeakMap();
         $qFuncs$;
         $instanceHash$;
         $forwardRefs$ = null;
-        $initialQRLsIndexes$ = null;
+        $initialQRLs$ = null;
         vNodeLocate = (id) => vnode_locate(this.rootVNode, id);
         $stateData$;
         $styleIds$ = null;
-        $renderCount$ = 0;
         constructor(element) {
-            super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute(QLocaleAttr));
+            super(() => {
+                this.$flushEpoch$++;
+                vnode_applyJournal(this.$journal$);
+            }, {}, element.getAttribute(QLocaleAttr));
             this.qContainer = element.getAttribute(QContainerAttr);
             if (!this.qContainer) {
                 throw qError(25 /* QError.elementWithoutContainer */);
@@ -6188,20 +6813,17 @@
         }
         handleError(err, host) {
             if (qDev && host) {
-                // Clean vdom
                 if (typeof document !== 'undefined') {
                     const vHost = host;
-                    const errorDiv = document.createElement('errored-host');
-                    if (err && err instanceof Error) {
-                        errorDiv.props = { error: err };
-                    }
-                    errorDiv.setAttribute('q:key', '_error_');
                     const journal = [];
-                    const vErrorDiv = vnode_newElement(errorDiv, 'errored-host');
-                    vnode_getDOMChildNodes(journal, vHost, true).forEach((child) => {
-                        vnode_insertBefore(journal, vErrorDiv, child, null);
-                    });
-                    vnode_insertBefore(journal, vHost, vErrorDiv, null);
+                    const vHostParent = vnode_getParent(vHost);
+                    const vHostNextSibling = vnode_getNextSibling(vHost);
+                    const vErrorDiv = vnode_createErrorDiv(document, vHost, err, journal);
+                    // If the host is an element node, we need to insert the error div into its parent.
+                    const insertHost = vnode_isElementVNode(vHost) ? vHostParent || vHost : vHost;
+                    // If the host is different then we need to insert errored-host in the same position as the host.
+                    const insertBefore = insertHost === vHost ? null : vHostNextSibling;
+                    vnode_insertBefore(journal, insertHost, vErrorDiv, insertBefore);
                     vnode_applyJournal(journal);
                 }
                 if (err && err instanceof Error) {
@@ -6221,19 +6843,16 @@
         }
         setContext(host, context, value) {
             let ctx = this.getHostProp(host, QCtxAttr);
-            if (!ctx) {
+            if (ctx == null) {
                 this.setHostProp(host, QCtxAttr, (ctx = []));
             }
-            mapArray_set(ctx, context.id, value, 0);
+            mapArray_set(ctx, context.id, value, 0, true);
         }
         resolveContext(host, contextId) {
             while (host) {
                 const ctx = this.getHostProp(host, QCtxAttr);
-                if (ctx) {
-                    const value = mapArray_get(ctx, contextId.id, 0);
-                    if (value) {
-                        return value;
-                    }
+                if (ctx != null && mapArray_has(ctx, contextId.id, 0)) {
+                    return mapArray_get(ctx, contextId.id, 0);
                 }
                 host = this.getParentHost(host);
             }
@@ -6279,29 +6898,6 @@
             }
             return vnode_getProp(vNode, name, getObjectById);
         }
-        scheduleRender() {
-            this.$renderCount$++;
-            this.renderDone ||= getPlatform().nextTick(() => this.processChores());
-            return this.renderDone.finally(() => emitEvent('qrender', { instanceHash: this.$instanceHash$, renderCount: this.$renderCount$ }));
-        }
-        processChores() {
-            let renderCount = this.$renderCount$;
-            const result = this.$scheduler$(255 /* ChoreType.WAIT_FOR_ALL */);
-            if (isPromise(result)) {
-                return result.then(async () => {
-                    while (renderCount !== this.$renderCount$) {
-                        renderCount = this.$renderCount$;
-                        await this.$scheduler$(255 /* ChoreType.WAIT_FOR_ALL */);
-                    }
-                    this.renderDone = null;
-                });
-            }
-            if (renderCount !== this.$renderCount$) {
-                this.processChores();
-                return;
-            }
-            this.renderDone = null;
-        }
         ensureProjectionResolved(vNode) {
             if ((vNode[0 /* VNodeProps.flags */] & 16 /* VNodeFlags.Resolved */) === 0) {
                 vNode[0 /* VNodeProps.flags */] |= 16 /* VNodeFlags.Resolved */;
@@ -6311,7 +6907,9 @@
                     if (isSlotProp(prop)) {
                         const value = props[i + 1];
                         if (typeof value == 'string') {
-                            props[i + 1] = this.vNodeLocate(value);
+                            const projection = this.vNodeLocate(value);
+                            props[i + 1] = projection;
+                            vnode_getProp(projection, QSlotParent, (id) => this.vNodeLocate(id));
                         }
                     }
                 }
@@ -6380,11 +6978,14 @@
          * ```
          */
         $scheduleInitialQRLs$() {
-            if (this.$initialQRLsIndexes$) {
-                for (const index of this.$initialQRLsIndexes$) {
-                    this.$scheduler$(1 /* ChoreType.QRL_RESOLVE */, null, this.$getObjectById$(index));
+            if (this.$initialQRLs$) {
+                for (const qrl of this.$initialQRLs$) {
+                    const match = /#(.*)_([a-zA-Z0-9]+)(\[|$)/.exec(qrl);
+                    if (match) {
+                        preloader.p(match[2], 0.3);
+                    }
                 }
-                this.$initialQRLsIndexes$ = null;
+                this.$initialQRLs$ = null;
             }
         }
     }
@@ -6432,7 +7033,7 @@
         }
     };
     const triggerEffects = (container, signal, effects) => {
-        const isBrowser = isDomContainer(container);
+        const isBrowser = !isServerPlatform();
         if (effects) {
             const scheduleEffect = (effectSubscription) => {
                 const consumer = effectSubscription[0 /* EffectSubscriptionProp.CONSUMER */];
@@ -6442,7 +7043,7 @@
                     consumer.$flags$ |= 8 /* TaskFlags.DIRTY */;
                     let choreType = 3 /* ChoreType.TASK */;
                     if (consumer.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                        choreType = 32 /* ChoreType.VISIBLE */;
+                        choreType = 16 /* ChoreType.VISIBLE */;
                     }
                     container.$scheduler$(choreType, consumer);
                 }
@@ -6456,7 +7057,7 @@
                             container.$scheduler$(1 /* ChoreType.QRL_RESOLVE */, null, consumer.$computeQrl$);
                         }
                     }
-                    consumer.$invalidate$();
+                    consumer.invalidate();
                 }
                 else if (property === ":" /* EffectProperty.COMPONENT */) {
                     const host = consumer;
@@ -6465,22 +7066,22 @@
                     const props = container.getHostProp(host, ELEMENT_PROPS);
                     container.$scheduler$(6 /* ChoreType.COMPONENT */, host, qrl, props);
                 }
-                else if (isBrowser) {
-                    if (property === "." /* EffectProperty.VNODE */) {
+                else if (property === "." /* EffectProperty.VNODE */) {
+                    if (isBrowser) {
                         const host = consumer;
                         container.$scheduler$(4 /* ChoreType.NODE_DIFF */, host, host, signal);
                     }
-                    else {
-                        const host = consumer;
-                        const effectData = effectSubscription[3 /* EffectSubscriptionProp.DATA */];
-                        if (effectData instanceof SubscriptionData) {
-                            const data = effectData.data;
-                            const payload = {
-                                ...data,
-                                $value$: signal,
-                            };
-                            container.$scheduler$(5 /* ChoreType.NODE_PROP */, host, property, payload);
-                        }
+                }
+                else {
+                    const host = consumer;
+                    const effectData = effectSubscription[3 /* EffectSubscriptionProp.DATA */];
+                    if (effectData instanceof SubscriptionData) {
+                        const data = effectData.data;
+                        const payload = {
+                            ...data,
+                            $value$: signal,
+                        };
+                        container.$scheduler$(5 /* ChoreType.NODE_PROP */, host, property, payload);
                     }
                 }
             };
@@ -6491,7 +7092,23 @@
     };
     /** @internal */
     const isSerializerObj = (obj) => {
-        return (typeof obj === 'object' && obj !== null && typeof obj[SerializerSymbol] === 'function');
+        return isObject(obj) && typeof obj[SerializerSymbol] === 'function';
+    };
+    const getComputedSignalFlags = (serializationStrategy) => {
+        let flags = 1 /* SignalFlags.INVALID */;
+        switch (serializationStrategy) {
+            // TODO: implement this in the future
+            // case 'auto':
+            //   flags |= ComputedSignalFlags.SERIALIZATION_STRATEGY_AUTO;
+            //   break;
+            case 'never':
+                flags |= 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
+                break;
+            case 'always':
+                flags |= 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
+                break;
+        }
+        return flags;
     };
 
     const stringifyPath = [];
@@ -6786,6 +7403,7 @@
         const flag = vNode[0 /* VNodeProps.flags */];
         return (flag & 5 /* VNodeFlags.ELEMENT_OR_TEXT_MASK */) !== 0;
     };
+    /** @internal */
     const vnode_isMaterialized = (vNode) => {
         assertDefined(vNode, 'Missing vNode');
         const flag = vNode[0 /* VNodeProps.flags */];
@@ -6793,11 +7411,13 @@
             vNode[4 /* ElementVNodeProps.firstChild */] !== undefined &&
             vNode[5 /* ElementVNodeProps.lastChild */] !== undefined);
     };
+    /** @internal */
     const vnode_isTextVNode = (vNode) => {
         assertDefined(vNode, 'Missing vNode');
         const flag = vNode[0 /* VNodeProps.flags */];
         return (flag & 4 /* VNodeFlags.Text */) === 4 /* VNodeFlags.Text */;
     };
+    /** @internal */
     const vnode_isVirtualVNode = (vNode) => {
         assertDefined(vNode, 'Missing vNode');
         const flag = vNode[0 /* VNodeProps.flags */];
@@ -6835,6 +7455,7 @@
         }
         return '<unknown>';
     };
+    /** @internal */
     const vnode_ensureElementInflated = (vnode) => {
         const flags = vnode[0 /* VNodeProps.flags */];
         if ((flags & 15 /* VNodeFlags.INFLATED_TYPE_MASK */) === 1 /* VNodeFlags.Element */) {
@@ -6876,6 +7497,9 @@
         }
         let vParent = null;
         do {
+            if (callback?.(vCursor, vParent)) {
+                return;
+            }
             const vFirstChild = vnode_getFirstChild(vCursor);
             if (vFirstChild) {
                 vCursor = vFirstChild;
@@ -7044,6 +7668,7 @@
         const flags = textVNode[0 /* VNodeProps.flags */];
         if ((flags & 8 /* VNodeFlags.Inflated */) === 0) {
             const parentNode = vnode_getDomParent(vnode);
+            assertDefined(parentNode, 'Missing parent node.');
             const sharedTextNode = textVNode[4 /* TextVNodeProps.node */];
             const doc = parentNode.ownerDocument;
             // Walk the previous siblings and inflate them.
@@ -7202,6 +7827,18 @@
         }
         return length;
     };
+    const vnode_createErrorDiv = (document, host, err, journal) => {
+        const errorDiv = document.createElement('errored-host');
+        if (err && err instanceof Error) {
+            errorDiv.props = { error: err };
+        }
+        errorDiv.setAttribute('q:key', '_error_');
+        const vErrorDiv = vnode_newElement(errorDiv, 'errored-host');
+        vnode_getDOMChildNodes(journal, host, true).forEach((child) => {
+            vnode_insertBefore(journal, vErrorDiv, child, null);
+        });
+        return vErrorDiv;
+    };
     const parseBoolean = (value) => {
         if (value === 'false') {
             return false;
@@ -7340,7 +7977,7 @@
          * unlink the previous or next sibling, we don't know that after "a" node is "b". So we need to
          * find children first (and inflate them).
          */
-        const domParentVNode = vnode_getDomParentVNode(parent);
+        const domParentVNode = vnode_getDomParentVNode(parent, false);
         const parentNode = domParentVNode && domParentVNode[6 /* ElementVNodeProps.element */];
         let domChildren = null;
         if (domParentVNode) {
@@ -7389,27 +8026,31 @@
                 newChildCurrentParent !== parent)) {
             vnode_remove(journal, newChildCurrentParent, newChild, false);
         }
-        let adjustedInsertBefore = null;
-        if (insertBefore == null) {
-            if (vnode_isVirtualVNode(parent)) {
-                // If `insertBefore` is null, than we need to insert at the end of the list.
-                // Well, not quite. If the parent is a virtual node, our "last node" is not the same
-                // as the DOM "last node". So in that case we need to look for the "next node" from
-                // our parent.
-                adjustedInsertBefore = vnode_getDomSibling(parent, true, false);
+        const parentIsDeleted = parent[0 /* VNodeProps.flags */] & 32 /* VNodeFlags.Deleted */;
+        // if the parent is deleted, then we don't need to insert the new child
+        if (!parentIsDeleted) {
+            let adjustedInsertBefore = null;
+            if (insertBefore == null) {
+                if (vnode_isVirtualVNode(parent)) {
+                    // If `insertBefore` is null, than we need to insert at the end of the list.
+                    // Well, not quite. If the parent is a virtual node, our "last node" is not the same
+                    // as the DOM "last node". So in that case we need to look for the "next node" from
+                    // our parent.
+                    adjustedInsertBefore = vnode_getDomSibling(parent, true, false);
+                }
+            }
+            else if (vnode_isVirtualVNode(insertBefore)) {
+                // If the `insertBefore` is virtual, than we need to descend into the virtual and find e actual
+                adjustedInsertBefore = vnode_getDomSibling(insertBefore, true, true);
+            }
+            else {
+                adjustedInsertBefore = insertBefore;
+            }
+            adjustedInsertBefore && vnode_ensureInflatedIfText(journal, adjustedInsertBefore);
+            // Here we know the insertBefore node
+            if (domChildren && domChildren.length) {
+                journal.push(5 /* VNodeJournalOpCode.Insert */, parentNode, vnode_getNode(adjustedInsertBefore), ...domChildren);
             }
-        }
-        else if (vnode_isVirtualVNode(insertBefore)) {
-            // If the `insertBefore` is virtual, than we need to descend into the virtual and find e actual
-            adjustedInsertBefore = vnode_getDomSibling(insertBefore, true, true);
-        }
-        else {
-            adjustedInsertBefore = insertBefore;
-        }
-        adjustedInsertBefore && vnode_ensureInflatedIfText(journal, adjustedInsertBefore);
-        // Here we know the insertBefore node
-        if (domChildren && domChildren.length) {
-            journal.push(5 /* VNodeJournalOpCode.Insert */, parentNode, vnode_getNode(adjustedInsertBefore), ...domChildren);
         }
         // link newChild into the previous/next list
         const vNext = insertBefore;
@@ -7431,14 +8072,22 @@
         newChild[2 /* VNodeProps.previousSibling */] = vPrevious;
         newChild[3 /* VNodeProps.nextSibling */] = vNext;
         newChild[1 /* VNodeProps.parent */] = parent;
+        if (parentIsDeleted) {
+            // if the parent is deleted, then the new child is also deleted
+            newChild[0 /* VNodeProps.flags */] |= 32 /* VNodeFlags.Deleted */;
+        }
     };
-    const vnode_getDomParent = (vnode) => {
-        vnode = vnode_getDomParentVNode(vnode);
+    const vnode_getDomParent = (vnode, includeProjection = true) => {
+        vnode = vnode_getDomParentVNode(vnode, includeProjection);
         return (vnode && vnode[6 /* ElementVNodeProps.element */]);
     };
-    const vnode_getDomParentVNode = (vnode) => {
+    const vnode_getDomParentVNode = (vnode, includeProjection = true) => {
         while (vnode && !vnode_isElementVNode(vnode)) {
-            vnode = vnode[1 /* VNodeProps.parent */];
+            vnode =
+                vnode[1 /* VNodeProps.parent */] ||
+                    (includeProjection
+                        ? vnode_getProp(vnode, QSlotParent, (id) => (vnode_isVNode(id) ? id : null))
+                        : null);
         }
         return vnode;
     };
@@ -7448,7 +8097,7 @@
             vnode_ensureTextInflated(journal, vToRemove);
         }
         if (removeDOM) {
-            const domParent = vnode_getDomParent(vParent);
+            const domParent = vnode_getDomParent(vParent, false);
             const isInnerHTMLParent = vnode_getAttr(vParent, dangerouslySetInnerHTML);
             if (isInnerHTMLParent) {
                 // ignore children, as they are inserted via innerHTML
@@ -7513,6 +8162,7 @@
         const textNode = textVNode[4 /* TextVNodeProps.node */];
         journal.push(1 /* VNodeJournalOpCode.SetText */, textNode, (textVNode[5 /* TextVNodeProps.text */] = text));
     };
+    /** @internal */
     const vnode_getFirstChild = (vnode) => {
         if (vnode_isTextVNode(vnode)) {
             return null;
@@ -7773,27 +8423,46 @@
         return vFirstChild;
     };
     function setEffectBackRefFromVNodeData(vParent, value, container) {
-        const deserializedSubMap = container.$getObjectById$(value);
         if (!vParent[_EFFECT_BACK_REF]) {
+            // get data lazily
+            // this is because effects back refs can point to vnodes which are not yet materialized
+            // (are after the current vnode)
             Object.defineProperty(vParent, _EFFECT_BACK_REF, {
-                value: deserializedSubMap,
+                get() {
+                    const subMap = container.$getObjectById$(value);
+                    vParent[_EFFECT_BACK_REF] = subMap;
+                    return subMap;
+                },
+                set(value) {
+                    Object.defineProperty(vParent, _EFFECT_BACK_REF, {
+                        value,
+                        writable: true,
+                        enumerable: true,
+                        configurable: true,
+                    });
+                },
+                enumerable: true,
+                configurable: true,
             });
         }
         else {
             const subMap = vParent[_EFFECT_BACK_REF];
-            mergeMaps(subMap, deserializedSubMap);
+            mergeMaps(subMap, container.$getObjectById$(value));
         }
     }
     const processVNodeData = (vData, callback) => {
         let nextToConsumeIdx = 0;
         let ch = 0;
         let peekCh = 0;
+        const getChar = (idx) => {
+            return idx < vData.length ? vData.charCodeAt(idx) : 0;
+        };
         const peek = () => {
             if (peekCh !== 0) {
                 return peekCh;
             }
             else {
-                return (peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0);
+                return (peekCh = getChar(nextToConsumeIdx));
             }
         };
         const consume = () => {
@@ -7814,15 +8483,17 @@
             return vData.substring(start, nextToConsumeIdx);
         };
         while (peek() !== 0) {
-            callback(peek, consumeValue, consume, nextToConsumeIdx);
+            callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
         }
     };
+    /** @internal */
     const vnode_getNextSibling = (vnode) => {
         return vnode[3 /* VNodeProps.nextSibling */];
     };
     const vnode_getPreviousSibling = (vnode) => {
         return vnode[2 /* VNodeProps.previousSibling */];
     };
+    /** @internal */
     const vnode_getAttrKeys = (vnode) => {
         const type = vnode[0 /* VNodeProps.flags */];
         if ((type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0) {
@@ -7868,6 +8539,7 @@
             }
         }
     };
+    /** @internal */
     const vnode_getAttr = (vnode, key) => {
         const type = vnode[0 /* VNodeProps.flags */];
         if ((type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0) {
@@ -7904,6 +8576,7 @@
             props.splice(idx ^ -1, 0, key, value);
         }
     };
+    /** @internal */
     const vnode_getPropStartIndex = (vnode) => {
         const type = vnode[0 /* VNodeProps.flags */] & 7 /* VNodeFlags.TYPE_MASK */;
         if (type === 1 /* VNodeFlags.Element */) {
@@ -7914,12 +8587,33 @@
         }
         throw qError(26 /* QError.invalidVNodeType */, [type]);
     };
+    /** @internal */
     const vnode_getProps = (vnode) => {
         return vnode[vnode_getPropStartIndex(vnode)];
     };
     const vnode_getParent = (vnode) => {
         return vnode[1 /* VNodeProps.parent */] || null;
     };
+    const vnode_isDescendantOf = (vnode, ancestor, rootVNode) => {
+        let parent = vnode_getParentOrProjectionParent(vnode, rootVNode);
+        while (parent) {
+            if (parent === ancestor) {
+                return true;
+            }
+            parent = vnode_getParentOrProjectionParent(parent, rootVNode);
+        }
+        return false;
+    };
+    const vnode_getParentOrProjectionParent = (vnode, rootVNode) => {
+        if (rootVNode) {
+            const parentProjection = vnode_getProp(vnode, QSlotParent, (id) => vnode_locate(rootVNode, id));
+            if (parentProjection) {
+                // This is a projection, so we need to check the parent of the projection
+                return parentProjection;
+            }
+        }
+        return vnode_getParent(vnode);
+    };
     const vnode_getNode = (vnode) => {
         if (vnode === null || vnode_isVirtualVNode(vnode)) {
             return null;
@@ -8028,21 +8722,19 @@
         let textIdx = 0;
         let combinedText = null;
         let container = null;
-        processVNodeData(vData, (peek, consumeValue, consume, nextToConsumeIdx) => {
+        processVNodeData(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
             if (isNumber(peek())) {
                 // Element counts get encoded as numbers.
-                while (!isElement(child)) {
+                while (!isElement(child) ||
+                    // We pretend that style element's don't exist as they can get moved out.
+                    // skip over style elements, as those need to be moved to the head
+                    // and are not included in the counts.
+                    isQStyleElement(child)) {
                     child = fastNextSibling(child);
                     if (!child) {
                         throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), nextToConsumeIdx]);
                     }
                 }
-                // We pretend that style element's don't exist as they can get moved out.
-                while (isQStyleElement(child)) {
-                    // skip over style elements, as those need to be moved to the head
-                    // and are not included in the counts.
-                    child = fastNextSibling(child);
-                }
                 combinedText = null;
                 previousTextNode = null;
                 let value = 0;
@@ -8074,7 +8766,17 @@
                 vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
             }
             else if (peek() === VNodeDataChar.KEY) {
-                vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
+                const isEscapedValue = getChar(nextToConsumeIdx + 1) === VNodeDataChar.SEPARATOR;
+                let value;
+                if (isEscapedValue) {
+                    consume();
+                    value = decodeURI(consumeValue());
+                    consume();
+                }
+                else {
+                    value = consumeValue();
+                }
+                vnode_setAttr(null, vParent, ELEMENT_KEY, value);
             }
             else if (peek() === VNodeDataChar.SEQ) {
                 vnode_setAttr(null, vParent, ELEMENT_SEQ, consumeValue());
@@ -8120,6 +8822,10 @@
                 vnode_setAttr(null, vParent, QSlot, consumeValue());
             }
             else {
+                // skip over style elements in front of text nodes, where text node is the first child (except the style node)
+                while (isQStyleElement(child)) {
+                    child = fastNextSibling(child);
+                }
                 const textNode = child && fastNodeType(child) === /* Node.TEXT_NODE */ 3 ? child : null;
                 // must be alphanumeric
                 if (combinedText === null) {
@@ -8214,9 +8920,11 @@
     };
 
     /** There's [documentation](./serialization.md) */
+    /** Arrays/Objects are special-cased so their identifiers is a single digit. */
+    const needsInflation = (typeId) => typeId >= 14 /* TypeIds.Error */ || typeId === 4 /* TypeIds.Array */ || typeId === 5 /* TypeIds.Object */;
     const deserializedProxyMap = new WeakMap();
     const isDeserializerProxy = (value) => {
-        return typeof value === 'object' && value !== null && SERIALIZER_PROXY_UNWRAP in value;
+        return isObject(value) && SERIALIZER_PROXY_UNWRAP in value;
     };
     const SERIALIZER_PROXY_UNWRAP = Symbol('UNWRAP');
     /** Call this on the serialized root state */
@@ -8261,19 +8969,19 @@
             const idx = i * 2;
             const typeId = this.$data$[idx];
             const value = this.$data$[idx + 1];
-            if (typeId === undefined) {
+            if (typeId === 0 /* TypeIds.Plain */) {
                 // The value is already cached
                 return value;
             }
             const container = this.$container$;
-            let propValue = allocate(container, typeId, value);
-            /** We stored the reference, so now we can inflate, allowing cycles. */
-            if (typeId >= 14 /* TypeIds.Error */) {
-                propValue = inflate(container, propValue, typeId, value);
-            }
+            const propValue = allocate(container, typeId, value);
             Reflect.set(target, property, propValue);
-            this.$data$[idx] = undefined;
+            this.$data$[idx] = 0 /* TypeIds.Plain */;
             this.$data$[idx + 1] = propValue;
+            /** We stored the reference, so now we can inflate, allowing cycles */
+            if (needsInflation(typeId)) {
+                inflate(container, propValue, typeId, value);
+            }
             return propValue;
         }
         has(target, property) {
@@ -8292,7 +9000,7 @@
                 return out;
             }
             const idx = i * 2;
-            this.$data$[idx] = undefined;
+            this.$data$[idx] = 0 /* TypeIds.Plain */;
             this.$data$[idx + 1] = value;
             return true;
         }
@@ -8310,51 +9018,33 @@
     };
     const resolvers = new WeakMap();
     const inflate = (container, target, typeId, data) => {
-        if (typeId === undefined) {
+        if (typeId === 0 /* TypeIds.Plain */) {
             // Already processed
-            return target;
+            return;
         }
-        // restore the complex data, except for plain objects
-        if (typeId !== 15 /* TypeIds.Object */ && Array.isArray(data)) {
+        // Restore the complex data
+        if (Array.isArray(data)) {
             data = _eagerDeserializeArray(container, data);
         }
         switch (typeId) {
-            case 15 /* TypeIds.Object */:
-                // We use getters for making complex values lazy
-                for (let i = 0; i < data.length; i += 4) {
-                    const key = deserializeData(container, data[i], data[i + 1]);
-                    const valType = data[i + 2];
-                    const valData = data[i + 3];
-                    if (valType === 0 /* TypeIds.RootRef */ || valType >= 14 /* TypeIds.Error */) {
-                        Object.defineProperty(target, key, {
-                            get() {
-                                const value = deserializeData(container, valType, valData);
-                                // after first deserialize, we can replace the Object.defineProperty with the value
-                                target[key] = value;
-                                return value;
-                            },
-                            set(value) {
-                                Object.defineProperty(target, key, {
-                                    value,
-                                    writable: true,
-                                    enumerable: true,
-                                    configurable: true,
-                                });
-                            },
-                            enumerable: true,
-                            configurable: true,
-                        });
-                    }
-                    else {
-                        target[key] = deserializeData(container, valType, valData);
-                    }
+            case 4 /* TypeIds.Array */:
+                for (let i = 0; i < target.length; i++) {
+                    // read the value to trigger lazy deserialization
+                    target[i];
+                }
+                break;
+            case 5 /* TypeIds.Object */:
+                for (let i = 0; i < data.length; i += 2) {
+                    const key = data[i];
+                    const value = data[i + 1];
+                    target[key] = value;
                 }
                 break;
-            case 20 /* TypeIds.QRL */:
-            case 21 /* TypeIds.PreloadQRL */:
+            case 19 /* TypeIds.QRL */:
+            case 20 /* TypeIds.PreloadQRL */:
                 inflateQRL(container, target);
                 break;
-            case 22 /* TypeIds.Task */:
+            case 21 /* TypeIds.Task */:
                 const task = target;
                 const v = data;
                 task.$qrl$ = inflateQRL(container, v[0]);
@@ -8364,7 +9054,7 @@
                 task[_EFFECT_BACK_REF] = v[4];
                 task.$state$ = v[5];
                 break;
-            case 23 /* TypeIds.Resource */:
+            case 22 /* TypeIds.Resource */:
                 const [resolved, result, effects] = data;
                 const resource = target;
                 if (resolved) {
@@ -8379,26 +9069,31 @@
                 }
                 getStoreHandler(target).$effects$ = effects;
                 break;
-            case 24 /* TypeIds.Component */:
+            case 23 /* TypeIds.Component */:
                 target[SERIALIZABLE_STATE][0] = data[0];
                 break;
-            case 30 /* TypeIds.Store */:
-            case 31 /* TypeIds.StoreArray */: {
-                const [value, flags, effects] = data;
-                const store = getOrCreateStore(value, flags, container);
-                const storeHandler = getStoreHandler(store);
+            case 29 /* TypeIds.Store */: {
+                /**
+                 * Note that cycles between stores and their targets can cause this inflation to happen on
+                 * already inflated stores, but that's ok because the flags and effects are still the same.
+                 *
+                 * Also note that we don't do anything with the innerstores we added during serialization,
+                 * because they are already inflated in the first step of inflate().
+                 */
+                const [, flags, effects] = data;
+                const storeHandler = getStoreHandler(target);
+                storeHandler.$flags$ = flags;
                 storeHandler.$effects$ = effects;
-                target = store;
                 break;
             }
-            case 25 /* TypeIds.Signal */: {
+            case 24 /* TypeIds.Signal */: {
                 const signal = target;
                 const d = data;
                 signal.$untrackedValue$ = d[0];
                 signal.$effects$ = new Set(d.slice(1));
                 break;
             }
-            case 26 /* TypeIds.WrappedSignal */: {
+            case 25 /* TypeIds.WrappedSignal */: {
                 const signal = target;
                 const d = data;
                 signal.$func$ = container.getSyncFn(d[0]);
@@ -8411,7 +9106,7 @@
                 signal.$effects$ = new Set(d.slice(5));
                 break;
             }
-            case 28 /* TypeIds.AsyncComputedSignal */: {
+            case 27 /* TypeIds.AsyncComputedSignal */: {
                 const asyncComputed = target;
                 const d = data;
                 asyncComputed.$computeQrl$ = d[0];
@@ -8424,14 +9119,12 @@
                 if (hasValue) {
                     asyncComputed.$untrackedValue$ = d[6];
                 }
-                else {
-                    asyncComputed.$flags$ |= 1 /* SignalFlags.INVALID */;
-                }
+                asyncComputed.$flags$ |= 1 /* SignalFlags.INVALID */;
                 break;
             }
             // Inflating a SerializerSignal is the same as inflating a ComputedSignal
-            case 29 /* TypeIds.SerializerSignal */:
-            case 27 /* TypeIds.ComputedSignal */: {
+            case 28 /* TypeIds.SerializerSignal */:
+            case 26 /* TypeIds.ComputedSignal */: {
                 const computed = target;
                 const d = data;
                 computed.$computeQrl$ = d[0];
@@ -8440,7 +9133,7 @@
                 if (hasValue) {
                     computed.$untrackedValue$ = d[2];
                     // The serialized signal is always invalid so it can recreate the custom object
-                    if (typeId === 29 /* TypeIds.SerializerSignal */) {
+                    if (typeId === 28 /* TypeIds.SerializerSignal */) {
                         computed.$flags$ |= 1 /* SignalFlags.INVALID */;
                     }
                 }
@@ -8454,7 +9147,7 @@
                      */
                     // try to download qrl in this tick
                     computed.$computeQrl$.resolve();
-                    container.$scheduler$?.(1 /* ChoreType.QRL_RESOLVE */, null, computed.$computeQrl$);
+                    container.$scheduler$(1 /* ChoreType.QRL_RESOLVE */, null, computed.$computeQrl$);
                 }
                 break;
             }
@@ -8466,7 +9159,7 @@
                 }
                 break;
             }
-            case 32 /* TypeIds.FormData */: {
+            case 30 /* TypeIds.FormData */: {
                 const formData = target;
                 const d = data;
                 for (let i = 0; i < d.length; i++) {
@@ -8474,7 +9167,7 @@
                 }
                 break;
             }
-            case 33 /* TypeIds.JSXNode */: {
+            case 31 /* TypeIds.JSXNode */: {
                 const jsx = target;
                 const [type, varProps, constProps, children, flags, key] = data;
                 jsx.type = type;
@@ -8485,7 +9178,7 @@
                 jsx.key = key;
                 break;
             }
-            case 17 /* TypeIds.Set */: {
+            case 16 /* TypeIds.Set */: {
                 const set = target;
                 const d = data;
                 for (let i = 0; i < d.length; i++) {
@@ -8493,7 +9186,7 @@
                 }
                 break;
             }
-            case 18 /* TypeIds.Map */: {
+            case 17 /* TypeIds.Map */: {
                 const map = target;
                 const d = data;
                 for (let i = 0; i < d.length; i++) {
@@ -8501,7 +9194,7 @@
                 }
                 break;
             }
-            case 16 /* TypeIds.Promise */: {
+            case 15 /* TypeIds.Promise */: {
                 const promise = target;
                 const [resolved, result] = data;
                 const [resolve, reject] = resolvers.get(promise);
@@ -8513,7 +9206,7 @@
                 }
                 break;
             }
-            case 19 /* TypeIds.Uint8Array */:
+            case 18 /* TypeIds.Uint8Array */:
                 const bytes = target;
                 const buf = atob(data);
                 let i = 0;
@@ -8521,12 +9214,12 @@
                     bytes[i++] = s.charCodeAt(0);
                 }
                 break;
-            case 34 /* TypeIds.PropsProxy */:
+            case 32 /* TypeIds.PropsProxy */:
                 const propsProxy = target;
                 propsProxy[_VAR_PROPS] = data === 0 ? {} : data[0];
                 propsProxy[_CONST_PROPS] = data[1];
                 break;
-            case 35 /* TypeIds.EffectData */: {
+            case 33 /* TypeIds.SubscriptionData */: {
                 const effectData = target;
                 effectData.data.$scopedStyleIdPrefix$ = data[0];
                 effectData.data.$isConst$ = data[1];
@@ -8535,7 +9228,6 @@
             default:
                 throw qError(16 /* QError.serializeErrorNotImplemented */, [typeId]);
         }
-        return target;
     };
     const _constants = [
         undefined,
@@ -8547,6 +9239,7 @@
         EMPTY_OBJ,
         NEEDS_COMPUTATION,
         STORE_ALL_PROPS,
+        _UNINITIALIZED,
         Slot,
         Fragment,
         NaN,
@@ -8566,6 +9259,7 @@
         'EMPTY_OBJ',
         'NEEDS_COMPUTATION',
         'STORE_ALL_PROPS',
+        '_UNINITIALIZED',
         'Slot',
         'Fragment',
         'NaN',
@@ -8576,84 +9270,96 @@
         'MIN_SAFE_INTEGER',
     ];
     const allocate = (container, typeId, value) => {
-        if (value === undefined) {
-            // When a value was already processed, the result is stored in type
-            return typeId;
+        if (typeId === 0 /* TypeIds.Plain */) {
+            return value;
         }
         switch (typeId) {
-            case 0 /* TypeIds.RootRef */:
+            case 1 /* TypeIds.RootRef */:
                 return container.$getObjectById$(value);
-            case 1 /* TypeIds.ForwardRef */:
+            case 2 /* TypeIds.ForwardRef */:
                 if (!container.$forwardRefs$) {
                     throw qError(18 /* QError.serializeErrorCannotAllocate */, ['forward ref']);
                 }
-                return container.$getObjectById$(container.$forwardRefs$[value]);
-            case 2 /* TypeIds.ForwardRefs */:
+                const rootRef = container.$forwardRefs$[value];
+                if (rootRef === -1) {
+                    return _UNINITIALIZED;
+                }
+                else {
+                    return container.$getObjectById$(rootRef);
+                }
+            case 13 /* TypeIds.ForwardRefs */:
                 return value;
             case 3 /* TypeIds.Constant */:
                 return _constants[value];
-            case 4 /* TypeIds.Number */:
-                return value;
-            case 6 /* TypeIds.Array */:
+            case 4 /* TypeIds.Array */:
+                // Wrap while inflating so we can handle cyclic references
                 return wrapDeserializerProxy(container, value);
-            case 15 /* TypeIds.Object */:
+            case 5 /* TypeIds.Object */:
                 return {};
-            case 20 /* TypeIds.QRL */:
-            case 21 /* TypeIds.PreloadQRL */:
+            case 19 /* TypeIds.QRL */:
+            case 20 /* TypeIds.PreloadQRL */:
                 const qrl = typeof value === 'number'
                     ? // root reference
                         container.$getObjectById$(value)
                     : value;
                 return parseQRL(qrl);
-            case 22 /* TypeIds.Task */:
+            case 21 /* TypeIds.Task */:
                 return new Task(-1, -1, null, null, null, null);
-            case 23 /* TypeIds.Resource */: {
+            case 22 /* TypeIds.Resource */: {
                 const res = createResourceReturn(container, 
                 // we don't care about the timeout value
                 undefined, undefined);
                 res.loading = false;
                 return res;
             }
-            case 7 /* TypeIds.URL */:
+            case 6 /* TypeIds.URL */:
                 return new URL(value);
-            case 8 /* TypeIds.Date */:
+            case 7 /* TypeIds.Date */:
                 return new Date(value);
-            case 9 /* TypeIds.Regex */:
+            case 8 /* TypeIds.Regex */:
                 const idx = value.lastIndexOf('/');
                 return new RegExp(value.slice(1, idx), value.slice(idx + 1));
             case 14 /* TypeIds.Error */:
                 return new Error();
-            case 24 /* TypeIds.Component */:
+            case 23 /* TypeIds.Component */:
                 return componentQrl(null);
-            case 25 /* TypeIds.Signal */:
+            case 24 /* TypeIds.Signal */:
                 return new SignalImpl(container, 0);
-            case 26 /* TypeIds.WrappedSignal */:
+            case 25 /* TypeIds.WrappedSignal */:
                 return new WrappedSignalImpl(container, null, null, null);
-            case 27 /* TypeIds.ComputedSignal */:
+            case 26 /* TypeIds.ComputedSignal */:
                 return new ComputedSignalImpl(container, null);
-            case 28 /* TypeIds.AsyncComputedSignal */:
+            case 27 /* TypeIds.AsyncComputedSignal */:
                 return new AsyncComputedSignalImpl(container, null);
-            case 29 /* TypeIds.SerializerSignal */:
+            case 28 /* TypeIds.SerializerSignal */:
                 return new SerializerSignalImpl(container, null);
-            case 30 /* TypeIds.Store */:
-            case 31 /* TypeIds.StoreArray */:
-                // ignore allocate, we need to assign target while creating store
-                return null;
-            case 13 /* TypeIds.URLSearchParams */:
+            case 29 /* TypeIds.Store */:
+                /**
+                 * We have a problem here: In theory, both the store and the target need to be present at
+                 * allocate time before inflation can happen. However, that makes the code really complex.
+                 * Instead, we deserialize the target here, which will already allocate and inflate this store
+                 * if there is a cycle (because the original allocation for the store didn't complete yet).
+                 * Because we have a map of target -> store, we will reuse the same store instance after
+                 * target deserialization. So in that case, we will be running inflation twice on the same
+                 * store, but that is not a problem, very little overhead and the code is way simpler.
+                 */
+                const storeValue = deserializeData(container, value[0], value[1]);
+                value[0] = 0 /* TypeIds.Plain */;
+                value[1] = storeValue;
+                return getOrCreateStore(storeValue, 0 /* StoreFlags.NONE */, container);
+            case 12 /* TypeIds.URLSearchParams */:
                 return new URLSearchParams(value);
-            case 32 /* TypeIds.FormData */:
+            case 30 /* TypeIds.FormData */:
                 return new FormData();
-            case 33 /* TypeIds.JSXNode */:
+            case 31 /* TypeIds.JSXNode */:
                 return new JSXNodeImpl(null, null, null, null, -1, null);
-            case 12 /* TypeIds.BigInt */:
+            case 11 /* TypeIds.BigInt */:
                 return BigInt(value);
-            case 17 /* TypeIds.Set */:
+            case 16 /* TypeIds.Set */:
                 return new Set();
-            case 18 /* TypeIds.Map */:
+            case 17 /* TypeIds.Map */:
                 return new Map();
-            case 5 /* TypeIds.String */:
-                return value;
-            case 16 /* TypeIds.Promise */:
+            case 15 /* TypeIds.Promise */:
                 let resolve;
                 let reject;
                 const promise = new Promise((res, rej) => {
@@ -8664,25 +9370,51 @@
                 // Don't leave unhandled promise rejections
                 promise.catch(() => { });
                 return promise;
-            case 19 /* TypeIds.Uint8Array */:
+            case 18 /* TypeIds.Uint8Array */:
                 const encodedLength = value.length;
                 const blocks = encodedLength >>> 2;
                 const rest = encodedLength & 3;
                 const decodedLength = blocks * 3 + (rest ? rest - 1 : 0);
                 return new Uint8Array(decodedLength);
-            case 34 /* TypeIds.PropsProxy */:
+            case 32 /* TypeIds.PropsProxy */:
                 return createPropsProxy(null, null);
-            case 10 /* TypeIds.VNode */:
+            case 9 /* TypeIds.VNode */:
                 return retrieveVNodeOrDocument(container, value);
-            case 11 /* TypeIds.RefVNode */:
+            case 10 /* TypeIds.RefVNode */:
                 const vNode = retrieveVNodeOrDocument(container, value);
                 if (vnode_isVNode(vNode)) {
+                    /**
+                     * If we have a ref, we need to ensure the element is materialized.
+                     *
+                     * Example:
+                     *
+                     * ```
+                     * const Cmp = component$(() => {
+                     *       const element = useSignal<HTMLDivElement>();
+                     *
+                     *       useVisibleTask$(() => {
+                     *         element.value!.innerHTML = 'I am the innerHTML content!';
+                     *       });
+                     *
+                     *       return (
+                     *          <div ref={element} />
+                     *       );
+                     * });
+                     * ```
+                     *
+                     * If we don't materialize early element with ref property, and change element innerHTML it
+                     * will be applied to a vnode tree during the lazy materialization, and it is wrong.
+                     *
+                     * Next if we rerender component it will remove applied innerHTML, because the system thinks
+                     * it is a part of the vnode tree.
+                     */
+                    ensureMaterialized(vNode);
                     return vnode_getNode(vNode);
                 }
                 else {
                     throw qError(17 /* QError.serializeErrorExpectedVNode */, [typeof vNode]);
                 }
-            case 35 /* TypeIds.EffectData */:
+            case 33 /* TypeIds.SubscriptionData */:
                 return new SubscriptionData({});
             default:
                 throw qError(18 /* QError.serializeErrorCannotAllocate */, [typeId]);
@@ -8744,7 +9476,7 @@
             };
         }
         const seenObjsMap = new Map();
-        const rootsPathMap = new Map();
+        const objectPathStringCache = new Map();
         const syncFnMap = new Map();
         const syncFns = [];
         const roots = [];
@@ -8753,7 +9485,7 @@
             return seenObjsMap.set(obj, { $parent$: parent, $index$: index, $rootIndex$: -1 });
         };
         const $addRootPath$ = (obj) => {
-            const rootPath = rootsPathMap.get(obj);
+            const rootPath = objectPathStringCache.get(obj);
             if (rootPath) {
                 return rootPath;
             }
@@ -8772,7 +9504,7 @@
                 current = seenObjsMap.get(current.$parent$);
             }
             const pathStr = path.length > 1 ? path.join(' ') : path.length ? path[0] : seen.$index$;
-            rootsPathMap.set(obj, pathStr);
+            objectPathStringCache.set(obj, pathStr);
             return pathStr;
         };
         const $addRoot$ = (obj, parent = null) => {
@@ -8839,7 +9571,7 @@
             $storeProxyMap$: storeProxyMap,
             $getProp$: getProp,
             $setProp$: setProp,
-            $pathMap$: rootsPathMap,
+            $objectPathStringCache$: objectPathStringCache,
         };
     };
     function $discoverRoots$(serializationContext, obj, parent, index) {
@@ -8863,7 +9595,8 @@
                 for (let i = 1; i < value.length; i += 2) {
                     const keyValue = value[i - 1];
                     const attrValue = value[i];
-                    if (typeof attrValue === 'string' ||
+                    if (attrValue == null ||
+                        typeof attrValue === 'string' ||
                         // skip empty props
                         (keyValue === ELEMENT_PROPS &&
                             Object.keys(attrValue).length === 0)) {
@@ -8888,6 +9621,14 @@
             this.$qrl$ = $qrl$;
         }
     }
+    class SerializationWeakRef {
+        $obj$;
+        constructor($obj$) {
+            this.$obj$ = $obj$;
+        }
+    }
+    /** @internal */
+    const _serializationWeakRef = (obj) => new SerializationWeakRef(obj);
     /**
      * Format:
      *
@@ -8898,12 +9639,14 @@
      * - Therefore root indexes need to be doubled to get the actual index.
      */
     async function serialize(serializationContext) {
-        const { $writer$, $isSsrNode$, $isDomRef$, $storeProxyMap$, $addRoot$, $pathMap$, $wasSeen$ } = serializationContext;
+        const { $writer$, $isSsrNode$, $isDomRef$, $storeProxyMap$, $addRoot$, $objectPathStringCache$, $wasSeen$, } = serializationContext;
         let depth = 0;
+        let rootIdx = 0;
         const forwardRefs = [];
         let forwardRefsId = 0;
         const promises = new Set();
         const preloadQrls = new Set();
+        const s11nWeakRefs = new Map();
         let parent = null;
         const isRootObject = () => depth === 0;
         const outputArray = (value, writeFn) => {
@@ -8948,19 +9691,41 @@
         };
         const addPreloadQrl = (qrl) => {
             preloadQrls.add(qrl);
-            serializationContext.$addRoot$(qrl, null);
+            serializationContext.$addRoot$(qrl);
         };
-        const outputRootRef = (value, rootDepth = 0) => {
+        const outputAsRootRef = (value, rootDepth = 0) => {
             const seen = $wasSeen$(value);
-            const rootRefPath = $pathMap$.get(value);
+            const rootRefPath = $objectPathStringCache$.get(value);
+            // Objects are the only way to create circular dependencies.
+            // So the first thing to to is to see if we have a circular dependency.
+            // (NOTE: For root objects we need to serialize them regardless if we have seen
+            //        them before, otherwise the root object reference will point to itself.)
+            // Also note that depth will be 1 for objects in root
             if (rootDepth === depth && seen && seen.$parent$ !== null && rootRefPath) {
-                output(0 /* TypeIds.RootRef */, rootRefPath);
+                output(1 /* TypeIds.RootRef */, rootRefPath);
                 return true;
             }
             else if (depth > rootDepth && seen && seen.$rootIndex$ !== -1) {
-                output(0 /* TypeIds.RootRef */, seen.$rootIndex$);
+                // We have seen this object before, so we can serialize it as a reference.
+                // Otherwise serialize as normal
+                output(1 /* TypeIds.RootRef */, seen.$rootIndex$);
                 return true;
             }
+            else if (s11nWeakRefs.has(value)) {
+                const forwardRefId = s11nWeakRefs.get(value);
+                // We see the object again, we must now make it a root and update the forward ref
+                if (rootDepth === depth) {
+                    // It's already a root
+                    forwardRefs[forwardRefId] = rootIdx;
+                }
+                else {
+                    // ref
+                    const rootRef = $addRoot$(value);
+                    output(1 /* TypeIds.RootRef */, rootRef);
+                    forwardRefs[forwardRefId] = rootRef;
+                    return true;
+                }
+            }
             return false;
         };
         const writeValue = (value) => {
@@ -8968,22 +9733,22 @@
                 output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
             }
             else if (typeof value === 'bigint') {
-                output(12 /* TypeIds.BigInt */, value.toString());
+                output(11 /* TypeIds.BigInt */, value.toString());
             }
             else if (typeof value === 'boolean') {
                 output(3 /* TypeIds.Constant */, value ? 2 /* Constants.True */ : 3 /* Constants.False */);
             }
             else if (typeof value === 'function') {
                 if (value === Slot) {
-                    output(3 /* TypeIds.Constant */, 9 /* Constants.Slot */);
+                    output(3 /* TypeIds.Constant */, 10 /* Constants.Slot */);
                 }
                 else if (value === Fragment) {
-                    output(3 /* TypeIds.Constant */, 10 /* Constants.Fragment */);
+                    output(3 /* TypeIds.Constant */, 11 /* Constants.Fragment */);
                 }
                 else if (isQrl(value)) {
-                    if (!outputRootRef(value)) {
+                    if (!outputAsRootRef(value)) {
                         const qrl = qrlToString(serializationContext, value);
-                        const type = preloadQrls.has(value) ? 21 /* TypeIds.PreloadQRL */ : 20 /* TypeIds.QRL */;
+                        const type = preloadQrls.has(value) ? 20 /* TypeIds.PreloadQRL */ : 19 /* TypeIds.QRL */;
                         if (isRootObject()) {
                             output(type, qrl);
                         }
@@ -8996,7 +9761,7 @@
                 else if (isQwikComponent(value)) {
                     const [qrl] = value[SERIALIZABLE_STATE];
                     serializationContext.$renderSymbols$.add(qrl.$symbol$);
-                    output(24 /* TypeIds.Component */, [qrl]);
+                    output(23 /* TypeIds.Component */, [qrl]);
                 }
                 else {
                     throw qError(34 /* QError.serializeErrorCannotSerializeFunction */, [value.toString()]);
@@ -9004,22 +9769,22 @@
             }
             else if (typeof value === 'number') {
                 if (Number.isNaN(value)) {
-                    output(3 /* TypeIds.Constant */, 11 /* Constants.NaN */);
+                    output(3 /* TypeIds.Constant */, 12 /* Constants.NaN */);
                 }
                 else if (!Number.isFinite(value)) {
-                    output(3 /* TypeIds.Constant */, value < 0 ? 13 /* Constants.NegativeInfinity */ : 12 /* Constants.PositiveInfinity */);
+                    output(3 /* TypeIds.Constant */, value < 0 ? 14 /* Constants.NegativeInfinity */ : 13 /* Constants.PositiveInfinity */);
                 }
                 else if (value === Number.MAX_SAFE_INTEGER) {
-                    output(3 /* TypeIds.Constant */, 14 /* Constants.MaxSafeInt */);
+                    output(3 /* TypeIds.Constant */, 15 /* Constants.MaxSafeInt */);
                 }
                 else if (value === Number.MAX_SAFE_INTEGER - 1) {
-                    output(3 /* TypeIds.Constant */, 15 /* Constants.AlmostMaxSafeInt */);
+                    output(3 /* TypeIds.Constant */, 16 /* Constants.AlmostMaxSafeInt */);
                 }
                 else if (value === Number.MIN_SAFE_INTEGER) {
-                    output(3 /* TypeIds.Constant */, 16 /* Constants.MinSafeInt */);
+                    output(3 /* TypeIds.Constant */, 17 /* Constants.MinSafeInt */);
                 }
                 else {
-                    output(4 /* TypeIds.Number */, value);
+                    output(0 /* TypeIds.Plain */, value);
                 }
             }
             else if (typeof value === 'object') {
@@ -9046,8 +9811,8 @@
                     output(3 /* TypeIds.Constant */, 4 /* Constants.EmptyString */);
                 }
                 else {
-                    if (!outputRootRef(value)) {
-                        output(5 /* TypeIds.String */, value);
+                    if (!outputAsRootRef(value)) {
+                        output(0 /* TypeIds.Plain */, value);
                     }
                 }
             }
@@ -9060,6 +9825,9 @@
             else if (value === STORE_ALL_PROPS) {
                 output(3 /* TypeIds.Constant */, 8 /* Constants.STORE_ALL_PROPS */);
             }
+            else if (value === _UNINITIALIZED) {
+                output(3 /* TypeIds.Constant */, 9 /* Constants.UNINITIALIZED */);
+            }
             else {
                 throw qError(20 /* QError.serializeErrorUnknownType */, [typeof value]);
             }
@@ -9069,14 +9837,11 @@
              * The object writer outputs an array object (without type prefix) and this increases the depth
              * for the objects within (depth 1).
              */
-            // Objects are the only way to create circular dependencies.
-            // So the first thing to to is to see if we have a circular dependency.
-            // (NOTE: For root objects we need to serialize them regardless if we have seen
-            //        them before, otherwise the root object reference will point to itself.)
-            // Also note that depth will be 1 for objects in root
-            if (outputRootRef(value, 1)) {
+            if (outputAsRootRef(value, 1)) {
                 return;
             }
+            // handle custom serializers
+            // add to the seen map
             if (isPropsProxy(value)) {
                 const varProps = value[_VAR_PROPS];
                 const constProps = value[_CONST_PROPS];
@@ -9085,10 +9850,10 @@
                     : Object.keys(varProps).length
                         ? [varProps]
                         : 0;
-                output(34 /* TypeIds.PropsProxy */, out);
+                output(32 /* TypeIds.PropsProxy */, out);
             }
             else if (value instanceof SubscriptionData) {
-                output(35 /* TypeIds.EffectData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
+                output(33 /* TypeIds.SubscriptionData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
             }
             else if (isStore(value)) {
                 if (isResource(value)) {
@@ -9096,38 +9861,38 @@
                     serializationContext.$resources$.add(value);
                     // TODO the effects include the resource return which has duplicate data
                     const forwardRefId = $resolvePromise$(value.value, $addRoot$, (resolved, resolvedValue) => {
-                        return new PromiseResult(23 /* TypeIds.Resource */, resolved, resolvedValue, getStoreHandler(value).$effects$);
+                        return new PromiseResult(22 /* TypeIds.Resource */, resolved, resolvedValue, getStoreHandler(value).$effects$);
                     });
-                    output(1 /* TypeIds.ForwardRef */, forwardRefId);
+                    output(2 /* TypeIds.ForwardRef */, forwardRefId);
                 }
                 else {
                     const storeHandler = getStoreHandler(value);
                     const storeTarget = getStoreTarget(value);
                     const flags = storeHandler.$flags$;
                     const effects = storeHandler.$effects$;
+                    // We need to retain the nested stores too, they won't be found from the target
                     const innerStores = [];
                     for (const prop in storeTarget) {
                         const propValue = storeTarget[prop];
-                        if ($storeProxyMap$.has(propValue)) {
-                            const innerStore = $storeProxyMap$.get(propValue);
+                        const innerStore = $storeProxyMap$.get(propValue);
+                        if (innerStore) {
                             innerStores.push(innerStore);
-                            serializationContext.$addRoot$(innerStore);
                         }
                     }
                     const out = [storeTarget, flags, effects, ...innerStores];
                     while (out[out.length - 1] == null) {
                         out.pop();
                     }
-                    output(Array.isArray(storeTarget) ? 31 /* TypeIds.StoreArray */ : 30 /* TypeIds.Store */, out);
+                    output(29 /* TypeIds.Store */, out);
                 }
             }
             else if (isSerializerObj(value)) {
                 const result = value[SerializerSymbol](value);
                 if (isPromise(result)) {
                     const forwardRef = $resolvePromise$(result, $addRoot$, (resolved, resolvedValue) => {
-                        return new PromiseResult(29 /* TypeIds.SerializerSignal */, resolved, resolvedValue, null, null);
+                        return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, null, null);
                     });
-                    output(1 /* TypeIds.ForwardRef */, forwardRef);
+                    output(2 /* TypeIds.ForwardRef */, forwardRef);
                 }
                 else {
                     depth--;
@@ -9137,7 +9902,7 @@
             }
             else if (isObjectLiteral(value)) {
                 if (Array.isArray(value)) {
-                    output(6 /* TypeIds.Array */, value);
+                    output(4 /* TypeIds.Array */, value);
                 }
                 else {
                     const out = [];
@@ -9148,32 +9913,24 @@
                         }
                     }
                     // TODO if !out.length, output 0 and restore as {}
-                    output(15 /* TypeIds.Object */, out);
+                    output(5 /* TypeIds.Object */, out);
                 }
             }
             else if ($isDomRef$(value)) {
                 value.$ssrNode$.vnodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
-                output(11 /* TypeIds.RefVNode */, value.$ssrNode$.id);
+                output(10 /* TypeIds.RefVNode */, value.$ssrNode$.id);
             }
             else if (value instanceof SignalImpl) {
                 if (value instanceof SerializerSignalImpl) {
                     addPreloadQrl(value.$computeQrl$);
                     const forwardRefId = $resolvePromise$($getCustomSerializerPromise$(value, value.$untrackedValue$), $addRoot$, (resolved, resolvedValue) => {
-                        return new PromiseResult(29 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
+                        return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
                     });
-                    output(1 /* TypeIds.ForwardRef */, forwardRefId);
+                    output(2 /* TypeIds.ForwardRef */, forwardRefId);
                     return;
                 }
-                /**
-                 * Special case: when a Signal value is an SSRNode, it always needs to be a DOM ref instead.
-                 * It can never be meant to become a vNode, because vNodes are internal only.
-                 */
-                const v = value instanceof ComputedSignalImpl &&
-                    (value.$flags$ & 1 /* SignalFlags.INVALID */ || fastSkipSerialize(value.$untrackedValue$))
-                    ? NEEDS_COMPUTATION
-                    : value.$untrackedValue$;
                 if (value instanceof WrappedSignalImpl) {
-                    output(26 /* TypeIds.WrappedSignal */, [
+                    output(25 /* TypeIds.WrappedSignal */, [
                         ...serializeWrappingFn(serializationContext, value),
                         filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                         value.$flags$,
@@ -9181,45 +9938,44 @@
                         ...(value.$effects$ || []),
                     ]);
                 }
-                else if (value instanceof AsyncComputedSignalImpl) {
-                    addPreloadQrl(value.$computeQrl$);
-                    const out = [
-                        value.$computeQrl$,
-                        value.$effects$,
-                        value.$loadingEffects$,
-                        value.$errorEffects$,
-                        value.$untrackedLoading$,
-                        value.$untrackedError$,
-                    ];
-                    if (v !== NEEDS_COMPUTATION) {
-                        out.push(v);
-                    }
-                    output(28 /* TypeIds.AsyncComputedSignal */, out);
-                }
                 else if (value instanceof ComputedSignalImpl) {
+                    let v = value.$untrackedValue$;
+                    const shouldAlwaysSerialize = value.$flags$ & 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
+                    const shouldNeverSerialize = value.$flags$ & 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
+                    const isInvalid = value.$flags$ & 1 /* SignalFlags.INVALID */;
+                    const isSkippable = fastSkipSerialize(value.$untrackedValue$);
+                    if (shouldAlwaysSerialize) {
+                        v = value.$untrackedValue$;
+                    }
+                    else if (shouldNeverSerialize) {
+                        v = NEEDS_COMPUTATION;
+                    }
+                    else if (isInvalid || isSkippable) {
+                        v = NEEDS_COMPUTATION;
+                    }
                     addPreloadQrl(value.$computeQrl$);
-                    const out = [
-                        value.$computeQrl$,
-                        // TODO check if we can use domVRef for effects
-                        value.$effects$,
-                    ];
+                    const out = [value.$computeQrl$, value.$effects$];
+                    const isAsync = value instanceof AsyncComputedSignalImpl;
+                    if (isAsync) {
+                        out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedLoading$, value.$untrackedError$);
+                    }
                     if (v !== NEEDS_COMPUTATION) {
                         out.push(v);
                     }
-                    output(27 /* TypeIds.ComputedSignal */, out);
+                    output(isAsync ? 27 /* TypeIds.AsyncComputedSignal */ : 26 /* TypeIds.ComputedSignal */, out);
                 }
                 else {
-                    output(25 /* TypeIds.Signal */, [v, ...(value.$effects$ || [])]);
+                    output(24 /* TypeIds.Signal */, [value.$untrackedValue$, ...(value.$effects$ || [])]);
                 }
             }
             else if (value instanceof URL) {
-                output(7 /* TypeIds.URL */, value.href);
+                output(6 /* TypeIds.URL */, value.href);
             }
             else if (value instanceof Date) {
-                output(8 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
+                output(7 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
             }
             else if (value instanceof RegExp) {
-                output(9 /* TypeIds.Regex */, value.toString());
+                output(8 /* TypeIds.Regex */, value.toString());
             }
             else if (value instanceof Error) {
                 const out = [value.message];
@@ -9235,7 +9991,7 @@
                 const rootIndex = $addRoot$(value);
                 serializationContext.$setProp$(value, ELEMENT_ID, String(rootIndex));
                 // we need to output before the vnode overwrites its values
-                output(10 /* TypeIds.VNode */, value.id);
+                output(9 /* TypeIds.VNode */, value.id);
                 const vNodeData = value.vnodeData;
                 if (vNodeData) {
                     discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => $addRoot$(vNodeDataValue));
@@ -9271,23 +10027,23 @@
                         array.push(key, value.name);
                     }
                 });
-                output(32 /* TypeIds.FormData */, array);
+                output(30 /* TypeIds.FormData */, array);
             }
             else if (value instanceof URLSearchParams) {
-                output(13 /* TypeIds.URLSearchParams */, value.toString());
+                output(12 /* TypeIds.URLSearchParams */, value.toString());
             }
             else if (value instanceof Set) {
-                output(17 /* TypeIds.Set */, [...value.values()]);
+                output(16 /* TypeIds.Set */, [...value.values()]);
             }
             else if (value instanceof Map) {
                 const combined = [];
                 for (const [k, v] of value.entries()) {
                     combined.push(k, v);
                 }
-                output(18 /* TypeIds.Map */, combined);
+                output(17 /* TypeIds.Map */, combined);
             }
             else if (isJSXNode(value)) {
-                output(33 /* TypeIds.JSXNode */, [
+                output(31 /* TypeIds.JSXNode */, [
                     value.type,
                     value.varProps,
                     value.constProps,
@@ -9308,21 +10064,21 @@
                 while (out[out.length - 1] == null) {
                     out.pop();
                 }
-                output(22 /* TypeIds.Task */, out);
+                output(21 /* TypeIds.Task */, out);
             }
             else if (isPromise(value)) {
                 const forwardRefId = $resolvePromise$(value, $addRoot$, (resolved, resolvedValue) => {
-                    return new PromiseResult(16 /* TypeIds.Promise */, resolved, resolvedValue);
+                    return new PromiseResult(15 /* TypeIds.Promise */, resolved, resolvedValue);
                 });
-                output(1 /* TypeIds.ForwardRef */, forwardRefId);
+                output(2 /* TypeIds.ForwardRef */, forwardRefId);
             }
             else if (value instanceof PromiseResult) {
-                if (value.$type$ === 23 /* TypeIds.Resource */) {
-                    output(23 /* TypeIds.Resource */, [value.$resolved$, value.$value$, value.$effects$]);
+                if (value.$type$ === 22 /* TypeIds.Resource */) {
+                    output(22 /* TypeIds.Resource */, [value.$resolved$, value.$value$, value.$effects$]);
                 }
-                else if (value.$type$ === 29 /* TypeIds.SerializerSignal */) {
+                else if (value.$type$ === 28 /* TypeIds.SerializerSignal */) {
                     if (value.$qrl$) {
-                        output(29 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
+                        output(28 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
                     }
                     else if (value.$resolved$) {
                         writeValue(value.$value$);
@@ -9333,7 +10089,7 @@
                     }
                 }
                 else {
-                    output(16 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
+                    output(15 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
                 }
             }
             else if (value instanceof Uint8Array) {
@@ -9342,7 +10098,13 @@
                     buf += String.fromCharCode(c);
                 }
                 const out = btoa(buf).replace(/=+$/, '');
-                output(19 /* TypeIds.Uint8Array */, out);
+                output(18 /* TypeIds.Uint8Array */, out);
+            }
+            else if (value instanceof SerializationWeakRef) {
+                const forwardRefId = forwardRefsId++;
+                s11nWeakRefs.set(value.$obj$, forwardRefId);
+                forwardRefs[forwardRefId] = -1;
+                output(2 /* TypeIds.ForwardRef */, forwardRefId);
             }
             else if (vnode_isVNode(value)) {
                 output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
@@ -9367,21 +10129,20 @@
         }
         const outputRoots = async () => {
             $writer$.write('[');
-            let lastRootsLength = 0;
             let rootsLength = serializationContext.$roots$.length;
-            while (lastRootsLength < rootsLength || promises.size) {
-                if (lastRootsLength !== 0) {
+            while (rootIdx < rootsLength || promises.size) {
+                if (rootIdx !== 0) {
                     $writer$.write(',');
                 }
                 let separator = false;
-                for (let i = lastRootsLength; i < rootsLength; i++) {
+                for (; rootIdx < rootsLength; rootIdx++) {
                     if (separator) {
                         $writer$.write(',');
                     }
                     else {
                         separator = true;
                     }
-                    writeValue(serializationContext.$roots$[i]);
+                    writeValue(serializationContext.$roots$[rootIdx]);
                 }
                 if (promises.size) {
                     try {
@@ -9391,12 +10152,11 @@
                         // ignore rejections, they will be serialized as rejected promises
                     }
                 }
-                lastRootsLength = rootsLength;
                 rootsLength = serializationContext.$roots$.length;
             }
             if (forwardRefs.length) {
                 $writer$.write(',');
-                $writer$.write(2 /* TypeIds.ForwardRefs */ + ',');
+                $writer$.write(13 /* TypeIds.ForwardRefs */ + ',');
                 outputArray(forwardRefs, (value) => {
                     $writer$.write(String(value));
                 });
@@ -9545,12 +10305,12 @@
         return output;
     }
     function deserializeData(container, typeId, value) {
-        if (typeId === undefined) {
+        if (typeId === 0 /* TypeIds.Plain */) {
             return value;
         }
-        let propValue = allocate(container, typeId, value);
-        if (typeId >= 14 /* TypeIds.Error */) {
-            propValue = inflate(container, propValue, typeId, value);
+        const propValue = allocate(container, typeId, value);
+        if (needsInflation(typeId)) {
+            inflate(container, propValue, typeId, value);
         }
         return propValue;
     }
@@ -9573,7 +10333,7 @@
             $storeProxyMap$: new WeakMap(),
             element: null,
             $forwardRefs$: null,
-            $initialQRLsIndexes$: null,
+            $initialQRLs$: null,
             $scheduler$: null,
         };
         preprocessState(stateData, container);
@@ -9633,18 +10393,18 @@
      */
     function preprocessState(data, container) {
         const isRootDeepRef = (type, value) => {
-            return type === 0 /* TypeIds.RootRef */ && typeof value === 'string';
+            return type === 1 /* TypeIds.RootRef */ && typeof value === 'string';
         };
         const isForwardRefsMap = (type) => {
-            return type === 2 /* TypeIds.ForwardRefs */;
+            return type === 13 /* TypeIds.ForwardRefs */;
         };
         const isPreloadQrlType = (type) => {
-            return type === 21 /* TypeIds.PreloadQRL */;
+            return type === 20 /* TypeIds.PreloadQRL */;
         };
         const processRootRef = (index) => {
             const rootRefPath = data[index + 1].split(' ');
             let object = data;
-            let objectType = 0 /* TypeIds.RootRef */;
+            let objectType = 1 /* TypeIds.RootRef */;
             let typeIndex = 0;
             let valueIndex = 0;
             let parent = null;
@@ -9654,7 +10414,7 @@
                 valueIndex = typeIndex + 1;
                 objectType = object[typeIndex];
                 object = object[valueIndex];
-                if (objectType === 0 /* TypeIds.RootRef */) {
+                if (objectType === 1 /* TypeIds.RootRef */) {
                     const rootRef = object;
                     const rootRefTypeIndex = rootRef * 2;
                     objectType = data[rootRefTypeIndex];
@@ -9662,7 +10422,7 @@
                 }
             }
             if (parent) {
-                parent[typeIndex] = 0 /* TypeIds.RootRef */;
+                parent[typeIndex] = 1 /* TypeIds.RootRef */;
                 parent[valueIndex] = index / 2;
             }
             data[index] = objectType;
@@ -9676,8 +10436,8 @@
                 container.$forwardRefs$ = data[i + 1];
             }
             else if (isPreloadQrlType(data[i])) {
-                container.$initialQRLsIndexes$ ||= [];
-                container.$initialQRLsIndexes$.push(i / 2);
+                const qrl = data[i + 1];
+                (container.$initialQRLs$ ||= []).push(qrl);
             }
         }
     }
@@ -9697,7 +10457,7 @@
         return (
         // THINK: Not sure if we need to keep track of functions (QRLs) Let's skip them for now.
         // and see if we have a test case which requires them.
-        (typeof obj === 'object' && obj !== null) ||
+        isObject(obj) ||
             /**
              * We track all strings greater than 1 character, because those take at least 6 bytes to encode
              * and even with 999 root objects it saves one byte per reference. Tracking more objects makes
@@ -9725,9 +10485,7 @@
         return '__brand' in value && value.__brand === 'resource';
     }
     const frameworkType = (obj) => {
-        return ((typeof obj === 'object' &&
-            obj !== null &&
-            (obj instanceof SignalImpl || obj instanceof Task || isJSXNode(obj))) ||
+        return ((isObject(obj) && (obj instanceof SignalImpl || obj instanceof Task || isJSXNode(obj))) ||
             isQrl(obj));
     };
     const canSerialize = (value, seen = new WeakSet()) => {
@@ -9813,17 +10571,19 @@
                 return true;
             }
         }
+        else if (value === _UNINITIALIZED) {
+            return true;
+        }
         return false;
     };
     const QRL_RUNTIME_CHUNK = 'mock-chunk';
     const _typeIdNames = [
+        'Plain',
         'RootRef',
         'ForwardRef',
-        'ForwardRefs',
         'Constant',
-        'Number',
-        'String',
         'Array',
+        'Object',
         'URL',
         'Date',
         'Regex',
@@ -9831,8 +10591,8 @@
         'RefVNode',
         'BigInt',
         'URLSearchParams',
+        'ForwardRefs',
         'Error',
-        'Object',
         'Promise',
         'Set',
         'Map',
@@ -9848,16 +10608,15 @@
         'AsyncComputedSignal',
         'SerializerSignal',
         'Store',
-        'StoreArray',
         'FormData',
         'JSXNode',
         'PropsProxy',
-        'EffectData',
+        'SubscriptionData',
     ];
     const circularProofJson = (obj, indent) => {
         const seen = new WeakSet();
-        return JSON.stringify(obj, (key, value) => {
-            if (typeof value === 'object' && value !== null) {
+        return JSON.stringify(obj, (_, value) => {
+            if (isObject(value)) {
                 if (seen.has(value)) {
                     return `[Circular ${value.constructor.name}]`;
                 }
@@ -9892,9 +10651,15 @@
             }
             const key = state[i];
             let value = state[++i];
-            if (key === undefined) {
-                hasRaw = true;
-                out.push(`${RED}[raw${typeof value === 'object' && value ? ` ${value.constructor.name}` : ''}]${RESET} ${printRaw(value, `${prefix}  `)}`);
+            if (key === 0 /* TypeIds.Plain */) {
+                const isRaw = typeof value !== 'number' && typeof value !== 'string';
+                if (isRaw) {
+                    hasRaw = true;
+                }
+                const type = isRaw
+                    ? `[raw${isObject(value) ? ` ${value.constructor.name}` : ''}]`
+                    : typeIdToName(key);
+                out.push(`${RED}${type}${RESET} ${printRaw(value, `${prefix}  `)}`);
             }
             else {
                 if (key === 3 /* TypeIds.Constant */) {
@@ -9906,7 +10671,7 @@
                         value = value.slice(0, 120) + '"...';
                     }
                 }
-                else if (key === 2 /* TypeIds.ForwardRefs */) {
+                else if (key === 13 /* TypeIds.ForwardRefs */) {
                     value = '[' + `\n${prefix}  ${value.join(`\n${prefix}  `)}\n${prefix}]`;
                 }
                 else if (Array.isArray(value)) {
@@ -10008,7 +10773,6 @@
         return value;
     };
     const noSerializeSet = /*#__PURE__*/ new WeakSet();
-    const weakSerializeSet = /*#__PURE__*/ new WeakSet();
     const shouldSerialize = (obj) => {
         if (isObject(obj) || isFunction(obj)) {
             return !noSerializeSet.has(obj);
@@ -10017,7 +10781,7 @@
     };
     const fastSkipSerialize = (obj) => {
         return (obj &&
-            (typeof obj === 'object' || typeof obj === 'function') &&
+            (isObject(obj) || typeof obj === 'function') &&
             (NoSerializeSymbol in obj || noSerializeSet.has(obj)));
     };
     // <docs markdown="../../readme.md#noSerialize">
@@ -10042,16 +10806,11 @@
     // </docs>
     const noSerialize = (input) => {
         // only add supported values to the noSerializeSet, prevent console errors
-        if ((typeof input === 'object' && input !== null) || typeof input === 'function') {
+        if ((isObject(input) && input !== null) || typeof input === 'function') {
             noSerializeSet.add(input);
         }
         return input;
     };
-    /** @internal */
-    const _weakSerialize = (input) => {
-        weakSerializeSet.add(input);
-        return input;
-    };
     /**
      * If an object has this property, it will not be serialized. Use this on prototypes to avoid having
      * to call `noSerialize()` on every object.
@@ -10078,6 +10837,7 @@
     const SerializerSymbol = Symbol('serialize');
 
     // keep these imports above the rest to prevent circular dep issues
+    const resolvedSymbol = Symbol('resolved');
     const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         if (qDev && qSerialize) {
             if (captureRef) {
@@ -10130,9 +10890,6 @@
             };
             return bound;
         }
-        const resolveLazy = (containerEl) => {
-            return symbolRef !== null ? symbolRef : resolve(containerEl);
-        };
         // Wrap functions to provide their lexical scope
         const wrapFn = (fn) => {
             if (typeof fn !== 'function' || (!capture?.length && !captureRef?.length)) {
@@ -10161,45 +10918,58 @@
                 return invoke.call(this, context, fn, ...args);
             };
         };
-        const resolve = async (containerEl) => {
-            if (symbolRef !== null) {
-                // Resolving (Promise) or already resolved (value)
+        // Retrieve memoized result from symbolFn
+        if (symbolFn && resolvedSymbol in symbolFn) {
+            symbolRef = symbolFn[resolvedSymbol];
+        }
+        const resolve = symbolRef
+            ? async () => symbolRef
+            : async (containerEl) => {
+                if (symbolRef !== null) {
+                    // Resolving (Promise) or already resolved (value)
+                    return symbolRef;
+                }
+                if (containerEl) {
+                    setContainer(containerEl);
+                }
+                if (chunk === '') {
+                    // Sync QRL
+                    assertDefined(_containerEl, 'Sync QRL must have container element');
+                    const hash = _containerEl.getAttribute(QInstanceAttr);
+                    const doc = _containerEl.ownerDocument;
+                    const qFuncs = getQFuncs(doc, hash);
+                    // No need to wrap, syncQRLs can't have captured scope
+                    return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
+                }
+                if (build.isBrowser && chunk) {
+                    /** We run the QRL, so now the probability of the chunk is 100% */
+                    preloader.p(chunk, 1);
+                }
+                const start = now();
+                const ctx = tryGetInvokeContext();
+                if (symbolFn !== null) {
+                    symbolRef = symbolFn().then((module) => {
+                        const resolved = wrapFn((symbolRef = module[symbol]));
+                        // We memoize the result on the symbolFn
+                        symbolFn[resolvedSymbol] = resolved;
+                        qrl.resolved = resolved;
+                        return resolved;
+                    });
+                }
+                else {
+                    // TODO cache the imported symbol but watch out for dev mode
+                    const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
+                    symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
+                }
+                if (isPromise(symbolRef)) {
+                    symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
+                        console.error(`qrl ${symbol} failed to load`, err);
+                        // We shouldn't cache rejections, we can try again later
+                        symbolRef = null;
+                    });
+                }
                 return symbolRef;
-            }
-            if (containerEl) {
-                setContainer(containerEl);
-            }
-            if (chunk === '') {
-                // Sync QRL
-                assertDefined(_containerEl, 'Sync QRL must have container element');
-                const hash = _containerEl.getAttribute(QInstanceAttr);
-                const doc = _containerEl.ownerDocument;
-                const qFuncs = getQFuncs(doc, hash);
-                // No need to wrap, syncQRLs can't have captured scope
-                return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
-            }
-            if (build.isBrowser && chunk) {
-                /** We run the QRL, so now the probability of the chunk is 100% */
-                preloader.p(chunk, 1);
-            }
-            const start = now();
-            const ctx = tryGetInvokeContext();
-            if (symbolFn !== null) {
-                symbolRef = symbolFn().then((module) => (qrl.resolved = wrapFn((symbolRef = module[symbol]))));
-            }
-            else {
-                const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-                symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
-            }
-            if (typeof symbolRef === 'object' && isPromise(symbolRef)) {
-                symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
-                    console.error(`qrl ${symbol} failed to load`, err);
-                    // We shouldn't cache rejections, we can try again later
-                    symbolRef = null;
-                });
-            }
-            return symbolRef;
-        };
+            };
         const createOrReuseInvocationContext = (invoke) => {
             if (invoke == null) {
                 return newInvokeContext();
@@ -10217,7 +10987,6 @@
             getHash: () => hash,
             getCaptured: () => captureRef,
             resolve,
-            $resolveLazy$: resolveLazy,
             $setContainer$: setContainer,
             $chunk$: chunk,
             $symbol$: symbol,
@@ -10518,7 +11287,7 @@
         container.$serverData$ = opts.serverData || {};
         const host = container.rootVNode;
         container.$scheduler$(4 /* ChoreType.NODE_DIFF */, host, host, jsxNode);
-        await container.$scheduler$(255 /* ChoreType.WAIT_FOR_ALL */);
+        await container.$scheduler$(255 /* ChoreType.WAIT_FOR_QUEUE */).$returnValue$;
         return {
             cleanup: () => {
                 cleanup(container, container.rootVNode);
@@ -11058,13 +11827,13 @@
         const styleId = styleKey(styleQrl, i);
         const host = iCtx.$hostElement$;
         set(styleId);
-        const value = styleQrl.$resolveLazy$(iCtx.$element$);
-        if (isPromise(value)) {
-            value.then((val) => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
-            throw value;
+        if (styleQrl.resolved) {
+            iCtx.$container$.$appendStyle$(transform(styleQrl.resolved, styleId), styleId, host, scoped);
         }
         else {
-            iCtx.$container$.$appendStyle$(transform(value, styleId), styleId, host, scoped);
+            throw styleQrl
+                .resolve()
+                .then((val) => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
         }
         return styleId;
     };
@@ -11245,13 +12014,13 @@
         return set(value);
     };
 
-    const useComputedCommon = (qrl, Class) => {
+    const useComputedCommon = (qrl, createFn, options) => {
         const { val, set } = useSequentialScope();
         if (val) {
             return val;
         }
         assertQrl(qrl);
-        const signal = new Class(null, qrl);
+        const signal = createFn(qrl, options);
         set(signal);
         // Note that we first save the signal
         // and then we throw to load the qrl
@@ -11260,8 +12029,8 @@
         return signal;
     };
     /** @internal */
-    const useComputedQrl = (qrl) => {
-        return useComputedCommon(qrl, ComputedSignalImpl);
+    const useComputedQrl = (qrl, options) => {
+        return useComputedCommon(qrl, createComputedSignal, options);
     };
     /**
      * Creates a computed signal which is calculated from the given function. A computed signal is a
@@ -11276,7 +12045,7 @@
     const useComputed$ = implicit$FirstArg(useComputedQrl);
 
     /** @internal */
-    const useSerializerQrl = (qrl) => useComputedCommon(qrl, SerializerSignalImpl);
+    const useSerializerQrl = (qrl) => useComputedCommon(qrl, createSerializerSignal);
     /**
      * Creates a signal which holds a custom serializable value. It requires that the value implements
      * the `CustomSerializable` type, which means having a function under the `[SerializeSymbol]`
@@ -11355,8 +12124,8 @@
         set(task);
         useRunTask(task, eagerness);
         if (!isServerPlatform()) {
-            qrl.$resolveLazy$(iCtx.$element$);
-            iCtx.$container$.$scheduler$(32 /* ChoreType.VISIBLE */, task);
+            qrl.resolve(iCtx.$element$);
+            iCtx.$container$.$scheduler$(16 /* ChoreType.VISIBLE */, task);
         }
     };
     const useRunTask = (task, eagerness) => {
@@ -11531,8 +12300,8 @@
     const useVisibleTask$ = /*#__PURE__*/ implicit$FirstArg(useVisibleTaskQrl);
 
     /** @internal */
-    const useAsyncComputedQrl = (qrl) => {
-        return useComputedCommon(qrl, AsyncComputedSignalImpl);
+    const useAsyncComputedQrl = (qrl, options) => {
+        return useComputedCommon(qrl, createAsyncComputedSignal, options);
     };
     /**
      * Creates a computed signal which is calculated from the given function. A computed signal is a
@@ -11585,7 +12354,7 @@
             // the file 'qwik-prefetch-service-worker.js' is not located in /build/
             resolvedOpts.path = baseUrl + resolvedOpts.path;
         }
-        let code = PREFETCH_CODE.replace("'_URL_'", JSON.stringify(resolvedOpts.path));
+        let code = PREFETCH_CODE.replace('"_URL_"', JSON.stringify(resolvedOpts.path.split('/').pop()));
         if (!build.isDev) {
             // consecutive spaces are indentation
             code = code.replaceAll(/\s\s+/gm, '');
@@ -11615,6 +12384,17 @@
                 });
             });
         }
+        if ('caches' in window) {
+            caches
+                .keys()
+                .then((names) => {
+                const cacheName = names.find((name) => name.startsWith('QwikBundles'));
+                if (cacheName) {
+                    caches.delete(cacheName).catch(console.error);
+                }
+            })
+                .catch(console.error);
+        }
     }).toString();
     /**
      * @deprecated This is no longer needed as the preloading happens automatically in qrl-class. You
@@ -11623,6 +12403,16 @@
      */
     const PrefetchGraph = (_opts = {}) => null;
 
+    //////////////////////////////////////////////////////////////////////////////////////////
+    // Protect against duplicate imports
+    //////////////////////////////////////////////////////////////////////////////////////////
+    if (globalThis.__qwik) {
+        console.error(`==============================================\n` +
+            `Qwik version ${globalThis.__qwik} already imported while importing ${version}. Verify external vs bundled imports etc. This can lead to issues due to duplicated shared structures.\n` +
+            `==============================================\n`);
+    }
+    globalThis.__qwik = version;
+
     Object.defineProperty(exports, "isBrowser", {
         enumerable: true,
         get: function () { return build.isBrowser; }
@@ -11656,41 +12446,63 @@
     exports._IMMUTABLE = _IMMUTABLE;
     exports._SharedContainer = _SharedContainer;
     exports._SubscriptionData = SubscriptionData;
+    exports._UNINITIALIZED = _UNINITIALIZED;
     exports._VAR_PROPS = _VAR_PROPS;
     exports._deserialize = _deserialize;
     exports._dumpState = dumpState;
     exports._fnSignal = _fnSignal;
+    exports._getConstProps = _getConstProps;
+    exports._getContextContainer = _getContextContainer;
     exports._getContextElement = _getContextElement;
     exports._getContextEvent = _getContextEvent;
     exports._getDomContainer = getDomContainer;
     exports._getQContainerElement = _getQContainerElement;
+    exports._getVarProps = _getVarProps;
+    exports._hasStoreEffects = _hasStoreEffects;
     exports._isJSXNode = isJSXNode;
+    exports._isStore = isStore;
     exports._isStringifiable = isStringifiable;
+    exports._isTask = isTask;
     exports._jsxBranch = _jsxBranch;
     exports._jsxC = _jsxC;
     exports._jsxQ = _jsxQ;
     exports._jsxS = _jsxS;
     exports._jsxSorted = _jsxSorted;
     exports._jsxSplit = _jsxSplit;
+    exports._mapApp_findIndx = mapApp_findIndx;
+    exports._mapArray_get = mapArray_get;
+    exports._mapArray_set = mapArray_set;
     exports._noopQrl = _noopQrl;
     exports._noopQrlDEV = _noopQrlDEV;
     exports._preprocessState = preprocessState;
     exports._qrlSync = _qrlSync;
     exports._regSymbol = _regSymbol;
+    exports._resolveContextWithoutSequentialScope = _resolveContextWithoutSequentialScope;
     exports._restProps = _restProps;
-    exports._run = queueQRL;
+    exports._run = _run;
+    exports._serializationWeakRef = _serializationWeakRef;
     exports._serialize = _serialize;
     exports._task = scheduleTask;
     exports._verifySerializable = verifySerializable;
+    exports._vnode_ensureElementInflated = vnode_ensureElementInflated;
+    exports._vnode_getAttr = vnode_getAttr;
+    exports._vnode_getAttrKeys = vnode_getAttrKeys;
+    exports._vnode_getFirstChild = vnode_getFirstChild;
+    exports._vnode_getNextSibling = vnode_getNextSibling;
+    exports._vnode_getPropStartIndex = vnode_getPropStartIndex;
+    exports._vnode_getProps = vnode_getProps;
+    exports._vnode_isMaterialized = vnode_isMaterialized;
+    exports._vnode_isTextVNode = vnode_isTextVNode;
+    exports._vnode_isVirtualVNode = vnode_isVirtualVNode;
     exports._vnode_toString = vnode_toString;
     exports._waitUntilRendered = _waitUntilRendered;
     exports._walkJSX = _walkJSX;
-    exports._weakSerialize = _weakSerialize;
     exports._wrapProp = _wrapProp;
     exports._wrapSignal = _wrapSignal;
-    exports._wrapStore = _wrapStore;
     exports.component$ = component$;
     exports.componentQrl = componentQrl;
+    exports.createAsyncComputed$ = createAsyncComputed$;
+    exports.createAsyncComputedQrl = createAsyncComputedSignal;
     exports.createComputed$ = createComputed$;
     exports.createComputedQrl = createComputedSignal;
     exports.createContextId = createContextId;
@@ -11700,6 +12512,7 @@
     exports.createSignal = createSignal;
     exports.event$ = event$;
     exports.eventQrl = eventQrl;
+    exports.forceStoreEffects = forceStoreEffects;
     exports.getDomContainer = getDomContainer;
     exports.getLocale = getLocale;
     exports.getPlatform = getPlatform;