@qwik.dev/core 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/core.prod.cjs

@@ -1,19 +1,18 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.2-dev+58b6f8d
+ * @qwik.dev/core 2.0.0-alpha.4-dev+374e0d6
  * 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
  */
 !function(global, factory) {
-    "object" == typeof exports && "undefined" != typeof module ? factory(exports, require("@qwik.dev/core/build"), require("@qwik.dev/core")) : "function" == typeof define && define.amd ? define([ "exports", "@qwik.dev/core/build", "@qwik.dev/core" ], factory) : factory((global = "undefined" != typeof globalThis ? globalThis : global || self).qwikCore = {}, global.qwikBuild);
+    "object" == typeof exports && "undefined" != typeof module ? factory(exports, require("@qwik.dev/core/build")) : "function" == typeof define && define.amd ? define([ "exports", "@qwik.dev/core/build" ], factory) : factory((global = "undefined" != typeof globalThis ? globalThis : global || self).qwikCore = {}, global.qwikBuild);
 }(this, (function(exports, build) {
     "use strict";
     const qDev = !1;
     const seal = () => {
         qDev;
     };
-    const logError = (message, ...optionalParams) => createAndLogError(!1, message, ...optionalParams);
     const throwErrorAndStop = (message, ...optionalParams) => {
         throw createAndLogError(!1, message, ...optionalParams);
     };
@@ -39,9 +38,40 @@
     function assertFalse() {
         qDev;
     }
-    const qError = (code, ...parts) => {
-        const text = (code => `Code(${code}) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L${8 + code}`)(code, ...parts);
-        return ((message, ...optionalParams) => createAndLogError(!0, message, ...optionalParams))(text, ...parts);
+    var QError;
+    !function(QError) {
+        QError[QError.stringifyClassOrStyle = 0] = "stringifyClassOrStyle", QError[QError.UNUSED_1 = 1] = "UNUSED_1", 
+        QError[QError.UNUSED_2 = 2] = "UNUSED_2", QError[QError.verifySerializable = 3] = "verifySerializable", 
+        QError[QError.UNUSED_4 = 4] = "UNUSED_4", QError[QError.cannotRenderOverExistingContainer = 5] = "cannotRenderOverExistingContainer", 
+        QError[QError.UNUSED_6 = 6] = "UNUSED_6", QError[QError.UNUSED_7 = 7] = "UNUSED_7", 
+        QError[QError.UNUSED_8 = 8] = "UNUSED_8", QError[QError.UNUSED_9 = 9] = "UNUSED_9", 
+        QError[QError.qrlIsNotFunction = 10] = "qrlIsNotFunction", QError[QError.dynamicImportFailed = 11] = "dynamicImportFailed", 
+        QError[QError.unknownTypeArgument = 12] = "unknownTypeArgument", QError[QError.notFoundContext = 13] = "notFoundContext", 
+        QError[QError.useMethodOutsideContext = 14] = "useMethodOutsideContext", QError[QError.UNUSED_15 = 15] = "UNUSED_15", 
+        QError[QError.UNUSED_16 = 16] = "UNUSED_16", QError[QError.UNUSED_17 = 17] = "UNUSED_17", 
+        QError[QError.UNUSED_18 = 18] = "UNUSED_18", QError[QError.UNUSED_19 = 19] = "UNUSED_19", 
+        QError[QError.useInvokeContext = 20] = "useInvokeContext", QError[QError.UNUSED_21 = 21] = "UNUSED_21", 
+        QError[QError.UNUSED_22 = 22] = "UNUSED_22", QError[QError.UNUSED_23 = 23] = "UNUSED_23", 
+        QError[QError.UNUSED_24 = 24] = "UNUSED_24", QError[QError.UNUSED_25 = 25] = "UNUSED_25", 
+        QError[QError.UNUSED_26 = 26] = "UNUSED_26", QError[QError.UNUSED_27 = 27] = "UNUSED_27", 
+        QError[QError.invalidContext = 28] = "invalidContext", QError[QError.tagError = 29] = "tagError", 
+        QError[QError.qrlMissingContainer = 30] = "qrlMissingContainer", QError[QError.qrlMissingChunk = 31] = "qrlMissingChunk", 
+        QError[QError.invalidRefValue = 32] = "invalidRefValue", QError[QError.serializeErrorNotImplemented = 33] = "serializeErrorNotImplemented", 
+        QError[QError.serializeErrorExpectedVNode = 34] = "serializeErrorExpectedVNode", 
+        QError[QError.serializeErrorCannotAllocate = 35] = "serializeErrorCannotAllocate", 
+        QError[QError.serializeErrorMissingRootId = 36] = "serializeErrorMissingRootId", 
+        QError[QError.serializeErrorUnknownType = 37] = "serializeErrorUnknownType", QError[QError.serializeErrorUnvisited = 38] = "serializeErrorUnvisited", 
+        QError[QError.serializeErrorMissingChunk = 39] = "serializeErrorMissingChunk", QError[QError.wrongTextareaValue = 40] = "wrongTextareaValue", 
+        QError[QError.containerNotFound = 41] = "containerNotFound", QError[QError.elementWithoutContainer = 42] = "elementWithoutContainer", 
+        QError[QError.invalidVNodeType = 43] = "invalidVNodeType", QError[QError.materializeVNodeDataError = 44] = "materializeVNodeDataError", 
+        QError[QError.serverHostMismatch = 45] = "serverHostMismatch", QError[QError.cannotCoerceSignal = 46] = "cannotCoerceSignal", 
+        QError[QError.computedNotSync = 47] = "computedNotSync", QError[QError.computedReadOnly = 48] = "computedReadOnly", 
+        QError[QError.wrappedReadOnly = 49] = "wrappedReadOnly", QError[QError.promisesNotExpected = 50] = "promisesNotExpected", 
+        QError[QError.unsafeAttr = 51] = "unsafeAttr";
+    }(QError || (QError = {}));
+    const qError = (code, errorMessageArgs = []) => {
+        const text = (code => `Code(Q${code}) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L${8 + code}`)(code, ...errorMessageArgs);
+        return ((message, ...optionalParams) => createAndLogError(!0, message, ...optionalParams))(text, ...errorMessageArgs);
     };
     const createPlatform = () => ({
         isServer: build.isServer,
@@ -54,10 +84,10 @@
                 }
             }
             if (!url) {
-                throw qError(31, symbolName);
+                throw qError(QError.qrlMissingChunk, [ symbolName ]);
             }
             if (!containerEl) {
-                throw qError(30, url, symbolName);
+                throw qError(QError.qrlMissingContainer, [ url, symbolName ]);
             }
             const urlDoc = toUrl(containerEl.ownerDocument, containerEl, url).toString();
             const urlCopy = new URL(urlDoc);
@@ -97,7 +127,7 @@
     };
     const maybeThen = (valueOrPromise, thenFn) => isPromise(valueOrPromise) ? valueOrPromise.then(thenFn, shouldNotError) : thenFn(valueOrPromise);
     const shouldNotError = reason => {
-        throwErrorAndStop("QWIK ERROR:", reason);
+        throwErrorAndStop(reason);
     };
     const delay = timeout => new Promise((resolve => {
         setTimeout(resolve, timeout);
@@ -120,6 +150,92 @@
     const isArray = v => Array.isArray(v);
     const isString = v => "string" == typeof v;
     const isFunction = v => "function" == typeof v;
+    var VNodeDataFlag;
+    !function(VNodeDataFlag) {
+        VNodeDataFlag[VNodeDataFlag.NONE = 0] = "NONE", VNodeDataFlag[VNodeDataFlag.TEXT_DATA = 1] = "TEXT_DATA", 
+        VNodeDataFlag[VNodeDataFlag.VIRTUAL_NODE = 2] = "VIRTUAL_NODE", VNodeDataFlag[VNodeDataFlag.ELEMENT_NODE = 4] = "ELEMENT_NODE", 
+        VNodeDataFlag[VNodeDataFlag.REFERENCE = 8] = "REFERENCE", VNodeDataFlag[VNodeDataFlag.SERIALIZE = 16] = "SERIALIZE";
+    }(VNodeDataFlag || (VNodeDataFlag = {}));
+    var VirtualType;
+    !function(VirtualType) {
+        VirtualType.Virtual = "V", VirtualType.Fragment = "F", VirtualType.WrappedSignal = "S", 
+        VirtualType.Awaited = "A", VirtualType.Component = "C", VirtualType.InlineComponent = "I", 
+        VirtualType.Projection = "P";
+    }(VirtualType || (VirtualType = {}));
+    const VirtualTypeName = {
+        [VirtualType.Virtual]: "Virtual",
+        [VirtualType.Fragment]: "Fragment",
+        [VirtualType.WrappedSignal]: "Signal",
+        [VirtualType.Awaited]: "Awaited",
+        [VirtualType.Component]: "Component",
+        [VirtualType.InlineComponent]: "InlineComponent",
+        [VirtualType.Projection]: "Projection"
+    };
+    var QContainerValue;
+    !function(QContainerValue) {
+        QContainerValue.PAUSED = "paused", QContainerValue.RESUMED = "resumed", QContainerValue.HTML = "html", 
+        QContainerValue.TEXT = "text";
+    }(QContainerValue || (QContainerValue = {}));
+    const QSlot = "q:slot";
+    const QSlotS = "q:s";
+    const getQFuncs = (document, hash) => document["qFuncs_" + hash] || [];
+    const QContainerSelector = "[q\\:container]:not([q\\:container=" + QContainerValue.HTML + "]):not([q\\:container=" + QContainerValue.TEXT + "])";
+    const HTML_NS = "http://www.w3.org/1999/xhtml";
+    const SVG_NS = "http://www.w3.org/2000/svg";
+    const MATH_NS = "http://www.w3.org/1998/Math/MathML";
+    let _locale;
+    const EMPTY_ARRAY = [];
+    const EMPTY_OBJ = {};
+    Object.freeze(EMPTY_ARRAY), Object.freeze(EMPTY_OBJ);
+    const EXTRACT_IMPORT_PATH = /\(\s*(['"])([^\1]+)\1\s*\)/;
+    const EXTRACT_SELF_IMPORT = /Promise\s*\.\s*resolve/;
+    const EXTRACT_FILE_NAME = /[\\/(]([\w\d.\-_]+\.(js|ts)x?):/;
+    const announcedQRL = /*#__PURE__*/ new Set;
+    const qrl = (chunkOrFn, symbol, lexicalScopeCapture = EMPTY_ARRAY, stackOffset = 0) => {
+        let chunk = null;
+        let symbolFn = null;
+        if (isFunction(chunkOrFn)) {
+            symbolFn = chunkOrFn;
+            {
+                let match;
+                const srcCode = String(chunkOrFn);
+                if ((match = srcCode.match(EXTRACT_IMPORT_PATH)) && match[2]) {
+                    chunk = match[2];
+                } else {
+                    if (!(match = srcCode.match(EXTRACT_SELF_IMPORT))) {
+                        throw qError(QError.dynamicImportFailed, [ srcCode ]);
+                    }
+                    {
+                        const ref = "QWIK-SELF";
+                        const frames = new Error(ref).stack.split("\n");
+                        const start = frames.findIndex((f => f.includes(ref)));
+                        match = frames[start + 2 + stackOffset].match(EXTRACT_FILE_NAME), chunk = match ? match[1] : "main";
+                    }
+                }
+            }
+        } else {
+            if (!isString(chunkOrFn)) {
+                throw qError(QError.unknownTypeArgument, [ chunkOrFn ]);
+            }
+            chunk = chunkOrFn;
+        }
+        return announcedQRL.has(symbol) || (announcedQRL.add(symbol), emitEvent("qprefetch", {
+            symbols: [ getSymbolHash(symbol) ],
+            bundles: chunk && [ chunk ]
+        })), createQRL(chunk, symbol, null, symbolFn, null, lexicalScopeCapture, null);
+    };
+    const inlinedQrl = (symbol, symbolName, lexicalScopeCapture = EMPTY_ARRAY) => createQRL(null, symbolName, symbol, null, null, lexicalScopeCapture, null);
+    const _noopQrl = (symbolName, lexicalScopeCapture = EMPTY_ARRAY) => createQRL(null, symbolName, null, null, null, lexicalScopeCapture, null);
+    const Slot = props => _jsxSorted(Virtual, null, {
+        [QSlotS]: ""
+    }, props.children, 0, props.name ?? "");
+    const SkipRender = Symbol("skip render");
+    const SSRRaw = () => null;
+    const SSRComment = () => null;
+    const SSRStream = (props, key) => jsx(RenderOnce, {
+        children: jsx(InternalSSRStream, props)
+    }, key);
+    const InternalSSRStream = () => null;
     const isJsxPropertyAnEventName = name => (name.startsWith("on") || name.startsWith("window:on") || name.startsWith("document:on")) && name.endsWith("$");
     const isHtmlAttributeAnEventName = name => name.startsWith("on:") || name.startsWith("on-window:") || name.startsWith("on-document:");
     const getEventNameFromJsxProp = name => {
@@ -164,26 +280,6 @@
     function isPreventDefault(key) {
         return key.startsWith("preventdefault:");
     }
-    function hasClassAttr(props) {
-        for (const key in props) {
-            if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
-                return !0;
-            }
-        }
-        return !1;
-    }
-    function isClassAttr(key) {
-        return "class" === key || "className" === key;
-    }
-    const addComponentStylePrefix = styleId => {
-        if (styleId) {
-            let idx = 0;
-            do {
-                styleId = styleId.substring(0, idx) + styleContent(styleId.substring(idx));
-            } while (0 !== (idx = styleId.indexOf(" ", idx) + 1));
-        }
-        return styleId || null;
-    };
     const unitlessNumbers = new Set([ "animationIterationCount", "aspectRatio", "borderImageOutset", "borderImageSlice", "borderImageWidth", "boxFlex", "boxFlexGroup", "boxOrdinalGroup", "columnCount", "columns", "flex", "flexGrow", "flexShrink", "gridArea", "gridRow", "gridRowEnd", "gridRowStart", "gridColumn", "gridColumnEnd", "gridColumnStart", "fontWeight", "lineClamp", "lineHeight", "opacity", "order", "orphans", "scale", "tabSize", "widows", "zIndex", "zoom", "MozAnimationIterationCount", "MozBoxFlex", "msFlex", "msFlexPositive", "WebkitAnimationIterationCount", "WebkitBoxFlex", "WebkitBoxOrdinalGroup", "WebkitColumnCount", "WebkitColumns", "WebkitFlex", "WebkitFlexGrow", "WebkitFlexShrink", "WebkitLineClamp" ]);
     const hashCode = (text, hash = 0) => {
         for (let i = 0; i < text.length; i++) {
@@ -191,33 +287,6 @@
         }
         return Number(Math.abs(hash)).toString(36);
     };
-    var VirtualType;
-    !function(VirtualType) {
-        VirtualType.Virtual = "V", VirtualType.Fragment = "F", VirtualType.WrappedSignal = "S", 
-        VirtualType.Awaited = "A", VirtualType.Component = "C", VirtualType.InlineComponent = "I", 
-        VirtualType.Projection = "P";
-    }(VirtualType || (VirtualType = {}));
-    const VirtualTypeName = {
-        [VirtualType.Virtual]: "Virtual",
-        [VirtualType.Fragment]: "Fragment",
-        [VirtualType.WrappedSignal]: "Signal",
-        [VirtualType.Awaited]: "Awaited",
-        [VirtualType.Component]: "Component",
-        [VirtualType.InlineComponent]: "InlineComponent",
-        [VirtualType.Projection]: "Projection"
-    };
-    var QContainerValue;
-    !function(QContainerValue) {
-        QContainerValue.PAUSED = "paused", QContainerValue.RESUMED = "resumed", QContainerValue.HTML = "html", 
-        QContainerValue.TEXT = "text";
-    }(QContainerValue || (QContainerValue = {}));
-    const QSlot = "q:slot";
-    const QSlotS = "q:s";
-    const getQFuncs = (document, hash) => document["qFuncs_" + hash] || [];
-    const QContainerSelector = "[q\\:container]:not([q\\:container=" + QContainerValue.HTML + "]):not([q\\:container=" + QContainerValue.TEXT + "])";
-    const HTML_NS = "http://www.w3.org/1999/xhtml";
-    const SVG_NS = "http://www.w3.org/2000/svg";
-    const MATH_NS = "http://www.w3.org/1998/Math/MathML";
     const serializeClass = obj => {
         if (!obj) {
             return "";
@@ -249,7 +318,7 @@
                 }
                 if ("object" == typeof obj) {
                     if (isArray(obj)) {
-                        throw qError(0, obj, "style");
+                        throw qError(QError.stringifyClassOrStyle, [ obj, "style" ]);
                     }
                     {
                         const chunks = [];
@@ -272,678 +341,279 @@
     }
     const setValueForStyle = (styleName, value) => "number" != typeof value || 0 === value || unitlessNumbers.has(styleName) ? value : value + "px";
     const styleContent = styleId => "⭐️" + styleId;
-    const EMPTY_ARRAY = [];
-    const EMPTY_OBJ = {};
-    Object.freeze(EMPTY_ARRAY), Object.freeze(EMPTY_OBJ);
-    const EXTRACT_IMPORT_PATH = /\(\s*(['"])([^\1]+)\1\s*\)/;
-    const EXTRACT_SELF_IMPORT = /Promise\s*\.\s*resolve/;
-    const EXTRACT_FILE_NAME = /[\\/(]([\w\d.\-_]+\.(js|ts)x?):/;
-    const announcedQRL = /*#__PURE__*/ new Set;
-    const qrl = (chunkOrFn, symbol, lexicalScopeCapture = EMPTY_ARRAY, stackOffset = 0) => {
-        let chunk = null;
-        let symbolFn = null;
-        if (isFunction(chunkOrFn)) {
-            symbolFn = chunkOrFn;
-            {
-                let match;
-                const srcCode = String(chunkOrFn);
-                if ((match = srcCode.match(EXTRACT_IMPORT_PATH)) && match[2]) {
-                    chunk = match[2];
-                } else {
-                    if (!(match = srcCode.match(EXTRACT_SELF_IMPORT))) {
-                        throw qError(11, srcCode);
-                    }
-                    {
-                        const ref = "QWIK-SELF";
-                        const frames = new Error(ref).stack.split("\n");
-                        const start = frames.findIndex((f => f.includes(ref)));
-                        match = frames[start + 2 + stackOffset].match(EXTRACT_FILE_NAME), chunk = match ? match[1] : "main";
-                    }
-                }
-            }
-        } else {
-            if (!isString(chunkOrFn)) {
-                throw qError(12, chunkOrFn);
+    function hasClassAttr(props) {
+        for (const key in props) {
+            if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
+                return !0;
             }
-            chunk = chunkOrFn;
-        }
-        return announcedQRL.has(symbol) || (announcedQRL.add(symbol), emitEvent("qprefetch", {
-            symbols: [ getSymbolHash(symbol) ],
-            bundles: chunk && [ chunk ]
-        })), createQRL(chunk, symbol, null, symbolFn, null, lexicalScopeCapture, null);
-    };
-    const inlinedQrl = (symbol, symbolName, lexicalScopeCapture = EMPTY_ARRAY) => createQRL(null, symbolName, symbol, null, null, lexicalScopeCapture, null);
-    const _noopQrl = (symbolName, lexicalScopeCapture = EMPTY_ARRAY) => createQRL(null, symbolName, null, null, null, lexicalScopeCapture, null);
-    const Slot = props => _jsxSorted(Virtual, null, {
-        [QSlotS]: ""
-    }, props.children, 0, props.name ?? "");
-    const SkipRender = Symbol("skip render");
-    const SSRRaw = () => null;
-    const SSRComment = () => null;
-    const SSRStream = (props, key) => jsx(RenderOnce, {
-        children: jsx(InternalSSRStream, props)
-    }, key);
-    const InternalSSRStream = () => null;
-    let _locale;
-    const useSequentialScope = () => {
-        const iCtx = useInvokeContext();
-        const host = iCtx.$hostElement$;
-        let seq = iCtx.$container$.getHostProp(host, "q:seq");
-        null === seq && (seq = [], iCtx.$container$.setHostProp(host, "q:seq", seq));
-        let seqIdx = iCtx.$container$.getHostProp(host, "q:seqIdx");
-        for (null === seqIdx && (seqIdx = 0), iCtx.$container$.setHostProp(host, "q:seqIdx", seqIdx + 1); seq.length <= seqIdx; ) {
-            seq.push(void 0);
         }
-        return {
-            val: seq[seqIdx],
-            set: value => seq[seqIdx] = value,
-            i: seqIdx,
-            iCtx
-        };
-    };
-    const createContextId = name => (assertTrue(/^[\w/.-]+$/.test(name)), /*#__PURE__*/ Object.freeze({
-        id: fromCamelToKebabCase(name)
-    }));
-    const useContextProvider = (context, newValue) => {
-        const {val, set, iCtx} = useSequentialScope();
-        void 0 === val && (iCtx.$container$.setContext(iCtx.$hostElement$, context, newValue), 
-        set(1));
-    };
-    const ERROR_CONTEXT = /*#__PURE__*/ createContextId("qk-error");
-    function isSlotProp(prop) {
-        return !prop.startsWith("q:") && !prop.startsWith(":");
-    }
-    class Subscriber {
-        $effectDependencies$=null;
+        return !1;
     }
-    function isSubscriber(value) {
-        return value instanceof Subscriber || value instanceof WrappedSignal;
+    function isClassAttr(key) {
+        return "class" === key || "className" === key;
     }
-    function clearVNodeEffectDependencies(value) {
-        const effects = vnode_getProp(value, "q:subs", null);
-        if (effects) {
-            for (let i = effects.length - 1; i >= 0; i--) {
-                clearEffects(effects[i], value) && effects.splice(i, 1);
-            }
+    const addComponentStylePrefix = styleId => {
+        if (styleId) {
+            let idx = 0;
+            do {
+                styleId = styleId.substring(0, idx) + styleContent(styleId.substring(idx));
+            } while (0 !== (idx = styleId.indexOf(" ", idx) + 1));
         }
+        return styleId || null;
+    };
+    const STORE_TARGET = Symbol("store.target");
+    const STORE_HANDLER = Symbol("store.handler");
+    const STORE_ARRAY_PROP = Symbol("store.array");
+    var StoreFlags;
+    !function(StoreFlags) {
+        StoreFlags[StoreFlags.NONE = 0] = "NONE", StoreFlags[StoreFlags.RECURSIVE = 1] = "RECURSIVE", 
+        StoreFlags[StoreFlags.IMMUTABLE = 2] = "IMMUTABLE";
+    }(StoreFlags || (StoreFlags = {}));
+    const getStoreHandler = value => value[STORE_HANDLER];
+    const getStoreTarget = value => value?.[STORE_TARGET] || null;
+    const unwrapStore = value => getStoreTarget(value) || value;
+    const isStore = value => STORE_TARGET in value;
+    function createStore(container, obj, flags) {
+        return new Proxy(obj, new StoreHandler(flags, container || null));
     }
-    function clearSubscriberEffectDependencies(value) {
-        if (value.$effectDependencies$) {
-            for (let i = value.$effectDependencies$.length - 1; i >= 0; i--) {
-                clearEffects(value.$effectDependencies$[i], value) && value.$effectDependencies$.splice(i, 1);
-            }
-        }
-    }
-    function clearEffects(subscriber, value) {
-        if (!isSignal(subscriber)) {
-            return !1;
-        }
-        const effectSubscriptions = subscriber.$effects$;
-        if (!effectSubscriptions) {
-            return !1;
-        }
-        let subscriptionRemoved = !1;
-        for (let i = effectSubscriptions.length - 1; i >= 0; i--) {
-            effectSubscriptions[i][EffectSubscriptionsProp.EFFECT] === value && (effectSubscriptions.splice(i, 1), 
-            subscriptionRemoved = !0);
-        }
-        return subscriptionRemoved;
-    }
-    const NEEDS_COMPUTATION = Symbol("invalid");
-    const throwIfQRLNotResolved = qrl => {
-        if (!qrl.resolved) {
-            throw qrl.resolve();
+    const getOrCreateStore = (obj, flags, container) => {
+        if (isSerializableObject(obj) && container) {
+            let store = container.$storeProxyMap$.get(obj);
+            return store || (store = createStore(container, obj, flags), container.$storeProxyMap$.set(obj, store)), 
+            store;
         }
+        return obj;
     };
-    const isSignal = value => value instanceof Signal;
-    class EffectData {
-        data;
-        constructor(data) {
-            this.data = data;
-        }
-    }
-    var EffectSubscriptionsProp;
-    var EffectProperty;
-    !function(EffectSubscriptionsProp) {
-        EffectSubscriptionsProp[EffectSubscriptionsProp.EFFECT = 0] = "EFFECT", EffectSubscriptionsProp[EffectSubscriptionsProp.PROPERTY = 1] = "PROPERTY", 
-        EffectSubscriptionsProp[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA = 2] = "FIRST_BACK_REF_OR_DATA";
-    }(EffectSubscriptionsProp || (EffectSubscriptionsProp = {})), function(EffectProperty) {
-        EffectProperty.COMPONENT = ":", EffectProperty.VNODE = ".";
-    }(EffectProperty || (EffectProperty = {}));
-    class Signal {
-        $untrackedValue$;
+    class StoreHandler {
+        $flags$;
+        $container$;
         $effects$=null;
-        $container$=null;
-        constructor(container, value) {
-            this.$container$ = container, this.$untrackedValue$ = value;
-        }
-        get untrackedValue() {
-            return this.$untrackedValue$;
+        constructor($flags$, $container$) {
+            this.$flags$ = $flags$, this.$container$ = $container$;
         }
-        set untrackedValue(value) {
-            this.$untrackedValue$ = value;
+        toString() {
+            return "[Store]";
         }
-        get value() {
+        get(target, prop) {
+            if ("symbol" == typeof prop) {
+                return prop === STORE_TARGET ? target : prop === STORE_HANDLER ? this : target[prop];
+            }
             const ctx = tryGetInvokeContext();
+            const value = target[prop];
             if (ctx) {
                 if (null === this.$container$) {
                     if (!ctx.$container$) {
-                        return this.untrackedValue;
+                        return value;
                     }
                     this.$container$ = ctx.$container$;
                 } else {
                     assertTrue();
                 }
                 const effectSubscriber = ctx.$effectSubscriber$;
-                if (effectSubscriber) {
-                    const effects = this.$effects$ ||= [];
-                    ensureContainsEffect(effects, effectSubscriber), ensureContains(effectSubscriber, this), 
-                    isSubscriber(this) && ensureEffectContainsSubscriber(effectSubscriber[EffectSubscriptionsProp.EFFECT], this, this.$container$);
-                }
+                effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
             }
-            return this.untrackedValue;
-        }
-        set value(value) {
-            value !== this.$untrackedValue$ && (this.$untrackedValue$ = value, triggerEffects(this.$container$, this, this.$effects$));
-        }
-        valueOf() {
-            qDev;
-        }
-        toString() {
-            return `[${this.constructor.name}${this.$invalid$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + (this.$effects$?.map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n") || "");
-        }
-        toJSON() {
-            return {
-                value: this.$untrackedValue$
-            };
-        }
-    }
-    const ensureContains = (array, value) => {
-        -1 === array.indexOf(value) && array.push(value);
-    };
-    const ensureContainsEffect = (array, effectSubscriptions) => {
-        for (let i = 0; i < array.length; i++) {
-            const existingEffect = array[i];
-            if (existingEffect[0] === effectSubscriptions[0] && existingEffect[1] === effectSubscriptions[1]) {
-                return;
+            if ("toString" === prop && value === Object.prototype.toString) {
+                return this.toString;
             }
+            return this.$flags$ & StoreFlags.RECURSIVE && "object" == typeof value && null !== value && !Object.isFrozen(value) && !isStore(value) && !Object.isFrozen(target) ? getOrCreateStore(value, this.$flags$, this.$container$) : value;
         }
-        array.push(effectSubscriptions);
-    };
-    const ensureEffectContainsSubscriber = (effect, subscriber, container) => {
-        if (isSubscriber(effect)) {
-            if (effect.$effectDependencies$ ||= [], subscriberExistInSubscribers(effect.$effectDependencies$, subscriber)) {
-                return;
-            }
-            effect.$effectDependencies$.push(subscriber);
-        } else if (vnode_isVNode(effect) && vnode_isVirtualVNode(effect)) {
-            let subscribers = vnode_getProp(effect, "q:subs", container ? container.$getObjectById$ : null);
-            if (subscribers ||= [], subscriberExistInSubscribers(subscribers, subscriber)) {
-                return;
+        set(target, prop, value) {
+            if (target = unwrapDeserializerProxy(target), "symbol" == typeof prop) {
+                return target[prop] = value, !0;
             }
-            subscribers.push(subscriber), vnode_setProp(effect, "q:subs", subscribers);
-        } else if (isSSRNode(effect)) {
-            let subscribers = effect.getProp("q:subs");
-            if (subscribers ||= [], subscriberExistInSubscribers(subscribers, subscriber)) {
-                return;
+            const newValue = this.$flags$ & StoreFlags.RECURSIVE ? unwrapStore(value) : value;
+            if (prop in target) {
+                newValue !== target[prop] && setNewValueAndTriggerEffects(prop, newValue, target, this);
+            } else {
+                setNewValueAndTriggerEffects(prop, newValue, target, this);
             }
-            subscribers.push(subscriber), effect.setProp("q:subs", subscribers);
+            return !0;
         }
-    };
-    const isSSRNode = effect => "setProp" in effect && "getProp" in effect && "removeProp" in effect && "id" in effect;
-    const subscriberExistInSubscribers = (subscribers, subscriber) => {
-        for (let i = 0; i < subscribers.length; i++) {
-            if (subscribers[i] === subscriber) {
+        deleteProperty(target, prop) {
+            return "string" == typeof prop && delete target[prop] && (triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$)), 
+            !0);
+        }
+        has(target, prop) {
+            if (prop === STORE_TARGET) {
                 return !0;
             }
-        }
-        return !1;
-    };
-    const triggerEffects = (container, signal, effects) => {
-        if (effects) {
-            const scheduleEffect = effectSubscriptions => {
-                const effect = effectSubscriptions[EffectSubscriptionsProp.EFFECT];
-                const property = effectSubscriptions[EffectSubscriptionsProp.PROPERTY];
-                if (assertDefined(), isTask(effect)) {
-                    effect.$flags$ |= TaskFlags.DIRTY;
-                    let choreType = ChoreType.TASK;
-                    effect.$flags$ & TaskFlags.VISIBLE_TASK ? choreType = ChoreType.VISIBLE : effect.$flags$ & TaskFlags.RESOURCE && (choreType = ChoreType.RESOURCE), 
-                    container.$scheduler$(choreType, effect);
-                } else if (effect instanceof Signal) {
-                    effect instanceof ComputedSignal && (effect.$computeQrl$.resolved || container.$scheduler$(ChoreType.QRL_RESOLVE, null, effect.$computeQrl$));
-                    try {
-                        retryOnPromise((() => effect.$invalidate$()));
-                    } catch (e) {
-                        logError(e);
-                    }
-                } else if (property === EffectProperty.COMPONENT) {
-                    const host = effect;
-                    const qrl = container.getHostProp(host, "q:renderFn");
-                    assertDefined();
-                    const props = container.getHostProp(host, "q:props");
-                    container.$scheduler$(ChoreType.COMPONENT, host, qrl, props);
-                } else if (property === EffectProperty.VNODE) {
-                    container.$scheduler$(ChoreType.NODE_DIFF, effect, effect, signal);
-                } else {
-                    let effectData = effectSubscriptions[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA];
-                    if (effectData instanceof EffectData) {
-                        const payload = {
-                            ...effectData.data,
-                            $value$: signal
-                        };
-                        container.$scheduler$(ChoreType.NODE_PROP, effect, property, payload);
-                    }
+            if ("string" == typeof prop) {
+                const ctx = tryGetInvokeContext();
+                if (ctx) {
+                    const effectSubscriber = ctx.$effectSubscriber$;
+                    effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
                 }
-            };
-            effects.forEach(scheduleEffect);
-        }
-    };
-    class ComputedSignal extends Signal {
-        $computeQrl$;
-        $invalid$=!0;
-        constructor(container, fn) {
-            super(container, NEEDS_COMPUTATION), this.$computeQrl$ = fn;
+            }
+            return Object.prototype.hasOwnProperty.call(target, prop);
         }
-        $invalidate$() {
-            this.$invalid$ = !0, this.$effects$?.length && this.$computeIfNeeded$() && triggerEffects(this.$container$, this, this.$effects$);
+        ownKeys(target) {
+            const ctx = tryGetInvokeContext();
+            const effectSubscriber = ctx?.$effectSubscriber$;
+            return effectSubscriber && addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber), 
+            Reflect.ownKeys(target);
         }
-        force() {
-            this.$invalid$ = !0, triggerEffects(this.$container$, this, this.$effects$);
+        getOwnPropertyDescriptor(target, prop) {
+            return Array.isArray(target) || "symbol" == typeof prop ? Object.getOwnPropertyDescriptor(target, prop) : {
+                enumerable: !0,
+                configurable: !0
+            };
         }
-        get untrackedValue() {
-            return this.$computeIfNeeded$(), assertFalse(), this.$untrackedValue$;
+    }
+    function addEffect(target, prop, store, effectSubscriber) {
+        const effectsMap = store.$effects$ ||= {};
+        const effects = Object.prototype.hasOwnProperty.call(effectsMap, prop) && effectsMap[prop] || (effectsMap[prop] = []);
+        ensureContainsEffect(effects, effectSubscriber), ensureContains(effectSubscriber, target);
+    }
+    function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
+        target[prop] = value, triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
+    }
+    function getEffects(target, prop, storeEffects) {
+        let effectsToTrigger = storeEffects ? Array.isArray(target) ? Object.values(storeEffects).flatMap((effects => effects)) : storeEffects[prop] : null;
+        const storeArrayValue = storeEffects?.[STORE_ARRAY_PROP];
+        return storeArrayValue && (effectsToTrigger ||= [], effectsToTrigger.push(...storeArrayValue)), 
+        effectsToTrigger;
+    }
+    const useSequentialScope = () => {
+        const iCtx = useInvokeContext();
+        const host = iCtx.$hostElement$;
+        let seq = iCtx.$container$.getHostProp(host, "q:seq");
+        null === seq && (seq = [], iCtx.$container$.setHostProp(host, "q:seq", seq));
+        let seqIdx = iCtx.$container$.getHostProp(host, "q:seqIdx");
+        for (null === seqIdx && (seqIdx = 0), iCtx.$container$.setHostProp(host, "q:seqIdx", seqIdx + 1); seq.length <= seqIdx; ) {
+            seq.push(void 0);
         }
-        $computeIfNeeded$() {
-            if (!this.$invalid$) {
-                return !1;
+        return {
+            val: seq[seqIdx],
+            set: value => seq[seqIdx] = value,
+            i: seqIdx,
+            iCtx
+        };
+    };
+    class Subscriber {
+        $effectDependencies$=null;
+    }
+    function isSubscriber(value) {
+        return value instanceof Subscriber || value instanceof WrappedSignal;
+    }
+    function clearVNodeEffectDependencies(container, value) {
+        vnode_isElementVNode(value) && ensureMaterialized(value);
+        const effects = vnode_getProp(value, "q:subs", container.$getObjectById$);
+        if (effects) {
+            for (let i = effects.length - 1; i >= 0; i--) {
+                clearEffects(effects[i], value) && effects.splice(i, 1);
             }
-            const computeQrl = this.$computeQrl$;
-            throwIfQRLNotResolved(computeQrl);
-            const ctx = tryGetInvokeContext();
-            const previousEffectSubscription = ctx?.$effectSubscriber$;
-            ctx && (ctx.$effectSubscriber$ = [ this, EffectProperty.VNODE ]);
-            try {
-                const untrackedValue = computeQrl.getFn(ctx)();
-                isPromise(untrackedValue) && throwErrorAndStop(`useComputedSignal$ QRL ${computeQrl.dev ? `${computeQrl.dev.file} ` : ""}${computeQrl.$hash$} returned a Promise`), 
-                this.$invalid$ = !1;
-                const didChange = untrackedValue !== this.$untrackedValue$;
-                return didChange && (this.$untrackedValue$ = untrackedValue), didChange;
-            } finally {
-                ctx && (ctx.$effectSubscriber$ = previousEffectSubscription);
+        }
+    }
+    function clearSubscriberEffectDependencies(value) {
+        if (value.$effectDependencies$) {
+            for (let i = value.$effectDependencies$.length - 1; i >= 0; i--) {
+                clearEffects(value.$effectDependencies$[i], value) && value.$effectDependencies$.splice(i, 1);
             }
         }
-        get value() {
-            return super.value;
+    }
+    function clearEffects(subscriber, value) {
+        if (!isSignal(subscriber)) {
+            return !1;
         }
-        set value(_) {
-            throwErrorAndStop("ComputedSignal is read-only");
+        const effectSubscriptions = subscriber.$effects$;
+        const hostElement = subscriber.$hostElement$;
+        hostElement && hostElement === value && (subscriber.$hostElement$ = null);
+        let subscriptionRemoved = !1;
+        if (effectSubscriptions) {
+            for (let i = effectSubscriptions.length - 1; i >= 0; i--) {
+                effectSubscriptions[i][EffectSubscriptionsProp.EFFECT] === value && (effectSubscriptions.splice(i, 1), 
+                subscriptionRemoved = !0);
+            }
         }
-    }
-    class WrappedSignal extends Signal {
-        $args$;
-        $func$;
-        $funcStr$;
-        $invalid$=!0;
-        $effectDependencies$=null;
-        constructor(container, fn, args, fnStr) {
-            super(container, NEEDS_COMPUTATION), this.$args$ = args, this.$func$ = fn, this.$funcStr$ = fnStr;
-        }
-        $invalidate$() {
-            this.$invalid$ = !0, this.$effects$?.length && this.$computeIfNeeded$() && triggerEffects(this.$container$, this, this.$effects$);
-        }
-        force() {
-            this.$invalid$ = !0, triggerEffects(this.$container$, this, this.$effects$);
-        }
-        get untrackedValue() {
-            return this.$computeIfNeeded$(), assertFalse(), this.$untrackedValue$;
-        }
-        $computeIfNeeded$() {
-            if (!this.$invalid$) {
-                return !1;
+        const args = subscriber.$args$;
+        if (args) {
+            for (let i = args.length - 1; i >= 0; i--) {
+                clearEffects(args[i], subscriber);
             }
-            const untrackedValue = trackSignal((() => this.$func$(...this.$args$)), this, EffectProperty.VNODE, this.$container$);
-            const didChange = untrackedValue !== this.$untrackedValue$;
-            return didChange && (this.$untrackedValue$ = untrackedValue), didChange;
-        }
-        get value() {
-            return super.value;
-        }
-        set value(_) {
-            throwErrorAndStop("WrappedSignal is read-only");
         }
+        return subscriptionRemoved;
     }
-    const implicit$FirstArg = fn => function(first, ...rest) {
-        return fn.call(null, dollar(first), ...rest);
-    };
-    const createSignal = value => new Signal(null, value);
-    const createComputedQrl = qrl => (throwIfQRLNotResolved(qrl), new ComputedSignal(null, qrl));
-    const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
-    const useLexicalScope = () => {
-        const context = getInvokeContext();
-        let qrl = context.$qrl$;
-        if (qrl) {
-            assertQrl(qrl), assertDefined();
-        } else {
-            const el = context.$element$;
-            assertDefined();
-            const containerElement = _getQContainerElement(el);
-            assertDefined();
-            qrl = getDomContainer(containerElement).parseQRL(decodeURIComponent(String(context.$url$)));
-        }
-        return qrl.$captureRef$;
-    };
-    const useOn = (event, eventQrl) => {
-        _useOn(createEventName(event, void 0), eventQrl);
-    };
-    const useOnDocument = (event, eventQrl) => {
-        _useOn(createEventName(event, "document"), eventQrl);
-    };
-    const createEventName = (event, eventType) => {
-        const prefix = void 0 !== eventType ? eventType + ":" : "";
-        const map = name => prefix + "on" + name.charAt(0).toUpperCase() + name.substring(1) + "$";
-        return Array.isArray(event) ? event.map(map) : map(event);
-    };
-    const _useOn = (eventName, eventQrl) => {
-        const {isAdded, addEvent} = useOnEventsSequentialScope();
-        isAdded || eventQrl && (Array.isArray(eventName) ? eventName.forEach((event => addEvent(event, eventQrl))) : addEvent(eventName, eventQrl));
-    };
-    const useOnEventsSequentialScope = () => {
-        const iCtx = useInvokeContext();
-        const host = iCtx.$hostElement$;
-        let onMap = iCtx.$container$.getHostProp(host, ":on");
-        null === onMap && (onMap = {}, iCtx.$container$.setHostProp(host, ":on", onMap));
-        let seqIdx = iCtx.$container$.getHostProp(host, ":onIdx");
-        null === seqIdx && (seqIdx = 0), iCtx.$container$.setHostProp(host, ":onIdx", seqIdx + 1);
-        let addedFlags = iCtx.$container$.getHostProp(host, ":onFlags");
-        for (null === addedFlags && (addedFlags = [], iCtx.$container$.setHostProp(host, ":onFlags", addedFlags)); addedFlags.length <= seqIdx; ) {
-            addedFlags.push(!1);
+    const useResourceQrl = (qrl, opts) => {
+        const {val, set, i, iCtx} = useSequentialScope();
+        if (null != val) {
+            return val;
         }
-        return {
-            isAdded: addedFlags[seqIdx],
-            addEvent: (eventName, eventQrl) => {
-                addedFlags[seqIdx] = !0;
-                let events = onMap[eventName];
-                events || (onMap[eventName] = events = []), events.push(eventQrl);
-            }
-        };
+        assertQrl(qrl);
+        const container = iCtx.$container$;
+        const resource = createResourceReturn(container, opts);
+        const task = new Task(TaskFlags.DIRTY | TaskFlags.RESOURCE, i, iCtx.$hostElement$, qrl, resource, null);
+        return runResource(task, container, iCtx.$hostElement$), set(resource), resource;
     };
-    var TaskFlags;
-    !function(TaskFlags) {
-        TaskFlags[TaskFlags.VISIBLE_TASK = 1] = "VISIBLE_TASK", TaskFlags[TaskFlags.TASK = 2] = "TASK", 
-        TaskFlags[TaskFlags.RESOURCE = 4] = "RESOURCE", TaskFlags[TaskFlags.DIRTY = 8] = "DIRTY";
-    }(TaskFlags || (TaskFlags = {}));
-    const useTaskQrl = (qrl, opts) => {
-        const {val, set, iCtx, i} = useSequentialScope();
-        if (val) {
-            return;
-        }
-        assertQrl(qrl), set(1);
-        const host = iCtx.$hostElement$;
-        const task = new Task(TaskFlags.DIRTY | TaskFlags.TASK, i, iCtx.$hostElement$, qrl, void 0, null);
-        set(task);
-        const result = runTask(task, iCtx.$container$, host);
-        if (isPromise(result)) {
-            throw result;
-        }
-        qrl.$resolveLazy$(iCtx.$element$), isServerPlatform() && useRunTask(task, opts?.eagerness);
+    const createResourceReturn = (container, opts, initialPromise) => {
+        const result = (opts => ({
+            __brand: "resource",
+            value: void 0,
+            loading: !isServerPlatform(),
+            _resolved: void 0,
+            _error: void 0,
+            _state: "pending",
+            _timeout: opts?.timeout ?? -1,
+            _cache: 0
+        }))(opts);
+        return result.value = initialPromise, createStore(container, result, StoreFlags.RECURSIVE);
     };
-    const runTask = (task, container, host) => {
+    const isResourceReturn = obj => isObject(obj) && "resource" === (getStoreTarget(obj) || obj).__brand;
+    const runResource = (task, container, host) => {
         task.$flags$ &= ~TaskFlags.DIRTY, cleanupTask(task);
-        const iCtx = newInvokeContext(container.$locale$, host, void 0, "qTask");
+        const iCtx = newInvokeContext(container.$locale$, host, void 0, "qResource");
         iCtx.$container$ = container;
         const taskFn = task.$qrl$.getFn(iCtx, (() => clearSubscriberEffectDependencies(task)));
-        const handleError = reason => container.handleError(reason, host);
-        let cleanupFns = null;
-        const cleanup = fn => {
-            "function" == typeof fn && (cleanupFns || (cleanupFns = [], task.$destroy$ = noSerialize((() => {
-                task.$destroy$ = null, cleanupFns.forEach((fn => {
-                    try {
-                        fn();
-                    } catch (err) {
-                        handleError(err);
-                    }
-                }));
-            }))), cleanupFns.push(fn));
-        };
-        const taskApi = {
+        const resource = task.$state$;
+        assertDefined();
+        const cleanups = [];
+        task.$destroy$ = noSerialize((() => {
+            cleanups.forEach((fn => {
+                try {
+                    fn();
+                } catch (err) {
+                    container.handleError(err, host);
+                }
+            })), done = !0;
+        }));
+        const resourceTarget = unwrapStore(resource);
+        const opts = {
             track: (obj, prop) => {
                 const ctx = newInvokeContext();
                 return ctx.$effectSubscriber$ = [ task, EffectProperty.COMPONENT ], ctx.$container$ = container, 
                 invoke(ctx, (() => isFunction(obj) ? obj() : prop ? obj[prop] : isSignal(obj) ? obj.value : obj));
             },
-            cleanup
+            cleanup(fn) {
+                "function" == typeof fn && cleanups.push(fn);
+            },
+            cache(policy) {
+                let milliseconds = 0;
+                milliseconds = "immutable" === policy ? 1 / 0 : policy, resource._cache = milliseconds;
+            },
+            previous: resourceTarget._resolved
         };
-        return safeCall((() => taskFn(taskApi)), cleanup, (err => isPromise(err) ? err.then((() => runTask(task, container, host))) : handleError(err)));
-    };
-    const cleanupTask = task => {
-        const destroy = task.$destroy$;
-        if (destroy) {
-            task.$destroy$ = null;
-            try {
-                destroy();
-            } catch (err) {
-                logError(err);
+        let resolve;
+        let reject;
+        let done = !1;
+        const setState = (resolved, value) => !done && (done = !0, resolved ? (done = !0, 
+        resource.loading = !1, resource._state = "resolved", resource._resolved = value, 
+        resource._error = void 0, resolve(value)) : (done = !0, resource.loading = !1, resource._state = "rejected", 
+        resource._error = value, reject(value)), !0);
+        cleanups.push((() => {
+            if (!0 === untrack((() => resource.loading))) {
+                const value = untrack((() => resource._resolved));
+                setState(!0, value);
             }
-        }
-    };
-    const useRunTask = (task, eagerness) => {
-        "visible" === eagerness || "intersection-observer" === eagerness ? useOn("qvisible", getTaskHandlerQrl(task)) : "load" === eagerness || "document-ready" === eagerness ? useOnDocument("qinit", getTaskHandlerQrl(task)) : "idle" !== eagerness && "document-idle" !== eagerness || useOnDocument("qidle", getTaskHandlerQrl(task));
-    };
-    const getTaskHandlerQrl = task => {
-        const taskQrl = task.$qrl$;
-        const taskHandler = createQRL(taskQrl.$chunk$, "_hW", _hW, null, null, [ task ], taskQrl.$symbol$);
-        return taskQrl.dev && (taskHandler.dev = taskQrl.dev), taskHandler;
-    };
-    class Task extends Subscriber {
-        $flags$;
-        $index$;
-        $el$;
-        $qrl$;
-        $state$;
-        $destroy$;
-        constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
-            super(), this.$flags$ = $flags$, this.$index$ = $index$, this.$el$ = $el$, this.$qrl$ = $qrl$, 
-            this.$state$ = $state$, this.$destroy$ = $destroy$;
-        }
-    }
-    const isTask = value => value instanceof Task;
-    const _hW = () => {
-        const [task] = useLexicalScope();
-        getDomContainer(task.$el$).$scheduler$(task.$flags$ & TaskFlags.VISIBLE_TASK ? ChoreType.VISIBLE : ChoreType.TASK, task);
-    };
-    const STORE_TARGET = Symbol("store.target");
-    const STORE_HANDLER = Symbol("store.handler");
-    const STORE_ARRAY_PROP = Symbol("store.array");
-    var StoreFlags;
-    !function(StoreFlags) {
-        StoreFlags[StoreFlags.NONE = 0] = "NONE", StoreFlags[StoreFlags.RECURSIVE = 1] = "RECURSIVE", 
-        StoreFlags[StoreFlags.IMMUTABLE = 2] = "IMMUTABLE";
-    }(StoreFlags || (StoreFlags = {}));
-    const getStoreHandler = value => value[STORE_HANDLER];
-    const getStoreTarget = value => value?.[STORE_TARGET] || null;
-    const unwrapStore = value => getStoreTarget(value) || value;
-    const isStore = value => STORE_TARGET in value;
-    function createStore(container, obj, flags) {
-        return new Proxy(obj, new StoreHandler(flags, container || null));
-    }
-    const getOrCreateStore = (obj, flags, container) => {
-        if (isSerializableObject(obj) && container) {
-            let store = container.$storeProxyMap$.get(obj);
-            return store || (store = createStore(container, obj, flags), container.$storeProxyMap$.set(obj, store)), 
-            store;
-        }
-        return obj;
-    };
-    class StoreHandler {
-        $flags$;
-        $container$;
-        $effects$=null;
-        constructor($flags$, $container$) {
-            this.$flags$ = $flags$, this.$container$ = $container$;
-        }
-        toString() {
-            return "[Store]";
-        }
-        get(target, prop) {
-            if ("symbol" == typeof prop) {
-                return prop === STORE_TARGET ? target : prop === STORE_HANDLER ? this : target[prop];
-            }
-            const ctx = tryGetInvokeContext();
-            const value = target[prop];
-            if (ctx) {
-                if (null === this.$container$) {
-                    if (!ctx.$container$) {
-                        return value;
-                    }
-                    this.$container$ = ctx.$container$;
-                } else {
-                    assertTrue();
-                }
-                const effectSubscriber = ctx.$effectSubscriber$;
-                effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
-            }
-            if ("toString" === prop && value === Object.prototype.toString) {
-                return this.toString;
-            }
-            return this.$flags$ & StoreFlags.RECURSIVE && "object" == typeof value && null !== value && !Object.isFrozen(value) && !isStore(value) && !Object.isFrozen(target) ? getOrCreateStore(value, this.$flags$, this.$container$) : value;
-        }
-        set(target, prop, value) {
-            if (target = unwrapDeserializerProxy(target), "symbol" == typeof prop) {
-                return target[prop] = value, !0;
-            }
-            const newValue = this.$flags$ & StoreFlags.RECURSIVE ? unwrapStore(value) : value;
-            if (prop in target) {
-                newValue !== target[prop] && setNewValueAndTriggerEffects(prop, newValue, target, this);
-            } else {
-                setNewValueAndTriggerEffects(prop, newValue, target, this);
-            }
-            return !0;
-        }
-        deleteProperty(target, prop) {
-            return "string" == typeof prop && delete target[prop] && (triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$)), 
-            !0);
-        }
-        has(target, prop) {
-            if (prop === STORE_TARGET) {
-                return !0;
-            }
-            if ("string" == typeof prop) {
-                const ctx = tryGetInvokeContext();
-                if (ctx) {
-                    const effectSubscriber = ctx.$effectSubscriber$;
-                    effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
-                }
-            }
-            return Object.prototype.hasOwnProperty.call(target, prop);
-        }
-        ownKeys(target) {
-            const ctx = tryGetInvokeContext();
-            const effectSubscriber = ctx?.$effectSubscriber$;
-            return effectSubscriber && addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber), 
-            Reflect.ownKeys(target);
-        }
-        getOwnPropertyDescriptor(target, prop) {
-            return Array.isArray(target) || "symbol" == typeof prop ? Object.getOwnPropertyDescriptor(target, prop) : {
-                enumerable: !0,
-                configurable: !0
-            };
-        }
-    }
-    function addEffect(target, prop, store, effectSubscriber) {
-        const effectsMap = store.$effects$ ||= {};
-        const effects = Object.prototype.hasOwnProperty.call(effectsMap, prop) && effectsMap[prop] || (effectsMap[prop] = []);
-        ensureContainsEffect(effects, effectSubscriber), ensureContains(effectSubscriber, target);
-    }
-    function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
-        target[prop] = value, triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
-    }
-    function getEffects(target, prop, storeEffects) {
-        let effectsToTrigger = storeEffects ? Array.isArray(target) ? Object.values(storeEffects).flatMap((effects => effects)) : storeEffects[prop] : null;
-        const storeArrayValue = storeEffects?.[STORE_ARRAY_PROP];
-        return storeArrayValue && (effectsToTrigger ||= [], effectsToTrigger.push(...storeArrayValue)), 
-        effectsToTrigger;
-    }
-    const useResourceQrl = (qrl, opts) => {
-        const {val, set, i, iCtx} = useSequentialScope();
-        if (null != val) {
-            return val;
-        }
-        assertQrl(qrl);
-        const container = iCtx.$container$;
-        const resource = createResourceReturn(container, opts);
-        const task = new Task(TaskFlags.DIRTY | TaskFlags.RESOURCE, i, iCtx.$hostElement$, qrl, resource, null);
-        return runResource(task, container, iCtx.$hostElement$), set(resource), resource;
-    };
-    const createResourceReturn = (container, opts, initialPromise) => {
-        const result = (opts => ({
-            __brand: "resource",
-            value: void 0,
-            loading: !isServerPlatform(),
-            _resolved: void 0,
-            _error: void 0,
-            _state: "pending",
-            _timeout: opts?.timeout ?? -1,
-            _cache: 0
-        }))(opts);
-        return result.value = initialPromise, createStore(container, result, StoreFlags.RECURSIVE);
-    };
-    const isResourceReturn = obj => isObject(obj) && "resource" === (getStoreTarget(obj) || obj).__brand;
-    const runResource = (task, container, host) => {
-        task.$flags$ &= ~TaskFlags.DIRTY, cleanupTask(task);
-        const iCtx = newInvokeContext(container.$locale$, host, void 0, "qResource");
-        iCtx.$container$ = container;
-        const taskFn = task.$qrl$.getFn(iCtx, (() => clearSubscriberEffectDependencies(task)));
-        const resource = task.$state$;
-        assertDefined();
-        const cleanups = [];
-        task.$destroy$ = noSerialize((() => {
-            cleanups.forEach((fn => {
-                try {
-                    fn();
-                } catch (err) {
-                    container.handleError(err, host);
-                }
-            })), done = !0;
-        }));
-        const resourceTarget = unwrapStore(resource);
-        const opts = {
-            track: (obj, prop) => {
-                const ctx = newInvokeContext();
-                return ctx.$effectSubscriber$ = [ task, EffectProperty.COMPONENT ], ctx.$container$ = container, 
-                invoke(ctx, (() => isFunction(obj) ? obj() : prop ? obj[prop] : isSignal(obj) ? obj.value : obj));
-            },
-            cleanup(fn) {
-                "function" == typeof fn && cleanups.push(fn);
-            },
-            cache(policy) {
-                let milliseconds = 0;
-                milliseconds = "immutable" === policy ? 1 / 0 : policy, resource._cache = milliseconds;
-            },
-            previous: resourceTarget._resolved
-        };
-        let resolve;
-        let reject;
-        let done = !1;
-        const setState = (resolved, value) => !done && (done = !0, resolved ? (done = !0, 
-        resource.loading = !1, resource._state = "resolved", resource._resolved = value, 
-        resource._error = void 0, resolve(value)) : (done = !0, resource.loading = !1, resource._state = "rejected", 
-        resource._error = value, reject(value)), !0);
-        cleanups.push((() => {
-            if (!0 === untrack((() => resource.loading))) {
-                const value = untrack((() => resource._resolved));
-                setState(!0, value);
-            }
-        })), invoke(iCtx, (() => {
-            resource._state = "pending", resource.loading = !isServerPlatform();
-            (resource.value = new Promise(((r, re) => {
-                resolve = r, reject = re;
-            }))).catch(ignoreErrorToPreventNodeFromCrashing);
-        }));
-        const promise = safeCall((() => Promise.resolve(taskFn(opts))), (value => {
-            setState(!0, value);
-        }), (err => {
-            if (isPromise(err)) {
-                return err.then((() => runResource(task, container, host)));
+        })), invoke(iCtx, (() => {
+            resource._state = "pending", resource.loading = !isServerPlatform();
+            (resource.value = new Promise(((r, re) => {
+                resolve = r, reject = re;
+            }))).catch(ignoreErrorToPreventNodeFromCrashing);
+        }));
+        const promise = safeCall((() => Promise.resolve(taskFn(opts))), (value => {
+            setState(!0, value);
+        }), (err => {
+            if (isPromise(err)) {
+                return err.then((() => runResource(task, container, host)));
             }
             setState(!1, err);
         }));
@@ -1083,6 +753,41 @@
             elementNamespaceFlag
         };
     }
+    const useOn = (event, eventQrl) => {
+        _useOn(createEventName(event, void 0), eventQrl);
+    };
+    const useOnDocument = (event, eventQrl) => {
+        _useOn(createEventName(event, "document"), eventQrl);
+    };
+    const createEventName = (event, eventType) => {
+        const prefix = void 0 !== eventType ? eventType + ":" : "";
+        const map = name => prefix + "on" + name.charAt(0).toUpperCase() + name.substring(1) + "$";
+        return Array.isArray(event) ? event.map(map) : map(event);
+    };
+    const _useOn = (eventName, eventQrl) => {
+        const {isAdded, addEvent} = useOnEventsSequentialScope();
+        isAdded || eventQrl && (Array.isArray(eventName) ? eventName.forEach((event => addEvent(event, eventQrl))) : addEvent(eventName, eventQrl));
+    };
+    const useOnEventsSequentialScope = () => {
+        const iCtx = useInvokeContext();
+        const host = iCtx.$hostElement$;
+        let onMap = iCtx.$container$.getHostProp(host, ":on");
+        null === onMap && (onMap = {}, iCtx.$container$.setHostProp(host, ":on", onMap));
+        let seqIdx = iCtx.$container$.getHostProp(host, ":onIdx");
+        null === seqIdx && (seqIdx = 0), iCtx.$container$.setHostProp(host, ":onIdx", seqIdx + 1);
+        let addedFlags = iCtx.$container$.getHostProp(host, ":onFlags");
+        for (null === addedFlags && (addedFlags = [], iCtx.$container$.setHostProp(host, ":onFlags", addedFlags)); addedFlags.length <= seqIdx; ) {
+            addedFlags.push(!1);
+        }
+        return {
+            isAdded: addedFlags[seqIdx],
+            addEvent: (eventName, eventQrl) => {
+                addedFlags[seqIdx] = !0;
+                let events = onMap[eventName];
+                events || (onMap[eventName] = events = []), events.push(eventQrl);
+            }
+        };
+    };
     const executeComponent = (container, renderHost, subscriptionHost, componentQRL, props) => {
         const iCtx = newInvokeContext(container.$locale$, subscriptionHost, void 0, "qRender");
         let componentFn;
@@ -1103,7 +808,8 @@
         }
         const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall((() => (isInlineComponent || (container.setHostProp(renderHost, "q:seqIdx", null), 
         container.setHostProp(renderHost, ":onIdx", null), container.getHostProp(renderHost, "q:props") !== props && container.setHostProp(renderHost, "q:props", props)), 
-        vnode_isVNode(renderHost) && clearVNodeEffectDependencies(renderHost), componentFn(props))), (jsx => {
+        vnode_isVNode(renderHost) && clearVNodeEffectDependencies(container, renderHost), 
+        componentFn(props))), (jsx => {
             const useOnEvents = container.getHostProp(renderHost, ":on");
             return useOnEvents ? maybeThen(function(jsx, useOnEvents) {
                 const jsxElement = findFirstStringJSX(jsx);
@@ -1164,6 +870,9 @@
         }
         return Array.isArray(jsx) && jsx.length ? addScriptNodeForInvisibleComponents(jsx[0]) : null;
     }
+    function isSlotProp(prop) {
+        return !prop.startsWith("q:") && !prop.startsWith(":");
+    }
     function escapeHTML(html) {
         let escapedHTML = "";
         const length = html.length;
@@ -1226,8 +935,8 @@
                         if (Array.isArray(jsxValue)) {
                             descend(jsxValue, !1);
                         } else if (isSignal(jsxValue)) {
-                            vCurrent && clearVNodeEffectDependencies(vCurrent), expectVirtual(VirtualType.WrappedSignal, null), 
-                            descend(trackSignal((() => jsxValue.value), vNewNode || vCurrent, EffectProperty.VNODE, container), !0);
+                            vCurrent && clearVNodeEffectDependencies(container, vCurrent), expectVirtual(VirtualType.WrappedSignal, null), 
+                            descend(trackSignalAndAssignHost(jsxValue, vNewNode || vCurrent, EffectProperty.VNODE, container), !0);
                         } else if (isPromise(jsxValue)) {
                             expectVirtual(VirtualType.Awaited, null), asyncQueue.push(jsxValue, vNewNode || vCurrent);
                         } else if (isJSXNode(jsxValue)) {
@@ -1320,7 +1029,7 @@
                 if (constProps && "object" == typeof constProps && "name" in constProps) {
                     const constValue = constProps.name;
                     if (vHost && constValue instanceof WrappedSignal) {
-                        return trackSignal((() => constValue.value), vHost, EffectProperty.COMPONENT, container);
+                        return trackSignalAndAssignHost(constValue, vHost, EffectProperty.COMPONENT, container);
                     }
                 }
                 return directGetPropsProxyProp(jsxNode, "name") || "";
@@ -1379,18 +1088,20 @@
                             }
                         }
                         if (isSignal(value)) {
-                            const signalData = new EffectData({
+                            const signalData = new EffectPropData({
                                 $scopedStyleIdPrefix$: scopedStyleIdPrefix,
                                 $isConst$: !0
                             });
-                            value = trackSignal((() => value.value), vNewNode, key, container, signalData);
+                            value = trackSignalAndAssignHost(value, vNewNode, key, container, signalData);
                         }
                         if ("dangerouslySetInnerHTML" !== key) {
                             if ("textarea" !== elementName || "value" !== key) {
                                 value = serializeAttribute(key, value, scopedStyleIdPrefix), null != value && element.setAttribute(key, String(value));
                             } else {
                                 if ("string" != typeof value) {
-                                    build.isDev && throwErrorAndStop("The value of the textarea must be a string");
+                                    if (build.isDev) {
+                                        throw qError(QError.wrongTextareaValue);
+                                    }
                                     continue;
                                 }
                                 element.value = escapeHTML(value);
@@ -1457,7 +1168,7 @@
                     htmlEvent && record(htmlEvent, ""), eventName && registerQwikLoaderEvent(eventName);
                 };
                 for (;null !== srcKey || null !== dstKey; ) {
-                    if (dstKey?.startsWith(HANDLER_PREFIX) || "q:key" == dstKey) {
+                    if (dstKey?.startsWith(HANDLER_PREFIX) || dstKey?.startsWith("q:")) {
                         dstIdx++, dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
                     } else if (null == srcKey) {
                         dstKey && isHtmlAttributeAnEventName(dstKey) ? (patchEventDispatch = !0, dstIdx++) : (record(dstKey, null), 
@@ -1543,8 +1254,8 @@
                         if (!src || !dst) {
                             return !0;
                         }
-                        let srcKeys = removeChildrenKey(Object.keys(src));
-                        let dstKeys = removeChildrenKey(Object.keys(dst));
+                        let srcKeys = removePropsKeys(Object.keys(src), [ "children", "q:subs" ]);
+                        let dstKeys = removePropsKeys(Object.keys(dst), [ "children", "q:subs" ]);
                         if (srcKeys.length !== dstKeys.length) {
                             return !0;
                         }
@@ -1560,21 +1271,22 @@
                     }(jsxProps, vNodeProps), shouldRender && (host[VNodeProps.flags] &= ~VNodeFlags.Deleted, 
                     container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, jsxProps));
                 }
-                null != jsxNode.children && function(children, host) {
-                    if (Array.isArray(children) || (children = [ children ]), children.length) {
-                        const createProjectionJSXNode = slotName => new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
-                        const projections = [];
-                        if (host) {
-                            for (let i = vnode_getPropStartIndex(host); i < host.length; i += 2) {
-                                const prop = host[i];
-                                if (isSlotProp(prop)) {
-                                    const slotName = prop;
-                                    projections.push(slotName), projections.push(createProjectionJSXNode(slotName));
-                                }
+                !function(children, host) {
+                    const projectionChildren = Array.isArray(children) ? children : [ children ];
+                    const createProjectionJSXNode = slotName => new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
+                    const projections = [];
+                    if (host) {
+                        for (let i = vnode_getPropStartIndex(host); i < host.length; i += 2) {
+                            const prop = host[i];
+                            if (isSlotProp(prop)) {
+                                const slotName = prop;
+                                projections.push(slotName), projections.push(createProjectionJSXNode(slotName));
                             }
                         }
-                        for (let i = 0; i < children.length; i++) {
-                            const child = children[i];
+                    }
+                    if (0 !== projections.length || null != children) {
+                        for (let i = 0; i < projectionChildren.length; i++) {
+                            const child = projectionChildren[i];
                             const slotName = String(isJSXNode(child) && directGetPropsProxyProp(child, QSlot) || "");
                             const idx = mapApp_findIndx(projections, slotName, 0);
                             let jsxBucket;
@@ -1606,7 +1318,7 @@
             }
         }
         function insertNewComponent(host, componentQRL, jsxProps) {
-            host && clearVNodeEffectDependencies(host), vnode_insertBefore(journal, vParent, vNewNode = vnode_newVirtual(), vCurrent && getInsertBefore());
+            host && clearVNodeEffectDependencies(container, host), vnode_insertBefore(journal, vParent, vNewNode = vnode_newVirtual(), vCurrent && getInsertBefore());
             const jsxNode = jsxValue;
             build.isDev && vnode_setProp(vNewNode, "q:type", VirtualType.Component), container.setHostProp(vNewNode, "q:renderFn", componentQRL), 
             container.setHostProp(vNewNode, "q:props", jsxProps), container.setHostProp(vNewNode, "q:key", jsxNode.key);
@@ -1631,9 +1343,12 @@
         return qrl ? qrl.$hash$ : null;
     }
     function Projection() {}
-    function removeChildrenKey(keys) {
-        const childrenIdx = keys.indexOf("children");
-        return -1 !== childrenIdx && keys.splice(childrenIdx, 1), keys;
+    function removePropsKeys(keys, propKeys) {
+        for (let i = propKeys.length - 1; i >= 0; i--) {
+            const propIdx = keys.indexOf(propKeys[i]);
+            -1 !== propIdx && keys.splice(propIdx, 1);
+        }
+        return keys;
     }
     function cleanup(container, vNode) {
         let vCursor = vNode;
@@ -1644,8 +1359,8 @@
         for (;;) {
             const type = vCursor[VNodeProps.flags];
             if (type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) {
-                if (type & VNodeFlags.Virtual) {
-                    clearVNodeEffectDependencies(vCursor), markVNodeAsDeleted(vCursor);
+                if (clearVNodeEffectDependencies(container, vCursor), markVNodeAsDeleted(vCursor), 
+                type & VNodeFlags.Virtual) {
                     const seq = container.getHostProp(vCursor, "q:seq");
                     if (seq) {
                         for (let i = 0; i < seq.length; i++) {
@@ -1726,26 +1441,33 @@
     const HANDLER_PREFIX = ":";
     let count = 0;
     var SiblingsArray;
-    var ChoreType;
     !function(SiblingsArray) {
         SiblingsArray[SiblingsArray.Name = 0] = "Name", SiblingsArray[SiblingsArray.Key = 1] = "Key", 
         SiblingsArray[SiblingsArray.VNode = 2] = "VNode", SiblingsArray[SiblingsArray.Size = 3] = "Size", 
         SiblingsArray[SiblingsArray.NextVNode = 5] = "NextVNode";
-    }(SiblingsArray || (SiblingsArray = {})), function(ChoreType) {
-        ChoreType[ChoreType.MACRO = 112] = "MACRO", ChoreType[ChoreType.MICRO = 15] = "MICRO", 
+    }(SiblingsArray || (SiblingsArray = {}));
+    const implicit$FirstArg = fn => function(first, ...rest) {
+        return fn.call(null, dollar(first), ...rest);
+    };
+    const createSignal = value => new Signal(null, value);
+    const createComputedQrl = qrl => (throwIfQRLNotResolved(qrl), new ComputedSignal(null, qrl));
+    const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
+    var ChoreType;
+    !function(ChoreType) {
+        ChoreType[ChoreType.MACRO = 240] = "MACRO", ChoreType[ChoreType.MICRO = 15] = "MICRO", 
         ChoreType[ChoreType.QRL_RESOLVE = 1] = "QRL_RESOLVE", ChoreType[ChoreType.RESOURCE = 2] = "RESOURCE", 
         ChoreType[ChoreType.TASK = 3] = "TASK", ChoreType[ChoreType.NODE_DIFF = 4] = "NODE_DIFF", 
         ChoreType[ChoreType.NODE_PROP = 5] = "NODE_PROP", ChoreType[ChoreType.COMPONENT_SSR = 6] = "COMPONENT_SSR", 
-        ChoreType[ChoreType.COMPONENT = 7] = "COMPONENT", ChoreType[ChoreType.WAIT_FOR_COMPONENTS = 16] = "WAIT_FOR_COMPONENTS", 
-        ChoreType[ChoreType.JOURNAL_FLUSH = 48] = "JOURNAL_FLUSH", ChoreType[ChoreType.VISIBLE = 64] = "VISIBLE", 
-        ChoreType[ChoreType.CLEANUP_VISIBLE = 80] = "CLEANUP_VISIBLE", ChoreType[ChoreType.WAIT_FOR_ALL = 127] = "WAIT_FOR_ALL";
+        ChoreType[ChoreType.COMPONENT = 7] = "COMPONENT", ChoreType[ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS = 8] = "RECOMPUTE_AND_SCHEDULE_EFFECTS", 
+        ChoreType[ChoreType.JOURNAL_FLUSH = 16] = "JOURNAL_FLUSH", ChoreType[ChoreType.VISIBLE = 32] = "VISIBLE", 
+        ChoreType[ChoreType.CLEANUP_VISIBLE = 48] = "CLEANUP_VISIBLE", ChoreType[ChoreType.WAIT_FOR_ALL = 255] = "WAIT_FOR_ALL";
     }(ChoreType || (ChoreType = {}));
     const createScheduler = (container, scheduleDrain, journalFlush) => {
         const choreQueue = [];
         let currentChore = null;
         let journalFlushScheduled = !1;
         return function schedule(type, hostOrTask = null, targetOrQrl = null, payload = null) {
-            const runLater = type !== ChoreType.WAIT_FOR_ALL && type !== ChoreType.WAIT_FOR_COMPONENTS && type !== ChoreType.COMPONENT_SSR;
+            const runLater = type !== ChoreType.WAIT_FOR_ALL && type !== ChoreType.COMPONENT_SSR;
             const isTask = type === ChoreType.TASK || type === ChoreType.VISIBLE || type === ChoreType.RESOURCE || type === ChoreType.CLEANUP_VISIBLE;
             isTask && (hostOrTask.$flags$ |= TaskFlags.DIRTY);
             let chore = {
@@ -1824,7 +1546,13 @@
 
               case ChoreType.COMPONENT:
               case ChoreType.COMPONENT_SSR:
-                returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => chore.$type$ === ChoreType.COMPONENT ? maybeThen(container.processJsx(host, jsx), (() => jsx)) : jsx), (err => container.handleError(err, host)));
+                returnValue = safeCall((() => executeComponent(container, host, host, chore.$target$, chore.$payload$)), (jsx => {
+                    if (chore.$type$ === ChoreType.COMPONENT) {
+                        const styleScopedId = container.getHostProp(host, "q:sstyle");
+                        return vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId));
+                    }
+                    return jsx;
+                }), (err => container.handleError(err, host)));
                 break;
 
               case ChoreType.RESOURCE:
@@ -1869,6 +1597,19 @@
                     returnValue = target.resolved ? null : target.resolve();
                     break;
                 }
+
+              case ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS:
+                {
+                    const target = chore.$target$;
+                    const forceRunEffects = target.$forceRunEffects$;
+                    if (target.$forceRunEffects$ = !1, !target.$effects$?.length) {
+                        break;
+                    }
+                    returnValue = retryOnPromise((() => {
+                        (target.$computeIfNeeded$() || forceRunEffects) && triggerEffects(container, target, target.$effects$);
+                    }));
+                    break;
+                }
             }
             return thenFn = value => (currentChore && (currentChore.$executed$ = !0, currentChore.$resolve$?.(value)), 
             currentChore = null, chore.$returnValue$ = value), isPromise(valueOrPromise = returnValue) ? valueOrPromise.then(thenFn) : thenFn(valueOrPromise);
@@ -1890,8 +1631,10 @@
             if (aHost !== bHost && null !== aHost && null !== bHost) {
                 if (!vnode_isVNode(aHost) || !vnode_isVNode(bHost)) {
                     const errorMessage = `SERVER: during HTML streaming, re-running tasks on a different host is not allowed.\n          You are attempting to change a state that has already been streamed to the client.\n          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).\n          Problematic Node: ${aHost.toString()}`;
-                    return shouldThrowOnHostMismatch && throwErrorAndStop(errorMessage), logWarn(errorMessage), 
-                    null;
+                    if (shouldThrowOnHostMismatch) {
+                        throw qError(QError.serverHostMismatch, [ errorMessage ]);
+                    }
+                    return logWarn(errorMessage), null;
                 }
                 {
                     const hostDiff = vnode_documentPosition(aHost, bHost);
@@ -1908,460 +1651,338 @@
             if (0 !== idxDiff) {
                 return idxDiff;
             }
-            if (a.$target$ !== b.$target$ && (a.$type$ === ChoreType.QRL_RESOLVE && b.$type$ === ChoreType.QRL_RESOLVE || a.$type$ === ChoreType.NODE_PROP && b.$type$ === ChoreType.NODE_PROP)) {
+            if (a.$target$ !== b.$target$ && (a.$type$ === ChoreType.QRL_RESOLVE && b.$type$ === ChoreType.QRL_RESOLVE || a.$type$ === ChoreType.NODE_PROP && b.$type$ === ChoreType.NODE_PROP || a.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS && b.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS)) {
                 return 1;
             }
         }
         return 0;
     }
-    const version = "2.0.0-alpha.2-dev+58b6f8d";
-    class _SharedContainer {
-        $version$;
-        $scheduler$;
-        $storeProxyMap$;
-        $locale$;
-        $getObjectById$;
-        $serverData$;
-        $currentUniqueId$=0;
-        $instanceHash$=null;
-        constructor(scheduleDrain, journalFlush, serverData, locale) {
-            this.$serverData$ = serverData, this.$locale$ = locale, this.$version$ = version, 
-            this.$storeProxyMap$ = new WeakMap, this.$getObjectById$ = () => {
-                throw Error("Not implemented");
-            }, this.$scheduler$ = createScheduler(this, scheduleDrain, journalFlush);
+    const useLexicalScope = () => {
+        const context = getInvokeContext();
+        let qrl = context.$qrl$;
+        if (qrl) {
+            assertQrl(qrl), assertDefined();
+        } else {
+            const el = context.$element$;
+            assertDefined();
+            const containerElement = _getQContainerElement(el);
+            assertDefined();
+            qrl = getDomContainer(containerElement).parseQRL(decodeURIComponent(String(context.$url$)));
         }
-        trackSignalValue(signal, subscriber, property, data) {
-            return trackSignal((() => signal.value), subscriber, property, this, data);
+        return qrl.$captureRef$;
+    };
+    var TaskFlags;
+    !function(TaskFlags) {
+        TaskFlags[TaskFlags.VISIBLE_TASK = 1] = "VISIBLE_TASK", TaskFlags[TaskFlags.TASK = 2] = "TASK", 
+        TaskFlags[TaskFlags.RESOURCE = 4] = "RESOURCE", TaskFlags[TaskFlags.DIRTY = 8] = "DIRTY";
+    }(TaskFlags || (TaskFlags = {}));
+    const useTaskQrl = (qrl, opts) => {
+        const {val, set, iCtx, i} = useSequentialScope();
+        if (val) {
+            return;
         }
-        serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
-            return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
+        assertQrl(qrl), set(1);
+        const host = iCtx.$hostElement$;
+        const task = new Task(TaskFlags.DIRTY | TaskFlags.TASK, i, iCtx.$hostElement$, qrl, void 0, null);
+        set(task);
+        const result = runTask(task, iCtx.$container$, host);
+        if (isPromise(result)) {
+            throw result;
+        }
+        qrl.$resolveLazy$(iCtx.$element$), isServerPlatform() && useRunTask(task, opts?.eagerness);
+    };
+    const runTask = (task, container, host) => {
+        task.$flags$ &= ~TaskFlags.DIRTY, cleanupTask(task);
+        const iCtx = newInvokeContext(container.$locale$, host, void 0, "qTask");
+        iCtx.$container$ = container;
+        const taskFn = task.$qrl$.getFn(iCtx, (() => clearSubscriberEffectDependencies(task)));
+        const handleError = reason => container.handleError(reason, host);
+        let cleanupFns = null;
+        const cleanup = fn => {
+            "function" == typeof fn && (cleanupFns || (cleanupFns = [], task.$destroy$ = noSerialize((() => {
+                task.$destroy$ = null, cleanupFns.forEach((fn => {
+                    try {
+                        fn();
+                    } catch (err) {
+                        handleError(err);
+                    }
+                }));
+            }))), cleanupFns.push(fn));
+        };
+        const taskApi = {
+            track: (obj, prop) => {
+                const ctx = newInvokeContext();
+                return ctx.$effectSubscriber$ = [ task, EffectProperty.COMPONENT ], ctx.$container$ = container, 
+                invoke(ctx, (() => isFunction(obj) ? obj() : prop ? obj[prop] : isSignal(obj) ? obj.value : obj));
+            },
+            cleanup
+        };
+        return safeCall((() => taskFn(taskApi)), cleanup, (err => isPromise(err) ? err.then((() => runTask(task, container, host))) : handleError(err)));
+    };
+    const cleanupTask = task => {
+        const destroy = task.$destroy$;
+        if (destroy) {
+            task.$destroy$ = null;
+            try {
+                destroy();
+            } catch (err) {
+                ((message, ...optionalParams) => {
+                    createAndLogError(!1, message, ...optionalParams);
+                })(err);
+            }
+        }
+    };
+    const useRunTask = (task, eagerness) => {
+        "visible" === eagerness || "intersection-observer" === eagerness ? useOn("qvisible", getTaskHandlerQrl(task)) : "load" === eagerness || "document-ready" === eagerness ? useOnDocument("qinit", getTaskHandlerQrl(task)) : "idle" !== eagerness && "document-idle" !== eagerness || useOnDocument("qidle", getTaskHandlerQrl(task));
+    };
+    const getTaskHandlerQrl = task => {
+        const taskQrl = task.$qrl$;
+        const taskHandler = createQRL(taskQrl.$chunk$, "_hW", _hW, null, null, [ task ], taskQrl.$symbol$);
+        return taskQrl.dev && (taskHandler.dev = taskQrl.dev), taskHandler;
+    };
+    class Task extends Subscriber {
+        $flags$;
+        $index$;
+        $el$;
+        $qrl$;
+        $state$;
+        $destroy$;
+        constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
+            super(), this.$flags$ = $flags$, this.$index$ = $index$, this.$el$ = $el$, this.$qrl$ = $qrl$, 
+            this.$state$ = $state$, this.$destroy$ = $destroy$;
         }
     }
-    const VNodeDataSeparator_REFERENCE = 126, VNodeDataSeparator_ADVANCE_1 = 33, VNodeDataSeparator_ADVANCE_8192 = 46;
-    const VNodeDataChar_OPEN = 123, VNodeDataChar_CLOSE = 125, VNodeDataChar_SCOPED_STYLE = 59, VNodeDataChar_RENDER_FN = 60, VNodeDataChar_ID = 61, VNodeDataChar_PROPS = 62, VNodeDataChar_SLOT_REF = 63, VNodeDataChar_KEY = 64, VNodeDataChar_SEQ = 91, VNodeDataChar_CONTEXT = 93, VNodeDataChar_SEQ_IDX = 94, VNodeDataChar_SEPARATOR = 124, VNodeDataChar_SLOT = 126;
-    function getDomContainer(element) {
-        const qContainerElement = _getQContainerElement(element);
-        return qContainerElement || throwErrorAndStop("Unable to find q:container."), getDomContainerFromQContainerElement(qContainerElement);
+    const isTask = value => value instanceof Task;
+    const _hW = () => {
+        const [task] = useLexicalScope();
+        getDomContainer(task.$el$).$scheduler$(task.$flags$ & TaskFlags.VISIBLE_TASK ? ChoreType.VISIBLE : ChoreType.TASK, task);
+    };
+    const NEEDS_COMPUTATION = Symbol("invalid");
+    const throwIfQRLNotResolved = qrl => {
+        if (!qrl.resolved) {
+            throw qrl.resolve();
+        }
+    };
+    const isSignal = value => value instanceof Signal;
+    class EffectPropData {
+        data;
+        constructor(data) {
+            this.data = data;
+        }
     }
-    function getDomContainerFromQContainerElement(qContainerElement) {
-        const qElement = qContainerElement;
-        let container = qElement.qContainer;
-        if (!container) {
-            container = new DomContainer(qElement);
-            const containerAttributes = {};
-            if (qElement) {
-                const attrs = qElement.attributes;
-                if (attrs) {
-                    for (let index = 0; index < attrs.length; index++) {
-                        const attr = attrs[index];
-                        ":" !== attr.name && (containerAttributes[attr.name] = attr.value);
+    var EffectSubscriptionsProp;
+    var EffectProperty;
+    !function(EffectSubscriptionsProp) {
+        EffectSubscriptionsProp[EffectSubscriptionsProp.EFFECT = 0] = "EFFECT", EffectSubscriptionsProp[EffectSubscriptionsProp.PROPERTY = 1] = "PROPERTY", 
+        EffectSubscriptionsProp[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA = 2] = "FIRST_BACK_REF_OR_DATA";
+    }(EffectSubscriptionsProp || (EffectSubscriptionsProp = {})), function(EffectProperty) {
+        EffectProperty.COMPONENT = ":", EffectProperty.VNODE = ".";
+    }(EffectProperty || (EffectProperty = {}));
+    class Signal {
+        $untrackedValue$;
+        $effects$=null;
+        $container$=null;
+        constructor(container, value) {
+            this.$container$ = container, this.$untrackedValue$ = value;
+        }
+        get untrackedValue() {
+            return this.$untrackedValue$;
+        }
+        set untrackedValue(value) {
+            this.$untrackedValue$ = value;
+        }
+        get value() {
+            const ctx = tryGetInvokeContext();
+            if (ctx) {
+                if (null === this.$container$) {
+                    if (!ctx.$container$) {
+                        return this.untrackedValue;
                     }
+                    this.$container$ = ctx.$container$;
+                } else {
+                    assertTrue();
+                }
+                const effectSubscriber = ctx.$effectSubscriber$;
+                if (effectSubscriber) {
+                    const effects = this.$effects$ ||= [];
+                    ensureContainsEffect(effects, effectSubscriber), ensureContains(effectSubscriber, this), 
+                    isSubscriber(this) && ensureEffectContainsSubscriber(effectSubscriber[EffectSubscriptionsProp.EFFECT], this, this.$container$);
                 }
             }
-            container.$serverData$ = {
-                containerAttributes
-            }, qElement.setAttribute("q:container", QContainerValue.RESUMED), qElement.qContainer = container;
+            return this.untrackedValue;
+        }
+        set value(value) {
+            value !== this.$untrackedValue$ && (this.$untrackedValue$ = value, triggerEffects(this.$container$, this, this.$effects$));
+        }
+        valueOf() {
+            qDev;
+        }
+        toString() {
+            return `[${this.constructor.name}${this.$invalid$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + (this.$effects$?.map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n") || "");
+        }
+        toJSON() {
+            return {
+                value: this.$untrackedValue$
+            };
         }
-        return container;
-    }
-    function _getQContainerElement(element) {
-        return (Array.isArray(element) ? vnode_getDomParent(element) : element).closest(QContainerSelector);
     }
-    const isDomContainer = container => container instanceof DomContainer;
-    class DomContainer extends _SharedContainer {
-        element;
-        qContainer;
-        qBase;
-        qManifestHash;
-        rootVNode;
-        document;
-        $journal$;
-        renderDone=null;
-        $rawStateData$;
-        $storeProxyMap$=new WeakMap;
-        $qFuncs$;
-        $instanceHash$;
-        stateData;
-        $styleIds$=null;
-        $vnodeLocate$=id => vnode_locate(this.rootVNode, id);
-        $renderCount$=0;
-        constructor(element) {
-            super((() => this.scheduleRender()), (() => vnode_applyJournal(this.$journal$)), {}, element.getAttribute("q:locale")), 
-            this.qContainer = element.getAttribute("q:container"), this.qContainer || throwErrorAndStop("Element must have 'q:container' attribute."), 
-            this.$journal$ = [ VNodeJournalOpCode.HoistStyles, element.ownerDocument ], this.document = element.ownerDocument, 
-            this.element = element, this.qBase = element.getAttribute("q:base"), this.$instanceHash$ = element.getAttribute("q:instance"), 
-            this.qManifestHash = element.getAttribute("q:manifest-hash"), this.rootVNode = vnode_newUnMaterializedElement(this.element), 
-            this.$rawStateData$ = null, this.stateData = null;
-            const document = this.element.ownerDocument;
-            document.qVNodeData || function(document) {
-                const vNodeDataMap = document.qVNodeData || (document.qVNodeData = new WeakMap);
-                const prototype = document.body;
-                const getAttribute = prototype.getAttribute;
-                const hasAttribute = prototype.hasAttribute;
-                const getNodeType = ((prototype, name) => {
-                    let getter;
-                    for (;prototype && !(getter = Object.getOwnPropertyDescriptor(prototype, name)?.get); ) {
-                        prototype = Object.getPrototypeOf(prototype);
+    const ensureContains = (array, value) => {
+        -1 === array.indexOf(value) && array.push(value);
+    };
+    const ensureContainsEffect = (array, effectSubscriptions) => {
+        for (let i = 0; i < array.length; i++) {
+            const existingEffect = array[i];
+            if (existingEffect[0] === effectSubscriptions[0] && existingEffect[1] === effectSubscriptions[1]) {
+                return;
+            }
+        }
+        array.push(effectSubscriptions);
+    };
+    const ensureEffectContainsSubscriber = (effect, subscriber, container) => {
+        if (isSubscriber(effect)) {
+            if (effect.$effectDependencies$ ||= [], subscriberExistInSubscribers(effect.$effectDependencies$, subscriber)) {
+                return;
+            }
+            effect.$effectDependencies$.push(subscriber);
+        } else if (vnode_isVNode(effect) && !vnode_isTextVNode(effect)) {
+            let subscribers = vnode_getProp(effect, "q:subs", container ? container.$getObjectById$ : null);
+            if (subscribers ||= [], subscriberExistInSubscribers(subscribers, subscriber)) {
+                return;
+            }
+            subscribers.push(subscriber), vnode_setProp(effect, "q:subs", subscribers);
+        } else if (isSSRNode(effect)) {
+            let subscribers = effect.getProp("q:subs");
+            if (subscribers ||= [], subscriberExistInSubscribers(subscribers, subscriber)) {
+                return;
+            }
+            subscribers.push(subscriber), effect.setProp("q:subs", subscribers);
+        }
+    };
+    const isSSRNode = effect => "setProp" in effect && "getProp" in effect && "removeProp" in effect && "id" in effect;
+    const subscriberExistInSubscribers = (subscribers, subscriber) => {
+        for (let i = 0; i < subscribers.length; i++) {
+            if (subscribers[i] === subscriber) {
+                return !0;
+            }
+        }
+        return !1;
+    };
+    const triggerEffects = (container, signal, effects) => {
+        if (effects) {
+            const scheduleEffect = effectSubscriptions => {
+                const effect = effectSubscriptions[EffectSubscriptionsProp.EFFECT];
+                const property = effectSubscriptions[EffectSubscriptionsProp.PROPERTY];
+                if (assertDefined(), isTask(effect)) {
+                    effect.$flags$ |= TaskFlags.DIRTY;
+                    let choreType = ChoreType.TASK;
+                    effect.$flags$ & TaskFlags.VISIBLE_TASK ? choreType = ChoreType.VISIBLE : effect.$flags$ & TaskFlags.RESOURCE && (choreType = ChoreType.RESOURCE), 
+                    container.$scheduler$(choreType, effect);
+                } else if (effect instanceof Signal) {
+                    effect instanceof ComputedSignal && (effect.$computeQrl$.resolved || container.$scheduler$(ChoreType.QRL_RESOLVE, null, effect.$computeQrl$)), 
+                    effect.$invalidate$();
+                } else if (property === EffectProperty.COMPONENT) {
+                    const host = effect;
+                    const qrl = container.getHostProp(host, "q:renderFn");
+                    assertDefined();
+                    const props = container.getHostProp(host, "q:props");
+                    container.$scheduler$(ChoreType.COMPONENT, host, qrl, props);
+                } else if (property === EffectProperty.VNODE) {
+                    container.$scheduler$(ChoreType.NODE_DIFF, effect, effect, signal);
+                } else {
+                    const effectData = effectSubscriptions[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA];
+                    if (effectData instanceof EffectPropData) {
+                        const payload = {
+                            ...effectData.data,
+                            $value$: signal
+                        };
+                        container.$scheduler$(ChoreType.NODE_PROP, effect, property, payload);
                     }
-                    return getter || function() {
-                        return this[name];
-                    };
-                })(prototype, "nodeType");
-                const attachVnodeDataAndRefs = element => {
-                    Array.from(element.querySelectorAll('script[type="qwik/vnode"]')).forEach((script => {
-                        script.setAttribute("type", "x-qwik/vnode");
-                        const qContainerElement = script.closest("[q\\:container]");
-                        qContainerElement.qVnodeData = script.textContent, qContainerElement.qVNodeRefs = new Map;
-                    })), element.querySelectorAll("[q\\:shadowroot]").forEach((parent => {
-                        const shadowRoot = parent.shadowRoot;
-                        shadowRoot && attachVnodeDataAndRefs(shadowRoot);
-                    }));
-                };
-                let NodeType;
-                attachVnodeDataAndRefs(document), function(NodeType) {
-                    NodeType[NodeType.CONTAINER_MASK = 1] = "CONTAINER_MASK", NodeType[NodeType.ELEMENT = 2] = "ELEMENT", 
-                    NodeType[NodeType.ELEMENT_CONTAINER = 3] = "ELEMENT_CONTAINER", NodeType[NodeType.ELEMENT_SHADOW_ROOT = 6] = "ELEMENT_SHADOW_ROOT", 
-                    NodeType[NodeType.COMMENT_SKIP_START = 5] = "COMMENT_SKIP_START", NodeType[NodeType.COMMENT_SKIP_END = 8] = "COMMENT_SKIP_END", 
-                    NodeType[NodeType.COMMENT_IGNORE_START = 16] = "COMMENT_IGNORE_START", NodeType[NodeType.COMMENT_IGNORE_END = 32] = "COMMENT_IGNORE_END", 
-                    NodeType[NodeType.COMMENT_ISLAND_START = 65] = "COMMENT_ISLAND_START", NodeType[NodeType.COMMENT_ISLAND_END = 128] = "COMMENT_ISLAND_END", 
-                    NodeType[NodeType.OTHER = 0] = "OTHER";
-                }(NodeType || (NodeType = {}));
-                const getFastNodeType = node => {
-                    const nodeType = getNodeType.call(node);
-                    if (1 === nodeType) {
-                        return null === getAttribute.call(node, "q:container") ? hasAttribute.call(node, "q:shadowroot") ? NodeType.ELEMENT_SHADOW_ROOT : hasAttribute.call(node, ":") ? NodeType.ELEMENT : NodeType.OTHER : NodeType.ELEMENT_CONTAINER;
-                    }
-                    if (8 === nodeType) {
-                        const nodeValue = node.nodeValue || "";
-                        if (nodeValue.startsWith("q:container-island")) {
-                            return NodeType.COMMENT_ISLAND_START;
-                        }
-                        if (nodeValue.startsWith("q:ignore")) {
-                            return NodeType.COMMENT_IGNORE_START;
-                        }
-                        if (nodeValue.startsWith("q:container")) {
-                            return NodeType.COMMENT_SKIP_START;
-                        }
-                        if (nodeValue.startsWith("/q:container-island")) {
-                            return NodeType.COMMENT_ISLAND_END;
-                        }
-                        if (nodeValue.startsWith("/q:ignore")) {
-                            return NodeType.COMMENT_IGNORE_END;
-                        }
-                        if (nodeValue.startsWith("/q:container")) {
-                            return NodeType.COMMENT_SKIP_END;
-                        }
-                    }
-                    return NodeType.OTHER;
-                };
-                const isSeparator = ch => VNodeDataSeparator_ADVANCE_1 <= ch && ch <= VNodeDataSeparator_ADVANCE_8192;
-                const findVDataSectionEnd = (vData, start, end) => {
-                    let depth = 0;
-                    for (;start < end; ) {
-                        const ch = vData.charCodeAt(start);
-                        if (0 === depth && isSeparator(ch)) {
-                            break;
-                        }
-                        ch === VNodeDataChar_OPEN ? depth++ : ch === VNodeDataChar_CLOSE && depth--, start++;
-                    }
-                    return start;
-                };
-                const nextSibling = node => {
-                    for (;node && (node = node.nextSibling) && getFastNodeType(node) === NodeType.OTHER; ) {}
-                    return node;
-                };
-                const firstChild = node => {
-                    for (;node && (node = node.firstChild) && getFastNodeType(node) === NodeType.OTHER; ) {}
-                    return node;
-                };
-                const walkContainer = (walker, containerNode, node, exitNode, vData, qVNodeRefs) => {
-                    const vData_length = vData.length;
-                    let elementIdx = 0;
-                    let vNodeElementIndex = -1;
-                    let vData_start = 0;
-                    let vData_end = 0;
-                    let ch = 0;
-                    let needsToStoreRef = -1;
-                    let nextNode = null;
-                    const howManyElementsToSkip = () => {
-                        let elementsToSkip = 0;
-                        for (;isSeparator(ch = vData.charCodeAt(vData_start)) && (elementsToSkip += 1 << ch - VNodeDataSeparator_ADVANCE_1, 
-                        vData_start++, !(vData_start >= vData_length)); ) {}
-                        return elementsToSkip;
-                    };
-                    do {
-                        if (node === exitNode) {
-                            return;
-                        }
-                        nextNode = null;
-                        const nodeType = node == containerNode ? NodeType.ELEMENT : getFastNodeType(node);
-                        if (nodeType === NodeType.ELEMENT_CONTAINER) {
-                            const container = node;
-                            let cursor = node;
-                            for (;cursor && !(nextNode = nextSibling(cursor)); ) {
-                                cursor = cursor.parentNode;
-                            }
-                            walkContainer(walker, container, node, nextNode, container.qVnodeData || "", container.qVNodeRefs);
-                        } else if (nodeType === NodeType.COMMENT_IGNORE_START) {
-                            let islandNode = node;
-                            do {
-                                if (islandNode = walker.nextNode(), !islandNode) {
-                                    throw new Error(`Island inside \x3c!--${node?.nodeValue}--\x3e not found!`);
-                                }
-                            } while (getFastNodeType(islandNode) !== NodeType.COMMENT_ISLAND_START);
-                            nextNode = null;
-                        } else if (nodeType === NodeType.COMMENT_ISLAND_END) {
-                            nextNode = node;
-                            do {
-                                if (nextNode = walker.nextNode(), !nextNode) {
-                                    throw new Error("Ignore block not closed!");
-                                }
-                            } while (getFastNodeType(nextNode) !== NodeType.COMMENT_IGNORE_END);
-                            nextNode = null;
-                        } else if (nodeType === NodeType.COMMENT_SKIP_START) {
-                            nextNode = node;
-                            do {
-                                if (nextNode = nextSibling(nextNode), !nextNode) {
-                                    throw new Error(`\x3c!--${node?.nodeValue}--\x3e not closed!`);
-                                }
-                            } while (getFastNodeType(nextNode) !== NodeType.COMMENT_SKIP_END);
-                            walkContainer(walker, node, node, nextNode, "", null);
-                        } else if (nodeType === NodeType.ELEMENT_SHADOW_ROOT) {
-                            nextNode = nextSibling(node);
-                            const shadowRootContainer = node;
-                            const shadowRoot = shadowRootContainer?.shadowRoot;
-                            shadowRoot && walkContainer(document.createTreeWalker(shadowRoot, 129), null, firstChild(shadowRoot), null, "", null);
-                        }
-                        if ((nodeType & NodeType.ELEMENT) === NodeType.ELEMENT) {
-                            if (vNodeElementIndex < elementIdx && (-1 === vNodeElementIndex && (vNodeElementIndex = 0), 
-                            vData_start = vData_end, vData_start < vData_length ? (vNodeElementIndex += howManyElementsToSkip(), 
-                            ch === VNodeDataSeparator_REFERENCE && (needsToStoreRef = vNodeElementIndex, vData_start++, 
-                            ch = vData_start < vData_length ? vData.charCodeAt(vData_end) : VNodeDataSeparator_ADVANCE_1), 
-                            vData_end = findVDataSectionEnd(vData, vData_start, vData_length)) : vNodeElementIndex = Number.MAX_SAFE_INTEGER), 
-                            elementIdx === vNodeElementIndex) {
-                                needsToStoreRef === elementIdx && qVNodeRefs.set(elementIdx, node);
-                                const instructions = vData.substring(vData_start, vData_end);
-                                vNodeDataMap.set(node, instructions);
-                            }
-                            elementIdx++;
-                        }
-                    } while (node = nextNode || walker.nextNode());
-                };
-                const walker = document.createTreeWalker(document, 129);
-                walkContainer(walker, null, walker.firstChild(), null, "", null);
-            }(document), this.$rawStateData$ = [], this.stateData = [];
-            const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
-            if (0 !== qwikStates.length) {
-                this.$rawStateData$ = JSON.parse(qwikStates[qwikStates.length - 1].textContent), 
-                this.stateData = wrapDeserializerProxy(this, this.$rawStateData$);
-            }
-            this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
-        }
-        $setRawState$(id, vParent) {
-            this.stateData[id] = vParent;
+                }
+            };
+            effects.forEach(scheduleEffect);
         }
-        parseQRL(qrl) {
-            return inflateQRL(this, parseQRL(qrl));
+    };
+    class ComputedSignal extends Signal {
+        $computeQrl$;
+        $invalid$=!0;
+        $forceRunEffects$=!1;
+        constructor(container, fn) {
+            super(container, NEEDS_COMPUTATION), this.$computeQrl$ = fn;
         }
-        processJsx(host, jsx) {
-            const styleScopedId = this.getHostProp(host, "q:sstyle");
-            return vnode_diff(this, jsx, host, addComponentStylePrefix(styleScopedId));
+        $invalidate$() {
+            this.$invalid$ = !0, this.$forceRunEffects$ = !1, this.$container$?.$scheduler$(ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS, null, this);
         }
-        handleError(err, host) {
-            const errorStore = this.resolveContext(host, ERROR_CONTEXT);
-            if (!errorStore) {
-                throw err;
-            }
-            errorStore.error = err;
+        force() {
+            this.$invalid$ = !0, this.$forceRunEffects$ = !1, triggerEffects(this.$container$, this, this.$effects$);
         }
-        setContext(host, context, value) {
-            let ctx = this.getHostProp(host, "q:ctx");
-            ctx || this.setHostProp(host, "q:ctx", ctx = []), mapArray_set(ctx, context.id, value, 0);
+        get untrackedValue() {
+            const didChange = this.$computeIfNeeded$();
+            return didChange && (this.$forceRunEffects$ = didChange), assertFalse(), this.$untrackedValue$;
         }
-        resolveContext(host, contextId) {
-            for (;host; ) {
-                const ctx = this.getHostProp(host, "q:ctx");
-                if (ctx) {
-                    const value = mapArray_get(ctx, contextId.id, 0);
-                    if (value) {
-                        return value;
-                    }
-                }
-                host = this.getParentHost(host);
+        $computeIfNeeded$() {
+            if (!this.$invalid$) {
+                return !1;
             }
-        }
-        getParentHost(host) {
-            let vNode = vnode_getParent(host);
-            for (;vNode; ) {
-                if (vnode_isVirtualVNode(vNode)) {
-                    if (null !== vnode_getProp(vNode, "q:renderFn", null)) {
-                        return vNode;
-                    }
-                    const parent = vnode_getProp(vNode, ":", this.$vnodeLocate$);
-                    if (parent) {
-                        vNode = parent;
-                        continue;
-                    }
+            const computeQrl = this.$computeQrl$;
+            throwIfQRLNotResolved(computeQrl);
+            const ctx = tryGetInvokeContext();
+            const previousEffectSubscription = ctx?.$effectSubscriber$;
+            ctx && (ctx.$effectSubscriber$ = [ this, EffectProperty.VNODE ]);
+            try {
+                const untrackedValue = computeQrl.getFn(ctx)();
+                if (isPromise(untrackedValue)) {
+                    throw qError(QError.computedNotSync, [ computeQrl.dev ? computeQrl.dev.file : "", computeQrl.$hash$ ]);
                 }
-                vNode = vnode_getParent(vNode);
+                this.$invalid$ = !1;
+                const didChange = untrackedValue !== this.$untrackedValue$;
+                return didChange && (this.$untrackedValue$ = untrackedValue), didChange;
+            } finally {
+                ctx && (ctx.$effectSubscriber$ = previousEffectSubscription);
             }
-            return null;
         }
-        setHostProp(host, name, value) {
-            vnode_setProp(host, name, value);
+        get value() {
+            return super.value;
         }
-        getHostProp(host, name) {
-            const vNode = host;
-            let getObjectById = null;
-            switch (name) {
-              case "q:seq":
-              case "q:props":
-              case "q:renderFn":
-              case "q:ctx":
-              case "q:subs":
-                getObjectById = this.$getObjectById$;
-                break;
-
-              case "q:seqIdx":
-              case ":onIdx":
-                getObjectById = parseInt;
-            }
-            return vnode_getProp(vNode, name, getObjectById);
+        set value(_) {
+            throw qError(QError.computedReadOnly);
         }
-        scheduleRender() {
-            return this.$renderCount$++, this.renderDone ||= getPlatform().nextTick((() => this.processChores())), 
-            this.renderDone;
+    }
+    class WrappedSignal extends Signal {
+        $args$;
+        $func$;
+        $funcStr$;
+        $invalid$=!0;
+        $effectDependencies$=null;
+        $hostElement$=null;
+        $forceRunEffects$=!1;
+        constructor(container, fn, args, fnStr) {
+            super(container, NEEDS_COMPUTATION), this.$args$ = args, this.$func$ = fn, this.$funcStr$ = fnStr;
         }
-        processChores() {
-            let renderCount = this.$renderCount$;
-            const result = this.$scheduler$(ChoreType.WAIT_FOR_ALL);
-            if (isPromise(result)) {
-                return result.then((async () => {
-                    for (;renderCount !== this.$renderCount$; ) {
-                        renderCount = this.$renderCount$, await this.$scheduler$(ChoreType.WAIT_FOR_ALL);
-                    }
-                    this.renderDone = null;
-                }));
-            }
-            renderCount === this.$renderCount$ ? this.renderDone = null : this.processChores();
-        }
-        ensureProjectionResolved(vNode) {
-            if (!(vNode[VNodeProps.flags] & VNodeFlags.Resolved)) {
-                vNode[VNodeProps.flags] |= VNodeFlags.Resolved;
-                for (let i = vnode_getPropStartIndex(vNode); i < vNode.length; i += 2) {
-                    if (isSlotProp(vNode[i])) {
-                        const value = vNode[i + 1];
-                        "string" == typeof value && (vNode[i + 1] = this.$vnodeLocate$(value));
-                    }
-                }
-            }
+        $invalidate$() {
+            this.$invalid$ = !0, this.$forceRunEffects$ = !1, this.$container$?.$scheduler$(ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS, this.$hostElement$, this);
         }
-        $getObjectById$=id => ("string" == typeof id && (id = parseFloat(id)), assertTrue(), 
-        this.stateData[id]);
-        getSyncFn(id) {
-            const fn = this.$qFuncs$[id];
-            return assertTrue(), fn;
+        force() {
+            this.$invalid$ = !0, this.$forceRunEffects$ = !1, triggerEffects(this.$container$, this, this.$effects$);
         }
-        $appendStyle$(content, styleId, host, scoped) {
-            if (scoped) {
-                const scopedStyleIdsString = this.getHostProp(host, "q:sstyle");
-                const scopedStyleIds = new Set(function(scopedStyleIds) {
-                    return scopedStyleIds?.split(" ") ?? null;
-                }(scopedStyleIdsString));
-                scopedStyleIds.add(styleId), this.setHostProp(host, "q:sstyle", function(scopedStyleIds) {
-                    return Array.from(scopedStyleIds).join(" ");
-                }(scopedStyleIds));
-            }
-            if (null == this.$styleIds$ && (this.$styleIds$ = new Set, this.element.querySelectorAll("style[q\\:style]").forEach((style => {
-                this.$styleIds$.add(style.getAttribute("q:style"));
-            }))), !this.$styleIds$.has(styleId)) {
-                this.$styleIds$.add(styleId);
-                const styleElement = this.document.createElement("style");
-                styleElement.setAttribute("q:style", styleId), styleElement.textContent = content, 
-                this.$journal$.push(VNodeJournalOpCode.Insert, this.document.head, null, styleElement);
-            }
+        get untrackedValue() {
+            const didChange = this.$computeIfNeeded$();
+            return didChange && (this.$forceRunEffects$ = didChange), assertFalse(), this.$untrackedValue$;
         }
-    }
-    let _context;
-    const tryGetInvokeContext = () => {
-        if (!_context) {
-            const context = "undefined" != typeof document && document && document.__q_context__;
-            if (!context) {
-                return;
+        $computeIfNeeded$() {
+            if (!this.$invalid$) {
+                return !1;
             }
-            return isArray(context) ? document.__q_context__ = newInvokeContextFromTuple(context) : context;
-        }
-        return _context;
-    };
-    const getInvokeContext = () => {
-        const ctx = tryGetInvokeContext();
-        if (!ctx) {
-            throw qError(14);
-        }
-        return ctx;
-    };
-    const useInvokeContext = () => {
-        const ctx = tryGetInvokeContext();
-        if (!ctx || "qRender" !== ctx.$event$) {
-            throw qError(20);
+            const untrackedValue = trackSignal((() => this.$func$(...this.$args$)), this, EffectProperty.VNODE, this.$container$);
+            const didChange = untrackedValue !== this.$untrackedValue$;
+            return didChange && (this.$untrackedValue$ = untrackedValue), didChange;
         }
-        return assertDefined(), assertDefined(), ctx;
-    };
-    function useBindInvokeContext(fn) {
-        if (null == fn) {
-            return fn;
+        get value() {
+            return super.value;
         }
-        const ctx = getInvokeContext();
-        return function(...args) {
-            return invokeApply.call(this, ctx, fn, args);
-        };
-    }
-    function invoke(context, fn, ...args) {
-        return invokeApply.call(this, context, fn, args);
-    }
-    function invokeApply(context, fn, args) {
-        const previousContext = _context;
-        let returnValue;
-        try {
-            _context = context, returnValue = fn.apply(this, args);
-        } finally {
-            _context = previousContext;
+        set value(_) {
+            throw qError(QError.wrappedReadOnly);
         }
-        return returnValue;
     }
-    const newInvokeContextFromTuple = ([element, event, url]) => {
-        const container = element.closest(QContainerSelector);
-        const locale = container?.getAttribute("q:locale") || void 0;
-        return locale && function(locale) {
-            _locale = locale;
-        }(locale), newInvokeContext(locale, void 0, element, event, url);
-    };
-    const newInvokeContext = (locale, hostElement, element, event, url) => {
-        const ctx = {
-            $url$: url,
-            $i$: 0,
-            $hostElement$: hostElement,
-            $element$: element,
-            $event$: event,
-            $qrl$: void 0,
-            $effectSubscriber$: void 0,
-            $locale$: locale || ("object" == typeof event && event && "locale" in event ? event.locale : void 0),
-            $container$: void 0
-        };
-        return seal(), ctx;
-    };
-    const untrack = fn => invoke(void 0, fn);
-    const trackInvocation = /*#__PURE__*/ newInvokeContext(void 0, void 0, void 0, "qRender");
-    const trackSignal = (fn, subscriber, property, container, data) => {
-        const previousSubscriber = trackInvocation.$effectSubscriber$;
-        const previousContainer = trackInvocation.$container$;
-        try {
-            return trackInvocation.$effectSubscriber$ = [ subscriber, property ], data && trackInvocation.$effectSubscriber$.push(data), 
-            trackInvocation.$container$ = container, invoke(trackInvocation, fn);
-        } finally {
-            trackInvocation.$effectSubscriber$ = previousSubscriber, trackInvocation.$container$ = previousContainer;
-        }
-    };
     class ParentComponentData {
         $scopedStyle$;
         $componentFrame$;
@@ -2392,11 +2013,17 @@
                     });
                 } else {
                     if (value === Promise) {
-                        return options.allowPromises ? void stack.pop().then(resolveValue, rejectDrain) : throwErrorAndStop("Promises not expected here.");
+                        if (!options.allowPromises) {
+                            throw qError(QError.promisesNotExpected);
+                        }
+                        return void stack.pop().then(resolveValue, rejectDrain);
                     }
                     const waitOn = value.apply(ssr);
                     if (waitOn) {
-                        return options.allowPromises ? void waitOn.then(drain, rejectDrain) : throwErrorAndStop("Promises not expected here.");
+                        if (!options.allowPromises) {
+                            throw qError(QError.promisesNotExpected);
+                        }
+                        return void waitOn.then(drain, rejectDrain);
                     }
                 }
             }
@@ -2421,7 +2048,7 @@
             } else if (isSignal(value)) {
                 ssr.openFragment(build.isDev ? [ "q:type", VirtualType.WrappedSignal ] : EMPTY_ARRAY);
                 const signalNode = ssr.getLastNode();
-                enqueue(ssr.closeFragment), enqueue(trackSignal((() => value.value), signalNode, EffectProperty.VNODE, ssr));
+                enqueue(ssr.closeFragment), enqueue(trackSignalAndAssignHost(value, signalNode, EffectProperty.VNODE, ssr));
             } else if (isPromise(value)) {
                 ssr.openFragment(build.isDev ? [ "q:type", VirtualType.Awaited ] : EMPTY_ARRAY), 
                 enqueue(ssr.closeFragment), enqueue(value), enqueue(Promise), enqueue((() => ssr.commentNode("qkssr-f")));
@@ -2480,7 +2107,7 @@
                                 if (constProps && "object" == typeof constProps && "name" in constProps) {
                                     const constValue = constProps.name;
                                     if (constValue instanceof WrappedSignal) {
-                                        return trackSignal((() => constValue.value), host, EffectProperty.COMPONENT, ssr);
+                                        return trackSignalAndAssignHost(constValue, host, EffectProperty.COMPONENT, ssr);
                                     }
                                 }
                                 return directGetPropsProxyProp(jsx, "name") || "";
@@ -2614,6 +2241,29 @@
         const eventName = key.substring(15);
         eventName && serializationCtx.$eventNames$.add(eventName);
     }
+    const version = "2.0.0-alpha.4-dev+374e0d6";
+    class _SharedContainer {
+        $version$;
+        $scheduler$;
+        $storeProxyMap$;
+        $locale$;
+        $getObjectById$;
+        $serverData$;
+        $currentUniqueId$=0;
+        $instanceHash$=null;
+        constructor(scheduleDrain, journalFlush, serverData, locale) {
+            this.$serverData$ = serverData, this.$locale$ = locale, this.$version$ = version, 
+            this.$storeProxyMap$ = new WeakMap, this.$getObjectById$ = () => {
+                throw Error("Not implemented");
+            }, this.$scheduler$ = createScheduler(this, scheduleDrain, journalFlush);
+        }
+        trackSignalValue(signal, subscriber, property, data) {
+            return trackSignalAndAssignHost(signal, subscriber, property, this, data);
+        }
+        serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+            return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
+        }
+    }
     const _CONST_PROPS = Symbol("CONST");
     const _VAR_PROPS = Symbol("VAR");
     const _IMMUTABLE = Symbol("IMMUTABLE");
@@ -2820,6 +2470,8 @@
         }
         return String(value);
     };
+    const VNodeDataSeparator_REFERENCE = 126, VNodeDataSeparator_ADVANCE_1 = 33, VNodeDataSeparator_ADVANCE_8192 = 46;
+    const VNodeDataChar_OPEN = 123, VNodeDataChar_CLOSE = 125, VNodeDataChar_SCOPED_STYLE = 59, VNodeDataChar_RENDER_FN = 60, VNodeDataChar_ID = 61, VNodeDataChar_PROPS = 62, VNodeDataChar_SLOT_REF = 63, VNodeDataChar_KEY = 64, VNodeDataChar_SEQ = 91, VNodeDataChar_CONTEXT = 93, VNodeDataChar_SEQ_IDX = 94, VNodeDataChar_SUBS = 96, VNodeDataChar_SEPARATOR = 124, VNodeDataChar_SLOT = 126;
     var VNodeJournalOpCode;
     !function(VNodeJournalOpCode) {
         VNodeJournalOpCode[VNodeJournalOpCode.SetText = 1] = "SetText", VNodeJournalOpCode[VNodeJournalOpCode.SetAttribute = 2] = "SetAttribute", 
@@ -2838,12 +2490,6 @@
         return assertTrue(vnode_isElementVNode(vnode)), assertFalse(vnode_isTextVNode(vnode)), 
         assertFalse(vnode_isVirtualVNode(vnode)), vnode;
     };
-    const vnode_newSharedText = (previousTextNode, sharedTextNode, textContent) => {
-        sharedTextNode && assertEqual(fastNodeType(sharedTextNode));
-        const vnode = VNodeArray.createText(VNodeFlags.Text | -1 << VNodeFlagsIndex.shift, null, previousTextNode, null, sharedTextNode, textContent);
-        return assertFalse(vnode_isElementVNode(vnode)), assertTrue(vnode_isTextVNode(vnode)), 
-        assertFalse(vnode_isVirtualVNode(vnode)), vnode;
-    };
     const vnode_newText = (textNode, textContent) => {
         const vnode = VNodeArray.createText(VNodeFlags.Text | VNodeFlags.Inflated | -1 << VNodeFlagsIndex.shift, null, null, null, textNode, textContent);
         return assertEqual(fastNodeType(textNode)), assertFalse(vnode_isElementVNode(vnode)), 
@@ -3286,107 +2932,118 @@
         let vFirstChild = vnode[ElementVNodeProps.firstChild];
         return void 0 === vFirstChild && (vFirstChild = ensureMaterialized(vnode)), vFirstChild;
     };
-    const vnode_materialize = vNode => {
-        const element = vNode[ElementVNodeProps.element];
-        const firstChild = fastFirstChild(element);
-        const vNodeData = element.ownerDocument?.qVNodeData?.get(element);
-        const vFirstChild = vNodeData ? function(vParent, vData, element, child) {
-            let idx = 0;
-            let nextToConsumeIdx = 0;
-            let vFirst = null;
-            let vLast = null;
-            let previousTextNode = null;
-            let ch = 0;
-            let peekCh = 0;
-            const peek = () => 0 !== peekCh ? peekCh : peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0;
-            const consume = () => (ch = peek(), peekCh = 0, nextToConsumeIdx++, ch);
-            const addVNode = node => {
-                node[VNodeProps.flags] = node[VNodeProps.flags] & VNodeFlagsIndex.negated_mask | idx << VNodeFlagsIndex.shift, 
-                idx++, vLast && (vLast[VNodeProps.nextSibling] = node), node[VNodeProps.previousSibling] = vLast, 
-                node[VNodeProps.parent] = vParent, vFirst || (vParent[ElementVNodeProps.firstChild] = vFirst = node), 
-                vLast = node;
-            };
-            const consumeValue = () => {
-                consume();
-                const start = nextToConsumeIdx;
-                for (;peek() <= 58 && 0 !== peekCh || 95 === peekCh || peekCh >= 65 && peekCh <= 90 || peekCh >= 97 && peekCh <= 122; ) {
-                    consume();
+    const materialize = (vNode, element, firstChild, vNodeData) => {
+        if (vNodeData) {
+            if (vNodeData.charCodeAt(0) === VNodeDataChar_SEPARATOR) {
+                const elementVNodeDataStartIdx = 1;
+                let elementVNodeDataEndIdx = 1;
+                for (;vNodeData.charCodeAt(elementVNodeDataEndIdx) !== VNodeDataChar_SEPARATOR; ) {
+                    elementVNodeDataEndIdx++;
                 }
-                return vData.substring(start, nextToConsumeIdx);
-            };
-            let textIdx = 0;
-            let combinedText = null;
-            let container = null;
-            for (;0 !== peek(); ) {
-                if (isNumber(peek())) {
-                    for (;!isElement(child); ) {
-                        (child = fastNextSibling(child)) || throwErrorAndStop("Materialize error: missing element: " + vData + " " + peek() + " " + nextToConsumeIdx);
-                    }
-                    for (;isQStyleElement(child); ) {
-                        child = fastNextSibling(child);
-                    }
-                    combinedText = null, previousTextNode = null;
-                    let value = 0;
-                    for (;isNumber(peek()); ) {
-                        value *= 10, value += consume() - 48;
-                    }
-                    for (;value--; ) {
-                        addVNode(vnode_newUnMaterializedElement(child)), child = fastNextSibling(child);
-                    }
-                } else if (peek() === VNodeDataChar_SCOPED_STYLE) {
-                    vnode_setAttr(null, vParent, "q:sstyle", consumeValue());
-                } else if (peek() === VNodeDataChar_RENDER_FN) {
-                    vnode_setAttr(null, vParent, "q:renderFn", consumeValue());
-                } else if (peek() === VNodeDataChar_ID) {
-                    container || (container = getDomContainer(element));
-                    const id = consumeValue();
-                    container.$setRawState$(parseInt(id), vParent), build.isDev && vnode_setAttr(null, vParent, "q:id", id);
-                } else if (peek() === VNodeDataChar_PROPS) {
-                    vnode_setAttr(null, vParent, "q:props", consumeValue());
-                } else if (peek() === VNodeDataChar_SLOT_REF) {
-                    vnode_setAttr(null, vParent, "q:sref", consumeValue());
-                } else if (peek() === VNodeDataChar_KEY) {
-                    vnode_setAttr(null, vParent, "q:key", consumeValue());
-                } else if (peek() === VNodeDataChar_SEQ) {
-                    vnode_setAttr(null, vParent, "q:seq", consumeValue());
-                } else if (peek() === VNodeDataChar_SEQ_IDX) {
-                    vnode_setAttr(null, vParent, "q:seqIdx", consumeValue());
-                } else if (peek() === VNodeDataChar_CONTEXT) {
-                    vnode_setAttr(null, vParent, "q:ctx", consumeValue());
-                } else if (peek() === VNodeDataChar_OPEN) {
-                    consume(), addVNode(vnode_newVirtual()), stack.push(vParent, vFirst, vLast, previousTextNode, idx), 
-                    idx = 0, vParent = vLast, vFirst = vLast = null;
-                } else if (peek() === VNodeDataChar_SEPARATOR) {
-                    const key = consumeValue();
-                    const value = consumeValue();
-                    vnode_setAttr(null, vParent, key, value);
-                } else if (peek() === VNodeDataChar_CLOSE) {
-                    consume(), vParent[ElementVNodeProps.lastChild] = vLast, idx = stack.pop(), previousTextNode = stack.pop(), 
-                    vLast = stack.pop(), vFirst = stack.pop(), vParent = stack.pop();
-                } else if (peek() === VNodeDataChar_SLOT) {
-                    vnode_setAttr(null, vParent, QSlot, consumeValue());
-                } else {
-                    const textNode = child && 3 === fastNodeType(child) ? child : null;
-                    null === combinedText && (combinedText = textNode ? textNode.nodeValue : null, textIdx = 0);
-                    let length = 0;
-                    for (;isLowercase(peek()); ) {
-                        length += consume() - 97, length *= 26;
-                    }
-                    length += consume() - 65;
-                    const text = null === combinedText ? "" : combinedText.substring(textIdx, textIdx + length);
-                    addVNode(previousTextNode = vnode_newSharedText(previousTextNode, textNode, text)), 
-                    textIdx += length;
+                const elementVNodeData = vNodeData.substring(elementVNodeDataStartIdx, elementVNodeDataEndIdx);
+                vNodeData = vNodeData.substring(elementVNodeDataEndIdx + 1);
+                const vFirstChild = materializeFromDOM(vNode, firstChild, elementVNodeData);
+                if (!vNodeData) {
+                    return vFirstChild;
                 }
             }
-            return vParent[ElementVNodeProps.lastChild] = vLast, vFirst;
-        }(vNode, vNodeData, element, firstChild) : materializeFromDOM(vNode, firstChild);
-        return vFirstChild;
+            return function(vParent, vData, element, child) {
+                let idx = 0;
+                let vFirst = null;
+                let vLast = null;
+                let previousTextNode = null;
+                const addVNode = node => {
+                    node[VNodeProps.flags] = node[VNodeProps.flags] & VNodeFlagsIndex.negated_mask | idx << VNodeFlagsIndex.shift, 
+                    idx++, vLast && (vLast[VNodeProps.nextSibling] = node), node[VNodeProps.previousSibling] = vLast, 
+                    node[VNodeProps.parent] = vParent, vFirst || (vParent[ElementVNodeProps.firstChild] = vFirst = node), 
+                    vLast = node;
+                };
+                let textIdx = 0;
+                let combinedText = null;
+                let container = null;
+                return processVNodeData$1(vData, ((peek, consumeValue, consume, nextToConsumeIdx) => {
+                    if (isNumber(peek())) {
+                        for (;!isElement(child); ) {
+                            if (!(child = fastNextSibling(child))) {
+                                throw qError(QError.materializeVNodeDataError, [ vData, peek(), nextToConsumeIdx ]);
+                            }
+                        }
+                        for (;isQStyleElement(child); ) {
+                            child = fastNextSibling(child);
+                        }
+                        combinedText = null, previousTextNode = null;
+                        let value = 0;
+                        for (;isNumber(peek()); ) {
+                            value *= 10, value += consume() - 48;
+                        }
+                        for (;value--; ) {
+                            addVNode(vnode_newUnMaterializedElement(child)), child = fastNextSibling(child);
+                        }
+                    } else if (peek() === VNodeDataChar_SCOPED_STYLE) {
+                        vnode_setAttr(null, vParent, "q:sstyle", consumeValue());
+                    } else if (peek() === VNodeDataChar_RENDER_FN) {
+                        vnode_setAttr(null, vParent, "q:renderFn", consumeValue());
+                    } else if (peek() === VNodeDataChar_ID) {
+                        container || (container = getDomContainer(element));
+                        const id = consumeValue();
+                        container.$setRawState$(parseInt(id), vParent), build.isDev && vnode_setAttr(null, vParent, "q:id", id);
+                    } else if (peek() === VNodeDataChar_PROPS) {
+                        vnode_setAttr(null, vParent, "q:props", consumeValue());
+                    } else if (peek() === VNodeDataChar_SLOT_REF) {
+                        vnode_setAttr(null, vParent, "q:sref", consumeValue());
+                    } else if (peek() === VNodeDataChar_KEY) {
+                        vnode_setAttr(null, vParent, "q:key", consumeValue());
+                    } else if (peek() === VNodeDataChar_SEQ) {
+                        vnode_setAttr(null, vParent, "q:seq", consumeValue());
+                    } else if (peek() === VNodeDataChar_SEQ_IDX) {
+                        vnode_setAttr(null, vParent, "q:seqIdx", consumeValue());
+                    } else if (peek() === VNodeDataChar_SUBS) {
+                        vnode_setProp(vParent, "q:subs", consumeValue());
+                    } else if (peek() === VNodeDataChar_CONTEXT) {
+                        vnode_setAttr(null, vParent, "q:ctx", consumeValue());
+                    } else if (peek() === VNodeDataChar_OPEN) {
+                        consume(), addVNode(vnode_newVirtual()), stack.push(vParent, vFirst, vLast, previousTextNode, idx), 
+                        idx = 0, vParent = vLast, vFirst = vLast = null;
+                    } else if (peek() === VNodeDataChar_SEPARATOR) {
+                        const key = consumeValue();
+                        const value = consumeValue();
+                        vnode_setAttr(null, vParent, key, value);
+                    } else if (peek() === VNodeDataChar_CLOSE) {
+                        consume(), vParent[ElementVNodeProps.lastChild] = vLast, idx = stack.pop(), previousTextNode = stack.pop(), 
+                        vLast = stack.pop(), vFirst = stack.pop(), vParent = stack.pop();
+                    } else if (peek() === VNodeDataChar_SLOT) {
+                        vnode_setAttr(null, vParent, QSlot, consumeValue());
+                    } else {
+                        const textNode = child && 3 === fastNodeType(child) ? child : null;
+                        null === combinedText && (combinedText = textNode ? textNode.nodeValue : null, textIdx = 0);
+                        let length = 0;
+                        for (;isLowercase(peek()); ) {
+                            length += consume() - 97, length *= 26;
+                        }
+                        length += consume() - 65;
+                        const text = null === combinedText ? "" : combinedText.substring(textIdx, textIdx + length);
+                        addVNode(previousTextNode = ((previousTextNode, sharedTextNode, textContent) => {
+                            sharedTextNode && assertEqual(fastNodeType(sharedTextNode));
+                            const vnode = VNodeArray.createText(VNodeFlags.Text | -1 << VNodeFlagsIndex.shift, null, previousTextNode, null, sharedTextNode, textContent);
+                            return assertFalse(vnode_isElementVNode(vnode)), assertTrue(vnode_isTextVNode(vnode)), 
+                            assertFalse(vnode_isVirtualVNode(vnode)), vnode;
+                        })(previousTextNode, textNode, text)), textIdx += length;
+                    }
+                })), vParent[ElementVNodeProps.lastChild] = vLast, vFirst;
+            }(vNode, vNodeData, element, firstChild);
+        }
+        return materializeFromDOM(vNode, firstChild);
     };
     const ensureMaterialized = vnode => {
         const vParent = ensureElementVNode(vnode);
         let vFirstChild = vParent[ElementVNodeProps.firstChild];
         if (void 0 === vFirstChild) {
-            vFirstChild = vParent[VNodeProps.parent] && shouldIgnoreChildren(vParent[ElementVNodeProps.element]) ? vParent[ElementVNodeProps.firstChild] = vParent[ElementVNodeProps.lastChild] = null : vnode_materialize(vParent);
+            vFirstChild = vParent[VNodeProps.parent] && shouldIgnoreChildren(vParent[ElementVNodeProps.element]) ? vParent[ElementVNodeProps.firstChild] = vParent[ElementVNodeProps.lastChild] = null : (vNode => {
+                const element = vNode[ElementVNodeProps.element];
+                const firstChild = fastFirstChild(element);
+                const vNodeData = element.ownerDocument?.qVNodeData?.get(element);
+                return materialize(vNode, element, firstChild, vNodeData);
+            })(vParent);
         }
         return assertTrue(), assertTrue(), vFirstChild;
     };
@@ -3455,7 +3112,7 @@
         };
     };
     const isQStyleElement = node => isElement(node) && "STYLE" === node.nodeName && (node.hasAttribute("q:sstyle") || node.hasAttribute("q:style"));
-    const materializeFromDOM = (vParent, firstChild) => {
+    const materializeFromDOM = (vParent, firstChild, vData) => {
         let vFirstChild = null;
         const skipStyleElements = () => {
             for (;isQStyleElement(child); ) {
@@ -3473,8 +3130,38 @@
             vNextChild[VNodeProps.previousSibling] = vChild, vChild = vNextChild), vFirstChild || (vParent[ElementVNodeProps.firstChild] = vFirstChild = vChild), 
             child = fastNextSibling(child), skipStyleElements();
         }
-        return vParent[ElementVNodeProps.lastChild] = vChild || null, vParent[ElementVNodeProps.firstChild] = vFirstChild, 
-        vFirstChild;
+        if (vParent[ElementVNodeProps.lastChild] = vChild || null, vParent[ElementVNodeProps.firstChild] = vFirstChild, 
+        vData) {
+            let container = null;
+            processVNodeData$1(vData, ((peek, consumeValue) => {
+                if (peek() === VNodeDataChar_ID) {
+                    container || (container = getDomContainer(vParent[ElementVNodeProps.element]));
+                    const id = consumeValue();
+                    container.$setRawState$(parseInt(id), vParent), build.isDev && vnode_setAttr(null, vParent, "q:id", id);
+                } else {
+                    peek() === VNodeDataChar_SUBS ? vnode_setProp(vParent, "q:subs", consumeValue()) : consumeValue();
+                }
+            }));
+        }
+        return vFirstChild;
+    };
+    const processVNodeData$1 = (vData, callback) => {
+        let nextToConsumeIdx = 0;
+        let ch = 0;
+        let peekCh = 0;
+        const peek = () => 0 !== peekCh ? peekCh : peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0;
+        const consume = () => (ch = peek(), peekCh = 0, nextToConsumeIdx++, ch);
+        const consumeValue = () => {
+            consume();
+            const start = nextToConsumeIdx;
+            for (;peek() <= 58 && 0 !== peekCh || 95 === peekCh || peekCh >= 65 && peekCh <= 90 || peekCh >= 97 && peekCh <= 122; ) {
+                consume();
+            }
+            return vData.substring(start, nextToConsumeIdx);
+        };
+        for (;0 !== peek(); ) {
+            callback(peek, consumeValue, consume, nextToConsumeIdx);
+        }
     };
     const vnode_getNextSibling = vnode => vnode[VNodeProps.nextSibling];
     const vnode_getAttrKeys = vnode => {
@@ -3529,164 +3216,588 @@
         if (type === VNodeFlags.Element) {
             return ElementVNodeProps.PROPS_OFFSET;
         }
-        if (type === VNodeFlags.Virtual) {
-            return VirtualVNodeProps.PROPS_OFFSET;
+        if (type === VNodeFlags.Virtual) {
+            return VirtualVNodeProps.PROPS_OFFSET;
+        }
+        throw qError(QError.invalidVNodeType, [ type ]);
+    };
+    const vnode_getParent = vnode => vnode[VNodeProps.parent] || null;
+    const vnode_getNode = vnode => null === vnode || vnode_isVirtualVNode(vnode) ? null : vnode_isElementVNode(vnode) ? vnode[ElementVNodeProps.element] : (assertTrue(vnode_isTextVNode(vnode)), 
+    vnode[TextVNodeProps.node]);
+    function vnode_toString(depth = 10, offset = "", materialize = !1, siblings = !1) {
+        let vnode = this;
+        if (0 === depth) {
+            return "...";
+        }
+        if (null === vnode) {
+            return "null";
+        }
+        if (void 0 === vnode) {
+            return "undefined";
+        }
+        const strings = [];
+        do {
+            if (vnode_isTextVNode(vnode)) {
+                strings.push(qwikDebugToString(vnode_getText(vnode)));
+            } else if (vnode_isVirtualVNode(vnode)) {
+                const attrs = [ "[" + String(vnode[VNodeProps.flags] >>> VNodeFlagsIndex.shift) + "]" ];
+                vnode_getAttrKeys(vnode).forEach((key => {
+                    if ("q:type" !== key) {
+                        const value = vnode_getAttr(vnode, key);
+                        attrs.push(" " + key + "=" + qwikDebugToString(value));
+                    }
+                }));
+                const name = VirtualTypeName[vnode_getAttr(vnode, "q:type") || VirtualType.Virtual] || VirtualTypeName[VirtualType.Virtual];
+                strings.push("<" + name + attrs.join("") + ">");
+                const child = vnode_getFirstChild(vnode);
+                child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", !0, !0)), 
+                strings.push("</" + name + ">");
+            } else if (vnode_isElementVNode(vnode)) {
+                const tag = vnode_getElementName(vnode);
+                const attrs = [];
+                const keys = vnode_getAttrKeys(vnode);
+                keys.forEach((key => {
+                    const value = vnode_getAttr(vnode, key);
+                    attrs.push(" " + key + "=" + qwikDebugToString(value));
+                }));
+                const node = vnode_getNode(vnode);
+                if (node) {
+                    const vnodeData = node.ownerDocument.qVNodeData?.get(node);
+                    vnodeData && attrs.push(" q:vnodeData=" + qwikDebugToString(vnodeData));
+                }
+                const domAttrs = node.attributes;
+                for (let i = 0; i < domAttrs.length; i++) {
+                    const attr = domAttrs[i];
+                    -1 === keys.indexOf(attr.name) && attrs.push(" " + attr.name + (attr.value ? "=" + qwikDebugToString(attr.value) : ""));
+                }
+                if (strings.push("<" + tag + attrs.join("") + ">"), vnode_isMaterialized(vnode) || materialize) {
+                    const child = vnode_getFirstChild(vnode);
+                    child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", !0, !0));
+                } else {
+                    strings.push("  \x3c!-- not materialized --!>");
+                }
+                strings.push("</" + tag + ">");
+            }
+            vnode = siblings && vnode_getNextSibling(vnode) || null;
+        } while (vnode);
+        return strings.join("\n" + offset);
+    }
+    const isNumber = ch => 48 <= ch && ch <= 57;
+    const isLowercase = ch => 97 <= ch && ch <= 122;
+    const stack = [];
+    const vnode_getType = vnode => {
+        const type = vnode[VNodeProps.flags];
+        if (type & VNodeFlags.Element) {
+            return 1;
+        }
+        if (type & VNodeFlags.Virtual) {
+            return 11;
+        }
+        if (type & VNodeFlags.Text) {
+            return 3;
+        }
+        throw qError(QError.invalidVNodeType, [ type ]);
+    };
+    const isElement = node => node && "object" == typeof node && 1 === fastNodeType(node);
+    const aPath = [];
+    const bPath = [];
+    const vnode_documentPosition = (a, b) => {
+        if (a === b) {
+            return 0;
+        }
+        let aDepth = -1;
+        let bDepth = -1;
+        for (;a; ) {
+            a = (aPath[++aDepth] = a)[VNodeProps.parent];
+        }
+        for (;b; ) {
+            b = (bPath[++bDepth] = b)[VNodeProps.parent];
+        }
+        for (;aDepth >= 0 && bDepth >= 0; ) {
+            if ((a = aPath[aDepth]) !== (b = bPath[bDepth])) {
+                let cursor = b;
+                do {
+                    if (cursor = vnode_getNextSibling(cursor), cursor === a) {
+                        return 1;
+                    }
+                } while (cursor);
+                cursor = b;
+                do {
+                    if (cursor = cursor[VNodeProps.previousSibling], cursor === a) {
+                        return -1;
+                    }
+                } while (cursor);
+                return 1;
+            }
+            aDepth--, bDepth--;
+        }
+        return aDepth < bDepth ? -1 : 1;
+    };
+    const vnode_getProjectionParentComponent = (vHost, rootVNode) => {
+        let projectionDepth = 1;
+        for (;projectionDepth--; ) {
+            for (;vHost && (!vnode_isVirtualVNode(vHost) || null === vnode_getProp(vHost, "q:renderFn", null)); ) {
+                const qSlotParentProp = vnode_getProp(vHost, ":", null);
+                const qSlotParent = qSlotParentProp && ("string" == typeof qSlotParentProp ? vnode_locate(rootVNode, qSlotParentProp) : qSlotParentProp);
+                const vProjectionParent = vnode_isVirtualVNode(vHost) && qSlotParent;
+                vProjectionParent && projectionDepth++, vHost = vProjectionParent || vnode_getParent(vHost);
+            }
+            projectionDepth > 0 && (vHost = vnode_getParent(vHost));
+        }
+        return vHost;
+    };
+    const VNodeArray = class VNode extends Array {
+        static createElement(flags, parent, previousSibling, nextSibling, firstChild, lastChild, element, elementName) {
+            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
+            return vnode.push(firstChild, lastChild, element, elementName), vnode;
+        }
+        static createText(flags, parent, previousSibling, nextSibling, textNode, text) {
+            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
+            return vnode.push(textNode, text), vnode;
+        }
+        static createVirtual(flags, parent, previousSibling, nextSibling, firstChild, lastChild) {
+            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
+            return vnode.push(firstChild, lastChild), vnode;
+        }
+        constructor(flags, parent, previousSibling, nextSibling) {
+            super(), this.push(flags, parent, previousSibling, nextSibling), build.isDev && (this.toString = vnode_toString);
+        }
+    };
+    let _context;
+    const tryGetInvokeContext = () => {
+        if (!_context) {
+            const context = "undefined" != typeof document && document && document.__q_context__;
+            if (!context) {
+                return;
+            }
+            return isArray(context) ? document.__q_context__ = newInvokeContextFromTuple(context) : context;
+        }
+        return _context;
+    };
+    const getInvokeContext = () => {
+        const ctx = tryGetInvokeContext();
+        if (!ctx) {
+            throw qError(QError.useMethodOutsideContext);
+        }
+        return ctx;
+    };
+    const useInvokeContext = () => {
+        const ctx = tryGetInvokeContext();
+        if (!ctx || "qRender" !== ctx.$event$) {
+            throw qError(QError.useInvokeContext);
+        }
+        return assertDefined(), assertDefined(), ctx;
+    };
+    function useBindInvokeContext(fn) {
+        if (null == fn) {
+            return fn;
+        }
+        const ctx = getInvokeContext();
+        return function(...args) {
+            return invokeApply.call(this, ctx, fn, args);
+        };
+    }
+    function invoke(context, fn, ...args) {
+        return invokeApply.call(this, context, fn, args);
+    }
+    function invokeApply(context, fn, args) {
+        const previousContext = _context;
+        let returnValue;
+        try {
+            _context = context, returnValue = fn.apply(this, args);
+        } finally {
+            _context = previousContext;
+        }
+        return returnValue;
+    }
+    const newInvokeContextFromTuple = ([element, event, url]) => {
+        const container = element.closest(QContainerSelector);
+        const locale = container?.getAttribute("q:locale") || void 0;
+        return locale && function(locale) {
+            _locale = locale;
+        }(locale), newInvokeContext(locale, void 0, element, event, url);
+    };
+    const newInvokeContext = (locale, hostElement, element, event, url) => {
+        const ctx = {
+            $url$: url,
+            $i$: 0,
+            $hostElement$: hostElement,
+            $element$: element,
+            $event$: event,
+            $qrl$: void 0,
+            $effectSubscriber$: void 0,
+            $locale$: locale || ("object" == typeof event && event && "locale" in event ? event.locale : void 0),
+            $container$: void 0
+        };
+        return seal(), ctx;
+    };
+    const untrack = fn => invoke(void 0, fn);
+    const trackInvocation = /*#__PURE__*/ newInvokeContext(void 0, void 0, void 0, "qRender");
+    const trackSignal = (fn, subscriber, property, container, data) => {
+        const previousSubscriber = trackInvocation.$effectSubscriber$;
+        const previousContainer = trackInvocation.$container$;
+        try {
+            return trackInvocation.$effectSubscriber$ = [ subscriber, property ], data && trackInvocation.$effectSubscriber$.push(data), 
+            trackInvocation.$container$ = container, invoke(trackInvocation, fn);
+        } finally {
+            trackInvocation.$effectSubscriber$ = previousSubscriber, trackInvocation.$container$ = previousContainer;
+        }
+    };
+    const trackSignalAndAssignHost = (value, host, property, container, data) => (value instanceof WrappedSignal && value.$hostElement$ !== host && host && (value.$hostElement$ = host), 
+    trackSignal((() => value.value), host, property, container, data));
+    const createContextId = name => (assertTrue(/^[\w/.-]+$/.test(name)), /*#__PURE__*/ Object.freeze({
+        id: fromCamelToKebabCase(name)
+    }));
+    const useContextProvider = (context, newValue) => {
+        const {val, set, iCtx} = useSequentialScope();
+        void 0 === val && (iCtx.$container$.setContext(iCtx.$hostElement$, context, newValue), 
+        set(1));
+    };
+    const ERROR_CONTEXT = /*#__PURE__*/ createContextId("qk-error");
+    function getDomContainer(element) {
+        const qContainerElement = _getQContainerElement(element);
+        if (!qContainerElement) {
+            throw qError(QError.containerNotFound);
+        }
+        return getDomContainerFromQContainerElement(qContainerElement);
+    }
+    function getDomContainerFromQContainerElement(qContainerElement) {
+        const qElement = qContainerElement;
+        let container = qElement.qContainer;
+        if (!container) {
+            container = new DomContainer(qElement);
+            const containerAttributes = {};
+            if (qElement) {
+                const attrs = qElement.attributes;
+                if (attrs) {
+                    for (let index = 0; index < attrs.length; index++) {
+                        const attr = attrs[index];
+                        ":" !== attr.name && (containerAttributes[attr.name] = attr.value);
+                    }
+                }
+            }
+            container.$serverData$ = {
+                containerAttributes
+            }, qElement.setAttribute("q:container", QContainerValue.RESUMED), qElement.qContainer = container;
+        }
+        return container;
+    }
+    function _getQContainerElement(element) {
+        return (Array.isArray(element) ? vnode_getDomParent(element) : element).closest(QContainerSelector);
+    }
+    const isDomContainer = container => container instanceof DomContainer;
+    class DomContainer extends _SharedContainer {
+        element;
+        qContainer;
+        qBase;
+        qManifestHash;
+        rootVNode;
+        document;
+        $journal$;
+        renderDone=null;
+        $rawStateData$;
+        $storeProxyMap$=new WeakMap;
+        $qFuncs$;
+        $instanceHash$;
+        stateData;
+        $styleIds$=null;
+        $vnodeLocate$=id => vnode_locate(this.rootVNode, id);
+        $renderCount$=0;
+        constructor(element) {
+            if (super((() => this.scheduleRender()), (() => vnode_applyJournal(this.$journal$)), {}, element.getAttribute("q:locale")), 
+            this.qContainer = element.getAttribute("q:container"), !this.qContainer) {
+                throw qError(QError.elementWithoutContainer);
+            }
+            this.$journal$ = [ VNodeJournalOpCode.HoistStyles, element.ownerDocument ], this.document = element.ownerDocument, 
+            this.element = element, this.qBase = element.getAttribute("q:base"), this.$instanceHash$ = element.getAttribute("q:instance"), 
+            this.qManifestHash = element.getAttribute("q:manifest-hash"), this.rootVNode = vnode_newUnMaterializedElement(this.element), 
+            this.$rawStateData$ = null, this.stateData = null;
+            const document = this.element.ownerDocument;
+            document.qVNodeData || function(document) {
+                const vNodeDataMap = document.qVNodeData || (document.qVNodeData = new WeakMap);
+                const prototype = document.body;
+                const getAttribute = prototype.getAttribute;
+                const hasAttribute = prototype.hasAttribute;
+                const getNodeType = ((prototype, name) => {
+                    let getter;
+                    for (;prototype && !(getter = Object.getOwnPropertyDescriptor(prototype, name)?.get); ) {
+                        prototype = Object.getPrototypeOf(prototype);
+                    }
+                    return getter || function() {
+                        return this[name];
+                    };
+                })(prototype, "nodeType");
+                const attachVnodeDataAndRefs = element => {
+                    Array.from(element.querySelectorAll('script[type="qwik/vnode"]')).forEach((script => {
+                        script.setAttribute("type", "x-qwik/vnode");
+                        const qContainerElement = script.closest("[q\\:container]");
+                        qContainerElement.qVnodeData = script.textContent, qContainerElement.qVNodeRefs = new Map;
+                    })), element.querySelectorAll("[q\\:shadowroot]").forEach((parent => {
+                        const shadowRoot = parent.shadowRoot;
+                        shadowRoot && attachVnodeDataAndRefs(shadowRoot);
+                    }));
+                };
+                let NodeType;
+                attachVnodeDataAndRefs(document), function(NodeType) {
+                    NodeType[NodeType.CONTAINER_MASK = 1] = "CONTAINER_MASK", NodeType[NodeType.ELEMENT = 2] = "ELEMENT", 
+                    NodeType[NodeType.ELEMENT_CONTAINER = 3] = "ELEMENT_CONTAINER", NodeType[NodeType.ELEMENT_SHADOW_ROOT = 6] = "ELEMENT_SHADOW_ROOT", 
+                    NodeType[NodeType.COMMENT_SKIP_START = 5] = "COMMENT_SKIP_START", NodeType[NodeType.COMMENT_SKIP_END = 8] = "COMMENT_SKIP_END", 
+                    NodeType[NodeType.COMMENT_IGNORE_START = 16] = "COMMENT_IGNORE_START", NodeType[NodeType.COMMENT_IGNORE_END = 32] = "COMMENT_IGNORE_END", 
+                    NodeType[NodeType.COMMENT_ISLAND_START = 65] = "COMMENT_ISLAND_START", NodeType[NodeType.COMMENT_ISLAND_END = 128] = "COMMENT_ISLAND_END", 
+                    NodeType[NodeType.OTHER = 0] = "OTHER";
+                }(NodeType || (NodeType = {}));
+                const getFastNodeType = node => {
+                    const nodeType = getNodeType.call(node);
+                    if (1 === nodeType) {
+                        return null === getAttribute.call(node, "q:container") ? hasAttribute.call(node, "q:shadowroot") ? NodeType.ELEMENT_SHADOW_ROOT : hasAttribute.call(node, ":") ? NodeType.ELEMENT : NodeType.OTHER : NodeType.ELEMENT_CONTAINER;
+                    }
+                    if (8 === nodeType) {
+                        const nodeValue = node.nodeValue || "";
+                        if (nodeValue.startsWith("q:container-island")) {
+                            return NodeType.COMMENT_ISLAND_START;
+                        }
+                        if (nodeValue.startsWith("q:ignore")) {
+                            return NodeType.COMMENT_IGNORE_START;
+                        }
+                        if (nodeValue.startsWith("q:container")) {
+                            return NodeType.COMMENT_SKIP_START;
+                        }
+                        if (nodeValue.startsWith("/q:container-island")) {
+                            return NodeType.COMMENT_ISLAND_END;
+                        }
+                        if (nodeValue.startsWith("/q:ignore")) {
+                            return NodeType.COMMENT_IGNORE_END;
+                        }
+                        if (nodeValue.startsWith("/q:container")) {
+                            return NodeType.COMMENT_SKIP_END;
+                        }
+                    }
+                    return NodeType.OTHER;
+                };
+                const isSeparator = ch => VNodeDataSeparator_ADVANCE_1 <= ch && ch <= VNodeDataSeparator_ADVANCE_8192;
+                const findVDataSectionEnd = (vData, start, end) => {
+                    let depth = 0;
+                    for (;start < end; ) {
+                        const ch = vData.charCodeAt(start);
+                        if (0 === depth && isSeparator(ch)) {
+                            break;
+                        }
+                        ch === VNodeDataChar_OPEN ? depth++ : ch === VNodeDataChar_CLOSE && depth--, start++;
+                    }
+                    return start;
+                };
+                const nextSibling = node => {
+                    for (;node && (node = node.nextSibling) && getFastNodeType(node) === NodeType.OTHER; ) {}
+                    return node;
+                };
+                const firstChild = node => {
+                    for (;node && (node = node.firstChild) && getFastNodeType(node) === NodeType.OTHER; ) {}
+                    return node;
+                };
+                const walkContainer = (walker, containerNode, node, exitNode, vData, qVNodeRefs) => {
+                    const vData_length = vData.length;
+                    let elementIdx = 0;
+                    let vNodeElementIndex = -1;
+                    let vData_start = 0;
+                    let vData_end = 0;
+                    let ch = 0;
+                    let needsToStoreRef = -1;
+                    let nextNode = null;
+                    const howManyElementsToSkip = () => {
+                        let elementsToSkip = 0;
+                        for (;isSeparator(ch = vData.charCodeAt(vData_start)) && (elementsToSkip += 1 << ch - VNodeDataSeparator_ADVANCE_1, 
+                        vData_start++, !(vData_start >= vData_length)); ) {}
+                        return elementsToSkip;
+                    };
+                    do {
+                        if (node === exitNode) {
+                            return;
+                        }
+                        nextNode = null;
+                        const nodeType = node == containerNode ? NodeType.ELEMENT : getFastNodeType(node);
+                        if (nodeType === NodeType.ELEMENT_CONTAINER) {
+                            const container = node;
+                            let cursor = node;
+                            for (;cursor && !(nextNode = nextSibling(cursor)); ) {
+                                cursor = cursor.parentNode;
+                            }
+                            walkContainer(walker, container, node, nextNode, container.qVnodeData || "", container.qVNodeRefs);
+                        } else if (nodeType === NodeType.COMMENT_IGNORE_START) {
+                            let islandNode = node;
+                            do {
+                                if (islandNode = walker.nextNode(), !islandNode) {
+                                    throw new Error(`Island inside \x3c!--${node?.nodeValue}--\x3e not found!`);
+                                }
+                            } while (getFastNodeType(islandNode) !== NodeType.COMMENT_ISLAND_START);
+                            nextNode = null;
+                        } else if (nodeType === NodeType.COMMENT_ISLAND_END) {
+                            nextNode = node;
+                            do {
+                                if (nextNode = walker.nextNode(), !nextNode) {
+                                    throw new Error("Ignore block not closed!");
+                                }
+                            } while (getFastNodeType(nextNode) !== NodeType.COMMENT_IGNORE_END);
+                            nextNode = null;
+                        } else if (nodeType === NodeType.COMMENT_SKIP_START) {
+                            nextNode = node;
+                            do {
+                                if (nextNode = nextSibling(nextNode), !nextNode) {
+                                    throw new Error(`\x3c!--${node?.nodeValue}--\x3e not closed!`);
+                                }
+                            } while (getFastNodeType(nextNode) !== NodeType.COMMENT_SKIP_END);
+                            walkContainer(walker, node, node, nextNode, "", null);
+                        } else if (nodeType === NodeType.ELEMENT_SHADOW_ROOT) {
+                            nextNode = nextSibling(node);
+                            const shadowRootContainer = node;
+                            const shadowRoot = shadowRootContainer?.shadowRoot;
+                            shadowRoot && walkContainer(document.createTreeWalker(shadowRoot, 129), null, firstChild(shadowRoot), null, "", null);
+                        }
+                        if ((nodeType & NodeType.ELEMENT) === NodeType.ELEMENT) {
+                            if (vNodeElementIndex < elementIdx && (-1 === vNodeElementIndex && (vNodeElementIndex = 0), 
+                            vData_start = vData_end, vData_start < vData_length ? (vNodeElementIndex += howManyElementsToSkip(), 
+                            ch === VNodeDataSeparator_REFERENCE && (needsToStoreRef = vNodeElementIndex, vData_start++, 
+                            ch = vData_start < vData_length ? vData.charCodeAt(vData_end) : VNodeDataSeparator_ADVANCE_1), 
+                            vData_end = findVDataSectionEnd(vData, vData_start, vData_length)) : vNodeElementIndex = Number.MAX_SAFE_INTEGER), 
+                            elementIdx === vNodeElementIndex) {
+                                needsToStoreRef === elementIdx && qVNodeRefs.set(elementIdx, node);
+                                const instructions = vData.substring(vData_start, vData_end);
+                                vNodeDataMap.set(node, instructions);
+                            }
+                            elementIdx++;
+                        }
+                    } while (node = nextNode || walker.nextNode());
+                };
+                const walker = document.createTreeWalker(document, 129);
+                walkContainer(walker, null, walker.firstChild(), null, "", null);
+            }(document), this.$rawStateData$ = [], this.stateData = [];
+            const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
+            if (0 !== qwikStates.length) {
+                this.$rawStateData$ = JSON.parse(qwikStates[qwikStates.length - 1].textContent), 
+                this.stateData = wrapDeserializerProxy(this, this.$rawStateData$);
+            }
+            this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
+        }
+        $setRawState$(id, vParent) {
+            this.stateData[id] = vParent;
         }
-        throw throwErrorAndStop("Invalid vnode type.");
-    };
-    const vnode_getParent = vnode => vnode[VNodeProps.parent] || null;
-    const vnode_getNode = vnode => null === vnode || vnode_isVirtualVNode(vnode) ? null : vnode_isElementVNode(vnode) ? vnode[ElementVNodeProps.element] : (assertTrue(vnode_isTextVNode(vnode)), 
-    vnode[TextVNodeProps.node]);
-    function vnode_toString(depth = 10, offset = "", materialize = !1, siblings = !1) {
-        let vnode = this;
-        if (0 === depth) {
-            return "...";
+        parseQRL(qrl) {
+            return inflateQRL(this, parseQRL(qrl));
         }
-        if (null === vnode) {
-            return "null";
+        handleError(err, host) {
+            const errorStore = this.resolveContext(host, ERROR_CONTEXT);
+            if (!errorStore) {
+                throw err;
+            }
+            errorStore.error = err;
         }
-        if (void 0 === vnode) {
-            return "undefined";
+        setContext(host, context, value) {
+            let ctx = this.getHostProp(host, "q:ctx");
+            ctx || this.setHostProp(host, "q:ctx", ctx = []), mapArray_set(ctx, context.id, value, 0);
         }
-        const strings = [];
-        do {
-            if (vnode_isTextVNode(vnode)) {
-                strings.push(qwikDebugToString(vnode_getText(vnode)));
-            } else if (vnode_isVirtualVNode(vnode)) {
-                const attrs = [ "[" + String(vnode[VNodeProps.flags] >>> VNodeFlagsIndex.shift) + "]" ];
-                vnode_getAttrKeys(vnode).forEach((key => {
-                    if ("q:type" !== key) {
-                        const value = vnode_getAttr(vnode, key);
-                        attrs.push(" " + key + "=" + qwikDebugToString(value));
+        resolveContext(host, contextId) {
+            for (;host; ) {
+                const ctx = this.getHostProp(host, "q:ctx");
+                if (ctx) {
+                    const value = mapArray_get(ctx, contextId.id, 0);
+                    if (value) {
+                        return value;
                     }
-                }));
-                const name = VirtualTypeName[vnode_getAttr(vnode, "q:type") || VirtualType.Virtual] || VirtualTypeName[VirtualType.Virtual];
-                strings.push("<" + name + attrs.join("") + ">");
-                const child = vnode_getFirstChild(vnode);
-                child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", !0, !0)), 
-                strings.push("</" + name + ">");
-            } else if (vnode_isElementVNode(vnode)) {
-                const tag = vnode_getElementName(vnode);
-                const attrs = [];
-                const keys = vnode_getAttrKeys(vnode);
-                keys.forEach((key => {
-                    const value = vnode_getAttr(vnode, key);
-                    attrs.push(" " + key + "=" + qwikDebugToString(value));
-                }));
-                const node = vnode_getNode(vnode);
-                if (node) {
-                    const vnodeData = node.ownerDocument.qVNodeData?.get(node);
-                    vnodeData && attrs.push(" q:vnodeData=" + qwikDebugToString(vnodeData));
                 }
-                const domAttrs = node.attributes;
-                for (let i = 0; i < domAttrs.length; i++) {
-                    const attr = domAttrs[i];
-                    -1 === keys.indexOf(attr.name) && attrs.push(" " + attr.name + (attr.value ? "=" + qwikDebugToString(attr.value) : ""));
-                }
-                if (strings.push("<" + tag + attrs.join("") + ">"), vnode_isMaterialized(vnode) || materialize) {
-                    const child = vnode_getFirstChild(vnode);
-                    child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", !0, !0));
-                } else {
-                    strings.push("  \x3c!-- not materialized --!>");
-                }
-                strings.push("</" + tag + ">");
+                host = this.getParentHost(host);
             }
-            vnode = siblings && vnode_getNextSibling(vnode) || null;
-        } while (vnode);
-        return strings.join("\n" + offset);
-    }
-    const isNumber = ch => 48 <= ch && ch <= 57;
-    const isLowercase = ch => 97 <= ch && ch <= 122;
-    const stack = [];
-    const vnode_getType = vnode => {
-        const type = vnode[VNodeProps.flags];
-        if (type & VNodeFlags.Element) {
-            return 1;
         }
-        if (type & VNodeFlags.Virtual) {
-            return 11;
-        }
-        if (type & VNodeFlags.Text) {
-            return 3;
+        getParentHost(host) {
+            let vNode = vnode_getParent(host);
+            for (;vNode; ) {
+                if (vnode_isVirtualVNode(vNode)) {
+                    if (null !== vnode_getProp(vNode, "q:renderFn", null)) {
+                        return vNode;
+                    }
+                    const parent = vnode_getProp(vNode, ":", this.$vnodeLocate$);
+                    if (parent) {
+                        vNode = parent;
+                        continue;
+                    }
+                }
+                vNode = vnode_getParent(vNode);
+            }
+            return null;
         }
-        throw throwErrorAndStop("Unknown vnode type: " + type);
-    };
-    const isElement = node => node && "object" == typeof node && 1 === fastNodeType(node);
-    const aPath = [];
-    const bPath = [];
-    const vnode_documentPosition = (a, b) => {
-        if (a === b) {
-            return 0;
+        setHostProp(host, name, value) {
+            vnode_setProp(host, name, value);
         }
-        let aDepth = -1;
-        let bDepth = -1;
-        for (;a; ) {
-            a = (aPath[++aDepth] = a)[VNodeProps.parent];
+        getHostProp(host, name) {
+            const vNode = host;
+            let getObjectById = null;
+            switch (name) {
+              case "q:seq":
+              case "q:props":
+              case "q:renderFn":
+              case "q:ctx":
+              case "q:subs":
+                getObjectById = this.$getObjectById$;
+                break;
+
+              case "q:seqIdx":
+              case ":onIdx":
+                getObjectById = parseInt;
+            }
+            return vnode_getProp(vNode, name, getObjectById);
         }
-        for (;b; ) {
-            b = (bPath[++bDepth] = b)[VNodeProps.parent];
+        scheduleRender() {
+            return this.$renderCount$++, this.renderDone ||= getPlatform().nextTick((() => this.processChores())), 
+            this.renderDone;
         }
-        for (;aDepth >= 0 && bDepth >= 0; ) {
-            if ((a = aPath[aDepth]) !== (b = bPath[bDepth])) {
-                let cursor = b;
-                do {
-                    if (cursor = vnode_getNextSibling(cursor), cursor === a) {
-                        return 1;
-                    }
-                } while (cursor);
-                cursor = b;
-                do {
-                    if (cursor = cursor[VNodeProps.previousSibling], cursor === a) {
-                        return -1;
+        processChores() {
+            let renderCount = this.$renderCount$;
+            const result = this.$scheduler$(ChoreType.WAIT_FOR_ALL);
+            if (isPromise(result)) {
+                return result.then((async () => {
+                    for (;renderCount !== this.$renderCount$; ) {
+                        renderCount = this.$renderCount$, await this.$scheduler$(ChoreType.WAIT_FOR_ALL);
                     }
-                } while (cursor);
-                return 1;
+                    this.renderDone = null;
+                }));
             }
-            aDepth--, bDepth--;
+            renderCount === this.$renderCount$ ? this.renderDone = null : this.processChores();
         }
-        return aDepth < bDepth ? -1 : 1;
-    };
-    const vnode_getProjectionParentComponent = (vHost, rootVNode) => {
-        let projectionDepth = 1;
-        for (;projectionDepth--; ) {
-            for (;vHost && (!vnode_isVirtualVNode(vHost) || null === vnode_getProp(vHost, "q:renderFn", null)); ) {
-                const qSlotParentProp = vnode_getProp(vHost, ":", null);
-                const qSlotParent = qSlotParentProp && ("string" == typeof qSlotParentProp ? vnode_locate(rootVNode, qSlotParentProp) : qSlotParentProp);
-                const vProjectionParent = vnode_isVirtualVNode(vHost) && qSlotParent;
-                vProjectionParent && projectionDepth++, vHost = vProjectionParent || vnode_getParent(vHost);
+        ensureProjectionResolved(vNode) {
+            if (!(vNode[VNodeProps.flags] & VNodeFlags.Resolved)) {
+                vNode[VNodeProps.flags] |= VNodeFlags.Resolved;
+                for (let i = vnode_getPropStartIndex(vNode); i < vNode.length; i += 2) {
+                    if (isSlotProp(vNode[i])) {
+                        const value = vNode[i + 1];
+                        "string" == typeof value && (vNode[i + 1] = this.$vnodeLocate$(value));
+                    }
+                }
             }
-            projectionDepth > 0 && (vHost = vnode_getParent(vHost));
-        }
-        return vHost;
-    };
-    const VNodeArray = class VNode extends Array {
-        static createElement(flags, parent, previousSibling, nextSibling, firstChild, lastChild, element, elementName) {
-            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-            return vnode.push(firstChild, lastChild, element, elementName), vnode;
-        }
-        static createText(flags, parent, previousSibling, nextSibling, textNode, text) {
-            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-            return vnode.push(textNode, text), vnode;
         }
-        static createVirtual(flags, parent, previousSibling, nextSibling, firstChild, lastChild) {
-            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-            return vnode.push(firstChild, lastChild), vnode;
+        $getObjectById$=id => ("string" == typeof id && (id = parseFloat(id)), assertTrue(), 
+        this.stateData[id]);
+        getSyncFn(id) {
+            const fn = this.$qFuncs$[id];
+            return assertTrue(), fn;
         }
-        constructor(flags, parent, previousSibling, nextSibling) {
-            super(), this.push(flags, parent, previousSibling, nextSibling), build.isDev && (this.toString = vnode_toString);
+        $appendStyle$(content, styleId, host, scoped) {
+            if (scoped) {
+                const scopedStyleIdsString = this.getHostProp(host, "q:sstyle");
+                const scopedStyleIds = new Set(function(scopedStyleIds) {
+                    return scopedStyleIds?.split(" ") ?? null;
+                }(scopedStyleIdsString));
+                scopedStyleIds.add(styleId), this.setHostProp(host, "q:sstyle", function(scopedStyleIds) {
+                    return Array.from(scopedStyleIds).join(" ");
+                }(scopedStyleIds));
+            }
+            if (null == this.$styleIds$ && (this.$styleIds$ = new Set, this.element.querySelectorAll("style[q\\:style]").forEach((style => {
+                this.$styleIds$.add(style.getAttribute("q:style"));
+            }))), !this.$styleIds$.has(styleId)) {
+                this.$styleIds$.add(styleId);
+                const styleElement = this.document.createElement("style");
+                styleElement.setAttribute("q:style", styleId), styleElement.textContent = content, 
+                this.$journal$.push(VNodeJournalOpCode.Insert, this.document.head, null, styleElement);
+            }
         }
-    };
-    var ExperimentalFeatures;
-    var VNodeDataFlag;
-    !function(ExperimentalFeatures) {
-        ExperimentalFeatures.preventNavigate = "preventNavigate", ExperimentalFeatures.valibot = "valibot", 
-        ExperimentalFeatures.noSPA = "noSPA", ExperimentalFeatures.webWorker = "webWorker", 
-        ExperimentalFeatures.insights = "insights";
-    }(ExperimentalFeatures || (ExperimentalFeatures = {})), function(VNodeDataFlag) {
-        VNodeDataFlag[VNodeDataFlag.NONE = 0] = "NONE", VNodeDataFlag[VNodeDataFlag.TEXT_DATA = 1] = "TEXT_DATA", 
-        VNodeDataFlag[VNodeDataFlag.VIRTUAL_NODE = 2] = "VIRTUAL_NODE", VNodeDataFlag[VNodeDataFlag.REFERENCE = 4] = "REFERENCE", 
-        VNodeDataFlag[VNodeDataFlag.SERIALIZE = 8] = "SERIALIZE";
-    }(VNodeDataFlag || (VNodeDataFlag = {}));
+    }
     const deserializedProxyMap = new WeakMap;
     const unwrapDeserializerProxy = value => {
         const unwrapped = "object" == typeof value && null !== value && value[SERIALIZER_PROXY_UNWRAP];
@@ -3763,7 +3874,10 @@
                     const valType = data[i + 2];
                     const valData = data[i + 3];
                     valType === TypeIds.RootRef || valType >= TypeIds.Error ? Object.defineProperty(target, key, {
-                        get: () => deserializeData(container, valType, valData),
+                        get() {
+                            const value = deserializeData(container, valType, valData);
+                            return target[key] = value, value;
+                        },
                         set(value) {
                             Object.defineProperty(target, key, {
                                 value,
@@ -3824,7 +3938,7 @@
                     const signal = target;
                     const d = data;
                     signal.$func$ = container.getSyncFn(d[0]), signal.$args$ = d[1], signal.$effectDependencies$ = d[2], 
-                    signal.$untrackedValue$ = d[3], signal.$effects$ = d.slice(4);
+                    signal.$untrackedValue$ = d[3], signal.$hostElement$ = d[4], signal.$effects$ = d.slice(5);
                     break;
                 }
 
@@ -3916,11 +4030,14 @@
                 break;
 
               case TypeIds.EffectData:
-                target.data = data[0];
-                break;
+                {
+                    const effectData = target;
+                    effectData.data.$scopedStyleIdPrefix$ = data[0], effectData.data.$isConst$ = data[1];
+                    break;
+                }
 
               default:
-                return throwErrorAndStop("Not implemented");
+                throw qError(QError.serializeErrorNotImplemented, [ typeId ]);
             }
         }
     };
@@ -4032,13 +4149,16 @@
                 return vnodeOrDocument;
             }
             const vNode = retrieveVNodeOrDocument(container, value);
-            return vnode_isVNode(vNode) ? vnode_getNode(vNode) : throwErrorAndStop("expected vnode for ref prop, but got " + typeof vNode);
+            if (vnode_isVNode(vNode)) {
+                return vnode_getNode(vNode);
+            }
+            throw qError(QError.serializeErrorExpectedVNode, [ typeof vNode ]);
 
           case TypeIds.EffectData:
-            return new EffectData(null);
+            return new EffectPropData({});
 
           default:
-            return throwErrorAndStop("unknown allocate type: " + typeId);
+            throw qError(QError.serializeErrorCannotAllocate, [ typeId ]);
         }
     };
     function retrieveVNodeOrDocument(container, value) {
@@ -4063,6 +4183,7 @@
         return qrl.$captureRef$ = captureIds ? captureIds.map((id => container.$getObjectById$(id))) : null, 
         container.element && qrl.$setContainer$(container.element), qrl;
     }
+    let isDomRef = () => !1;
     const createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
         if (!writer) {
             const buffer = [];
@@ -4083,8 +4204,8 @@
             roots.push(obj)), id;
         };
         const isSsrNode = NodeConstructor ? obj => obj instanceof NodeConstructor : () => !1;
-        const isDomRef = DomRefConstructor ? obj => obj instanceof DomRefConstructor : () => !1;
-        return {
+        return isDomRef = DomRefConstructor ? obj => obj instanceof DomRefConstructor : () => !1, 
+        {
             $serialize$() {
                 !function(serializationContext) {
                     const {$writer$, $isSsrNode$, $isDomRef$, $setProp$, $storeProxyMap$} = serializationContext;
@@ -4146,8 +4267,13 @@
                                 const seen = depth > 1 && serializationContext.$wasSeen$(value);
                                 "number" == typeof seen && seen >= 0 ? output(TypeIds.RootRef, seen) : output(TypeIds.String, value);
                             }
+                        } else if (void 0 === value) {
+                            output(TypeIds.Constant, Constants.Undefined);
                         } else {
-                            void 0 === value ? output(TypeIds.Constant, Constants.Undefined) : value === NEEDS_COMPUTATION ? output(TypeIds.Constant, Constants.NEEDS_COMPUTATION) : throwErrorAndStop("Unknown type: " + typeof value);
+                            if (value !== NEEDS_COMPUTATION) {
+                                throw qError(QError.serializeErrorUnknownType, [ typeof value ]);
+                            }
+                            output(TypeIds.Constant, Constants.NEEDS_COMPUTATION);
                         }
                     };
                     const writeObjectValue = (value, idx) => {
@@ -4163,8 +4289,8 @@
                             const constProps = value[_CONST_PROPS];
                             const out = constProps ? [ varProps, constProps ] : Object.keys(varProps).length ? [ varProps ] : 0;
                             output(TypeIds.PropsProxy, out);
-                        } else if (value instanceof EffectData) {
-                            output(TypeIds.EffectData, [ value.data ]);
+                        } else if (value instanceof EffectPropData) {
+                            output(TypeIds.EffectData, [ value.data.$scopedStyleIdPrefix$, value.data.$isConst$ ]);
                         } else if (isStore(value)) {
                             if (function(value) {
                                 return "__brand" in value && "resource" === value.__brand;
@@ -4172,7 +4298,7 @@
                                 serializationContext.$resources$.add(value);
                                 const res = promiseResults.get(value.value);
                                 if (!res) {
-                                    return throwErrorAndStop("Unvisited Resource");
+                                    throw qError(QError.serializeErrorUnvisited, [ "resource" ]);
                                 }
                                 output(TypeIds.Resource, [ ...res, getStoreHandler(value).$effects$ ]);
                             } else {
@@ -4206,11 +4332,11 @@
                                 output(TypeIds.Object, out);
                             }
                         } else if ($isDomRef$(value)) {
-                            output(TypeIds.RefVNode, value.id);
+                            value.$ssrNode$.vnodeData[0] |= VNodeDataFlag.SERIALIZE, output(TypeIds.RefVNode, value.$ssrNode$.id);
                         } else if (value instanceof Signal) {
                             const v = value instanceof ComputedSignal && (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$)) ? NEEDS_COMPUTATION : value.$untrackedValue$;
                             if (value instanceof WrappedSignal) {
-                                output(TypeIds.WrappedSignal, [ ...serializeWrappingFn(serializationContext, value), value.$effectDependencies$, v, ...value.$effects$ || [] ]);
+                                output(TypeIds.WrappedSignal, [ ...serializeWrappingFn(serializationContext, value), value.$effectDependencies$, v, value.$hostElement$, ...value.$effects$ || [] ]);
                             } else if (value instanceof ComputedSignal) {
                                 const out = [ value.$computeQrl$, value.$effects$ ];
                                 v !== NEEDS_COMPUTATION && out.push(v), output(TypeIds.ComputedSignal, out);
@@ -4266,12 +4392,12 @@
                         } else if (isPromise(value)) {
                             const res = promiseResults.get(value);
                             if (!res) {
-                                return throwErrorAndStop("Unvisited Promise");
+                                throw qError(QError.serializeErrorUnvisited, [ "promise" ]);
                             }
                             output(TypeIds.Promise, res);
                         } else {
                             if (!(value instanceof Uint8Array)) {
-                                return throwErrorAndStop("implement");
+                                throw qError(QError.serializeErrorUnknownType, [ typeof value ]);
                             }
                             {
                                 let buf = "";
@@ -4299,7 +4425,10 @@
             $addRoot$,
             $getRootId$: obj => {
                 const id = map.get(obj);
-                return id && -1 !== id ? id : throwErrorAndStop("Missing root id for: ", obj);
+                if (!id || -1 === id) {
+                    throw qError(QError.serializeErrorMissingRootId, [ obj ]);
+                }
+                return id;
             },
             $syncFns$: syncFns,
             $addSyncFn$: (funcStr, argCount, fn) => {
@@ -4351,13 +4480,17 @@
                         const v = obj instanceof WrappedSignal ? obj.untrackedValue : obj instanceof ComputedSignal && (obj.$invalid$ || fastSkipSerialize(obj)) ? NEEDS_COMPUTATION : obj.$untrackedValue$;
                         v !== NEEDS_COMPUTATION && discoveredValues.push(v), obj.$effects$ && discoveredValues.push(...obj.$effects$), 
                         obj instanceof WrappedSignal ? (obj.$effectDependencies$ && discoveredValues.push(...obj.$effectDependencies$), 
-                        obj.$args$ && discoveredValues.push(...obj.$args$)) : obj instanceof ComputedSignal && discoveredValues.push(obj.$computeQrl$);
+                        obj.$args$ && discoveredValues.push(...obj.$args$), obj.$hostElement$ && discoveredValues.push(obj.$hostElement$)) : obj instanceof ComputedSignal && discoveredValues.push(obj.$computeQrl$);
                     } else if (obj instanceof Task) {
                         discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$, obj.$effectDependencies$);
                     } else if (isSsrNode(obj)) {
-                        discoveredValues.push(obj.vnodeData);
+                        if (discoverValuesForVNodeData(obj.vnodeData, discoveredValues), obj.childrenVNodeData && obj.childrenVNodeData.length) {
+                            for (const data of obj.childrenVNodeData) {
+                                discoverValuesForVNodeData(data, discoveredValues);
+                            }
+                        }
                     } else if (isDomRef(obj)) {
-                        discoveredValues.push(obj.id);
+                        discoveredValues.push(obj.$ssrNode$.id);
                     } else if (isJSXNode(obj)) {
                         discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
                     } else if (Array.isArray(obj)) {
@@ -4372,11 +4505,11 @@
                         }), (error => {
                             promiseResults.set(obj, [ !1, error ]), discoveredValues.push(error);
                         })), promises.push(obj);
-                    } else if (obj instanceof EffectData) {
+                    } else if (obj instanceof EffectPropData) {
                         discoveredValues.push(obj.data);
                     } else {
                         if (!isObjectLiteral(obj)) {
-                            return throwErrorAndStop("Unknown type: " + obj);
+                            throw qError(QError.serializeErrorUnknownType, [ obj ]);
                         }
                         Object.entries(obj).forEach((([key, value]) => {
                             discoveredValues.push(key, value);
@@ -4408,6 +4541,19 @@
             $prepVNodeData$: prepVNodeData
         };
     };
+    const isSsrAttrs = value => Array.isArray(value) && value.length > 0;
+    const discoverValuesForVNodeData = (vnodeData, discoveredValues) => {
+        for (const value of vnodeData) {
+            if (isSsrAttrs(value)) {
+                for (let i = 1; i < value.length; i += 2) {
+                    if ("q:key" === value[i - 1]) {
+                        continue;
+                    }
+                    discoveredValues.push(value[i]);
+                }
+            }
+        }
+    };
     const promiseResults = new WeakMap;
     function serializeWrappingFn(serializationContext, value) {
         value.$funcStr$ && "{" === value.$funcStr$[0] && (value.$funcStr$ = `(${value.$funcStr$})`);
@@ -4431,7 +4577,10 @@
                 backChannel || (backChannel = globalThis[QRL_RUNTIME_CHUNK] = new Map), backChannel.set(value.$symbol$, value._devOnlySymbolRef), 
                 chunk || (chunk = QRL_RUNTIME_CHUNK);
             }
-            chunk || throwErrorAndStop("Missing chunk for: " + value.$symbol$), chunk.startsWith("./") && (chunk = chunk.slice(2));
+            if (!chunk) {
+                throw qError(QError.qrlMissingChunk, [ value.$symbol$ ]);
+            }
+            chunk.startsWith("./") && (chunk = chunk.slice(2));
         }
         let qrlStringInline = `${chunk}#${symbol}`;
         if (Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0) {
@@ -4535,6 +4684,9 @@
             if (value instanceof Uint8Array) {
                 return !0;
             }
+            if (isDomRef?.(value)) {
+                return !0;
+            }
         } else if ("function" == typeof value && (isQrl(value) || isQwikComponent(value))) {
             return !0;
         }
@@ -4600,7 +4752,7 @@
                     let expectIndex = 0;
                     return unwrapped.forEach(((v, i) => {
                         if (i !== expectIndex) {
-                            throw qError(3, unwrapped);
+                            throw qError(QError.verifySerializable, [ unwrapped ]);
                         }
                         _verifySerializable(v, seen, ctx + "[" + i + "]"), expectIndex = i + 1;
                     })), value;
@@ -4626,7 +4778,7 @@
                 const fnName = value.name;
                 message += ` because it's a function named "${fnName}". You might need to convert it to a QRL using $(fn):\n\nconst ${fnName} = $(${String(value)});\n\nPlease check out https://qwik.dev/docs/advanced/qrl/ for more information.`;
             }
-            console.error("Trying to serialize", value), throwErrorAndStop(message);
+            throw qError(QError.verifySerializable, [ message ]);
         }
         return value;
     };
@@ -4647,7 +4799,7 @@
         function bindFnToContext(currentCtx, beforeFn) {
             return (...args) => maybeThen(resolveLazy(), (fn => {
                 if (!isFunction(fn)) {
-                    throw qError(10);
+                    throw qError(QError.qrlIsNotFunction);
                 }
                 if (beforeFn && !1 === beforeFn()) {
                     return;
@@ -4948,7 +5100,22 @@
             onReady = () => q.forEach(q.push = v => sw.active.postMessage(v)), sw.installing ? sw.installing.addEventListener("statechange", (e => "activated" == e.target.state && onReady())) : onReady();
         })), v && q.push([ "verbose" ]), document.addEventListener("qprefetch", (e => e.detail.bundles && q.push([ "prefetch", b, ...e.detail.bundles ])));
     }).toString();
-    exports.$ = $, exports.Fragment = Fragment, exports.PrefetchGraph = (opts = {}) => {
+    Object.defineProperty(exports, "isBrowser", {
+        enumerable: !0,
+        get: function() {
+            return build.isBrowser;
+        }
+    }), Object.defineProperty(exports, "isDev", {
+        enumerable: !0,
+        get: function() {
+            return build.isDev;
+        }
+    }), Object.defineProperty(exports, "isServer", {
+        enumerable: !0,
+        get: function() {
+            return build.isServer;
+        }
+    }), exports.$ = $, exports.Fragment = Fragment, exports.PrefetchGraph = (opts = {}) => {
         const isTest = (void 0).TEST;
         if (build.isDev && !isTest) {
             return _jsxSorted("script", null, {
@@ -5010,7 +5177,7 @@
     }), props.children, jsx(SSRComment, {
         data: "qkssr-po"
     }) ], exports.SkipRender = SkipRender, exports.Slot = Slot, exports._CONST_PROPS = _CONST_PROPS, 
-    exports._DomContainer = DomContainer, exports._EMPTY_ARRAY = EMPTY_ARRAY, exports._EffectData = EffectData, 
+    exports._DomContainer = DomContainer, exports._EMPTY_ARRAY = EMPTY_ARRAY, exports._EffectData = EffectPropData, 
     exports._IMMUTABLE = _IMMUTABLE, exports._SharedContainer = _SharedContainer, exports._VAR_PROPS = _VAR_PROPS, 
     exports._deserialize = function(rawStateData, element) {
         if (null == rawStateData) {
@@ -5153,7 +5320,7 @@
         if (void 0 !== defaultValue) {
             return set(defaultValue);
         }
-        throw qError(13, context.id);
+        throw qError(QError.notFoundContext, [ context.id ]);
     }, exports.useContextProvider = useContextProvider, exports.useErrorBoundary = () => {
         const store = useStore({
             error: void 0