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

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.35-dev+4603135
+ * @qwik.dev/core 2.0.0-beta.36-dev+3268fab
  * 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
@@ -328,6 +328,25 @@ const VNodeDataChar = {
     BACK_REFS: /* ********** */ 96, // '`' - `q:brefs' - Effect dependencies/subscriptions
     SEPARATOR: /* ********* */ 124, // `|` - Separator char to encode any key/value pairs.
     SLOT: /* ************** */ 126};
+/**
+ * Convert a segment-local vnode index into a key for the root container's shared qVNodeRefs map.
+ *
+ * Out-of-order Suspense segments each start counting vnode refs from 0, but the client merges all
+ * segment refs into one root-level map. This uses a Cantor-style pairing function for the
+ * zero-based pair `(segmentIndex, localIndex)`, then makes it negative so segment refs cannot
+ * collide with root refs, which are non-negative.
+ *
+ * Examples:
+ *
+ * - Segment 1, local 0 -> -1
+ * - Segment 2, local 0 -> -2
+ * - Segment 1, local 1 -> -3
+ */
+const getSegmentVNodeRefId = (segmentId, localIndex) => {
+    const segmentIndex = parseInt(segmentId, 10) - 1;
+    const diagonal = segmentIndex + localIndex;
+    return -((diagonal * (diagonal + 1)) / 2 + localIndex + 1);
+};
 
 function escapeHTML(html) {
     let escapedHTML = '';
@@ -391,6 +410,9 @@ const ComponentStylesPrefixContent = '⚡️';
 const QSlot = 'q:slot';
 const QSlotParent = 'q:sparent';
 const QSlotS = 'q:s';
+const QStatePatchAttrSelector = '[q\\:patch]';
+const QSuspenseResolved = 'q:r';
+const QSuspenseResultParent = 'q:rp';
 const QStyle = 'q:style';
 const QStyleSelector = 'style[q\\:style]';
 const QStyleSSelector = 'style[q\\:sstyle]';
@@ -412,6 +434,7 @@ const QIgnore = 'q:ignore';
 const QIgnoreEnd = '/' + QIgnore;
 const QContainerAttr = 'q:container';
 const QContainerAttrEnd = '/' + QContainerAttr;
+const QCursorBoundary = 'q:cursorBoundary';
 const QTemplate = 'q:template';
 // the same selector should be inside the qwik loader
 // and the same selector should be inside the qwik router spa-shim and spa-init
@@ -444,7 +467,6 @@ const ELEMENT_KEY = 'q:key';
 const ELEMENT_PROPS = 'q:props';
 const ELEMENT_SEQ = 'q:seq';
 const ELEMENT_SEQ_IDX = 'q:seqIdx';
-const Q_PREFIX = 'q:';
 const ITERATION_ITEM_SINGLE = 'q:p'; // Single iteration parameter (not an array)
 const ITERATION_ITEM_MULTI = 'q:ps'; // Multiple iteration parameters (array)
 /** Non serializable markers - always begins with `:` character */
@@ -452,8 +474,7 @@ const NON_SERIALIZABLE_MARKER_PREFIX = ':';
 const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
 const USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + 'onIdx';
 const USE_ON_LOCAL_FLAGS = NON_SERIALIZABLE_MARKER_PREFIX + 'onFlags';
-const QCursorBoundary = Q_PREFIX + 'cursorBoundary';
-const QNearestCursorBoundary = NON_SERIALIZABLE_MARKER_PREFIX + 'nearestCursorBoundary';
+const NEAREST_CURSOR_BOUNDARY = NON_SERIALIZABLE_MARKER_PREFIX + 'nearestCursorBoundary';
 const Q_PROPS_SEPARATOR = ':';
 const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
 const qwikInspectorAttr = 'data-qwik-inspector';
@@ -932,8 +953,6 @@ const config = {
 const rel = isBrowser && doc.createElement('link').relList?.supports?.('modulepreload')
     ? 'modulePreload'
     : 'preload';
-// Global state
-performance.now();
 const isJSRegex = /\.[mc]?js$/;
 const yieldInterval = 1000 / 60;
 
@@ -1178,6 +1197,29 @@ const isObjectEmpty = (obj) => {
     return true;
 };
 
+/** @internal */
+const stringifyRootRefPath = (path) => {
+    let text = String(path[0]);
+    for (let i = 1; i < path.length; i++) {
+        text += ' ' + path[i];
+    }
+    return text;
+};
+/** @internal */
+const writeStringRootRef = (writer, id) => writer.write(String(id));
+/** @internal */
+const writeStringRootRefPath = (writer, path) => writer.write(stringifyRootRefPath(path));
+/** @internal */
+const createStringStreamWriter = (write) => ({
+    write,
+    writeRootRef(id) {
+        return writeStringRootRef(this, id);
+    },
+    writeRootRefPath(path) {
+        return writeStringRootRefPath(this, path);
+    },
+});
+
 // Pre-allocated common strings to reduce allocation overhead
 const CLOSE_TAG = '</';
 const ESCAPED_CLOSE_TAG = '<\\/';
@@ -1191,7 +1233,7 @@ const COMMA = ',';
  *
  * @public
  */
-const version = "2.0.0-beta.35-dev+4603135";
+const version = "2.0.0-beta.36-dev+3268fab";
 
 const isNode = (value) => {
     return value && typeof value.nodeType === 'number';
@@ -1203,6 +1245,20 @@ const isElement$1 = (value) => {
     return value.nodeType === 1;
 };
 
+/** @internal */
+const getRootContainer = (container) => {
+    const rootContainer = container.$rootContainer$;
+    return rootContainer || container;
+};
+/** @internal */
+const isOutOfOrderSegmentContainer = (container) => {
+    return container.$isOutOfOrderSegment$;
+};
+/** @internal */
+const isSameContainer = (left, right) => {
+    return getRootContainer(left) === (right ? getRootContainer(right) : null);
+};
+
 /** @internal */
 const _EFFECT_BACK_REF = Symbol('backRef');
 /** Class for back reference to the EffectSubscription */
@@ -1554,17 +1610,27 @@ function pauseCursor(cursor, container) {
     container.$pendingCount$++;
 }
 function resumeCursor(cursor, container) {
-    const index = pausedCursorQueue.indexOf(cursor);
-    if (index !== -1) {
-        const lastIndex = pausedCursorQueue.length - 1;
-        if (index !== lastIndex) {
-            pausedCursorQueue[index] = pausedCursorQueue[lastIndex];
-        }
-        pausedCursorQueue.pop();
-        container.$pendingCount$--;
+    removeCursorFromPausedQueue(cursor, container);
+    if (!(cursor.flags & 256 /* VNodeFlags.Cursor */)) {
+        return;
     }
     addCursorToQueue(container, cursor);
 }
+function abandonCursor(container, targetCursorData, cursor) {
+    const oldCursorData = getCursorData(cursor);
+    if (!oldCursorData || oldCursorData === targetCursorData) {
+        return;
+    }
+    removeCursorFromQueue(cursor, container, false);
+    removeCursorFromPausedQueue(cursor, container);
+    mergeCursorJournalAndBoundaries(targetCursorData, oldCursorData);
+    oldCursorData.afterFlushTasks = null;
+    oldCursorData.extraPromises = null;
+    oldCursorData.journal = null;
+    oldCursorData.boundaries = null;
+    oldCursorData.position = null;
+    oldCursorData.promise = null;
+}
 /**
  * Removes a cursor from the global queue.
  *
@@ -1585,7 +1651,22 @@ function removeCursorFromQueue(cursor, container, keepCursorFlag) {
         // globalCursorQueue.pop();
         globalCursorQueue.splice(index, 1);
         container.$pendingCount$--;
+        return true;
+    }
+    return false;
+}
+function removeCursorFromPausedQueue(cursor, container) {
+    const index = pausedCursorQueue.indexOf(cursor);
+    if (index === -1) {
+        return false;
     }
+    const lastIndex = pausedCursorQueue.length - 1;
+    if (index !== lastIndex) {
+        pausedCursorQueue[index] = pausedCursorQueue[lastIndex];
+    }
+    pausedCursorQueue.pop();
+    container.$pendingCount$--;
+    return true;
 }
 
 const cursorDatas = new WeakMap();
@@ -1594,6 +1675,7 @@ const NODE_PROPS_DATA_KEY = ':nodeProps';
 const NODE_DIFF_DATA_KEY = ':nodeDiff';
 const ERROR_DATA_KEY = ':errorData';
 const HOST_SIGNAL = ':signal';
+const INLINE_COMPONENT_DATA_KEY = ':inlineComponentData';
 /**
  * Sets the cursor position in a cursor vNode.
  *
@@ -1610,6 +1692,9 @@ function mergeCursors(container, newCursorData, oldCursor) {
     // delete from global cursors queue
     removeCursorFromQueue(oldCursor, container);
     const oldCursorData = getCursorData(oldCursor);
+    mergeCursorData(newCursorData, oldCursorData);
+}
+function mergeCursorData(newCursorData, oldCursorData) {
     if (oldCursorData === newCursorData) {
         // same cursor data, no need to merge
         return;
@@ -1636,6 +1721,12 @@ function mergeCursors(container, newCursorData, oldCursor) {
             newCursorData.extraPromises = oldExtraPromises;
         }
     }
+    mergeCursorJournalAndBoundaries(newCursorData, oldCursorData);
+}
+function mergeCursorJournalAndBoundaries(newCursorData, oldCursorData) {
+    if (oldCursorData === newCursorData) {
+        return;
+    }
     // merge journal
     const oldJournal = oldCursorData.journal;
     if (oldJournal && oldJournal.length > 0) {
@@ -1876,20 +1967,28 @@ class SignalImpl {
         }
         else {
             isDev &&
-                assertTrue(!ctx.$container$ || ctx.$container$ === this.$container$, 'Do not use signals across containers');
+                assertTrue(!ctx.$container$ || isSameContainer(ctx.$container$, this.$container$), 'Do not use signals across containers');
         }
         const effectSubscriber = ctx.$effectSubscriber$;
         if (effectSubscriber) {
             // Let's make sure that we have a reference to this effect.
             // Adding reference is essentially adding a subscription, so if the signal
             // changes we know who to notify.
-            ensureContainsSubscription((this.$effects$ ||= new Set()), effectSubscriber);
+            const isOnServer = qTest ? isServerPlatform() : isServer;
+            const effects = (this.$effects$ ||= new Set());
+            const shouldRecordExternalRootEffect = __EXPERIMENTAL__.suspense && isOnServer;
+            ensureContainsSubscription(effects, effectSubscriber);
             // But when effect is scheduled in needs to be able to know which signals
             // to unsubscribe from. So we need to store the reference from the effect back
             // to this signal.
             ensureContainsBackRef(effectSubscriber, this);
-            (qTest ? !isDomContainer(this.$container$) : isServer) &&
-                addQrlToSerializationCtx(effectSubscriber, this.$container$);
+            if (isOnServer) {
+                const serializationContainer = getEffectSerializationContainer(ctx.$container$, this.$container$);
+                if (shouldRecordExternalRootEffect) {
+                    serializationContainer?.$recordExternalRootEffect$?.(this, effectSubscriber, null);
+                }
+                addQrlToSerializationCtx(effectSubscriber, serializationContainer);
+            }
         }
         return val;
     }
@@ -3016,7 +3115,7 @@ class WrappedSignalImpl extends SignalImpl {
         catch (_) {
             if (this.$container$ && this.$hostElement$) {
                 this.$container$.setHostProp(this.$hostElement$, HOST_SIGNAL, this);
-                markVNodeDirty(this.$container$, this.$hostElement$, 16 /* ChoreBits.COMPUTE */);
+                markVNodeDirty(this.$container$, this.$hostElement$, 32 /* ChoreBits.COMPUTE */);
             }
         }
         // if the computation not failed, we can run the effects directly
@@ -3072,59 +3171,7 @@ class SubscriptionData {
     }
 }
 
-/**
- * Qwikloader provides the captures string of the QRL when calling a handler. In that case we must
- * 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 container = getDomContainer(element);
-        setCaptures(deserializeCaptures(container, captureIds));
-    }
-    return null;
-};
-/**
- * Handles events for bind:value
- *
- * @internal
- */
-function _val(_, element) {
-    maybeScopeFromQL(this, element);
-    const signal = _captures[0];
-    signal.value = element.type === 'number' ? element.valueAsNumber : element.value;
-}
-/**
- * Handles events for bind:checked
- *
- * @internal
- */
-function _chk(_, element) {
-    maybeScopeFromQL(this, element);
-    const signal = _captures[0];
-    signal.value = element.checked;
-}
-/**
- * Resumes selected state (e.g. polling AsyncSignals) by deserializing captures. Used for
- * document:onQIdle to resume async signals with active polling.
- *
- * @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$();
-            }
-            // note that polling async signals will automatically schedule themselves so no action needed
-        }
-    }
-}
-
-const _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
+const _hasOwnProperty$3 = Object.prototype.hasOwnProperty;
 // TODO store props as the arrays the vnodes also use?
 class JSXNodeImpl {
     type;
@@ -3180,9 +3227,9 @@ const isJSXNode = (n) => {
             return true;
         }
         if (isObject(n) &&
-            _hasOwnProperty$2.call(n, 'key') &&
-            _hasOwnProperty$2.call(n, 'props') &&
-            _hasOwnProperty$2.call(n, 'type')) {
+            _hasOwnProperty$3.call(n, 'key') &&
+            _hasOwnProperty$3.call(n, 'props') &&
+            _hasOwnProperty$3.call(n, 'type')) {
             if (isPropsProxy(n)) {
                 return false;
             }
@@ -3196,11 +3243,63 @@ const isJSXNode = (n) => {
     }
 };
 
+/**
+ * Qwikloader provides the captures string of the QRL when calling a handler. In that case we must
+ * 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 container = getDomContainer(element);
+        setCaptures(deserializeCaptures(container, captureIds));
+    }
+    return null;
+};
+/**
+ * Handles events for bind:value
+ *
+ * @internal
+ */
+function _val(_, element) {
+    maybeScopeFromQL(this, element);
+    const signal = _captures[0];
+    signal.value = element.type === 'number' ? element.valueAsNumber : element.value;
+}
+/**
+ * Handles events for bind:checked
+ *
+ * @internal
+ */
+function _chk(_, element) {
+    maybeScopeFromQL(this, element);
+    const signal = _captures[0];
+    signal.value = element.checked;
+}
+/**
+ * Resumes selected state (e.g. polling AsyncSignals) by deserializing captures. Used for
+ * document:onQIdle to resume async signals with active polling.
+ *
+ * @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$();
+            }
+            // note that polling async signals will automatically schedule themselves so no action needed
+        }
+    }
+}
+
 const BIND_VALUE = 'bind:value';
 const BIND_CHECKED = 'bind:checked';
 const PASSIVE = 'passive:';
 const PREVENT_DEFAULT = 'preventdefault:';
-const _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+const _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 const removePassiveMarkers = (props, passiveKeys, preventDefaultKeys, passiveEvents, canMutate = false) => {
     let mutableProps = props;
     let copied = canMutate;
@@ -3387,10 +3486,10 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
             varProps ||= {};
             if (bindCheckedSignal) {
                 // Delete from both varProps and constProps if present
-                if (varProps && _hasOwnProperty$1.call(varProps, BIND_CHECKED)) {
+                if (varProps && _hasOwnProperty$2.call(varProps, BIND_CHECKED)) {
                     delete varProps[BIND_CHECKED];
                 }
-                if (constProps && _hasOwnProperty$1.call(constProps, BIND_CHECKED)) {
+                if (constProps && _hasOwnProperty$2.call(constProps, BIND_CHECKED)) {
                     if (!constPropsCopied) {
                         constProps = { ...constProps };
                         constPropsCopied = true;
@@ -3400,7 +3499,7 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
                 varProps.checked = bindCheckedSignal;
                 const handler = createQRL(null, '_chk', _chk, null, [bindCheckedSignal]);
                 // Move q-e:input from constProps if it exists
-                if (constProps && _hasOwnProperty$1.call(constProps, 'q-e:input')) {
+                if (constProps && _hasOwnProperty$2.call(constProps, 'q-e:input')) {
                     if (!constPropsCopied) {
                         constProps = { ...constProps };
                         constPropsCopied = true;
@@ -3413,10 +3512,10 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
             }
             else if (bindValueSignal) {
                 // Delete from both varProps and constProps if present
-                if (varProps && _hasOwnProperty$1.call(varProps, BIND_VALUE)) {
+                if (varProps && _hasOwnProperty$2.call(varProps, BIND_VALUE)) {
                     delete varProps[BIND_VALUE];
                 }
-                if (constProps && _hasOwnProperty$1.call(constProps, BIND_VALUE)) {
+                if (constProps && _hasOwnProperty$2.call(constProps, BIND_VALUE)) {
                     if (!constPropsCopied) {
                         constProps = { ...constProps };
                         constPropsCopied = true;
@@ -3426,7 +3525,7 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
                 varProps.value = bindValueSignal;
                 const handler = createQRL(null, '_val', _val, null, [bindValueSignal]);
                 // Move q-e:input from constProps if it exists
-                if (constProps && _hasOwnProperty$1.call(constProps, 'q-e:input')) {
+                if (constProps && _hasOwnProperty$2.call(constProps, 'q-e:input')) {
                     if (!constPropsCopied) {
                         constProps = { ...constProps };
                         constPropsCopied = true;
@@ -3439,7 +3538,7 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
             }
         }
         // Transform className -> class
-        if (varProps && _hasOwnProperty$1.call(varProps, 'className')) {
+        if (varProps && _hasOwnProperty$2.call(varProps, 'className')) {
             if (!varPropsCopied) {
                 varProps = { ...varProps };
                 varPropsCopied = true;
@@ -3451,7 +3550,7 @@ const _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
                 logOnceWarn(`jsx${dev ? ` ${dev.fileName}${dev?.lineNumber ? `:${dev.lineNumber}` : ''}` : ''}: \`className\` is deprecated. Use \`class\` instead.`);
             }
         }
-        if (constProps && _hasOwnProperty$1.call(constProps, 'className')) {
+        if (constProps && _hasOwnProperty$2.call(constProps, 'className')) {
             if (!constPropsCopied) {
                 constProps = { ...constProps };
                 constPropsCopied = true;
@@ -3563,365 +3662,69 @@ const RenderOnce = (props, key) => {
 };
 
 /**
- * Use `executeComponent` to execute a component.
- *
- * Component execution can be complex because of:
- *
- * - It can by async
- * - It can contain many tasks which need to be awaited
- * - Each task can run multiple times if they track signals which change.
- * - The JSX may be re-generated multiple times of a task needs to be rerun due to signal change.
- * - It needs to keep track of hook state.
- *
- * For `component$`: `renderHost` === `subscriptionHost` For inlined-components: the
- * `subscriptionHost` is a parent `component$` which needs to re-execute.
+ * Allows to project the children of the current component. `<Slot/>` can only be used within the
+ * context of a component defined with `component$`.
  *
- * @param container
- * @param renderHost - VNode into which the component is rendered into.
- * @param subscriptionHost - VNode which will be re-executed if the component needs to re-render.
- * @param componentQRL
- * @param props
- * @returns
+ * @public
  */
-const executeComponent = (container, renderHost, subscriptionHost, componentQRL, props) => {
-    const iCtx = newRenderInvokeContext(container.$locale$, subscriptionHost || renderHost, container);
-    if (subscriptionHost) {
-        iCtx.$effectSubscriber$ = getSubscriber(subscriptionHost, ":" /* EffectProperty.COMPONENT */);
-        iCtx.$container$ = container;
+const Slot = (props) => {
+    return _jsxSorted(Virtual, null, { [QSlotS]: '' }, props.children, 0, props.name ?? '');
+};
+
+/** @public */
+const SkipRender = Symbol('skip render');
+/** @public */
+const SSRRaw = () => null;
+/** @public */
+const SSRComment = () => null;
+/** @public */
+const SSRStreamBlock = (props) => {
+    return props.children;
+};
+/** @public */
+const SSRStream = (props, key) => jsx(RenderOnce, { children: jsx(InternalSSRStream, props) }, key);
+const InternalSSRStream = () => null;
+
+let _setAttribute = null;
+const fastSetAttribute = (target, name, value) => {
+    if (!_setAttribute) {
+        _setAttribute = target.setAttribute;
     }
-    let componentFn;
-    container.ensureProjectionResolved(renderHost);
-    let isInlineComponent = false;
-    if (componentQRL === null) {
-        componentQRL = container.getHostProp(renderHost, OnRenderProp);
-        isDev && assertDefined(componentQRL, 'No Component found at this location');
+    _setAttribute.call(target, name, value);
+};
+let _setAttributeNS = null;
+const fastSetAttributeNS = (target, namespace, name, value) => {
+    if (!_setAttributeNS) {
+        _setAttributeNS = target.setAttributeNS;
     }
-    if (isQrl(componentQRL)) {
-        props = props || container.getHostProp(renderHost, ELEMENT_PROPS) || EMPTY_OBJ;
-        // TODO is this possible? JSXNode handles this, no?
-        if ('children' in props) {
-            delete props.children;
+    _setAttributeNS.call(target, namespace, name, value);
+};
+function directSetAttribute(element, attrName, attrValue, isSvg) {
+    if (attrValue != null) {
+        if (isSvg) {
+            // only svg elements can have namespace attributes
+            const namespace = getAttributeNamespace(attrName);
+            if (namespace) {
+                fastSetAttributeNS(element, namespace, attrName, attrValue);
+                return;
+            }
         }
-        componentFn = componentQRL.getFn(iCtx);
+        fastSetAttribute(element, attrName, attrValue);
     }
-    else if (isQwikComponent(componentQRL)) {
-        const qComponentFn = componentQRL;
-        componentFn = () => invokeApply(iCtx, qComponentFn, [props || EMPTY_OBJ, null, 0]);
+}
+
+function getFileLocationFromJsx(jsxDev) {
+    if (!jsxDev) {
+        return null;
     }
-    else {
-        isInlineComponent = true;
-        const inlineComponent = componentQRL;
-        componentFn = () => invokeApply(iCtx, inlineComponent, [props || EMPTY_OBJ]);
-    }
-    const isSsr = qTest ? isServerPlatform() : isServer;
-    const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall(() => {
-        if (!isInlineComponent) {
-            container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
-            container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
-        }
-        if (retryCount > 0 && vnode_isVNode(renderHost)) {
-            clearAllEffects(container, renderHost);
-        }
-        return maybeThen(componentFn(props), (jsx) => maybeThen(iCtx.$waitOn$, () => jsx));
-    }, (jsx) => {
-        // In SSR, check if the component was marked dirty (COMPONENT bit) during execution.
-        // This happens when something completes and updates reactive primitives
-        // while we're waiting on $waitOn$. If so, we need to re-execute the component
-        // to get fresh JSX with updated values.
-        if (isSsr && !isInlineComponent) {
-            const ssrNode = renderHost;
-            if (ssrNode.dirty & 4 /* ChoreBits.COMPONENT */) {
-                ssrNode.dirty &= ~4 /* ChoreBits.COMPONENT */;
-                if (retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
-                    return executeComponentWithPromiseExceptionRetry(retryCount + 1);
-                }
-            }
-        }
-        const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL);
-        if (useOnEvents) {
-            return addUseOnEvents(jsx, useOnEvents);
-        }
-        return jsx;
-    }, (err) => {
-        if (isPromise(err) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
-            return err.then(() => executeComponentWithPromiseExceptionRetry(++retryCount));
-        }
-        else {
-            if (retryCount >= MAX_RETRY_ON_PROMISE_COUNT) {
-                throw new Error(`Max retry count of component execution reached`);
-            }
-            throw err;
-        }
-    });
-    return executeComponentWithPromiseExceptionRetry();
-};
-/**
- * Adds `useOn` events to the JSX output.
- *
- * @param jsx The JSX output to modify.
- * @param useOnEvents The `useOn` events to add.
- * @returns The modified JSX output.
- */
-function addUseOnEvents(jsx, useOnEvents) {
-    const jsxElement = findFirstElementNode(jsx);
-    let jsxResult = jsx;
-    const qVisibleEvent = 'q-e:qvisible';
-    return maybeThen(jsxElement, (jsxElement) => {
-        // headless components are components that don't render a real DOM element
-        const isHeadless = !jsxElement;
-        // placeholder element is a <script> element that is used to add events to the document or window
-        let placeholderElement = null;
-        for (const key in useOnEvents) {
-            if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) {
-                let targetElement = jsxElement;
-                let eventKey = key;
-                if (isHeadless) {
-                    // if the component is headless, we need to add the event to the placeholder element
-                    if (key === qVisibleEvent ||
-                        key.startsWith("q-d:" /* EventNameHtmlScope.document */) ||
-                        key.startsWith("q-w:" /* EventNameHtmlScope.window */)) {
-                        if (!placeholderElement) {
-                            const [createdElement, newJsx] = injectPlaceholderElement(jsxResult);
-                            jsxResult = newJsx;
-                            placeholderElement = createdElement;
-                        }
-                        targetElement = placeholderElement;
-                    }
-                    else {
-                        if (isDev) {
-                            const sourceLocation = getUseOnSourceLocation(useOnEvents[key].qrls);
-                            logWarn('You are trying to add an event "' +
-                                key +
-                                '" using `useOn` hook, ' +
-                                'but a node to which you can add an event is not found. ' +
-                                'Please make sure that the component outputs a DOM element.' +
-                                (sourceLocation ? ` Offending \`useOn\`: ${sourceLocation}.` : ''));
-                        }
-                        continue;
-                    }
-                }
-                if (targetElement) {
-                    if (targetElement.type === 'script' && key === qVisibleEvent) {
-                        eventKey = 'q-d:qinit';
-                        if (isDev) {
-                            const sourceLocation = getUseOnSourceLocation(useOnEvents[key].qrls);
-                            logWarn(`You are trying to add the event "${key}" ` +
-                                'using the `useVisibleTask$` hook with the "intersection-observer" strategy, ' +
-                                'but this only works when the component outputs a DOM element. Falling back to ' +
-                                '"document-ready" instead.' +
-                                (sourceLocation ? ` Offending \`useVisibleTask$\`: ${sourceLocation}.` : ''));
-                        }
-                    }
-                    addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
-                }
-            }
-        }
-        return jsxResult;
-    });
-}
-function getUseOnSourceLocation(eventQrls) {
-    for (let i = 0; i < eventQrls.length; i++) {
-        const eventQrl = eventQrls[i];
-        const task = eventQrl?.getCaptured()?.[0];
-        if (isTask(task)) {
-            const dev = task.$qrl$.dev;
-            if (dev?.file) {
-                return typeof dev.lo === 'number' && typeof dev.hi === 'number'
-                    ? `${dev.file}:${dev.lo}-${dev.hi}`
-                    : dev.file;
-            }
-        }
-    }
-    return null;
-}
-/**
- * Adds an event to the JSX element.
- *
- * @param jsxElement The JSX element to add the event to.
- * @param key The event name.
- * @param value The event value.
- */
-function addUseOnEvent(jsxElement, key, value) {
-    // These handlers are always there, so they go in constProps
-    const props = (jsxElement.constProps ||= {});
-    const propValue = props[key];
-    const qrls = value.qrls;
-    if (propValue == null) {
-        props[key] = qrls;
-    }
-    else if (Array.isArray(propValue)) {
-        propValue.push(...qrls);
-    }
-    else {
-        props[key] = [propValue, ...qrls];
-    }
-    const varProp = jsxElement.varProps[key];
-    if (varProp) {
-        // we need to demote the handlers to varProps
-        if (Array.isArray(propValue)) {
-            propValue.push(...props[key]);
-        }
-        else {
-            jsxElement.varProps[key] = [propValue, ...qrls];
-        }
-        props[key] = undefined;
-    }
-    const capture = value.capture;
-    const preventdefault = value.preventdefault;
-    const stoppropagation = value.stoppropagation;
-    if (!capture && !preventdefault && !stoppropagation) {
-        return;
-    }
-    const [, eventName] = getEventDataFromHtmlAttribute(key);
-    capture && addUseOnModifier(jsxElement, eventName, 'capture');
-    preventdefault && addUseOnModifier(jsxElement, eventName, 'preventdefault');
-    stoppropagation && addUseOnModifier(jsxElement, eventName, 'stoppropagation');
-}
-function addUseOnModifier(jsxElement, eventName, modifier) {
-    const key = `${modifier}:${eventName}`;
-    const varProps = jsxElement.varProps;
-    if (varProps === EMPTY_OBJ) {
-        jsxElement.varProps = {};
-    }
-    jsxElement.varProps[key] = true;
-}
-/**
- * Finds the first element node in the JSX output.
- *
- * @param jsx The JSX output to search.
- * @returns The first element node or null if no element node is found.
- */
-function findFirstElementNode(jsx) {
-    const queue = [jsx];
-    while (queue.length) {
-        const jsx = queue.shift();
-        if (isJSXNode(jsx)) {
-            if (typeof jsx.type === 'string') {
-                return jsx;
-            }
-            queue.push(jsx.children);
-        }
-        else if (isArray(jsx)) {
-            queue.push(...jsx);
-        }
-        else if (isPromise(jsx)) {
-            return maybeThen(jsx, (jsx) => findFirstElementNode(jsx));
-        }
-        else if (isSignal(jsx)) {
-            return findFirstElementNode(jsx.untrackedValue);
-        }
-    }
-    return null;
-}
-/**
- * Injects a placeholder <script> element into the JSX output.
- *
- * This is necessary for headless components (components that don't render a real DOM element) to
- * have an anchor point for `useOn` event listeners that target the document or window.
- *
- * @param jsx The JSX output to modify.
- * @returns A tuple containing the created placeholder element and the modified JSX output.
- */
-function injectPlaceholderElement(jsx) {
-    // For regular JSX nodes, we can append the placeholder to its children.
-    if (isJSXNode(jsx)) {
-        const placeholder = createPlaceholderScriptNode();
-        // Inline components don't always render children, so we wrap them in Fragment which does.
-        if (jsx.type !== Fragment && !isQwikComponent(jsx.type)) {
-            return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
-        }
-        if (jsx.children == null) {
-            jsx.children = placeholder;
-        }
-        else if (isArray(jsx.children)) {
-            jsx.children.push(placeholder);
-        }
-        else {
-            jsx.children = [jsx.children, placeholder];
-        }
-        return [placeholder, jsx];
-    }
-    // For primitives, we can't add children, so we wrap them in a fragment.
-    if (isPrimitiveOrNullUndefined(jsx)) {
-        const placeholder = createPlaceholderScriptNode();
-        return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
-    }
-    // For an array of nodes, we inject the placeholder into the first element.
-    if (isArray(jsx) && jsx.length > 0) {
-        const [createdElement, _] = injectPlaceholderElement(jsx[0]);
-        return [createdElement, jsx];
-    }
-    // For anything else we do nothing.
-    return [null, jsx];
-}
-/** @returns An empty <script> element for adding qwik metadata attributes to */
-function createPlaceholderScriptNode() {
-    return new JSXNodeImpl('script', null, { hidden: '' }, null, 0, null);
-}
-
-/**
- * Allows to project the children of the current component. `<Slot/>` can only be used within the
- * context of a component defined with `component$`.
- *
- * @public
- */
-const Slot = (props) => {
-    return _jsxSorted(Virtual, null, { [QSlotS]: '' }, props.children, 0, props.name ?? '');
-};
-
-/** @public */
-const SkipRender = Symbol('skip render');
-/** @public */
-const SSRRaw = () => null;
-/** @public */
-const SSRComment = () => null;
-/** @public */
-const SSRStreamBlock = (props) => {
-    return props.children;
-};
-/** @public */
-const SSRStream = (props, key) => jsx(RenderOnce, { children: jsx(InternalSSRStream, props) }, key);
-const InternalSSRStream = () => null;
-
-let _setAttribute = null;
-const fastSetAttribute = (target, name, value) => {
-    if (!_setAttribute) {
-        _setAttribute = target.setAttribute;
-    }
-    _setAttribute.call(target, name, value);
-};
-let _setAttributeNS = null;
-const fastSetAttributeNS = (target, namespace, name, value) => {
-    if (!_setAttributeNS) {
-        _setAttributeNS = target.setAttributeNS;
-    }
-    _setAttributeNS.call(target, namespace, name, value);
-};
-function directSetAttribute(element, attrName, attrValue, isSvg) {
-    if (attrValue != null) {
-        if (isSvg) {
-            // only svg elements can have namespace attributes
-            const namespace = getAttributeNamespace(attrName);
-            if (namespace) {
-                fastSetAttributeNS(element, namespace, attrName, attrValue);
-                return;
-            }
-        }
-        fastSetAttribute(element, attrName, attrValue);
-    }
-}
-
-function getFileLocationFromJsx(jsxDev) {
-    if (!jsxDev) {
-        return null;
-    }
-    const sanitizedFileName = jsxDev.fileName?.replace(/\\/g, '/');
-    if (sanitizedFileName) {
-        return `${sanitizedFileName}:${jsxDev.lineNumber}:${jsxDev.columnNumber}`;
+    const sanitizedFileName = jsxDev.fileName?.replace(/\\/g, '/');
+    if (sanitizedFileName) {
+        return `${sanitizedFileName}:${jsxDev.lineNumber}:${jsxDev.columnNumber}`;
     }
     return null;
 }
 
+const _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 function isSlotProp(prop) {
     return !prop.startsWith('q:') && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
 }
@@ -3946,6 +3749,16 @@ const _restProps = (props, omit = [], target = {}) => {
     }
     return createPropsProxy(new JSXNodeImpl(null, varPropsTarget, constPropsTarget, null, 0, null));
 };
+function resolveSlotName(host, jsx, container) {
+    const constProps = jsx.constProps;
+    if (constProps && typeof constProps == 'object' && _hasOwnProperty$1.call(constProps, 'name')) {
+        const constValue = constProps.name;
+        if (host && constValue instanceof WrappedSignalImpl) {
+            return trackSignalAndAssignHost(constValue, host, ":" /* EffectProperty.COMPONENT */, container);
+        }
+    }
+    return directGetPropsProxyProp(jsx, 'name') || QDefaultSlot;
+}
 
 class DeleteOperation {
     target;
@@ -4172,14 +3985,14 @@ function getNearestCursorBoundaryProp(vNode) {
     if (!__EXPERIMENTAL__.suspense) {
         return null;
     }
-    return (vnode_getProp(vNode, QNearestCursorBoundary, null) ||
+    return (vnode_getProp(vNode, NEAREST_CURSOR_BOUNDARY, null) ||
         null);
 }
 function clearNearestCursorBoundary(vNode) {
     if (!__EXPERIMENTAL__.suspense) {
         return;
     }
-    vnode_setProp(vNode, QNearestCursorBoundary, null);
+    vnode_setProp(vNode, NEAREST_CURSOR_BOUNDARY, null);
 }
 function getNearestCursorBoundary(container, vNode) {
     if (!__EXPERIMENTAL__.suspense) {
@@ -4188,7 +4001,7 @@ function getNearestCursorBoundary(container, vNode) {
     return getNearestCursorBoundaryProp(vNode) || getOwnCursorBoundary(container, vNode);
 }
 function setNearestCursorBoundary(vNode, boundary) {
-    __EXPERIMENTAL__.suspense && vnode_setProp(vNode, QNearestCursorBoundary, boundary);
+    __EXPERIMENTAL__.suspense && vnode_setProp(vNode, NEAREST_CURSOR_BOUNDARY, boundary);
 }
 /** Updates the nearest cursor boundary cache on a vnode and any already-dirty descendants. */
 function updateDirtySubtreeCursorBoundary(container, vNode, boundary) {
@@ -4732,7 +4545,7 @@ function expectProjection(diffContext) {
 function expectSlot(diffContext) {
     const jsxNode = diffContext.$jsxValue$;
     const vHost = vnode_getProjectionParentComponent(diffContext.$vParent$);
-    const slotNameKey = getSlotNameKey(diffContext, vHost);
+    const slotNameKey = resolveSlotName(vHost, jsxNode, diffContext.$container$);
     const cursorBoundary = directGetPropsProxyProp(jsxNode, QCursorBoundary) || null;
     const vProjectedNode = vHost
         ? vnode_getProp(vHost, slotNameKey, 
@@ -4775,17 +4588,6 @@ function expectSlot(diffContext) {
     }
     return true;
 }
-function getSlotNameKey(diffContext, vHost) {
-    const jsxNode = diffContext.$jsxValue$;
-    const constProps = jsxNode.constProps;
-    if (constProps && typeof constProps == 'object' && _hasOwnProperty.call(constProps, 'name')) {
-        const constValue = constProps.name;
-        if (vHost && constValue instanceof WrappedSignalImpl) {
-            return trackSignalAndAssignHost(constValue, vHost, ":" /* EffectProperty.COMPONENT */, diffContext.$container$);
-        }
-    }
-    return directGetPropsProxyProp(jsxNode, 'name') || QDefaultSlot;
-}
 function cleanupSideBuffer(diffContext) {
     const sideBuffer = diffContext.$vSideBuffer$;
     if (sideBuffer) {
@@ -5161,603 +4963,910 @@ function retrieveChildWithKey(diffContext, nodeName, key) {
                     diffContext.$vSiblings$.set(getSideBufferKey(name, vKey), vNode);
                 }
             }
-            vNode = vNode.nextSibling;
+            vNode = vNode.nextSibling;
+        }
+    }
+    else {
+        if (key === null) {
+            for (let i = 0; i < diffContext.$vSiblingsArray$.length; i += 2) {
+                if (diffContext.$vSiblingsArray$[i] === nodeName) {
+                    vNodeWithKey = diffContext.$vSiblingsArray$[i + 1];
+                    diffContext.$vSiblingsArray$.splice(i, 2);
+                    break;
+                }
+            }
+        }
+        else {
+            const siblingsKey = getSideBufferKey(nodeName, key);
+            const sibling = diffContext.$vSiblings$.get(siblingsKey);
+            if (sibling) {
+                vNodeWithKey = sibling;
+                diffContext.$vSiblings$.delete(siblingsKey);
+            }
+        }
+    }
+    collectSideBufferSiblings(diffContext, vNodeWithKey);
+    return vNodeWithKey;
+}
+function collectSideBufferSiblings(diffContext, targetNode) {
+    if (!targetNode) {
+        if (diffContext.$vCurrent$) {
+            const name = vnode_isElementVNode(diffContext.$vCurrent$)
+                ? vnode_getElementName(diffContext.$vCurrent$)
+                : null;
+            const vKey = getKey(diffContext.$vCurrent$) ||
+                getComponentHash(diffContext.$vCurrent$, diffContext.$container$.$getObjectById$);
+            if (vKey != null) {
+                const sideBufferKey = getSideBufferKey(name, vKey);
+                diffContext.$vSideBuffer$ ||= new Map();
+                diffContext.$vSideBuffer$.set(sideBufferKey, diffContext.$vCurrent$);
+                diffContext.$vSiblings$?.delete(sideBufferKey);
+            }
+        }
+        return;
+    }
+    // Walk from vCurrent up to the target node and collect all keyed siblings
+    const boundary = getLevelBoundary(diffContext);
+    let vNode = diffContext.$vCurrent$;
+    while (vNode && vNode !== targetNode && vNode !== boundary) {
+        const name = vnode_isElementVNode(vNode) ? vnode_getElementName(vNode) : null;
+        const vKey = getKey(vNode) ||
+            getComponentHash(vNode, diffContext.$container$.$getObjectById$);
+        if (vKey != null) {
+            const sideBufferKey = getSideBufferKey(name, vKey);
+            diffContext.$vSideBuffer$ ||= new Map();
+            diffContext.$vSideBuffer$.set(sideBufferKey, vNode);
+            diffContext.$vSiblings$?.delete(sideBufferKey);
+        }
+        vNode = vNode.nextSibling;
+    }
+}
+function getSideBufferKey(nodeName, key) {
+    if (key == null) {
+        return null;
+    }
+    return nodeName ? nodeName + ':' + key : key;
+}
+function deleteFromSideBuffer(diffContext, nodeName, key) {
+    const sbKey = getSideBufferKey(nodeName, key);
+    if (sbKey && diffContext.$vSideBuffer$?.has(sbKey)) {
+        diffContext.$vSideBuffer$.delete(sbKey);
+        return true;
+    }
+    return false;
+}
+/**
+ * Shared utility to resolve a keyed node by:
+ *
+ * 1. Scanning forward siblings via `retrieveChildWithKey`
+ * 2. Falling back to the side buffer using the provided `sideBufferKey`
+ * 3. Creating a new node via `createNew` when not found
+ *
+ * If a node is moved from the side buffer, it is inserted before `vCurrent` under
+ * `parentForInsert`. The function updates `vCurrent`/`vNewNode` accordingly and returns the value
+ * from `createNew` when a new node is created.
+ */
+function moveOrCreateKeyedNode(diffContext, nodeName, lookupKey, sideBufferKey, parentForInsert, addCurrentToSideBufferOnSideInsert) {
+    // 1) Try to find the node among upcoming siblings
+    diffContext.$vNewNode$ = retrieveChildWithKey(diffContext, nodeName, lookupKey);
+    if (diffContext.$vNewNode$) {
+        if (!sideBufferKey) {
+            vnode_insertBefore(diffContext.$journal$, parentForInsert, diffContext.$vNewNode$, getCurrentInsertBefore(diffContext));
+        }
+        diffContext.$vCurrent$ = diffContext.$vNewNode$;
+        diffContext.$vNewNode$ = null;
+        return false;
+    }
+    // 2) Try side buffer
+    if (sideBufferKey != null) {
+        const buffered = diffContext.$vSideBuffer$?.get(sideBufferKey) || null;
+        if (buffered) {
+            diffContext.$vSideBuffer$.delete(sideBufferKey);
+            if (addCurrentToSideBufferOnSideInsert && diffContext.$vCurrent$) {
+                const currentKey = getKey(diffContext.$vCurrent$) ||
+                    getComponentHash(diffContext.$vCurrent$, diffContext.$container$.$getObjectById$);
+                if (currentKey != null) {
+                    const currentName = vnode_isElementVNode(diffContext.$vCurrent$)
+                        ? vnode_getElementName(diffContext.$vCurrent$)
+                        : null;
+                    const currentSideKey = getSideBufferKey(currentName, currentKey);
+                    if (currentSideKey != null) {
+                        diffContext.$vSideBuffer$ ||= new Map();
+                        diffContext.$vSideBuffer$.set(currentSideKey, diffContext.$vCurrent$);
+                    }
+                }
+            }
+            // Only move if the node is not already in the correct position
+            if (buffered !== diffContext.$vCurrent$) {
+                vnode_insertBefore(diffContext.$journal$, parentForInsert, buffered, getCurrentInsertBefore(diffContext));
+            }
+            diffContext.$vCurrent$ = buffered;
+            diffContext.$vNewNode$ = null;
+            return false;
+        }
+    }
+    // 3) Create new
+    return true;
+}
+function expectVirtual(diffContext, type, jsxKey) {
+    const checkKey = type === "F" /* VirtualType.Fragment */;
+    const currentKey = getKey(diffContext.$vCurrent$);
+    const currentIsVirtual = diffContext.$vCurrent$ && vnode_isVirtualVNode(diffContext.$vCurrent$);
+    const isSameNode = currentIsVirtual && currentKey === jsxKey && (checkKey ? !!jsxKey : true);
+    if (isSameNode) {
+        // All is good.
+        deleteFromSideBuffer(diffContext, null, currentKey);
+        return;
+    }
+    // For fragments without a key, always create a new virtual node (ensures rerender semantics)
+    if (jsxKey === null || diffContext.$isCreationMode$) {
+        vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
+        diffContext.$vNewNode$.key = jsxKey;
+        isDev && vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, type);
+        return;
+    }
+    if (moveOrCreateKeyedNode(diffContext, null, jsxKey, getSideBufferKey(null, jsxKey), diffContext.$vParent$, true)) {
+        vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
+        diffContext.$vNewNode$.key = jsxKey;
+        isDev && vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, type);
+    }
+}
+function expectComponent(diffContext, component) {
+    const componentMeta = component[SERIALIZABLE_STATE];
+    let host = (diffContext.$vNewNode$ || diffContext.$vCurrent$);
+    const jsxNode = diffContext.$jsxValue$;
+    if (componentMeta) {
+        const jsxProps = jsxNode.props;
+        // QComponent
+        let shouldRender = false;
+        const [componentQRL] = componentMeta;
+        const componentHash = componentQRL.$hash$;
+        const vNodeComponentHash = getComponentHash(host, diffContext.$container$.$getObjectById$);
+        const lookupKey = jsxNode.key || componentHash;
+        const vNodeLookupKey = getKey(host) || vNodeComponentHash;
+        const lookupKeysAreEqual = lookupKey === vNodeLookupKey;
+        const hashesAreEqual = componentHash === vNodeComponentHash;
+        if (lookupKeysAreEqual) {
+            if (hashesAreEqual) {
+                deleteFromSideBuffer(diffContext, null, lookupKey);
+            }
+            else {
+                insertNewComponent(diffContext, host, componentQRL, jsxProps);
+                host = diffContext.$vNewNode$;
+                shouldRender = true;
+            }
+        }
+        else {
+            if (moveOrCreateKeyedNode(diffContext, null, lookupKey, lookupKey, diffContext.$vParent$)) {
+                insertNewComponent(diffContext, host, componentQRL, jsxProps);
+                shouldRender = true;
+            }
+            host = (diffContext.$vNewNode$ || diffContext.$vCurrent$);
+        }
+        if (host) {
+            const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, diffContext.$container$.$getObjectById$);
+            if (!shouldRender) {
+                const propsChanged = handleProps(host, jsxProps, vNodeProps, diffContext.$container$);
+                // if props changed but key is null we need to insert a new component, because we need to execute hooks etc
+                if (propsChanged && jsxNode.key == null) {
+                    insertNewComponent(diffContext, host, componentQRL, jsxProps);
+                    host = diffContext.$vNewNode$;
+                    shouldRender = true;
+                }
+                shouldRender ||= propsChanged;
+            }
+            if (shouldRender) {
+                // Assign the new QRL instance to the host.
+                // Unfortunately it is created every time, something to fix in the optimizer.
+                vnode_setProp(host, OnRenderProp, componentQRL);
+                /**
+                 * Mark host as not deleted. The host could have been marked as deleted if it there was a
+                 * cleanup run. Now we found it and want to reuse it, so we need to mark it as not deleted.
+                 */
+                host.flags &= -33 /* VNodeFlags.Deleted */;
+                markVNodeDirty(diffContext.$container$, host, 4 /* ChoreBits.COMPONENT */, diffContext.$cursor$);
+            }
         }
+        descendContentToProject(diffContext, jsxNode.children, host);
     }
     else {
-        if (key === null) {
-            for (let i = 0; i < diffContext.$vSiblingsArray$.length; i += 2) {
-                if (diffContext.$vSiblingsArray$[i] === nodeName) {
-                    vNodeWithKey = diffContext.$vSiblingsArray$[i + 1];
-                    diffContext.$vSiblingsArray$.splice(i, 2);
-                    break;
-                }
+        const lookupKey = jsxNode.key;
+        const vNodeLookupKey = getKey(host);
+        const lookupKeysAreEqual = lookupKey === vNodeLookupKey;
+        const vNodeComponentHash = getComponentHash(host, diffContext.$container$.$getObjectById$);
+        const isInlineComponent = vNodeComponentHash == null;
+        if ((host && !isInlineComponent) || !host) {
+            insertNewInlineComponent(diffContext);
+            host = diffContext.$vNewNode$;
+        }
+        else if (!lookupKeysAreEqual) {
+            if (moveOrCreateKeyedNode(diffContext, null, lookupKey, lookupKey, diffContext.$vParent$)) {
+                // We did not find the inline component, create it.
+                insertNewInlineComponent(diffContext);
             }
+            host = (diffContext.$vNewNode$ || diffContext.$vCurrent$);
         }
         else {
-            const siblingsKey = getSideBufferKey(nodeName, key);
-            const sibling = diffContext.$vSiblings$.get(siblingsKey);
-            if (sibling) {
-                vNodeWithKey = sibling;
-                diffContext.$vSiblings$.delete(siblingsKey);
+            // delete the key from the side buffer if it is the same component
+            deleteFromSideBuffer(diffContext, null, lookupKey);
+        }
+        if (host) {
+            let componentHost = host;
+            // Find the closest component host which has `OnRender` prop. This is need for subscriptions context.
+            while (componentHost &&
+                (vnode_isVirtualVNode(componentHost)
+                    ? vnode_getProp(componentHost, OnRenderProp, null) === null
+                    : true)) {
+                componentHost = componentHost.parent || vnode_getProjectionParentComponent(componentHost);
             }
+            setInlineComponentData(host, component, componentHost, jsxNode.props);
+            markVNodeDirty(diffContext.$container$, host, 8 /* ChoreBits.INLINE_COMPONENT */, diffContext.$cursor$);
         }
     }
-    collectSideBufferSiblings(diffContext, vNodeWithKey);
-    return vNodeWithKey;
 }
-function collectSideBufferSiblings(diffContext, targetNode) {
-    if (!targetNode) {
-        if (diffContext.$vCurrent$) {
-            const name = vnode_isElementVNode(diffContext.$vCurrent$)
-                ? vnode_getElementName(diffContext.$vCurrent$)
-                : null;
-            const vKey = getKey(diffContext.$vCurrent$) ||
-                getComponentHash(diffContext.$vCurrent$, diffContext.$container$.$getObjectById$);
-            if (vKey != null) {
-                const sideBufferKey = getSideBufferKey(name, vKey);
-                diffContext.$vSideBuffer$ ||= new Map();
-                diffContext.$vSideBuffer$.set(sideBufferKey, diffContext.$vCurrent$);
-                diffContext.$vSiblings$?.delete(sideBufferKey);
-            }
-        }
-        return;
+function insertNewComponent(diffContext, host, componentQRL, jsxProps) {
+    if (host) {
+        clearAllEffects(diffContext.$container$, host);
     }
-    // Walk from vCurrent up to the target node and collect all keyed siblings
-    const boundary = getLevelBoundary(diffContext);
-    let vNode = diffContext.$vCurrent$;
-    while (vNode && vNode !== targetNode && vNode !== boundary) {
-        const name = vnode_isElementVNode(vNode) ? vnode_getElementName(vNode) : null;
-        const vKey = getKey(vNode) ||
-            getComponentHash(vNode, diffContext.$container$.$getObjectById$);
-        if (vKey != null) {
-            const sideBufferKey = getSideBufferKey(name, vKey);
-            diffContext.$vSideBuffer$ ||= new Map();
-            diffContext.$vSideBuffer$.set(sideBufferKey, vNode);
-            diffContext.$vSiblings$?.delete(sideBufferKey);
+    vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
+    const jsxNode = diffContext.$jsxValue$;
+    isDev && vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, "C" /* VirtualType.Component */);
+    vnode_setProp(diffContext.$vNewNode$, OnRenderProp, componentQRL);
+    vnode_setProp(diffContext.$vNewNode$, ELEMENT_PROPS, jsxProps);
+    diffContext.$vNewNode$.key = jsxNode.key;
+}
+function insertNewInlineComponent(diffContext) {
+    vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
+    const jsxNode = diffContext.$jsxValue$;
+    isDev &&
+        vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, "I" /* VirtualType.InlineComponent */);
+    vnode_setProp(diffContext.$vNewNode$, ELEMENT_PROPS, jsxNode.props);
+    if (jsxNode.key) {
+        diffContext.$vNewNode$.key = jsxNode.key;
+    }
+}
+function expectText(diffContext, text) {
+    if (diffContext.$vCurrent$ !== null) {
+        const type = vnode_getType(diffContext.$vCurrent$);
+        if (type === 3 /* Text */) {
+            if (text !== vnode_getText(diffContext.$vCurrent$)) {
+                vnode_setText(diffContext.$journal$, diffContext.$vCurrent$, text);
+                return;
+            }
+            return;
         }
-        vNode = vNode.nextSibling;
     }
+    vnode_insertElementBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newText((qTest ? diffContext.$container$.document : document).createTextNode(text), text)), getCurrentInsertBefore(diffContext));
 }
-function getSideBufferKey(nodeName, key) {
-    if (key == null) {
+/**
+ * Retrieve the key from the VNode.
+ *
+ * @param vNode - VNode to retrieve the key from
+ * @returns Key
+ */
+function getKey(vNode) {
+    if (vNode == null || vnode_isTextVNode(vNode)) {
         return null;
     }
-    return nodeName ? nodeName + ':' + key : key;
+    return vNode.key;
 }
-function deleteFromSideBuffer(diffContext, nodeName, key) {
-    const sbKey = getSideBufferKey(nodeName, key);
-    if (sbKey && diffContext.$vSideBuffer$?.has(sbKey)) {
-        diffContext.$vSideBuffer$.delete(sbKey);
-        return true;
+/**
+ * Retrieve the component hash from the VNode.
+ *
+ * @param vNode - VNode to retrieve the key from
+ * @param getObject - Function to retrieve the object by id for QComponent QRL
+ * @returns Hash
+ */
+function getComponentHash(vNode, getObject) {
+    if (vNode == null || vnode_isTextVNode(vNode)) {
+        return null;
     }
-    return false;
+    const qrl = vnode_getProp(vNode, OnRenderProp, getObject);
+    return qrl ? qrl.$hash$ : null;
 }
 /**
- * Shared utility to resolve a keyed node by:
+ * Marker class for JSX projection.
  *
- * 1. Scanning forward siblings via `retrieveChildWithKey`
- * 2. Falling back to the side buffer using the provided `sideBufferKey`
- * 3. Creating a new node via `createNew` when not found
+ * Assume you have component like so
  *
- * If a node is moved from the side buffer, it is inserted before `vCurrent` under
- * `parentForInsert`. The function updates `vCurrent`/`vNewNode` accordingly and returns the value
- * from `createNew` when a new node is created.
+ * ```
+ * <SomeComponent>
+ *   some-text
+ *   <span q:slot="name">some more text</span>
+ *   more-text
+ * </SomeComponent>
+ * ```
+ *
+ * Before the `<SomeCompetent/>` is processed its children are transformed into:
+ *
+ * ```
+ *   <Projection q:slot="">
+ *     some-text
+ *     more-text
+ *   </Projection>
+ *   <Projection q:slot="name">
+ *     <span q:slot="name">some more text</span>
+ *   </Projection>
+ * ```
  */
-function moveOrCreateKeyedNode(diffContext, nodeName, lookupKey, sideBufferKey, parentForInsert, addCurrentToSideBufferOnSideInsert) {
-    // 1) Try to find the node among upcoming siblings
-    diffContext.$vNewNode$ = retrieveChildWithKey(diffContext, nodeName, lookupKey);
-    if (diffContext.$vNewNode$) {
-        if (!sideBufferKey) {
-            vnode_insertBefore(diffContext.$journal$, parentForInsert, diffContext.$vNewNode$, getCurrentInsertBefore(diffContext));
-        }
-        diffContext.$vCurrent$ = diffContext.$vNewNode$;
-        diffContext.$vNewNode$ = null;
+function Projection() { }
+function handleProps(host, jsxProps, vNodeProps, container) {
+    let shouldRender = false;
+    if (vNodeProps) {
+        const constPropsDifferent = handleChangedProps(jsxProps[_CONST_PROPS], vNodeProps[_CONST_PROPS], vNodeProps[_PROPS_HANDLER], container, false);
+        shouldRender ||= constPropsDifferent;
+        const varPropsDifferent = handleChangedProps(jsxProps[_VAR_PROPS], vNodeProps[_VAR_PROPS], vNodeProps[_PROPS_HANDLER], container, true);
+        shouldRender ||= varPropsDifferent;
+        // Update the owner after all props have been synced
+        vNodeProps[_OWNER] = jsxProps[_OWNER];
+    }
+    else if (jsxProps) {
+        // If there is no props instance, create a new one.
+        // We can do this because we are not using the props instance for anything else.
+        vnode_setProp(host, ELEMENT_PROPS, jsxProps);
+        vNodeProps = jsxProps;
+    }
+    return shouldRender;
+}
+function handleChangedProps(src, dst, propsHandler, container, triggerEffects = true) {
+    if (isPropsEmpty(src) && isPropsEmpty(dst)) {
         return false;
     }
-    // 2) Try side buffer
-    if (sideBufferKey != null) {
-        const buffered = diffContext.$vSideBuffer$?.get(sideBufferKey) || null;
-        if (buffered) {
-            diffContext.$vSideBuffer$.delete(sideBufferKey);
-            if (addCurrentToSideBufferOnSideInsert && diffContext.$vCurrent$) {
-                const currentKey = getKey(diffContext.$vCurrent$) ||
-                    getComponentHash(diffContext.$vCurrent$, diffContext.$container$.$getObjectById$);
-                if (currentKey != null) {
-                    const currentName = vnode_isElementVNode(diffContext.$vCurrent$)
-                        ? vnode_getElementName(diffContext.$vCurrent$)
-                        : null;
-                    const currentSideKey = getSideBufferKey(currentName, currentKey);
-                    if (currentSideKey != null) {
-                        diffContext.$vSideBuffer$ ||= new Map();
-                        diffContext.$vSideBuffer$.set(currentSideKey, diffContext.$vCurrent$);
+    propsHandler.$container$ = container;
+    let changed = false;
+    // Update changed/added props from src
+    if (src) {
+        for (const key in src) {
+            if (key === 'children' || key === QBackRefs) {
+                continue;
+            }
+            if (!dst || src[key] !== dst[key]) {
+                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];
+                    }
+                    const didTigger = triggerPropsProxyEffect(propsHandler, key);
+                    if (!didTigger) {
+                        // If the effect was not triggered, then the prop has changed and we should rerender
+                        changed = true;
                     }
                 }
+                else {
+                    // Early return for const props (no effects)
+                    return true;
+                }
             }
-            // Only move if the node is not already in the correct position
-            if (buffered !== diffContext.$vCurrent$) {
-                vnode_insertBefore(diffContext.$journal$, parentForInsert, buffered, getCurrentInsertBefore(diffContext));
+        }
+    }
+    // Remove props that are in dst but not in src
+    if (dst) {
+        for (const key in dst) {
+            if (key === 'children' || key === QBackRefs) {
+                continue;
+            }
+            if (!src || !_hasOwnProperty.call(src, key)) {
+                if (triggerEffects) {
+                    delete dst[key];
+                    const didTigger = triggerPropsProxyEffect(propsHandler, key);
+                    if (!didTigger) {
+                        // If the effect was not triggered, then the prop has changed and we should rerender
+                        changed = true;
+                    }
+                }
             }
-            diffContext.$vCurrent$ = buffered;
-            diffContext.$vNewNode$ = null;
-            return false;
         }
     }
-    // 3) Create new
-    return true;
+    return changed;
 }
-function expectVirtual(diffContext, type, jsxKey) {
-    const checkKey = type === "F" /* VirtualType.Fragment */;
-    const currentKey = getKey(diffContext.$vCurrent$);
-    const currentIsVirtual = diffContext.$vCurrent$ && vnode_isVirtualVNode(diffContext.$vCurrent$);
-    const isSameNode = currentIsVirtual && currentKey === jsxKey && (checkKey ? !!jsxKey : true);
-    if (isSameNode) {
-        // All is good.
-        deleteFromSideBuffer(diffContext, null, currentKey);
-        return;
+function isPropsEmpty(props) {
+    if (!props) {
+        return true;
     }
-    // For fragments without a key, always create a new virtual node (ensures rerender semantics)
-    if (jsxKey === null || diffContext.$isCreationMode$) {
-        vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
-        diffContext.$vNewNode$.key = jsxKey;
-        isDev && vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, type);
+    return isObjectEmpty(props);
+}
+/**
+ * If vnode is removed, it is necessary to release all subscriptions associated with it.
+ *
+ * This function will traverse the vnode tree in depth-first order and release all subscriptions.
+ *
+ * The function takes into account:
+ *
+ * - Projection nodes by not recursing into them.
+ * - Component nodes by recursing into the component content nodes (which may be projected).
+ *
+ * @param cursorRoot - Optional cursor root (vStartNode) to propagate dirty bits to during diff.
+ */
+function cleanup(container, journal, vNode, cursorRoot = null) {
+    let vCursor = vNode;
+    const cursorRootData = cursorRoot && isCursor(cursorRoot) ? getCursorData(cursorRoot) : null;
+    // Depth first traversal
+    if (vnode_isTextVNode(vNode)) {
+        markVNodeAsDeleted(vCursor);
+        // Text nodes don't have subscriptions or children;
         return;
     }
-    if (moveOrCreateKeyedNode(diffContext, null, jsxKey, getSideBufferKey(null, jsxKey), diffContext.$vParent$, true)) {
-        vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
-        diffContext.$vNewNode$.key = jsxKey;
-        isDev && vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, type);
-    }
-}
-function expectComponent(diffContext, component) {
-    const componentMeta = component[SERIALIZABLE_STATE];
-    let host = (diffContext.$vNewNode$ || diffContext.$vCurrent$);
-    const jsxNode = diffContext.$jsxValue$;
-    if (componentMeta) {
-        const jsxProps = jsxNode.props;
-        // QComponent
-        let shouldRender = false;
-        const [componentQRL] = componentMeta;
-        const componentHash = componentQRL.$hash$;
-        const vNodeComponentHash = getComponentHash(host, diffContext.$container$.$getObjectById$);
-        const lookupKey = jsxNode.key || componentHash;
-        const vNodeLookupKey = getKey(host) || vNodeComponentHash;
-        const lookupKeysAreEqual = lookupKey === vNodeLookupKey;
-        const hashesAreEqual = componentHash === vNodeComponentHash;
-        if (lookupKeysAreEqual) {
-            if (hashesAreEqual) {
-                deleteFromSideBuffer(diffContext, null, lookupKey);
-            }
-            else {
-                insertNewComponent(diffContext, host, componentQRL, jsxProps);
-                host = diffContext.$vNewNode$;
-                shouldRender = true;
-            }
+    let vParent = null;
+    do {
+        if (cursorRootData && vCursor !== cursorRoot && isCursor(vCursor)) {
+            abandonCursor(container, cursorRootData, vCursor);
         }
-        else {
-            if (moveOrCreateKeyedNode(diffContext, null, lookupKey, lookupKey, diffContext.$vParent$)) {
-                insertNewComponent(diffContext, host, componentQRL, jsxProps);
-                shouldRender = true;
+        const type = vCursor.flags;
+        if (type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) {
+            clearAllEffects(container, vCursor);
+            markVNodeAsDeleted(vCursor);
+            const isComponent = type & 2 /* VNodeFlags.Virtual */ &&
+                vnode_getProp(vCursor, OnRenderProp, null) !== null;
+            if (isComponent) {
+                // cleanup q:seq content
+                const seq = container.getHostProp(vCursor, ELEMENT_SEQ);
+                if (seq) {
+                    for (let i = 0; i < seq.length; i++) {
+                        const obj = seq[i];
+                        if (isObject(obj)) {
+                            const objIsTask = isTask(obj);
+                            if (objIsTask && obj.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
+                                obj.$flags$ |= 16 /* TaskFlags.NEEDS_CLEANUP */;
+                                markVNodeDirty(container, vCursor, 128 /* ChoreBits.CLEANUP */, cursorRoot);
+                                // don't call cleanupDestroyable yet, do it by the scheduler
+                                continue;
+                            }
+                            else if (obj instanceof SignalImpl || isStore(obj)) {
+                                clearAllEffects(container, obj);
+                            }
+                            if (objIsTask || obj instanceof AsyncSignalImpl) {
+                                cleanupDestroyable(obj);
+                            }
+                        }
+                    }
+                }
+                // SPECIAL CASE: If we are a component, we need to descend into the projected content and release the content.
+                const attrs = vCursor.props;
+                if (attrs) {
+                    const keys = Object.keys(attrs);
+                    for (let i = 0; i < keys.length; i++) {
+                        const key = keys[i];
+                        if (isSlotProp(key)) {
+                            const value = attrs[key];
+                            if (value) {
+                                attrs[key] = null; // prevent infinite loop
+                                const projection = typeof value === 'string'
+                                    ? vnode_locate(container.rootVNode, value)
+                                    : value;
+                                let projectionChild = vnode_getFirstChild(projection);
+                                while (projectionChild) {
+                                    cleanup(container, journal, projectionChild, cursorRoot);
+                                    projectionChild = projectionChild.nextSibling;
+                                }
+                                cleanupStaleUnclaimedProjection(container, journal, projection);
+                            }
+                        }
+                    }
+                }
             }
-            host = (diffContext.$vNewNode$ || diffContext.$vCurrent$);
-        }
-        if (host) {
-            const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, diffContext.$container$.$getObjectById$);
-            if (!shouldRender) {
-                const propsChanged = handleProps(host, jsxProps, vNodeProps, diffContext.$container$);
-                // if props changed but key is null we need to insert a new component, because we need to execute hooks etc
-                if (propsChanged && jsxNode.key == null) {
-                    insertNewComponent(diffContext, host, componentQRL, jsxProps);
-                    host = diffContext.$vNewNode$;
-                    shouldRender = true;
+            const isProjection = vnode_isProjection(vCursor);
+            // Descend into children
+            if (!isProjection) {
+                // Only if it is not a projection
+                const vFirstChild = vnode_getFirstChild(vCursor);
+                if (vFirstChild) {
+                    vCursor = vFirstChild;
+                    continue;
                 }
-                shouldRender ||= propsChanged;
             }
-            if (shouldRender) {
-                // Assign the new QRL instance to the host.
-                // Unfortunately it is created every time, something to fix in the optimizer.
-                vnode_setProp(host, OnRenderProp, componentQRL);
+            // TODO: probably can be removed
+            else if (vCursor === vNode) {
                 /**
-                 * Mark host as not deleted. The host could have been marked as deleted if it there was a
-                 * cleanup run. Now we found it and want to reuse it, so we need to mark it as not deleted.
+                 * If it is a projection and we are at the root, then we should only walk the children to
+                 * materialize the projection content. This is because we could have references in the vnode
+                 * refs map which need to be materialized before cleanup.
                  */
-                host.flags &= -33 /* VNodeFlags.Deleted */;
-                markVNodeDirty(diffContext.$container$, host, 4 /* ChoreBits.COMPONENT */, diffContext.$cursor$);
+                const vFirstChild = vnode_getFirstChild(vCursor);
+                if (vFirstChild) {
+                    vnode_walkVNode(vFirstChild);
+                    return;
+                }
+                clearProjectionFromSlotParent(container, vCursor);
             }
         }
-        descendContentToProject(diffContext, jsxNode.children, host);
-    }
-    else {
-        const lookupKey = jsxNode.key;
-        const vNodeLookupKey = getKey(host);
-        const lookupKeysAreEqual = lookupKey === vNodeLookupKey;
-        const vNodeComponentHash = getComponentHash(host, diffContext.$container$.$getObjectById$);
-        const isInlineComponent = vNodeComponentHash == null;
-        if ((host && !isInlineComponent) || !host) {
-            insertNewInlineComponent(diffContext);
-            host = diffContext.$vNewNode$;
+        else if (type & 4 /* VNodeFlags.Text */) {
+            markVNodeAsDeleted(vCursor);
         }
-        else if (!lookupKeysAreEqual) {
-            if (moveOrCreateKeyedNode(diffContext, null, lookupKey, lookupKey, diffContext.$vParent$)) {
-                // We did not find the inline component, create it.
-                insertNewInlineComponent(diffContext);
-            }
-            host = (diffContext.$vNewNode$ || diffContext.$vCurrent$);
+        // Out of children
+        if (vCursor === vNode) {
+            // we are where we started, this means that vNode has no children, so we are done.
+            return;
         }
-        else {
-            // delete the key from the side buffer if it is the same component
-            deleteFromSideBuffer(diffContext, null, lookupKey);
+        // Out of children, go to next sibling
+        const vNextSibling = vCursor.nextSibling;
+        if (vNextSibling) {
+            vCursor = vNextSibling;
+            continue;
         }
-        if (host) {
-            let componentHost = host;
-            // Find the closest component host which has `OnRender` prop. This is need for subscriptions context.
-            while (componentHost &&
-                (vnode_isVirtualVNode(componentHost)
-                    ? vnode_getProp(componentHost, OnRenderProp, null) === null
-                    : true)) {
-                componentHost = componentHost.parent || vnode_getProjectionParentComponent(componentHost);
+        // Out of siblings, go to parent
+        vParent = vCursor.parent;
+        while (vParent) {
+            if (vParent === vNode) {
+                // We are back where we started, we are done.
+                return;
+            }
+            const vNextParentSibling = vParent.nextSibling;
+            if (vNextParentSibling) {
+                vCursor = vNextParentSibling;
+                break;
             }
-            const jsxOutput = executeComponent(diffContext.$container$, host, (componentHost || diffContext.$container$.rootVNode), component, jsxNode.props);
-            diffContext.$asyncQueue$.push(jsxOutput, host);
+            vParent = vParent.parent;
+        }
+        if (vParent == null) {
+            // We are done.
+            return;
         }
+    } while (true);
+}
+function clearProjectionFromSlotParent(container, vNode) {
+    if (!vNode.slotParent) {
+        return;
+    }
+    const slotName = container.getHostProp(vNode, QSlot);
+    if (slotName != null && container.getHostProp(vNode.slotParent, slotName) === vNode) {
+        vnode_setProp(vNode.slotParent, slotName, null);
     }
 }
-function insertNewComponent(diffContext, host, componentQRL, jsxProps) {
-    if (host) {
-        clearAllEffects(diffContext.$container$, host);
+function cleanupStaleUnclaimedProjection(container, journal, projection) {
+    // we are removing a node where the projection would go after slot render.
+    // This is not needed, so we need to cleanup still unclaimed projection
+    const projectionParent = projection.parent;
+    if (projectionParent) {
+        const projectionParentType = projectionParent.flags;
+        if (projectionParentType & 1 /* VNodeFlags.Element */ &&
+            vnode_getElementName(projectionParent) === QTemplate) {
+            // if parent is the q:template element then projection is still unclaimed - remove it
+            clearProjectionFromSlotParent(container, projection);
+            vnode_remove(journal, projectionParent, projection, true);
+        }
     }
-    vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
-    const jsxNode = diffContext.$jsxValue$;
-    isDev && vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, "C" /* VirtualType.Component */);
-    vnode_setProp(diffContext.$vNewNode$, OnRenderProp, componentQRL);
-    vnode_setProp(diffContext.$vNewNode$, ELEMENT_PROPS, jsxProps);
-    diffContext.$vNewNode$.key = jsxNode.key;
 }
-function insertNewInlineComponent(diffContext) {
-    vnode_insertVirtualBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newVirtual()), getInsertBefore(diffContext));
-    const jsxNode = diffContext.$jsxValue$;
-    isDev &&
-        vnode_setProp(diffContext.$vNewNode$, DEBUG_TYPE, "I" /* VirtualType.InlineComponent */);
-    vnode_setProp(diffContext.$vNewNode$, ELEMENT_PROPS, jsxNode.props);
-    if (jsxNode.key) {
-        diffContext.$vNewNode$.key = jsxNode.key;
+function markVNodeAsDeleted(vCursor) {
+    /**
+     * Marks vCursor as deleted. We need to do this to prevent chores from running after the vnode is
+     * removed. (for example signal subscriptions)
+     */
+    vCursor.flags |= 32 /* VNodeFlags.Deleted */;
+}
+function areWrappedSignalsEqual(oldSignal, newSignal) {
+    if (oldSignal === newSignal) {
+        return true;
     }
+    return (newSignal.$func$ === oldSignal.$func$ && areArgumentsEqual(newSignal.$args$, oldSignal.$args$));
 }
-function expectText(diffContext, text) {
-    if (diffContext.$vCurrent$ !== null) {
-        const type = vnode_getType(diffContext.$vCurrent$);
-        if (type === 3 /* Text */) {
-            if (text !== vnode_getText(diffContext.$vCurrent$)) {
-                vnode_setText(diffContext.$journal$, diffContext.$vCurrent$, text);
-                return;
-            }
-            return;
+function areArgumentsEqual(oldArgs, newArgs) {
+    if (oldArgs === newArgs) {
+        return true;
+    }
+    if (!oldArgs || !newArgs || oldArgs.length !== newArgs.length) {
+        return false;
+    }
+    for (let i = 0; i < oldArgs.length; i++) {
+        if (oldArgs[i] !== newArgs[i]) {
+            return false;
         }
     }
-    vnode_insertElementBefore(diffContext.$journal$, diffContext.$vParent$, (diffContext.$vNewNode$ = vnode_newText((qTest ? diffContext.$container$.document : document).createTextNode(text), text)), getCurrentInsertBefore(diffContext));
+    return true;
 }
-/**
- * Retrieve the key from the VNode.
- *
- * @param vNode - VNode to retrieve the key from
- * @returns Key
- */
-function getKey(vNode) {
-    if (vNode == null || vnode_isTextVNode(vNode)) {
-        return null;
+function containsWrappedSignal(data, signal) {
+    if (!(signal instanceof WrappedSignalImpl)) {
+        return false;
     }
-    return vNode.key;
-}
-/**
- * Retrieve the component hash from the VNode.
- *
- * @param vNode - VNode to retrieve the key from
- * @param getObject - Function to retrieve the object by id for QComponent QRL
- * @returns Hash
- */
-function getComponentHash(vNode, getObject) {
-    if (vNode == null || vnode_isTextVNode(vNode)) {
-        return null;
+    for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        if (item instanceof WrappedSignalImpl && areWrappedSignalsEqual(item, signal)) {
+            return true;
+        }
     }
-    const qrl = vnode_getProp(vNode, OnRenderProp, getObject);
-    return qrl ? qrl.$hash$ : null;
+    return false;
 }
+
 /**
- * Marker class for JSX projection.
+ * Use `executeComponent` to execute a component.
  *
- * Assume you have component like so
+ * Component execution can be complex because of:
  *
- * ```
- * <SomeComponent>
- *   some-text
- *   <span q:slot="name">some more text</span>
- *   more-text
- * </SomeComponent>
- * ```
+ * - It can by async
+ * - It can contain many tasks which need to be awaited
+ * - Each task can run multiple times if they track signals which change.
+ * - The JSX may be re-generated multiple times of a task needs to be rerun due to signal change.
+ * - It needs to keep track of hook state.
  *
- * Before the `<SomeCompetent/>` is processed its children are transformed into:
+ * For `component$`: `renderHost` === `subscriptionHost` For inlined-components: the
+ * `subscriptionHost` is a parent `component$` which needs to re-execute.
  *
- * ```
- *   <Projection q:slot="">
- *     some-text
- *     more-text
- *   </Projection>
- *   <Projection q:slot="name">
- *     <span q:slot="name">some more text</span>
- *   </Projection>
- * ```
+ * @param container
+ * @param renderHost - VNode into which the component is rendered into.
+ * @param subscriptionHost - VNode which will be re-executed if the component needs to re-render.
+ * @param componentQRL
+ * @param props
+ * @returns
  */
-function Projection() { }
-function handleProps(host, jsxProps, vNodeProps, container) {
-    let shouldRender = false;
-    if (vNodeProps) {
-        const constPropsDifferent = handleChangedProps(jsxProps[_CONST_PROPS], vNodeProps[_CONST_PROPS], vNodeProps[_PROPS_HANDLER], container, false);
-        shouldRender ||= constPropsDifferent;
-        const varPropsDifferent = handleChangedProps(jsxProps[_VAR_PROPS], vNodeProps[_VAR_PROPS], vNodeProps[_PROPS_HANDLER], container, true);
-        shouldRender ||= varPropsDifferent;
-        // Update the owner after all props have been synced
-        vNodeProps[_OWNER] = jsxProps[_OWNER];
+const executeComponent = (container, renderHost, subscriptionHost, componentQRL, props) => {
+    const iCtx = newRenderInvokeContext(container.$locale$, renderHost, container);
+    if (subscriptionHost) {
+        iCtx.$effectSubscriber$ = getSubscriber(subscriptionHost, ":" /* EffectProperty.COMPONENT */);
+        iCtx.$container$ = container;
     }
-    else if (jsxProps) {
-        // If there is no props instance, create a new one.
-        // We can do this because we are not using the props instance for anything else.
-        vnode_setProp(host, ELEMENT_PROPS, jsxProps);
-        vNodeProps = jsxProps;
+    let componentFn;
+    container.ensureProjectionResolved(renderHost);
+    let isInlineComponent = false;
+    if (componentQRL === null) {
+        componentQRL = container.getHostProp(renderHost, OnRenderProp);
+        isDev && assertDefined(componentQRL, 'No Component found at this location');
     }
-    return shouldRender;
-}
-function handleChangedProps(src, dst, propsHandler, container, triggerEffects = true) {
-    if (isPropsEmpty(src) && isPropsEmpty(dst)) {
-        return false;
+    if (isQrl(componentQRL)) {
+        props = props || container.getHostProp(renderHost, ELEMENT_PROPS) || EMPTY_OBJ;
+        // TODO is this possible? JSXNode handles this, no?
+        if ('children' in props) {
+            delete props.children;
+        }
+        componentFn = componentQRL.getFn(iCtx);
     }
-    propsHandler.$container$ = container;
-    let changed = false;
-    // Update changed/added props from src
-    if (src) {
-        for (const key in src) {
-            if (key === 'children' || key === QBackRefs) {
-                continue;
-            }
-            if (!dst || src[key] !== dst[key]) {
-                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];
-                    }
-                    const didTigger = triggerPropsProxyEffect(propsHandler, key);
-                    if (!didTigger) {
-                        // If the effect was not triggered, then the prop has changed and we should rerender
-                        changed = true;
-                    }
-                }
-                else {
-                    // Early return for const props (no effects)
-                    return true;
+    else if (isQwikComponent(componentQRL)) {
+        const qComponentFn = componentQRL;
+        componentFn = () => invokeApply(iCtx, qComponentFn, [props || EMPTY_OBJ, null, 0]);
+    }
+    else {
+        isInlineComponent = true;
+        const inlineComponent = componentQRL;
+        componentFn = () => invokeApply(iCtx, inlineComponent, [props || EMPTY_OBJ]);
+    }
+    const isSsr = qTest ? isServerPlatform() : isServer;
+    const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall(() => {
+        if (!isInlineComponent) {
+            container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
+            container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
+        }
+        if (retryCount > 0 && vnode_isVNode(renderHost)) {
+            clearAllEffects(container, renderHost);
+        }
+        return maybeThen(componentFn(props), (jsx) => maybeThen(iCtx.$waitOn$, () => jsx));
+    }, (jsx) => {
+        // In SSR, check if the component was marked dirty (COMPONENT bit) during execution.
+        // This happens when something completes and updates reactive primitives
+        // while we're waiting on $waitOn$. If so, we need to re-execute the component
+        // to get fresh JSX with updated values.
+        if (isSsr && !isInlineComponent) {
+            const ssrNode = renderHost;
+            if (ssrNode.dirty & 4 /* ChoreBits.COMPONENT */) {
+                ssrNode.dirty &= ~4 /* ChoreBits.COMPONENT */;
+                if (retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
+                    return executeComponentWithPromiseExceptionRetry(retryCount + 1);
                 }
             }
         }
-    }
-    // Remove props that are in dst but not in src
-    if (dst) {
-        for (const key in dst) {
-            if (key === 'children' || key === QBackRefs) {
-                continue;
-            }
-            if (!src || !_hasOwnProperty.call(src, key)) {
-                if (triggerEffects) {
-                    delete dst[key];
-                    const didTigger = triggerPropsProxyEffect(propsHandler, key);
-                    if (!didTigger) {
-                        // If the effect was not triggered, then the prop has changed and we should rerender
-                        changed = true;
-                    }
-                }
+        const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL);
+        if (useOnEvents) {
+            return addUseOnEvents(container, jsx, useOnEvents);
+        }
+        return jsx;
+    }, (err) => {
+        if (isPromise(err) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
+            return err.then(() => executeComponentWithPromiseExceptionRetry(++retryCount));
+        }
+        else {
+            if (retryCount >= MAX_RETRY_ON_PROMISE_COUNT) {
+                throw new Error(`Max retry count of component execution reached`);
             }
+            throw err;
         }
-    }
-    return changed;
-}
-function isPropsEmpty(props) {
-    if (!props) {
-        return true;
-    }
-    return isObjectEmpty(props);
-}
-/**
- * If vnode is removed, it is necessary to release all subscriptions associated with it.
- *
- * This function will traverse the vnode tree in depth-first order and release all subscriptions.
- *
- * The function takes into account:
- *
- * - Projection nodes by not recursing into them.
- * - Component nodes by recursing into the component content nodes (which may be projected).
+    });
+    return executeComponentWithPromiseExceptionRetry();
+};
+/**
+ * Adds `useOn` events to the JSX output.
  *
- * @param cursorRoot - Optional cursor root (vStartNode) to propagate dirty bits to during diff.
+ * @param jsx The JSX output to modify.
+ * @param useOnEvents The `useOn` events to add.
+ * @returns The modified JSX output.
  */
-function cleanup(container, journal, vNode, cursorRoot = null) {
-    let vCursor = vNode;
-    // Depth first traversal
-    if (vnode_isTextVNode(vNode)) {
-        markVNodeAsDeleted(vCursor);
-        // Text nodes don't have subscriptions or children;
-        return;
-    }
-    let vParent = null;
-    do {
-        const type = vCursor.flags;
-        if (type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) {
-            clearAllEffects(container, vCursor);
-            markVNodeAsDeleted(vCursor);
-            const isComponent = type & 2 /* VNodeFlags.Virtual */ &&
-                vnode_getProp(vCursor, OnRenderProp, null) !== null;
-            if (isComponent) {
-                // cleanup q:seq content
-                const seq = container.getHostProp(vCursor, ELEMENT_SEQ);
-                if (seq) {
-                    for (let i = 0; i < seq.length; i++) {
-                        const obj = seq[i];
-                        if (isObject(obj)) {
-                            const objIsTask = isTask(obj);
-                            if (objIsTask && obj.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                                obj.$flags$ |= 16 /* TaskFlags.NEEDS_CLEANUP */;
-                                markVNodeDirty(container, vCursor, 64 /* ChoreBits.CLEANUP */, cursorRoot);
-                                // don't call cleanupDestroyable yet, do it by the scheduler
-                                continue;
-                            }
-                            else if (obj instanceof SignalImpl || isStore(obj)) {
-                                clearAllEffects(container, obj);
-                            }
-                            if (objIsTask || obj instanceof AsyncSignalImpl) {
-                                cleanupDestroyable(obj);
+function addUseOnEvents(container, jsx, useOnEvents) {
+    const jsxElement = findFirstElementNode(jsx);
+    let jsxResult = jsx;
+    const qVisibleEvent = 'q-e:qvisible';
+    return maybeThen(jsxElement, (jsxElement) => {
+        // headless components are components that don't render a real DOM element
+        const isHeadless = !jsxElement;
+        // placeholder element is a <script> element that is used to add events to the document or window
+        let placeholderElement = null;
+        for (const key in useOnEvents) {
+            if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) {
+                let targetElement = jsxElement;
+                let eventKey = key;
+                if (isHeadless) {
+                    // if the component is headless, we need to add the event to the placeholder element
+                    if (key === qVisibleEvent ||
+                        key.startsWith("q-d:" /* EventNameHtmlScope.document */) ||
+                        key.startsWith("q-w:" /* EventNameHtmlScope.window */)) {
+                        if (!placeholderElement) {
+                            placeholderElement = createPlaceholderScriptNode();
+                            // A headless component that projects the document root (e.g. wrapping `<head>`/`<body>`
+                            // in a `<Slot/>`) would otherwise place the placeholder `<script>` as a direct child of
+                            // `<html>`, which is invalid. On the server let the container defer it into `<head>`.
+                            const isSsr = qTest ? isServerPlatform() : isServer;
+                            if (!(isSsr && container.$deferRootPlaceholder$(placeholderElement))) {
+                                jsxResult = injectPlaceholderElement(jsxResult, placeholderElement);
                             }
                         }
+                        targetElement = placeholderElement;
                     }
-                }
-                // SPECIAL CASE: If we are a component, we need to descend into the projected content and release the content.
-                const attrs = vCursor.props;
-                if (attrs) {
-                    const keys = Object.keys(attrs);
-                    for (let i = 0; i < keys.length; i++) {
-                        const key = keys[i];
-                        if (isSlotProp(key)) {
-                            const value = attrs[key];
-                            if (value) {
-                                attrs[key] = null; // prevent infinite loop
-                                const projection = typeof value === 'string'
-                                    ? vnode_locate(container.rootVNode, value)
-                                    : value;
-                                let projectionChild = vnode_getFirstChild(projection);
-                                while (projectionChild) {
-                                    cleanup(container, journal, projectionChild, cursorRoot);
-                                    projectionChild = projectionChild.nextSibling;
-                                }
-                                cleanupStaleUnclaimedProjection(journal, projection);
-                            }
+                    else {
+                        if (isDev) {
+                            const sourceLocation = getUseOnSourceLocation(useOnEvents[key].qrls);
+                            logWarn('You are trying to add an event "' +
+                                key +
+                                '" using `useOn` hook, ' +
+                                'but a node to which you can add an event is not found. ' +
+                                'Please make sure that the component outputs a DOM element.' +
+                                (sourceLocation ? ` Offending \`useOn\`: ${sourceLocation}.` : ''));
                         }
+                        continue;
                     }
                 }
-            }
-            const isProjection = vnode_isProjection(vCursor);
-            // Descend into children
-            if (!isProjection) {
-                // Only if it is not a projection
-                const vFirstChild = vnode_getFirstChild(vCursor);
-                if (vFirstChild) {
-                    vCursor = vFirstChild;
-                    continue;
-                }
-            }
-            // TODO: probably can be removed
-            else if (vCursor === vNode) {
-                /**
-                 * If it is a projection and we are at the root, then we should only walk the children to
-                 * materialize the projection content. This is because we could have references in the vnode
-                 * refs map which need to be materialized before cleanup.
-                 */
-                const vFirstChild = vnode_getFirstChild(vCursor);
-                if (vFirstChild) {
-                    vnode_walkVNode(vFirstChild, (vNode) => {
-                        /**
-                         * Instead of an ID, we store a direct reference to the VNode. This is necessary to
-                         * locate the slot's parent in a detached subtree, as the ID would become invalid.
-                         */
-                        if (vNode.flags & 2 /* VNodeFlags.Virtual */) {
-                            // The QSlotParent is used to find the slot parent during scheduling
-                            vNode.slotParent;
+                if (targetElement) {
+                    if (targetElement.type === 'script' && key === qVisibleEvent) {
+                        eventKey = 'q-d:qinit';
+                        if (isDev) {
+                            const sourceLocation = getUseOnSourceLocation(useOnEvents[key].qrls);
+                            logWarn(`You are trying to add the event "${key}" ` +
+                                'using the `useVisibleTask$` hook with the "intersection-observer" strategy, ' +
+                                'but this only works when the component outputs a DOM element. Falling back to ' +
+                                '"document-ready" instead.' +
+                                (sourceLocation ? ` Offending \`useVisibleTask$\`: ${sourceLocation}.` : ''));
                         }
-                    });
-                    return;
+                    }
+                    addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
                 }
             }
         }
-        else if (type & 4 /* VNodeFlags.Text */) {
-            markVNodeAsDeleted(vCursor);
-        }
-        // Out of children
-        if (vCursor === vNode) {
-            // we are where we started, this means that vNode has no children, so we are done.
-            return;
-        }
-        // Out of children, go to next sibling
-        const vNextSibling = vCursor.nextSibling;
-        if (vNextSibling) {
-            vCursor = vNextSibling;
-            continue;
-        }
-        // Out of siblings, go to parent
-        vParent = vCursor.parent;
-        while (vParent) {
-            if (vParent === vNode) {
-                // We are back where we started, we are done.
-                return;
-            }
-            const vNextParentSibling = vParent.nextSibling;
-            if (vNextParentSibling) {
-                vCursor = vNextParentSibling;
-                break;
+        return jsxResult;
+    });
+}
+function getUseOnSourceLocation(eventQrls) {
+    for (let i = 0; i < eventQrls.length; i++) {
+        const eventQrl = eventQrls[i];
+        const task = eventQrl?.getCaptured()?.[0];
+        if (isTask(task)) {
+            const dev = task.$qrl$.dev;
+            if (dev?.file) {
+                return typeof dev.lo === 'number' && typeof dev.hi === 'number'
+                    ? `${dev.file}:${dev.lo}-${dev.hi}`
+                    : dev.file;
             }
-            vParent = vParent.parent;
-        }
-        if (vParent == null) {
-            // We are done.
-            return;
         }
-    } while (true);
+    }
+    return null;
 }
-function cleanupStaleUnclaimedProjection(journal, projection) {
-    // we are removing a node where the projection would go after slot render.
-    // This is not needed, so we need to cleanup still unclaimed projection
-    const projectionParent = projection.parent;
-    if (projectionParent) {
-        const projectionParentType = projectionParent.flags;
-        if (projectionParentType & 1 /* VNodeFlags.Element */ &&
-            vnode_getElementName(projectionParent) === QTemplate) {
-            // if parent is the q:template element then projection is still unclaimed - remove it
-            vnode_remove(journal, projectionParent, projection, true);
+/**
+ * Adds an event to the JSX element.
+ *
+ * @param jsxElement The JSX element to add the event to.
+ * @param key The event name.
+ * @param value The event value.
+ */
+function addUseOnEvent(jsxElement, key, value) {
+    // These handlers are always there, so they go in constProps
+    const props = (jsxElement.constProps ||= {});
+    const propValue = props[key];
+    const qrls = value.qrls;
+    if (propValue == null) {
+        props[key] = qrls;
+    }
+    else if (Array.isArray(propValue)) {
+        propValue.push(...qrls);
+    }
+    else {
+        props[key] = [propValue, ...qrls];
+    }
+    const varProp = jsxElement.varProps[key];
+    if (varProp) {
+        // we need to demote the handlers to varProps
+        if (Array.isArray(propValue)) {
+            propValue.push(...props[key]);
         }
+        else {
+            jsxElement.varProps[key] = [propValue, ...qrls];
+        }
+        props[key] = undefined;
     }
+    const capture = value.capture;
+    const preventdefault = value.preventdefault;
+    const stoppropagation = value.stoppropagation;
+    if (!capture && !preventdefault && !stoppropagation) {
+        return;
+    }
+    const [, eventName] = getEventDataFromHtmlAttribute(key);
+    capture && addUseOnModifier(jsxElement, eventName, 'capture');
+    preventdefault && addUseOnModifier(jsxElement, eventName, 'preventdefault');
+    stoppropagation && addUseOnModifier(jsxElement, eventName, 'stoppropagation');
 }
-function markVNodeAsDeleted(vCursor) {
-    /**
-     * Marks vCursor as deleted. We need to do this to prevent chores from running after the vnode is
-     * removed. (for example signal subscriptions)
-     */
-    vCursor.flags |= 32 /* VNodeFlags.Deleted */;
+function addUseOnModifier(jsxElement, eventName, modifier) {
+    const key = `${modifier}:${eventName}`;
+    const varProps = jsxElement.varProps;
+    if (varProps === EMPTY_OBJ) {
+        jsxElement.varProps = {};
+    }
+    jsxElement.varProps[key] = true;
 }
-function areWrappedSignalsEqual(oldSignal, newSignal) {
-    if (oldSignal === newSignal) {
-        return true;
+/**
+ * Finds the first element node in the JSX output.
+ *
+ * @param jsx The JSX output to search.
+ * @returns The first element node or null if no element node is found.
+ */
+function findFirstElementNode(jsx) {
+    const queue = [jsx];
+    while (queue.length) {
+        const jsx = queue.shift();
+        if (isJSXNode(jsx)) {
+            if (typeof jsx.type === 'string') {
+                return jsx;
+            }
+            queue.push(jsx.children);
+        }
+        else if (isArray(jsx)) {
+            queue.push(...jsx);
+        }
+        else if (isPromise(jsx)) {
+            return maybeThen(jsx, (jsx) => findFirstElementNode(jsx));
+        }
+        else if (isSignal(jsx)) {
+            return findFirstElementNode(jsx.untrackedValue);
+        }
     }
-    return (newSignal.$func$ === oldSignal.$func$ && areArgumentsEqual(newSignal.$args$, oldSignal.$args$));
+    return null;
 }
-function areArgumentsEqual(oldArgs, newArgs) {
-    if (oldArgs === newArgs) {
-        return true;
-    }
-    if (!oldArgs || !newArgs || oldArgs.length !== newArgs.length) {
-        return false;
-    }
-    for (let i = 0; i < oldArgs.length; i++) {
-        if (oldArgs[i] !== newArgs[i]) {
-            return false;
+/**
+ * Injects a placeholder <script> element into the JSX output.
+ *
+ * This is necessary for headless components (components that don't render a real DOM element) to
+ * have an anchor point for `useOn` event listeners that target the document or window.
+ *
+ * @param jsx The JSX output to modify.
+ * @param placeholder The placeholder element to inject.
+ * @returns The modified JSX output.
+ */
+function injectPlaceholderElement(jsx, placeholder) {
+    // For regular JSX nodes, we can append the placeholder to its children.
+    if (isJSXNode(jsx)) {
+        // Inline components don't always render children, so we wrap them in Fragment which does.
+        if (jsx.type !== Fragment && !isQwikComponent(jsx.type)) {
+            return _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null);
+        }
+        if (jsx.children == null) {
+            jsx.children = placeholder;
+        }
+        else if (isArray(jsx.children)) {
+            jsx.children.push(placeholder);
+        }
+        else {
+            jsx.children = [jsx.children, placeholder];
         }
+        return jsx;
     }
-    return true;
-}
-function containsWrappedSignal(data, signal) {
-    if (!(signal instanceof WrappedSignalImpl)) {
-        return false;
+    // For primitives, we can't add children, so we wrap them in a fragment.
+    if (isPrimitiveOrNullUndefined(jsx)) {
+        return _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null);
     }
-    for (let i = 0; i < data.length; i++) {
-        const item = data[i];
-        if (item instanceof WrappedSignalImpl && areWrappedSignalsEqual(item, signal)) {
-            return true;
-        }
+    // For an array of nodes, we inject the placeholder into the first element.
+    if (isArray(jsx) && jsx.length > 0) {
+        injectPlaceholderElement(jsx[0], placeholder);
+        return jsx;
     }
-    return false;
+    // For anything else we do nothing.
+    return jsx;
+}
+/** @returns An empty <script> element for adding qwik metadata attributes to */
+function createPlaceholderScriptNode() {
+    return new JSXNodeImpl('script', null, { hidden: '' }, null, 0, null);
 }
 
 function collectChildren(first, last = null) {
@@ -6033,6 +6142,22 @@ function executeTasks(vNode, container, cursorData) {
     }
     return taskPromise;
 }
+function setInlineComponentData(vNode, componentFn, subscriptionHost, jsxProps) {
+    const props = (vNode.props ||= {});
+    props[INLINE_COMPONENT_DATA_KEY] = {
+        componentFn,
+        subscriptionHost,
+        props: jsxProps,
+    };
+}
+function getInlineComponentData(vNode) {
+    const props = vNode.props;
+    const data = props?.[INLINE_COMPONENT_DATA_KEY] || null;
+    if (data) {
+        delete props[INLINE_COMPONENT_DATA_KEY];
+    }
+    return data;
+}
 function getNodeDiffPayload(vNode) {
     const props = vNode.props;
     return props?.[NODE_DIFF_DATA_KEY];
@@ -6050,7 +6175,7 @@ function setErrorPayload(vNode, error) {
     props[ERROR_DATA_KEY] = error;
 }
 function executeErrorWrap(vNode, journal) {
-    vNode.dirty &= -257 /* ChoreBits.ERROR_WRAP */;
+    vNode.dirty &= -513 /* ChoreBits.ERROR_WRAP */;
     const err = getErrorPayload(vNode);
     if (!err) {
         return;
@@ -6071,7 +6196,7 @@ function executeErrorWrap(vNode, journal) {
     // avoid an infinite loop — those children are now under errored-host, not this host.
     // This is safe because CHILDREN is always processed before ERROR_WRAP in the walker,
     // so any pre-existing child work has already completed.
-    vNode.dirty &= -33 /* ChoreBits.CHILDREN */;
+    vNode.dirty &= -65 /* ChoreBits.CHILDREN */;
     vNode.dirtyChildren = null;
 }
 function executeNodeDiff(vNode, container, journal, cursor) {
@@ -6104,7 +6229,19 @@ function executeComponentChore(vNode, container, journal, cursor) {
         return;
     }
     const props = container.getHostProp(host, ELEMENT_PROPS) || null;
-    const result = safeCall(() => executeComponent(container, host, host, componentQRL, props), (jsx) => {
+    return executeComponentFunction(container, host, host, componentQRL, props, journal, cursor);
+}
+function executeInlineComponentChore(vNode, container, journal, cursor) {
+    vNode.dirty &= -9 /* ChoreBits.INLINE_COMPONENT */;
+    const host = vNode;
+    const inlineComponentData = getInlineComponentData(vNode);
+    if (!inlineComponentData) {
+        return;
+    }
+    return executeComponentFunction(container, host, inlineComponentData.subscriptionHost || container.rootVNode, inlineComponentData.componentFn, inlineComponentData.props, journal, cursor);
+}
+function executeComponentFunction(container, host, subscriptionHost, componentFn, props, journal, cursor) {
+    const result = safeCall(() => executeComponent(container, host, subscriptionHost, componentFn, props), (jsx) => {
         const styleScopedId = container.getHostProp(host, QScopedStyle);
         return retryOnPromise(() => vnode_diff(container, journal, jsx, host, cursor, addComponentStylePrefix(styleScopedId)));
     }, (err) => {
@@ -6170,7 +6307,7 @@ function setNodeProp(domVNode, journal, property, value, isConst, scopedStyleIdP
  * @returns Void
  */
 function executeNodeProps(vNode, journal) {
-    vNode.dirty &= -9 /* ChoreBits.NODE_PROPS */;
+    vNode.dirty &= -17 /* ChoreBits.NODE_PROPS */;
     if (!(vNode.flags & 1 /* VNodeFlags.Element */)) {
         return;
     }
@@ -6201,7 +6338,7 @@ function executeNodeProps(vNode, journal) {
  * @returns Void
  */
 function executeCleanup(vNode, container) {
-    vNode.dirty &= -65 /* ChoreBits.CLEANUP */;
+    vNode.dirty &= -129 /* ChoreBits.CLEANUP */;
     // TODO add promises to extraPromises
     const elementSeq = container.getHostProp(vNode, ELEMENT_SEQ);
     if (!elementSeq || elementSeq.length === 0) {
@@ -6228,7 +6365,7 @@ function executeCleanup(vNode, container) {
  * @returns Promise if computation is async, void otherwise
  */
 function executeCompute(vNode, container) {
-    vNode.dirty &= -17 /* ChoreBits.COMPUTE */;
+    vNode.dirty &= -33 /* ChoreBits.COMPUTE */;
     const target = container.getHostProp(vNode, HOST_SIGNAL);
     if (!target) {
         return;
@@ -6254,7 +6391,7 @@ function executeCompute(vNode, container) {
  * @returns Promise if reconcile is async, void otherwise
  */
 function executeReconcile(vNode, container, journal, cursor) {
-    vNode.dirty &= -129 /* ChoreBits.RECONCILE */;
+    vNode.dirty &= -257 /* ChoreBits.RECONCILE */;
     const host = vNode;
     const props = container.getHostProp(host, ELEMENT_PROPS) || null;
     if (!props) {
@@ -6428,16 +6565,9 @@ function executeAfterFlush(container, cursorData) {
         cursorData.afterFlushTasks = null;
         return;
     }
-    let visibleTaskPromise;
     for (let i = 0; i < visibleTasks.length; i++) {
         const task = visibleTasks[i];
-        const result = runTask(task, container, task.$el$);
-        if (isPromise(result)) {
-            visibleTaskPromise = visibleTaskPromise ? visibleTaskPromise.then(() => result) : result;
-        }
-    }
-    if (visibleTaskPromise) {
-        (cursorData.extraPromises ||= []).push(visibleTaskPromise);
+        runTask(task, container, task.$el$);
     }
     cursorData.afterFlushTasks = null;
 }
@@ -6559,7 +6689,7 @@ function walkCursor(cursor, until) {
             return;
         }
         // Skip if the vNode is not dirty
-        if (!(currentVNode.dirty & 511 /* ChoreBits.DIRTY_MASK */)) {
+        if (!(currentVNode.dirty & 1023 /* ChoreBits.DIRTY_MASK */)) {
             // Move to next node
             __EXPERIMENTAL__.suspense && clearNearestCursorBoundary(currentVNode);
             setCursorPosition(container, cursorData, getNextVNode(currentVNode, cursor, container));
@@ -6568,10 +6698,10 @@ function walkCursor(cursor, until) {
         // Skip if the vNode is deleted
         if (currentVNode.flags & 32 /* VNodeFlags.Deleted */) {
             // if deleted, run cleanup if needed
-            if (currentVNode.dirty & 64 /* ChoreBits.CLEANUP */) {
+            if (currentVNode.dirty & 128 /* ChoreBits.CLEANUP */) {
                 executeCleanup(currentVNode, container);
             }
-            else if (currentVNode.dirty & 32 /* ChoreBits.CHILDREN */) {
+            else if (currentVNode.dirty & 64 /* ChoreBits.CHILDREN */) {
                 const next = tryDescendDirtyChildren(container, cursorData, currentVNode, cursor);
                 if (next !== null) {
                     currentVNode = next;
@@ -6579,7 +6709,7 @@ function walkCursor(cursor, until) {
                 }
             }
             // Clear dirty bits and move to next node
-            currentVNode.dirty &= -512 /* ChoreBits.DIRTY_MASK */;
+            currentVNode.dirty &= -1024 /* ChoreBits.DIRTY_MASK */;
             setCursorPosition(container, cursorData, getNextVNode(currentVNode, cursor, container));
             continue;
         }
@@ -6595,23 +6725,26 @@ function walkCursor(cursor, until) {
             else if (currentVNode.dirty & 4 /* ChoreBits.COMPONENT */) {
                 result = executeComponentChore(currentVNode, container, journal, cursor);
             }
-            else if (currentVNode.dirty & 128 /* ChoreBits.RECONCILE */) {
+            else if (currentVNode.dirty & 8 /* ChoreBits.INLINE_COMPONENT */) {
+                result = executeInlineComponentChore(currentVNode, container, journal, cursor);
+            }
+            else if (currentVNode.dirty & 256 /* ChoreBits.RECONCILE */) {
                 result = executeReconcile(currentVNode, container, journal, cursor);
             }
-            else if (currentVNode.dirty & 8 /* ChoreBits.NODE_PROPS */) {
+            else if (currentVNode.dirty & 16 /* ChoreBits.NODE_PROPS */) {
                 executeNodeProps(currentVNode, journal);
             }
-            else if (currentVNode.dirty & 16 /* ChoreBits.COMPUTE */) {
+            else if (currentVNode.dirty & 32 /* ChoreBits.COMPUTE */) {
                 result = executeCompute(currentVNode, container);
             }
-            else if (currentVNode.dirty & 32 /* ChoreBits.CHILDREN */) {
+            else if (currentVNode.dirty & 64 /* ChoreBits.CHILDREN */) {
                 const next = tryDescendDirtyChildren(container, cursorData, currentVNode, cursor);
                 if (next !== null) {
                     currentVNode = next;
                     continue;
                 }
             }
-            else if (currentVNode.dirty & 256 /* ChoreBits.ERROR_WRAP */) {
+            else if (currentVNode.dirty & 512 /* ChoreBits.ERROR_WRAP */) {
                 // Must run after CHILDREN so that all descendant chores (e.g. signal text
                 // NODE_DIFF updates) are flushed before we reparent children into the
                 // errored-host wrapper element.
@@ -6625,14 +6758,20 @@ function walkCursor(cursor, until) {
         if (result && isPromise(result)) {
             addCursorBoundary(cursorData, currentVNode);
             // Store promise on cursor and pause
-            cursorData.promise = result;
+            const blockingPromise = result;
+            cursorData.promise = blockingPromise;
             pauseCursor(cursor, container);
             const host = currentVNode;
-            result
+            blockingPromise
                 .catch((error) => {
-                container.handleError(error, host);
+                if (cursorData.promise === blockingPromise) {
+                    container.handleError(error, host);
+                }
             })
                 .finally(() => {
+                if (cursorData.promise !== blockingPromise) {
+                    return;
+                }
                 cursorData.promise = null;
                 resumeCursor(cursor, container);
                 triggerCursors();
@@ -6645,11 +6784,11 @@ function walkCursor(cursor, until) {
         }
     }
     isDev &&
-        assertFalse(!!(cursor.dirty & 511 /* ChoreBits.DIRTY_MASK */ && !cursorData.position), 'Cursor is still dirty and position is not set after walking');
+        assertFalse(!!(cursor.dirty & 1023 /* ChoreBits.DIRTY_MASK */ && !cursorData.position), 'Cursor is still dirty and position is not set after walking');
     finishWalk(container, cursor, cursorData, isRunningOnServer);
 }
 function finishWalk(container, cursor, cursorData, isServer) {
-    if (!(cursor.dirty & 511 /* ChoreBits.DIRTY_MASK */)) {
+    if (!(cursor.dirty & 1023 /* ChoreBits.DIRTY_MASK */)) {
         removeCursorFromQueue(cursor, container);
         if (!isServer) {
             executeFlushPhase(cursor, container);
@@ -6674,7 +6813,7 @@ function resolveCursor(container) {
 function tryDescendDirtyChildren(container, cursorData, currentVNode, cursor) {
     const dirtyChildren = currentVNode.dirtyChildren;
     if (!dirtyChildren || dirtyChildren.length === 0) {
-        currentVNode.dirty &= -33 /* ChoreBits.CHILDREN */;
+        currentVNode.dirty &= -65 /* ChoreBits.CHILDREN */;
         clearNearestCursorBoundary(currentVNode);
         return null;
     }
@@ -6706,21 +6845,21 @@ function partitionDirtyChildren(dirtyChildren, parent) {
 /** @returns Next vNode to process, or null if traversal is complete */
 function getNextVNode(vNode, cursor, container) {
     if (vNode === cursor) {
-        if (cursor.dirty & 511 /* ChoreBits.DIRTY_MASK */) {
+        if (cursor.dirty & 1023 /* ChoreBits.DIRTY_MASK */) {
             return cursor;
         }
         return null;
     }
     // Prefer slotParent (logical owner) for Projections, fall back to parent
     let parent = null;
-    if (vNode.slotParent && vNode.slotParent.dirty & 32 /* ChoreBits.CHILDREN */) {
+    if (vNode.slotParent && vNode.slotParent.dirty & 64 /* ChoreBits.CHILDREN */) {
         parent = vNode.slotParent;
     }
-    else if (vNode.parent && vNode.parent.dirty & 32 /* ChoreBits.CHILDREN */) {
+    else if (vNode.parent && vNode.parent.dirty & 64 /* ChoreBits.CHILDREN */) {
         parent = vNode.parent;
     }
     if (!parent) {
-        if (cursor.dirty & 511 /* ChoreBits.DIRTY_MASK */) {
+        if (cursor.dirty & 1023 /* ChoreBits.DIRTY_MASK */) {
             return cursor;
         }
         return null;
@@ -6731,7 +6870,7 @@ function getNextVNode(vNode, cursor, container) {
     let count = len;
     while (count-- > 0) {
         const nextVNode = dirtyChildren[index];
-        if (nextVNode.dirty & 511 /* ChoreBits.DIRTY_MASK */) {
+        if (nextVNode.dirty & 1023 /* ChoreBits.DIRTY_MASK */) {
             if (container && splitCursorBoundary(container, nextVNode)) {
                 index++;
                 if (index === len) {
@@ -6748,7 +6887,7 @@ function getNextVNode(vNode, cursor, container) {
         }
     }
     // all array items checked, children are no longer dirty
-    parent.dirty &= -33 /* ChoreBits.CHILDREN */;
+    parent.dirty &= -65 /* ChoreBits.CHILDREN */;
     parent.dirtyChildren = null;
     parent.nextDirtyChildIndex = 0;
     __EXPERIMENTAL__.suspense && clearNearestCursorBoundary(parent);
@@ -6824,13 +6963,13 @@ function findCursor(vNode) {
 /** @internal */
 function _executeSsrChores(container, ssrNode) {
     if (!(ssrNode.flags & 1 /* SsrNodeFlags.Updatable */)) {
-        if (ssrNode.dirty & 8 /* ChoreBits.NODE_PROPS */) {
+        if (ssrNode.dirty & 16 /* ChoreBits.NODE_PROPS */) {
             executeNodePropChore(container, ssrNode);
         }
-        if (ssrNode.dirty & 16 /* ChoreBits.COMPUTE */) {
+        if (ssrNode.dirty & 32 /* ChoreBits.COMPUTE */) {
             executeCompute(ssrNode, container);
         }
-        if (isDev && ssrNode.dirty & 511 /* ChoreBits.DIRTY_MASK */) {
+        if (isDev && ssrNode.dirty & 1023 /* ChoreBits.DIRTY_MASK */) {
             // 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
@@ -6845,7 +6984,7 @@ function _executeSsrChores(container, ssrNode) {
         This is often caused by modifying a signal in an already rendered component during SSR.`;
             logWarn(warningMessage);
         }
-        ssrNode.dirty &= -512 /* ChoreBits.DIRTY_MASK */;
+        ssrNode.dirty &= -1024 /* ChoreBits.DIRTY_MASK */;
         return;
     }
     let promise = null;
@@ -6855,7 +6994,7 @@ function _executeSsrChores(container, ssrNode) {
             promise = result;
         }
     }
-    if (ssrNode.dirty & 128 /* ChoreBits.RECONCILE */) {
+    if (ssrNode.dirty & 256 /* ChoreBits.RECONCILE */) {
         const result = executeReconcileChore(container, ssrNode);
         promise = promise ? promise.then(() => result) : result;
     }
@@ -6865,7 +7004,7 @@ function _executeSsrChores(container, ssrNode) {
     // it after $waitOn$ completes and re-execute the component function.
     // executeComponent will clear the bit after re-executing.
     // Clear all dirty bits EXCEPT COMPONENT
-    ssrNode.dirty &= -508;
+    ssrNode.dirty &= -1020;
     if (promise) {
         return promise;
     }
@@ -6893,7 +7032,7 @@ function executeTasksChore(container, ssrNode) {
     return promise;
 }
 function executeNodePropChore(container, ssrNode) {
-    ssrNode.dirty &= -9 /* ChoreBits.NODE_PROPS */;
+    ssrNode.dirty &= -17 /* ChoreBits.NODE_PROPS */;
     const allPropData = ssrNode.getProp(NODE_PROPS_DATA_KEY);
     if (!allPropData || allPropData.size === 0) {
         return;
@@ -6909,7 +7048,7 @@ function executeNodePropChore(container, ssrNode) {
     }
 }
 async function executeReconcileChore(container, ssrNode) {
-    ssrNode.dirty &= -129 /* ChoreBits.RECONCILE */;
+    ssrNode.dirty &= -257 /* ChoreBits.RECONCILE */;
     const host = ssrNode;
     const props = container.getHostProp(host, ELEMENT_PROPS) || null;
     if (!props) {
@@ -6942,7 +7081,7 @@ function propagatePath(target) {
     for (let i = 0; i < reusablePath.length; i++) {
         const child = reusablePath[i];
         const parent = reusablePath[i + 1] || target;
-        parent.dirty |= 32 /* ChoreBits.CHILDREN */;
+        parent.dirty |= 64 /* ChoreBits.CHILDREN */;
         parent.dirtyChildren ||= [];
         if (!parent.dirtyChildren.includes(child)) {
             parent.dirtyChildren.push(child);
@@ -6958,7 +7097,7 @@ function propagateToCursorRoot(container, vNode, cursorRoot) {
     let cursorBoundary = getOwnCursorBoundary(container, vNode);
     let current = vNode.slotParent || vNode.parent;
     while (current) {
-        const isDirty = current.dirty & 511 /* ChoreBits.DIRTY_MASK */;
+        const isDirty = current.dirty & 1023 /* ChoreBits.DIRTY_MASK */;
         const currentIsCursor = isCursor(current);
         if (__EXPERIMENTAL__.suspense) {
             cursorBoundary ||=
@@ -7052,9 +7191,9 @@ function markVNodeDirty(container, vNode, bits, cursorRoot = null) {
         }
         return;
     }
-    const isRealDirty = bits & 511 /* ChoreBits.DIRTY_MASK */;
+    const isRealDirty = bits & 1023 /* ChoreBits.DIRTY_MASK */;
     // If already dirty, no need to propagate again
-    if ((isRealDirty ? prevDirty & 511 /* ChoreBits.DIRTY_MASK */ : prevDirty) || vNode === cursorRoot) {
+    if ((isRealDirty ? prevDirty & 1023 /* ChoreBits.DIRTY_MASK */ : prevDirty) || vNode === cursorRoot) {
         return;
     }
     const parent = vNode.slotParent || vNode.parent;
@@ -7064,12 +7203,12 @@ function markVNodeDirty(container, vNode, bits, cursorRoot = null) {
         return;
     }
     // We must attach to a cursor subtree if it exists
-    if (parent && parent.dirty & 511 /* ChoreBits.DIRTY_MASK */) {
+    if (parent && parent.dirty & 1023 /* ChoreBits.DIRTY_MASK */) {
         // Dirty parent case: this vnode joins an already scheduled subtree, so inherit the parent's
         // nearest boundary unless this vnode owns a boundary itself.
         setNearestCursorBoundary(vNode, getOwnCursorBoundary(container, vNode) || getNearestCursorBoundary(container, parent));
         if (isRealDirty) {
-            parent.dirty |= 32 /* ChoreBits.CHILDREN */;
+            parent.dirty |= 64 /* ChoreBits.CHILDREN */;
         }
         parent.dirtyChildren ||= [];
         if (!parent.dirtyChildren.includes(vNode)) {
@@ -7501,14 +7640,10 @@ function vnode_walkVNode(vNode, callback) {
     let vCursor = vNode;
     // Depth first traversal
     if (vnode_isTextVNode(vNode)) {
-        callback?.(vNode, null);
         return;
     }
     let vParent = null;
     do {
-        if (callback?.(vCursor, vParent)) {
-            return;
-        }
         const vFirstChild = vnode_getFirstChild(vCursor);
         if (vFirstChild) {
             vCursor = vFirstChild;
@@ -7700,38 +7835,53 @@ const vnode_locate = (rootVNode, id) => {
     ensureElementVNode(rootVNode);
     let vNode = rootVNode;
     const containerElement = rootVNode.node;
-    const { qVNodeRefs } = containerElement;
+    const qVNodeRefs = containerElement.qVNodeRefs;
     let elementOffset = -1;
     let refElement;
+    const localId = typeof id === 'string' ? id : '';
     if (typeof id === 'string') {
         isDev && assertDefined(qVNodeRefs, 'Missing qVNodeRefs.');
-        elementOffset = parseInt(id);
+        elementOffset = parseInt(localId);
         refElement = qVNodeRefs.get(elementOffset);
     }
     else {
         refElement = id;
-        const vNode = refElement.vNode;
-        if (vNode) {
+        const qElement = refElement;
+        const cachedVNode = qElement.vNode;
+        if (cachedVNode) {
+            return cachedVNode;
+        }
+        if (__EXPERIMENTAL__.suspense && qElement._qSegment) {
+            vNode = vnode_newUnMaterializedElement(refElement);
+            vnode_ensureElementKeyInflated(vNode);
+            qElement.vNode = vNode;
             return vNode;
         }
     }
-    isDev && assertDefined(refElement, 'Missing refElement.');
+    isDev &&
+        assertDefined(refElement, 'Missing refElement ' + (typeof id === 'string' ? `for id ${id}` : ''));
     if (!vnode_isVNode(refElement)) {
         isDev &&
             assertTrue(containerElement.contains(refElement), `Couldn't find the element inside the container while locating the VNode.`);
-        // We need to find the vnode.
-        let parent = refElement;
-        const elementPath = [refElement];
-        while (parent && parent !== containerElement && !parent.vNode) {
-            parent = parent.parentElement;
-            elementPath.push(parent);
+        if (__EXPERIMENTAL__.suspense && refElement._qSegment) {
+            vNode = refElement.vNode || vnode_newUnMaterializedElement(refElement);
+            vnode_ensureElementKeyInflated(vNode);
         }
-        if (parent.vNode) {
-            vNode = parent.vNode;
-        }
-        // Start at rootVNode and follow the `elementPath` to find the vnode.
-        for (let i = elementPath.length - 2; i >= 0; i--) {
-            vNode = vnode_getVNodeForChildNode(vNode, elementPath[i]);
+        else {
+            // We need to find the vnode.
+            let parent = refElement;
+            const elementPath = [refElement];
+            while (parent && parent !== containerElement && !parent.vNode) {
+                parent = parent.parentElement;
+                elementPath.push(parent);
+            }
+            if (parent.vNode) {
+                vNode = parent.vNode;
+            }
+            // Start at rootVNode and follow the `elementPath` to find the vnode.
+            for (let i = elementPath.length - 2; i >= 0; i--) {
+                vNode = vnode_getVNodeForChildNode(vNode, elementPath[i]);
+            }
         }
         if (elementOffset != -1) {
             refElement.vNode = vNode;
@@ -7743,11 +7893,11 @@ const vnode_locate = (rootVNode, id) => {
     }
     if (typeof id === 'string') {
         // process virtual node search.
-        const idLength = id.length;
-        let idx = indexOfAlphanumeric(id, idLength);
+        const idLength = localId.length;
+        let idx = indexOfAlphanumeric(localId, idLength);
         let childIdx = 0;
         while (idx < idLength) {
-            const ch = id.charCodeAt(idx);
+            const ch = localId.charCodeAt(idx);
             childIdx *= 26 /* a-z */;
             if (ch >= 97 /* a */) {
                 // is lowercase
@@ -7811,9 +7961,10 @@ const vnode_getVNodeForChildNode = (vNode, childElement) => {
     return child;
 };
 const indexOfAlphanumeric = (id, length) => {
-    let idx = 0;
+    let idx = id.charCodeAt(0) === 45 /* - */ ? 1 : 0;
     while (idx < length) {
-        if (id.charCodeAt(idx) <= 57 /* 9 */) {
+        const ch = id.charCodeAt(idx);
+        if (ch >= 48 /* 0 */ && ch <= 57 /* 9 */) {
             idx++;
         }
         else {
@@ -8211,6 +8362,12 @@ const vnode_getFirstChild = (vnode) => {
         return null;
     }
     let vFirstChild = vnode.firstChild;
+    if (__EXPERIMENTAL__.suspense &&
+        vFirstChild === undefined &&
+        vnode_isElementVNode(vnode) &&
+        hasOnlySuspensePlaceholder(vnode.node)) {
+        return null;
+    }
     if (vFirstChild === undefined) {
         vFirstChild = ensureMaterialized(vnode);
     }
@@ -8232,6 +8389,7 @@ const splitVNodeData = (vNodeData) => {
 };
 const materialize = (vNode, element, firstChild, vNodeData) => {
     vnode_ensureElementKeyInflated(vNode);
+    __EXPERIMENTAL__.suspense ? element._qSegment || null : null;
     if (vNodeData) {
         if (vNodeData.charCodeAt(0) === VNodeDataChar.SEPARATOR &&
             vNodeData.charCodeAt(1) === VNodeDataChar.SEPARATOR) {
@@ -8259,7 +8417,7 @@ const materialize = (vNode, element, firstChild, vNodeData) => {
     }
     else {
         // Materialize DOM element from HTML only
-        return materializeFromDOM(vNode, firstChild);
+        return materializeFromDOM(vNode, firstChild, undefined);
     }
 };
 const ensureMaterialized = (vnode) => {
@@ -8384,13 +8542,13 @@ const fastFirstChild = (node) => {
     node = node && _fastFirstChild.call(node);
     // Handle q:ignore as first child (e.g. qwikify$ Host with reactify$ projections).
     // Navigate depth-first to the first q:container-island and return its first element.
-    if (node &&
-        fastNodeType(node) === /* Node.COMMENT_NODE */ 8 &&
-        node.nodeValue?.startsWith(QIgnore)) {
+    if (node && fastNodeType(node) === /* Node.COMMENT_NODE */ 8) {
         if (!_fastNextSibling) {
             _fastNextSibling = fastGetter(node, 'nextSibling');
         }
-        return getNodeAfterCommentNode(node, QContainerIsland, _fastNextSibling, _fastFirstChild);
+        if (node.nodeValue?.startsWith(QIgnore)) {
+            return getNodeAfterCommentNode(node, QContainerIsland, _fastNextSibling, _fastFirstChild);
+        }
     }
     while (node && !fastIsTextOrElement(node)) {
         node = fastNextSibling(node);
@@ -8400,8 +8558,9 @@ const fastFirstChild = (node) => {
 const fastNamespaceURI = createFastGetter('namespaceURI');
 const fastNodeName = createFastGetter('nodeName');
 const fastOwnerDocument = createFastGetter('ownerDocument');
-const materializeFromDOM = (vParent, firstChild, vData) => {
+const materializeFromDOM = (vParent, firstChild, vData, segmentId) => {
     let vFirstChild = null;
+    let idx = 0;
     const skipElements = () => {
         while (isElement(child) && shouldSkipElement(child)) {
             child = fastNextSibling(child);
@@ -8422,6 +8581,8 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
             vnode_ensureElementKeyInflated(vNextChild);
         }
         if (vNextChild) {
+            vNextChild.flags = (vNextChild.flags & 4095 /* VNodeFlagsIndex.mask */) | (idx << 12 /* VNodeFlagsIndex.shift */);
+            idx++;
             vNextChild.parent = vParent;
             vChild && (vChild.nextSibling = vNextChild);
             vNextChild.previousSibling = vChild;
@@ -8447,7 +8608,7 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
                     container = getDomContainer(vParent.node);
                 }
                 const id = consumeValue();
-                container.$setRawState$(parseInt(id), vParent);
+                container.$setRawState$(parseInt(id, 10), vParent);
                 isDev && vnode_setProp(vParent, ELEMENT_ID, id);
             }
             else if (peek() === VNodeDataChar.BACK_REFS) {
@@ -8608,6 +8769,9 @@ function vnode_toString(depth = 20, offset = '', materialize = false, siblings =
                         attrs.push(' ' + key + '=' + qwikDebugToString(value));
                     }
                 }
+                if (vnode.slotParent) {
+                    attrs.push(' slotParent=(C)');
+                }
             }
             const name = (colorize ? NAME_COL_PREFIX : '') +
                 (VirtualTypeName[vnode_getProp(vnode, DEBUG_TYPE, null) || "V" /* VirtualType.Virtual */] ||
@@ -8678,8 +8842,19 @@ function shouldSkipElement(element) {
         (element.nodeName === 'STYLE' &&
             (element.hasAttribute(QScopedStyle) || element.hasAttribute(QStyle))));
 }
+function hasOnlySuspensePlaceholder(element) {
+    const segmentId = element.getAttribute(QSuspenseResultParent);
+    if (segmentId === null) {
+        return false;
+    }
+    const firstChild = fastFirstChild(element);
+    return (isElement(firstChild) &&
+        firstChild.localName === 'template' &&
+        firstChild.getAttribute(QSuspenseResolved) === segmentId &&
+        fastNextSibling(firstChild) === null);
+}
 const stack = [];
-function materializeFromVNodeData(vParent, vData, element, child) {
+function materializeFromVNodeData(vParent, vData, element, child, segmentId) {
     let idx = 0;
     let vFirst = null;
     let vLast = null;
@@ -8748,7 +8923,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
                 container = getDomContainer(element);
             }
             const id = consumeValue();
-            container.$setRawState$(parseInt(id), vParent);
+            container.$setRawState$(parseInt(id, 10), vParent);
             isDev && vnode_setProp(vParent, ELEMENT_ID, id);
         }
         else if (peek() === VNodeDataChar.PROPS) {
@@ -8759,7 +8934,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             let value;
             if (isEscapedValue) {
                 consume();
-                value = decodeURI(decodeVNodeDataString(consumeValue()));
+                value = decodeURIComponent(decodeVNodeDataString(consumeValue()));
                 consume();
             }
             else {
@@ -8798,8 +8973,19 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         }
         else if (peek() === VNodeDataChar.SEPARATOR) {
             // Custom attribute: |key|value
-            const key = decodeVNodeDataString(consumeValue());
-            const value = decodeVNodeDataString(consumeValue());
+            const keyValue = consumeValue();
+            const key = decodeVNodeDataString(keyValue);
+            const valueSeparatorIdx = nextToConsumeIdx + keyValue.length + 1;
+            const isEscapedValue = getChar(valueSeparatorIdx + 1) === VNodeDataChar.SEPARATOR;
+            let value;
+            if (isEscapedValue) {
+                consume();
+                value = decodeURI(decodeVNodeDataString(consumeValue()));
+                consume();
+            }
+            else {
+                value = decodeVNodeDataString(consumeValue());
+            }
             vnode_setProp(vParent, key, value);
         }
         else if (peek() === VNodeDataChar.CLOSE) {
@@ -9127,6 +9313,15 @@ const addQrlToSerializationCtx = (effectSubscriber, container) => {
         }
     }
 };
+const getEffectSerializationContainer = (renderContainer, ownerContainer) => {
+    if (renderContainer &&
+        (!ownerContainer ||
+            renderContainer === ownerContainer ||
+            isOutOfOrderSegmentContainer(renderContainer))) {
+        return renderContainer;
+    }
+    return ownerContainer;
+};
 const scheduleEffects = (container, signal, effects) => {
     const isRunningOnBrowser = qTest ? !isServerPlatform() : isBrowser$1;
     if (effects) {
@@ -9171,7 +9366,7 @@ const scheduleEffects = (container, signal, effects) => {
                         }
                         data.set(property, payload);
                     }
-                    markVNodeDirty(container, consumer, 8 /* ChoreBits.NODE_PROPS */);
+                    markVNodeDirty(container, consumer, 16 /* ChoreBits.NODE_PROPS */);
                 }
             }
         };
@@ -9413,11 +9608,11 @@ class StoreHandler {
             }
             else {
                 isDev &&
-                    assertTrue(!ctx.$container$ || ctx.$container$ === this.$container$, 'Do not use signals across containers');
+                    assertTrue(!ctx.$container$ || isSameContainer(ctx.$container$, this.$container$), 'Do not use signals across containers');
             }
             const effectSubscriber = ctx.$effectSubscriber$;
             if (effectSubscriber) {
-                addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber);
+                addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber, ctx.$container$);
             }
         }
         if (prop === 'toString' && value === Object.prototype.toString) {
@@ -9471,7 +9666,7 @@ class StoreHandler {
             if (ctx) {
                 const effectSubscriber = ctx.$effectSubscriber$;
                 if (effectSubscriber) {
-                    addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber);
+                    addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber, ctx.$container$);
                 }
             }
         }
@@ -9481,7 +9676,7 @@ class StoreHandler {
         const ctx = tryGetInvokeContext();
         const effectSubscriber = ctx?.$effectSubscriber$;
         if (effectSubscriber) {
-            addStoreEffect(target, STORE_ALL_PROPS, this, effectSubscriber);
+            addStoreEffect(target, STORE_ALL_PROPS, this, effectSubscriber, ctx.$container$);
         }
         return Reflect.ownKeys(target);
     }
@@ -9499,7 +9694,7 @@ class StoreHandler {
         };
     }
 }
-function addStoreEffect(target, prop, store, effectSubscription) {
+function addStoreEffect(target, prop, store, effectSubscription, renderContainer) {
     const effectsMap = (store.$effects$ ||= new Map());
     let effects = effectsMap.get(prop);
     if (!effects) {
@@ -9509,14 +9704,21 @@ function addStoreEffect(target, prop, store, effectSubscription) {
     // Let's make sure that we have a reference to this effect.
     // Adding reference is essentially adding a subscription, so if the signal
     // changes we know who to notify.
+    const isOnServer = qTest ? isServerPlatform() : isServer;
+    const shouldRecordExternalRootEffect = __EXPERIMENTAL__.suspense && store instanceof StoreHandler && isOnServer;
     ensureContainsSubscription(effects, effectSubscription);
     // But when effect is scheduled in needs to be able to know which signals
     // to unsubscribe from. So we need to store the reference from the effect back
     // to this signal.
     ensureContainsBackRef(effectSubscription, target);
-    // TODO is this needed with the preloader?
-    (qTest ? !isDomContainer(store.$container$) : isServer) &&
-        addQrlToSerializationCtx(effectSubscription, store.$container$);
+    if (isOnServer) {
+        const serializationContainer = getEffectSerializationContainer(renderContainer, store.$container$);
+        if (shouldRecordExternalRootEffect) {
+            serializationContainer?.$recordExternalRootEffect$?.(target, effectSubscription, prop, effectsMap);
+        }
+        // TODO is this needed with the preloader?
+        addQrlToSerializationCtx(effectSubscription, serializationContainer);
+    }
 }
 function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
     target[prop] = value;
@@ -9637,6 +9839,7 @@ const _typeIdNames = [
     'PropsProxy',
     'SubscriptionData',
     'EffectSubscription',
+    'SubscriptionPatch',
 ];
 
 function qrlToString(serializationContext, qrl, raw) {
@@ -9697,6 +9900,23 @@ function qrlToString(serializationContext, qrl, raw) {
     }
     return qrlStringInline;
 }
+/** @internal */
+function qrlToChunks(serializationContext, qrl) {
+    const [chunk, symbol, captures] = qrlToString(serializationContext, qrl, true);
+    const prefix = `${chunk}#${symbol}`;
+    if (!captures) {
+        return prefix;
+    }
+    const chunks = [prefix, '#'];
+    const captureIds = captures.split(' ');
+    for (let i = 0; i < captureIds.length; i++) {
+        if (i > 0) {
+            chunks.push(' ');
+        }
+        chunks.push(Number(captureIds[i]));
+    }
+    return chunks;
+}
 function createQRLWithBackChannel(chunk, symbol, captures, container) {
     let qrlImporter = null;
     if (isDev && chunk === QRL_RUNTIME_CHUNK) {
@@ -9716,6 +9936,16 @@ function parseQRL(qrl, container) {
 }
 const QRL_RUNTIME_CHUNK = 'mock-chunk';
 
+/** @internal */
+class SubscriptionPatch {
+    rootId;
+    subscriptions;
+    constructor(rootId = 0, subscriptions = new Set()) {
+        this.rootId = rootId;
+        this.subscriptions = subscriptions;
+    }
+}
+
 /**
  * Format:
  *
@@ -9734,6 +9964,7 @@ class Serializer {
     $s11nWeakRefs$ = new Map();
     $parent$;
     $qrlMap$ = new Map();
+    $streamedRootLimit$ = 0;
     $writer$;
     /** We need to determine this at runtime because polyfills may not be loaded a module load time */
     $hasTemporal$ = typeof Temporal !== 'undefined';
@@ -9742,7 +9973,59 @@ class Serializer {
         this.$writer$ = $serializationContext$.$writer$;
     }
     async serialize() {
-        await this.outputRoots();
+        const previousStreamedRootLimit = this.$streamedRootLimit$;
+        this.$streamedRootLimit$ = 0;
+        try {
+            await this.outputRoots();
+        }
+        finally {
+            this.$streamedRootLimit$ = previousStreamedRootLimit;
+        }
+    }
+    async serializePatch(rootStart, rootIds, extraRootId, streamedRootLimit = rootStart) {
+        const previousStreamedRootLimit = this.$streamedRootLimit$;
+        this.$streamedRootLimit$ = streamedRootLimit;
+        this.$writer$.write(BRACKET_OPEN);
+        this.$serializationContext$.$serializedForwardRefCount$ = 0;
+        try {
+            this.$writer$.write(String(rootStart));
+            this.$writer$.write(COMMA);
+            this.$writer$.write(BRACKET_OPEN);
+            await this.outputSelectedRoots(rootIds);
+            this.$writer$.write(BRACKET_CLOSE);
+            const forwardRefs = this.getForwardRefsPayload();
+            this.$serializationContext$.$serializedForwardRefCount$ = forwardRefs?.length ?? 0;
+            if (forwardRefs || extraRootId !== undefined) {
+                this.$writer$.write(COMMA);
+                if (forwardRefs) {
+                    this.outputForwardRefsArray(forwardRefs);
+                }
+                else {
+                    this.$writer$.write('0');
+                }
+            }
+            if (extraRootId !== undefined) {
+                this.$writer$.write(COMMA);
+                if (typeof extraRootId === 'number') {
+                    this.writeRootRef(extraRootId);
+                }
+                else if (typeof extraRootId === 'string') {
+                    this.outputString(extraRootId);
+                }
+                else {
+                    this.$writer$.write(QUOTE);
+                    this.writeRootRefPath(extraRootId);
+                    this.$writer$.write(QUOTE);
+                }
+            }
+        }
+        finally {
+            this.$streamedRootLimit$ = previousStreamedRootLimit;
+        }
+        this.$writer$.write(BRACKET_CLOSE);
+    }
+    $setWriter$(writer) {
+        this.$writer$ = writer;
     }
     /** Helper to output an array */
     outputArray(value, keepUndefined, writeFn) {
@@ -9803,22 +10086,65 @@ class Serializer {
         }
         return Number(key);
     }
+    outputString(value) {
+        const s = this.stringNeedsJsonEscape$(value) ? JSON.stringify(value) : QUOTE + value + QUOTE;
+        let angleBracketIdx = -1;
+        let lastIdx = 0;
+        while ((angleBracketIdx = s.indexOf(CLOSE_TAG, lastIdx)) !== -1) {
+            this.$writer$.write(s.slice(lastIdx, angleBracketIdx));
+            this.$writer$.write(ESCAPED_CLOSE_TAG);
+            lastIdx = angleBracketIdx + 2;
+        }
+        this.$writer$.write(lastIdx === 0 ? s : s.slice(lastIdx));
+    }
+    writeRootRef(id) {
+        this.$writer$.writeRootRef(id);
+    }
+    writeRootRefPath(path) {
+        this.$writer$.writeRootRefPath(path);
+    }
+    outputStringChunks(chunks) {
+        this.$writer$.write(QUOTE);
+        for (let i = 0; i < chunks.length; i++) {
+            const chunk = chunks[i];
+            if (typeof chunk === 'string') {
+                this.$writer$.write(chunk);
+            }
+            else if (typeof chunk === 'number') {
+                this.writeRootRef(chunk);
+            }
+            else {
+                this.writeRootRefPath(chunk.path);
+            }
+        }
+        this.$writer$.write(QUOTE);
+    }
     /** Output a type,value pair. If the value is an array, it calls writeValue on each item. */
     output(type, value, keepUndefined) {
-        if (typeof value === 'number') {
+        if (type === 1 /* TypeIds.RootRef */) {
+            this.$writer$.write(type + COMMA);
+            if (typeof value === 'number') {
+                this.writeRootRef(value);
+            }
+            else if (typeof value === 'string') {
+                this.outputString(value);
+            }
+            else {
+                this.$writer$.write(QUOTE);
+                this.writeRootRefPath(value);
+                this.$writer$.write(QUOTE);
+            }
+        }
+        else if (type === 9 /* TypeIds.QRL */ && Array.isArray(value)) {
+            this.$writer$.write(type + COMMA);
+            this.outputStringChunks(value);
+        }
+        else if (typeof value === 'number') {
             this.$writer$.write(type + COMMA + value);
         }
         else if (typeof value === 'string') {
-            const s = this.stringNeedsJsonEscape$(value) ? JSON.stringify(value) : QUOTE + value + QUOTE;
             this.$writer$.write(type + COMMA);
-            let angleBracketIdx = -1;
-            let lastIdx = 0;
-            while ((angleBracketIdx = s.indexOf(CLOSE_TAG, lastIdx)) !== -1) {
-                this.$writer$.write(s.slice(lastIdx, angleBracketIdx));
-                this.$writer$.write(ESCAPED_CLOSE_TAG);
-                lastIdx = angleBracketIdx + 2;
-            }
-            this.$writer$.write(lastIdx === 0 ? s : s.slice(lastIdx));
+            this.outputString(value);
         }
         else {
             this.$writer$.write(type + COMMA);
@@ -9844,16 +10170,19 @@ class Serializer {
                 return this.$serializationContext$.$markSeen$(value, this.$parent$, index);
             }
         }
+        else if (seen.$parent$ && this.isSeenInStreamedRoot(seen)) {
+            seen = this.$serializationContext$.$addDuplicateRoot$(value);
+        }
         // Now that we saw it a second time, make sure it's a root
         if (seen.$parent$) {
             // Note, this means it was output before so we always need a backref
             // Special case: we're a root so instead of adding a backref, we replace ourself
             if (!this.$parent$) {
-                this.$serializationContext$.$promoteToRoot$(seen, index);
+                this.$serializationContext$.$promoteToRoot$(seen, value, index);
                 value = this.$serializationContext$.$roots$[index];
             }
             else {
-                this.$serializationContext$.$promoteToRoot$(seen);
+                this.$serializationContext$.$promoteToRoot$(seen, value);
             }
         }
         // Check if there was a weakref to us
@@ -9869,6 +10198,12 @@ class Serializer {
         }
         this.output(1 /* TypeIds.RootRef */, rootIdx);
     }
+    isSeenInStreamedRoot(ref) {
+        while (ref.$parent$) {
+            ref = ref.$parent$;
+        }
+        return ref.$index$ < this.$streamedRootLimit$;
+    }
     // First check for scalars, then do objects with seen checks
     // Make sure to only get the SeenRef once, it's expensive
     writeValue(value, index) {
@@ -9947,9 +10282,24 @@ class Serializer {
                             let data;
                             if (chunk !== '') {
                                 // not a sync QRL, replace all parts with string references
-                                data = `${this.$serializationContext$.$addRoot$(chunk)}#${this.$serializationContext$.$addRoot$(symbol)}${captures ? '#' + captures : ''}`;
+                                data = [
+                                    this.$serializationContext$.$addRoot$(chunk),
+                                    '#',
+                                    this.$serializationContext$.$addRoot$(symbol),
+                                ];
+                                if (captures) {
+                                    const captureIds = captures.split(' ');
+                                    data.push('#');
+                                    for (let i = 0; i < captureIds.length; i++) {
+                                        if (i > 0) {
+                                            data.push(' ');
+                                        }
+                                        data.push(Number(captureIds[i]));
+                                    }
+                                }
                                 // Since we map QRLs to strings, we need to keep track of this secondary mapping
-                                const existing = this.$qrlMap$.get(data);
+                                const qrlKey = data.join('');
+                                const existing = this.$qrlMap$.get(qrlKey);
                                 if (existing) {
                                     // We encountered the same QRL again, make it a root
                                     const ref = this.$serializationContext$.$addRoot$(existing);
@@ -9957,7 +10307,7 @@ class Serializer {
                                     return;
                                 }
                                 else {
-                                    this.$qrlMap$.set(data, value);
+                                    this.$qrlMap$.set(qrlKey, value);
                                 }
                             }
                             else {
@@ -10026,6 +10376,9 @@ class Serializer {
             // TODO no data if [null, true]
             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]);
+        }
         else if (isStore(value)) {
             const storeHandler = getStoreHandler(value);
             const storeTarget = getStoreTarget(value);
@@ -10079,7 +10432,7 @@ class Serializer {
             }
         }
         else if (this.$serializationContext$.$isDomRef$(value)) {
-            value.$ssrNode$.vnodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
+            this.$serializationContext$.$markSsrNodeForSerialization$(value.$ssrNode$, 16 /* VNodeDataFlag.SERIALIZE */);
             this.output(11 /* TypeIds.RefVNode */, value.$ssrNode$.id);
         }
         else if (value instanceof SignalImpl) {
@@ -10204,23 +10557,22 @@ class Serializer {
         }
         else if (this.$serializationContext$.$isSsrNode$(value)) {
             const rootIndex = this.$serializationContext$.$addRoot$(value);
-            this.$serializationContext$.$setProp$(value, ELEMENT_ID, String(rootIndex));
+            this.$serializationContext$.$setProp$(value, ELEMENT_ID, rootIndex);
             // we need to output before the vnode overwrites its values
             this.output(10 /* TypeIds.VNode */, value.id);
             const vNodeData = value.vnodeData;
             if (vNodeData) {
-                discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => this.$serializationContext$.$addRoot$(vNodeDataValue));
-                vNodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
+                discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => {
+                    this.$serializationContext$.$addRoot$(vNodeDataValue);
+                });
+                this.$serializationContext$.$markSsrNodeForSerialization$(value, 16 /* VNodeDataFlag.SERIALIZE */);
             }
             if (value.children) {
                 // Mark child vnode data for serialization (structure only, no value discovery needed)
                 const childrenLength = value.children.length;
                 for (let i = 0; i < childrenLength; i++) {
                     const child = value.children[i];
-                    const childVNodeData = child.vnodeData;
-                    if (childVNodeData) {
-                        childVNodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
-                    }
+                    this.$serializationContext$.$markSsrNodeForSerialization$(child, 16 /* VNodeDataFlag.SERIALIZE */);
                 }
             }
         }
@@ -10313,7 +10665,7 @@ class Serializer {
                     this.$s11nWeakRefs$.set(obj, forwardRefId);
                     this.$forwardRefs$[forwardRefId] = -1;
                 }
-                this.output(2 /* TypeIds.ForwardRef */, forwardRefId);
+                this.output(2 /* TypeIds.ForwardRef */, this.getForwardRefId(forwardRefId));
             }
         }
         else if (vnode_isVNode(value)) {
@@ -10335,16 +10687,16 @@ class Serializer {
             this.$forwardRefs$[forwardRefId] = this.$serializationContext$.$addRoot$(classCreator(false, err));
         });
         this.$promises$.add(promise);
-        return forwardRefId;
+        return this.getForwardRefId(forwardRefId);
     }
-    async outputRoots() {
-        this.$writer$.write(BRACKET_OPEN);
+    getForwardRefId(localId) {
+        return this.$serializationContext$.$forwardRefOffset$ + localId;
+    }
+    async outputPendingRoots() {
+        let rootsWritten = 0;
         const { $roots$ } = this.$serializationContext$;
         while (this.$rootIdx$ < $roots$.length || this.$promises$.size) {
-            if (this.$rootIdx$ !== 0) {
-                this.$writer$.write(COMMA);
-            }
-            let separator = false;
+            let separator = rootsWritten > 0;
             for (; this.$rootIdx$ < $roots$.length; this.$rootIdx$++) {
                 if (separator) {
                     this.$writer$.write(COMMA);
@@ -10353,6 +10705,7 @@ class Serializer {
                     separator = true;
                 }
                 this.writeValue($roots$[this.$rootIdx$], this.$rootIdx$);
+                rootsWritten++;
             }
             if (this.$promises$.size) {
                 try {
@@ -10363,24 +10716,77 @@ class Serializer {
                 }
             }
         }
-        if (this.$forwardRefs$.length) {
-            let lastIdx = this.$forwardRefs$.length - 1;
-            while (lastIdx >= 0 && this.$forwardRefs$[lastIdx] === -1) {
-                lastIdx--;
+        return rootsWritten;
+    }
+    async outputSelectedRoots(rootIds) {
+        let separator = false;
+        let i = 0;
+        while (i < rootIds.length || this.$promises$.size) {
+            if (i < rootIds.length) {
+                if (separator) {
+                    this.$writer$.write(COMMA);
+                }
+                else {
+                    separator = true;
+                }
+                const rootId = rootIds[i++];
+                this.writeValue(this.$serializationContext$.$roots$[rootId], rootId);
+                continue;
+            }
+            try {
+                await Promise.race(this.$promises$);
+            }
+            catch {
+                // ignore rejections, they will be serialized as rejected promises
+            }
+        }
+    }
+    getForwardRefsPayload() {
+        let lastIdx = this.$forwardRefs$.length - 1;
+        while (lastIdx >= 0 && this.$forwardRefs$[lastIdx] === -1) {
+            lastIdx--;
+        }
+        if (lastIdx < 0) {
+            return null;
+        }
+        return lastIdx === this.$forwardRefs$.length - 1
+            ? this.$forwardRefs$
+            : this.$forwardRefs$.slice(0, lastIdx + 1);
+    }
+    outputForwardRefsArray(forwardRefs) {
+        this.outputArray(forwardRefs, true, (value) => {
+            if (typeof value === 'string') {
+                this.outputString(value);
+            }
+            else if (Array.isArray(value)) {
+                this.$writer$.write(QUOTE);
+                this.writeRootRefPath(value);
+                this.$writer$.write(QUOTE);
             }
-            if (lastIdx >= 0) {
+            else {
+                this.writeRootRef(value);
+            }
+        });
+    }
+    async outputRoots() {
+        this.$writer$.write(BRACKET_OPEN);
+        const rootsWritten = await this.outputPendingRoots();
+        const forwardRefs = this.getForwardRefsPayload();
+        this.$serializationContext$.$rootStateRootCount$ = this.$serializationContext$.$roots$.length;
+        this.$serializationContext$.$hasRootStateForwardRefs$ = !!forwardRefs;
+        const forwardRefCount = forwardRefs?.length ?? 0;
+        if (forwardRefs) {
+            if (rootsWritten > 0) {
                 this.$writer$.write(COMMA);
-                this.$writer$.write(14 /* TypeIds.ForwardRefs */ + COMMA);
-                const out = lastIdx === this.$forwardRefs$.length - 1
-                    ? this.$forwardRefs$
-                    : this.$forwardRefs$.slice(0, lastIdx + 1);
-                // We could also implement RLE of -1 values
-                this.outputArray(out, true, (value) => {
-                    this.$writer$.write(String(value));
-                });
             }
+            this.$writer$.write(14 /* TypeIds.ForwardRefs */ + COMMA);
+            this.outputForwardRefsArray(forwardRefs);
         }
         this.$writer$.write(BRACKET_CLOSE);
+        this.$serializationContext$.$serializedRootCount$ =
+            this.$serializationContext$.$roots$.length +
+                (this.$serializationContext$.$hasRootStateForwardRefs$ ? 1 : 0);
+        this.$serializationContext$.$serializedForwardRefCount$ = forwardRefCount;
     }
 }
 class PromiseResult {
@@ -10427,6 +10833,7 @@ const discoverValuesForVNodeData = (vnodeData, callback) => {
                 const attrValue = value[key];
                 if (attrValue == null ||
                     typeof attrValue === 'string' ||
+                    (typeof attrValue === 'number' && key === ELEMENT_ID) ||
                     (key === ELEMENT_PROPS && isObjectEmpty(attrValue))) {
                     continue;
                 }
@@ -10492,13 +10899,24 @@ class SerializationContextImpl {
     $writer$;
     $seenObjsMap$ = new Map();
     $syncFnMap$ = new Map();
+    $syncFnOffset$ = 0;
     $syncFns$ = [];
     $roots$ = [];
+    $rootObjs$ = [];
+    $onAddRoot$;
+    $forwardRefOffset$ = 0;
+    $serializedRootCount$ = 0;
+    $serializedForwardRefCount$ = 0;
+    $rootStateRootCount$ = 0;
+    $hasRootStateForwardRefs$ = false;
     $eagerResume$ = new Set();
     $eventQrls$ = new Set();
     $eventNames$ = new Set();
     $renderSymbols$ = new Set();
     $serializer$;
+    $markSsrNodeForSerialization$ = (node, flags) => {
+        node.vnodeData[0] |= flags;
+    };
     constructor(
     /**
      * Node constructor, for instanceof checks.
@@ -10518,7 +10936,14 @@ class SerializationContextImpl {
         this.$serializer$ = new Serializer(this);
     }
     async $serialize$() {
-        return await this.$serializer$.serialize();
+        await this.$serializer$.serialize();
+    }
+    async $serializePatch$(rootStart, rootIds, extraRootId, streamedRootLimit) {
+        await this.$serializer$.serializePatch(rootStart, rootIds, extraRootId, streamedRootLimit);
+    }
+    $setWriter$(writer) {
+        this.$writer$ = writer;
+        this.$serializer$.$setWriter$(writer);
     }
     getSeenRef(obj) {
         return this.$seenObjsMap$.get(obj);
@@ -10529,8 +10954,8 @@ class SerializationContextImpl {
         return ref;
     }
     /**
-     * Returns a path string representing the path from roots through all parents to the object.
-     * Format: "3 2 0" where each number is the index within its parent, from root to leaf.
+     * Returns a path representing the path from roots through all parents to the object. Format: [3,
+     * 2, 0] where each number is the index within its parent, from root to leaf.
      */
     $getObjectPath$(ref) {
         // Traverse up through parent references to build a path
@@ -10541,16 +10966,23 @@ class SerializationContextImpl {
         }
         // Now we are at root, but it could be a backref
         path.unshift(ref.$index$);
-        return path.join(' ');
+        return path;
     }
-    $promoteToRoot$(ref, index) {
+    $promoteToRoot$(ref, obj, index) {
         const path = this.$getObjectPath$(ref);
+        const isNewRoot = index === undefined;
         if (index === undefined) {
             index = this.$roots$.length;
         }
         this.$roots$[index] = new SerializationBackRef(path);
+        if (isNewRoot) {
+            this.$rootObjs$[index] = obj;
+        }
         ref.$parent$ = null;
         ref.$index$ = index;
+        if (isNewRoot) {
+            this.$onAddRoot$?.(index, this.$roots$[index], obj);
+        }
     }
     $addRoot$(obj, returnRef = false) {
         let seen = this.$seenObjsMap$.get(obj);
@@ -10564,15 +10996,34 @@ class SerializationContextImpl {
             };
             this.$seenObjsMap$.set(obj, seen);
             this.$roots$.push(obj);
+            this.$rootObjs$.push(obj);
+            this.$onAddRoot$?.(index, obj, obj);
         }
         else {
             if (seen.$parent$) {
-                this.$promoteToRoot$(seen);
+                this.$promoteToRoot$(seen, obj);
             }
             index = seen.$index$;
         }
         return returnRef ? seen : index;
     }
+    $addDuplicateRoot$(obj) {
+        const index = this.$roots$.length;
+        const ref = { $index$: index };
+        this.$seenObjsMap$.set(obj, ref);
+        this.$roots$.push(obj);
+        this.$rootObjs$.push(obj);
+        this.$onAddRoot$?.(index, obj, obj);
+        return ref;
+    }
+    $commitRoot$(root, obj) {
+        const index = this.$roots$.length;
+        const ref = { $index$: index };
+        this.$seenObjsMap$.set(obj, ref);
+        this.$roots$.push(root);
+        this.$rootObjs$.push(obj);
+        return index;
+    }
     $isSsrNode$(obj) {
         return this.NodeConstructor ? obj instanceof this.NodeConstructor : false;
     }
@@ -10590,7 +11041,7 @@ class SerializationContextImpl {
         }
         let id = this.$syncFnMap$.get(funcStr);
         if (id === undefined) {
-            id = this.$syncFns$.length;
+            id = this.$syncFnOffset$ + this.$syncFns$.length;
             this.$syncFnMap$.set(funcStr, id);
             if (isFullFn) {
                 this.$syncFns$.push(funcStr);
@@ -10605,6 +11056,15 @@ class SerializationContextImpl {
         }
         return id;
     }
+    $setSyncFnOffset$(offset, existingFns) {
+        this.$syncFnOffset$ = offset;
+        if (existingFns) {
+            this.$syncFnMap$.clear();
+            for (let i = 0; i < existingFns.length; i++) {
+                this.$syncFnMap$.set(existingFns[i], i);
+            }
+        }
+    }
 }
 const createSerializationContext = (
 /**
@@ -10618,12 +11078,11 @@ NodeConstructor,
 DomRefConstructor, symbolToChunkResolver, setProp, storeProxyMap, writer) => {
     if (!writer) {
         const buffer = [];
-        writer = {
-            write: (text) => {
-                buffer.push(text);
-            },
+        writer = Object.assign(createStringStreamWriter((text) => {
+            buffer.push(text);
+        }), {
             toString: () => buffer.join(''),
-        };
+        });
     }
     isDomRef = (DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : (() => false));
     return new SerializationContextImpl(NodeConstructor, DomRefConstructor, symbolToChunkResolver, setProp, storeProxyMap, writer);
@@ -10881,15 +11340,16 @@ const constantToName = (code) => {
  * @returns The preprocessed state data
  * @internal
  */
-function preprocessState(data, container) {
+function preprocessState(data, container, segmentId, startIndex = 0) {
     const isRootDeepRef = (type, value) => {
-        return type === 1 /* TypeIds.RootRef */ && typeof value === 'string';
+        return type === 1 /* TypeIds.RootRef */ && typeof value === 'string' && value.indexOf(' ') !== -1;
     };
     const isForwardRefsMap = (type) => {
         return type === 14 /* TypeIds.ForwardRefs */;
     };
     const processRootRef = (index) => {
         const rootRefPath = data[index + 1].split(' ');
+        const firstRefIndex = parseInt(rootRefPath[0], 10);
         let object = data;
         let objectType = 1 /* TypeIds.RootRef */;
         let typeIndex = 0;
@@ -10897,12 +11357,13 @@ function preprocessState(data, container) {
         let parent = null;
         for (let i = 0; i < rootRefPath.length; i++) {
             parent = object;
-            typeIndex = parseInt(rootRefPath[i], 10) * 2;
+            typeIndex = (i === 0 ? firstRefIndex : parseInt(rootRefPath[i], 10)) * 2;
             valueIndex = typeIndex + 1;
-            objectType = object[typeIndex];
-            object = object[valueIndex];
+            const objectArray = object;
+            objectType = objectArray[typeIndex];
+            object = objectArray[valueIndex];
             if (objectType === 1 /* TypeIds.RootRef */) {
-                const rootRef = object;
+                const rootRef = typeof object === 'string' ? parseInt(object, 10) : object;
                 const rootRefTypeIndex = rootRef * 2;
                 objectType = data[rootRefTypeIndex];
                 object = data[rootRefTypeIndex + 1];
@@ -10915,7 +11376,7 @@ function preprocessState(data, container) {
         data[index] = objectType;
         data[index + 1] = object;
     };
-    for (let i = 0; i < data.length; i += 2) {
+    for (let i = startIndex; i < data.length; i += 2) {
         if (isRootDeepRef(data[i], data[i + 1])) {
             processRootRef(i);
         }
@@ -10934,10 +11395,7 @@ const allocate = (container, typeId, value) => {
         case 1 /* TypeIds.RootRef */:
             return container.$getObjectById$(value);
         case 2 /* TypeIds.ForwardRef */:
-            if (!container.$forwardRefs$) {
-                return _UNINITIALIZED;
-            }
-            const rootRef = container.$forwardRefs$[value];
+            const rootRef = container.$getForwardRef$(value);
             if (rootRef === -1 || rootRef === undefined) {
                 return _UNINITIALIZED;
             }
@@ -11093,6 +11551,8 @@ const allocate = (container, typeId, value) => {
             return new SubscriptionData({});
         case 40 /* TypeIds.EffectSubscription */:
             return new EffectSubscription(null, null, null, null);
+        case 41 /* TypeIds.SubscriptionPatch */:
+            return new SubscriptionPatch();
         default:
             throw qError(18 /* QError.serializeErrorCannotAllocate */, [typeId]);
     }
@@ -11219,6 +11679,8 @@ const _fnSignal = (fn, args, fnStr) => {
 class _SharedContainer {
     $version$;
     $storeProxyMap$;
+    $rootContainer$ = null;
+    $isOutOfOrderSegment$ = false;
     /// Current language locale
     $locale$;
     /// Retrieve Object from paused serialized state.
@@ -11257,6 +11719,24 @@ function isAsyncGenerator(value) {
     return !!value[Symbol.asyncIterator];
 }
 
+const InternalServerComponentSymbol = Symbol('qInternalServerComponent');
+/** @internal */
+const createInternalServerComponent = (handler) => {
+    const component = (() => {
+        throw new Error('Internal server component must be handled by the SSR renderer.');
+    });
+    component[InternalServerComponentSymbol] = handler;
+    return component;
+};
+/** @internal */
+const isInternalServerComponent = (type) => {
+    return typeof type === 'function' && InternalServerComponentSymbol in type;
+};
+/** @internal */
+const getInternalServerComponentHandler = (type) => {
+    return type[InternalServerComponentSymbol];
+};
+
 const applyInlineComponent = (ssr, componentHost, inlineComponentFunction, jsx) => {
     const host = ssr.getOrCreateLastNode();
     return executeComponent(ssr, host, componentHost, inlineComponentFunction, jsx.props);
@@ -11303,7 +11783,10 @@ async function _walkJSX(ssr, value, options) {
                         stack.push(await stack.pop());
                     }
                     else {
-                        await value.apply(ssr);
+                        const result = value.apply(ssr);
+                        if (isPromise(result)) {
+                            await result;
+                        }
                     }
                     continue;
                 }
@@ -11392,16 +11875,23 @@ function processJSXNode(ssr, enqueue, value, options) {
                 else if (type === 'body') {
                     enqueue(ssr.additionalBodyNodes);
                 }
-                else if (!ssr.isHtml && !ssr._didAddQwikLoader && !ssr.$noScriptHere$) {
-                    ssr.emitQwikLoaderAtTopIfNeeded();
-                    ssr.emitPreloaderPre();
-                    ssr._didAddQwikLoader = true;
+                else {
+                    const innerSSR = ssr;
+                    if (!ssr.isHtml && !innerSSR._didAddQwikLoader && !ssr.$noScriptHere$) {
+                        ssr.emitQwikLoaderAtTopIfNeeded();
+                        ssr.emitPreloaderPre();
+                        innerSSR._didAddQwikLoader = true;
+                    }
                 }
                 const children = jsx.children;
                 children != null && enqueue(children);
             }
             else if (isFunction(type)) {
-                if (type === Fragment) {
+                if (__EXPERIMENTAL__.suspense && isInternalServerComponent(type)) {
+                    enqueue(() => getInternalServerComponentHandler(type)(ssr, jsx, options, enqueue));
+                    return;
+                }
+                else if (type === Fragment) {
                     const attrs = jsx.key != null ? { [ELEMENT_KEY]: jsx.key } : {};
                     if (isDev) {
                         attrs[DEBUG_TYPE] = "F" /* VirtualType.Fragment */; // Add debug info.
@@ -11425,7 +11915,7 @@ function processJSXNode(ssr, enqueue, value, options) {
                         ssr.openProjection(projectionAttrs);
                         const host = componentFrame.componentNode;
                         const node = ssr.getOrCreateLastNode();
-                        const slotName = getSlotName(host, jsx, ssr);
+                        const slotName = resolveSlotName(host, jsx, ssr);
                         projectionAttrs[QSlot] = slotName;
                         enqueue(setParentOptions(options, options.currentStyleScoped, options.parentComponentFrame));
                         enqueue(ssr.closeProjection);
@@ -11491,7 +11981,7 @@ function processJSXNode(ssr, enqueue, value, options) {
                     componentFrame.distributeChildrenIntoSlots(jsx.children, options.currentStyleScoped, options.parentComponentFrame);
                     const jsxOutput = applyQwikComponentBody(ssr, jsx, type);
                     enqueue(setParentOptions(options, options.currentStyleScoped, options.parentComponentFrame));
-                    enqueue(ssr.closeComponent);
+                    enqueue(() => ssr.closeComponent());
                     if (isPromise(jsxOutput)) {
                         // Defer reading QScopedStyle until after the promise resolves
                         enqueue(async () => {
@@ -11537,16 +12027,6 @@ function maybeAddPollingAsyncSignalToEagerResume(serializationCtx, signal) {
         }
     }
 }
-function getSlotName(host, jsx, ssr) {
-    const constProps = jsx.constProps;
-    if (constProps && typeof constProps == 'object' && 'name' in constProps) {
-        const constValue = constProps.name;
-        if (constValue instanceof WrappedSignalImpl) {
-            return trackSignalAndAssignHost(constValue, host, ":" /* EffectProperty.COMPONENT */, ssr);
-        }
-    }
-    return directGetPropsProxyProp(jsx, 'name') || QDefaultSlot;
-}
 function appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue) {
     if (qwikInspectorAttrValue && (!jsx.constProps || !(qwikInspectorAttr in jsx.constProps))) {
         (jsx.constProps ||= {})[qwikInspectorAttr] = qwikInspectorAttrValue;
@@ -11698,7 +12178,19 @@ function setEvent(serializationCtx, key, rawValue, hasMovedCaptures) {
     let value = null;
     const qrls = rawValue;
     const appendToValue = (valueToAppend) => {
-        value = (value == null ? '' : value + '|') + valueToAppend;
+        if (value == null) {
+            value = valueToAppend;
+        }
+        else if (typeof value === 'string' && typeof valueToAppend === 'string') {
+            value += '|' + valueToAppend;
+        }
+        else {
+            value = [
+                ...(typeof value === 'string' ? [value] : value),
+                '|',
+                ...(typeof valueToAppend === 'string' ? [valueToAppend] : valueToAppend),
+            ];
+        }
     };
     const getQrlString = (qrl) => {
         /**
@@ -11710,7 +12202,7 @@ function setEvent(serializationCtx, key, rawValue, hasMovedCaptures) {
         if (!qrl.$symbol$.startsWith('_') && (qrl.$captures$?.length || hasMovedCaptures)) {
             qrl = createQRL(null, '_run', _run, null, [qrl]);
         }
-        return qrlToString(serializationCtx, qrl);
+        return qrlToChunks(serializationCtx, qrl);
     };
     if (Array.isArray(qrls)) {
         for (let i = 0; i < qrls.length; i++) {
@@ -12284,6 +12776,13 @@ const inflate = (container, target, typeId, data) => {
             restoreEffectBackRefForConsumer(effectSub);
             break;
         }
+        case 41 /* TypeIds.SubscriptionPatch */: {
+            const patch = target;
+            const d = data;
+            patch.rootId = d[0];
+            patch.subscriptions = d[1];
+            break;
+        }
         default:
             throw qError(16 /* QError.serializeErrorNotImplemented */, [typeId]);
     }
@@ -12391,11 +12890,9 @@ const wrapDeserializerProxy = (container, data) => {
 class DeserializationHandler {
     $container$;
     $data$;
-    $length$;
     constructor($container$, $data$) {
         this.$container$ = $container$;
         this.$data$ = $data$;
-        this.$length$ = this.$data$.length / 2;
     }
     get(target, property, receiver) {
         if (property === SERIALIZER_PROXY_UNWRAP) {
@@ -12407,7 +12904,7 @@ class DeserializationHandler {
             : typeof property === 'string'
                 ? parseInt(property, 10)
                 : NaN;
-        if (Number.isNaN(i) || i < 0 || i >= this.$length$) {
+        if (Number.isNaN(i) || i < 0 || i >= this.$data$.length / 2) {
             return Reflect.get(target, property, receiver);
         }
         // The serialized data is an array with 2 values for each item
@@ -12494,6 +12991,7 @@ function _createDeserializeContainer(stateData) {
     let state;
     const container = {
         $getObjectById$: (id) => getObjectById(id, state),
+        $getForwardRef$: (id) => container.$forwardRefs$?.[Number(id)],
         getSyncFn: (_) => {
             const fn = () => { };
             return fn;
@@ -12886,59 +13384,265 @@ const isRecoverable = (err) => {
     return true;
 };
 
+/** @internal */
+const canRevealRegistration = (registration, isPending = (item) => item.boundary.pending.untrackedValue > 0) => {
+    if (registration === null) {
+        return true;
+    }
+    const reveal = registration.reveal;
+    const current = registration.item;
+    const items = reveal.items;
+    switch (reveal.order) {
+        case 'together':
+            for (let i = 0; i < items.length; i++) {
+                if (isPending(items[i])) {
+                    return false;
+                }
+            }
+            return true;
+        case 'sequential':
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                if (item === current) {
+                    return true;
+                }
+                if (isPending(item)) {
+                    return false;
+                }
+            }
+            return true;
+        case 'reverse':
+            for (let i = items.length - 1; i >= 0; i--) {
+                const item = items[i];
+                if (item === current) {
+                    return true;
+                }
+                if (isPending(item)) {
+                    return false;
+                }
+            }
+            return true;
+        default:
+            return true;
+    }
+};
+
+/** @internal */
+const SUSPENSE_QRL_SYMBOL = '_suC';
+const outOfOrderRevealIds = new WeakMap();
+/** @internal */
+class OutOfOrderRevealCoordinator {
+    id;
+    collapsed;
+    count = 0;
+    pendingItems = new Set();
+    orderCode;
+    constructor(id, order, collapsed) {
+        this.id = id;
+        this.collapsed = collapsed;
+        this.orderCode = getOutOfOrderRevealOrderCode(order);
+    }
+    register(registration) {
+        this.pendingItems.add(registration.item);
+        const index = this.count++;
+        return {
+            attrs: ` q:g="${this.id}" q:i="${index}" q:o="${this.orderCode}"` + (this.collapsed ? ' q:c' : ''),
+            showFallback: this.canReveal(registration) || !this.collapsed,
+            resolve: () => {
+                this.pendingItems.delete(registration.item);
+            },
+        };
+    }
+    canReveal(registration) {
+        return canRevealRegistration(registration, (item) => this.pendingItems.has(item));
+    }
+    script() {
+        return this.count === 0 ? '' : `qO.g(${this.id},${this.count},"${this.orderCode}");`;
+    }
+}
+/** @internal */
+const createOutOfOrderRevealCoordinator = (order, collapsed) => {
+    if (!isOutOfOrderStreaming()) {
+        return null;
+    }
+    const container = tryGetInvokeContext()?.$container$;
+    let id = 0;
+    if (container) {
+        id = (outOfOrderRevealIds.get(container) || 0) + 1;
+        outOfOrderRevealIds.set(container, id);
+    }
+    return new OutOfOrderRevealCoordinator(id, order, collapsed);
+};
+const getOutOfOrderRevealOrderCode = (order) => {
+    switch (order) {
+        case 'sequential':
+            return 's';
+        case 'reverse':
+            return 'r';
+        case 'together':
+            return 't';
+        default:
+            return 'p';
+    }
+};
+/** @internal */
+const isOutOfOrderStreaming = () => {
+    if (!__EXPERIMENTAL__.suspense) {
+        return false;
+    }
+    const container = tryGetInvokeContext()?.$container$;
+    return container?.outOfOrderStreaming === true && !isOutOfOrderSegmentContainer(container);
+};
+/** @internal */
+const nextOutOfOrderSuspenseId = () => {
+    if (!__EXPERIMENTAL__.suspense) {
+        return 0;
+    }
+    const container = tryGetInvokeContext()?.$container$;
+    if (container?.outOfOrderStreaming !== true) {
+        return 0;
+    }
+    return container?.nextOutOfOrderId?.() ?? 0;
+};
+/** @internal */
+const applySubscriptionPatches = (container, patches) => {
+    if (!__EXPERIMENTAL__.suspense || !patches) {
+        return;
+    }
+    for (let i = 0; i < patches.length; i++) {
+        const patch = patches[i];
+        const root = container.$getObjectById$(patch.rootId);
+        const subscriptions = patch.subscriptions;
+        if (root instanceof SignalImpl) {
+            if (subscriptions instanceof Set) {
+                mergeSubscriptionSet(container, root, root, (root.$effects$ ||= new Set()), subscriptions);
+            }
+        }
+        else {
+            if (!(subscriptions instanceof Map)) {
+                continue;
+            }
+            const handler = getStoreHandler(root);
+            const target = getStoreTarget(root);
+            if (!handler || !target) {
+                continue;
+            }
+            const effectsMap = (handler.$effects$ ||= new Map());
+            for (const [storeProp, subscriptionSet] of subscriptions) {
+                let rootEffects = effectsMap.get(storeProp);
+                if (!rootEffects) {
+                    rootEffects = new Set();
+                    effectsMap.set(storeProp, rootEffects);
+                }
+                mergeSubscriptionSet(container, handler, target, rootEffects, subscriptionSet);
+            }
+        }
+    }
+};
+const mergeSubscriptionSet = (container, producer, backRef, rootEffects, patchEffects) => {
+    let newEffects;
+    for (const effect of patchEffects) {
+        if (!rootEffects.has(effect)) {
+            rootEffects.add(effect);
+            (newEffects ||= new Set()).add(effect);
+        }
+        (effect.backRef ||= new Set()).add(backRef);
+    }
+    if (newEffects) {
+        scheduleEffects(container, producer, newEffects);
+    }
+};
+
+const processedStatePatchScripts = new WeakMap();
+/** @internal */
+const processSegmentStateScripts = (container, segmentId) => {
+    if (!__EXPERIMENTAL__.suspense) {
+        return;
+    }
+    const stateContainer = container;
+    const qwikStates = stateContainer.element.querySelectorAll(`${stateScriptSelector(stateContainer.$instanceHash$)}${QStatePatchAttrSelector}`);
+    const processedScripts = getProcessedStatePatchScripts(container);
+    for (let i = 0; i < qwikStates.length; i++) {
+        const stateScript = qwikStates[i];
+        if (segmentId !== undefined && stateScript.getAttribute(QSuspenseResolved) !== segmentId) {
+            continue;
+        }
+        if (processedScripts.has(stateScript)) {
+            continue;
+        }
+        processedScripts.add(stateScript);
+        processStatePatch(container, stateContainer, stateScript.textContent);
+    }
+};
+const getProcessedStatePatchScripts = (container) => {
+    let processedScripts = processedStatePatchScripts.get(container);
+    if (!processedScripts) {
+        processedScripts = new WeakSet();
+        processedStatePatchScripts.set(container, processedScripts);
+    }
+    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));
+    }
+};
+const appendStatePatchRoots = (container, stateContainer, rootStart, rawStateData) => {
+    const currentRootCount = stateContainer.$rawStateData$.length / 2;
+    if (rootStart !== currentRootCount) {
+        if (qDev) {
+            throw new Error(`Invalid Qwik state patch root start: expected ${currentRootCount}, received ${rootStart}.`);
+        }
+        return;
+    }
+    for (let i = 0; i < rawStateData.length; i++) {
+        stateContainer.$rawStateData$[rootStart * 2 + i] = rawStateData[i];
+    }
+    preprocessState(stateContainer.$rawStateData$, container, undefined, 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;
+    }
+    const rootForwardRefs = (stateContainer.$rootForwardRefs$ ||= []);
+    for (let i = 0; i < forwardRefs.length; i++) {
+        const ref = forwardRefs[i];
+        if (ref !== undefined) {
+            rootForwardRefs.push(ref);
+        }
+    }
+    stateContainer.$forwardRefs$ = rootForwardRefs;
+};
+
 // NOTE: we want to move this function to qwikloader, and therefore this function should not have any external dependencies
-/**
- * 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 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]);
+    }
+}
 function processVNodeData(document) {
+    processVNodeDataImpl(document);
+    document.qVNodeDataProcessed = true;
+}
+function processVNodeDataImpl(document, segmentId, segmentContainer, segmentContent, segmentVNodeData) {
     const Q_CONTAINER = 'q:container';
     const Q_CONTAINER_END = '/' + Q_CONTAINER;
     const Q_PROPS_SEPARATOR = ':';
@@ -12947,8 +13651,11 @@ function processVNodeData(document) {
     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 || (qDocument.qVNodeData = new WeakMap());
+    const vNodeDataMap = (qDocument.qVNodeData ||= new WeakMap());
     const prototype = document.body;
     const getter = (prototype, name) => {
         let getter;
@@ -12968,9 +13675,20 @@ function processVNodeData(document) {
         const scripts = element.querySelectorAll('script[type="qwik/vnode"]');
         for (let i = 0; i < scripts.length; i++) {
             const script = scripts[i];
-            const qContainerElement = script.closest('[q\\:container]');
-            qContainerElement.qVnodeData = script.textContent;
-            qContainerElement.qVNodeRefs = new Map();
+            const qContainer = script.closest('[q\\:container]');
+            qContainer.qVNodeRefs ||= new Map();
+            if (script.hasAttribute(Q_PATCH)) {
+                qDocument.qProcessVNodeDataPatch?.(script);
+                continue;
+            }
+            const scriptContent = script.textContent;
+            const segment = __EXPERIMENTAL__.suspense && script.getAttribute(Q_SUSPENSE_RESOLVED);
+            if (segment) {
+                (qContainer.qSegmentVnodeData ||= new Map()).set(segment, scriptContent);
+            }
+            else {
+                qContainer.qVnodeData = scriptContent;
+            }
         }
         const shadowRoots = element.querySelectorAll('[q\\:shadowroot]');
         for (let i = 0; i < shadowRoots.length; i++) {
@@ -12979,7 +13697,6 @@ function processVNodeData(document) {
             shadowRoot && attachVnodeDataAndRefs(shadowRoot);
         }
     };
-    attachVnodeDataAndRefs(document);
     /**
      * Looks up which type of node this is in a monomorphic way which should be faster.
      *
@@ -12988,17 +13705,16 @@ function processVNodeData(document) {
     const getFastNodeType = (node) => {
         const nodeType = getNodeType.call(node);
         if (nodeType === 1 /* Node.ELEMENT_NODE */) {
-            const qContainer = getAttribute.call(node, Q_CONTAINER);
-            if (qContainer === null) {
-                if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
-                    return 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */;
-                }
-                const isQElement = hasAttribute.call(node, Q_PROPS_SEPARATOR);
-                return isQElement ? 2 /* NodeType.ELEMENT */ : 0 /* NodeType.OTHER */;
-            }
-            else {
+            if (getAttribute.call(node, Q_CONTAINER) !== null) {
                 return 3 /* NodeType.ELEMENT_CONTAINER */;
             }
+            if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
+                return 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */;
+            }
+            if (__EXPERIMENTAL__.suspense && getAttribute.call(node, Q_SUSPENSE_RESULT_PARENT) !== null) {
+                return 130 /* NodeType.ELEMENT_SUSPENSE_RESULT_PARENT */;
+            }
+            return hasAttribute.call(node, Q_PROPS_SEPARATOR) ? 2 /* NodeType.ELEMENT */ : 0 /* NodeType.OTHER */;
         }
         else if (nodeType === 8 /* Node.COMMENT_NODE */) {
             const nodeValue = node.nodeValue || ''; // nodeValue is monomorphic so it does not need fast path
@@ -13036,7 +13752,8 @@ function processVNodeData(document) {
      * @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, prefix) => {
+    const walkContainer = (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.
         let elementIdx = 0;
@@ -13052,7 +13769,6 @@ function processVNodeData(document) {
             let elementsToSkip = 0;
             while (isSeparator((ch = vData.charCodeAt(vData_start)))) {
                 // Keep consuming the separators and incrementing the vNodeIndex
-                // console.log('ADVANCE', vNodeElementIndex, ch, ch - 33);
                 elementsToSkip += 1 << (ch - VNodeDataSeparator.ADVANCE_1);
                 vData_start++;
                 if (vData_start >= vData_length) {
@@ -13075,8 +13791,7 @@ function processVNodeData(document) {
                 while (cursor && !(nextNode = nextSibling(cursor))) {
                     cursor = cursor.parentNode;
                 }
-                // console.log('EXIT', nextNode?.outerHTML);
-                walkContainer(walker, container, node, nextNode, container.qVnodeData || '', container.qVNodeRefs);
+                walkContainer(walker, container, node, nextNode, container.qVnodeData || '', container.qVNodeRefs, container);
             }
             else if (nodeType === 16 /* NodeType.COMMENT_IGNORE_START */) {
                 let islandNode = node;
@@ -13086,7 +13801,6 @@ function processVNodeData(document) {
                         throw new Error(`Island inside <!--${node?.nodeValue}--> not found!`);
                     }
                 } while (getFastNodeType(islandNode) !== 65 /* NodeType.COMMENT_ISLAND_START */);
-                nextNode = null;
             }
             else if (nodeType === 64 /* NodeType.COMMENT_ISLAND_END */) {
                 // Walk forward to find either the next container-island or the end of the q:ignore block.
@@ -13112,8 +13826,7 @@ function processVNodeData(document) {
                         throw new Error(`<!--${node?.nodeValue}--> not closed!`);
                     }
                 } while (getFastNodeType(nextNode) !== 8 /* NodeType.COMMENT_SKIP_END */);
-                // console.log('EXIT', nextNode?.outerHTML);
-                walkContainer(walker, node, node, nextNode, '', null);
+                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.
@@ -13123,10 +13836,14 @@ function processVNodeData(document) {
                 if (shadowRoot) {
                     walkContainer(
                     // we need to create a new walker for the shadow root
-                    document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, shadowRoot, null, '', null);
+                    document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, shadowRoot, null, '', null, null);
                 }
             }
             if ((nodeType & 2 /* NodeType.ELEMENT */) === 2 /* NodeType.ELEMENT */) {
+                if (isSegment && node !== containerNode) {
+                    const element = node;
+                    element._qSegment = segmentId;
+                }
                 if (vNodeElementIndex < elementIdx) {
                     // VNodeData needs to catch up with the elementIdx
                     if (vNodeElementIndex === -1) {
@@ -13135,8 +13852,7 @@ function processVNodeData(document) {
                     vData_start = vData_end;
                     if (vData_start < vData_length) {
                         vNodeElementIndex += howManyElementsToSkip();
-                        const shouldStoreRef = ch === VNodeDataSeparator.REFERENCE;
-                        if (shouldStoreRef) {
+                        if (ch === VNodeDataSeparator.REFERENCE) {
                             // if we need to store the ref handle it here.
                             needsToStoreRef = vNodeElementIndex;
                             vData_start++;
@@ -13154,29 +13870,78 @@ function processVNodeData(document) {
                         vNodeElementIndex = Number.MAX_SAFE_INTEGER;
                     }
                 }
-                // console.log(
-                //   prefix,
-                //   'ELEMENT',
-                //   nodeType,
-                //   elementIdx,
-                //   vNodeElementIndex,
-                //   (node as any).outerHTML,
-                //   elementIdx === vNodeElementIndex ? vData.substring(vData_start, vData_end) : ''
-                // );
+                const contentBoundaryId = __EXPERIMENTAL__.suspense &&
+                    !isSegment &&
+                    nodeType === 130 /* NodeType.ELEMENT_SUSPENSE_RESULT_PARENT */
+                    ? getAttribute.call(node, Q_SUSPENSE_RESULT_PARENT)
+                    : null;
                 if (elementIdx === vNodeElementIndex) {
-                    if (needsToStoreRef === elementIdx) {
-                        qVNodeRefs.set(elementIdx, node);
+                    if (needsToStoreRef === elementIdx && !(isSegment && node === containerNode)) {
+                        qVNodeRefs.set(isSegment ? getSegmentVNodeRefId(segmentId, elementIdx) : elementIdx, node);
+                    }
+                    const data = vData.substring(vData_start, vData_end);
+                    if (isSegment && node === containerNode) {
+                        const existing = vNodeDataMap.get(node);
+                        if (existing === undefined || existing === '') {
+                            vNodeDataMap.set(node, data);
+                        }
+                        else if (existing.charCodeAt(0) === VNodeDataChar.SEPARATOR &&
+                            existing.charCodeAt(1) === VNodeDataChar.SEPARATOR &&
+                            !existing.endsWith(data)) {
+                            vNodeDataMap.set(node, existing + data);
+                        }
+                    }
+                    else {
+                        vNodeDataMap.set(node, data);
                     }
-                    const instructions = vData.substring(vData_start, vData_end);
-                    vNodeDataMap.set(node, instructions);
                 }
                 elementIdx++;
+                if (__EXPERIMENTAL__.suspense && contentBoundaryId !== null) {
+                    processSuspenseContentSegment(qContainerElement, node, contentBoundaryId);
+                    nextNode = nextSibling(node);
+                    if (nextNode) {
+                        walker.currentNode = nextNode;
+                    }
+                }
             }
         } while ((node = nextNode || walker.nextNode()));
     };
+    const processVNodeDataScope = (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);
+    };
+    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);
+        }
+    };
+    if (__EXPERIMENTAL__.suspense && segmentId !== undefined) {
+        if (segmentContainer && segmentContent && segmentVNodeData) {
+            segmentContainer.qVNodeRefs ||= new Map();
+            processSuspenseContentSegment(segmentContainer, segmentContent, segmentId, segmentVNodeData);
+        }
+        return;
+    }
+    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);
+    walkContainer(walker, null, walker.firstChild(), null, '', null, null);
 }
 const isSeparator = (ch) => 
 /* `!` */ VNodeDataSeparator.ADVANCE_1 <= ch && ch <= VNodeDataSeparator.ADVANCE_8192; /* `.` */
@@ -13228,9 +13993,15 @@ function getDomContainerFromQContainerElement(qContainerElement) {
 function _getQContainerElement(element) {
     return element.closest(QContainerSelector);
 }
-const isDomContainer = (container) => {
-    return container instanceof DomContainer;
-};
+function getOutOfOrderStreamingScript(boundaryId, content) {
+    const segmentId = String(boundaryId);
+    const qContainerElement = content?.closest(QContainerSelector);
+    const qContainer = qContainerElement?.qContainer;
+    if (qContainer) {
+        processOutOfOrderSegmentVNodeData(qContainer.element.ownerDocument, segmentId, content);
+        processSegmentStateScripts(qContainer, segmentId);
+    }
+}
 /** @internal */
 class DomContainer extends _SharedContainer {
     element;
@@ -13245,6 +14016,7 @@ class DomContainer extends _SharedContainer {
     vNodeLocate = (id) => vnode_locate(this.rootVNode, id);
     $rawStateData$;
     $stateData$;
+    $rootForwardRefs$ = null;
     $styleIds$ = null;
     constructor(element) {
         super({}, element.getAttribute(QLocaleAttr));
@@ -13261,20 +14033,20 @@ class DomContainer extends _SharedContainer {
         this.$rawStateData$ = [];
         this.$stateData$ = [];
         const document = this.element.ownerDocument;
-        if (!document.qVNodeData) {
+        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$();
-        const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
-        if (qwikStates.length !== 0) {
-            const lastState = qwikStates[qwikStates.length - 1];
-            this.$rawStateData$ = JSON.parse(lastState.textContent);
-            preprocessState(this.$rawStateData$, this);
-            this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$);
+        this.$processRootStateScript$();
+        if (__EXPERIMENTAL__.suspense) {
+            processSegmentStateScripts(this);
         }
         this.$hoistStyles$();
         if (!qTest && element.isConnected) {
@@ -13291,8 +14063,34 @@ class DomContainer extends _SharedContainer {
         el.qContainer = undefined;
         el.qVnodeData = undefined;
         el.qVNodeRefs = undefined;
+        if (__EXPERIMENTAL__.suspense) {
+            el.qSegmentVnodeData = undefined;
+        }
         el.removeAttribute(QContainerAttr);
-        el.ownerDocument.qVNodeData = undefined;
+        const document = el.ownerDocument;
+        const hasContainers = document.querySelector(QContainerSelector) !== null;
+        if (!hasContainers) {
+            document.qVNodeData = undefined;
+            document.qVNodeDataProcessed = undefined;
+            document.qProcessVNodeDataPatch = undefined;
+        }
+        if (__EXPERIMENTAL__.suspense) {
+            if (!hasContainers) {
+                document.qProcessOOOS = undefined;
+            }
+        }
+    }
+    $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
@@ -13326,7 +14124,7 @@ class DomContainer extends _SharedContainer {
         if (qDev && host) {
             if (typeof document !== 'undefined') {
                 setErrorPayload(host, err);
-                markVNodeDirty(this, host, 256 /* ChoreBits.ERROR_WRAP */);
+                markVNodeDirty(this, host, 512 /* ChoreBits.ERROR_WRAP */);
             }
             if (err && err instanceof Error) {
                 if (!('hostElement' in err)) {
@@ -13423,6 +14221,9 @@ class DomContainer extends _SharedContainer {
     $getObjectById$ = (id) => {
         return getObjectById(id, this.$stateData$);
     };
+    $getForwardRef$(id) {
+        return this.$rootForwardRefs$?.[id];
+    }
     getSyncFn(id) {
         const fn = this.$qFuncs$[id];
         isDev && assertTrue(typeof fn === 'function', 'Invalid reference: ' + id);
@@ -14562,7 +15363,8 @@ const intToStr = (nu) => {
     return nu.toString(36);
 };
 const getNextUniqueIndex = (container) => {
-    return intToStr(container.$currentUniqueId$++);
+    const rootContainer = getRootContainer(container);
+    return intToStr(rootContainer.$currentUniqueId$++);
 };
 
 /** @public */
@@ -15350,7 +16152,7 @@ const eachCmpTask = async ({ track }) => {
     const context = tryGetInvokeContext();
     const host = context.$hostElement$;
     const container = context.$container$;
-    markVNodeDirty(container, host, 128 /* ChoreBits.RECONCILE */);
+    markVNodeDirty(container, host, 256 /* ChoreBits.RECONCILE */);
     const isSsr = qTest ? isServerPlatform() : isServer;
     if (isSsr) {
         await container.$renderPromise$;
@@ -15380,49 +16182,17 @@ const createRevealContext = (props) => {
 /** @internal */
 const revealCanReveal = () => {
     const registration = _captures[0];
-    if (registration === null) {
-        return true;
-    }
-    const reveal = registration.reveal;
-    const current = registration.item;
-    const items = reveal.items;
     // `version` is monotonic; the branch keeps the subscription read from being dropped by minifiers.
-    if (reveal.version.value < 0) {
+    if (registration !== null && registration.reveal.version.value < 0) {
         return false;
     }
-    switch (reveal.order) {
-        case 'together':
-            for (let i = 0; i < items.length; i++) {
-                if (items[i].boundary.pending.untrackedValue > 0) {
-                    return false;
-                }
-            }
-            return true;
-        case 'sequential':
-            for (let i = 0; i < items.length; i++) {
-                const item = items[i];
-                if (item === current) {
-                    return true;
-                }
-                if (item.boundary.pending.untrackedValue > 0) {
-                    return false;
-                }
-            }
-            return true;
-        case 'reverse':
-            for (let i = items.length - 1; i >= 0; i--) {
-                const item = items[i];
-                if (item === current) {
-                    return true;
-                }
-                if (item.boundary.pending.untrackedValue > 0) {
-                    return false;
-                }
-            }
-            return true;
-        default:
-            return true;
+    if (qTest ? isServerPlatform() : !isBrowser$1) {
+        const ooos = registration?.reveal.ooos;
+        if (ooos) {
+            return ooos.canReveal(registration);
+        }
     }
+    return canRevealRegistration(registration);
 };
 /** @internal */
 const revealCleanupTask = ({ cleanup }) => {
@@ -15457,6 +16227,15 @@ const useRevealBoundary = (boundary) => {
     }
     return registration;
 };
+const getOutOfOrderCoordinator = (reveal) => {
+    const coordinator = reveal.ooos;
+    if (coordinator) {
+        return coordinator;
+    }
+    const nextCoordinator = createOutOfOrderRevealCoordinator(reveal.order, reveal.collapsed);
+    reveal.ooos = noSerialize(nextCoordinator);
+    return nextCoordinator;
+};
 /** @internal */
 const revealCmp = (props) => {
     if (!__EXPERIMENTAL__.suspense) {
@@ -15464,11 +16243,32 @@ const revealCmp = (props) => {
     }
     const reveal = useConstant(createRevealContext, props);
     useContextProvider(RevealContext, reveal);
+    const isServerEnv = qTest ? isServerPlatform() : !isBrowser$1;
+    if (__EXPERIMENTAL__.suspense && isServerEnv && isOutOfOrderStreaming()) {
+        const coordinator = getOutOfOrderCoordinator(reveal);
+        return /*#__PURE__*/ _jsxSorted(SSRRevealSlot, {
+            coordinator,
+        }, null, null, 0, 'u7_0');
+    }
     return /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 0, 'u7_0');
 };
 /** @public @experimental */
 const Reveal = /*#__PURE__*/ componentQrl(
 /*#__PURE__*/ inlinedQrl(revealCmp, '_reC'));
+const SSRRevealSlot = __EXPERIMENTAL__.suspense
+    ? /*#__PURE__*/ createInternalServerComponent((ssr, jsx, _options, enqueue) => {
+        const coordinator = jsx.varProps.coordinator;
+        enqueue(() => {
+            const script = coordinator.script();
+            if (!script) {
+                return;
+            }
+            ssr.emitOutOfOrderExecutorIfNeeded();
+            ssr.emitInlineScript(script);
+        });
+        enqueue(/*#__PURE__*/ _jsxSorted(Slot, null, null, null, 0, 'u7_0'));
+    })
+    : null;
 
 const _hf0 = (p0, p1, p2, p3) => ({
     display: p1.value === 'fallback' &&
@@ -15480,9 +16280,9 @@ const _hf0 = (p0, p1, p2, p3) => ({
 });
 const _hf0_str = '{display:p1.value==="fallback"&&p0.fallback!=null&&p0.fallback!==false&&(p2===null||p2.value||!p3.reveal.collapsed)?"contents":"none"}';
 const _hf1 = (p0, p1, p2) => ({
-    display: (p2 === null || p2.value) && (p1.value === 'content' || p0.showStale) ? 'contents' : 'none',
+    display: (p1.value === 'content' || p0.showStale) && (p2 === null || p2.value) ? 'contents' : 'none',
 });
-const _hf1_str = '{display:(p2===null||p2.value)&&(p1.value==="content"||p0.showStale)?"contents":"none"}';
+const _hf1_str = '{display:(p1.value==="content"||p0.showStale)&&(p2===null||p2.value)?"contents":"none"}';
 /** @internal */
 const suspenseTask = ({ track, cleanup }) => {
     const cursorBoundary = _captures[0], props = _captures[1], state = _captures[2], revealRegistration = _captures[3];
@@ -15519,21 +16319,154 @@ const suspenseCmp = (props) => {
         state,
         revealRegistration,
     ]));
-    return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
-        /*#__PURE__*/ _jsxSorted('div', {
+    const isServerEnv = qTest ? isServerPlatform() : !isBrowser$1;
+    const isServerOutOfOrder = isServerEnv && isOutOfOrderStreaming();
+    const outOfOrderBoundaryId = isServerOutOfOrder ? nextOutOfOrderSuspenseId() : 0;
+    const outOfOrderRevealBoundary = isServerOutOfOrder
+        ? (revealRegistration?.reveal.ooos?.register(revealRegistration) ?? null)
+        : null;
+    const showOutOfOrderFallback = isServerOutOfOrder && shouldRenderFallback(props.fallback, outOfOrderRevealBoundary);
+    const outOfOrderBoundaryState = showOutOfOrderFallback && isPositiveDelay(props.delay)
+        ? { contentResolved: false, delayTimer: null }
+        : null;
+    const outOfOrderFallbackStyle = isServerOutOfOrder
+        ? /*#__PURE__*/ _fnSignal(_hf0, [props, state, canReveal, revealRegistration], _hf0_str)
+        : null;
+    const contentStyle = /*#__PURE__*/ _fnSignal(_hf1, [props, state, canReveal], _hf1_str);
+    const fallbackHost = (isServerOutOfOrder
+        ? /*#__PURE__*/ _jsxSorted(SSRFallback, {
+            boundary: outOfOrderBoundaryState,
+            delay: props.delay,
+            fallbackStyle: outOfOrderFallbackStyle,
+            showFallback: showOutOfOrderFallback,
+            state,
+        }, null, _wrapProp(props, 'fallback'), 1, null)
+        : /*#__PURE__*/ _jsxSorted('div', {
             style: _fnSignal(_hf0, [props, state, canReveal, revealRegistration], _hf0_str),
-        }, null, _wrapProp(props, 'fallback'), 1, null),
-        /*#__PURE__*/ _jsxSorted('div', null, {
-            style: _fnSignal(_hf1, [props, state, canReveal], _hf1_str),
-        }, 
-        /*#__PURE__*/ _jsxSorted(Slot, {
-            [QCursorBoundary]: cursorBoundary,
-        }, null, null, 3, 'u6_0'), 1, null),
-    ], 1, 'u6_1');
+        }, null, _wrapProp(props, 'fallback'), 1, null));
+    return [
+        fallbackHost,
+        /*#__PURE__*/ _jsxSorted('div', null, isServerOutOfOrder
+            ? {
+                [QSuspenseResultParent]: String(outOfOrderBoundaryId),
+                style: contentStyle,
+            }
+            : {
+                style: contentStyle,
+            }, 
+        /*#__PURE__*/ _jsxSorted(isServerOutOfOrder ? SSRDeferredSlot : Slot, isServerOutOfOrder
+            ? {
+                [QCursorBoundary]: cursorBoundary,
+                boundary: outOfOrderBoundaryState,
+                boundaryId: outOfOrderBoundaryId,
+                contentStyle,
+                reveal: outOfOrderRevealBoundary,
+            }
+            : {
+                [QCursorBoundary]: cursorBoundary,
+            }, null, null, 3, 'u6_0'), 1, null),
+    ];
 };
 /** @public @experimental */
 const Suspense = /*#__PURE__*/ componentQrl(
-/*#__PURE__*/ inlinedQrl(suspenseCmp, '_suC'));
+/*#__PURE__*/ inlinedQrl(suspenseCmp, SUSPENSE_QRL_SYMBOL));
+const SSRFallback = __EXPERIMENTAL__.suspense
+    ? /*#__PURE__*/ createInternalServerComponent((ssr, jsx, _options, enqueue) => {
+        const boundaryState = jsx.varProps.boundary;
+        const delay = jsx.varProps.delay;
+        const fallbackStyle = jsx.varProps.fallbackStyle;
+        const showFallback = jsx.varProps.showFallback === true;
+        const state = jsx.varProps.state;
+        if (showFallback && !isPositiveDelay(delay)) {
+            state.value = 'fallback';
+        }
+        else if (boundaryState && showFallback && isPositiveDelay(delay)) {
+            enqueue(() => scheduleOutOfOrderFallbackDelay(ssr, boundaryState, state, delay));
+        }
+        enqueue(
+        /*#__PURE__*/ _jsxSorted('div', {
+            style: fallbackStyle,
+        }, null, jsx.children, 1, null));
+    })
+    : null;
+const SSRDeferredSlot = __EXPERIMENTAL__.suspense
+    ? /*#__PURE__*/ createInternalServerComponent(async (ssr, jsx, options) => {
+        const boundaryId = jsx.varProps.boundaryId ?? ssr.nextOutOfOrderId();
+        const contentSegment = `${boundaryId}`;
+        const boundaryState = jsx.varProps.boundary;
+        const contentStyle = jsx.varProps.contentStyle;
+        const revealBoundary = jsx.varProps.reveal;
+        const content = ssr.segment(contentSegment, createClaimedDeferredSlot(ssr, jsx, options), options);
+        writeOutOfOrderPlaceholder(ssr, boundaryId);
+        ssr.emitOutOfOrderExecutorIfNeeded();
+        ssr.queueOutOfOrderSegment(content.then((rendered) => emitRenderedOutOfOrderSegment(ssr, boundaryId, contentSegment, rendered, contentStyle, revealBoundary, boundaryState)));
+    })
+    : null;
+function createClaimedDeferredSlot(ssr, jsx, options) {
+    const componentFrame = options.parentComponentFrame;
+    if (!componentFrame) {
+        return /*#__PURE__*/ _jsxSorted(Slot, jsx.varProps, jsx.constProps, jsx.children, jsx.flags, jsx.key);
+    }
+    const slotName = resolveSlotName(componentFrame.componentNode, jsx, ssr);
+    const slotDefaultChildren = (jsx.children || null);
+    const slotChildren = componentFrame.claimChildrenForSlot(slotName) || slotDefaultChildren;
+    if (slotDefaultChildren && slotChildren !== slotDefaultChildren) {
+        ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren);
+    }
+    return /*#__PURE__*/ _jsxSorted(Slot, jsx.varProps, jsx.constProps, slotChildren, jsx.flags, jsx.key);
+}
+async function emitRenderedOutOfOrderSegment(ssr, boundaryId, segmentId, rendered, contentStyle, revealBoundary, boundaryState) {
+    markOutOfOrderContentResolved(boundaryState);
+    revealBoundary?.resolve();
+    await ssr.$runQueuedRender$(async () => {
+        ssr.addRoot(contentStyle);
+        const result = await rendered.container.$finalizeOutOfOrderSegment$(segmentId, rendered);
+        writeOutOfOrderResolvedTemplate(ssr, boundaryId, result.html, revealBoundary);
+        ssr.emitOutOfOrderSegmentScripts(result.scripts);
+        ssr.emitInlineScript(`qO(${boundaryId})`);
+        // qO() is the browser-visible handoff for this segment, so flush it immediately.
+        await ssr.streamHandler.flush();
+    });
+}
+function markOutOfOrderContentResolved(boundaryState) {
+    if (!boundaryState) {
+        return;
+    }
+    boundaryState.contentResolved = true;
+    if (boundaryState.delayTimer) {
+        clearTimeout(boundaryState.delayTimer);
+        boundaryState.delayTimer = null;
+    }
+}
+function scheduleOutOfOrderFallbackDelay(ssr, boundaryState, state, delay) {
+    boundaryState.delayTimer = setTimeout(() => {
+        boundaryState.delayTimer = null;
+        void ssr.$runQueuedRender$(async () => {
+            if (boundaryState.contentResolved) {
+                return;
+            }
+            state.value = 'fallback';
+            ssr.emitBackpatchDataAndExecutorIfNeeded();
+            await ssr.streamHandler.flush();
+        });
+    }, delay);
+}
+function isPositiveDelay(delay) {
+    return typeof delay === 'number' && Number.isFinite(delay) && delay > 0;
+}
+function shouldRenderFallback(fallback, revealBoundary) {
+    return (fallback != null &&
+        fallback !== false &&
+        (revealBoundary === null || revealBoundary.showFallback));
+}
+function writeOutOfOrderPlaceholder(ssr, boundaryId) {
+    ssr.write(`<template ${QSuspenseResolved}="${boundaryId}"></template>`);
+}
+function writeOutOfOrderResolvedTemplate(ssr, boundaryId, html, revealBoundary) {
+    ssr.write(`<template ${QSuspenseResolved}="${boundaryId}"${revealBoundary?.attrs ?? ''}>`);
+    ssr.write(html);
+    ssr.write('</template>');
+}
 
 // keep this import from core/build so the cjs build works
 /**
@@ -15630,5 +16563,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, _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, 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 };
 //# sourceMappingURL=core.mjs.map