@qwik.dev/core 2.0.0-beta.36 → 2.0.0-beta.38

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.36-dev+3268fab
+ * @qwik.dev/core 2.0.0-beta.38-dev+0339f17
  * 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
@@ -225,13 +225,16 @@ const codeToText = (code, ...parts) => {
             'Unknown vnode type {{0}}.', // 26
             'Materialize error: missing element: {{0}} {{1}} {{2}}', // 27
             'Cannot coerce a Signal, use `.value` instead', // 28
-            'useComputed$ QRL {{0}} {{1}} cannot return a Promise', // 29
+            '', // 29 (cleared: useComputed$ now supports async functions)
             '===\nQwik version {{0}} already imported while importing {{1}}.\nThis can lead to issues due to duplicated shared structures.\nVerify that the Qwik libraries you\'re using are in "resolve.noExternal[]" and in "optimizeDeps.exclude".\n===\n', // 30
             'WrappedSignal is read-only', // 31
             'Attribute value is unsafe for SSR {{0}}', // 32
             'SerializerSymbol function returned rejected promise', // 33
             'Serialization Error: Cannot serialize function: {{0}}', // 34
             'Cannot read .value of a clientOnly async signal during SSR. Use .loading to check state, or provide an initial value.', // 35
+            'Invalid element name for SSR {{0}}', // 36
+            'Invalid serialized Promise dependency', // 37
+            'Invalid serialized Uint8Array payload', // 38
         ];
         let text = MAP[code] ?? '';
         if (parts.length) {
@@ -428,6 +431,7 @@ const QBaseAttr = 'q:base';
 const QLocaleAttr = 'q:locale';
 const QManifestHashAttr = 'q:manifest-hash';
 const QInstanceAttr = 'q:instance';
+const QStatePrewarmAttr = 'q:prewarm';
 const QContainerIsland = 'q:container-island';
 const QContainerIslandEnd = '/' + QContainerIsland;
 const QIgnore = 'q:ignore';
@@ -465,6 +469,7 @@ const QDefaultSlot = '';
 const ELEMENT_ID = 'q:id';
 const ELEMENT_KEY = 'q:key';
 const ELEMENT_PROPS = 'q:props';
+/** @internal */
 const ELEMENT_SEQ = 'q:seq';
 const ELEMENT_SEQ_IDX = 'q:seqIdx';
 const ITERATION_ITEM_SINGLE = 'q:p'; // Single iteration parameter (not an array)
@@ -504,6 +509,12 @@ const maybeThen = (valueOrPromise, thenFn) => {
         ? valueOrPromise.then(thenFn)
         : thenFn(valueOrPromise);
 };
+/** @internal */
+const delay = (timeout) => {
+    return new Promise((resolve) => {
+        setTimeout(resolve, timeout);
+    });
+};
 const checkError = (e) => {
     if (isServer && e instanceof ReferenceError && e.message.includes('window')) {
         e.message = 'It seems like you forgot to add "if (isBrowser) {...}" here:' + e.message;
@@ -515,6 +526,8 @@ const justThrow = (e) => {
 /**
  * Retries a function that throws a promise. If you pass `onError`, you're responsible for handling
  * errors.
+ *
+ * @internal
  */
 function retryOnPromise(fn, onError = justThrow) {
     let ok = false;
@@ -833,8 +846,21 @@ const createMacroTask = (fn) => {
     let macroTask;
     if (typeof MessageChannel !== 'undefined') {
         const channel = new MessageChannel();
+        let active = true;
         channel.port1.onmessage = () => fn();
-        macroTask = () => channel.port2.postMessage(null);
+        macroTask = () => {
+            if (active) {
+                channel.port2.postMessage(null);
+            }
+        };
+        macroTask.$destroy$ = () => {
+            if (active) {
+                active = false;
+                channel.port1.onmessage = null;
+                channel.port1.close();
+                channel.port2.close();
+            }
+        };
     }
     else {
         macroTask = () => setTimeout(fn);
@@ -954,7 +980,7 @@ const rel = isBrowser && doc.createElement('link').relList?.supports?.('modulepr
     ? 'modulePreload'
     : 'preload';
 const isJSRegex = /\.[mc]?js$/;
-const yieldInterval = 1000 / 60;
+const yieldInterval = 10;
 
 const BundleImportState_None = 0;
 const BundleImportState_Preload = 2;
@@ -1210,6 +1236,8 @@ const writeStringRootRef = (writer, id) => writer.write(String(id));
 /** @internal */
 const writeStringRootRefPath = (writer, path) => writer.write(stringifyRootRefPath(path));
 /** @internal */
+const writeStringRootRefDelta = (writer, id, base) => writer.write(String(id - base));
+/** @internal */
 const createStringStreamWriter = (write) => ({
     write,
     writeRootRef(id) {
@@ -1218,6 +1246,9 @@ const createStringStreamWriter = (write) => ({
     writeRootRefPath(path) {
         return writeStringRootRefPath(this, path);
     },
+    writeRootRefDelta(id, base) {
+        return writeStringRootRefDelta(this, id, base);
+    },
 });
 
 // Pre-allocated common strings to reduce allocation overhead
@@ -1233,7 +1264,7 @@ const COMMA = ',';
  *
  * @public
  */
-const version = "2.0.0-beta.36-dev+3268fab";
+const version = "2.0.0-beta.38-dev+0339f17";
 
 const isNode = (value) => {
     return value && typeof value.nodeType === 'number';
@@ -1689,9 +1720,12 @@ function setCursorPosition(container, cursorData, position) {
     }
 }
 function mergeCursors(container, newCursorData, oldCursor) {
+    const oldCursorData = getCursorData(oldCursor);
+    if (!oldCursorData || oldCursorData === newCursorData) {
+        return;
+    }
     // delete from global cursors queue
     removeCursorFromQueue(oldCursor, container);
-    const oldCursorData = getCursorData(oldCursor);
     mergeCursorData(newCursorData, oldCursorData);
 }
 function mergeCursorData(newCursorData, oldCursorData) {
@@ -1769,6 +1803,234 @@ function setCursorData(vNode, cursorData) {
     cursorDatas.set(vNode, cursorData);
 }
 
+/** @internal */
+const _CONST_PROPS = Symbol('CONST');
+/** @internal */
+const _VAR_PROPS = Symbol('VAR');
+/** @internal */
+const _OWNER = Symbol('OWNER');
+/** @internal */
+const _PROPS_HANDLER = Symbol('PROPS_HANDLER');
+/** @internal @deprecated v1 compat */
+const _IMMUTABLE = Symbol('IMMUTABLE');
+/** @internal */
+const _UNINITIALIZED = Symbol('UNINITIALIZED');
+
+/** @internal */
+const EMPTY_ARRAY = [];
+/** @internal */
+const EMPTY_OBJ = {};
+Object.freeze(EMPTY_ARRAY);
+Object.freeze(EMPTY_OBJ);
+
+function createPropsProxy(owner) {
+    // TODO don't make a proxy but populate getters? benchmark
+    return new Proxy({}, new PropsProxyHandler(owner));
+}
+class PropsProxyHandler {
+    owner;
+    $effects$ = undefined;
+    $container$ = null;
+    constructor(owner) {
+        this.owner = owner;
+    }
+    get(_, prop) {
+        // escape hatch to get the separated props from a component
+        if (prop === _CONST_PROPS) {
+            return this.owner.constProps;
+        }
+        else if (prop === _VAR_PROPS) {
+            return this.owner.varProps;
+        }
+        else if (prop === _OWNER) {
+            return this.owner;
+        }
+        else if (prop === _PROPS_HANDLER) {
+            return this;
+        }
+        let value;
+        if (prop === 'children') {
+            value = this.owner.children;
+        }
+        else {
+            if (typeof prop === 'string' && typeof this.owner.type === 'string') {
+                const attr = jsxEventToHtmlAttribute(prop);
+                if (attr) {
+                    prop = attr;
+                }
+            }
+            value = directGetPropsProxyProp(this.owner, prop);
+            if (prop in this.owner.varProps) {
+                addPropsProxyEffect(this, prop);
+            }
+        }
+        // a proxied value that the optimizer made
+        return value instanceof WrappedSignalImpl ? value.value : value;
+    }
+    set(_, prop, value) {
+        if (prop === _OWNER) {
+            // used for deserialization
+            this.owner = value;
+        }
+        else if (prop === 'children') {
+            this.owner.children = value;
+        }
+        else if (prop === _CONST_PROPS) {
+            this.owner.constProps = value;
+        }
+        else if (prop === _VAR_PROPS) {
+            this.owner.varProps = value;
+        }
+        else {
+            if (typeof prop === 'string' && typeof this.owner.type === 'string') {
+                const attr = jsxEventToHtmlAttribute(prop);
+                if (attr) {
+                    prop = attr;
+                }
+            }
+            if (this.owner.constProps && prop in this.owner.constProps) {
+                // delete the prop from the const props first
+                delete this.owner.constProps[prop];
+            }
+            if (this.owner.varProps === EMPTY_OBJ) {
+                this.owner.varProps = {};
+            }
+            else if (!(prop in this.owner.varProps)) {
+                this.owner.toSort = true;
+            }
+            if (this.owner.varProps[prop] !== value) {
+                this.owner.varProps[prop] = value;
+                triggerPropsProxyEffect(this, prop);
+            }
+        }
+        return true;
+    }
+    deleteProperty(_, prop) {
+        let didDelete = delete this.owner.varProps[prop];
+        if (didDelete) {
+            triggerPropsProxyEffect(this, prop);
+        }
+        if (this.owner.constProps) {
+            didDelete = delete this.owner.constProps[prop] || didDelete;
+        }
+        if (this.owner.children != null && prop === 'children') {
+            this.owner.children = null;
+            didDelete = true;
+        }
+        return didDelete;
+    }
+    has(_, prop) {
+        if (prop === 'children') {
+            return this.owner.children != null;
+        }
+        else if (prop === _CONST_PROPS || prop === _VAR_PROPS) {
+            return true;
+        }
+        const inVarProps = prop in this.owner.varProps;
+        if (typeof prop === 'string') {
+            if (inVarProps) {
+                addPropsProxyEffect(this, prop);
+            }
+            if (typeof this.owner.type === 'string') {
+                const attr = jsxEventToHtmlAttribute(prop);
+                if (attr) {
+                    prop = attr;
+                }
+            }
+        }
+        return inVarProps || (this.owner.constProps ? prop in this.owner.constProps : false);
+    }
+    getOwnPropertyDescriptor(_, p) {
+        const value = p === 'children'
+            ? this.owner.children
+            : this.owner.constProps && p in this.owner.constProps
+                ? this.owner.constProps[p]
+                : this.owner.varProps[p];
+        return {
+            configurable: true,
+            enumerable: true,
+            value: value,
+        };
+    }
+    ownKeys() {
+        const out = Object.keys(this.owner.varProps);
+        if (this.owner.children != null) {
+            out.push('children');
+        }
+        if (this.owner.constProps) {
+            for (const key in this.owner.constProps) {
+                if (out.indexOf(key) === -1) {
+                    out.push(key);
+                }
+            }
+        }
+        return out;
+    }
+}
+const addPropsProxyEffect = (propsProxy, prop) => {
+    // Lazily grab the container from the invoke context
+    const ctx = tryGetInvokeContext();
+    if (ctx) {
+        if (propsProxy.$container$ === null) {
+            if (ctx.$container$) {
+                propsProxy.$container$ = ctx.$container$;
+            }
+        }
+        else {
+            isDev &&
+                assertTrue(!ctx.$container$ || ctx.$container$ === propsProxy.$container$, 'Do not use props across containers');
+        }
+    }
+    const effectSubscriber = ctx?.$effectSubscriber$;
+    if (effectSubscriber) {
+        addStoreEffect(propsProxy.owner._proxy, prop, propsProxy, effectSubscriber);
+    }
+};
+const triggerPropsProxyEffect = (propsProxy, prop) => {
+    const effects = getEffects$1(propsProxy.$effects$, prop);
+    if (effects) {
+        scheduleEffects(propsProxy.$container$, propsProxy, effects);
+    }
+    return !!effects;
+};
+function getEffects$1(effects, prop) {
+    // TODO: Handle STORE_ALL_PROPS
+    return effects?.get(prop);
+}
+/**
+ * Instead of using PropsProxyHandler getter (which could create a component-level subscription).
+ * Use this function to get the props directly from a const or var props.
+ *
+ * This does not convert jsx event names.
+ */
+const directGetPropsProxyProp = (jsx, prop) => {
+    return (jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop]);
+};
+const _getProps = (props, prop) => {
+    return _getVarProps(props)?.[prop] || _getConstProps(props)?.[prop] || null;
+};
+/** Used by the optimizer for spread props operations @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;
+};
+/** Used by the optimizer for spread props operations @internal */
+const _getConstProps = (props) => {
+    if (!props) {
+        return null;
+    }
+    return _CONST_PROPS in props ? props[_CONST_PROPS] : null;
+};
+const isPropsProxy = (obj) => {
+    return obj && _VAR_PROPS in obj;
+};
+
 /**
  * # ================================
  *
@@ -1840,6 +2102,7 @@ const STORE_TARGET = Symbol('store.target');
 const STORE_HANDLER = Symbol('store.handler');
 const STORE_ALL_PROPS = Symbol('store.all');
 
+/** @internal */
 function getSubscriber(effect, prop, data) {
     if (!effect[_EFFECT_BACK_REF]) {
         if (isServer && isSsrNode(effect)) {
@@ -2007,7 +2270,7 @@ class SignalImpl {
     toString() {
         if (isDev) {
             try {
-                return (`[${this.constructor.name}${this.$flags$ & 1 /* SignalFlags.INVALID */ ? ' INVALID' : ''} ${this.$untrackedValue$}]` +
+                return (`[${this.constructor.name}${this.$flags$ & 1 /* ComputedSignalFlags.INVALID */ ? ' INVALID' : ''} ${this.$untrackedValue$}]` +
                     (Array.from(this.$effects$ || [])
                         .map((e) => '\n -> ' + pad(qwikDebugToString(e.consumer), '    '))
                         .join('\n') || ''));
@@ -2025,99 +2288,11 @@ class SignalImpl {
     }
 }
 
-const DEBUG$1 = false;
+const DEBUG = false;
 // eslint-disable-next-line no-console
-const log$1 = (...args) => console.log('COMPUTED SIGNAL', ...args.map(qwikDebugToString));
-/**
- * A signal which is computed from other signals.
- *
- * The value is available synchronously, but the computation is done lazily.
- */
-class ComputedSignalImpl extends SignalImpl {
-    /**
-     * The compute function is stored here.
-     *
-     * The computed functions must be executed synchronously (because of this we need to eagerly
-     * resolve the QRL during the mark dirty phase so that any call to it will be synchronous). )
-     */
-    $computeQrl$;
-    $flags$;
-    [_EFFECT_BACK_REF] = undefined;
-    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 */ |
-        16 /* 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 || tryGetInvokeContext()?.$container$, NEEDS_COMPUTATION);
-        this.$computeQrl$ = fn;
-        this.$flags$ = flags;
-    }
-    invalidate() {
-        this.$flags$ |= 1 /* SignalFlags.INVALID */;
-        const ctx = newInvokeContext();
-        ctx.$container$ = this.$container$ || undefined;
-        // @ts-expect-error it's confused about args any[] vs []
-        const running = retryOnPromise(invokeApply.bind(this, ctx, this.$computeIfNeeded$));
-        if (running) {
-            running.catch((err) => {
-                if (this.$container$) {
-                    this.$container$.handleError(err, null);
-                }
-                else {
-                    console.error('Error during computation', err);
-                }
-            });
-        }
-    }
-    get untrackedValue() {
-        this.$computeIfNeeded$();
-        isDev && assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
-        return this.$untrackedValue$;
-    }
-    set untrackedValue(value) {
-        this.$untrackedValue$ = value;
-    }
-    $computeIfNeeded$() {
-        if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-            return;
-        }
-        const computeQrl = this.$computeQrl$;
-        throwIfQRLNotResolved(computeQrl);
-        const ctx = tryGetInvokeContext();
-        const previousEffectSubscription = ctx?.$effectSubscriber$;
-        if (ctx) {
-            const effectSubscriber = getSubscriber(this, "." /* EffectProperty.VNODE */);
-            clearEffectSubscription(this.$container$, effectSubscriber);
-            ctx.$effectSubscriber$ = effectSubscriber;
-        }
-        try {
-            const untrackedValue = computeQrl.getFn(ctx)();
-            if (isPromise(untrackedValue)) {
-                throw qError(29 /* QError.computedNotSync */, [
-                    computeQrl.dev ? computeQrl.dev.file : '',
-                    computeQrl.$hash$,
-                ]);
-            }
-            DEBUG$1 && log$1('Signal.$compute$', untrackedValue);
-            this.$flags$ &= ~1 /* SignalFlags.INVALID */;
-            super.value = untrackedValue;
-        }
-        finally {
-            if (ctx) {
-                ctx.$effectSubscriber$ = previousEffectSubscription;
-            }
-        }
-    }
-}
-
-const DEBUG = false;
-const log = (...args) => 
-// eslint-disable-next-line no-console
-console.log('ASYNC COMPUTED SIGNAL', ...args.map(qwikDebugToString));
-/** Retains job metadata and also serves as the argument for the compute function */
-class AsyncJob {
+const log = (...args) => console.log('COMPUTED SIGNAL', ...args.map(qwikDebugToString));
+/** Retains job metadata and also serves as the argument for CTX_ARG compute functions */
+class Job {
     $signal$;
     /** First holds the compute promise and then the cleanup promise */
     $promise$ = null;
@@ -2139,7 +2314,7 @@ class AsyncJob {
     /** Backward compatible cache method for resource */
     cache() {
         isDev &&
-            console.error('useResource cache() method does not do anything. Use `useAsync$` instead of `useResource$`, use the `expires` option for polling behavior.');
+            console.error('useResource cache() method does not do anything. Use `useComputed$` instead of `useResource$`, use the `expires` option for polling behavior.');
     }
     get previous() {
         const val = this.$signal$.$untrackedValue$;
@@ -2154,46 +2329,57 @@ class AsyncJob {
     }
 }
 /**
- * # ================================
- *
- * AsyncSignalImpl
- *
- * # ================================
+ * A signal which is computed from other signals.
  *
- * @internal
+ * Sync compute functions resolve synchronously and every read they perform is auto-tracked. When
+ * the compute function turns out to be async (it returned a promise), the signal lazily switches on
+ * the async engine — jobs, `loading`, `error`, polling — giving it the same API as an AsyncSignal.
+ * Auto-tracking only covers reads before the first await point (the invoke context is lost after
+ * it); later reads must use the ComputeCtx `track()`.
  */
-class AsyncSignalImpl extends ComputedSignalImpl {
-    $untrackedLoading$ = false;
-    $untrackedError$ = undefined;
-    $current$ = null;
+// TODO when we make core lazy async, lazy load the async engine part of this class
+class ComputedSignalImpl extends SignalImpl {
+    /**
+     * The compute function is stored here.
+     *
+     * Sync computed functions must be executed synchronously (because of this we need to eagerly
+     * resolve the QRL during the mark dirty phase so that any call to it will be synchronous).
+     */
+    $computeQrl$;
+    $flags$;
     [_EFFECT_BACK_REF] = undefined;
-    constructor(container, fn, flags = 1 /* SignalFlags.INVALID */ |
+    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 /* ComputedSignalFlags.INVALID */ |
         16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */, options) {
-        super(container, fn, flags);
+        // 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 || tryGetInvokeContext()?.$container$, NEEDS_COMPUTATION);
+        this.$computeQrl$ = fn;
+        this.$flags$ = flags;
         if (!options) {
             return;
         }
-        // Handle initial value - eagerly evaluate if function, set $untrackedValue$ and $promiseValue$
-        // Do NOT call setValue() which would clear the INVALID flag and prevent async computation
+        // Eagerly evaluate an initial value without clearing INVALID, so the compute still runs
         const initial = options.initial;
         if (initial !== undefined) {
-            const initialValue = typeof initial === 'function' ? initial() : initial;
-            this.$untrackedValue$ = initialValue;
+            this.$untrackedValue$ = typeof initial === 'function' ? initial() : initial;
         }
         const concurrency = options.concurrency;
         if (concurrency !== undefined && concurrency >= 0 && concurrency !== 1) {
             this.$concurrency$ = concurrency;
             this.$jobs$ = [];
         }
-        const timeout = options.timeout;
-        if (timeout) {
-            this.$timeoutMs$ = timeout;
+        if (options.timeout) {
+            this.$timeoutMs$ = options.timeout;
         }
         if (options.eagerCleanup) {
             this.$flags$ |= 32 /* AsyncSignalFlags.EAGER_CLEANUP */;
         }
         if (options.clientOnly) {
-            this.$flags$ |= 64 /* AsyncSignalFlags.CLIENT_ONLY */;
+            // clientOnly can never resolve during SSR, so it must be async from the start
+            this.$flags$ |= 64 /* AsyncSignalFlags.CLIENT_ONLY */ | 512 /* AsyncSignalFlags.ASYNC_MODE */;
         }
         if (options.allowStale === false) {
             if (isDev && initial !== undefined) {
@@ -2210,28 +2396,30 @@ class AsyncSignalImpl extends ComputedSignalImpl {
             this.$flags$ |= 256 /* AsyncSignalFlags.NO_POLL */;
         }
     }
-    get untrackedValue() {
-        this.$computeIfNeeded$();
-        if (this.$current$?.$promise$) {
-            if (this.$untrackedValue$ === NEEDS_COMPUTATION || (qTest ? isServerPlatform() : isServer)) {
-                throw this.$current$?.$promise$;
-            }
-            return this.$untrackedValue$;
+    invalidate(info) {
+        if (arguments.length > 0) {
+            this.$info$ = info;
+            this.$infoVersion$ = this.$infoVersion$ === undefined ? 1 : this.$infoVersion$ + 1;
         }
-        if (this.$untrackedError$) {
-            throw this.$untrackedError$;
+        if (this.$flags$ & 512 /* AsyncSignalFlags.ASYNC_MODE */) {
+            this.$setInvalid$(true, this.$flags$ & 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */);
+            return;
         }
-        // For clientOnly signals without initial value during SSR, throw if trying to read value
-        // During SSR, clientOnly signals are skipped, so there's no computed value available
-        if ((qTest ? isServerPlatform() : isServer) &&
-            this.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */ &&
-            this.$untrackedValue$ === NEEDS_COMPUTATION) {
-            throw qError(35 /* QError.asyncClientOnlyValueDuringSSR */);
+        this.$flags$ |= 1 /* ComputedSignalFlags.INVALID */;
+        const ctx = newInvokeContext();
+        ctx.$container$ = this.$container$ || undefined;
+        // @ts-expect-error it's confused about args any[] vs []
+        const running = retryOnPromise(invokeApply.bind(this, ctx, this.$computeIfNeeded$));
+        if (isPromise(running)) {
+            running.catch((err) => {
+                if (this.$container$) {
+                    this.$container$.handleError(err, null);
+                }
+                else {
+                    console.error('Error during computation', err);
+                }
+            });
         }
-        return this.$untrackedValue$;
-    }
-    set untrackedValue(value) {
-        this.$untrackedValue$ = value;
     }
     /**
      * Read the value, subscribing if in a tracking context. Triggers computation if needed.
@@ -2248,32 +2436,65 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         return super.value;
     }
     set value(value) {
-        this.$flags$ &= -2 /* SignalFlags.INVALID */;
-        this.untrackedLoading = false;
+        this.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
         this.untrackedError = undefined;
-        this.$info$ = undefined;
-        // Prevent pending computations from overwriting this value
-        if (this.$jobs$) {
-            for (let i = 0; i < this.$jobs$.length; i++) {
-                this.$jobs$[i].$canWrite$ = false;
+        if (this.$flags$ & 512 /* AsyncSignalFlags.ASYNC_MODE */) {
+            this.untrackedPending = false;
+            this.$info$ = undefined;
+            // Prevent pending computations from overwriting this value
+            if (this.$jobs$) {
+                for (let i = 0; i < this.$jobs$.length; i++) {
+                    this.$jobs$[i].$canWrite$ = false;
+                }
             }
+            else if (this.$current$) {
+                this.$current$.$canWrite$ = false;
+            }
+            this.$clearNextPoll$();
+            super.value = value;
+            this.$scheduleNextPoll$();
+            return;
         }
-        else if (this.$current$) {
-            this.$current$.$canWrite$ = false;
-        }
-        this.$clearNextPoll$();
         super.value = value;
-        this.$scheduleNextPoll$();
+    }
+    get untrackedValue() {
+        this.$computeIfNeeded$();
+        if (this.$current$?.$promise$) {
+            if (this.$untrackedValue$ === NEEDS_COMPUTATION || (qTest ? isServerPlatform() : isServer)) {
+                throw this.$current$?.$promise$;
+            }
+            return this.$untrackedValue$;
+        }
+        if (this.$untrackedError$) {
+            throw this.$untrackedError$;
+        }
+        // For clientOnly signals without initial value during SSR, throw if trying to read value
+        // During SSR, clientOnly signals are skipped, so there's no computed value available
+        if ((qTest ? isServerPlatform() : isServer) &&
+            this.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */ &&
+            this.$untrackedValue$ === NEEDS_COMPUTATION) {
+            throw qError(35 /* QError.asyncClientOnlyValueDuringSSR */);
+        }
+        isDev &&
+            !(this.$flags$ & 512 /* AsyncSignalFlags.ASYNC_MODE */) &&
+            assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
+        return this.$untrackedValue$;
+    }
+    set untrackedValue(value) {
+        this.$untrackedValue$ = value;
     }
     /**
      * Loading is true if the signal is still waiting for the promise to resolve, false if the promise
-     * has resolved or rejected.
+     * has resolved or rejected (or the compute function is synchronous).
      *
-     * Accessing .loading will trigger computation if needed, since it's often used like
-     * `signal.loading ? <Loading /> : signal.value`.
+     * Accessing `.pending` will trigger computation if needed, since it's often used like
+     *
+     * ```ts
+     * signal.pending ? <Loading /> : signal.value
+     * ```
      */
-    get loading() {
-        const val = this.untrackedLoading;
+    get pending() {
+        const val = this.untrackedPending;
         const ctx = tryGetInvokeContext();
         if (ctx && (this.$container$ ||= ctx.$container$ || null)) {
             isDev &&
@@ -2287,22 +2508,41 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         }
         return val;
     }
-    set untrackedLoading(value) {
-        if (value !== this.$untrackedLoading$) {
-            this.$untrackedLoading$ = value;
+    set untrackedPending(value) {
+        if (value !== !!this.$untrackedPending$) {
+            this.$untrackedPending$ = value;
             scheduleEffects(this.$container$, this, this.$loadingEffects$);
         }
     }
-    get untrackedLoading() {
+    get untrackedPending() {
         // reading `.loading` means someone is interested in the result, so we should trigger the computation. The alternative is eager computation or imperative calls to invalidate; this seems nicer.
         this.$computeIfNeeded$();
         // During SSR there's no such thing as loading state, we must render complete results
         if ((qTest ? isServerPlatform() : isServer) && this.$current$?.$promise$) {
             throw this.$current$?.$promise$;
         }
-        return this.$untrackedLoading$;
+        return !!this.$untrackedPending$;
+    }
+    /** @deprecated Use `pending` instead */
+    get loading() {
+        return this.pending;
+    }
+    /** @deprecated Use `untrackedPending` instead */
+    get untrackedLoading() {
+        return this.untrackedPending;
     }
-    /** The error that occurred when the signal was resolved. */
+    set untrackedLoading(value) {
+        this.untrackedPending = value;
+    }
+    /**
+     * The error the compute function threw or rejected with.
+     *
+     * Accessing .error will trigger computation if needed, since it's often used like
+     *
+     * ```ts
+     * signal.error ? <Failed /> : signal.value
+     * ```
+     */
     get error() {
         const val = this.untrackedError;
         const ctx = tryGetInvokeContext();
@@ -2325,6 +2565,11 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         }
     }
     get untrackedError() {
+        this.$computeIfNeeded$();
+        // During SSR we must render settled results
+        if ((qTest ? isServerPlatform() : isServer) && this.$current$?.$promise$) {
+            throw this.$current$?.$promise$;
+        }
         return this.$untrackedError$;
     }
     get expires() {
@@ -2367,16 +2612,8 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         }
         this.expires = Math.abs(value);
     }
-    /** Invalidates the signal, causing it to re-compute its value. */
-    async invalidate(info) {
-        if (arguments.length > 0) {
-            this.$info$ = info;
-            this.$infoVersion$ = this.$infoVersion$ === undefined ? 1 : this.$infoVersion$ + 1;
-        }
-        this.$setInvalid$(true, this.$flags$ & 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */);
-    }
     $setInvalid$(allowRecalc, mustClear) {
-        this.$flags$ |= 1 /* SignalFlags.INVALID */;
+        this.$flags$ |= 1 /* ComputedSignalFlags.INVALID */;
         this.$clearNextPoll$();
         if (mustClear) {
             this.$untrackedValue$ = NEEDS_COMPUTATION;
@@ -2417,19 +2654,97 @@ class AsyncSignalImpl extends ComputedSignalImpl {
     }
     /** Run the computation if needed */
     $computeIfNeeded$() {
-        if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
+        if (!(this.$flags$ & 1 /* ComputedSignalFlags.INVALID */)) {
+            return;
+        }
+        if (this.$flags$ & 512 /* AsyncSignalFlags.ASYNC_MODE */) {
+            return this.$computeAsync$();
+        }
+        const computeQrl = this.$computeQrl$;
+        throwIfQRLNotResolved(computeQrl);
+        // The previous compute's cleanups run before the new compute, like the async engine
+        const prevJob = this.$current$;
+        if (prevJob && !prevJob.$cleanupRequested$) {
+            prevJob.$cleanupRequested$ = true;
+            prevJob.$abortController$?.abort();
+            this.$runCleanupCallbacks$(prevJob);
+        }
+        const running = new Job(this, this.$info$, this.$infoVersion$);
+        this.$current$ = running;
+        let result;
+        try {
+            result = this.$invokeComputeFn$(computeQrl.resolved, running);
+        }
+        catch (err) {
+            // A thrown promise is a retry request, not a failure
+            if (isPromise(err)) {
+                throw err;
+            }
+            if (running.$infoVersion$ === this.$infoVersion$) {
+                this.$info$ = undefined;
+            }
+            this.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
+            this.$setError$(running, err);
+            return;
+        }
+        if (isPromise(result)) {
+            // The compute fn is async: hand the in-flight computation to the async engine
+            this.$flags$ |= 512 /* AsyncSignalFlags.ASYNC_MODE */;
+            this.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
+            // Consume the in-flight promise first; retries re-invoke the compute fn
+            let first = result;
+            const compute = () => {
+                const r = first ?? this.$invokeComputeFn$(this.$computeQrl$.resolved, running);
+                first = undefined;
+                return r;
+            };
+            running.$promise$ = this.$settleComputation$(running, () => retryOnPromise(compute));
             return;
         }
+        if (running.$infoVersion$ === this.$infoVersion$) {
+            this.$info$ = undefined;
+        }
+        this.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
+        this.untrackedError = undefined;
+        super.value = result;
+    }
+    /**
+     * Invoke the compute fn with the ComputeCtx argument. CTX_ARG signals (useAsync$, useResource$)
+     * only track via its explicit track(). Computeds auto-track every synchronous read instead; after
+     * the first await they must use the explicit track() too.
+     */
+    $invokeComputeFn$(fn, job) {
+        const computeFn = fn;
+        if (this.$flags$ & 1024 /* AsyncSignalFlags.CTX_ARG */) {
+            // Strip the ambient effect subscriber: these compute fns track only via their track()
+            let iCtx = tryGetInvokeContext();
+            if (iCtx?.$effectSubscriber$) {
+                iCtx = { ...iCtx, $effectSubscriber$: undefined };
+            }
+            return invokeApply(iCtx, computeFn, [job]);
+        }
+        const container = (this.$container$ ||= tryGetInvokeContext()?.$container$ || null);
+        const subscriber = getSubscriber(this, "." /* EffectProperty.VNODE */);
+        if (container) {
+            clearEffectSubscription(container, subscriber);
+        }
+        const ctx = newInvokeContext();
+        ctx.$container$ = container || undefined;
+        ctx.$effectSubscriber$ = subscriber;
+        return invokeApply(ctx, computeFn, [job]);
+    }
+    /** Start an async computation (the async engine; assumes the INVALID flag is set) */
+    $computeAsync$() {
         // Skip computation on SSR for clientOnly signals
         if ((qTest ? isServerPlatform() : isServer) && this.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
             // We must pretend to load, and register as a listener for the captures
-            this.$untrackedLoading$ = true;
+            this.$untrackedPending$ = true;
             this.$container$?.serializationCtx.$eagerResume$.add(this);
             return;
         }
         this.$clearNextPoll$();
         // Clear flag here to make sure the cleanups don't start another compute
-        this.$flags$ &= -2 /* SignalFlags.INVALID */;
+        this.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
         const current = this.$current$;
         if (current) {
             this.$requestCleanups$(current);
@@ -2439,12 +2754,12 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         if (this.$jobs$ ? this.$jobs$.length >= limit : current?.$promise$) {
             // We requested cleanups for all the previous jobs, once one finishes it will be removed from the jobs array and trigger computeIfNeeded
             // Restore invalid state
-            this.$flags$ |= 1 /* SignalFlags.INVALID */;
+            this.$flags$ |= 1 /* ComputedSignalFlags.INVALID */;
             return;
         }
         // We put the actual computation in a separate method so we can easily retain the promise
         const infoVersion = this.$infoVersion$;
-        const running = new AsyncJob(this, this.$info$, infoVersion);
+        const running = new Job(this, this.$info$, infoVersion);
         this.$current$ = running;
         if (this.$jobs$) {
             this.$jobs$.push(running);
@@ -2452,35 +2767,39 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         running.$promise$ = this.$runComputation$(running);
     }
     async $runComputation$(running) {
-        const isCurrent = () => running === this.$current$;
         let fn = this.$computeQrl$.resolved;
         if (!fn) {
             // QRL resolution is async — we have to publish loading=true before awaiting so
             // subscribers know the value isn't ready yet.
-            this.untrackedLoading = true;
+            this.untrackedPending = true;
             fn = await this.$computeQrl$.resolve();
             if (running.$abortController$?.signal.aborted) {
                 running.$promise$ = null;
                 return;
             }
         }
+        if (this.$timeoutMs$) {
+            this.$computationTimeoutId$ = setTimeout(() => {
+                const error = new Error(`timeout ${this.$timeoutMs$}ms`);
+                this.$setError$(running, error);
+                running.$abortController$?.abort(error);
+            }, this.$timeoutMs$);
+        }
+        return this.$settleComputation$(running, () => retryOnPromise(() => this.$invokeComputeFn$(fn, running)));
+    }
+    /** Await the computation and publish its result, error, and loading transitions. */
+    async $settleComputation$(running, compute) {
+        const isCurrent = () => running === this.$current$;
         try {
-            if (this.$timeoutMs$) {
-                this.$computationTimeoutId$ = setTimeout(() => {
-                    const error = new Error(`timeout ${this.$timeoutMs$}ms`);
-                    this.$setError$(running, error);
-                    running.$abortController$?.abort(error);
-                }, this.$timeoutMs$);
-            }
             // Try to stay sync if possible. Only publish loading=true to subscribers when
             // the compute is actually asynchronous — a synchronous resolve (e.g. pre-loaded
             // values injected via _injectAsyncSignalValue) should never transition through a
             // visible loading state, which on SSR would fire the loading-effect subscribers
             // (tasks) while the value is still "loading" from their perspective.
-            const valuePromise = retryOnPromise(fn.bind(null, running));
+            const valuePromise = compute();
             let value;
             if (isPromise(valuePromise)) {
-                this.untrackedLoading = true;
+                this.untrackedPending = true;
                 value = await valuePromise;
             }
             else {
@@ -2505,7 +2824,7 @@ class AsyncSignalImpl extends ComputedSignalImpl {
                 // Note that these assignments run setters
                 this.untrackedError = undefined;
                 /**
-                 * Use super.value instead of this.value to persist invalid state, so that invalidation
+                 * Use SignalImpl.value instead of this.value to persist invalid state, so that invalidation
                  * during computation recomputes
                  */
                 super.value = value;
@@ -2520,12 +2839,12 @@ class AsyncSignalImpl extends ComputedSignalImpl {
             if (running.$infoVersion$ === this.$infoVersion$) {
                 this.$info$ = undefined;
             }
-            if (this.$flags$ & 1 /* SignalFlags.INVALID */) {
+            if (this.$flags$ & 1 /* ComputedSignalFlags.INVALID */) {
                 // we became invalid again while running, so we need to re-run the computation to get the new promise
                 this.$computeIfNeeded$();
             }
             else {
-                this.untrackedLoading = false;
+                this.untrackedPending = false;
                 this.$scheduleNextPoll$();
             }
         }
@@ -2552,325 +2871,98 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         this.$clearNextPoll$();
         clearTimeout(this.$computationTimeoutId$);
         const current = this.$current$;
-        if (current) {
-            this.$requestCleanups$(current);
-        }
-        if (this.$jobs$) {
-            await Promise.all(this.$jobs$.map((job) => job.$promise$));
-        }
-        else {
-            await current?.$promise$;
-        }
-    }
-    $clearNextPoll$() {
-        if (this.$pollTimeoutId$ !== undefined) {
-            clearTimeout(this.$pollTimeoutId$);
-            this.$pollTimeoutId$ = undefined;
-        }
-    }
-    $scheduleNextPoll$() {
-        if ((qTest ? isServerPlatform() : isServer) || !this.$expires$) {
-            return;
-        }
-        this.$clearNextPoll$();
-        const allowRecalc = !(this.$flags$ & 256 /* AsyncSignalFlags.NO_POLL */);
-        // Even when clear on invalidate, we don't clear if we're merely re-running due to polling
-        // We expect to get the new value soon, so we can avoid showing a loading state
-        const mustClear = this.$flags$ & 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */ && !allowRecalc;
-        this.$pollTimeoutId$ = setTimeout(() => this.$setInvalid$(allowRecalc, mustClear), this.$expires$);
-        this.$pollTimeoutId$?.unref?.();
-    }
-    $hasSubscribers$() {
-        return !!(this.$effects$?.size || this.$loadingEffects$?.size || this.$errorEffects$?.size);
-    }
-    $requestCleanups$(job, reason) {
-        if (job.$cleanupRequested$) {
-            return;
-        }
-        job.$cleanupRequested$ = true;
-        job.$abortController$?.abort(reason);
-        job.$promise$ = maybeThen(job.$promise$, () => this.$runCleanups$(job));
-    }
-    /** Clean up and trigger signal compute once complete */
-    $runCleanups$(job) {
-        const cleanups = job.$cleanups$;
-        const onError = (err) => {
-            const handleError = this.$container$?.handleError;
-            if (handleError) {
-                handleError(err, null);
-            }
-            else {
-                console.error('Error in async signal cleanup', err);
-            }
-        };
-        const onDone = () => {
-            job.$promise$ = null;
-            if (cleanups) {
-                cleanups.length = 0;
-            }
-            // Now trigger compute
-            const jobs = this.$jobs$;
-            if (jobs) {
-                const idx = jobs.indexOf(job);
-                if (idx !== -1) {
-                    jobs.splice(idx, 1);
-                }
-            }
-            this.$computeIfNeeded$();
-        };
-        let promiseChain = undefined;
-        if (cleanups) {
-            // Keep this sync-ish so sync functions run immediately.
-            for (let i = 0; i < cleanups.length; i++) {
-                try {
-                    const result = cleanups[i]();
-                    if (isPromise(result)) {
-                        promiseChain = (promiseChain ? promiseChain.then(() => result) : result).catch(onError);
-                    }
-                }
-                catch (err) {
-                    onError(err);
-                }
-            }
-        }
-        if (promiseChain) {
-            return promiseChain.then(onDone);
-        }
-        else {
-            onDone();
-        }
-    }
-}
-
-/** @internal */
-const _CONST_PROPS = Symbol('CONST');
-/** @internal */
-const _VAR_PROPS = Symbol('VAR');
-/** @internal */
-const _OWNER = Symbol('OWNER');
-/** @internal */
-const _PROPS_HANDLER = Symbol('PROPS_HANDLER');
-/** @internal @deprecated v1 compat */
-const _IMMUTABLE = Symbol('IMMUTABLE');
-/** @internal */
-const _UNINITIALIZED = Symbol('UNINITIALIZED');
-
-/** @internal */
-const EMPTY_ARRAY = [];
-/** @internal */
-const EMPTY_OBJ = {};
-Object.freeze(EMPTY_ARRAY);
-Object.freeze(EMPTY_OBJ);
-
-function createPropsProxy(owner) {
-    // TODO don't make a proxy but populate getters? benchmark
-    return new Proxy({}, new PropsProxyHandler(owner));
-}
-class PropsProxyHandler {
-    owner;
-    $effects$ = undefined;
-    $container$ = null;
-    constructor(owner) {
-        this.owner = owner;
-    }
-    get(_, prop) {
-        // escape hatch to get the separated props from a component
-        if (prop === _CONST_PROPS) {
-            return this.owner.constProps;
-        }
-        else if (prop === _VAR_PROPS) {
-            return this.owner.varProps;
-        }
-        else if (prop === _OWNER) {
-            return this.owner;
-        }
-        else if (prop === _PROPS_HANDLER) {
-            return this;
-        }
-        let value;
-        if (prop === 'children') {
-            value = this.owner.children;
-        }
-        else {
-            if (typeof prop === 'string' && typeof this.owner.type === 'string') {
-                const attr = jsxEventToHtmlAttribute(prop);
-                if (attr) {
-                    prop = attr;
-                }
-            }
-            value = directGetPropsProxyProp(this.owner, prop);
-            if (prop in this.owner.varProps) {
-                addPropsProxyEffect(this, prop);
-            }
-        }
-        // a proxied value that the optimizer made
-        return value instanceof WrappedSignalImpl && value.$flags$ & 4 /* WrappedSignalFlags.UNWRAP */
-            ? value.value
-            : value;
-    }
-    set(_, prop, value) {
-        if (prop === _OWNER) {
-            // used for deserialization
-            this.owner = value;
-        }
-        else if (prop === 'children') {
-            this.owner.children = value;
-        }
-        else if (prop === _CONST_PROPS) {
-            this.owner.constProps = value;
-        }
-        else if (prop === _VAR_PROPS) {
-            this.owner.varProps = value;
-        }
-        else {
-            if (typeof prop === 'string' && typeof this.owner.type === 'string') {
-                const attr = jsxEventToHtmlAttribute(prop);
-                if (attr) {
-                    prop = attr;
-                }
-            }
-            if (this.owner.constProps && prop in this.owner.constProps) {
-                // delete the prop from the const props first
-                delete this.owner.constProps[prop];
-            }
-            if (this.owner.varProps === EMPTY_OBJ) {
-                this.owner.varProps = {};
-            }
-            else if (!(prop in this.owner.varProps)) {
-                this.owner.toSort = true;
-            }
-            if (this.owner.varProps[prop] !== value) {
-                this.owner.varProps[prop] = value;
-                triggerPropsProxyEffect(this, prop);
-            }
+        if (current) {
+            this.$requestCleanups$(current);
         }
-        return true;
-    }
-    deleteProperty(_, prop) {
-        let didDelete = delete this.owner.varProps[prop];
-        if (didDelete) {
-            triggerPropsProxyEffect(this, prop);
+        if (this.$jobs$) {
+            await Promise.all(this.$jobs$.map((job) => job.$promise$));
         }
-        if (this.owner.constProps) {
-            didDelete = delete this.owner.constProps[prop] || didDelete;
+        else {
+            await current?.$promise$;
         }
-        if (this.owner.children != null && prop === 'children') {
-            this.owner.children = null;
-            didDelete = true;
+    }
+    $clearNextPoll$() {
+        if (this.$pollTimeoutId$ !== undefined) {
+            clearTimeout(this.$pollTimeoutId$);
+            this.$pollTimeoutId$ = undefined;
         }
-        return didDelete;
     }
-    has(_, prop) {
-        if (prop === 'children') {
-            return this.owner.children != null;
+    $scheduleNextPoll$() {
+        if ((qTest ? isServerPlatform() : isServer) || !this.$expires$) {
+            return;
         }
-        else if (prop === _CONST_PROPS || prop === _VAR_PROPS) {
-            return true;
+        this.$clearNextPoll$();
+        const allowRecalc = !(this.$flags$ & 256 /* AsyncSignalFlags.NO_POLL */);
+        // Even when clear on invalidate, we don't clear if we're merely re-running due to polling
+        // We expect to get the new value soon, so we can avoid showing a loading state
+        const mustClear = this.$flags$ & 128 /* AsyncSignalFlags.CLEAR_ON_INVALIDATE */ && !allowRecalc;
+        this.$pollTimeoutId$ = setTimeout(() => this.$setInvalid$(allowRecalc, mustClear), this.$expires$);
+        this.$pollTimeoutId$?.unref?.();
+    }
+    $hasSubscribers$() {
+        return !!(this.$effects$?.size || this.$loadingEffects$?.size || this.$errorEffects$?.size);
+    }
+    $requestCleanups$(job, reason) {
+        if (job.$cleanupRequested$) {
+            return;
         }
-        const inVarProps = prop in this.owner.varProps;
-        if (typeof prop === 'string') {
-            if (inVarProps) {
-                addPropsProxyEffect(this, prop);
+        job.$cleanupRequested$ = true;
+        job.$abortController$?.abort(reason);
+        job.$promise$ = maybeThen(job.$promise$, () => this.$runCleanups$(job));
+    }
+    /** Run a job's cleanup callbacks, returning a promise when any of them are async. */
+    $runCleanupCallbacks$(job) {
+        const cleanups = job.$cleanups$;
+        const onError = (err) => {
+            const handleError = this.$container$?.handleError;
+            if (handleError) {
+                handleError(err, null);
             }
-            if (typeof this.owner.type === 'string') {
-                const attr = jsxEventToHtmlAttribute(prop);
-                if (attr) {
-                    prop = attr;
-                }
+            else {
+                console.error('Error in async signal cleanup', err);
             }
-        }
-        return inVarProps || (this.owner.constProps ? prop in this.owner.constProps : false);
-    }
-    getOwnPropertyDescriptor(_, p) {
-        const value = p === 'children'
-            ? this.owner.children
-            : this.owner.constProps && p in this.owner.constProps
-                ? this.owner.constProps[p]
-                : this.owner.varProps[p];
-        return {
-            configurable: true,
-            enumerable: true,
-            value: value,
         };
-    }
-    ownKeys() {
-        const out = Object.keys(this.owner.varProps);
-        if (this.owner.children != null) {
-            out.push('children');
-        }
-        if (this.owner.constProps) {
-            for (const key in this.owner.constProps) {
-                if (out.indexOf(key) === -1) {
-                    out.push(key);
+        let promiseChain = undefined;
+        if (cleanups) {
+            // Keep this sync-ish so sync functions run immediately.
+            for (let i = 0; i < cleanups.length; i++) {
+                try {
+                    const result = cleanups[i]();
+                    if (isPromise(result)) {
+                        promiseChain = (promiseChain ? promiseChain.then(() => result) : result).catch(onError);
+                    }
+                }
+                catch (err) {
+                    onError(err);
                 }
             }
+            cleanups.length = 0;
         }
-        return out;
+        return promiseChain;
     }
-}
-const addPropsProxyEffect = (propsProxy, prop) => {
-    // Lazily grab the container from the invoke context
-    const ctx = tryGetInvokeContext();
-    if (ctx) {
-        if (propsProxy.$container$ === null) {
-            if (ctx.$container$) {
-                propsProxy.$container$ = ctx.$container$;
+    /** Clean up and trigger signal compute once complete */
+    $runCleanups$(job) {
+        const onDone = () => {
+            job.$promise$ = null;
+            // Now trigger compute
+            const jobs = this.$jobs$;
+            if (jobs) {
+                const idx = jobs.indexOf(job);
+                if (idx !== -1) {
+                    jobs.splice(idx, 1);
+                }
             }
+            this.$computeIfNeeded$();
+        };
+        const promiseChain = this.$runCleanupCallbacks$(job);
+        if (promiseChain) {
+            return promiseChain.then(onDone);
         }
         else {
-            isDev &&
-                assertTrue(!ctx.$container$ || ctx.$container$ === propsProxy.$container$, 'Do not use props across containers');
+            onDone();
         }
     }
-    const effectSubscriber = ctx?.$effectSubscriber$;
-    if (effectSubscriber) {
-        addStoreEffect(propsProxy.owner._proxy, prop, propsProxy, effectSubscriber);
-    }
-};
-const triggerPropsProxyEffect = (propsProxy, prop) => {
-    const effects = getEffects$1(propsProxy.$effects$, prop);
-    if (effects) {
-        scheduleEffects(propsProxy.$container$, propsProxy, effects);
-    }
-    return !!effects;
-};
-function getEffects$1(effects, prop) {
-    // TODO: Handle STORE_ALL_PROPS
-    return effects?.get(prop);
 }
-/**
- * Instead of using PropsProxyHandler getter (which could create a component-level subscription).
- * Use this function to get the props directly from a const or var props.
- *
- * This does not convert jsx event names.
- */
-const directGetPropsProxyProp = (jsx, prop) => {
-    return (jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop]);
-};
-const _getProps = (props, prop) => {
-    return _getVarProps(props)?.[prop] || _getConstProps(props)?.[prop] || null;
-};
-/** Used by the optimizer for spread props operations @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;
-};
-/** Used by the optimizer for spread props operations @internal */
-const _getConstProps = (props) => {
-    if (!props) {
-        return null;
-    }
-    return _CONST_PROPS in props ? props[_CONST_PROPS] : null;
-};
-const isPropsProxy = (obj) => {
-    return obj && _VAR_PROPS in obj;
-};
 
 // <docs markdown="../../readme.md#implicit$FirstArg">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -2926,11 +3018,11 @@ const implicit$FirstArg = (fn) => {
  */
 class SerializerSignalImpl extends ComputedSignalImpl {
     constructor(container, argQrl) {
-        super(container, argQrl, 1 /* SignalFlags.INVALID */ | 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */);
+        super(container, argQrl, 1 /* ComputedSignalFlags.INVALID */ | 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */);
     }
     $didInitialize$ = false;
     $computeIfNeeded$() {
-        if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
+        if (!(this.$flags$ & 1 /* ComputedSignalFlags.INVALID */)) {
             return;
         }
         throwIfQRLNotResolved(this.$computeQrl$);
@@ -2943,7 +3035,7 @@ class SerializerSignalImpl extends ComputedSignalImpl {
             : deserialize(currentValue), this, "." /* EffectProperty.VNODE */, this.$container$);
         this.$didInitialize$ = true;
         // Needs to invalidate only after all possible Promise throws happened
-        this.$flags$ &= -2 /* SignalFlags.INVALID */;
+        this.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
         // We allow forcing the update of the signal without changing the value, for example when the deserialized value is the same reference as the old value but its internals have changed. In that case we want to trigger effects that depend on this signal, even though the value is the same.
         const didChange = (this.$didInitialize$ && untrackedValue !== 'undefined') ||
             untrackedValue !== this.$untrackedValue$;
@@ -2954,13 +3046,46 @@ class SerializerSignalImpl extends ComputedSignalImpl {
     }
 }
 
+/**
+ * # ================================
+ *
+ * AsyncSignalImpl
+ *
+ * # ================================
+ *
+ * The async engine (jobs, loading, error, polling) lives in ComputedSignalImpl; this subclass
+ * configures it from options and switches the compute invocation to CTX_ARG mode: the compute fn
+ * receives the ComputeCtx argument and tracks only via its explicit `track()` (no auto-tracking).
+ *
+ * @internal
+ */
+class AsyncSignalImpl extends ComputedSignalImpl {
+    constructor(container, fn, flags = 1 /* ComputedSignalFlags.INVALID */ |
+        16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */, options) {
+        super(container, fn, flags | 512 /* AsyncSignalFlags.ASYNC_MODE */ | 1024 /* AsyncSignalFlags.CTX_ARG */, options);
+    }
+}
+/**
+ * Inject a pre-loaded value into a signal while preserving subscriptions. Calls `invalidate({__v})`
+ * so the compute function reads the value from `info`, then triggers an immediate synchronous
+ * compute via the private `$computeIfNeeded$()` method (which is mangled in core builds, so callers
+ * from other packages must go through this helper).
+ *
+ * @internal
+ */
+const _injectAsyncSignalValue = (signal, value) => {
+    const impl = signal;
+    impl.invalidate({ __v: value });
+    impl.$computeIfNeeded$();
+};
+
 /** @internal */
 const createSignal$1 = (value) => {
     return new SignalImpl(null, value);
 };
 /** @internal */
 const createComputedSignal = (qrl, options) => {
-    return new ComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || 'always'));
+    return new ComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || 'always'), options);
 };
 /** @internal */
 const createAsyncSignal = (qrl, options) => {
@@ -2984,9 +3109,10 @@ const createSignal = createSignal$1;
  * recalculated.
  *
  * 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 `createAsync$` instead (don't forget to use `track()`).
+ * effects. Every synchronous signal or store read is tracked automatically; reads after the first
+ * `await` must use the `track()` provided on the context argument. When the function is async, the
+ * returned signal exposes the async API (`.pending`, `.error`, `.promise()`), and reading an
+ * unresolved `.value` throws the computation promise.
  *
  * @public
  */
@@ -2995,6 +3121,7 @@ const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedSignal);
  * Create a signal holding a `.value` which is calculated from the given async function (QRL). The
  * standalone version of `useAsync$`.
  *
+ * @deprecated Use `createComputed$` instead, it has async support now.
  * @public
  */
 const createAsync$ = /*#__PURE__*/ implicit$FirstArg(createAsyncSignal);
@@ -3041,10 +3168,10 @@ const _wrapProp = (...args) => {
         return obj[prop];
     }
     if (isSignal(obj)) {
-        if (!(obj instanceof AsyncSignalImpl)) {
+        if (!(obj instanceof ComputedSignalImpl)) {
             isDev && assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
         }
-        if (obj instanceof WrappedSignalImpl && obj.$flags$ & 4 /* WrappedSignalFlags.UNWRAP */) {
+        if (obj instanceof WrappedSignalImpl) {
             return obj;
         }
         return getWrapped(args);
@@ -3098,7 +3225,7 @@ class WrappedSignalImpl extends SignalImpl {
     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 */ | 4 /* WrappedSignalFlags.UNWRAP */) {
+    flags = 1 /* ComputedSignalFlags.INVALID */) {
         super(container, NEEDS_COMPUTATION);
         this.$args$ = args;
         this.$func$ = fn;
@@ -3106,7 +3233,7 @@ class WrappedSignalImpl extends SignalImpl {
         this.$flags$ = flags;
     }
     invalidate() {
-        this.$flags$ |= 1 /* SignalFlags.INVALID */;
+        this.$flags$ |= 1 /* ComputedSignalFlags.INVALID */;
         // we are trying to run computation without creating a chore, which can be expensive
         // for many signals. If it fails, we schedule a chore to run the computation.
         try {
@@ -3119,8 +3246,8 @@ class WrappedSignalImpl extends SignalImpl {
             }
         }
         // if the computation not failed, we can run the effects directly
-        if (this.$flags$ & 2 /* SignalFlags.RUN_EFFECTS */) {
-            this.$flags$ &= -3 /* SignalFlags.RUN_EFFECTS */;
+        if (this.$flags$ & 2 /* ComputedSignalFlags.RUN_EFFECTS */) {
+            this.$flags$ &= -3 /* ComputedSignalFlags.RUN_EFFECTS */;
             scheduleEffects(this.$container$, this, this.$effects$);
         }
     }
@@ -3130,7 +3257,7 @@ class WrappedSignalImpl extends SignalImpl {
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
-        if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
+        if (!(this.$flags$ & 1 /* ComputedSignalFlags.INVALID */)) {
             return;
         }
         const untrackedValue = trackSignal(() => this.$func$(...this.$args$), this, "." /* EffectProperty.VNODE */, this.$container$);
@@ -3141,10 +3268,10 @@ class WrappedSignalImpl extends SignalImpl {
         // this.$flags$ &= ~SignalFlags.INVALID;
         // reset flag in case we call computedIfNeeded twice and the value was changed only the first time
         // TODO: change to version number?
-        this.$flags$ &= -3 /* SignalFlags.RUN_EFFECTS */;
+        this.$flags$ &= -3 /* ComputedSignalFlags.RUN_EFFECTS */;
         const didChange = untrackedValue !== this.$untrackedValue$;
         if (didChange) {
-            this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+            this.$flags$ |= 2 /* ComputedSignalFlags.RUN_EFFECTS */;
             this.$untrackedValue$ = untrackedValue;
         }
     }
@@ -3248,12 +3375,15 @@ const isJSXNode = (n) => {
  * load the QRL captured scope ourselves. Otherwise, we are being called as a QRL and the captures
  * are already set.
  */
-const maybeScopeFromQL = (captureIds, element) => {
-    if (typeof captureIds === 'string') {
+const withScopeFromQL = (captureDeltas, element, callback) => {
+    if (typeof captureDeltas === 'string') {
         const container = getDomContainer(element);
-        setCaptures(deserializeCaptures(container, captureIds));
+        return whenContainerDataReady(container, () => {
+            setCaptures(deserializeCaptureDeltas(container, captureDeltas));
+            return callback();
+        });
     }
-    return null;
+    return callback();
 };
 /**
  * Handles events for bind:value
@@ -3261,9 +3391,10 @@ const maybeScopeFromQL = (captureIds, element) => {
  * @internal
  */
 function _val(_, element) {
-    maybeScopeFromQL(this, element);
-    const signal = _captures[0];
-    signal.value = element.type === 'number' ? element.valueAsNumber : element.value;
+    return withScopeFromQL(this, element, () => {
+        const signal = _captures[0];
+        signal.value = element.type === 'number' ? element.valueAsNumber : element.value;
+    });
 }
 /**
  * Handles events for bind:checked
@@ -3271,9 +3402,10 @@ function _val(_, element) {
  * @internal
  */
 function _chk(_, element) {
-    maybeScopeFromQL(this, element);
-    const signal = _captures[0];
-    signal.value = element.checked;
+    return withScopeFromQL(this, element, () => {
+        const signal = _captures[0];
+        signal.value = element.checked;
+    });
 }
 /**
  * Resumes selected state (e.g. polling AsyncSignals) by deserializing captures. Used for
@@ -3282,17 +3414,18 @@ function _chk(_, element) {
  * @internal
  */
 function _res(_, element) {
-    maybeScopeFromQL(this, element);
-    // Captures are deserialized, now trigger computation on AsyncSignals
-    if (_captures) {
-        for (let i = 0; i < _captures.length; i++) {
-            const capture = _captures[i];
-            if (capture instanceof AsyncSignalImpl && capture.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
-                capture.$computeIfNeeded$();
+    return withScopeFromQL(this, element, () => {
+        // Captures are deserialized, now trigger computation on AsyncSignals
+        if (_captures) {
+            for (let i = 0; i < _captures.length; i++) {
+                const capture = _captures[i];
+                if (capture instanceof AsyncSignalImpl && capture.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
+                    capture.$computeIfNeeded$();
+                }
+                // note that polling async signals will automatically schedule themselves so no action needed
             }
-            // note that polling async signals will automatically schedule themselves so no action needed
         }
-    }
+    });
 }
 
 const BIND_VALUE = 'bind:value';
@@ -4072,7 +4205,8 @@ function runEventHandlerQRL(handler, event, element, ctx) {
         return;
     }
     if (!ctx) {
-        ctx = newInvokeContextFromDOM(event, element);
+        const container = getDomContainer(element);
+        return whenContainerDataReady(container, () => runEventHandlerQRL(handler, event, element, newInvokeContextFromDOM(event, element, container)));
     }
     const container = ctx.$container$;
     const hostElement = ctx.$hostElement$;
@@ -4113,13 +4247,16 @@ function _run(event, element) {
         // ignore events on disconnected elements, this can happen when the event is triggered while the element is being removed
         return;
     }
-    const ctx = newInvokeContextFromDOM(event, element);
-    if (typeof this === 'string') {
-        setCaptures(deserializeCaptures(ctx.$container$, this));
-    }
-    const qrlToRun = _captures[0];
-    isDev && assertQrl(qrlToRun);
-    return runEventHandlerQRL(qrlToRun, event, element, ctx);
+    const container = getDomContainer(element);
+    return whenContainerDataReady(container, () => {
+        const ctx = newInvokeContextFromDOM(event, element, container);
+        if (typeof this === 'string') {
+            setCaptures(deserializeCaptureDeltas(ctx.$container$, this));
+        }
+        const qrlToRun = _captures[0];
+        isDev && assertQrl(qrlToRun);
+        return runEventHandlerQRL(qrlToRun, event, element, ctx);
+    });
 }
 
 function peekNextSibling(vCurrent) {
@@ -4280,9 +4417,7 @@ function diff(diffContext, jsxNode, vStartNode, vCurrent = vnode_getFirstChild(v
                             else if (type === Projection) {
                                 expectProjection(diffContext);
                                 descend(diffContext, diffContext.$jsxValue$.children, true, 
-                                // special case for projection, we don't want to expect no children
-                                // because the projection's children are not removed
-                                false);
+                                /* isProjection */ true);
                             }
                             else if (type === SSRComment) {
                                 expectNoMore(diffContext);
@@ -4395,9 +4530,11 @@ function advance(diffContext) {
  *
  *   In the above example all nodes are on same level so we don't `descendVNode` even thought there is
  *   an array produced by the `map` function.
+ * @param isProjection - True when descending into a Projection, whose children survive re-renders:
+ *   they are diffed against (never re-created) and kept when the new JSX has no children.
  */
-function descend(diffContext, children, descendVNode, shouldExpectNoChildren = true) {
-    if (shouldExpectNoChildren &&
+function descend(diffContext, children, descendVNode, isProjection = false) {
+    if (!isProjection &&
         (children == null || (descendVNode && isArray(children) && children.length === 0))) {
         expectNoChildren(diffContext);
         return;
@@ -4406,7 +4543,10 @@ function descend(diffContext, children, descendVNode, shouldExpectNoChildren = t
     if (descendVNode) {
         isDev &&
             assertDefined(diffContext.$vCurrent$ || diffContext.$vNewNode$, 'Expecting vCurrent to be defined.');
-        const creationMode = diffContext.$isCreationMode$ ||
+        const creationMode = 
+        // a projection keeps its children across re-renders, so it never inherits
+        // creation mode from a not-yet-rendered host; create only if new or empty
+        (!isProjection && diffContext.$isCreationMode$) ||
             !!diffContext.$vNewNode$ ||
             !vnode_getFirstChild(diffContext.$vCurrent$);
         diffContext.$isCreationMode$ = creationMode;
@@ -4839,18 +4979,20 @@ function diffProps(diffContext, vnode, newAttrs, currentFile) {
         vnode_ensureElementInflated(diffContext.$container$, vnode);
     }
     const oldAttrs = vnode.props;
+    const isHtml = (vnode.flags & 1536 /* VNodeFlags.NAMESPACE_MASK */) === 0 /* VNodeFlags.NS_html */;
     // Actual diffing logic
     // Apply all new attributes
     for (const key in newAttrs) {
         const newValue = newAttrs[key];
-        if (oldAttrs && _hasOwnProperty.call(oldAttrs, key)) {
-            const oldValue = oldAttrs[key];
-            if (newValue !== oldValue) {
-                if (newValue instanceof WrappedSignalImpl &&
-                    oldValue instanceof WrappedSignalImpl &&
-                    areWrappedSignalsEqual(newValue, oldValue)) {
-                    continue;
-                }
+        // HTML parsers lowercase attribute names.
+        const oldKey = oldAttrs && isHtml && !_hasOwnProperty.call(oldAttrs, key) ? key.toLowerCase() : key;
+        if (oldAttrs && _hasOwnProperty.call(oldAttrs, oldKey)) {
+            const oldValue = oldAttrs[oldKey];
+            if (oldKey !== key) {
+                vnode_setProp(vnode, oldKey, null);
+                vnode_setProp(vnode, key, oldValue);
+            }
+            if (!areDiffValuesEqual(newValue, oldValue)) {
                 patchProperty(diffContext, vnode, key, newValue, currentFile);
             }
         }
@@ -5320,13 +5462,26 @@ function handleChangedProps(src, dst, propsHandler, container, triggerEffects =
             if (key === 'children' || key === QBackRefs) {
                 continue;
             }
-            if (!dst || src[key] !== dst[key]) {
+            const newValue = src[key];
+            const oldValue = dst?.[key];
+            if (!dst ||
+                !(areDiffValuesEqual(newValue, oldValue) || areSignalValuesEqual(newValue, oldValue))) {
+                if (key === 'class') {
+                    if (areClassValuesEqual(newValue, oldValue)) {
+                        continue;
+                    }
+                }
+                else if (key === 'style') {
+                    if (areStyleValuesEqual(newValue, oldValue)) {
+                        continue;
+                    }
+                }
                 if (triggerEffects) {
                     if (dst) {
                         // Update the value in dst BEFORE triggering effects
                         // so effects see the new value
                         // Note: Value is not triggering effects, because we are modyfing direct VAR_PROPS object
-                        dst[key] = src[key];
+                        dst[key] = newValue;
                     }
                     const didTigger = triggerPropsProxyEffect(propsHandler, key);
                     if (!didTigger) {
@@ -5413,10 +5568,16 @@ function cleanup(container, journal, vNode, cursorRoot = null) {
                                 // don't call cleanupDestroyable yet, do it by the scheduler
                                 continue;
                             }
-                            else if (obj instanceof SignalImpl || isStore(obj)) {
-                                clearAllEffects(container, obj);
+                            // Stores and plain signals are only producers; their subscriptions are removed
+                            // when cleaning the consumers that read them. They don't own reactive backrefs.
+                            else if (obj instanceof ComputedSignalImpl || obj instanceof WrappedSignalImpl) {
+                                if (!(obj.$flags$ & 4 /* ComputedSignalFlags.PRESERVE_ON_SEQ_CLEANUP */)) {
+                                    clearAllEffects(container, obj);
+                                }
                             }
-                            if (objIsTask || obj instanceof AsyncSignalImpl) {
+                            if (objIsTask ||
+                                (obj instanceof ComputedSignalImpl &&
+                                    (obj.$flags$ & 512 /* AsyncSignalFlags.ASYNC_MODE */ || obj.$current$))) {
                                 cleanupDestroyable(obj);
                             }
                         }
@@ -5535,6 +5696,37 @@ function markVNodeAsDeleted(vCursor) {
      */
     vCursor.flags |= 32 /* VNodeFlags.Deleted */;
 }
+function areDiffValuesEqual(newValue, oldValue) {
+    if (newValue === oldValue) {
+        return true;
+    }
+    return (newValue instanceof WrappedSignalImpl &&
+        oldValue instanceof WrappedSignalImpl &&
+        areWrappedSignalsEqual(oldValue, newValue));
+}
+function areSignalValuesEqual(newValue, oldValue) {
+    if (newValue === oldValue) {
+        return true;
+    }
+    if (isSignal(newValue) && isSignal(oldValue)) {
+        const unwrappedNew = newValue instanceof WrappedSignalImpl ? newValue.$unwrapIfSignal$() : newValue;
+        const unwrappedOld = oldValue instanceof WrappedSignalImpl ? oldValue.$unwrapIfSignal$() : oldValue;
+        return untrack(() => unwrappedNew.value === unwrappedOld.value);
+    }
+    return false;
+}
+function areStyleValuesEqual(newValue, oldValue) {
+    if (newValue === oldValue) {
+        return true;
+    }
+    return stringifyStyle(newValue) === stringifyStyle(oldValue);
+}
+function areClassValuesEqual(newValue, oldValue) {
+    if (newValue === oldValue) {
+        return true;
+    }
+    return serializeClass(newValue) === serializeClass(oldValue);
+}
 function areWrappedSignalsEqual(oldSignal, newSignal) {
     if (oldSignal === newSignal) {
         return true;
@@ -6222,9 +6414,17 @@ function executeNodeDiff(vNode, container, journal, cursor) {
  * @returns Promise if component execution is async, void otherwise
  */
 function executeComponentChore(vNode, container, journal, cursor) {
-    vNode.dirty &= -5 /* ChoreBits.COMPONENT */;
     const host = vNode;
     const componentQRL = container.getHostProp(host, OnRenderProp);
+    if (componentQRL && !componentQRL.resolved) {
+        /**
+         * If the component QRL is not resolved, we need to wait for it to resolve before we can execute
+         * it. We just return the promise and we'll be called again, possibly with updated props, which
+         * is why we don't clear the dirty bit yet.
+         */
+        return componentQRL.resolve();
+    }
+    vNode.dirty &= -5 /* ChoreBits.COMPONENT */;
     if (!componentQRL) {
         return;
     }
@@ -6375,8 +6575,8 @@ function executeCompute(vNode, container) {
     ctx.$container$ = container;
     // needed for computed signals and throwing QRLs
     return maybeThen(retryOnPromise(() => invoke.call(target, ctx, target.$computeIfNeeded$)), () => {
-        if (target.$flags$ & 2 /* SignalFlags.RUN_EFFECTS */) {
-            target.$flags$ &= -3 /* SignalFlags.RUN_EFFECTS */;
+        if (target.$flags$ & 2 /* ComputedSignalFlags.RUN_EFFECTS */) {
+            target.$flags$ &= -3 /* ComputedSignalFlags.RUN_EFFECTS */;
             return scheduleEffects(container, target, effects);
         }
     });
@@ -6917,6 +7117,10 @@ function splitCursorBoundary(container, vNode) {
  * @returns The vNode itself, now acting as a cursor
  */
 function addCursor(container, root, priority) {
+    if (isCursor(root)) {
+        triggerCursors();
+        return root;
+    }
     const cursorData = {
         afterFlushTasks: null,
         extraPromises: null,
@@ -6969,7 +7173,11 @@ function _executeSsrChores(container, ssrNode) {
         if (ssrNode.dirty & 32 /* ChoreBits.COMPUTE */) {
             executeCompute(ssrNode, container);
         }
-        if (isDev && ssrNode.dirty & 1023 /* ChoreBits.DIRTY_MASK */) {
+        if (isDev &&
+            ssrNode.dirty & 1023 /* ChoreBits.DIRTY_MASK */ &&
+            !(ssrNode.flags & 2 /* SsrNodeFlags.WarnedStreamedChore */)) {
+            // Warn once per host; a re-dirtied streamed host would otherwise spam every tick.
+            ssrNode.flags |= 2 /* SsrNodeFlags.WarnedStreamedChore */;
             // 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
@@ -8686,8 +8894,17 @@ const processVNodeData$1 = (vData, callback) => {
         }
         return vData.substring(start, nextToConsumeIdx);
     };
+    const consumeEncodedValue = () => {
+        if (getChar(nextToConsumeIdx + 1) !== VNodeDataChar.SEPARATOR) {
+            return consumeValue();
+        }
+        consume();
+        const value = decodeURIComponent(decodeVNodeDataString(consumeValue()));
+        consume();
+        return value;
+    };
     while (peek() !== 0) {
-        callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
+        callback(peek, consumeValue, consume, getChar, nextToConsumeIdx, consumeEncodedValue);
     }
 };
 /** @internal */
@@ -8878,13 +9095,13 @@ function materializeFromVNodeData(vParent, vData, element, child, segmentId) {
         return !nodeIsElement || (nodeIsElement && shouldSkipElement(node));
     };
     let components = null;
-    processVNodeData$1(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
+    processVNodeData$1(vData, (peek, consumeValue, consume, getChar, dataIdx, consumeEncodedValue) => {
         if (isNumber(peek())) {
             // Element counts get encoded as numbers.
             while (shouldSkipNode(child)) {
                 child = fastNextSibling(child);
                 if (!child) {
-                    throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), nextToConsumeIdx]);
+                    throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), dataIdx]);
                 }
             }
             combinedText = null;
@@ -8905,7 +9122,7 @@ function materializeFromVNodeData(vParent, vData, element, child, segmentId) {
                     shouldSkipElement(child)) {
                     child = fastNextSibling(child);
                     if (!child && value > 0) {
-                        throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), nextToConsumeIdx]);
+                        throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), dataIdx]);
                     }
                 }
             }
@@ -8930,17 +9147,7 @@ function materializeFromVNodeData(vParent, vData, element, child, segmentId) {
             vnode_setProp(vParent, ELEMENT_PROPS, consumeValue());
         }
         else if (peek() === VNodeDataChar.KEY) {
-            const isEscapedValue = getChar(nextToConsumeIdx + 1) === VNodeDataChar.SEPARATOR;
-            let value;
-            if (isEscapedValue) {
-                consume();
-                value = decodeURIComponent(decodeVNodeDataString(consumeValue()));
-                consume();
-            }
-            else {
-                value = consumeValue();
-            }
-            vParent.key = value;
+            vParent.key = consumeEncodedValue();
         }
         else if (peek() === VNodeDataChar.SEQ) {
             vnode_setProp(vParent, ELEMENT_SEQ, consumeValue());
@@ -8975,7 +9182,7 @@ function materializeFromVNodeData(vParent, vData, element, child, segmentId) {
             // Custom attribute: |key|value
             const keyValue = consumeValue();
             const key = decodeVNodeDataString(keyValue);
-            const valueSeparatorIdx = nextToConsumeIdx + keyValue.length + 1;
+            const valueSeparatorIdx = dataIdx + keyValue.length + 1;
             const isEscapedValue = getChar(valueSeparatorIdx + 1) === VNodeDataChar.SEPARATOR;
             let value;
             if (isEscapedValue) {
@@ -8998,8 +9205,7 @@ function materializeFromVNodeData(vParent, vData, element, child, segmentId) {
             vParent = stack.pop();
         }
         else if (peek() === VNodeDataChar.SLOT) {
-            const value = decodeVNodeDataString(consumeValue());
-            vnode_setProp(vParent, QSlot, value);
+            vnode_setProp(vParent, QSlot, consumeEncodedValue());
         }
         else {
             // skip over style or non-qwik elements in front of text nodes, where text node is the first child (except the style node)
@@ -9110,12 +9316,12 @@ function clearEffectSubscription(container, effect) {
         return;
     }
     for (const producer of backRefs) {
-        // Check AsyncSignalImpl before SignalImpl since it extends SignalImpl
-        if (producer instanceof AsyncSignalImpl) {
-            clearAsyncSignal(producer, effect);
-        }
-        else if (producer instanceof SignalImpl) {
+        if (producer instanceof SignalImpl) {
             clearSignal(container, producer, effect);
+            if (producer instanceof ComputedSignalImpl) {
+                // computeds can carry async engine state (loading/error subscribers)
+                clearAsyncSignalEffects(producer, effect);
+            }
         }
         else if (isPropsProxy(producer)) {
             const propsHandler = producer[_PROPS_HANDLER];
@@ -9140,11 +9346,7 @@ function clearSignal(container, producer, effect) {
         clearAllEffects(container, producer);
     }
 }
-function clearAsyncSignal(producer, effect) {
-    const effects = producer.$effects$;
-    if (effects && effects.has(effect)) {
-        effects.delete(effect);
-    }
+function clearAsyncSignalEffects(producer, effect) {
     const pendingEffects = producer.$loadingEffects$;
     if (pendingEffects && pendingEffects.has(effect)) {
         pendingEffects.delete(effect);
@@ -9180,7 +9382,7 @@ const useTaskQrl = (qrl, opts) => {
     const taskFlags = 
     // enabled by default
     opts?.deferUpdates === false ? 0 : 8 /* TaskFlags.RENDER_BLOCKING */;
-    const task = new Task(4 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */ | taskFlags, i, iCtx.$hostElement$, qrl, undefined, null);
+    const task = new Task(4 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */ | taskFlags, i, iCtx.$hostElement$, qrl, null);
     // In V2 we add the task to the sequential scope. We need to do this
     // in order to be able to retrieve it later when the parent element is
     // deleted and we need to be able to release the task subscriptions.
@@ -9233,22 +9435,21 @@ const runTask = (task, container, host) => {
     }
     return result;
 };
+/** @internal */
 class Task extends BackRef {
     $flags$;
     $index$;
     $el$;
     $qrl$;
-    $state$;
     $destroy$;
     $destroyPromise$;
     $taskPromise$ = null;
-    constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
+    constructor($flags$, $index$, $el$, $qrl$, $destroy$) {
         super();
         this.$flags$ = $flags$;
         this.$index$ = $index$;
         this.$el$ = $el$;
         this.$qrl$ = $qrl$;
-        this.$state$ = $state$;
         this.$destroy$ = $destroy$;
     }
 }
@@ -9264,12 +9465,14 @@ const isTask = (value) => {
  */
 function scheduleTask(_event, element) {
     const container = getDomContainer(element);
-    if (typeof this === 'string') {
-        setCaptures(deserializeCaptures(container, this));
-    }
-    const task = _captures[0];
-    task.$flags$ |= 4 /* TaskFlags.DIRTY */;
-    markVNodeDirty(container, task.$el$, 1 /* ChoreBits.TASKS */);
+    return whenContainerDataReady(container, () => {
+        if (typeof this === 'string') {
+            setCaptures(deserializeCaptureDeltas(container, this));
+        }
+        const task = _captures[0];
+        task.$flags$ |= 4 /* TaskFlags.DIRTY */;
+        markVNodeDirty(container, task.$el$, 1 /* ChoreBits.TASKS */);
+    });
 }
 
 const throwIfQRLNotResolved = (qrl) => {
@@ -9381,7 +9584,7 @@ const isSerializerObj = (obj) => {
     return isObject(obj) && typeof obj[SerializerSymbol] === 'function';
 };
 const getComputedSignalFlags = (serializationStrategy) => {
-    let flags = 1 /* SignalFlags.INVALID */;
+    let flags = 1 /* ComputedSignalFlags.INVALID */;
     switch (serializationStrategy) {
         // TODO: implement this in the future
         // case 'auto':
@@ -9396,6 +9599,18 @@ const getComputedSignalFlags = (serializationStrategy) => {
     }
     return flags;
 };
+/**
+ * Mark this signal as owned outside of the component that read it.
+ *
+ * Externally owned signals are preserved when found in a component's sequential scope during
+ * component cleanup.
+ *
+ * @internal
+ */
+const _markSignalAsExternallyOwned = (signal) => {
+    signal.$flags$ |=
+        4 /* ComputedSignalFlags.PRESERVE_ON_SEQ_CLEANUP */;
+};
 
 const stringifyPath = [];
 function qwikDebugToString(value) {
@@ -9556,6 +9771,7 @@ const unwrapStore = (value) => {
 const isStore = (value) => {
     return STORE_TARGET in value;
 };
+/** @internal */
 function createStore(container, obj, flags) {
     return new Proxy(obj, new StoreHandler(flags, container || null));
 }
@@ -9754,6 +9970,7 @@ function getEffects(target, prop, storeEffects) {
 
 /** Used to represent an undefined value that must be serialized */
 const explicitUndefined = Symbol('undefined');
+const EMPTY_OBJECT_PAYLOAD = 0;
 // Used for allocate, make sure they are in sync with Constants
 const _constants = [
     undefined,
@@ -9774,6 +9991,10 @@ const _constants = [
     Number.MAX_SAFE_INTEGER,
     Number.MAX_SAFE_INTEGER - 1,
     Number.MIN_SAFE_INTEGER,
+    ':',
+    '.',
+    'id',
+    'ref',
 ];
 // Used for dumpState, make sure they are in sync with Constants
 const _constantNames = [
@@ -9795,6 +10016,10 @@ const _constantNames = [
     'MAX_SAFE_INTEGER',
     'MAX_SAFE_INTEGER-1',
     'MIN_SAFE_INTEGER',
+    "':'",
+    "'.'",
+    "'id'",
+    "'ref'",
 ];
 // Used for dumpState, make sure they are in sync with TypeIds
 const _typeIdNames = [
@@ -9840,6 +10065,9 @@ const _typeIdNames = [
     'SubscriptionData',
     'EffectSubscription',
     'SubscriptionPatch',
+    'SubscriptionDataConstTrue',
+    'SubscriptionDataConstFalse',
+    'EffectSubscriptionNoData',
 ];
 
 function qrlToString(serializationContext, qrl, raw) {
@@ -9886,17 +10114,25 @@ function qrlToString(serializationContext, qrl, raw) {
         symbol = String(serializationContext.$addSyncFn$(null, 0, fn));
     }
     const captures = qrl.getCaptured();
-    let captureIds = null;
+    let captureDeltas = null;
     if (captures && captures.length > 0) {
         // We refer by id so every capture needs to be a root
-        captureIds = captures.map((ref) => `${serializationContext.$addRoot$(ref)}`).join(' ');
+        let previous = 0;
+        let output = '';
+        for (let i = 0; i < captures.length; i++) {
+            const captureId = serializationContext.$addRoot$(captures[i]);
+            const delta = captureId - previous;
+            previous = captureId;
+            output += (i === 0 ? '' : ' ') + delta;
+        }
+        captureDeltas = output;
     }
     if (raw) {
-        return [chunk, symbol, captureIds];
+        return [chunk, symbol, captureDeltas];
     }
     let qrlStringInline = `${chunk}#${symbol}`;
-    if (captureIds) {
-        qrlStringInline += `#${captureIds}`;
+    if (captureDeltas) {
+        qrlStringInline += `#${captureDeltas}`;
     }
     return qrlStringInline;
 }
@@ -9908,12 +10144,23 @@ function qrlToChunks(serializationContext, qrl) {
         return prefix;
     }
     const chunks = [prefix, '#'];
-    const captureIds = captures.split(' ');
-    for (let i = 0; i < captureIds.length; i++) {
-        if (i > 0) {
-            chunks.push(' ');
+    let previousCaptureId = 0;
+    let start = 0;
+    for (let i = 0; i <= captures.length; i++) {
+        if (i === captures.length || captures[i] === ' ') {
+            if (i > start) {
+                const captureId = previousCaptureId + Number(captures.slice(start, i));
+                if (start > 0) {
+                    chunks.push(' ');
+                    chunks.push({ id: captureId, base: previousCaptureId });
+                }
+                else {
+                    chunks.push(captureId);
+                }
+                previousCaptureId = captureId;
+            }
+            start = i + 1;
         }
-        chunks.push(Number(captureIds[i]));
     }
     return chunks;
 }
@@ -9929,10 +10176,14 @@ function createQRLWithBackChannel(chunk, symbol, captures, container) {
     }
     return createQRL(chunk, symbol, null, qrlImporter, captures, container);
 }
-/** Parses "chunk#hash#...rootRef" */
+/** Parses "chunk#hash#...captureDelta" */
 function parseQRL(qrl, container) {
-    const [chunk, symbol, captures] = qrl.split('#');
-    return createQRLWithBackChannel(chunk, symbol, captures || null, container);
+    const firstHash = qrl.indexOf('#');
+    const secondHash = qrl.indexOf('#', firstHash + 1);
+    const chunk = qrl.slice(0, firstHash);
+    const symbol = secondHash === -1 ? qrl.slice(firstHash + 1) : qrl.slice(firstHash + 1, secondHash);
+    const captures = secondHash !== -1 && secondHash + 1 < qrl.length ? qrl.slice(secondHash + 1) : null;
+    return createQRLWithBackChannel(chunk, symbol, captures, container);
 }
 const QRL_RUNTIME_CHUNK = 'mock-chunk';
 
@@ -10086,6 +10337,36 @@ class Serializer {
         }
         return Number(key);
     }
+    rebaseQrlCaptureDeltas$(baseRootId, captureDeltas) {
+        let previousCaptureId = 0;
+        let previousOutputBase = baseRootId;
+        const deltaList = captureDeltas.split(' ');
+        for (let i = 0; i < deltaList.length; i++) {
+            const captureId = previousCaptureId + Number(deltaList[i]);
+            deltaList[i] = String(captureId - previousOutputBase);
+            previousCaptureId = captureId;
+            previousOutputBase = captureId;
+        }
+        return deltaList.join(' ');
+    }
+    outputShortStringConstant$(value) {
+        switch (value) {
+            case ':':
+                this.output(3 /* TypeIds.Constant */, 18 /* Constants.Colon */);
+                return true;
+            case '.':
+                this.output(3 /* TypeIds.Constant */, 19 /* Constants.Dot */);
+                return true;
+            case 'id':
+                this.output(3 /* TypeIds.Constant */, 20 /* Constants.Id */);
+                return true;
+            case 'ref':
+                this.output(3 /* TypeIds.Constant */, 21 /* Constants.Ref */);
+                return true;
+            default:
+                return false;
+        }
+    }
     outputString(value) {
         const s = this.stringNeedsJsonEscape$(value) ? JSON.stringify(value) : QUOTE + value + QUOTE;
         let angleBracketIdx = -1;
@@ -10103,6 +10384,9 @@ class Serializer {
     writeRootRefPath(path) {
         this.$writer$.writeRootRefPath(path);
     }
+    writeRootRefDelta(id, base) {
+        this.$writer$.writeRootRefDelta(id, base);
+    }
     outputStringChunks(chunks) {
         this.$writer$.write(QUOTE);
         for (let i = 0; i < chunks.length; i++) {
@@ -10113,6 +10397,9 @@ class Serializer {
             else if (typeof chunk === 'number') {
                 this.writeRootRef(chunk);
             }
+            else if ('base' in chunk) {
+                this.writeRootRefDelta(chunk.id, chunk.base);
+            }
             else {
                 this.writeRootRefPath(chunk.path);
             }
@@ -10242,6 +10529,9 @@ class Serializer {
                     if (value.length === 0) {
                         this.output(3 /* TypeIds.Constant */, 4 /* Constants.EmptyString */);
                     }
+                    else if (this.outputShortStringConstant$(value)) {
+                        break;
+                    }
                     else {
                         // If the string is short, we output directly
                         // Very short strings add overhead to tracking
@@ -10268,6 +10558,9 @@ class Serializer {
                     else if (value === explicitUndefined) {
                         this.output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
                     }
+                    else {
+                        throw qError(20 /* QError.serializeErrorUnknownType */, [typeof value]);
+                    }
                     break;
                 case 'function':
                     if (value === Slot) {
@@ -10278,27 +10571,38 @@ class Serializer {
                     }
                     else if (isQrl(value)) {
                         if (this.getSeenRefOrOutput(value, index)) {
-                            const [chunk, symbol, captures] = qrlToString(this.$serializationContext$, value, true);
+                            const [chunk, symbol, captureDeltasFromZero] = qrlToString(this.$serializationContext$, value, true);
                             let data;
                             if (chunk !== '') {
                                 // not a sync QRL, replace all parts with string references
-                                data = [
-                                    this.$serializationContext$.$addRoot$(chunk),
-                                    '#',
-                                    this.$serializationContext$.$addRoot$(symbol),
-                                ];
-                                if (captures) {
-                                    const captureIds = captures.split(' ');
+                                const chunkRootId = this.$serializationContext$.$addRoot$(chunk);
+                                const symbolRootId = this.$serializationContext$.$addRoot$(symbol);
+                                const captureDeltas = captureDeltasFromZero
+                                    ? this.rebaseQrlCaptureDeltas$(symbolRootId, captureDeltasFromZero)
+                                    : null;
+                                data = [chunkRootId, '#', { id: symbolRootId, base: chunkRootId }];
+                                if (captureDeltasFromZero) {
+                                    let previousRootId = 0;
+                                    let previousOutputBase = symbolRootId;
+                                    let start = 0;
                                     data.push('#');
-                                    for (let i = 0; i < captureIds.length; i++) {
-                                        if (i > 0) {
-                                            data.push(' ');
+                                    for (let i = 0; i <= captureDeltasFromZero.length; i++) {
+                                        if (i === captureDeltasFromZero.length || captureDeltasFromZero[i] === ' ') {
+                                            if (i > start) {
+                                                const captureId = previousRootId + Number(captureDeltasFromZero.slice(start, i));
+                                                if (start > 0) {
+                                                    data.push(' ');
+                                                }
+                                                data.push({ id: captureId, base: previousOutputBase });
+                                                previousRootId = captureId;
+                                                previousOutputBase = captureId;
+                                            }
+                                            start = i + 1;
                                         }
-                                        data.push(Number(captureIds[i]));
                                     }
                                 }
                                 // Since we map QRLs to strings, we need to keep track of this secondary mapping
-                                const qrlKey = data.join('');
+                                const qrlKey = `${chunkRootId}#${symbolRootId - chunkRootId}${captureDeltas ? '#' + captureDeltas : ''}`;
                                 const existing = this.$qrlMap$.get(qrlKey);
                                 if (existing) {
                                     // We encountered the same QRL again, make it a root
@@ -10366,15 +10670,21 @@ class Serializer {
             ]);
         }
         else if (value instanceof SubscriptionData) {
-            // TODO make everything optional or use two types
-            this.output(39 /* TypeIds.SubscriptionData */, [
-                value.data.$scopedStyleIdPrefix$,
-                value.data.$isConst$,
-            ]);
+            const { $scopedStyleIdPrefix$, $isConst$ } = value.data;
+            if ($scopedStyleIdPrefix$ === null) {
+                this.output($isConst$ ? 42 /* TypeIds.SubscriptionDataConstTrue */ : 43 /* TypeIds.SubscriptionDataConstFalse */, 0);
+            }
+            else {
+                this.output(39 /* TypeIds.SubscriptionData */, [$scopedStyleIdPrefix$, $isConst$]);
+            }
         }
         else if (value instanceof EffectSubscription) {
-            // TODO no data if [null, true]
-            this.output(40 /* TypeIds.EffectSubscription */, [value.consumer, value.property, value.data]);
+            if (value.data === null) {
+                this.output(44 /* TypeIds.EffectSubscriptionNoData */, [value.consumer, value.property]);
+            }
+            else {
+                this.output(40 /* TypeIds.EffectSubscription */, [value.consumer, value.property, value.data]);
+            }
         }
         else if (value instanceof SubscriptionPatch) {
             this.output(41 /* TypeIds.SubscriptionPatch */, [value.rootId, value.subscriptions]);
@@ -10428,7 +10738,7 @@ class Serializer {
                         }
                     }
                 }
-                this.output(5 /* TypeIds.Object */, out.length ? out : 0);
+                this.output(5 /* TypeIds.Object */, out.length ? out : EMPTY_OBJECT_PAYLOAD);
             }
         }
         else if (this.$serializationContext$.$isDomRef$(value)) {
@@ -10461,16 +10771,18 @@ class Serializer {
                 let v = value.$untrackedValue$;
                 const shouldAlwaysSerialize = value.$flags$ & 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
                 const shouldNeverSerialize = value.$flags$ & 8 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
-                const isInvalid = value.$flags$ & 1 /* SignalFlags.INVALID */;
+                const isInvalid = value.$flags$ & 1 /* ComputedSignalFlags.INVALID */;
                 const isSkippable = fastSkipSerialize(value.$untrackedValue$);
-                const isAsync = value instanceof AsyncSignalImpl;
+                // async-mode computeds carry the same engine state and must round-trip like AsyncSignals
+                const isAsync = !!(value.$flags$ & 512 /* AsyncSignalFlags.ASYNC_MODE */);
+                const isErrored = isAsync && !!value.$untrackedError$;
                 const expires = isAsync && value.$expires$ !== 0 ? value.$expires$ : undefined;
                 const concurrency = isAsync && value.$concurrency$ !== 1 ? value.$concurrency$ : undefined;
                 const timeout = isAsync && value.$timeoutMs$ !== 0 ? value.$timeoutMs$ : undefined;
                 // Send the flags but remove the serialization bits and default to 0 when undefined
                 const asyncFlags = (isAsync && value.$flags$ & -25 /* SerializationSignalFlags.SERIALIZATION_ALL_STRATEGIES */) ||
                     undefined;
-                if (isInvalid || isSkippable) {
+                if (isInvalid || isSkippable || isErrored) {
                     v = NEEDS_COMPUTATION;
                 }
                 else if (shouldAlwaysSerialize) {
@@ -10518,30 +10830,6 @@ class Serializer {
         else if (value instanceof Date) {
             this.output(7 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
         }
-        else if (this.$hasTemporal$ && value instanceof Temporal.Duration) {
-            this.output(15 /* TypeIds.TemporalDuration */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.Instant) {
-            this.output(16 /* TypeIds.TemporalInstant */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.PlainDate) {
-            this.output(17 /* TypeIds.TemporalPlainDate */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.PlainDateTime) {
-            this.output(18 /* TypeIds.TemporalPlainDateTime */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.PlainMonthDay) {
-            this.output(19 /* TypeIds.TemporalPlainMonthDay */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.PlainTime) {
-            this.output(20 /* TypeIds.TemporalPlainTime */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.PlainYearMonth) {
-            this.output(21 /* TypeIds.TemporalPlainYearMonth */, value.toJSON());
-        }
-        else if (this.$hasTemporal$ && value instanceof Temporal.ZonedDateTime) {
-            this.output(22 /* TypeIds.TemporalZonedDateTime */, value.toJSON());
-        }
         else if (value instanceof RegExp) {
             this.output(8 /* TypeIds.Regex */, value.toString());
         }
@@ -10614,7 +10902,7 @@ class Serializer {
             this.output(37 /* TypeIds.JSXNode */, out);
         }
         else if (value instanceof Task) {
-            const out = [value.$qrl$, value.$flags$, value.$index$, value.$el$, value.$state$];
+            const out = [value.$qrl$, value.$flags$, value.$index$, value.$el$];
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
@@ -10668,6 +10956,30 @@ class Serializer {
                 this.output(2 /* TypeIds.ForwardRef */, this.getForwardRefId(forwardRefId));
             }
         }
+        else if (this.$hasTemporal$ && value instanceof Temporal.Duration) {
+            this.output(15 /* TypeIds.TemporalDuration */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.Instant) {
+            this.output(16 /* TypeIds.TemporalInstant */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainDate) {
+            this.output(17 /* TypeIds.TemporalPlainDate */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainDateTime) {
+            this.output(18 /* TypeIds.TemporalPlainDateTime */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainMonthDay) {
+            this.output(19 /* TypeIds.TemporalPlainMonthDay */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainTime) {
+            this.output(20 /* TypeIds.TemporalPlainTime */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.PlainYearMonth) {
+            this.output(21 /* TypeIds.TemporalPlainYearMonth */, value.toJSON());
+        }
+        else if (this.$hasTemporal$ && value instanceof Temporal.ZonedDateTime) {
+            this.output(22 /* TypeIds.TemporalZonedDateTime */, value.toJSON());
+        }
         else if (vnode_isVNode(value)) {
             this.output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
         }
@@ -10834,7 +11146,9 @@ const discoverValuesForVNodeData = (vnodeData, callback) => {
                 if (attrValue == null ||
                     typeof attrValue === 'string' ||
                     (typeof attrValue === 'number' && key === ELEMENT_ID) ||
-                    (key === ELEMENT_PROPS && isObjectEmpty(attrValue))) {
+                    (key === ELEMENT_PROPS &&
+                        (isObjectEmpty(attrValue) ||
+                            shouldSkipComponentProps(value, attrValue)))) {
                     continue;
                 }
                 callback(attrValue);
@@ -10843,6 +11157,21 @@ const discoverValuesForVNodeData = (vnodeData, callback) => {
     }
 };
 const isSsrAttrs = (value) => typeof value === 'object' && value !== null && !isObjectEmpty(value);
+const shouldSkipComponentProps = (attrs, value, isDevMode = isDev) => {
+    if (isDevMode || !Object.prototype.hasOwnProperty.call(attrs, OnRenderProp)) {
+        return false;
+    }
+    const owner = value[_OWNER];
+    return (isObjectEmpty(owner.varProps) &&
+        !hasPropsEffects(value) &&
+        !hasComponentBackRef(attrs[QBackRefs]));
+};
+const hasPropsEffects = (propsProxy) => {
+    return !!propsProxy[_PROPS_HANDLER].$effects$?.size;
+};
+const hasComponentBackRef = (backRefs) => {
+    return backRefs instanceof Map && backRefs.has(":" /* EffectProperty.COMPONENT */);
+};
 /**
  * When serializing the object we need check if it is URL, RegExp, Map, Set, etc. This is time
  * consuming. So if we could know that this is a basic object literal we could skip the check, and
@@ -11341,6 +11670,12 @@ const constantToName = (code) => {
  * @internal
  */
 function preprocessState(data, container, segmentId, startIndex = 0) {
+    const iterator = preprocessStateIterator(data, container, startIndex);
+    while (!iterator.next().done) {
+        // Run synchronously for non-browser and non-container deserialization paths.
+    }
+}
+function* preprocessStateIterator(data, container, startIndex = 0) {
     const isRootDeepRef = (type, value) => {
         return type === 1 /* TypeIds.RootRef */ && typeof value === 'string' && value.indexOf(' ') !== -1;
     };
@@ -11383,11 +11718,39 @@ function preprocessState(data, container, segmentId, startIndex = 0) {
         else if (isForwardRefsMap(data[i])) {
             container.$forwardRefs$ = data[i + 1];
         }
+        yield;
     }
 }
 
 const resolvers = new WeakMap();
-const pendingStoreTargets = new Map();
+const BASE64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const BASE64_REGEXP = /^[A-Za-z0-9+/]*$/;
+// Validate canonical unpadded base64 before its length controls allocation.
+const isCanonicalBase64 = (value) => {
+    if (typeof value !== 'string' || !BASE64_REGEXP.test(value)) {
+        return false;
+    }
+    const rest = value.length % 4;
+    if (rest === 0) {
+        return true;
+    }
+    if (rest === 1) {
+        return false;
+    }
+    const lastValue = BASE64_ALPHABET.indexOf(value[value.length - 1]);
+    return (lastValue & (rest === 2 ? 15 : 3)) === 0;
+};
+const beginDeserialization = (container) => {
+    const ownsPendingStoreTargets = container.$pendingStoreTargets$ === undefined;
+    container.$pendingStoreTargets$ ??= new Map();
+    return ownsPendingStoreTargets;
+};
+const endDeserialization = (container, ownsPendingStoreTargets) => {
+    if (ownsPendingStoreTargets) {
+        container.$pendingStoreTargets$.clear();
+        container.$pendingStoreTargets$ = undefined;
+    }
+};
 const allocate = (container, typeId, value) => {
     switch (typeId) {
         case 0 /* TypeIds.Plain */:
@@ -11413,10 +11776,17 @@ const allocate = (container, typeId, value) => {
         case 9 /* TypeIds.QRL */: {
             let qrl;
             if (typeof value === 'string') {
-                const [chunkId, symbolId, captureIds] = value.split('#');
-                const chunk = container.$getObjectById$(chunkId);
-                const symbol = container.$getObjectById$(symbolId);
-                qrl = createQRLWithBackChannel(chunk, symbol, captureIds || null, container);
+                const serializedQrl = value;
+                const firstHash = serializedQrl.indexOf('#');
+                const secondHash = serializedQrl.indexOf('#', firstHash + 1);
+                const chunkRootId = Number(serializedQrl.slice(0, firstHash));
+                const symbolDelta = secondHash === -1
+                    ? Number(serializedQrl.slice(firstHash + 1))
+                    : Number(serializedQrl.slice(firstHash + 1, secondHash));
+                const symbolRootId = chunkRootId + symbolDelta;
+                const chunk = container.$getObjectById$(chunkRootId);
+                const symbol = container.$getObjectById$(symbolRootId);
+                qrl = createQRLWithBackChannel(chunk, symbol, secondHash !== -1 ? serializedQrl : null, container);
             }
             else {
                 // Sync qrl
@@ -11425,7 +11795,7 @@ const allocate = (container, typeId, value) => {
             return qrl;
         }
         case 28 /* TypeIds.Task */:
-            return new Task(-1, -1, null, null, null, null);
+            return new Task(-1, -1, null, null, null);
         case 6 /* TypeIds.URL */:
             return new URL(value);
         case 7 /* TypeIds.Date */:
@@ -11473,7 +11843,7 @@ const allocate = (container, typeId, value) => {
             const storeValue = allocate(container, t, v);
             const store = getOrCreateStore(storeValue, 0 /* StoreFlags.NONE */, container);
             if (needsInflation(t)) {
-                pendingStoreTargets.set(storeValue, { t, v });
+                container.$pendingStoreTargets$.set(storeValue, { t, v });
             }
             // We must store the reference so it doesn't get deserialized again in inflate()
             data[0] = 0 /* TypeIds.Plain */;
@@ -11503,12 +11873,16 @@ const allocate = (container, typeId, value) => {
             // Don't leave unhandled promise rejections
             promise.catch(() => { });
             return promise;
-        case 27 /* TypeIds.Uint8Array */:
+        case 27 /* TypeIds.Uint8Array */: {
+            if (!isCanonicalBase64(value)) {
+                throw qError(38 /* QError.invalidUint8ArrayPayload */);
+            }
             const encodedLength = value.length;
-            const blocks = encodedLength >>> 2;
-            const rest = encodedLength & 3;
+            const blocks = Math.floor(encodedLength / 4);
+            const rest = encodedLength % 4;
             const decodedLength = blocks * 3 + (rest ? rest - 1 : 0);
             return new Uint8Array(decodedLength);
+        }
         case 38 /* TypeIds.PropsProxy */:
             return createPropsProxy(null);
         case 10 /* TypeIds.VNode */:
@@ -11549,7 +11923,12 @@ const allocate = (container, typeId, value) => {
             }
         case 39 /* TypeIds.SubscriptionData */:
             return new SubscriptionData({});
+        case 42 /* TypeIds.SubscriptionDataConstTrue */:
+            return new SubscriptionData({ $scopedStyleIdPrefix$: null, $isConst$: true });
+        case 43 /* TypeIds.SubscriptionDataConstFalse */:
+            return new SubscriptionData({ $scopedStyleIdPrefix$: null, $isConst$: false });
         case 40 /* TypeIds.EffectSubscription */:
+        case 44 /* TypeIds.EffectSubscriptionNoData */:
             return new EffectSubscription(null, null, null, null);
         case 41 /* TypeIds.SubscriptionPatch */:
             return new SubscriptionPatch();
@@ -11985,6 +12364,7 @@ function processJSXNode(ssr, enqueue, value, options) {
                     if (isPromise(jsxOutput)) {
                         // Defer reading QScopedStyle until after the promise resolves
                         enqueue(async () => {
+                            await ssr.streamHandler.flush();
                             const resolvedOutput = await jsxOutput;
                             const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
                             enqueue(resolvedOutput);
@@ -12016,7 +12396,7 @@ function processJSXNode(ssr, enqueue, value, options) {
 function maybeAddPollingAsyncSignalToEagerResume(serializationCtx, signal) {
     // Unwrap if it's a WrappedSignalImpl
     const unwrappedSignal = signal instanceof WrappedSignalImpl ? signal.$unwrapIfSignal$() : signal;
-    if (unwrappedSignal instanceof AsyncSignalImpl) {
+    if (unwrappedSignal instanceof ComputedSignalImpl) {
         const expires = unwrappedSignal.$expires$;
         // Don't check for $effects$ here - effects are added later during tracking.
         // The AsyncSignal's polling mechanism will check for effects before scheduling.
@@ -12199,7 +12579,7 @@ function setEvent(serializationCtx, key, rawValue, hasMovedCaptures) {
          *
          * For internal qrls (starting with `_`) we assume that they do the right thing.
          */
-        if (!qrl.$symbol$.startsWith('_') && (qrl.$captures$?.length || hasMovedCaptures)) {
+        if (!qrl.$symbol$.startsWith('_') && (Array.isArray(qrl.$captures$) || hasMovedCaptures)) {
             qrl = createQRL(null, '_run', _run, null, [qrl]);
         }
         return qrlToChunks(serializationCtx, qrl);
@@ -12411,20 +12791,26 @@ const useOnEventsSequentialScope = () => {
  * @internal
  */
 const _hmr = function (event, element) {
-    if (!event.detail.files.some((file) => element.getAttribute('data-qwik-inspector')?.startsWith(file))) {
-        return;
-    }
     // Deserialize captures from `this` when called via qwikloader/attribute dispatch
-    if (typeof this === 'string') {
-        const container = getDomContainer(element);
-        setCaptures(deserializeCaptures(container, this));
-    }
-    const host = _captures[0];
     const container = getDomContainer(element);
-    markVNodeDirty(container, host, 4 /* ChoreBits.COMPONENT */);
-    // Mark HMR as handled
-    const doc = element.ownerDocument;
-    doc.__hmrDone = doc.__hmrT;
+    return whenContainerDataReady(container, () => {
+        if (typeof this === 'string') {
+            setCaptures(deserializeCaptureDeltas(container, this));
+        }
+        const devPath = _captures?.[1];
+        const hmrPath = devPath ?? element.getAttribute('data-qwik-inspector');
+        if (!hmrPath || !event.detail.files.some((file) => hmrPath.startsWith(file))) {
+            return;
+        }
+        const host = _captures?.[0];
+        if (!host || host.flags & 32 /* VNodeFlags.Deleted */) {
+            return;
+        }
+        markVNodeDirty(container, host, 4 /* ChoreBits.COMPONENT */);
+        // Mark HMR as handled
+        const doc = element.ownerDocument;
+        doc.__hmrDone = doc.__hmrT;
+    });
 };
 let hmrQrl;
 /**
@@ -12441,7 +12827,7 @@ function _useHmr(devPath) {
     hmrQrl ||= inlinedQrl(_hmr, '_hmr');
     const hostElement = iCtx.$hostElement$;
     // We must capture the vnode to be able to re-render
-    const qrl = hmrQrl.w([hostElement]);
+    const qrl = hmrQrl.w([hostElement, devPath]);
     useOnDocument('qHmr', qrl);
 }
 
@@ -12529,22 +12915,93 @@ const isSafeObjectKV = (key, value) => {
         (typeof value !== 'function' || !dangerousObjectKeys.has(key)));
 };
 const inflate = (container, target, typeId, data) => {
+    const ownsPendingStoreTargets = beginDeserialization(container);
+    try {
+        const iterator = inflateIterator(container, target, typeId, data);
+        while (!iterator.next().done) {
+            // Run synchronously for lazy deserialization paths.
+        }
+    }
+    finally {
+        endDeserialization(container, ownsPendingStoreTargets);
+    }
+};
+function* eagerDeserializeArrayIterator(container, data, output = Array(data.length / 2)) {
+    for (let i = 0; i < data.length; i += 2) {
+        output[i / 2] = yield* deserializeDataIterator(container, data[i], data[i + 1]);
+        yield;
+    }
+    return output;
+}
+function* eagerDeserializeStateIterator(container, data, output = Array(data.length / 2)) {
+    const ownsPendingStoreTargets = beginDeserialization(container);
+    const length = data.length / 2;
+    const allocated = new Uint8Array(length);
+    const previousGetObjectById = container.$getObjectById$;
+    const allocateRoot = (index) => {
+        if (!allocated[index]) {
+            allocated[index] = 1;
+            const typeIndex = index * 2;
+            const typeId = data[typeIndex];
+            const value = data[typeIndex + 1];
+            output[index] = typeId === 0 /* TypeIds.Plain */ ? value : allocate(container, typeId, value);
+        }
+        return output[index];
+    };
+    container.$getObjectById$ = (id) => allocateRoot(typeof id === 'string' ? parseInt(id, 10) : id);
+    try {
+        for (let i = 0; i < length; i++) {
+            allocateRoot(i);
+            yield;
+        }
+        for (let i = 0; i < length; i++) {
+            const typeIndex = i * 2;
+            const typeId = data[typeIndex];
+            const value = data[typeIndex + 1];
+            const propValue = output[i];
+            data[typeIndex] = 0 /* TypeIds.Plain */;
+            data[typeIndex + 1] = propValue;
+            if (needsInflation(typeId)) {
+                yield* inflateIterator(container, propValue, typeId, value);
+            }
+            yield;
+        }
+    }
+    finally {
+        container.$getObjectById$ = previousGetObjectById;
+        endDeserialization(container, ownsPendingStoreTargets);
+    }
+    return output;
+}
+function* deserializeDataIterator(container, typeId, value) {
+    if (typeId === 0 /* TypeIds.Plain */) {
+        return value;
+    }
+    const propValue = allocate(container, typeId, value);
+    if (needsInflation(typeId)) {
+        yield* inflateIterator(container, propValue, typeId, value);
+    }
+    return propValue;
+}
+function* inflateIterator(container, target, typeId, data) {
     if (typeId === 0 /* TypeIds.Plain */) {
         // Already processed
         return;
     }
+    if (typeId === 5 /* TypeIds.Object */ && data !== EMPTY_OBJECT_PAYLOAD && !Array.isArray(data)) {
+        throw new Error('Invalid Object payload');
+    }
     // Restore the complex data, special case for Array
     if (typeId !== 4 /* TypeIds.Array */ && Array.isArray(data)) {
-        data = _eagerDeserializeArray(container, data);
+        data = yield* eagerDeserializeArrayIterator(container, data);
     }
     switch (typeId) {
         case 4 /* TypeIds.Array */:
             // Arrays are special, we need to fill the array in place
-            _eagerDeserializeArray(container, data, target);
+            yield* eagerDeserializeArrayIterator(container, data, target);
             break;
         case 5 /* TypeIds.Object */:
-            if (data === 0) {
-                // Special case, was an empty object
+            if (data === EMPTY_OBJECT_PAYLOAD) {
                 break;
             }
             for (let i = 0; i < data.length; i += 2) {
@@ -12556,37 +13013,65 @@ const inflate = (container, target, typeId, data) => {
                 target[key] = value;
             }
             break;
-        case 28 /* TypeIds.Task */:
+        case 25 /* TypeIds.Set */: {
+            const set = target;
+            const d = data;
+            for (let i = 0; i < d.length; i++) {
+                set.add(d[i]);
+                yield;
+            }
+            break;
+        }
+        case 26 /* TypeIds.Map */: {
+            const map = target;
+            const d = data;
+            for (let i = 0; i < d.length; i++) {
+                map.set(d[i++], d[i]);
+                yield;
+            }
+            break;
+        }
+        case 24 /* TypeIds.Promise */: {
+            const promise = target;
+            const [resolved, result] = data;
+            const [resolve, reject] = resolvers.get(promise);
+            if (resolved) {
+                // Native Promises cannot fulfill with another Promise.
+                if (resolvers.has(result)) {
+                    throw qError(37 /* QError.invalidPromiseDependency */);
+                }
+                resolve(result);
+            }
+            else {
+                reject(result);
+            }
+            break;
+        }
+        case 23 /* TypeIds.Error */: {
+            const d = data;
+            target.message = d[0];
+            for (let i = 1; i < d.length; i += 2) {
+                const key = d[i];
+                const value = d[i + 1];
+                if (isSafeObjectKV(key, value)) {
+                    target[key] = value;
+                }
+                yield;
+            }
+            break;
+        }
+        case 28 /* TypeIds.Task */: {
             const task = target;
             const v = data;
             task.$qrl$ = v[0];
             task.$flags$ = v[1];
             task.$index$ = v[2];
             task.$el$ = v[3];
-            task.$state$ = v[4];
             break;
+        }
         case 29 /* TypeIds.Component */:
             target[SERIALIZABLE_STATE][0] = data[0];
             break;
-        case 35 /* TypeIds.Store */: {
-            // Inflate the store target
-            const store = unwrapStore(target);
-            const storeTarget = pendingStoreTargets.get(store);
-            if (storeTarget) {
-                pendingStoreTargets.delete(store);
-                inflate(container, store, storeTarget.t, storeTarget.v);
-            }
-            /**
-             * Note that we don't do anything with the innerstores we added during serialization, because
-             * they are already inflated in the deserialize of the data, above.
-             */
-            const [, flags, effects] = data;
-            const storeHandler = getStoreHandler(target);
-            storeHandler.$flags$ = flags;
-            storeHandler.$effects$ = effects;
-            restoreEffectBackRefForEffectsMap(storeHandler.$effects$, store);
-            break;
-        }
         case 30 /* TypeIds.Signal */: {
             const signal = target;
             const d = data;
@@ -12602,7 +13087,7 @@ const inflate = (container, target, typeId, data) => {
             signal.$args$ = d[1];
             signal.$untrackedValue$ = NEEDS_COMPUTATION;
             signal.$flags$ = d[2];
-            signal.$flags$ |= 1 /* SignalFlags.INVALID */;
+            signal.$flags$ |= 1 /* ComputedSignalFlags.INVALID */;
             signal.$hostElement$ = d[3];
             signal.$effects$ = new Set(d.slice(4));
             inflateWrappedSignalValue(signal);
@@ -12628,7 +13113,7 @@ const inflate = (container, target, typeId, data) => {
             asyncSignal.$flags$ = d[5] ?? 0;
             if (asyncSignal.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
                 // If it's client only, it was serialized because it pretended to be loading
-                asyncSignal.$untrackedLoading$ = true;
+                asyncSignal.$untrackedPending$ = true;
             }
             const hasValue = d.length > 6;
             if (hasValue) {
@@ -12636,7 +13121,7 @@ const inflate = (container, target, typeId, data) => {
             }
             // can happen when never serialize etc
             if (asyncSignal.$untrackedValue$ === NEEDS_COMPUTATION) {
-                asyncSignal.$flags$ |= 1 /* SignalFlags.INVALID */;
+                asyncSignal.$flags$ |= 1 /* ComputedSignalFlags.INVALID */;
             }
             // Handle old format (negative = no poll) and new format (always positive, flag in d[5])
             const rawExpires = (d[7] ?? 0);
@@ -12676,84 +13161,44 @@ const inflate = (container, target, typeId, data) => {
             if (hasValue) {
                 computed.$untrackedValue$ = d[2];
             }
-            if (typeId !== 34 /* TypeIds.SerializerSignal */ && computed.$untrackedValue$ !== NEEDS_COMPUTATION) {
-                // If we have a value after SSR, it will always be mean the signal was not invalid
-                // The serialized signal is always left invalid so it can recreate the custom object
-                computed.$flags$ &= -2 /* SignalFlags.INVALID */;
-            }
-            restoreEffectBackRefForEffects(computed.$effects$, computed);
-            break;
-        }
-        case 23 /* TypeIds.Error */: {
-            const d = data;
-            target.message = d[0];
-            for (let i = 1; i < d.length; i += 2) {
-                target[d[i]] = d[i + 1];
-            }
-            break;
-        }
-        case 36 /* TypeIds.FormData */: {
-            const formData = target;
-            const d = data;
-            for (let i = 0; i < d.length; i++) {
-                formData.append(d[i++], d[i]);
-            }
-            break;
-        }
-        case 37 /* TypeIds.JSXNode */: {
-            const jsx = target;
-            const [type, key, varProps, constProps, children, toSort] = data;
-            jsx.type = type;
-            jsx.key = key;
-            jsx.varProps = varProps;
-            jsx.constProps = constProps || null;
-            jsx.children = children;
-            jsx.toSort = !!toSort;
-            break;
-        }
-        case 25 /* TypeIds.Set */: {
-            const set = target;
-            const d = data;
-            for (let i = 0; i < d.length; i++) {
-                set.add(d[i]);
-            }
-            break;
-        }
-        case 26 /* TypeIds.Map */: {
-            const map = target;
-            const d = data;
-            for (let i = 0; i < d.length; i++) {
-                map.set(d[i++], d[i]);
-            }
-            break;
-        }
-        case 24 /* TypeIds.Promise */: {
-            const promise = target;
-            const [resolved, result] = data;
-            const [resolve, reject] = resolvers.get(promise);
-            if (resolved) {
-                resolve(result);
-            }
-            else {
-                reject(result);
-            }
+            if (typeId !== 34 /* TypeIds.SerializerSignal */ && computed.$untrackedValue$ !== NEEDS_COMPUTATION) {
+                // If we have a value after SSR, it will always be mean the signal was not invalid
+                // The serialized signal is always left invalid so it can recreate the custom object
+                computed.$flags$ &= -2 /* ComputedSignalFlags.INVALID */;
+            }
+            restoreEffectBackRefForEffects(computed.$effects$, computed);
             break;
         }
-        case 27 /* TypeIds.Uint8Array */:
-            const bytes = target;
-            const buf = atob(data);
-            let i = 0;
-            for (let j = 0; j < buf.length; j++) {
-                const s = buf[j];
-                bytes[i++] = s.charCodeAt(0);
+        case 36 /* TypeIds.FormData */: {
+            const formData = target;
+            const d = data;
+            for (let i = 0; i < d.length; i++) {
+                formData.append(d[i++], d[i]);
+                yield;
             }
             break;
-        case 38 /* TypeIds.PropsProxy */:
+        }
+        case 37 /* TypeIds.JSXNode */: {
+            const jsx = target;
+            const [type, key, varProps, constProps, children, toSort] = data;
+            jsx.type = type;
+            jsx.key = key;
+            jsx.varProps = varProps;
+            jsx.constProps = constProps || null;
+            jsx.children = children;
+            jsx.toSort = !!toSort;
+            break;
+        }
+        case 38 /* TypeIds.PropsProxy */: {
             const propsProxy = target;
             const d = data;
             let owner = d[0];
             if (owner === _UNINITIALIZED) {
-                owner = new JSXNodeImpl(Fragment, d[1], d[2], null, 0, null);
+                owner = new JSXNodeImpl(Fragment, null, null, null, 0, null);
+                // Important: var/const props can be eager-deserialization placeholders. (empty objects)
+                // Do not let JSXNodeImpl constructor normalize {} to EMPTY_OBJ/null.
+                owner.varProps = d[1];
+                owner.constProps = d[2];
                 owner._proxy = propsProxy;
             }
             propsProxy[_OWNER] = owner;
@@ -12761,12 +13206,16 @@ const inflate = (container, target, typeId, data) => {
             propsHandler.$effects$ = d[3];
             restoreEffectBackRefForEffectsMap(propsHandler.$effects$, propsProxy);
             break;
+        }
         case 39 /* TypeIds.SubscriptionData */: {
             const effectData = target;
             effectData.data.$scopedStyleIdPrefix$ = data[0];
             effectData.data.$isConst$ = data[1];
             break;
         }
+        case 42 /* TypeIds.SubscriptionDataConstTrue */:
+        case 43 /* TypeIds.SubscriptionDataConstFalse */:
+            break;
         case 40 /* TypeIds.EffectSubscription */: {
             const effectSub = target;
             const d = data;
@@ -12783,29 +13232,43 @@ const inflate = (container, target, typeId, data) => {
             patch.subscriptions = d[1];
             break;
         }
+        case 44 /* TypeIds.EffectSubscriptionNoData */: {
+            const effectSub = target;
+            const d = data;
+            effectSub.consumer = d[0];
+            effectSub.property = d[1];
+            effectSub.data = null;
+            restoreEffectBackRefForConsumer(effectSub);
+            break;
+        }
+        case 27 /* TypeIds.Uint8Array */: {
+            const bytes = target;
+            const buf = atob(data);
+            for (let j = 0; j < buf.length; j++) {
+                bytes[j] = buf.charCodeAt(j);
+                if ((j & 31) === 31) {
+                    yield;
+                }
+            }
+            break;
+        }
+        case 35 /* TypeIds.Store */: {
+            const store = unwrapStore(target);
+            const storeTarget = container.$pendingStoreTargets$.get(store);
+            if (storeTarget) {
+                container.$pendingStoreTargets$.delete(store);
+                yield* inflateIterator(container, store, storeTarget.t, storeTarget.v);
+            }
+            const [, flags, effects] = data;
+            const storeHandler = getStoreHandler(target);
+            storeHandler.$flags$ = flags;
+            storeHandler.$effects$ = effects;
+            restoreEffectBackRefForEffectsMap(storeHandler.$effects$, store);
+            break;
+        }
         default:
             throw qError(16 /* QError.serializeErrorNotImplemented */, [typeId]);
     }
-};
-/**
- * Restores an array eagerly. If you need it lazily, use `deserializeData(container, TypeIds.Array,
- * array)` instead
- */
-const _eagerDeserializeArray = (container, data, output = Array(data.length / 2)) => {
-    for (let i = 0; i < data.length; i += 2) {
-        output[i / 2] = deserializeData(container, data[i], data[i + 1]);
-    }
-    return output;
-};
-function deserializeData(container, typeId, value) {
-    if (typeId === 0 /* TypeIds.Plain */) {
-        return value;
-    }
-    const propValue = allocate(container, typeId, value);
-    if (needsInflation(typeId)) {
-        inflate(container, propValue, typeId, value);
-    }
-    return propValue;
 }
 function inflateWrappedSignalValue(signal) {
     if (signal.$hostElement$ !== null && vnode_isVNode(signal.$hostElement$)) {
@@ -12916,15 +13379,21 @@ class DeserializationHandler {
             return value;
         }
         const container = this.$container$;
-        const propValue = allocate(container, typeId, value);
-        Reflect.set(target, property, propValue);
-        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);
+        const ownsPendingStoreTargets = beginDeserialization(container);
+        try {
+            const propValue = allocate(container, typeId, value);
+            Reflect.set(target, property, propValue);
+            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;
+        }
+        finally {
+            endDeserialization(container, ownsPendingStoreTargets);
         }
-        return propValue;
     }
     has(target, property) {
         if (property === SERIALIZER_PROXY_UNWRAP) {
@@ -12948,6 +13417,54 @@ class DeserializationHandler {
     }
 }
 
+const YIELD_INTERVAL = 10;
+const scheduleYieldingIterator = (state) => {
+    if (!state.$scheduled$) {
+        state.$scheduled$ = true;
+        state.$schedule$();
+    }
+};
+const runYieldingIterator = (state, onDone, onError) => {
+    state.$scheduled$ = false;
+    const deadline = performance.now() + YIELD_INTERVAL;
+    let count = 0;
+    try {
+        while (true) {
+            const result = state.$iterator$.next();
+            if (result.done) {
+                onDone(result.value);
+                return;
+            }
+            // Sampling the clock every 32 steps keeps `performance.now()` out of the hottest path.
+            if ((++count & 31) === 0 && performance.now() >= deadline) {
+                scheduleYieldingIterator(state);
+                return;
+            }
+        }
+    }
+    catch (error) {
+        onError(error);
+    }
+};
+const createYieldingIteratorState = (iterator, onDone, onError) => {
+    const state = {
+        $iterator$: iterator,
+        $schedule$: undefined,
+        $scheduled$: false,
+    };
+    const schedule = createMacroTask(() => {
+        runYieldingIterator(state, (value) => {
+            schedule.$destroy$?.();
+            onDone(value);
+        }, (error) => {
+            schedule.$destroy$?.();
+            onError(error);
+        });
+    });
+    state.$schedule$ = schedule;
+    return state;
+};
+
 /**
  * Serialize data to string using SerializationContext.
  *
@@ -12960,12 +13477,12 @@ async function _serialize(data) {
     return serializationContext.$writer$.toString();
 }
 /**
- * Deserialize data from string to an array of objects.
+ * Deserialize data from string.
  *
  * @param rawStateData - Data to deserialize
  * @internal
  */
-function _deserialize(rawStateData) {
+async function _deserialize(rawStateData) {
     if (rawStateData == null) {
         throw new Error('No state data to deserialize');
     }
@@ -12973,9 +13490,18 @@ function _deserialize(rawStateData) {
     if (!Array.isArray(stateData) || stateData.length < 2 || typeof stateData[0] !== 'number') {
         throw new Error('Invalid state data');
     }
-    const container = _createDeserializeContainer(stateData);
-    return deserializeData(container, stateData[0], stateData[1]);
+    const state = Array(stateData.length / 2);
+    const container = createBaseDeserializeContainer(stateData, () => state);
+    container.$state$ = state;
+    await runDeserializeIterator(eagerDeserializeStateIterator(container, stateData, state));
+    return state[0];
 }
+const runDeserializeIterator = (iterator) => {
+    return new Promise((resolve, reject) => {
+        const state = createYieldingIteratorState(iterator, resolve, reject);
+        scheduleYieldingIterator(state);
+    });
+};
 function getObjectById(id, stateData) {
     if (typeof id === 'string') {
         id = parseInt(id, 10);
@@ -12989,8 +13515,14 @@ function getObjectById(id, stateData) {
 function _createDeserializeContainer(stateData) {
     // eslint-disable-next-line prefer-const
     let state;
+    const container = createBaseDeserializeContainer(stateData, () => state);
+    state = wrapDeserializerProxy(container, stateData);
+    container.$state$ = state;
+    return container;
+}
+function createBaseDeserializeContainer(stateData, getState) {
     const container = {
-        $getObjectById$: (id) => getObjectById(id, state),
+        $getObjectById$: (id) => getObjectById(id, getState()),
         $getForwardRef$: (id) => container.$forwardRefs$?.[Number(id)],
         getSyncFn: (_) => {
             const fn = () => { };
@@ -13001,8 +13533,6 @@ function _createDeserializeContainer(stateData) {
         $forwardRefs$: null,
     };
     preprocessState(stateData, container);
-    state = wrapDeserializerProxy(container, stateData);
-    container.$state$ = state;
     return container;
 }
 
@@ -13554,13 +14084,12 @@ const mergeSubscriptionSet = (container, producer, backRef, rootEffects, patchEf
 };
 
 const processedStatePatchScripts = new WeakMap();
-/** @internal */
-const processSegmentStateScripts = (container, segmentId) => {
+function* processSegmentStateScriptsIterator(container, segmentId) {
     if (!__EXPERIMENTAL__.suspense) {
         return;
     }
     const stateContainer = container;
-    const qwikStates = stateContainer.element.querySelectorAll(`${stateScriptSelector(stateContainer.$instanceHash$)}${QStatePatchAttrSelector}`);
+    const qwikStates = stateContainer.element.querySelectorAll(`script[type="qwik/state"][q\\:instance="${stateContainer.$instanceHash$}"]${QStatePatchAttrSelector}`);
     const processedScripts = getProcessedStatePatchScripts(container);
     for (let i = 0; i < qwikStates.length; i++) {
         const stateScript = qwikStates[i];
@@ -13571,9 +14100,10 @@ const processSegmentStateScripts = (container, segmentId) => {
             continue;
         }
         processedScripts.add(stateScript);
-        processStatePatch(container, stateContainer, stateScript.textContent);
+        yield* processStatePatch(container, stateContainer, stateScript.textContent);
+        yield;
     }
-};
+}
 const getProcessedStatePatchScripts = (container) => {
     let processedScripts = processedStatePatchScripts.get(container);
     if (!processedScripts) {
@@ -13582,20 +14112,18 @@ const getProcessedStatePatchScripts = (container) => {
     }
     return processedScripts;
 };
-const stateScriptSelector = (instanceHash) => {
-    return `script[type="qwik/state"][q\\:instance="${instanceHash}"]`;
-};
-const processStatePatch = (container, stateContainer, textContent) => {
-    if (textContent) {
-        const [rootStart, rawStateData, forwardRefs, subscriptionPatchRootId] = JSON.parse(textContent);
-        appendStatePatchRoots(container, stateContainer, rootStart, rawStateData);
-        mergeForwardRefs(stateContainer, forwardRefs || undefined);
-        applySubscriptionPatches(container, subscriptionPatchRootId === undefined
-            ? undefined
-            : stateContainer.$getObjectById$(subscriptionPatchRootId));
+function* processStatePatch(container, stateContainer, textContent) {
+    if (!textContent) {
+        return;
     }
-};
-const appendStatePatchRoots = (container, stateContainer, rootStart, rawStateData) => {
+    const [rootStart, rawStateData, forwardRefs, subscriptionPatchRootId] = JSON.parse(textContent);
+    yield* appendStatePatchRoots(container, stateContainer, rootStart, rawStateData);
+    mergeForwardRefs(stateContainer, forwardRefs || undefined);
+    applySubscriptionPatches(container, subscriptionPatchRootId === undefined
+        ? undefined
+        : stateContainer.$getObjectById$(subscriptionPatchRootId));
+}
+function* appendStatePatchRoots(container, stateContainer, rootStart, rawStateData) {
     const currentRootCount = stateContainer.$rawStateData$.length / 2;
     if (rootStart !== currentRootCount) {
         if (qDev) {
@@ -13605,12 +14133,13 @@ const appendStatePatchRoots = (container, stateContainer, rootStart, rawStateDat
     }
     for (let i = 0; i < rawStateData.length; i++) {
         stateContainer.$rawStateData$[rootStart * 2 + i] = rawStateData[i];
+        yield;
     }
-    preprocessState(stateContainer.$rawStateData$, container, undefined, rootStart * 2);
+    yield* preprocessStateIterator(stateContainer.$rawStateData$, container, rootStart * 2);
     stateContainer.$stateData$ = wrapDeserializerProxy(container, stateContainer.$rawStateData$);
     stateContainer.$stateData$.length = stateContainer.$rawStateData$.length / 2;
     stateContainer.$rootForwardRefs$ = stateContainer.$forwardRefs$;
-};
+}
 const mergeForwardRefs = (stateContainer, forwardRefs) => {
     if (!forwardRefs) {
         return;
@@ -13625,24 +14154,172 @@ const mergeForwardRefs = (stateContainer, forwardRefs) => {
     stateContainer.$forwardRefs$ = rootForwardRefs;
 };
 
-// NOTE: we want to move this function to qwikloader, and therefore this function should not have any external dependencies
+const Q_SUSPENSE_RESOLVED = 'q:r';
+const Q_PATCH = 'q:patch';
+/**
+ * Process the VNodeData script tags and store the VNodeData in the VNodeDataMap.
+ *
+ * The end result of this function is that each DOM element has the associated `VNodeData` attached
+ * to it, to be used later `VNode` materialization. The "attachment" is done through the
+ * `VNodeDataMap`.
+ *
+ * Run this function on startup to process the `<script type="qwik/vnode">` tags. The data in the
+ * tags needs to be parsed and attached to the DOM elements. (We do this through `VNodeDataMap`)
+ * `VNodeDataMap` is then used to lazily materialize the VNodes.
+ *
+ * Only one invocation of this function is needed per document/browser session.
+ *
+ * Below is an example of the kinds of constructs which need to be handled when dealing with
+ * VNodeData deserialization.
+ *
+ * ```
+ * <html q:container="paused">
+ *   <body>
+ *     <div q:container="paused">
+ *       <script type="qwik/vnode">...</script>
+ *     </div>
+ *     <div q:container="html">...</div>
+ *     before
+ *     <!--q:container=ABC-->
+ *     ...
+ *     <!--/q:container-->
+ *     after
+ *     <!--q:ignore=FOO-->
+ *     ...
+ *        <!--q:container-island=BAR-->
+ *        <div>some interactive island</div>
+ *        <!--/q:container-island-->
+ *     ...
+ *     <!--/q:ignore-->
+ *     <textarea q:container="text">...</textarea>
+ *     <script type="qwik/vnode">...</script>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * Each `qwik/vnode` script assumes that the elements are numbered in depth first order. For this
+ * reason, whenever the `processVNodeData` comes across a `q:container` it must ignore its
+ * children.
+ *
+ * IMPLEMENTATION:
+ *
+ * - Stack to keep track of the current `q:container` being processed.
+ * - Attach all `qwik/vnode` scripts (not the data contain within them) to the `q:container` element.
+ * - Walk the tree and process each `q:container` element.
+ */
+function processVNodeData(document, containerElement) {
+    const qDocument = document;
+    // Per-container gate: a walk already populated this container's refs → done.
+    if (containerElement?.qVNodeRefs) {
+        return;
+    }
+    // A document-wide walk is in flight; it will pick up this newly-added container too.
+    if (qDocument.qVNodeDataStarted && !qDocument.qVNodeDataProcessed) {
+        return;
+    }
+    qDocument.qVNodeDataStarted = true;
+    qDocument.qVNodeData ||= new WeakMap();
+    enqueueProcessVNodeDataJob(qDocument, processRootVNodeData(document));
+}
 function processOutOfOrderSegmentVNodeData(document, segmentId, contentNode) {
     if (!__EXPERIMENTAL__.suspense || !contentNode) {
         return;
     }
     const qContainerElement = contentNode.closest('[q\\:container]');
-    const script = qContainerElement?.querySelector(`script[type="qwik/vnode"][q\\:r="${segmentId}"]:not([q\\:patch])`);
-    processVNodeDataImpl(document, segmentId, qContainerElement, contentNode, script?.textContent || undefined);
-    const patches = qContainerElement?.querySelectorAll(`script[type="qwik/vnode"][q\\:r="${segmentId}"][q\\:patch]`);
-    for (let i = 0; patches && i < patches.length; i++) {
-        document.qProcessVNodeDataPatch?.(patches[i]);
+    if (!qContainerElement) {
+        return;
+    }
+    const script = qContainerElement.querySelector(`script[type="qwik/vnode"][q\\:r="${segmentId}"]:not([q\\:patch])`);
+    const patches = qContainerElement.querySelectorAll(`script[type="qwik/vnode"][q\\:r="${segmentId}"][q\\:patch]`);
+    enqueueProcessVNodeDataJob(document, processOutOfOrderSegmentVNodeDataIterator(document, segmentId, qContainerElement, contentNode, script?.textContent || undefined, patches));
+}
+const onVNodeDataReady = (document, callback) => {
+    const qDocument = document;
+    if (qDocument.qVNodeDataReady) {
+        callback();
+    }
+    else {
+        (qDocument.qVNodeDataCallbacks ||= []).push(callback);
+    }
+};
+function enqueueProcessVNodeDataJob(qDocument, iterator) {
+    const state = (qDocument.qVNodeDataState ||= {
+        $queue$: [],
+        $active$: null,
+    });
+    qDocument.qProcessVNodeDataPatch ||= (script) => enqueueProcessVNodeDataJob(qDocument, processVNodeDataPatch(qDocument, script));
+    qDocument.qVNodeDataReady = false;
+    state.$queue$.push(iterator);
+    scheduleProcessVNodeData(qDocument, state);
+}
+function scheduleProcessVNodeData(qDocument, state) {
+    if (state.$active$) {
+        return;
+    }
+    const iterator = state.$queue$.shift();
+    if (!iterator) {
+        markVNodeDataReady(qDocument);
+        return;
+    }
+    state.$active$ = createYieldingIteratorState(runProcessVNodeData(qDocument, state, iterator), () => {
+        if (qDocument.qVNodeDataState === state) {
+            state.$active$ = null;
+            scheduleProcessVNodeData(qDocument, state);
+        }
+    }, (error) => {
+        state.$active$ = null;
+        logError(error);
+        markVNodeDataReady(qDocument);
+    });
+    scheduleYieldingIterator(state.$active$);
+}
+function* runProcessVNodeData(qDocument, state, iterator) {
+    while (qDocument.qVNodeDataState === state) {
+        if (iterator.next().done) {
+            return;
+        }
+        yield;
+    }
+}
+function markVNodeDataReady(document) {
+    if (document.qVNodeDataReady) {
+        return;
+    }
+    document.qVNodeDataReady = true;
+    document.qVNodeDataState = undefined;
+    const callbacks = document.qVNodeDataCallbacks;
+    document.qVNodeDataCallbacks = undefined;
+    if (callbacks) {
+        for (let i = 0; i < callbacks.length; i++) {
+            callbacks[i]();
+        }
     }
 }
-function processVNodeData(document) {
-    processVNodeDataImpl(document);
-    document.qVNodeDataProcessed = true;
+function* processRootVNodeData(document) {
+    yield* processVNodeDataImpl(document);
+    const qDocument = document;
+    qDocument.qVNodeDataProcessed = true;
+    // Re-open the gate so a container added after this drain re-runs a walk.
+    qDocument.qVNodeDataStarted = false;
+}
+function* processOutOfOrderSegmentVNodeDataIterator(document, segmentId, segmentContainer, segmentContent, segmentVNodeData, patches) {
+    yield* processVNodeDataImpl(document, segmentId, segmentContainer, segmentContent, segmentVNodeData);
+    for (let i = 0; i < patches.length; i++) {
+        yield* processVNodeDataPatch(document, patches[i]);
+    }
 }
-function processVNodeDataImpl(document, segmentId, segmentContainer, segmentContent, segmentVNodeData) {
+function* processVNodeDataPatch(document, script) {
+    const qContainerElement = script?.closest('[q\\:container]');
+    const patchSegment = script?.getAttribute(Q_SUSPENSE_RESOLVED);
+    const contentNode = qContainerElement &&
+        (patchSegment
+            ? qContainerElement.querySelector(`[q\\:rp="${patchSegment}"]`)
+            : qContainerElement);
+    if (qContainerElement && contentNode) {
+        yield* processVNodeDataImpl(document, patchSegment || undefined, qContainerElement, contentNode, script.textContent);
+    }
+}
+function* processVNodeDataImpl(document, segmentId, segmentContainer, segmentContent, segmentVNodeData) {
     const Q_CONTAINER = 'q:container';
     const Q_CONTAINER_END = '/' + Q_CONTAINER;
     const Q_PROPS_SEPARATOR = ':';
@@ -13651,9 +14328,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
     const Q_IGNORE_END = '/' + Q_IGNORE;
     const Q_CONTAINER_ISLAND = 'q:container-island';
     const Q_CONTAINER_ISLAND_END = '/' + Q_CONTAINER_ISLAND;
-    const Q_SUSPENSE_RESOLVED = 'q:r';
     const Q_SUSPENSE_RESULT_PARENT = 'q:rp';
-    const Q_PATCH = 'q:patch';
     const qDocument = document;
     const vNodeDataMap = (qDocument.qVNodeData ||= new WeakMap());
     const prototype = document.body;
@@ -13671,7 +14346,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
     const hasAttribute = prototype.hasAttribute;
     const getNodeType = getter(prototype, 'nodeType');
     // Process all of the `qwik/vnode` script tags by attaching them to the corresponding containers.
-    const attachVnodeDataAndRefs = (element) => {
+    const attachVnodeDataAndRefs = function* (element) {
         const scripts = element.querySelectorAll('script[type="qwik/vnode"]');
         for (let i = 0; i < scripts.length; i++) {
             const script = scripts[i];
@@ -13679,6 +14354,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
             qContainer.qVNodeRefs ||= new Map();
             if (script.hasAttribute(Q_PATCH)) {
                 qDocument.qProcessVNodeDataPatch?.(script);
+                yield;
                 continue;
             }
             const scriptContent = script.textContent;
@@ -13689,14 +14365,21 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
             else {
                 qContainer.qVnodeData = scriptContent;
             }
+            yield;
         }
         const shadowRoots = element.querySelectorAll('[q\\:shadowroot]');
         for (let i = 0; i < shadowRoots.length; i++) {
             const parent = shadowRoots[i];
             const shadowRoot = parent.shadowRoot;
-            shadowRoot && attachVnodeDataAndRefs(shadowRoot);
+            if (shadowRoot) {
+                yield* attachVnodeDataAndRefs(shadowRoot);
+            }
+            yield;
         }
     };
+    ///////////////////////////////
+    // Functions to consume the tree.
+    ///////////////////////////////
     /**
      * Looks up which type of node this is in a monomorphic way which should be faster.
      *
@@ -13752,7 +14435,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
      * @param exitNode The node which represents the last node and we should exit.
      * @param qVNodeRefs Place to store the VNodeRefs
      */
-    const walkContainer = (walker, containerNode, node, exitNode, vData, qVNodeRefs, qContainerElement, segmentId) => {
+    const walkContainer = function* (walker, containerNode, node, exitNode, vData, qVNodeRefs, qContainerElement, segmentId) {
         const isSegment = __EXPERIMENTAL__.suspense && segmentId !== undefined;
         const vData_length = vData.length;
         /// Stores the current element index as the TreeWalker traverses the DOM.
@@ -13778,6 +14461,9 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
             }
             return elementsToSkip;
         };
+        if (!node) {
+            return;
+        }
         do {
             if (node === exitNode) {
                 return;
@@ -13791,7 +14477,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
                 while (cursor && !(nextNode = nextSibling(cursor))) {
                     cursor = cursor.parentNode;
                 }
-                walkContainer(walker, container, node, nextNode, container.qVnodeData || '', container.qVNodeRefs, container);
+                yield* walkContainer(walker, container, node, nextNode, container.qVnodeData || '', container.qVNodeRefs, container);
             }
             else if (nodeType === 16 /* NodeType.COMMENT_IGNORE_START */) {
                 let islandNode = node;
@@ -13826,7 +14512,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
                         throw new Error(`<!--${node?.nodeValue}--> not closed!`);
                     }
                 } while (getFastNodeType(nextNode) !== 8 /* NodeType.COMMENT_SKIP_END */);
-                walkContainer(walker, node, node, nextNode, '', null, qContainerElement);
+                yield* walkContainer(walker, node, node, nextNode, '', null, qContainerElement);
             }
             else if (nodeType === 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */) {
                 // If we are in a shadow root, we need to get the shadow root element.
@@ -13834,7 +14520,7 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
                 const shadowRootContainer = node;
                 const shadowRoot = shadowRootContainer?.shadowRoot;
                 if (shadowRoot) {
-                    walkContainer(
+                    yield* walkContainer(
                     // we need to create a new walker for the shadow root
                     document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, shadowRoot, null, '', null, null);
                 }
@@ -13897,51 +14583,42 @@ function processVNodeDataImpl(document, segmentId, segmentContainer, segmentCont
                 }
                 elementIdx++;
                 if (__EXPERIMENTAL__.suspense && contentBoundaryId !== null) {
-                    processSuspenseContentSegment(qContainerElement, node, contentBoundaryId);
+                    yield* processSuspenseContentSegment(qContainerElement, node, contentBoundaryId);
                     nextNode = nextSibling(node);
                     if (nextNode) {
                         walker.currentNode = nextNode;
                     }
                 }
             }
+            yield;
         } while ((node = nextNode || walker.nextNode()));
     };
-    const processVNodeDataScope = (qContainerElement, contentNode, vData, scopeSegmentId) => {
+    const processVNodeDataScope = function* (qContainerElement, contentNode, vData, scopeSegmentId) {
         qContainerElement.qVNodeRefs ||= new Map();
         const scopeWalker = document.createTreeWalker(document, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */);
         scopeWalker.currentNode = contentNode;
-        walkContainer(scopeWalker, contentNode, contentNode, nextSibling(contentNode), vData, qContainerElement.qVNodeRefs, qContainerElement, scopeSegmentId);
+        yield* walkContainer(scopeWalker, contentNode, contentNode, nextSibling(contentNode), vData, qContainerElement.qVNodeRefs, qContainerElement, scopeSegmentId);
     };
-    const processSuspenseContentSegment = __EXPERIMENTAL__.suspense
-        ? (qContainerElement, contentNode, boundaryId, vData) => {
-            vData ||= qContainerElement?.qSegmentVnodeData?.get(boundaryId);
-            if (qContainerElement && vData) {
-                processVNodeDataScope(qContainerElement, contentNode, vData, boundaryId);
-            }
-        }
-        : null;
-    qDocument.qProcessVNodeDataPatch = (script) => {
-        const qContainerElement = script?.closest('[q\\:container]');
-        const patchSegment = script?.getAttribute(Q_SUSPENSE_RESOLVED);
-        const contentNode = qContainerElement &&
-            (patchSegment
-                ? qContainerElement.querySelector(`[q\\:rp="${patchSegment}"]`)
-                : qContainerElement);
-        if (qContainerElement && contentNode) {
-            processVNodeDataScope(qContainerElement, contentNode, script.textContent, patchSegment || undefined);
+    const processSuspenseContentSegment = function* (qContainerElement, contentNode, boundaryId, vData) {
+        vData ||= qContainerElement?.qSegmentVnodeData?.get(boundaryId);
+        if (qContainerElement && vData) {
+            yield* processVNodeDataScope(qContainerElement, contentNode, vData, boundaryId);
         }
     };
-    if (__EXPERIMENTAL__.suspense && segmentId !== undefined) {
-        if (segmentContainer && segmentContent && segmentVNodeData) {
-            segmentContainer.qVNodeRefs ||= new Map();
-            processSuspenseContentSegment(segmentContainer, segmentContent, segmentId, segmentVNodeData);
+    if (segmentContainer && segmentContent && segmentVNodeData !== undefined) {
+        segmentContainer.qVNodeRefs ||= new Map();
+        if (__EXPERIMENTAL__.suspense && segmentId !== undefined) {
+            yield* processSuspenseContentSegment(segmentContainer, segmentContent, segmentId, segmentVNodeData);
+        }
+        else {
+            yield* processVNodeDataScope(segmentContainer, segmentContent, segmentVNodeData);
         }
         return;
     }
-    attachVnodeDataAndRefs(document);
+    yield* attachVnodeDataAndRefs(document);
     // Walk the tree and process each `q:container` element.
     const walker = document.createTreeWalker(document, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */);
-    walkContainer(walker, null, walker.firstChild(), null, '', null, null);
+    yield* walkContainer(walker, null, walker.firstChild(), null, '', null, null);
 }
 const isSeparator = (ch) => 
 /* `!` */ VNodeDataSeparator.ADVANCE_1 <= ch && ch <= VNodeDataSeparator.ADVANCE_8192; /* `.` */
@@ -13976,6 +14653,87 @@ const findVDataSectionEnd = (vData, start, end) => {
     return start;
 };
 
+function isContainerReady(container) {
+    return container.$containerDataProcessState$ === 3 /* ContainerDataProcessState.ProcessingStateDone */;
+}
+function processContainerStateData(container, iterator) {
+    const state = (container.$containerStateDataState$ ||= {
+        $queue$: [],
+        $active$: null,
+    });
+    container.$containerDataProcessState$ = 2 /* ContainerDataProcessState.ProcessingState */;
+    state.$queue$.push(iterator);
+    scheduleProcessContainerStateData(container, state);
+}
+const onContainerDataReady = (container, callback) => {
+    const domContainer = container;
+    const checkReady = () => {
+        if (!isContainerReady(domContainer)) {
+            (domContainer.$containerStateReadyCallbacks$ ||= []).push(checkReady);
+            return;
+        }
+        onVNodeDataReady(domContainer.document, () => {
+            if (isContainerReady(domContainer)) {
+                callback();
+            }
+            else {
+                checkReady();
+            }
+        });
+    };
+    checkReady();
+};
+const whenContainerDataReady = (container, callback) => {
+    const domContainer = container;
+    if (isContainerReady(domContainer) && domContainer.document.qVNodeDataReady) {
+        return callback();
+    }
+    return new Promise((resolve, reject) => {
+        onContainerDataReady(domContainer, () => {
+            try {
+                resolve(callback());
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    });
+};
+function scheduleProcessContainerStateData(container, state) {
+    if (state.$active$) {
+        return;
+    }
+    const iterator = state.$queue$.shift();
+    if (!iterator) {
+        markContainerDataReady(container);
+        return;
+    }
+    state.$active$ = createYieldingIteratorState(iterator, () => {
+        state.$active$ = null;
+        scheduleProcessContainerStateData(container, state);
+    }, (error) => {
+        state.$active$ = null;
+        logError(error);
+        markContainerDataReady(container);
+    });
+    scheduleYieldingIterator(state.$active$);
+}
+function markContainerDataReady(container) {
+    const state = container.$containerDataProcessState$;
+    if (state !== 2 /* ContainerDataProcessState.ProcessingState */) {
+        return;
+    }
+    container.$containerDataProcessState$ = 3 /* ContainerDataProcessState.ProcessingStateDone */;
+    container.$containerStateDataState$ = undefined;
+    const callbacks = container.$containerStateReadyCallbacks$;
+    container.$containerStateReadyCallbacks$ = undefined;
+    if (callbacks) {
+        for (let i = 0; i < callbacks.length; i++) {
+            callbacks[i]();
+        }
+    }
+}
+
 /** @file Public APIs for the SSR */
 /** @public */
 function getDomContainer(element) {
@@ -13998,8 +14756,12 @@ function getOutOfOrderStreamingScript(boundaryId, content) {
     const qContainerElement = content?.closest(QContainerSelector);
     const qContainer = qContainerElement?.qContainer;
     if (qContainer) {
-        processOutOfOrderSegmentVNodeData(qContainer.element.ownerDocument, segmentId, content);
-        processSegmentStateScripts(qContainer, segmentId);
+        const document = qContainer.element.ownerDocument;
+        processOutOfOrderSegmentVNodeData(document, segmentId, content);
+        onVNodeDataReady(document, () => {
+            qContainer.element.qContainer === qContainer &&
+                processContainerStateData(qContainer, processSegmentStateScriptsIterator(qContainer, segmentId));
+        });
     }
 }
 /** @internal */
@@ -14014,6 +14776,9 @@ class DomContainer extends _SharedContainer {
     $instanceHash$;
     $forwardRefs$ = null;
     vNodeLocate = (id) => vnode_locate(this.rootVNode, id);
+    $containerDataProcessState$ = 0 /* ContainerDataProcessState.NotStarted */;
+    $containerStateReadyCallbacks$ = undefined;
+    $containerStateDataState$ = undefined;
     $rawStateData$;
     $stateData$;
     $rootForwardRefs$ = null;
@@ -14024,7 +14789,8 @@ class DomContainer extends _SharedContainer {
         if (!this.qContainer) {
             throw qError(25 /* QError.elementWithoutContainer */);
         }
-        this.document = element.ownerDocument;
+        const document = element.ownerDocument;
+        this.document = document;
         this.element = element;
         this.$buildBase$ = element.getAttribute(QBaseAttr);
         this.$instanceHash$ = element.getAttribute(QInstanceAttr);
@@ -14032,23 +14798,46 @@ class DomContainer extends _SharedContainer {
         this.rootVNode = vnode_newUnMaterializedElement(this.element);
         this.$rawStateData$ = [];
         this.$stateData$ = [];
-        const document = this.element.ownerDocument;
-        if (!document.qVNodeDataProcessed) {
-            processVNodeData(document);
-        }
         if (__EXPERIMENTAL__.suspense && document.querySelector('template[q\\:r]')) {
             document.qProcessOOOS ||= getOutOfOrderStreamingScript;
         }
         this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
         this.$setServerData$();
-        element.setAttribute(QContainerAttr, "resumed" /* QContainerValue.RESUMED */);
         element.qContainer = this;
         element.qDestroy = () => this.$destroy$();
-        this.$processRootStateScript$();
+        this.$containerDataProcessState$ = 1 /* ContainerDataProcessState.ProcessingVNode */;
+        processVNodeData(document, element);
+        onVNodeDataReady(document, () => {
+            if (this.$containerDataProcessState$ === 1 /* ContainerDataProcessState.ProcessingVNode */) {
+                processContainerStateData(this, this.$processContainerData$());
+            }
+        });
+    }
+    *$processContainerData$() {
+        const element = this.element;
+        if (element.qContainer !== this) {
+            return;
+        }
+        const rootState = element.querySelector(`script[type="qwik/state"][q\\:instance="${this.$instanceHash$}"]:not(${QStatePatchAttrSelector})`) ||
+            element.querySelector(`script[type="qwik/state"]:not([q\\:instance]):not(${QStatePatchAttrSelector})`);
+        if (rootState) {
+            this.$rawStateData$ = JSON.parse(rootState.textContent);
+            yield* preprocessStateIterator(this.$rawStateData$, this);
+            this.$rootForwardRefs$ = this.$forwardRefs$;
+            const rootCount = this.$rawStateData$.length / 2;
+            const statePrewarm = element.getAttribute(QStatePrewarmAttr);
+            if (statePrewarm !== null && rootCount > 0 && rootCount >= Number(statePrewarm)) {
+                this.$stateData$ = yield* eagerDeserializeStateIterator(this, this.$rawStateData$);
+            }
+            else {
+                this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$);
+            }
+        }
         if (__EXPERIMENTAL__.suspense) {
-            processSegmentStateScripts(this);
+            yield* processSegmentStateScriptsIterator(this);
         }
         this.$hoistStyles$();
+        element.setAttribute(QContainerAttr, "resumed" /* QContainerValue.RESUMED */);
         if (!qTest && element.isConnected) {
             element.dispatchEvent(new CustomEvent('qresume', { bubbles: true }));
         }
@@ -14068,9 +14857,15 @@ class DomContainer extends _SharedContainer {
         }
         el.removeAttribute(QContainerAttr);
         const document = el.ownerDocument;
+        this.$containerStateDataState$ = undefined;
+        this.$containerDataProcessState$ = 0 /* ContainerDataProcessState.NotStarted */;
         const hasContainers = document.querySelector(QContainerSelector) !== null;
         if (!hasContainers) {
             document.qVNodeData = undefined;
+            document.qVNodeDataStarted = undefined;
+            document.qVNodeDataReady = undefined;
+            document.qVNodeDataState = undefined;
+            document.qVNodeDataCallbacks = undefined;
             document.qVNodeDataProcessed = undefined;
             document.qProcessVNodeDataPatch = undefined;
         }
@@ -14080,18 +14875,6 @@ class DomContainer extends _SharedContainer {
             }
         }
     }
-    $processRootStateScript$() {
-        const rootState = this.element.querySelector(`${this.$stateScriptSelector$()}:not(${QStatePatchAttrSelector})`);
-        if (rootState) {
-            this.$rawStateData$ = JSON.parse(rootState.textContent);
-            preprocessState(this.$rawStateData$, this);
-            this.$rootForwardRefs$ = this.$forwardRefs$;
-            this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$);
-        }
-    }
-    $stateScriptSelector$() {
-        return `script[type="qwik/state"][q\\:instance="${this.$instanceHash$}"]`;
-    }
     /**
      * The first time we render we need to hoist the styles. (Meaning we need to move all styles from
      * component inline to <head>)
@@ -14361,7 +15144,11 @@ const useInvokeContext = () => {
     isDev && assertDefined(ctx.$effectSubscriber$, `invoke: $effectSubscriber$ must be defined`, ctx);
     return ctx;
 };
-/** Call a function with the given InvokeContext and given arguments. */
+/**
+ * Call a function with the given InvokeContext and given arguments.
+ *
+ * @internal
+ */
 function invoke(context, fn, ...args) {
     return invokeApply.call(this, context, fn, args);
 }
@@ -14376,8 +15163,7 @@ function invokeApply(context, fn, args) {
         _context = previousContext;
     }
 }
-const newInvokeContextFromDOM = (event, element) => {
-    const domContainer = getDomContainer(element);
+const newInvokeContextFromDOM = (event, element, domContainer = getDomContainer(element)) => {
     const hostElement = vnode_locate(domContainer.rootVNode, element);
     const locale = domContainer.$locale$;
     locale && setLocale(locale);
@@ -14397,6 +15183,7 @@ function newRenderInvokeContext(locale, hostElement, container) {
     seal(ctx);
     return ctx;
 }
+/** @internal */
 // TODO how about putting url and locale (and event/custom?) in to a "static" object
 function newInvokeContext(locale, hostElement, event) {
     // ServerRequestEvent has .locale, but it's not always defined.
@@ -14518,7 +15305,7 @@ const initLazyRefDev = (lazy) => {
 };
 /** Validate captured scope and register WeakRef tracking on a QRLClass instance. */
 const initQrlClassDev = (lazy, captures, qrl) => {
-    if (captures && typeof captures === 'object') {
+    if (Array.isArray(captures)) {
         for (let i = 0; i < captures.length; i++) {
             const item = captures[i];
             verifySerializable(item, 'Captured variable in the closure can not be serialized');
@@ -14555,7 +15342,7 @@ const setupHmr = (LazyRefClass, setGetLazyRef) => {
         params.push(`t=${t}`);
         return `${path}?${params.join('&')}`;
     };
-    document.addEventListener('qHmr', (ev) => {
+    const hmrHandler = (ev) => {
         const files = ev.detail.files;
         const t = ev.detail.t || document.__hmrT || Date.now();
         let didReload = false;
@@ -14591,7 +15378,6 @@ const setupHmr = (LazyRefClass, setGetLazyRef) => {
             }
             if (didReload) {
                 lazy.$ref$ = undefined;
-                document.__hmrDone = document.__hmrT;
                 if (lazy.qrls) {
                     for (const qrlRef of lazy.qrls) {
                         const qrl = qrlRef.deref();
@@ -14607,7 +15393,8 @@ const setupHmr = (LazyRefClass, setGetLazyRef) => {
                 }
             }
         }
-    });
+    };
+    document.addEventListener('qHmr', hmrHandler, true);
 };
 
 // keep these imports above the rest to prevent circular dep issues
@@ -14720,7 +15507,9 @@ class QRLClass {
         }
         // If it is plain value with deserialized or missing captures, resolve it immediately
         // Otherwise we keep using the async path so we can wait for qrls to load
-        if ($lazy$.$ref$ != null && typeof this.$captures$ !== 'string' && !isPromise($lazy$.$ref$)) {
+        if ($lazy$.$ref$ != null &&
+            (!this.$captures$ || typeof this.$captures$ !== 'string') &&
+            !isPromise($lazy$.$ref$)) {
             this.resolved = bindCaptures(this, $lazy$.$ref$);
         }
     }
@@ -14875,31 +15664,50 @@ let _captures = null;
 const setCaptures = (captures) => {
     _captures = captures;
 };
-const deserializeCaptures = (container, captures) => {
+const deserializeCaptureDeltas = (container, deltaString, startIndex = 0, previousRootId) => {
     const refs = [];
-    const captureIds = captures.split(' ');
-    for (let i = 0; i < captureIds.length; i++) {
-        const id = captureIds[i];
-        refs.push(container.$getObjectById$(id));
+    let previous = previousRootId;
+    let start = startIndex;
+    for (let i = startIndex; i <= deltaString.length; i++) {
+        if (i === deltaString.length || deltaString.charCodeAt(i) === 32) {
+            if (i > start) {
+                const delta = Number(deltaString.slice(start, i));
+                previous = previous === undefined ? delta : previous + delta;
+                refs.push(container.$getObjectById$(previous));
+            }
+            start = i + 1;
+        }
     }
     return refs;
 };
+const deserializeQrlCaptureDeltas = (container, qrlString) => {
+    const firstHash = qrlString.indexOf('#');
+    if (firstHash === -1) {
+        return deserializeCaptureDeltas(container, qrlString);
+    }
+    const secondHash = qrlString.indexOf('#', firstHash + 1);
+    const previousRootId = Number(qrlString.slice(0, firstHash)) + Number(qrlString.slice(firstHash + 1, secondHash));
+    return deserializeCaptureDeltas(container, qrlString, secondHash + 1, previousRootId);
+};
 /** Puts the qrl captures into `_captures`, and returns a Promise that should be awaited if possible */
 const ensureQrlCaptures = (qrl) => {
     // We read the captures once, synchronously, so no need to keep previous
-    _captures = qrl.$captures$;
+    const serializedCaptures = qrl.$captures$;
     const container = qrl.$container$;
-    if (typeof _captures === 'string') {
+    if (typeof serializedCaptures === 'string') {
         if (!container) {
             throw qError(13 /* QError.qrlMissingContainer */);
         }
         const prevLoading = loading;
-        _captures = qrl.$captures$ = deserializeCaptures(container, _captures);
+        _captures = qrl.$captures$ = deserializeQrlCaptureDeltas(container, serializedCaptures);
         if (loading !== prevLoading) {
             // return the loading promise so callers can await it
             return loading;
         }
     }
+    else {
+        _captures = serializedCaptures || null;
+    }
 };
 // Wrap functions to provide their lexical scope
 const bindCaptures = (qrl, ref) => {
@@ -15866,7 +16674,13 @@ const useComputedQrl = (qrl, options) => {
  * recalculated, and if the result changed, all tasks which are tracking the signal will be re-run
  * and all components that read the signal will be re-rendered.
  *
- * The function must be synchronous and must not have any side effects.
+ * Every synchronous signal or store read is tracked automatically. Reads after an `await` are not:
+ * the tracking context is lost, so track them explicitly with the `track()` provided on the context
+ * argument. When the function is async, the returned signal exposes the async API: reading an
+ * unresolved `.value` throws the computation promise, and `.pending` and `.error` expose the
+ * computation state.
+ *
+ * The function must not have any side effects.
  *
  * @public
  */
@@ -15964,7 +16778,7 @@ const useVisibleTaskQrl = (qrl, opts) => {
         // In SSR we defer execution until triggered in DOM
         flags = 1 /* TaskFlags.VISIBLE_TASK */;
     }
-    const task = new Task(flags, i, iCtx.$hostElement$, qrl, undefined, null);
+    const task = new Task(flags, i, iCtx.$hostElement$, qrl, null);
     set(task);
     useRegisterTaskEvents(task, eagerness);
 };
@@ -16002,11 +16816,11 @@ const getTaskHandlerQrl = (task) => {
  * Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't
  * re-throw it (or a new Error), the resource status will never be `rejected`.
  *
- * @deprecated Use `useAsync$` instead, which is more powerful and flexible. `useResource$` is still
- *   available for backward compatibility but it is recommended to migrate to `useAsync$` for new
- *   code and when updating existing code.
+ * @deprecated Use `useComputed$` instead, which is more powerful and flexible. `useResource$` is
+ *   still available for backward compatibility but it is recommended to migrate to `useComputed$`
+ *   for new code and when updating existing code.
  * @public
- * @see useAsync$
+ * @see useComputed$
  * @see Resource
  * @see ResourceReturn
  */
@@ -16111,7 +16925,10 @@ const creator = (qrl, options) => {
     qrl.resolve();
     return createAsyncSignal(qrl, options);
 };
-/** @internal */
+/**
+ * @deprecated Use `useComputed$` instead, it has async support now.
+ * @internal
+ */
 const useAsyncQrl = (qrl, options) => {
     return useConstant((creator), qrl, options);
 };
@@ -16134,6 +16951,8 @@ const useAsyncQrl = (qrl, options) => {
  * will subscribe to it and return the last resolved value until the new value is ready. As soon as
  * the new value is ready, the subscribers will be updated.
  *
+ * @deprecated Use `useComputed$` instead, it has async support now. It auto-tracks synchronous
+ *   reads; after the first `await`, use the provided `track()` like before.
  * @public
  */
 const useAsync$ = implicit$FirstArg(useAsyncQrl);
@@ -16170,6 +16989,46 @@ const eachCmp = (props) => {
 const Each = /*#__PURE__*/ componentQrl(
 /*#__PURE__*/ inlinedQrl(eachCmp, '_eaC'));
 
+const invokeShowFn = (fn, context, arg) => {
+    return isQrl(fn) ? fn.getFn(context)(arg) : fn(arg);
+};
+/** @internal */
+const showCmpTask = ({ track }) => {
+    const props = _captures[0];
+    const context = tryGetInvokeContext();
+    const host = context.$hostElement$;
+    const container = context.$container$;
+    const isSsr = qTest ? isServerPlatform() : isServer;
+    return maybeThen(track(() => invokeShowFn(props.when$, tryGetInvokeContext(), undefined)), (condition) => {
+        const branch = condition ? props.then$ : props.else$;
+        return maybeThen(branch ? invokeShowFn(branch, context, condition) : null, (output) => {
+            const jsx = branch ? [output] : [];
+            if (isSsr) {
+                const ssr = container;
+                return ssr.renderJSX(jsx, {
+                    currentStyleScoped: null,
+                    parentComponentFrame: ssr.getComponentFrame(0),
+                });
+            }
+            else {
+                setNodeDiffPayload(host, jsx);
+                markVNodeDirty(container, host, 2 /* ChoreBits.NODE_DIFF */);
+            }
+        });
+    });
+};
+/** @internal */
+const showCmp = (props) => {
+    if (!__EXPERIMENTAL__.show) {
+        throw new Error('Show is experimental and must be enabled with `experimental: ["show"]` in the `qwikVite` plugin.');
+    }
+    useTaskQrl(/*#__PURE__*/ inlinedQrl(showCmpTask, '_shT', [props]));
+    return SkipRender;
+};
+/** @public @experimental */
+const Show = /*#__PURE__*/ componentQrl(
+/*#__PURE__*/ inlinedQrl(showCmp, '_shC'));
+
 const RevealContext = /*#__PURE__*/ createContextId('qk-reveal');
 const createRevealContext = (props) => {
     return {
@@ -16563,5 +17422,5 @@ if (import.meta.hot) {
     });
 }
 
-export { $, Each, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, Reveal, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, Suspense, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, SubscriptionPatch as _SubscriptionPatch, _UNINITIALIZED, _VAR_PROPS, _addProjection, _captures, _chk, _createDeserializeContainer, createQRL as _createQRL, _deserialize, _dumpState, eachCmp as _eaC, eachCmpTask as _eaT, _executeSsrChores, _fnSignal, getAsyncLocalStorage as _getAsyncLocalStorage, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, _hmr, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, qrlToString as _qrlToString, _qrlWithChunk, _qrlWithChunkDEV, revealCmp as _reC, revealCanReveal as _reR, revealCleanupTask as _reT, _regSymbol, _removeProjection, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, setEvent as _setEvent, _setProjectionTarget, suspenseCmp as _suC, suspenseTask as _suT, scheduleTask as _task, _updateProjectionProps, _useHmr, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getElementName as _vnode_getElementName, vnode_getFirstChild as _vnode_getFirstChild, vnode_getProp as _vnode_getProp, vnode_getVNodeForChildNode as _vnode_getVNodeForChildNode, vnode_insertBefore as _vnode_insertBefore, vnode_isElementVNode as _vnode_isElementVNode, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_newVirtual as _vnode_newVirtual, vnode_remove as _vnode_remove, vnode_setProp as _vnode_setProp, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getClientManifest, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
+export { $, Each, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, Reveal, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, Show, SkipRender, Slot, Suspense, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, ELEMENT_SEQ as _ELEMENT_SEQ, EMPTY_ARRAY as _EMPTY_ARRAY, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, SubscriptionPatch as _SubscriptionPatch, Task as _Task, _UNINITIALIZED, _VAR_PROPS, _addProjection, _captures, _chk, _createDeserializeContainer, createQRL as _createQRL, createStore as _createStore, delay as _delay, _deserialize, _dumpState, eachCmp as _eaC, eachCmpTask as _eaT, _executeSsrChores, _fnSignal, getAsyncLocalStorage as _getAsyncLocalStorage, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, getSubscriber as _getSubscriber, _getVarProps, _hasStoreEffects, _hmr, _injectAsyncSignalValue, invoke as _invoke, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _markSignalAsExternallyOwned, newInvokeContext as _newInvokeContext, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, qrlToString as _qrlToString, _qrlWithChunk, _qrlWithChunkDEV, revealCmp as _reC, revealCanReveal as _reR, revealCleanupTask as _reT, _regSymbol, _removeProjection, _res, _resolveContextWithoutSequentialScope, _restProps, retryOnPromise as _retryOnPromise, _rsc, _run, _serialize, setEvent as _setEvent, _setProjectionTarget, showCmp as _shC, showCmpTask as _shT, suspenseCmp as _suC, suspenseTask as _suT, scheduleTask as _task, _updateProjectionProps, _useHmr, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getElementName as _vnode_getElementName, vnode_getFirstChild as _vnode_getFirstChild, vnode_getProp as _vnode_getProp, vnode_getVNodeForChildNode as _vnode_getVNodeForChildNode, vnode_insertBefore as _vnode_insertBefore, vnode_isElementVNode as _vnode_isElementVNode, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_newVirtual as _vnode_newVirtual, vnode_remove as _vnode_remove, vnode_setProp as _vnode_setProp, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getClientManifest, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
 //# sourceMappingURL=core.mjs.map