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

package/dist/optimizer.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core/optimizer 2.0.0-alpha.3-dev+418fd6d
+ * @qwik.dev/core/optimizer 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
@@ -1226,7 +1226,7 @@ globalThis.qwikOptimizer = function(module) {
   }
   var QWIK_BINDING_MAP = {};
   var versions = {
-    qwik: "2.0.0-alpha.3-dev+418fd6d"
+    qwik: "2.0.0-alpha.4-dev+374e0d6"
   };
   async function getSystem() {
     const sysEnv = getEnv();
@@ -1534,7 +1534,7 @@ globalThis.qwikOptimizer = function(module) {
       }
       return canonPath(bundle.fileName);
     };
-    const qrlNames = new Set([ ...segments.map((h2 => h2.name)) ]);
+    const qrlNames = new Set([ ...segments.map((h => h.name)) ]);
     for (const outputBundle of Object.values(outputBundles)) {
       if ("chunk" !== outputBundle.type) {
         continue;
@@ -2244,7 +2244,7 @@ globalThis.qwikOptimizer = function(module) {
       const generateManifest = async () => {
         const optimizer2 = getOptimizer();
         const path = optimizer2.sys.path;
-        const segments = Array.from(clientResults.values()).flatMap((r => r.modules)).map((mod => mod.segment)).filter((h2 => !!h2));
+        const segments = Array.from(clientResults.values()).flatMap((r => r.modules)).map((mod => mod.segment)).filter((h => !!h));
         const manifest = generateManifestFromBundles(path, segments, injections, rollupBundle, opts, debug);
         for (const symbol of Object.values(manifest.symbols)) {
           symbol.origin && (symbol.origin = normalizePath(symbol.origin));
@@ -2744,7 +2744,7 @@ globalThis.qwikOptimizer = function(module) {
     return `Img${toPascalCase(value)}`;
   }
   function toPascalCase(string) {
-    return `${string}`.toLowerCase().replace(new RegExp(/[-_]+/, "g"), " ").replace(new RegExp(/[^\w\s]/, "g"), "").replace(new RegExp(/\s+(.)(\w*)/, "g"), (($1, $22, $3) => `${$22.toUpperCase() + $3}`)).replace(new RegExp(/\w/), (s => s.toUpperCase()));
+    return `${string}`.toLowerCase().replace(new RegExp(/[-_]+/, "g"), " ").replace(new RegExp(/[^\w\s]/, "g"), "").replace(new RegExp(/\s+(.)(\w*)/, "g"), (($1, $2, $3) => `${$2.toUpperCase() + $3}`)).replace(new RegExp(/\w/), (s => s.toUpperCase()));
   }
   var FORCE_COLOR;
   var NODE_DISABLE_COLORS;
@@ -2802,7 +2802,7 @@ globalThis.qwikOptimizer = function(module) {
   var qSerialize = false !== globalThis.qSerialize;
   var qDynamicPlatform = false !== globalThis.qDynamicPlatform;
   var qTest = true === globalThis.qTest;
-  var qRuntimeQrl = true === globalThis.qRuntimeQrl;
+  globalThis.qRuntimeQrl;
   var seal = obj => {
     qDev && Object.seal(obj);
   };
@@ -2823,7 +2823,7 @@ globalThis.qwikOptimizer = function(module) {
   };
   var createAndLogError = (asyncThrow, message, ...optionalParams) => {
     const err = message instanceof Error ? message : new Error(message);
-    console.error("%cQWIK ERROR", STYLE, err.message, ...optionalParams, err.stack);
+    !qTest && console.error("%cQWIK ERROR", STYLE, err.message, ...optionalParams, err.stack);
     asyncThrow && !qTest && setTimeout((() => {
       throw err;
     }), 0);
@@ -2872,26 +2872,20 @@ globalThis.qwikOptimizer = function(module) {
   }
   var codeToText = (code, ...parts) => {
     if (qDev) {
-      const MAP = [ "Error while serializing class or style attributes", "Can not serialize a HTML Node that is not an Element", "Runtime but no instance found on element.", "Only primitive and object literals can be serialized", "Crash while rendering", "You can render over a existing q:container. Skipping render().", "Set property {{0}}", "Only function's and 'string's are supported.", "Only objects can be wrapped in 'QObject'", "Only objects literals can be wrapped in 'QObject'", "QRL is not a function", "Dynamic import not found", "Unknown type argument", "Actual value for useContext({{0}}) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.", "Invoking 'use*()' method outside of invocation context.", "Cant access renderCtx for existing context", "Cant access document for existing context", "props are immutable", "<div> component can only be used at the root of a Qwik component$()", "Props are immutable by default.", "Calling a 'use*()' method outside 'component$(() => { HERE })' is not allowed. 'use*()' methods provide hooks to the 'component$' state and lifecycle, ie 'use' hooks can only be called synchronously within the 'component$' function or another 'use' method.\nSee https://qwik.dev/docs/components/tasks/#use-method-rules", "Container is already paused. Skipping", "", "When rendering directly on top of Document, the root node must be a <html>", "A <html> node must have 2 children. The first one <head> and the second one a <body>", 'Invalid JSXNode type "{{0}}". It must be either a function or a string. Found:', "Tracking value changes can only be done to useStore() objects and component props", "Missing Object ID for captured object", 'The provided Context reference "{{0}}" is not a valid context created by createContextId()', "<html> is the root container, it can not be rendered inside a component", "QRLs can not be resolved because it does not have an attached container. This means that the QRL does not know where it belongs inside the DOM, so it cant dynamically import() from a relative path.", "QRLs can not be dynamically resolved, because it does not have a chunk path", "The JSX ref attribute must be a Signal" ];
+      const MAP = [ "Error while serializing class or style attributes", "", "", "Only primitive and object literals can be serialized. {{0}}", "", "You can render over a existing q:container. Skipping render().", "", "", "", "", "QRL is not a function", "Dynamic import not found", "Unknown type argument", "Actual value for useContext({{0}}) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.", "Invoking 'use*()' method outside of invocation context.", "", "", "", "", "", "Calling a 'use*()' method outside 'component$(() => { HERE })' is not allowed. 'use*()' methods provide hooks to the 'component$' state and lifecycle, ie 'use' hooks can only be called synchronously within the 'component$' function or another 'use' method.\nSee https://qwik.dev/docs/components/tasks/#use-method-rules", "", "", "", "", "", "", "", 'The provided Context reference "{{0}}" is not a valid context created by createContextId()', "SsrError(tag): {{0}}", "QRLs can not be resolved because it does not have an attached container. This means that the QRL does not know where it belongs inside the DOM, so it cant dynamically import() from a relative path.", "QRLs can not be dynamically resolved, because it does not have a chunk path", "The JSX ref attribute must be a Signal", "Serialization Error: Deserialization of data type {{0}} is not implemented", "Serialization Error: Expected vnode for ref prop, but got {{0}}", "Serialization Error: Cannot allocate data type {{0}}", "Serialization Error: Missing root id for {{0}}", "Serialization Error: Serialization of data type {{0}} is not implemented", "Serialization Error: Unvisited {{0}}", "Serialization Error: Missing QRL chunk for {{0}}", "The value of the textarea must be a string", "Unable to find q:container", "Element must have 'q:container' attribute.", "Unknown vnode type {{0}}.", "Materialize error: missing element: {{0}} {{1}} {{2}}", "SsrError: {{0}}", "Cannot coerce a Signal, use `.value` instead", "useComputedSignal$ QRL {{0}} {{1}} returned a Promise", "ComputedSignal is read-only", "WrappedSignal is read-only", "SsrError: Promises not expected here.", "Attribute value is unsafe for SSR" ];
       let text = MAP[code] ?? "";
       parts.length && (text = text.replaceAll(/{{(\d+)}}/g, ((_, index) => {
         let v = parts[index];
         v && "object" === typeof v && v.constructor === Object && (v = JSON.stringify(v).slice(0, 50));
         return v;
       })));
-      return `Code(${code}): ${text}`;
+      return `Code(Q${code}): ${text}`;
     }
-    return `Code(${code}) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L${8 + code}`;
+    return `Code(Q${code}) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L${8 + code}`;
   };
-  var QError_stringifyClassOrStyle = 0;
-  var QError_verifySerializable = 3;
-  var QError_qrlIsNotFunction = 10;
-  var QError_useInvokeContext = 20;
-  var QError_qrlMissingContainer = 30;
-  var QError_qrlMissingChunk = 31;
-  var qError = (code, ...parts) => {
-    const text = codeToText(code, ...parts);
-    return logErrorAndStop(text, ...parts);
+  var qError = (code, errorMessageArgs = []) => {
+    const text = codeToText(code, ...errorMessageArgs);
+    return logErrorAndStop(text, ...errorMessageArgs);
   };
   var createPlatform = () => ({
     isServer: isServer,
@@ -2905,10 +2899,10 @@ globalThis.qwikOptimizer = function(module) {
         }
       }
       if (!url) {
-        throw qError(QError_qrlMissingChunk, symbolName);
+        throw qError(31, [ symbolName ]);
       }
       if (!containerEl) {
-        throw qError(QError_qrlMissingContainer, url, symbolName);
+        throw qError(30, [ url, symbolName ]);
       }
       const urlDoc = toUrl(containerEl.ownerDocument, containerEl, url).toString();
       const urlCopy = new URL(urlDoc);
@@ -2955,7 +2949,7 @@ globalThis.qwikOptimizer = function(module) {
   var maybeThen = (valueOrPromise, thenFn) => isPromise(valueOrPromise) ? valueOrPromise.then(thenFn, shouldNotError) : thenFn(valueOrPromise);
   var maybeThenPassError = (valueOrPromise, thenFn) => isPromise(valueOrPromise) ? valueOrPromise.then(thenFn) : thenFn(valueOrPromise);
   var shouldNotError = reason => {
-    throwErrorAndStop("QWIK ERROR:", reason);
+    throwErrorAndStop(reason);
   };
   var delay = timeout => new Promise((resolve => {
     setTimeout(resolve, timeout);
@@ -2979,25 +2973,6 @@ globalThis.qwikOptimizer = function(module) {
   var isString = v => "string" === typeof v;
   var isFunction = v => "function" === typeof v;
   var isDev2 = true;
-  var runtimeSymbolId = 0;
-  var $2 = expression => {
-    if (!qRuntimeQrl && qDev) {
-      throw new Error("Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.");
-    }
-    return createQRL(null, "s" + runtimeSymbolId++, expression, null, null, null, null);
-  };
-  var dollar = $2;
-  var eventQrl = qrl2 => qrl2;
-  var EMPTY_ARRAY = [];
-  var EMPTY_OBJ = {};
-  Object.freeze(EMPTY_ARRAY);
-  Object.freeze(EMPTY_OBJ);
-  Symbol("proxy target");
-  Symbol("proxy flags");
-  Symbol("proxy manager");
-  var _CONST_PROPS = Symbol("CONST");
-  var _VAR_PROPS = Symbol("VAR");
-  Symbol("IMMUTABLE");
   var DEBUG_TYPE = "q:type";
   var START = "";
   var END = "";
@@ -3048,6 +3023,7 @@ globalThis.qwikOptimizer = function(module) {
   var ELEMENT_PROPS = "q:props";
   var ELEMENT_SEQ = "q:seq";
   var ELEMENT_SEQ_IDX = "q:seqIdx";
+  var Q_PREFIX = "q:";
   var NON_SERIALIZABLE_MARKER_PREFIX = ":";
   var USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + "on";
   var USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + "onIdx";
@@ -3058,32 +3034,16 @@ globalThis.qwikOptimizer = function(module) {
   }
   globalThis.QWIK_DOM_VERSION;
   var isQrl = value => "function" === typeof value && "function" === typeof value.getSymbol;
-  var useSequentialScope = () => {
-    const iCtx = useInvokeContext();
-    const hostElement = iCtx.$hostElement$;
-    const host = hostElement;
-    let seq = iCtx.$container$.getHostProp(host, ELEMENT_SEQ);
-    if (null === seq) {
-      seq = [];
-      iCtx.$container$.setHostProp(host, ELEMENT_SEQ, seq);
-    }
-    let seqIdx = iCtx.$container$.getHostProp(host, ELEMENT_SEQ_IDX);
-    null === seqIdx && (seqIdx = 0);
-    iCtx.$container$.setHostProp(host, ELEMENT_SEQ_IDX, seqIdx + 1);
-    while (seq.length <= seqIdx) {
-      seq.push(void 0);
-    }
-    const set = value => {
-      qDev && qSerialize && verifySerializable(value);
-      return seq[seqIdx] = value;
-    };
-    return {
-      val: seq[seqIdx],
-      set: set,
-      i: seqIdx,
-      iCtx: iCtx
-    };
-  };
+  var EMPTY_ARRAY = [];
+  var EMPTY_OBJ = {};
+  Object.freeze(EMPTY_ARRAY);
+  Object.freeze(EMPTY_OBJ);
+  var Slot = props => _jsxSorted(Virtual, null, {
+    [QSlotS]: ""
+  }, props.children, 0, props.name ?? "");
+  var SkipRender = Symbol("skip render");
+  var SSRRaw = () => null;
+  var SSRComment = () => null;
   var isJsxPropertyAnEventName = name => (name.startsWith("on") || name.startsWith("window:on") || name.startsWith("document:on")) && name.endsWith("$");
   var isHtmlAttributeAnEventName = name => name.startsWith("on:") || name.startsWith("on-window:") || name.startsWith("on-document:");
   var getEventNameFromJsxProp = name => {
@@ -3135,486 +3095,303 @@ globalThis.qwikOptimizer = function(module) {
   function isPreventDefault(key) {
     return key.startsWith("preventdefault:");
   }
-  var createContextId = name => {
-    assertTrue(/^[\w/.-]+$/.test(name), "Context name must only contain A-Z,a-z,0-9, _", name);
-    return Object.freeze({
-      id: fromCamelToKebabCase(name)
-    });
+  var 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" ]);
+  var isUnitlessNumber = name => unitlessNumbers.has(name);
+  var serializeClass = obj => {
+    if (!obj) {
+      return "";
+    }
+    if (isString(obj)) {
+      return obj.trim();
+    }
+    const classes = [];
+    if (isArray(obj)) {
+      for (const o of obj) {
+        const classList = serializeClass(o);
+        classList && classes.push(classList);
+      }
+    } else {
+      for (const [key, value] of Object.entries(obj)) {
+        value && classes.push(key.trim());
+      }
+    }
+    return classes.join(" ");
   };
-  var ERROR_CONTEXT = createContextId("qk-error");
-  var isRecoverable = err => {
-    if (err && err instanceof Error && "plugin" in err) {
-      return false;
+  var fromCamelToKebabCaseWithDash = text => text.replace(/([A-Z])/g, "-$1").toLowerCase();
+  var stringifyStyle = obj => {
+    if (null == obj) {
+      return "";
     }
-    return true;
+    if ("object" == typeof obj) {
+      if (isArray(obj)) {
+        throw qError(0, [ obj, "style" ]);
+      }
+      {
+        const chunks = [];
+        for (const key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const value = obj[key];
+            null != value && "function" !== typeof value && (key.startsWith("--") ? chunks.push(key + ":" + value) : chunks.push(fromCamelToKebabCaseWithDash(key) + ":" + setValueForStyle(key, value)));
+          }
+        }
+        return chunks.join(";");
+      }
+    }
+    return String(obj);
   };
-  function isSlotProp(prop) {
-    return !prop.startsWith("q:") && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
-  }
-  function isParentSlotProp(prop) {
-    return prop.startsWith(QSlotParent);
+  var serializeBooleanOrNumberAttribute = value => null != value ? String(value) : null;
+  function serializeAttribute(key, value, styleScopedId) {
+    if (isClassAttr(key)) {
+      const serializedClass = serializeClass(value);
+      value = styleScopedId ? styleScopedId + (serializedClass.length ? " " + serializedClass : serializedClass) : serializedClass;
+    } else {
+      "style" === key ? value = stringifyStyle(value) : isEnumeratedBooleanAttribute(key) || "number" === typeof value ? value = serializeBooleanOrNumberAttribute(value) : false === value || null == value ? value = null : true === value && isPreventDefault(key) && (value = "");
+    }
+    return value;
   }
-  var Subscriber = class {
-    $effectDependencies$=null;
-  };
-  function isSubscriber(value) {
-    return value instanceof Subscriber || value instanceof WrappedSignal;
+  function isEnumeratedBooleanAttribute(key) {
+    return isAriaAttribute(key) || [ "spellcheck", "draggable", "contenteditable" ].includes(key);
   }
-  function clearVNodeEffectDependencies(value) {
-    const effects = vnode_getProp(value, QSubscribers, null);
-    if (!effects) {
-      return;
-    }
-    for (let i = effects.length - 1; i >= 0; i--) {
-      const subscriber = effects[i];
-      const subscriptionRemoved = clearEffects(subscriber, value);
-      subscriptionRemoved && effects.splice(i, 1);
+  var setValueForStyle = (styleName, value) => {
+    if ("number" === typeof value && 0 !== value && !isUnitlessNumber(styleName)) {
+      return value + "px";
     }
+    return value;
+  };
+  function isAriaAttribute(prop) {
+    return prop.startsWith("aria-");
   }
-  function clearSubscriberEffectDependencies(value) {
-    if (value.$effectDependencies$) {
-      for (let i = value.$effectDependencies$.length - 1; i >= 0; i--) {
-        const subscriber = value.$effectDependencies$[i];
-        const subscriptionRemoved = clearEffects(subscriber, value);
-        subscriptionRemoved && value.$effectDependencies$.splice(i, 1);
+  var styleContent = styleId => ComponentStylesPrefixContent + styleId;
+  function hasClassAttr(props) {
+    for (const key in props) {
+      if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
+        return true;
       }
     }
+    return false;
   }
-  function clearEffects(subscriber, value) {
-    if (!isSignal(subscriber)) {
-      return false;
-    }
-    const effectSubscriptions = subscriber.$effects$;
-    if (!effectSubscriptions) {
-      return false;
-    }
-    let subscriptionRemoved = false;
-    for (let i = effectSubscriptions.length - 1; i >= 0; i--) {
-      const effect = effectSubscriptions[i];
-      if (effect[0] === value) {
-        effectSubscriptions.splice(i, 1);
-        subscriptionRemoved = true;
-      }
-    }
-    return subscriptionRemoved;
+  function isClassAttr(key) {
+    return "class" === key || "className" === key;
   }
-  var NEEDS_COMPUTATION = Symbol("invalid");
-  var DEBUG = false;
-  var log = (...args) => console.log("SIGNAL", ...args.map(qwikDebugToString));
-  var throwIfQRLNotResolved = qrl2 => {
-    const resolved = qrl2.resolved;
-    if (!resolved) {
-      throw qrl2.resolve();
+  function convertScopedStyleIdsToArray(scopedStyleIds) {
+    return (null == scopedStyleIds ? void 0 : scopedStyleIds.split(" ")) ?? null;
+  }
+  function convertStyleIdsToString(scopedStyleIds) {
+    return Array.from(scopedStyleIds).join(" ");
+  }
+  var 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;
   };
-  var isSignal = value => value instanceof Signal;
-  var EffectData = class {
-    data;
-    constructor(data) {
-      this.data = data;
+  var DEBUG = false;
+  var log = (...args) => console.log("STORE", ...args.map(qwikDebugToString));
+  var STORE_TARGET = Symbol("store.target");
+  var STORE_HANDLER = Symbol("store.handler");
+  var STORE_ARRAY_PROP = Symbol("store.array");
+  var getStoreHandler = value => value[STORE_HANDLER];
+  var getStoreTarget = value => (null == value ? void 0 : value[STORE_TARGET]) || null;
+  var unwrapStore = value => getStoreTarget(value) || value;
+  var isStore = value => STORE_TARGET in value;
+  function createStore(container, obj, flags) {
+    return new Proxy(obj, new StoreHandler(flags, container || null));
+  }
+  var getOrCreateStore = (obj, flags, container) => {
+    if (isSerializableObject(obj) && container) {
+      let store = container.$storeProxyMap$.get(obj);
+      if (!store) {
+        store = createStore(container, obj, flags);
+        container.$storeProxyMap$.set(obj, store);
+      }
+      return store;
     }
+    return obj;
   };
-  var Signal = class {
-    $untrackedValue$;
-    $effects$=null;
-    $container$=null;
-    constructor(container, value) {
-      this.$container$ = container;
-      this.$untrackedValue$ = value;
-      DEBUG && log("new", this);
-    }
-    get untrackedValue() {
-      return this.$untrackedValue$;
+  var StoreHandler = class {
+    constructor($flags$, $container$) {
+      this.$flags$ = $flags$;
+      this.$container$ = $container$;
     }
-    set untrackedValue(value) {
-      this.$untrackedValue$ = value;
+    $effects$=null;
+    toString() {
+      return "[Store]";
     }
-    get value() {
+    get(target, prop) {
+      if ("symbol" === typeof prop) {
+        if (prop === STORE_TARGET) {
+          return target;
+        }
+        if (prop === STORE_HANDLER) {
+          return this;
+        }
+        return 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(!ctx.$container$ || ctx.$container$ === this.$container$, "Do not use signals across containers");
         }
         const effectSubscriber = ctx.$effectSubscriber$;
-        if (effectSubscriber) {
-          const effects = this.$effects$ ||= [];
-          ensureContainsEffect(effects, effectSubscriber);
-          ensureContains(effectSubscriber, this);
-          isSubscriber(this) && ensureEffectContainsSubscriber(effectSubscriber[0], this, this.$container$);
-          DEBUG && log("read->sub", pad("\n" + this.toString(), "  "));
-        }
+        effectSubscriber && addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
       }
-      return this.untrackedValue;
-    }
-    set value(value) {
-      if (value !== this.$untrackedValue$) {
-        DEBUG && log("Signal.set", this.$untrackedValue$, "->", value, pad("\n" + this.toString(), "  "));
-        this.$untrackedValue$ = value;
-        triggerEffects(this.$container$, this, this.$effects$);
+      if ("toString" === prop && value === Object.prototype.toString) {
+        return this.toString;
       }
+      const flags = this.$flags$;
+      if (1 & flags && "object" === typeof value && null !== value && !Object.isFrozen(value) && !isStore(value) && !Object.isFrozen(target)) {
+        return getOrCreateStore(value, this.$flags$, this.$container$);
+      }
+      return value;
     }
-    valueOf() {
-      if (qDev) {
-        return throwErrorAndStop("Cannot coerce a Signal, use `.value` instead");
+    set(target, prop, value) {
+      target = unwrapDeserializerProxy(target);
+      if ("symbol" === typeof prop) {
+        target[prop] = value;
+        return true;
+      }
+      const newValue = 1 & this.$flags$ ? unwrapStore(value) : value;
+      if (prop in target) {
+        const oldValue = target[prop];
+        if (newValue !== oldValue) {
+          DEBUG && log("Store.set", oldValue, "->", newValue, pad("\n" + this.toString(), "  "));
+          setNewValueAndTriggerEffects(prop, newValue, target, this);
+        }
+      } else {
+        DEBUG && log("Store.set", "create property", newValue, pad("\n" + this.toString(), "  "));
+        setNewValueAndTriggerEffects(prop, newValue, target, this);
       }
+      return true;
     }
-    toString() {
-      var _a;
-      return `[${this.constructor.name}${this.$invalid$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + ((null == (_a = this.$effects$) ? void 0 : _a.map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n")) || "");
+    deleteProperty(target, prop) {
+      if ("string" != typeof prop || !delete target[prop]) {
+        return false;
+      }
+      triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$));
+      return true;
     }
-    toJSON() {
-      return {
-        value: this.$untrackedValue$
-      };
-    }
-  };
-  var ensureContains = (array, value) => {
-    const isMissing = -1 === array.indexOf(value);
-    isMissing && array.push(value);
-  };
-  var 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);
-  };
-  var ensureEffectContainsSubscriber = (effect, subscriber, container) => {
-    if (isSubscriber(effect)) {
-      effect.$effectDependencies$ ||= [];
-      if (subscriberExistInSubscribers(effect.$effectDependencies$, subscriber)) {
-        return;
-      }
-      effect.$effectDependencies$.push(subscriber);
-    } else if (vnode_isVNode(effect) && vnode_isVirtualVNode(effect)) {
-      let subscribers = vnode_getProp(effect, QSubscribers, container ? container.$getObjectById$ : null);
-      subscribers ||= [];
-      if (subscriberExistInSubscribers(subscribers, subscriber)) {
-        return;
-      }
-      subscribers.push(subscriber);
-      vnode_setProp(effect, QSubscribers, subscribers);
-    } else if (isSSRNode(effect)) {
-      let subscribers = effect.getProp(QSubscribers);
-      subscribers ||= [];
-      if (subscriberExistInSubscribers(subscribers, subscriber)) {
-        return;
-      }
-      subscribers.push(subscriber);
-      effect.setProp(QSubscribers, subscribers);
-    }
-  };
-  var isSSRNode = effect => "setProp" in effect && "getProp" in effect && "removeProp" in effect && "id" in effect;
-  var subscriberExistInSubscribers = (subscribers, subscriber) => {
-    for (let i = 0; i < subscribers.length; i++) {
-      if (subscribers[i] === subscriber) {
+    has(target, prop) {
+      if (prop === STORE_TARGET) {
         return true;
       }
-    }
-    return false;
-  };
-  var triggerEffects = (container, signal, effects) => {
-    if (effects) {
-      const scheduleEffect = effectSubscriptions => {
-        const effect = effectSubscriptions[0];
-        const property = effectSubscriptions[1];
-        assertDefined(container, "Container must be defined.");
-        if (isTask(effect)) {
-          effect.$flags$ |= 8;
-          DEBUG && log("schedule.effect.task", pad("\n" + String(effect), "  "));
-          let choreType = 3;
-          1 & effect.$flags$ ? choreType = 64 : 4 & effect.$flags$ && (choreType = 2);
-          container.$scheduler$(choreType, effect);
-        } else if (effect instanceof Signal) {
-          effect instanceof ComputedSignal && (effect.$computeQrl$.resolved || container.$scheduler$(1, null, effect.$computeQrl$));
-          try {
-            retryOnPromise((() => effect.$invalidate$()));
-          } catch (e) {
-            logError(e);
-          }
-        } else if (":" === property) {
-          const host = effect;
-          const qrl2 = container.getHostProp(host, OnRenderProp);
-          assertDefined(qrl2, "Component must have QRL");
-          const props = container.getHostProp(host, ELEMENT_PROPS);
-          container.$scheduler$(7, host, qrl2, props);
-        } else if ("." === property) {
-          const host = effect;
-          const target = host;
-          container.$scheduler$(4, host, target, signal);
-        } else {
-          const host = effect;
-          let effectData = effectSubscriptions[2];
-          if (effectData instanceof EffectData) {
-            const data = effectData.data;
-            const payload = {
-              ...data,
-              $value$: signal
-            };
-            container.$scheduler$(5, host, 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);
-    }
-    DEBUG && log("done scheduling");
-  };
-  var ComputedSignal = class extends Signal {
-    $computeQrl$;
-    $invalid$=true;
-    constructor(container, fn) {
-      super(container, NEEDS_COMPUTATION);
-      this.$computeQrl$ = fn;
-    }
-    $invalidate$() {
-      var _a;
-      this.$invalid$ = true;
-      if (!(null == (_a = this.$effects$) ? void 0 : _a.length)) {
-        return;
       }
-      this.$computeIfNeeded$() && triggerEffects(this.$container$, this, this.$effects$);
-    }
-    force() {
-      this.$invalid$ = true;
-      triggerEffects(this.$container$, this, this.$effects$);
-    }
-    get untrackedValue() {
-      this.$computeIfNeeded$();
-      assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, "Invalid state");
-      return this.$untrackedValue$;
+      return Object.prototype.hasOwnProperty.call(target, prop);
     }
-    $computeIfNeeded$() {
-      if (!this.$invalid$) {
-        return false;
-      }
-      const computeQrl = this.$computeQrl$;
-      throwIfQRLNotResolved(computeQrl);
+    ownKeys(target) {
       const ctx = tryGetInvokeContext();
-      const previousEffectSubscription = null == ctx ? void 0 : ctx.$effectSubscriber$;
-      ctx && (ctx.$effectSubscriber$ = [ this, "." ]);
-      try {
-        const untrackedValue = computeQrl.getFn(ctx)();
-        isPromise(untrackedValue) && throwErrorAndStop(`useComputedSignal$ QRL ${computeQrl.dev ? `${computeQrl.dev.file} ` : ""}${computeQrl.$hash$} returned a Promise`);
-        DEBUG && log("Signal.$compute$", untrackedValue);
-        this.$invalid$ = false;
-        const didChange = untrackedValue !== this.$untrackedValue$;
-        didChange && (this.$untrackedValue$ = untrackedValue);
-        return didChange;
-      } finally {
-        ctx && (ctx.$effectSubscriber$ = previousEffectSubscription);
-      }
-    }
-    get value() {
-      return super.value;
+      const effectSubscriber = null == ctx ? void 0 : ctx.$effectSubscriber$;
+      effectSubscriber && addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber);
+      return Reflect.ownKeys(target);
     }
-    set value(_) {
-      throwErrorAndStop("ComputedSignal is read-only");
+    getOwnPropertyDescriptor(target, prop) {
+      if (Array.isArray(target) || "symbol" === typeof prop) {
+        return Object.getOwnPropertyDescriptor(target, prop);
+      }
+      return {
+        enumerable: true,
+        configurable: true
+      };
     }
   };
-  var WrappedSignal = class extends Signal {
-    $args$;
-    $func$;
-    $funcStr$;
-    $invalid$=true;
-    $effectDependencies$=null;
-    constructor(container, fn, args, fnStr) {
-      super(container, NEEDS_COMPUTATION);
-      this.$args$ = args;
-      this.$func$ = fn;
-      this.$funcStr$ = fnStr;
-    }
-    $invalidate$() {
-      var _a;
-      this.$invalid$ = true;
-      if (!(null == (_a = this.$effects$) ? void 0 : _a.length)) {
-        return;
-      }
-      this.$computeIfNeeded$() && triggerEffects(this.$container$, this, this.$effects$);
+  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);
+    DEBUG && log("sub", pad("\n" + store.$effects$.toString(), "  "));
+  }
+  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 = null == storeEffects ? void 0 : storeEffects[STORE_ARRAY_PROP];
+    if (storeArrayValue) {
+      effectsToTrigger ||= [];
+      effectsToTrigger.push(...storeArrayValue);
     }
-    force() {
-      this.$invalid$ = true;
-      triggerEffects(this.$container$, this, this.$effects$);
+    return effectsToTrigger;
+  }
+  var Subscriber = class {
+    $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, QSubscribers, container.$getObjectById$);
+    if (!effects) {
+      return;
     }
-    get untrackedValue() {
-      this.$computeIfNeeded$();
-      assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, "Invalid state");
-      return this.$untrackedValue$;
+    for (let i = effects.length - 1; i >= 0; i--) {
+      const subscriber = effects[i];
+      const subscriptionRemoved = clearEffects(subscriber, value);
+      subscriptionRemoved && effects.splice(i, 1);
     }
-    $computeIfNeeded$() {
-      if (!this.$invalid$) {
-        return false;
+  }
+  function clearSubscriberEffectDependencies(value) {
+    if (value.$effectDependencies$) {
+      for (let i = value.$effectDependencies$.length - 1; i >= 0; i--) {
+        const subscriber = value.$effectDependencies$[i];
+        const subscriptionRemoved = clearEffects(subscriber, value);
+        subscriptionRemoved && value.$effectDependencies$.splice(i, 1);
       }
-      const untrackedValue = trackSignal((() => this.$func$(...this.$args$)), this, ".", this.$container$);
-      const didChange = untrackedValue !== this.$untrackedValue$;
-      didChange && (this.$untrackedValue$ = untrackedValue);
-      return didChange;
     }
-    get value() {
-      return super.value;
+  }
+  function clearEffects(subscriber, value) {
+    if (!isSignal(subscriber)) {
+      return false;
     }
-    set value(_) {
-      throwErrorAndStop("WrappedSignal is read-only");
+    const effectSubscriptions = subscriber.$effects$;
+    const hostElement = subscriber.$hostElement$;
+    hostElement && hostElement === value && (subscriber.$hostElement$ = null);
+    let subscriptionRemoved = false;
+    if (effectSubscriptions) {
+      for (let i = effectSubscriptions.length - 1; i >= 0; i--) {
+        const effect = effectSubscriptions[i];
+        if (effect[0] === value) {
+          effectSubscriptions.splice(i, 1);
+          subscriptionRemoved = true;
+        }
+      }
     }
-  };
-  var DEBUG2 = false;
-  var log2 = (...args) => console.log("STORE", ...args.map(qwikDebugToString));
-  var STORE_TARGET = Symbol("store.target");
-  var STORE_HANDLER = Symbol("store.handler");
-  var STORE_ARRAY_PROP = Symbol("store.array");
-  var getStoreHandler = value => value[STORE_HANDLER];
-  var getStoreTarget = value => (null == value ? void 0 : value[STORE_TARGET]) || null;
-  var unwrapStore = value => getStoreTarget(value) || value;
-  var isStore = value => STORE_TARGET in value;
-  function createStore(container, obj, flags) {
-    return new Proxy(obj, new StoreHandler(flags, container || null));
-  }
-  var getOrCreateStore = (obj, flags, container) => {
-    if (isSerializableObject(obj) && container) {
-      let store = container.$storeProxyMap$.get(obj);
-      if (!store) {
-        store = createStore(container, obj, flags);
-        container.$storeProxyMap$.set(obj, store);
+    const args = subscriber.$args$;
+    if (args) {
+      for (let i = args.length - 1; i >= 0; i--) {
+        clearEffects(args[i], subscriber);
       }
-      return store;
     }
-    return obj;
-  };
-  var StoreHandler = class {
-    constructor($flags$, $container$) {
-      this.$flags$ = $flags$;
-      this.$container$ = $container$;
-    }
-    $effects$=null;
-    toString() {
-      return "[Store]";
-    }
-    get(target, prop) {
-      if ("symbol" === typeof prop) {
-        if (prop === STORE_TARGET) {
-          return target;
-        }
-        if (prop === STORE_HANDLER) {
-          return this;
-        }
-        return 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(!ctx.$container$ || ctx.$container$ === this.$container$, "Do not use signals across containers");
-        }
-        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;
-      }
-      const flags = this.$flags$;
-      if (1 & flags && "object" === typeof value && null !== value && !Object.isFrozen(value) && !isStore(value) && !Object.isFrozen(target)) {
-        return getOrCreateStore(value, this.$flags$, this.$container$);
-      }
-      return value;
-    }
-    set(target, prop, value) {
-      target = unwrapDeserializerProxy(target);
-      if ("symbol" === typeof prop) {
-        target[prop] = value;
-        return true;
-      }
-      const newValue = 1 & this.$flags$ ? unwrapStore(value) : value;
-      if (prop in target) {
-        const oldValue = target[prop];
-        if (newValue !== oldValue) {
-          DEBUG2 && log2("Store.set", oldValue, "->", newValue, pad("\n" + this.toString(), "  "));
-          setNewValueAndTriggerEffects(prop, newValue, target, this);
-        }
-      } else {
-        DEBUG2 && log2("Store.set", "create property", newValue, pad("\n" + this.toString(), "  "));
-        setNewValueAndTriggerEffects(prop, newValue, target, this);
-      }
-      return true;
-    }
-    deleteProperty(target, prop) {
-      if ("string" != typeof prop || !delete target[prop]) {
-        return false;
-      }
-      triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$));
-      return true;
-    }
-    has(target, prop) {
-      if (prop === STORE_TARGET) {
-        return true;
-      }
-      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 = null == ctx ? void 0 : ctx.$effectSubscriber$;
-      effectSubscriber && addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber);
-      return Reflect.ownKeys(target);
-    }
-    getOwnPropertyDescriptor(target, prop) {
-      if (Array.isArray(target) || "symbol" === typeof prop) {
-        return Object.getOwnPropertyDescriptor(target, prop);
-      }
-      return {
-        enumerable: true,
-        configurable: true
-      };
-    }
-  };
-  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);
-    DEBUG2 && log2("sub", pad("\n" + store.$effects$.toString(), "  "));
-  }
-  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 = null == storeEffects ? void 0 : storeEffects[STORE_ARRAY_PROP];
-    if (storeArrayValue) {
-      effectsToTrigger ||= [];
-      effectsToTrigger.push(...storeArrayValue);
-    }
-    return effectsToTrigger;
-  }
-  var _createResourceReturn = opts => {
-    const resource = {
-      __brand: "resource",
-      value: void 0,
-      loading: !isServerPlatform(),
-      _resolved: void 0,
-      _error: void 0,
-      _state: "pending",
-      _timeout: (null == opts ? void 0 : opts.timeout) ?? -1,
-      _cache: 0
-    };
-    return resource;
+    return subscriptionRemoved;
+  }
+  var _createResourceReturn = opts => {
+    const resource = {
+      __brand: "resource",
+      value: void 0,
+      loading: !isServerPlatform(),
+      _resolved: void 0,
+      _error: void 0,
+      _state: "pending",
+      _timeout: (null == opts ? void 0 : opts.timeout) ?? -1,
+      _cache: 0
+    };
+    return resource;
   };
   var createResourceReturn = (container, opts, initialPromise) => {
     const result = _createResourceReturn(opts);
@@ -3721,105 +3498,6 @@ globalThis.qwikOptimizer = function(module) {
     return promise;
   };
   var ignoreErrorToPreventNodeFromCrashing = err => {};
-  var Slot = props => _jsxSorted(Virtual, null, {
-    [QSlotS]: ""
-  }, props.children, 0, props.name ?? "");
-  var SkipRender = Symbol("skip render");
-  var SSRRaw = () => null;
-  var SSRComment = () => null;
-  var 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" ]);
-  var isUnitlessNumber = name => unitlessNumbers.has(name);
-  var serializeClass = obj => {
-    if (!obj) {
-      return "";
-    }
-    if (isString(obj)) {
-      return obj.trim();
-    }
-    const classes = [];
-    if (isArray(obj)) {
-      for (const o of obj) {
-        const classList = serializeClass(o);
-        classList && classes.push(classList);
-      }
-    } else {
-      for (const [key, value] of Object.entries(obj)) {
-        value && classes.push(key.trim());
-      }
-    }
-    return classes.join(" ");
-  };
-  var fromCamelToKebabCaseWithDash = text => text.replace(/([A-Z])/g, "-$1").toLowerCase();
-  var stringifyStyle = obj => {
-    if (null == obj) {
-      return "";
-    }
-    if ("object" == typeof obj) {
-      if (isArray(obj)) {
-        throw qError(QError_stringifyClassOrStyle, obj, "style");
-      }
-      {
-        const chunks = [];
-        for (const key in obj) {
-          if (Object.prototype.hasOwnProperty.call(obj, key)) {
-            const value = obj[key];
-            null != value && "function" !== typeof value && (key.startsWith("--") ? chunks.push(key + ":" + value) : chunks.push(fromCamelToKebabCaseWithDash(key) + ":" + setValueForStyle(key, value)));
-          }
-        }
-        return chunks.join(";");
-      }
-    }
-    return String(obj);
-  };
-  var serializeBooleanOrNumberAttribute = value => null != value ? String(value) : null;
-  function serializeAttribute(key, value, styleScopedId) {
-    if (isClassAttr(key)) {
-      const serializedClass = serializeClass(value);
-      value = styleScopedId ? styleScopedId + (serializedClass.length ? " " + serializedClass : serializedClass) : serializedClass;
-    } else {
-      "style" === key ? value = stringifyStyle(value) : isEnumeratedBooleanAttribute(key) || "number" === typeof value ? value = serializeBooleanOrNumberAttribute(value) : false === value || null == value ? value = null : true === value && isPreventDefault(key) && (value = "");
-    }
-    return value;
-  }
-  function isEnumeratedBooleanAttribute(key) {
-    return isAriaAttribute(key) || [ "spellcheck", "draggable", "contenteditable" ].includes(key);
-  }
-  var setValueForStyle = (styleName, value) => {
-    if ("number" === typeof value && 0 !== value && !isUnitlessNumber(styleName)) {
-      return value + "px";
-    }
-    return value;
-  };
-  function isAriaAttribute(prop) {
-    return prop.startsWith("aria-");
-  }
-  var styleContent = styleId => ComponentStylesPrefixContent + styleId;
-  function hasClassAttr(props) {
-    for (const key in props) {
-      if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function isClassAttr(key) {
-    return "class" === key || "className" === key;
-  }
-  function convertScopedStyleIdsToArray(scopedStyleIds) {
-    return (null == scopedStyleIds ? void 0 : scopedStyleIds.split(" ")) ?? null;
-  }
-  function convertStyleIdsToString(scopedStyleIds) {
-    return Array.from(scopedStyleIds).join(" ");
-  }
-  var 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;
-  };
   var isForeignObjectElement = elementName => "foreignobject" === elementName.toLowerCase();
   var isSvgElement = elementName => "svg" === elementName || isForeignObjectElement(elementName);
   var isMathElement = elementName => "math" === elementName;
@@ -3992,7 +3670,7 @@ globalThis.qwikOptimizer = function(module) {
         container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
         container.getHostProp(renderHost, ELEMENT_PROPS) !== props && container.setHostProp(renderHost, ELEMENT_PROPS, props);
       }
-      vnode_isVNode(renderHost) && clearVNodeEffectDependencies(renderHost);
+      vnode_isVNode(renderHost) && clearVNodeEffectDependencies(container, renderHost);
       return componentFn(props);
     }), (jsx2 => {
       const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL);
@@ -4077,6 +3755,12 @@ globalThis.qwikOptimizer = function(module) {
     }
     return null;
   }
+  function isSlotProp(prop) {
+    return !prop.startsWith("q:") && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
+  }
+  function isParentSlotProp(prop) {
+    return prop.startsWith(QSlotParent);
+  }
   function escapeHTML(html) {
     let escapedHTML = "";
     const length = html.length;
@@ -4136,9 +3820,9 @@ globalThis.qwikOptimizer = function(module) {
             if (Array.isArray(jsxValue)) {
               descend(jsxValue, false);
             } else if (isSignal(jsxValue)) {
-              vCurrent && clearVNodeEffectDependencies(vCurrent);
+              vCurrent && clearVNodeEffectDependencies(container, vCurrent);
               expectVirtual("S", null);
-              descend(trackSignal((() => jsxValue.value), vNewNode || vCurrent, ".", container), true);
+              descend(trackSignalAndAssignHost(jsxValue, vNewNode || vCurrent, ".", container), true);
             } else if (isPromise(jsxValue)) {
               expectVirtual("A", null);
               asyncQueue.push(jsxValue, vNewNode || vCurrent);
@@ -4335,7 +4019,7 @@ globalThis.qwikOptimizer = function(module) {
       if (constProps && "object" == typeof constProps && "name" in constProps) {
         const constValue = constProps.name;
         if (vHost && constValue instanceof WrappedSignal) {
-          return trackSignal((() => constValue.value), vHost, ":", container);
+          return trackSignalAndAssignHost(constValue, vHost, ":", container);
         }
       }
       return directGetPropsProxyProp(jsxNode2, "name") || QDefaultSlot;
@@ -4409,11 +4093,11 @@ globalThis.qwikOptimizer = function(module) {
             }
           }
           if (isSignal(value)) {
-            const signalData = new EffectData({
+            const signalData = new EffectPropData({
               $scopedStyleIdPrefix$: scopedStyleIdPrefix,
               $isConst$: true
             });
-            value = trackSignal((() => value.value), vNewNode, key2, container, signalData);
+            value = trackSignalAndAssignHost(value, vNewNode, key2, container, signalData);
           }
           if (key2 === dangerouslySetInnerHTML) {
             element.innerHTML = value;
@@ -4422,7 +4106,9 @@ globalThis.qwikOptimizer = function(module) {
           }
           if ("textarea" === elementName && "value" === key2) {
             if ("string" !== typeof value) {
-              isDev && throwErrorAndStop("The value of the textarea must be a string");
+              if (isDev) {
+                throw qError(40);
+              }
               continue;
             }
             element.value = escapeHTML(value);
@@ -4475,9 +4161,9 @@ globalThis.qwikOptimizer = function(module) {
           const eventProp = ":" + scope.substring(1) + ":" + eventName;
           const qrls = [ vnode_getProp(vNode, eventProp, null), vnode_getProp(vNode, HANDLER_PREFIX + eventProp, null) ];
           let returnValue = false;
-          qrls.flat(2).forEach((qrl2 => {
-            if (qrl2) {
-              const value = qrl2(event, element);
+          qrls.flat(2).forEach((qrl => {
+            if (qrl) {
+              const value = qrl(event, element);
               returnValue = returnValue || true === value;
             }
           }));
@@ -4526,7 +4212,7 @@ globalThis.qwikOptimizer = function(module) {
         eventName && registerQwikLoaderEvent(eventName);
       };
       while (null !== srcKey || null !== dstKey) {
-        if ((null == dstKey ? void 0 : dstKey.startsWith(HANDLER_PREFIX)) || dstKey == ELEMENT_KEY) {
+        if ((null == dstKey ? void 0 : dstKey.startsWith(HANDLER_PREFIX)) || (null == dstKey ? void 0 : dstKey.startsWith(Q_PREFIX))) {
           dstIdx++;
           dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
         } else if (null == srcKey) {
@@ -4680,7 +4366,7 @@ globalThis.qwikOptimizer = function(module) {
       }
     }
     function insertNewComponent(host, componentQRL, jsxProps) {
-      host && clearVNodeEffectDependencies(host);
+      host && clearVNodeEffectDependencies(container, host);
       vnode_insertBefore(journal, vParent, vNewNode = vnode_newVirtual(), vCurrent && getInsertBefore());
       const jsxNode2 = jsxValue;
       isDev && vnode_setProp(vNewNode, DEBUG_TYPE, "C");
@@ -4719,16 +4405,16 @@ globalThis.qwikOptimizer = function(module) {
     if (null == vNode) {
       return null;
     }
-    const qrl2 = vnode_getProp(vNode, OnRenderProp, getObject);
-    return qrl2 ? qrl2.$hash$ : null;
+    const qrl = vnode_getProp(vNode, OnRenderProp, getObject);
+    return qrl ? qrl.$hash$ : null;
   }
   function Projection() {}
   function propsDiffer(src, dst) {
     if (!src || !dst) {
       return true;
     }
-    let srcKeys = removeChildrenKey(Object.keys(src));
-    let dstKeys = removeChildrenKey(Object.keys(dst));
+    let srcKeys = removePropsKeys(Object.keys(src), [ "children", QSubscribers ]);
+    let dstKeys = removePropsKeys(Object.keys(dst), [ "children", QSubscribers ]);
     if (srcKeys.length !== dstKeys.length) {
       return true;
     }
@@ -4743,9 +4429,12 @@ globalThis.qwikOptimizer = function(module) {
     }
     return false;
   }
-  function removeChildrenKey(keys2) {
-    const childrenIdx = keys2.indexOf("children");
-    -1 !== childrenIdx && keys2.splice(childrenIdx, 1);
+  function removePropsKeys(keys2, propKeys) {
+    for (let i = propKeys.length - 1; i >= 0; i--) {
+      const propKey = propKeys[i];
+      const propIdx = keys2.indexOf(propKey);
+      -1 !== propIdx && keys2.splice(propIdx, 1);
+    }
     return keys2;
   }
   function cleanup(container, vNode) {
@@ -4757,9 +4446,9 @@ globalThis.qwikOptimizer = function(module) {
     do {
       const type = vCursor[0];
       if (3 & type) {
+        clearVNodeEffectDependencies(container, vCursor);
+        markVNodeAsDeleted(vCursor);
         if (2 & type) {
-          clearVNodeEffectDependencies(vCursor);
-          markVNodeAsDeleted(vCursor);
           const seq = container.getHostProp(vCursor, ELEMENT_SEQ);
           if (seq) {
             for (let i = 0; i < seq.length; i++) {
@@ -4767,7 +4456,7 @@ globalThis.qwikOptimizer = function(module) {
               if (isTask(obj)) {
                 const task = obj;
                 clearSubscriberEffectDependencies(task);
-                1 & task.$flags$ ? container.$scheduler$(80, task) : cleanupTask(task);
+                1 & task.$flags$ ? container.$scheduler$(48, task) : cleanupTask(task);
               }
             }
           }
@@ -4846,18 +4535,15 @@ globalThis.qwikOptimizer = function(module) {
   }
   var HANDLER_PREFIX = ":";
   var count = 0;
-  var implicit$FirstArg = fn => function(first, ...rest) {
-    return fn.call(null, dollar(first), ...rest);
-  };
-  var DEBUG3 = false;
+  var DEBUG2 = false;
   var createScheduler = (container, scheduleDrain, journalFlush) => {
     const choreQueue = [];
     let currentChore = null;
     let journalFlushScheduled = false;
     return schedule;
     function schedule(type, hostOrTask = null, targetOrQrl = null, payload = null) {
-      const runLater = 127 !== type && 16 !== type && 6 !== type;
-      const isTask2 = 3 === type || 64 === type || 2 === type || 80 === type;
+      const runLater = 255 !== type && 6 !== type;
+      const isTask2 = 3 === type || 32 === type || 2 === type || 48 === type;
       isTask2 && (hostOrTask.$flags$ |= 8);
       let chore = {
         $type$: type,
@@ -4871,11 +4557,11 @@ globalThis.qwikOptimizer = function(module) {
         $executed$: false
       };
       chore.$promise$ = new Promise((resolve => chore.$resolve$ = resolve));
-      DEBUG3 && debugTrace("schedule", chore, currentChore, choreQueue);
+      DEBUG2 && debugTrace("schedule", chore, currentChore, choreQueue);
       chore = sortedInsert(choreQueue, chore);
       if (!journalFlushScheduled && runLater) {
         journalFlushScheduled = true;
-        schedule(48);
+        schedule(16);
         scheduleDrain();
       }
       return runLater ? chore.$promise$ : drainUpTo(chore);
@@ -4897,8 +4583,8 @@ globalThis.qwikOptimizer = function(module) {
           break;
         }
         const isDeletedVNode = vNodeAlreadyDeleted(nextChore);
-        if (isDeletedVNode && 80 !== nextChore.$type$) {
-          DEBUG3 && debugTrace("skip chore", nextChore, currentChore, choreQueue);
+        if (isDeletedVNode && 48 !== nextChore.$type$) {
+          DEBUG2 && debugTrace("skip chore", nextChore, currentChore, choreQueue);
           continue;
         }
         const returnValue = executeChore(nextChore);
@@ -4910,13 +4596,14 @@ globalThis.qwikOptimizer = function(module) {
       return runUptoChore.$returnValue$;
     }
     function executeChore(chore) {
+      var _a;
       const host = chore.$host$;
-      DEBUG3 && debugTrace("execute", chore, currentChore, choreQueue);
+      DEBUG2 && debugTrace("execute", chore, currentChore, choreQueue);
       assertEqual(currentChore, null, "Chore already running.");
       currentChore = chore;
       let returnValue = null;
       switch (chore.$type$) {
-       case 48:
+       case 16:
         returnValue = journalFlush();
         journalFlushScheduled = false;
         break;
@@ -4941,11 +4628,11 @@ globalThis.qwikOptimizer = function(module) {
         returnValue = runTask(chore.$payload$, container, host);
         break;
 
-       case 64:
+       case 32:
         returnValue = runTask(chore.$payload$, container, host);
         break;
 
-       case 80:
+       case 48:
         const task = chore.$payload$;
         cleanupTask(task);
         break;
@@ -4980,13 +4667,27 @@ globalThis.qwikOptimizer = function(module) {
           returnValue = target.resolved ? null : target.resolve();
           break;
         }
+
+       case 8:
+        {
+          const target = chore.$target$;
+          const forceRunEffects = target.$forceRunEffects$;
+          target.$forceRunEffects$ = false;
+          if (!(null == (_a = target.$effects$) ? void 0 : _a.length)) {
+            break;
+          }
+          returnValue = retryOnPromise((() => {
+            (target.$computeIfNeeded$() || forceRunEffects) && triggerEffects(container, target, target.$effects$);
+          }));
+          break;
+        }
       }
       return maybeThenPassError(returnValue, (value => {
-        var _a;
-        DEBUG3 && debugTrace("execute.DONE", null, currentChore, choreQueue);
+        var _a2;
+        DEBUG2 && debugTrace("execute.DONE", null, currentChore, choreQueue);
         if (currentChore) {
           currentChore.$executed$ = true;
-          null == (_a = currentChore.$resolve$) || _a.call(currentChore, value);
+          null == (_a2 = currentChore.$resolve$) || _a2.call(currentChore, value);
         }
         currentChore = null;
         return chore.$returnValue$ = value;
@@ -5001,17 +4702,19 @@ globalThis.qwikOptimizer = function(module) {
     return !!(chore.$host$ && vnode_isVNode(chore.$host$) && 32 & chore.$host$[0]);
   }
   function choreComparator(a, b, shouldThrowOnHostMismatch) {
-    const macroTypeDiff = (112 & a.$type$) - (112 & b.$type$);
+    const macroTypeDiff = (240 & a.$type$) - (240 & b.$type$);
     if (0 !== macroTypeDiff) {
       return macroTypeDiff;
     }
-    if (48 !== a.$type$) {
+    if (16 !== a.$type$) {
       const aHost = a.$host$;
       const bHost = b.$host$;
       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()}`;
-          shouldThrowOnHostMismatch && throwErrorAndStop(errorMessage);
+          if (shouldThrowOnHostMismatch) {
+            throw qError(45, [ errorMessage ]);
+          }
           logWarn(errorMessage);
           return null;
         }
@@ -5030,7 +4733,7 @@ globalThis.qwikOptimizer = function(module) {
       if (0 !== idxDiff) {
         return idxDiff;
       }
-      if (a.$target$ !== b.$target$ && (1 === a.$type$ && 1 === b.$type$ || 5 === a.$type$ && 5 === b.$type$)) {
+      if (a.$target$ !== b.$target$ && (1 === a.$type$ && 1 === b.$type$ || 5 === a.$type$ && 5 === b.$type$ || 8 === a.$type$ && 8 === b.$type$)) {
         return 1;
       }
     }
@@ -5074,11 +4777,11 @@ globalThis.qwikOptimizer = function(module) {
       5: "NODE_PROP",
       7: "COMPONENT",
       6: "COMPONENT_SSR",
-      48: "JOURNAL_FLUSH",
-      64: "VISIBLE",
-      80: "CLEANUP_VISIBLE",
-      127: "WAIT_FOR_ALL",
-      16: "WAIT_FOR_COMPONENTS"
+      8: "RECOMPUTE_SIGNAL",
+      16: "JOURNAL_FLUSH",
+      32: "VISIBLE",
+      48: "CLEANUP_VISIBLE",
+      255: "WAIT_FOR_ALL"
     }[chore.$type$] || "UNKNOWN: " + chore.$type$;
     const host = String(chore.$host$).replaceAll(/\n.*/gim, "");
     const qrlTarget = null == (_a = chore.$target$) ? void 0 : _a.$symbol$;
@@ -5093,606 +4796,524 @@ globalThis.qwikOptimizer = function(module) {
     }));
     console.log(lines.join("\n  ") + "\n");
   }
-  var version = "2.0.0-alpha.3-dev+418fd6d";
-  var _SharedContainer = class {
-    $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$ = _id => {
-        throw Error("Not implemented");
-      };
-      this.$scheduler$ = createScheduler(this, scheduleDrain, journalFlush);
-    }
-    trackSignalValue(signal, subscriber, property, data) {
-      return trackSignal((() => signal.value), 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);
-    }
-  };
-  var VNodeDataSeparator = {
-    REFERENCE_CH: "~",
-    REFERENCE: 126,
-    ADVANCE_1_CH: "!",
-    ADVANCE_1: 33,
-    ADVANCE_2_CH: '"',
-    ADVANCE_2: 34,
-    ADVANCE_4_CH: "#",
-    ADVANCE_4: 35,
-    ADVANCE_8_CH: "$",
-    ADVANCE_8: 36,
-    ADVANCE_16_CH: "%",
-    ADVANCE_16: 37,
-    ADVANCE_32_CH: "&",
-    ADVANCE_32: 38,
-    ADVANCE_64_CH: "'",
-    ADVANCE_64: 39,
-    ADVANCE_128_CH: "(",
-    ADVANCE_128: 40,
-    ADVANCE_256_CH: ")",
-    ADVANCE_256: 41,
-    ADVANCE_512_CH: "*",
-    ADVANCE_512: 42,
-    ADVANCE_1024_CH: "+",
-    ADVANCE_1024: 43,
-    ADVANCE_2048_CH: ",",
-    ADVANCE_2048: 44,
-    ADVANCE_4096_CH: "-",
-    ADVANCE_4096: 45,
-    ADVANCE_8192_CH: ".",
-    ADVANCE_8192: 46
-  };
-  var VNodeDataChar = {
-    OPEN: 123,
-    OPEN_CHAR: "{",
-    CLOSE: 125,
-    CLOSE_CHAR: "}",
-    SCOPED_STYLE: 59,
-    SCOPED_STYLE_CHAR: ";",
-    RENDER_FN: 60,
-    RENDER_FN_CHAR: "<",
-    ID: 61,
-    ID_CHAR: "=",
-    PROPS: 62,
-    PROPS_CHAR: ">",
-    SLOT_REF: 63,
-    SLOT_REF_CHAR: "?",
-    KEY: 64,
-    KEY_CHAR: "@",
-    SEQ: 91,
-    SEQ_CHAR: "[",
-    DON_T_USE: 93,
-    DON_T_USE_CHAR: "\\",
-    CONTEXT: 93,
-    CONTEXT_CHAR: "]",
-    SEQ_IDX: 94,
-    SEQ_IDX_CHAR: "^",
-    SEPARATOR: 124,
-    SEPARATOR_CHAR: "|",
-    SLOT: 126,
-    SLOT_CHAR: "~"
-  };
-  function processVNodeData(document2) {
-    const Q_CONTAINER = "q:container";
-    const Q_CONTAINER_END = "/" + Q_CONTAINER;
-    const Q_PROPS_SEPARATOR2 = ":";
-    const Q_SHADOW_ROOT = "q:shadowroot";
-    const Q_IGNORE = "q:ignore";
-    const Q_IGNORE_END = "/" + Q_IGNORE;
-    const Q_CONTAINER_ISLAND = "q:container-island";
-    const Q_CONTAINER_ISLAND_END = "/" + Q_CONTAINER_ISLAND;
-    const qDocument = document2;
-    const vNodeDataMap = qDocument.qVNodeData || (qDocument.qVNodeData = new WeakMap);
-    const prototype = document2.body;
-    const getter = (prototype2, name) => {
-      var _a;
-      let getter2;
-      while (prototype2 && !(getter2 = null == (_a = Object.getOwnPropertyDescriptor(prototype2, name)) ? void 0 : _a.get)) {
-        prototype2 = Object.getPrototypeOf(prototype2);
-      }
-      return getter2 || function() {
-        return this[name];
-      };
-    };
-    const getAttribute = prototype.getAttribute;
-    const hasAttribute = prototype.hasAttribute;
-    const getNodeType = getter(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);
-      }));
-    };
-    attachVnodeDataAndRefs(document2);
-    let NodeType;
-    (NodeType2 => {
-      NodeType2[NodeType2.CONTAINER_MASK = 1] = "CONTAINER_MASK";
-      NodeType2[NodeType2.ELEMENT = 2] = "ELEMENT";
-      NodeType2[NodeType2.ELEMENT_CONTAINER = 3] = "ELEMENT_CONTAINER";
-      NodeType2[NodeType2.ELEMENT_SHADOW_ROOT = 6] = "ELEMENT_SHADOW_ROOT";
-      NodeType2[NodeType2.COMMENT_SKIP_START = 5] = "COMMENT_SKIP_START";
-      NodeType2[NodeType2.COMMENT_SKIP_END = 8] = "COMMENT_SKIP_END";
-      NodeType2[NodeType2.COMMENT_IGNORE_START = 16] = "COMMENT_IGNORE_START";
-      NodeType2[NodeType2.COMMENT_IGNORE_END = 32] = "COMMENT_IGNORE_END";
-      NodeType2[NodeType2.COMMENT_ISLAND_START = 65] = "COMMENT_ISLAND_START";
-      NodeType2[NodeType2.COMMENT_ISLAND_END = 128] = "COMMENT_ISLAND_END";
-      NodeType2[NodeType2.OTHER = 0] = "OTHER";
-    })(NodeType || (NodeType = {}));
-    const getFastNodeType = node => {
-      const nodeType = getNodeType.call(node);
-      if (1 === nodeType) {
-        const qContainer = getAttribute.call(node, Q_CONTAINER);
-        if (null === qContainer) {
-          if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
-            return 6;
-          }
-          const isQElement = hasAttribute.call(node, Q_PROPS_SEPARATOR2);
-          return isQElement ? 2 : 0;
-        }
-        return 3;
-      }
-      if (8 === nodeType) {
-        const nodeValue = node.nodeValue || "";
-        if (nodeValue.startsWith(Q_CONTAINER_ISLAND)) {
-          return 65;
-        }
-        if (nodeValue.startsWith(Q_IGNORE)) {
-          return 16;
-        }
-        if (nodeValue.startsWith(Q_CONTAINER)) {
-          return 5;
-        }
-        if (nodeValue.startsWith(Q_CONTAINER_ISLAND_END)) {
-          return 128;
-        }
-        if (nodeValue.startsWith(Q_IGNORE_END)) {
-          return 32;
-        }
-        if (nodeValue.startsWith(Q_CONTAINER_END)) {
-          return 8;
+  var runTask = (task, container, host) => {
+    task.$flags$ &= -9;
+    cleanupTask(task);
+    const iCtx = newInvokeContext(container.$locale$, host, void 0, TaskEvent);
+    iCtx.$container$ = container;
+    const taskFn = task.$qrl$.getFn(iCtx, (() => clearSubscriberEffectDependencies(task)));
+    const track = (obj, prop) => {
+      const ctx = newInvokeContext();
+      ctx.$effectSubscriber$ = [ task, ":" ];
+      ctx.$container$ = container;
+      return invoke(ctx, (() => {
+        if (isFunction(obj)) {
+          return obj();
         }
-      }
-      return 0;
+        return prop ? obj[prop] : isSignal(obj) ? obj.value : obj;
+      }));
     };
-    const isSeparator = ch => VNodeDataSeparator.ADVANCE_1 <= ch && ch <= VNodeDataSeparator.ADVANCE_8192;
-    const findVDataSectionEnd = (vData, start, end) => {
-      let depth = 0;
-      while (true) {
-        if (!(start < end)) {
-          break;
-        }
-        {
-          const ch = vData.charCodeAt(start);
-          if (0 === depth && isSeparator(ch)) {
-            break;
-          }
-          ch === VNodeDataChar.OPEN ? depth++ : ch === VNodeDataChar.CLOSE && depth--;
-          start++;
+    const handleError = reason => container.handleError(reason, host);
+    let cleanupFns = null;
+    const cleanup2 = fn => {
+      if ("function" == typeof fn) {
+        if (!cleanupFns) {
+          cleanupFns = [];
+          task.$destroy$ = noSerialize((() => {
+            task.$destroy$ = null;
+            cleanupFns.forEach((fn2 => {
+              try {
+                fn2();
+              } catch (err) {
+                handleError(err);
+              }
+            }));
+          }));
         }
+        cleanupFns.push(fn);
       }
-      return start;
     };
-    const nextSibling = node => {
-      while (node && (node = node.nextSibling) && 0 === getFastNodeType(node)) {}
-      return node;
-    };
-    const firstChild = node => {
-      while (node && (node = node.firstChild) && 0 === getFastNodeType(node)) {}
-      return node;
-    };
-    const walkContainer = (walker2, containerNode, node, exitNode, vData, qVNodeRefs, prefix) => {
-      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;
-        while (isSeparator(ch = vData.charCodeAt(vData_start))) {
-          elementsToSkip += 1 << ch - VNodeDataSeparator.ADVANCE_1;
-          vData_start++;
-          if (vData_start >= vData_length) {
-            break;
-          }
-        }
-        return elementsToSkip;
-      };
-      do {
-        if (node === exitNode) {
-          return;
-        }
-        nextNode = null;
-        const nodeType = node == containerNode ? 2 : getFastNodeType(node);
-        if (3 === nodeType) {
-          const container = node;
-          let cursor = node;
-          while (cursor && !(nextNode = nextSibling(cursor))) {
-            cursor = cursor.parentNode;
-          }
-          walkContainer(walker2, container, node, nextNode, container.qVnodeData || "", container.qVNodeRefs, prefix + "  ");
-        } else if (16 === nodeType) {
-          let islandNode = node;
-          do {
-            islandNode = walker2.nextNode();
-            if (!islandNode) {
-              throw new Error(`Island inside \x3c!--${null == node ? void 0 : node.nodeValue}--\x3e not found!`);
-            }
-          } while (65 !== getFastNodeType(islandNode));
-          nextNode = null;
-        } else if (128 === nodeType) {
-          nextNode = node;
-          do {
-            nextNode = walker2.nextNode();
-            if (!nextNode) {
-              throw new Error("Ignore block not closed!");
-            }
-          } while (32 !== getFastNodeType(nextNode));
-          nextNode = null;
-        } else if (5 === nodeType) {
-          nextNode = node;
-          do {
-            nextNode = nextSibling(nextNode);
-            if (!nextNode) {
-              throw new Error(`\x3c!--${null == node ? void 0 : node.nodeValue}--\x3e not closed!`);
-            }
-          } while (8 !== getFastNodeType(nextNode));
-          walkContainer(walker2, node, node, nextNode, "", null, prefix + "  ");
-        } else if (6 === nodeType) {
-          nextNode = nextSibling(node);
-          const shadowRootContainer = node;
-          const shadowRoot = null == shadowRootContainer ? void 0 : shadowRootContainer.shadowRoot;
-          shadowRoot && walkContainer(document2.createTreeWalker(shadowRoot, 129), null, firstChild(shadowRoot), null, "", null, prefix + "  ");
-        }
-        if (2 === (2 & nodeType)) {
-          if (vNodeElementIndex < elementIdx) {
-            -1 === vNodeElementIndex && (vNodeElementIndex = 0);
-            vData_start = vData_end;
-            if (vData_start < vData_length) {
-              vNodeElementIndex += howManyElementsToSkip();
-              const shouldStoreRef = ch === VNodeDataSeparator.REFERENCE;
-              if (shouldStoreRef) {
-                needsToStoreRef = vNodeElementIndex;
-                vData_start++;
-                ch = vData_start < vData_length ? vData.charCodeAt(vData_end) : VNodeDataSeparator.ADVANCE_1;
-              }
-              vData_end = findVDataSectionEnd(vData, vData_start, vData_length);
-            } else {
-              vNodeElementIndex = Number.MAX_SAFE_INTEGER;
-            }
-          }
-          if (elementIdx === vNodeElementIndex) {
-            needsToStoreRef === elementIdx && qVNodeRefs.set(elementIdx, node);
-            const instructions = vData.substring(vData_start, vData_end);
-            vNodeDataMap.set(node, instructions);
-          }
-          elementIdx++;
-        }
-      } while (node = nextNode || walker2.nextNode());
+    const taskApi = {
+      track: track,
+      cleanup: cleanup2
     };
-    const walker = document2.createTreeWalker(document2, 129);
-    walkContainer(walker, null, walker.firstChild(), null, "", null, "");
-  }
-  function getDomContainer(element) {
-    const qContainerElement = _getQContainerElement(element);
-    qContainerElement || throwErrorAndStop("Unable to find q:container.");
-    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];
-            if (attr.name === Q_PROPS_SEPARATOR) {
-              continue;
-            }
-            containerAttributes[attr.name] = attr.value;
-          }
-        }
+    const result = safeCall((() => taskFn(taskApi)), cleanup2, (err => isPromise(err) ? err.then((() => runTask(task, container, host))) : handleError(err)));
+    return result;
+  };
+  var cleanupTask = task => {
+    const destroy = task.$destroy$;
+    if (destroy) {
+      task.$destroy$ = null;
+      try {
+        destroy();
+      } catch (err) {
+        logError(err);
       }
-      container.$serverData$ = {
-        containerAttributes: containerAttributes
-      };
-      qElement.setAttribute(QContainerAttr, "resumed");
-      qElement.qContainer = container;
     }
-    return container;
-  }
-  function _getQContainerElement(element) {
-    const qContainerElement = Array.isArray(element) ? vnode_getDomParent(element) : element;
-    return qContainerElement.closest(QContainerSelector);
-  }
-  var isDomContainer = container => container instanceof DomContainer;
-  var DomContainer = class 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(QContainerAttr);
-      this.qContainer || throwErrorAndStop("Element must have 'q:container' attribute.");
-      this.$journal$ = [ 3, element.ownerDocument ];
-      this.document = element.ownerDocument;
-      this.element = element;
-      this.qBase = element.getAttribute(QBaseAttr);
-      this.$instanceHash$ = element.getAttribute(QInstanceAttr);
-      this.qManifestHash = element.getAttribute("q:manifest-hash");
-      this.rootVNode = vnode_newUnMaterializedElement(this.element);
-      this.$rawStateData$ = null;
-      this.stateData = null;
-      const document2 = this.element.ownerDocument;
-      document2.qVNodeData || processVNodeData(document2);
-      this.$rawStateData$ = [];
-      this.stateData = [];
-      const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
-      if (0 !== qwikStates.length) {
-        const lastState = qwikStates[qwikStates.length - 1];
-        this.$rawStateData$ = JSON.parse(lastState.textContent);
-        this.stateData = wrapDeserializerProxy(this, this.$rawStateData$);
-      }
-      this.$qFuncs$ = getQFuncs(document2, this.$instanceHash$) || EMPTY_ARRAY;
+  };
+  var Task = class extends Subscriber {
+    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$;
+    }
+  };
+  var isTask = value => value instanceof Task;
+  var NEEDS_COMPUTATION = Symbol("invalid");
+  var DEBUG3 = false;
+  var log2 = (...args) => console.log("SIGNAL", ...args.map(qwikDebugToString));
+  var throwIfQRLNotResolved = qrl => {
+    const resolved = qrl.resolved;
+    if (!resolved) {
+      throw qrl.resolve();
     }
-    $setRawState$(id, vParent) {
-      this.stateData[id] = vParent;
+  };
+  var isSignal = value => value instanceof Signal;
+  var EffectPropData = class {
+    data;
+    constructor(data) {
+      this.data = data;
     }
-    parseQRL(qrl2) {
-      return inflateQRL(this, parseQRL(qrl2));
+  };
+  var Signal = class {
+    $untrackedValue$;
+    $effects$=null;
+    $container$=null;
+    constructor(container, value) {
+      this.$container$ = container;
+      this.$untrackedValue$ = value;
+      DEBUG3 && log2("new", this);
     }
-    handleError(err, host) {
-      if (qDev) {
-        if ("undefined" !== typeof document) {
-          const vHost = host;
-          const errorDiv = document.createElement("errored-host");
-          err && err instanceof Error && (errorDiv.props = {
-            error: err
-          });
-          errorDiv.setAttribute("q:key", "_error_");
-          const journal = [];
-          vnode_getDOMChildNodes(journal, vHost).forEach((child => errorDiv.appendChild(child)));
-          const vErrorDiv = vnode_newElement(errorDiv, "error-host");
-          vnode_insertBefore(journal, vHost, vErrorDiv, null);
-          vnode_applyJournal(journal);
+    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(!ctx.$container$ || ctx.$container$ === this.$container$, "Do not use signals across containers");
         }
-        err && err instanceof Error && ("hostElement" in err || (err.hostElement = host));
-        if (!isRecoverable(err)) {
-          throw err;
+        const effectSubscriber = ctx.$effectSubscriber$;
+        if (effectSubscriber) {
+          const effects = this.$effects$ ||= [];
+          ensureContainsEffect(effects, effectSubscriber);
+          ensureContains(effectSubscriber, this);
+          isSubscriber(this) && ensureEffectContainsSubscriber(effectSubscriber[0], this, this.$container$);
+          DEBUG3 && log2("read->sub", pad("\n" + this.toString(), "  "));
         }
       }
-      const errorStore = this.resolveContext(host, ERROR_CONTEXT);
-      if (!errorStore) {
-        throw err;
+      return this.untrackedValue;
+    }
+    set value(value) {
+      if (value !== this.$untrackedValue$) {
+        DEBUG3 && log2("Signal.set", this.$untrackedValue$, "->", value, pad("\n" + this.toString(), "  "));
+        this.$untrackedValue$ = value;
+        triggerEffects(this.$container$, this, this.$effects$);
       }
-      errorStore.error = err;
     }
-    setContext(host, context, value) {
-      let ctx = this.getHostProp(host, QCtxAttr);
-      ctx || this.setHostProp(host, QCtxAttr, ctx = []);
-      mapArray_set(ctx, context.id, value, 0);
+    valueOf() {
+      if (qDev) {
+        throw qError(46);
+      }
     }
-    resolveContext(host, contextId) {
-      while (host) {
-        const ctx = this.getHostProp(host, QCtxAttr);
-        if (ctx) {
-          const value = mapArray_get(ctx, contextId.id, 0);
-          if (value) {
-            return value;
-          }
-        }
-        host = this.getParentHost(host);
+    toString() {
+      var _a;
+      return `[${this.constructor.name}${this.$invalid$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + ((null == (_a = this.$effects$) ? void 0 : _a.map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n")) || "");
+    }
+    toJSON() {
+      return {
+        value: this.$untrackedValue$
+      };
+    }
+  };
+  var ensureContains = (array, value) => {
+    const isMissing = -1 === array.indexOf(value);
+    isMissing && array.push(value);
+  };
+  var 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;
       }
-      return;
     }
-    getParentHost(host) {
-      let vNode = vnode_getParent(host);
-      while (vNode) {
-        if (vnode_isVirtualVNode(vNode)) {
-          if (null !== vnode_getProp(vNode, OnRenderProp, null)) {
-            return vNode;
-          }
-          const parent = vnode_getProp(vNode, QSlotParent, this.$vnodeLocate$);
-          if (parent) {
-            vNode = parent;
-            continue;
+    array.push(effectSubscriptions);
+  };
+  var ensureEffectContainsSubscriber = (effect, subscriber, container) => {
+    if (isSubscriber(effect)) {
+      effect.$effectDependencies$ ||= [];
+      if (subscriberExistInSubscribers(effect.$effectDependencies$, subscriber)) {
+        return;
+      }
+      effect.$effectDependencies$.push(subscriber);
+    } else if (vnode_isVNode(effect) && !vnode_isTextVNode(effect)) {
+      let subscribers = vnode_getProp(effect, QSubscribers, container ? container.$getObjectById$ : null);
+      subscribers ||= [];
+      if (subscriberExistInSubscribers(subscribers, subscriber)) {
+        return;
+      }
+      subscribers.push(subscriber);
+      vnode_setProp(effect, QSubscribers, subscribers);
+    } else if (isSSRNode(effect)) {
+      let subscribers = effect.getProp(QSubscribers);
+      subscribers ||= [];
+      if (subscriberExistInSubscribers(subscribers, subscriber)) {
+        return;
+      }
+      subscribers.push(subscriber);
+      effect.setProp(QSubscribers, subscribers);
+    }
+  };
+  var isSSRNode = effect => "setProp" in effect && "getProp" in effect && "removeProp" in effect && "id" in effect;
+  var subscriberExistInSubscribers = (subscribers, subscriber) => {
+    for (let i = 0; i < subscribers.length; i++) {
+      if (subscribers[i] === subscriber) {
+        return true;
+      }
+    }
+    return false;
+  };
+  var triggerEffects = (container, signal, effects) => {
+    if (effects) {
+      const scheduleEffect = effectSubscriptions => {
+        const effect = effectSubscriptions[0];
+        const property = effectSubscriptions[1];
+        assertDefined(container, "Container must be defined.");
+        if (isTask(effect)) {
+          effect.$flags$ |= 8;
+          DEBUG3 && log2("schedule.effect.task", pad("\n" + String(effect), "  "));
+          let choreType = 3;
+          1 & effect.$flags$ ? choreType = 32 : 4 & effect.$flags$ && (choreType = 2);
+          container.$scheduler$(choreType, effect);
+        } else if (effect instanceof Signal) {
+          effect instanceof ComputedSignal && (effect.$computeQrl$.resolved || container.$scheduler$(1, null, effect.$computeQrl$));
+          effect.$invalidate$();
+        } else if (":" === property) {
+          const host = effect;
+          const qrl = container.getHostProp(host, OnRenderProp);
+          assertDefined(qrl, "Component must have QRL");
+          const props = container.getHostProp(host, ELEMENT_PROPS);
+          container.$scheduler$(7, host, qrl, props);
+        } else if ("." === property) {
+          const host = effect;
+          const target = host;
+          container.$scheduler$(4, host, target, signal);
+        } else {
+          const host = effect;
+          const effectData = effectSubscriptions[2];
+          if (effectData instanceof EffectPropData) {
+            const data = effectData.data;
+            const payload = {
+              ...data,
+              $value$: signal
+            };
+            container.$scheduler$(5, host, property, payload);
           }
         }
-        vNode = vnode_getParent(vNode);
+      };
+      effects.forEach(scheduleEffect);
+    }
+    DEBUG3 && log2("done scheduling");
+  };
+  var ComputedSignal = class extends Signal {
+    $computeQrl$;
+    $invalid$=true;
+    $forceRunEffects$=false;
+    constructor(container, fn) {
+      super(container, NEEDS_COMPUTATION);
+      this.$computeQrl$ = fn;
+    }
+    $invalidate$() {
+      var _a;
+      this.$invalid$ = true;
+      this.$forceRunEffects$ = false;
+      null == (_a = this.$container$) || _a.$scheduler$(8, null, this);
+    }
+    force() {
+      this.$invalid$ = true;
+      this.$forceRunEffects$ = false;
+      triggerEffects(this.$container$, this, this.$effects$);
+    }
+    get untrackedValue() {
+      const didChange = this.$computeIfNeeded$();
+      didChange && (this.$forceRunEffects$ = didChange);
+      assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, "Invalid state");
+      return this.$untrackedValue$;
+    }
+    $computeIfNeeded$() {
+      if (!this.$invalid$) {
+        return false;
       }
-      return null;
+      const computeQrl = this.$computeQrl$;
+      throwIfQRLNotResolved(computeQrl);
+      const ctx = tryGetInvokeContext();
+      const previousEffectSubscription = null == ctx ? void 0 : ctx.$effectSubscriber$;
+      ctx && (ctx.$effectSubscriber$ = [ this, "." ]);
+      try {
+        const untrackedValue = computeQrl.getFn(ctx)();
+        if (isPromise(untrackedValue)) {
+          throw qError(47, [ computeQrl.dev ? computeQrl.dev.file : "", computeQrl.$hash$ ]);
+        }
+        DEBUG3 && log2("Signal.$compute$", untrackedValue);
+        this.$invalid$ = false;
+        const didChange = untrackedValue !== this.$untrackedValue$;
+        didChange && (this.$untrackedValue$ = untrackedValue);
+        return didChange;
+      } finally {
+        ctx && (ctx.$effectSubscriber$ = previousEffectSubscription);
+      }
+    }
+    get value() {
+      return super.value;
+    }
+    set value(_) {
+      throw qError(48);
+    }
+  };
+  var WrappedSignal = class extends Signal {
+    $args$;
+    $func$;
+    $funcStr$;
+    $invalid$=true;
+    $effectDependencies$=null;
+    $hostElement$=null;
+    $forceRunEffects$=false;
+    constructor(container, fn, args, fnStr) {
+      super(container, NEEDS_COMPUTATION);
+      this.$args$ = args;
+      this.$func$ = fn;
+      this.$funcStr$ = fnStr;
+    }
+    $invalidate$() {
+      var _a;
+      this.$invalid$ = true;
+      this.$forceRunEffects$ = false;
+      null == (_a = this.$container$) || _a.$scheduler$(8, this.$hostElement$, this);
+    }
+    force() {
+      this.$invalid$ = true;
+      this.$forceRunEffects$ = false;
+      triggerEffects(this.$container$, this, this.$effects$);
+    }
+    get untrackedValue() {
+      const didChange = this.$computeIfNeeded$();
+      didChange && (this.$forceRunEffects$ = didChange);
+      assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, "Invalid state");
+      return this.$untrackedValue$;
+    }
+    $computeIfNeeded$() {
+      if (!this.$invalid$) {
+        return false;
+      }
+      const untrackedValue = trackSignal((() => this.$func$(...this.$args$)), this, ".", this.$container$);
+      const didChange = untrackedValue !== this.$untrackedValue$;
+      didChange && (this.$untrackedValue$ = untrackedValue);
+      return didChange;
     }
-    setHostProp(host, name, value) {
-      const vNode = host;
-      vnode_setProp(vNode, name, value);
+    get value() {
+      return super.value;
     }
-    getHostProp(host, name) {
-      const vNode = host;
-      let getObjectById = null;
-      switch (name) {
-       case ELEMENT_SEQ:
-       case ELEMENT_PROPS:
-       case OnRenderProp:
-       case QCtxAttr:
-       case QSubscribers:
-        getObjectById = this.$getObjectById$;
-        break;
-
-       case ELEMENT_SEQ_IDX:
-       case USE_ON_LOCAL_SEQ_IDX:
-        getObjectById = parseInt;
-        break;
-      }
-      return vnode_getProp(vNode, name, getObjectById);
+    set value(_) {
+      throw qError(49);
     }
-    scheduleRender() {
-      this.$renderCount$++;
-      this.renderDone ||= getPlatform().nextTick((() => this.processChores()));
-      return this.renderDone;
+  };
+  var version = "2.0.0-alpha.4-dev+374e0d6";
+  var _SharedContainer = class {
+    $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$ = _id => {
+        throw Error("Not implemented");
+      };
+      this.$scheduler$ = createScheduler(this, scheduleDrain, journalFlush);
     }
-    processChores() {
-      let renderCount = this.$renderCount$;
-      const result = this.$scheduler$(127);
-      if (isPromise(result)) {
-        return result.then((async () => {
-          while (renderCount !== this.$renderCount$) {
-            renderCount = this.$renderCount$;
-            await this.$scheduler$(127);
-          }
-          this.renderDone = null;
-        }));
+    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);
+    }
+  };
+  Symbol("proxy target");
+  Symbol("proxy flags");
+  Symbol("proxy manager");
+  var _CONST_PROPS = Symbol("CONST");
+  var _VAR_PROPS = Symbol("VAR");
+  Symbol("IMMUTABLE");
+  var componentQrl = componentQrl2 => {
+    function QwikComponent(props, key, flags = 0) {
+      assertQrl(componentQrl2);
+      assertNumber(flags, "The Qwik Component was not invoked correctly");
+      const hash = qTest ? "sX" : componentQrl2.$hash$.slice(0, 4);
+      const finalKey = hash + ":" + (key || "");
+      const InnerCmp = () => {};
+      InnerCmp[SERIALIZABLE_STATE] = [ componentQrl2 ];
+      return _jsxSplit(InnerCmp, props, null, props.children, flags, finalKey);
+    }
+    QwikComponent[SERIALIZABLE_STATE] = [ componentQrl2 ];
+    return QwikComponent;
+  };
+  var SERIALIZABLE_STATE = Symbol("serializable-data");
+  var isQwikComponent = component => "function" == typeof component && void 0 !== component[SERIALIZABLE_STATE];
+  var _jsxSorted = (type, varProps, constProps, children, flags, key, dev) => {
+    const processed = null == key ? null : String(key);
+    const node = new JSXNodeImpl(type, varProps || {}, constProps || null, children, flags, processed);
+    qDev && dev && (node.dev = {
+      stack: (new Error).stack,
+      ...dev
+    });
+    seal(node);
+    return node;
+  };
+  var _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
+    let sortedProps;
+    sortedProps = varProps ? Object.fromEntries(untrack((() => Object.entries(varProps))).filter((entry => {
+      const attr = entry[0];
+      if ("children" === attr) {
+        children ??= entry[1];
+        return false;
       }
-      if (renderCount !== this.$renderCount$) {
-        this.processChores();
-        return;
+      if ("key" === attr) {
+        key = entry[1];
+        return false;
       }
-      this.renderDone = null;
+      return !constProps || !(attr in constProps) || /^on[A-Z].*\$$/.test(attr);
+    })).sort((([a], [b]) => a < b ? -1 : 1))) : "string" === typeof type ? EMPTY_OBJ : {};
+    if (constProps && "children" in constProps) {
+      children = constProps.children;
+      constProps.children = void 0;
     }
-    ensureProjectionResolved(vNode) {
-      if (0 === (16 & vNode[0])) {
-        vNode[0] |= 16;
-        for (let i = vnode_getPropStartIndex(vNode); i < vNode.length; i += 2) {
-          const prop = vNode[i];
-          if (isSlotProp(prop)) {
-            const value = vNode[i + 1];
-            "string" == typeof value && (vNode[i + 1] = this.$vnodeLocate$(value));
-          }
+    return _jsxSorted(type, sortedProps, constProps, children, flags, key, dev);
+  };
+  var isPropsProxy = obj => obj && void 0 !== obj[_VAR_PROPS];
+  var JSXNodeImpl = class {
+    constructor(type, varProps, constProps, children, flags, key = null) {
+      this.type = type;
+      this.varProps = varProps;
+      this.constProps = constProps;
+      this.children = children;
+      this.flags = flags;
+      this.key = key;
+      if (qDev) {
+        if ("object" !== typeof varProps) {
+          throw new Error("JSXNodeImpl: varProps must be objects: " + JSON.stringify(varProps));
+        }
+        if ("object" !== typeof constProps) {
+          throw new Error("JSXNodeImpl: constProps must be objects: " + JSON.stringify(constProps));
         }
       }
     }
-    $getObjectById$=id => {
-      "string" === typeof id && (id = parseFloat(id));
-      assertTrue(id < this.$rawStateData$.length / 2, `Invalid reference: ${id} >= ${this.$rawStateData$.length / 2}`);
-      return this.stateData[id];
-    };
-    getSyncFn(id) {
-      const fn = this.$qFuncs$[id];
-      assertTrue("function" === typeof fn, "Invalid reference: " + id);
-      return fn;
+    dev;
+    _proxy=null;
+    get props() {
+      this._proxy || (this._proxy = createPropsProxy(this.varProps, this.constProps, this.children));
+      return this._proxy;
     }
-    $appendStyle$(content, styleId, host, scoped) {
-      if (scoped) {
-        const scopedStyleIdsString = this.getHostProp(host, QScopedStyle);
-        const scopedStyleIds = new Set(convertScopedStyleIdsToArray(scopedStyleIdsString));
-        scopedStyleIds.add(styleId);
-        this.setHostProp(host, QScopedStyle, convertStyleIdsToString(scopedStyleIds));
-      }
-      if (null == this.$styleIds$) {
-        this.$styleIds$ = new Set;
-        this.element.querySelectorAll(QStyleSelector).forEach((style => {
-          this.$styleIds$.add(style.getAttribute(QStyle));
-        }));
+  };
+  var Virtual = props => props.children;
+  var isJSXNode = n => {
+    if (qDev) {
+      if (n instanceof JSXNodeImpl) {
+        return true;
       }
-      if (!this.$styleIds$.has(styleId)) {
-        this.$styleIds$.add(styleId);
-        const styleElement = this.document.createElement("style");
-        styleElement.setAttribute(QStyle, styleId);
-        styleElement.textContent = content;
-        this.$journal$.push(5, this.document.head, null, styleElement);
+      if (isObject(n) && "key" in n && "props" in n && "type" in n) {
+        logWarn('Duplicate implementations of "JSXNode" found');
+        return true;
       }
+      return false;
     }
+    return n instanceof JSXNodeImpl;
   };
-  var runTask = (task, container, host) => {
-    task.$flags$ &= -9;
-    cleanupTask(task);
-    const iCtx = newInvokeContext(container.$locale$, host, void 0, TaskEvent);
-    iCtx.$container$ = container;
-    const taskFn = task.$qrl$.getFn(iCtx, (() => clearSubscriberEffectDependencies(task)));
-    const track = (obj, prop) => {
-      const ctx = newInvokeContext();
-      ctx.$effectSubscriber$ = [ task, ":" ];
-      ctx.$container$ = container;
-      return invoke(ctx, (() => {
-        if (isFunction(obj)) {
-          return obj();
-        }
-        return prop ? obj[prop] : isSignal(obj) ? obj.value : obj;
-      }));
-    };
-    const handleError = reason => container.handleError(reason, host);
-    let cleanupFns = null;
-    const cleanup2 = fn => {
-      if ("function" == typeof fn) {
-        if (!cleanupFns) {
-          cleanupFns = [];
-          task.$destroy$ = noSerialize((() => {
-            task.$destroy$ = null;
-            cleanupFns.forEach((fn2 => {
-              try {
-                fn2();
-              } catch (err) {
-                handleError(err);
-              }
-            }));
-          }));
-        }
-        cleanupFns.push(fn);
+  var Fragment = props => props.children;
+  function createPropsProxy(varProps, constProps, children) {
+    return new Proxy({}, new PropsProxyHandler(varProps, constProps, children));
+  }
+  var PropsProxyHandler = class {
+    constructor($varProps$, $constProps$, $children$) {
+      this.$varProps$ = $varProps$;
+      this.$constProps$ = $constProps$;
+      this.$children$ = $children$;
+    }
+    get(_, prop) {
+      if (prop === _CONST_PROPS) {
+        return this.$constProps$;
       }
-    };
-    const taskApi = {
-      track: track,
-      cleanup: cleanup2
-    };
-    const result = safeCall((() => taskFn(taskApi)), cleanup2, (err => isPromise(err) ? err.then((() => runTask(task, container, host))) : handleError(err)));
-    return result;
-  };
-  var cleanupTask = task => {
-    const destroy = task.$destroy$;
-    if (destroy) {
-      task.$destroy$ = null;
-      try {
-        destroy();
-      } catch (err) {
-        logError(err);
+      if (prop === _VAR_PROPS) {
+        return this.$varProps$;
+      }
+      if (null != this.$children$ && "children" === prop) {
+        return this.$children$;
+      }
+      const value = this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] : this.$varProps$[prop];
+      return value instanceof WrappedSignal ? value.value : value;
+    }
+    set(_, prop, value) {
+      if (prop === _CONST_PROPS) {
+        this.$constProps$ = value;
+        return true;
+      }
+      if (prop === _VAR_PROPS) {
+        this.$varProps$ = value;
+        return true;
       }
+      this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] = value : this.$varProps$[prop] = value;
+      return true;
     }
-  };
-  var Task2 = class extends Subscriber {
-    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$;
+    deleteProperty(_, prop) {
+      if ("string" !== typeof prop) {
+        return false;
+      }
+      let didDelete = delete this.$varProps$[prop];
+      this.$constProps$ && (didDelete = delete this.$constProps$[prop] || didDelete);
+      null != this.$children$ && "children" === prop && (this.$children$ = null);
+      return didDelete;
+    }
+    has(_, prop) {
+      const hasProp = "children" === prop && null != this.$children$ || prop === _CONST_PROPS || prop === _VAR_PROPS || prop in this.$varProps$ || !!this.$constProps$ && prop in this.$constProps$;
+      return hasProp;
+    }
+    getOwnPropertyDescriptor(target, p) {
+      const value = "children" === p && null != this.$children$ ? this.$children$ : this.$constProps$ && p in this.$constProps$ ? this.$constProps$[p] : this.$varProps$[p];
+      return {
+        configurable: true,
+        enumerable: true,
+        value: value
+      };
+    }
+    ownKeys() {
+      const out = Object.keys(this.$varProps$);
+      null != this.$children$ && -1 === out.indexOf("children") && out.push("children");
+      if (this.$constProps$) {
+        for (const key in this.$constProps$) {
+          -1 === out.indexOf(key) && out.push(key);
+        }
+      }
+      return out;
     }
   };
-  var isTask = value => value instanceof Task2;
+  var directGetPropsProxyProp = (jsx2, prop) => jsx2.constProps && prop in jsx2.constProps ? jsx2.constProps[prop] : jsx2.varProps[prop];
   var stringifyPath = [];
   function qwikDebugToString(value) {
     if (null === value) {
@@ -5763,6 +5384,70 @@ globalThis.qwikOptimizer = function(module) {
     }
     return String(value);
   };
+  var VNodeDataSeparator = {
+    REFERENCE_CH: "~",
+    REFERENCE: 126,
+    ADVANCE_1_CH: "!",
+    ADVANCE_1: 33,
+    ADVANCE_2_CH: '"',
+    ADVANCE_2: 34,
+    ADVANCE_4_CH: "#",
+    ADVANCE_4: 35,
+    ADVANCE_8_CH: "$",
+    ADVANCE_8: 36,
+    ADVANCE_16_CH: "%",
+    ADVANCE_16: 37,
+    ADVANCE_32_CH: "&",
+    ADVANCE_32: 38,
+    ADVANCE_64_CH: "'",
+    ADVANCE_64: 39,
+    ADVANCE_128_CH: "(",
+    ADVANCE_128: 40,
+    ADVANCE_256_CH: ")",
+    ADVANCE_256: 41,
+    ADVANCE_512_CH: "*",
+    ADVANCE_512: 42,
+    ADVANCE_1024_CH: "+",
+    ADVANCE_1024: 43,
+    ADVANCE_2048_CH: ",",
+    ADVANCE_2048: 44,
+    ADVANCE_4096_CH: "-",
+    ADVANCE_4096: 45,
+    ADVANCE_8192_CH: ".",
+    ADVANCE_8192: 46
+  };
+  var VNodeDataChar = {
+    OPEN: 123,
+    OPEN_CHAR: "{",
+    CLOSE: 125,
+    CLOSE_CHAR: "}",
+    SCOPED_STYLE: 59,
+    SCOPED_STYLE_CHAR: ";",
+    RENDER_FN: 60,
+    RENDER_FN_CHAR: "<",
+    ID: 61,
+    ID_CHAR: "=",
+    PROPS: 62,
+    PROPS_CHAR: ">",
+    SLOT_REF: 63,
+    SLOT_REF_CHAR: "?",
+    KEY: 64,
+    KEY_CHAR: "@",
+    SEQ: 91,
+    SEQ_CHAR: "[",
+    DON_T_USE: 92,
+    DON_T_USE_CHAR: "\\",
+    CONTEXT: 93,
+    CONTEXT_CHAR: "]",
+    SEQ_IDX: 94,
+    SEQ_IDX_CHAR: "^",
+    SUBS: 96,
+    SUBS_CHAR: "`",
+    SEPARATOR: 124,
+    SEPARATOR_CHAR: "|",
+    SLOT: 126,
+    SLOT_CHAR: "~"
+  };
   var vnode_newElement = (element, elementName) => {
     assertEqual(fastNodeType(element), 1, "Expecting element node.");
     const vnode = VNodeArray.createElement(-247, null, null, null, null, null, element, elementName);
@@ -6296,9 +5981,28 @@ globalThis.qwikOptimizer = function(module) {
     const element = vNode[6];
     const firstChild = fastFirstChild(element);
     const vNodeData = null == (_b = null == (_a = element.ownerDocument) ? void 0 : _a.qVNodeData) ? void 0 : _b.get(element);
-    const vFirstChild = vNodeData ? materializeFromVNodeData(vNode, vNodeData, element, firstChild) : materializeFromDOM(vNode, firstChild);
+    const vFirstChild = materialize(vNode, element, firstChild, vNodeData);
     return vFirstChild;
   };
+  var materialize = (vNode, element, firstChild, vNodeData) => {
+    if (vNodeData) {
+      if (vNodeData.charCodeAt(0) === VNodeDataChar.SEPARATOR) {
+        const elementVNodeDataStartIdx = 1;
+        let elementVNodeDataEndIdx = 1;
+        while (vNodeData.charCodeAt(elementVNodeDataEndIdx) !== VNodeDataChar.SEPARATOR) {
+          elementVNodeDataEndIdx++;
+        }
+        const elementVNodeData = vNodeData.substring(elementVNodeDataStartIdx, elementVNodeDataEndIdx);
+        vNodeData = vNodeData.substring(elementVNodeDataEndIdx + 1);
+        const vFirstChild = materializeFromDOM(vNode, firstChild, elementVNodeData);
+        if (!vNodeData) {
+          return vFirstChild;
+        }
+      }
+      return materializeFromVNodeData(vNode, vNodeData, element, firstChild);
+    }
+    return materializeFromDOM(vNode, firstChild);
+  };
   var ensureMaterialized = vnode => {
     const vParent = ensureElementVNode(vnode);
     let vFirstChild = vParent[4];
@@ -6371,693 +6075,965 @@ globalThis.qwikOptimizer = function(module) {
       }
       node = nextNode;
     }
-    return null;
-  }
-  var _fastParentNode = null;
-  var fastParentNode = node => {
-    _fastParentNode || (_fastParentNode = fastGetter(node, "parentNode"));
-    return _fastParentNode.call(node);
+    return null;
+  }
+  var _fastParentNode = null;
+  var fastParentNode = node => {
+    _fastParentNode || (_fastParentNode = fastGetter(node, "parentNode"));
+    return _fastParentNode.call(node);
+  };
+  var _fastFirstChild = null;
+  var fastFirstChild = node => {
+    _fastFirstChild || (_fastFirstChild = fastGetter(node, "firstChild"));
+    node = node && _fastFirstChild.call(node);
+    while (node && !fastIsTextOrElement(node)) {
+      node = fastNextSibling(node);
+    }
+    return node;
+  };
+  var fastGetter = (prototype, name) => {
+    var _a;
+    let getter;
+    while (prototype && !(getter = null == (_a = Object.getOwnPropertyDescriptor(prototype, name)) ? void 0 : _a.get)) {
+      prototype = Object.getPrototypeOf(prototype);
+    }
+    return getter || function() {
+      return this[name];
+    };
+  };
+  var isQStyleElement = node => isElement(node) && "STYLE" === node.nodeName && (node.hasAttribute(QScopedStyle) || node.hasAttribute(QStyle));
+  var materializeFromDOM = (vParent, firstChild, vData) => {
+    let vFirstChild = null;
+    const skipStyleElements = () => {
+      while (isQStyleElement(child)) {
+        child = fastNextSibling(child);
+      }
+    };
+    let child = firstChild;
+    skipStyleElements();
+    let vChild = null;
+    while (child) {
+      const nodeType = fastNodeType(child);
+      let vNextChild = null;
+      3 === nodeType ? vNextChild = vnode_newText(child, child.textContent ?? void 0) : 1 === nodeType && (vNextChild = vnode_newUnMaterializedElement(child));
+      if (vNextChild) {
+        vNextChild[1] = vParent;
+        vChild && (vChild[3] = vNextChild);
+        vNextChild[2] = vChild;
+        vChild = vNextChild;
+      }
+      vFirstChild || (vParent[4] = vFirstChild = vChild);
+      child = fastNextSibling(child);
+      skipStyleElements();
+    }
+    vParent[5] = vChild || null;
+    vParent[4] = vFirstChild;
+    if (vData) {
+      let container = null;
+      processVNodeData(vData, ((peek, consumeValue) => {
+        if (peek() === VNodeDataChar.ID) {
+          container || (container = getDomContainer(vParent[6]));
+          const id = consumeValue();
+          container.$setRawState$(parseInt(id), vParent);
+          isDev && vnode_setAttr(null, vParent, ELEMENT_ID, id);
+        } else {
+          peek() === VNodeDataChar.SUBS ? vnode_setProp(vParent, QSubscribers, consumeValue()) : consumeValue();
+        }
+      }));
+    }
+    return vFirstChild;
+  };
+  var processVNodeData = (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++;
+      return ch;
+    };
+    const consumeValue = () => {
+      consume();
+      const start = nextToConsumeIdx;
+      while (peek() <= 58 && 0 !== peekCh || 95 === peekCh || peekCh >= 65 && peekCh <= 90 || peekCh >= 97 && peekCh <= 122) {
+        consume();
+      }
+      return vData.substring(start, nextToConsumeIdx);
+    };
+    while (0 !== peek()) {
+      callback(peek, consumeValue, consume, nextToConsumeIdx);
+    }
+  };
+  var vnode_getNextSibling = vnode => vnode[3];
+  var vnode_getPreviousSibling = vnode => vnode[2];
+  var vnode_getAttrKeys = vnode => {
+    const type = vnode[0];
+    if (0 !== (3 & type)) {
+      vnode_ensureElementInflated(vnode);
+      const keys2 = [];
+      for (let i = vnode_getPropStartIndex(vnode); i < vnode.length; i += 2) {
+        const key = vnode[i];
+        key.startsWith(Q_PROPS_SEPARATOR) || keys2.push(key);
+      }
+      return keys2;
+    }
+    return [];
+  };
+  var vnode_setAttr = (journal, vnode, key, value) => {
+    const type = vnode[0];
+    if (0 !== (3 & type)) {
+      vnode_ensureElementInflated(vnode);
+      const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
+      if (idx >= 0) {
+        if (vnode[idx + 1] != value && 0 !== (1 & type)) {
+          const element = vnode[6];
+          journal && journal.push(2, element, key, value);
+        }
+        null == value ? vnode.splice(idx, 2) : vnode[idx + 1] = value;
+      } else if (null != value) {
+        vnode.splice(~idx, 0, key, value);
+        if (0 !== (1 & type)) {
+          const element = vnode[6];
+          journal && journal.push(2, element, key, value);
+        }
+      }
+    }
+  };
+  var vnode_getAttr = (vnode, key) => {
+    const type = vnode[0];
+    if (0 !== (3 & type)) {
+      vnode_ensureElementInflated(vnode);
+      return mapArray_get(vnode, key, vnode_getPropStartIndex(vnode));
+    }
+    return null;
+  };
+  var vnode_getProp = (vnode, key, getObject) => {
+    const type = vnode[0];
+    if (0 !== (3 & type)) {
+      1 & type && vnode_ensureElementInflated(vnode);
+      const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
+      if (idx >= 0) {
+        let value = vnode[idx + 1];
+        "string" === typeof value && getObject && (vnode[idx + 1] = value = getObject(value));
+        return value;
+      }
+    }
+    return null;
+  };
+  var vnode_setProp = (vnode, key, value) => {
+    ensureElementOrVirtualVNode(vnode);
+    const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
+    idx >= 0 ? vnode[idx + 1] = value : null != value && vnode.splice(~idx, 0, key, value);
+  };
+  var vnode_getPropStartIndex = vnode => {
+    const type = 7 & vnode[0];
+    if (1 === type) {
+      return 8;
+    }
+    if (2 === type) {
+      return 6;
+    }
+    throw qError(43, [ type ]);
   };
-  var _fastFirstChild = null;
-  var fastFirstChild = node => {
-    _fastFirstChild || (_fastFirstChild = fastGetter(node, "firstChild"));
-    node = node && _fastFirstChild.call(node);
-    while (node && !fastIsTextOrElement(node)) {
-      node = fastNextSibling(node);
+  var vnode_getParent = vnode => vnode[1] || null;
+  var vnode_getNode = vnode => {
+    if (null === vnode || vnode_isVirtualVNode(vnode)) {
+      return null;
     }
-    return node;
+    if (vnode_isElementVNode(vnode)) {
+      return vnode[6];
+    }
+    assertTrue(vnode_isTextVNode(vnode), "Expecting Text Node.");
+    return vnode[4];
   };
-  var fastGetter = (prototype, name) => {
+  function vnode_toString(depth = 10, offset = "", materialize2 = false, siblings = false) {
     var _a;
-    let getter;
-    while (prototype && !(getter = null == (_a = Object.getOwnPropertyDescriptor(prototype, name)) ? void 0 : _a.get)) {
-      prototype = Object.getPrototypeOf(prototype);
+    let vnode = this;
+    if (0 === depth) {
+      return "...";
     }
-    return getter || function() {
-      return this[name];
-    };
-  };
-  var isQStyleElement = node => isElement(node) && "STYLE" === node.nodeName && (node.hasAttribute(QScopedStyle) || node.hasAttribute(QStyle));
-  var materializeFromDOM = (vParent, firstChild) => {
-    let vFirstChild = null;
-    const skipStyleElements = () => {
-      while (isQStyleElement(child)) {
-        child = fastNextSibling(child);
+    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 idx = vnode[0] >>> 8;
+        const attrs = [ "[" + String(idx) + "]" ];
+        vnode_getAttrKeys(vnode).forEach((key => {
+          if (key !== DEBUG_TYPE) {
+            const value = vnode_getAttr(vnode, key);
+            attrs.push(" " + key + "=" + qwikDebugToString(value));
+          }
+        }));
+        const name = VirtualTypeName[vnode_getAttr(vnode, DEBUG_TYPE) || "V"] || VirtualTypeName.V;
+        strings.push("<" + name + attrs.join("") + ">");
+        const child = vnode_getFirstChild(vnode);
+        child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", true, true));
+        strings.push("</" + name + ">");
+      } else if (vnode_isElementVNode(vnode)) {
+        const tag = vnode_getElementName(vnode);
+        const attrs = [];
+        const keys2 = vnode_getAttrKeys(vnode);
+        keys2.forEach((key => {
+          const value = vnode_getAttr(vnode, key);
+          attrs.push(" " + key + "=" + qwikDebugToString(value));
+        }));
+        const node = vnode_getNode(vnode);
+        if (node) {
+          const vnodeData = null == (_a = node.ownerDocument.qVNodeData) ? void 0 : _a.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 === keys2.indexOf(attr.name) && attrs.push(" " + attr.name + (attr.value ? "=" + qwikDebugToString(attr.value) : ""));
+        }
+        strings.push("<" + tag + attrs.join("") + ">");
+        if (vnode_isMaterialized(vnode) || materialize2) {
+          const child = vnode_getFirstChild(vnode);
+          child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", true, true));
+        } else {
+          strings.push("  \x3c!-- not materialized --!>");
+        }
+        strings.push("</" + tag + ">");
       }
+      vnode = siblings && vnode_getNextSibling(vnode) || null;
+    } while (vnode);
+    return strings.join("\n" + offset);
+  }
+  var isNumber = ch => 48 <= ch && ch <= 57;
+  var isLowercase = ch => 97 <= ch && ch <= 122;
+  var stack = [];
+  function materializeFromVNodeData(vParent, vData, element, child) {
+    let idx = 0;
+    let vFirst = null;
+    let vLast = null;
+    let previousTextNode = null;
+    const addVNode = node => {
+      node[0] = 255 & node[0] | idx << 8;
+      idx++;
+      vLast && (vLast[3] = node);
+      node[2] = vLast;
+      node[1] = vParent;
+      vFirst || (vParent[4] = vFirst = node);
+      vLast = node;
     };
-    let child = firstChild;
-    skipStyleElements();
-    let vChild = null;
-    while (child) {
-      const nodeType = fastNodeType(child);
-      let vNextChild = null;
-      3 === nodeType ? vNextChild = vnode_newText(child, child.textContent ?? void 0) : 1 === nodeType && (vNextChild = vnode_newUnMaterializedElement(child));
-      if (vNextChild) {
-        vNextChild[1] = vParent;
-        vChild && (vChild[3] = vNextChild);
-        vNextChild[2] = vChild;
-        vChild = vNextChild;
+    let textIdx = 0;
+    let combinedText = null;
+    let container = null;
+    processVNodeData(vData, ((peek, consumeValue, consume, nextToConsumeIdx) => {
+      if (isNumber(peek())) {
+        while (!isElement(child)) {
+          child = fastNextSibling(child);
+          if (!child) {
+            throw qError(44, [ vData, peek(), nextToConsumeIdx ]);
+          }
+        }
+        while (isQStyleElement(child)) {
+          child = fastNextSibling(child);
+        }
+        combinedText = null;
+        previousTextNode = null;
+        let value = 0;
+        while (isNumber(peek())) {
+          value *= 10;
+          value += consume() - 48;
+        }
+        while (value--) {
+          addVNode(vnode_newUnMaterializedElement(child));
+          child = fastNextSibling(child);
+        }
+      } else if (peek() === VNodeDataChar.SCOPED_STYLE) {
+        vnode_setAttr(null, vParent, QScopedStyle, consumeValue());
+      } else if (peek() === VNodeDataChar.RENDER_FN) {
+        vnode_setAttr(null, vParent, OnRenderProp, consumeValue());
+      } else if (peek() === VNodeDataChar.ID) {
+        container || (container = getDomContainer(element));
+        const id = consumeValue();
+        container.$setRawState$(parseInt(id), vParent);
+        isDev && vnode_setAttr(null, vParent, ELEMENT_ID, id);
+      } else if (peek() === VNodeDataChar.PROPS) {
+        vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
+      } else if (peek() === VNodeDataChar.SLOT_REF) {
+        vnode_setAttr(null, vParent, QSlotRef, consumeValue());
+      } else if (peek() === VNodeDataChar.KEY) {
+        vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
+      } else if (peek() === VNodeDataChar.SEQ) {
+        vnode_setAttr(null, vParent, ELEMENT_SEQ, consumeValue());
+      } else if (peek() === VNodeDataChar.SEQ_IDX) {
+        vnode_setAttr(null, vParent, ELEMENT_SEQ_IDX, consumeValue());
+      } else if (peek() === VNodeDataChar.SUBS) {
+        vnode_setProp(vParent, QSubscribers, consumeValue());
+      } else if (peek() === VNodeDataChar.CONTEXT) {
+        vnode_setAttr(null, vParent, QCtxAttr, 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[5] = 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;
+        if (null === combinedText) {
+          combinedText = textNode ? textNode.nodeValue : null;
+          textIdx = 0;
+        }
+        let length = 0;
+        while (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;
       }
-      vFirstChild || (vParent[4] = vFirstChild = vChild);
-      child = fastNextSibling(child);
-      skipStyleElements();
+    }));
+    vParent[5] = vLast;
+    return vFirst;
+  }
+  var vnode_getType = vnode => {
+    const type = vnode[0];
+    if (1 & type) {
+      return 1;
     }
-    vParent[5] = vChild || null;
-    vParent[4] = vFirstChild;
-    return vFirstChild;
+    if (2 & type) {
+      return 11;
+    }
+    if (4 & type) {
+      return 3;
+    }
+    throw qError(43, [ type ]);
   };
-  var vnode_getNextSibling = vnode => vnode[3];
-  var vnode_getPreviousSibling = vnode => vnode[2];
-  var vnode_getAttrKeys = vnode => {
-    const type = vnode[0];
-    if (0 !== (3 & type)) {
-      vnode_ensureElementInflated(vnode);
-      const keys2 = [];
-      for (let i = vnode_getPropStartIndex(vnode); i < vnode.length; i += 2) {
-        const key = vnode[i];
-        key.startsWith(Q_PROPS_SEPARATOR) || keys2.push(key);
+  var isElement = node => node && "object" == typeof node && 1 === fastNodeType(node);
+  var aPath = [];
+  var bPath = [];
+  var vnode_documentPosition = (a, b) => {
+    if (a === b) {
+      return 0;
+    }
+    let aDepth = -1;
+    let bDepth = -1;
+    while (a) {
+      a = (aPath[++aDepth] = a)[1];
+    }
+    while (b) {
+      b = (bPath[++bDepth] = b)[1];
+    }
+    while (aDepth >= 0 && bDepth >= 0) {
+      a = aPath[aDepth];
+      b = bPath[bDepth];
+      if (a !== b) {
+        let cursor = b;
+        do {
+          cursor = vnode_getNextSibling(cursor);
+          if (cursor === a) {
+            return 1;
+          }
+        } while (cursor);
+        cursor = b;
+        do {
+          cursor = vnode_getPreviousSibling(cursor);
+          if (cursor === a) {
+            return -1;
+          }
+        } while (cursor);
+        return 1;
       }
-      return keys2;
+      aDepth--;
+      bDepth--;
     }
-    return [];
+    return aDepth < bDepth ? -1 : 1;
   };
-  var vnode_setAttr = (journal, vnode, key, value) => {
-    const type = vnode[0];
-    if (0 !== (3 & type)) {
-      vnode_ensureElementInflated(vnode);
-      const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
-      if (idx >= 0) {
-        if (vnode[idx + 1] != value && 0 !== (1 & type)) {
-          const element = vnode[6];
-          journal && journal.push(2, element, key, value);
-        }
-        null == value ? vnode.splice(idx, 2) : vnode[idx + 1] = value;
-      } else if (null != value) {
-        vnode.splice(~idx, 0, key, value);
-        if (0 !== (1 & type)) {
-          const element = vnode[6];
-          journal && journal.push(2, element, key, value);
-        }
+  var vnode_getProjectionParentComponent = (vHost, rootVNode) => {
+    let projectionDepth = 1;
+    while (projectionDepth--) {
+      while (vHost && (!vnode_isVirtualVNode(vHost) || null === vnode_getProp(vHost, OnRenderProp, null))) {
+        const qSlotParentProp = vnode_getProp(vHost, QSlotParent, 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;
   };
-  var vnode_getAttr = (vnode, key) => {
-    const type = vnode[0];
-    if (0 !== (3 & type)) {
-      vnode_ensureElementInflated(vnode);
-      return mapArray_get(vnode, key, vnode_getPropStartIndex(vnode));
+  var VNodeArray = class VNode extends Array {
+    static createElement(flags, parent, previousSibling, nextSibling, firstChild, lastChild, element, elementName) {
+      const vnode = new VNode(flags, parent, previousSibling, nextSibling);
+      vnode.push(firstChild, lastChild, element, elementName);
+      return vnode;
     }
-    return null;
-  };
-  var vnode_getProp = (vnode, key, getObject) => {
-    const type = vnode[0];
-    if (0 !== (3 & type)) {
-      1 & type && vnode_ensureElementInflated(vnode);
-      const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
-      if (idx >= 0) {
-        let value = vnode[idx + 1];
-        "string" === typeof value && getObject && (vnode[idx + 1] = value = getObject(value));
-        return value;
-      }
+    static createText(flags, parent, previousSibling, nextSibling, textNode, text) {
+      const vnode = new VNode(flags, parent, previousSibling, nextSibling);
+      vnode.push(textNode, text);
+      return vnode;
     }
-    return null;
-  };
-  var vnode_setProp = (vnode, key, value) => {
-    ensureElementOrVirtualVNode(vnode);
-    const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
-    idx >= 0 ? vnode[idx + 1] = value : null != value && vnode.splice(~idx, 0, key, value);
-  };
-  var vnode_getPropStartIndex = vnode => {
-    const type = 7 & vnode[0];
-    if (1 === type) {
-      return 8;
+    static createVirtual(flags, parent, previousSibling, nextSibling, firstChild, lastChild) {
+      const vnode = new VNode(flags, parent, previousSibling, nextSibling);
+      vnode.push(firstChild, lastChild);
+      return vnode;
     }
-    if (2 === type) {
-      return 6;
+    constructor(flags, parent, previousSibling, nextSibling) {
+      super();
+      this.push(flags, parent, previousSibling, nextSibling);
+      isDev && (this.toString = vnode_toString);
     }
-    throw throwErrorAndStop("Invalid vnode type.");
   };
-  var vnode_getParent = vnode => vnode[1] || null;
-  var vnode_getNode = vnode => {
-    if (null === vnode || vnode_isVirtualVNode(vnode)) {
-      return null;
-    }
-    if (vnode_isElementVNode(vnode)) {
-      return vnode[6];
+  var _context;
+  var tryGetInvokeContext = () => {
+    if (!_context) {
+      const context = "undefined" !== typeof document && document && document.__q_context__;
+      if (!context) {
+        return;
+      }
+      if (isArray(context)) {
+        return document.__q_context__ = newInvokeContextFromTuple(context);
+      }
+      return context;
     }
-    assertTrue(vnode_isTextVNode(vnode), "Expecting Text Node.");
-    return vnode[4];
+    return _context;
   };
-  function vnode_toString(depth = 10, offset = "", materialize = false, siblings = false) {
-    var _a;
-    let vnode = this;
-    if (0 === depth) {
-      return "...";
+  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;
     }
-    if (null === vnode) {
-      return "null";
+    return returnValue;
+  }
+  var newInvokeContextFromTuple = ([element, event, url]) => {
+    const container = element.closest(QContainerSelector);
+    const locale = (null == container ? void 0 : container.getAttribute(QLocaleAttr)) || void 0;
+    locale && setLocale(locale);
+    return newInvokeContext(locale, void 0, element, event, url);
+  };
+  var newInvokeContext = (locale, hostElement, element, event, url) => {
+    const $locale$ = locale || ("object" === typeof event && event && "locale" in event ? event.locale : void 0);
+    const ctx = {
+      $url$: url,
+      $i$: 0,
+      $hostElement$: hostElement,
+      $element$: element,
+      $event$: event,
+      $qrl$: void 0,
+      $effectSubscriber$: void 0,
+      $locale$: $locale$,
+      $container$: void 0
+    };
+    seal(ctx);
+    return ctx;
+  };
+  var untrack = fn => invoke(void 0, fn);
+  var trackInvocation = newInvokeContext(void 0, void 0, void 0, RenderEvent);
+  var trackSignal = (fn, subscriber, property, container, data) => {
+    const previousSubscriber = trackInvocation.$effectSubscriber$;
+    const previousContainer = trackInvocation.$container$;
+    try {
+      trackInvocation.$effectSubscriber$ = [ subscriber, property ];
+      data && trackInvocation.$effectSubscriber$.push(data);
+      trackInvocation.$container$ = container;
+      return invoke(trackInvocation, fn);
+    } finally {
+      trackInvocation.$effectSubscriber$ = previousSubscriber;
+      trackInvocation.$container$ = previousContainer;
     }
-    if (void 0 === vnode) {
-      return "undefined";
+  };
+  var trackSignalAndAssignHost = (value, host, property, container, data) => {
+    value instanceof WrappedSignal && value.$hostElement$ !== host && host && (value.$hostElement$ = host);
+    return trackSignal((() => value.value), host, property, container, data);
+  };
+  var createContextId = name => {
+    assertTrue(/^[\w/.-]+$/.test(name), "Context name must only contain A-Z,a-z,0-9, _", name);
+    return Object.freeze({
+      id: fromCamelToKebabCase(name)
+    });
+  };
+  var ERROR_CONTEXT = createContextId("qk-error");
+  var isRecoverable = err => {
+    if (err && err instanceof Error && "plugin" in err) {
+      return false;
     }
-    const strings = [];
-    do {
-      if (vnode_isTextVNode(vnode)) {
-        strings.push(qwikDebugToString(vnode_getText(vnode)));
-      } else if (vnode_isVirtualVNode(vnode)) {
-        const idx = vnode[0] >>> 8;
-        const attrs = [ "[" + String(idx) + "]" ];
-        vnode_getAttrKeys(vnode).forEach((key => {
-          if (key !== DEBUG_TYPE) {
-            const value = vnode_getAttr(vnode, key);
-            attrs.push(" " + key + "=" + qwikDebugToString(value));
-          }
-        }));
-        const name = VirtualTypeName[vnode_getAttr(vnode, DEBUG_TYPE) || "V"] || VirtualTypeName.V;
-        strings.push("<" + name + attrs.join("") + ">");
-        const child = vnode_getFirstChild(vnode);
-        child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", true, true));
-        strings.push("</" + name + ">");
-      } else if (vnode_isElementVNode(vnode)) {
-        const tag = vnode_getElementName(vnode);
-        const attrs = [];
-        const keys2 = vnode_getAttrKeys(vnode);
-        keys2.forEach((key => {
-          const value = vnode_getAttr(vnode, key);
-          attrs.push(" " + key + "=" + qwikDebugToString(value));
-        }));
-        const node = vnode_getNode(vnode);
-        if (node) {
-          const vnodeData = null == (_a = node.ownerDocument.qVNodeData) ? void 0 : _a.get(node);
-          vnodeData && attrs.push(" q:vnodeData=" + qwikDebugToString(vnodeData));
+    return true;
+  };
+  function processVNodeData2(document2) {
+    const Q_CONTAINER = "q:container";
+    const Q_CONTAINER_END = "/" + Q_CONTAINER;
+    const Q_PROPS_SEPARATOR2 = ":";
+    const Q_SHADOW_ROOT = "q:shadowroot";
+    const Q_IGNORE = "q:ignore";
+    const Q_IGNORE_END = "/" + Q_IGNORE;
+    const Q_CONTAINER_ISLAND = "q:container-island";
+    const Q_CONTAINER_ISLAND_END = "/" + Q_CONTAINER_ISLAND;
+    const qDocument = document2;
+    const vNodeDataMap = qDocument.qVNodeData || (qDocument.qVNodeData = new WeakMap);
+    const prototype = document2.body;
+    const getter = (prototype2, name) => {
+      var _a;
+      let getter2;
+      while (prototype2 && !(getter2 = null == (_a = Object.getOwnPropertyDescriptor(prototype2, name)) ? void 0 : _a.get)) {
+        prototype2 = Object.getPrototypeOf(prototype2);
+      }
+      return getter2 || function() {
+        return this[name];
+      };
+    };
+    const getAttribute = prototype.getAttribute;
+    const hasAttribute = prototype.hasAttribute;
+    const getNodeType = getter(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);
+      }));
+    };
+    attachVnodeDataAndRefs(document2);
+    let NodeType;
+    (NodeType2 => {
+      NodeType2[NodeType2.CONTAINER_MASK = 1] = "CONTAINER_MASK";
+      NodeType2[NodeType2.ELEMENT = 2] = "ELEMENT";
+      NodeType2[NodeType2.ELEMENT_CONTAINER = 3] = "ELEMENT_CONTAINER";
+      NodeType2[NodeType2.ELEMENT_SHADOW_ROOT = 6] = "ELEMENT_SHADOW_ROOT";
+      NodeType2[NodeType2.COMMENT_SKIP_START = 5] = "COMMENT_SKIP_START";
+      NodeType2[NodeType2.COMMENT_SKIP_END = 8] = "COMMENT_SKIP_END";
+      NodeType2[NodeType2.COMMENT_IGNORE_START = 16] = "COMMENT_IGNORE_START";
+      NodeType2[NodeType2.COMMENT_IGNORE_END = 32] = "COMMENT_IGNORE_END";
+      NodeType2[NodeType2.COMMENT_ISLAND_START = 65] = "COMMENT_ISLAND_START";
+      NodeType2[NodeType2.COMMENT_ISLAND_END = 128] = "COMMENT_ISLAND_END";
+      NodeType2[NodeType2.OTHER = 0] = "OTHER";
+    })(NodeType || (NodeType = {}));
+    const getFastNodeType = node => {
+      const nodeType = getNodeType.call(node);
+      if (1 === nodeType) {
+        const qContainer = getAttribute.call(node, Q_CONTAINER);
+        if (null === qContainer) {
+          if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
+            return 6;
+          }
+          const isQElement = hasAttribute.call(node, Q_PROPS_SEPARATOR2);
+          return isQElement ? 2 : 0;
         }
-        const domAttrs = node.attributes;
-        for (let i = 0; i < domAttrs.length; i++) {
-          const attr = domAttrs[i];
-          -1 === keys2.indexOf(attr.name) && attrs.push(" " + attr.name + (attr.value ? "=" + qwikDebugToString(attr.value) : ""));
+        return 3;
+      }
+      if (8 === nodeType) {
+        const nodeValue = node.nodeValue || "";
+        if (nodeValue.startsWith(Q_CONTAINER_ISLAND)) {
+          return 65;
         }
-        strings.push("<" + tag + attrs.join("") + ">");
-        if (vnode_isMaterialized(vnode) || materialize) {
-          const child = vnode_getFirstChild(vnode);
-          child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", true, true));
-        } else {
-          strings.push("  \x3c!-- not materialized --!>");
+        if (nodeValue.startsWith(Q_IGNORE)) {
+          return 16;
+        }
+        if (nodeValue.startsWith(Q_CONTAINER)) {
+          return 5;
+        }
+        if (nodeValue.startsWith(Q_CONTAINER_ISLAND_END)) {
+          return 128;
+        }
+        if (nodeValue.startsWith(Q_IGNORE_END)) {
+          return 32;
+        }
+        if (nodeValue.startsWith(Q_CONTAINER_END)) {
+          return 8;
         }
-        strings.push("</" + tag + ">");
-      }
-      vnode = siblings && vnode_getNextSibling(vnode) || null;
-    } while (vnode);
-    return strings.join("\n" + offset);
-  }
-  var isNumber = ch => 48 <= ch && ch <= 57;
-  var isLowercase = ch => 97 <= ch && ch <= 122;
-  var stack = [];
-  function materializeFromVNodeData(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++;
-      return ch;
-    };
-    const addVNode = node => {
-      node[0] = 255 & node[0] | idx << 8;
-      idx++;
-      vLast && (vLast[3] = node);
-      node[2] = vLast;
-      node[1] = vParent;
-      vFirst || (vParent[4] = vFirst = node);
-      vLast = node;
-    };
-    const consumeValue = () => {
-      consume();
-      const start = nextToConsumeIdx;
-      while (peek() <= 58 && 0 !== peekCh || 95 === peekCh || peekCh >= 65 && peekCh <= 90 || peekCh >= 97 && peekCh <= 122) {
-        consume();
       }
-      return vData.substring(start, nextToConsumeIdx);
+      return 0;
     };
-    let textIdx = 0;
-    let combinedText = null;
-    let container = null;
-    while (0 !== peek()) {
-      if (isNumber(peek())) {
-        while (!isElement(child)) {
-          child = fastNextSibling(child);
-          child || throwErrorAndStop("Materialize error: missing element: " + vData + " " + peek() + " " + nextToConsumeIdx);
+    const isSeparator = ch => VNodeDataSeparator.ADVANCE_1 <= ch && ch <= VNodeDataSeparator.ADVANCE_8192;
+    const findVDataSectionEnd = (vData, start, end) => {
+      let depth = 0;
+      while (true) {
+        if (!(start < end)) {
+          break;
         }
-        while (isQStyleElement(child)) {
-          child = fastNextSibling(child);
+        {
+          const ch = vData.charCodeAt(start);
+          if (0 === depth && isSeparator(ch)) {
+            break;
+          }
+          ch === VNodeDataChar.OPEN ? depth++ : ch === VNodeDataChar.CLOSE && depth--;
+          start++;
         }
-        combinedText = null;
-        previousTextNode = null;
-        let value = 0;
-        while (isNumber(peek())) {
-          value *= 10;
-          value += consume() - 48;
+      }
+      return start;
+    };
+    const nextSibling = node => {
+      while (node && (node = node.nextSibling) && 0 === getFastNodeType(node)) {}
+      return node;
+    };
+    const firstChild = node => {
+      while (node && (node = node.firstChild) && 0 === getFastNodeType(node)) {}
+      return node;
+    };
+    const walkContainer = (walker2, containerNode, node, exitNode, vData, qVNodeRefs, prefix) => {
+      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;
+        while (isSeparator(ch = vData.charCodeAt(vData_start))) {
+          elementsToSkip += 1 << ch - VNodeDataSeparator.ADVANCE_1;
+          vData_start++;
+          if (vData_start >= vData_length) {
+            break;
+          }
         }
-        while (value--) {
-          addVNode(vnode_newUnMaterializedElement(child));
-          child = fastNextSibling(child);
+        return elementsToSkip;
+      };
+      do {
+        if (node === exitNode) {
+          return;
         }
-      } else if (peek() === VNodeDataChar.SCOPED_STYLE) {
-        vnode_setAttr(null, vParent, QScopedStyle, consumeValue());
-      } else if (peek() === VNodeDataChar.RENDER_FN) {
-        vnode_setAttr(null, vParent, OnRenderProp, consumeValue());
-      } else if (peek() === VNodeDataChar.ID) {
-        container || (container = getDomContainer(element));
-        const id = consumeValue();
-        container.$setRawState$(parseInt(id), vParent);
-        isDev && vnode_setAttr(null, vParent, ELEMENT_ID, id);
-      } else if (peek() === VNodeDataChar.PROPS) {
-        vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
-      } else if (peek() === VNodeDataChar.SLOT_REF) {
-        vnode_setAttr(null, vParent, QSlotRef, consumeValue());
-      } else if (peek() === VNodeDataChar.KEY) {
-        vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
-      } else if (peek() === VNodeDataChar.SEQ) {
-        vnode_setAttr(null, vParent, ELEMENT_SEQ, consumeValue());
-      } else if (peek() === VNodeDataChar.SEQ_IDX) {
-        vnode_setAttr(null, vParent, ELEMENT_SEQ_IDX, consumeValue());
-      } else if (peek() === VNodeDataChar.CONTEXT) {
-        vnode_setAttr(null, vParent, QCtxAttr, 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[5] = 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;
-        if (null === combinedText) {
-          combinedText = textNode ? textNode.nodeValue : null;
-          textIdx = 0;
+        nextNode = null;
+        const nodeType = node == containerNode ? 2 : getFastNodeType(node);
+        if (3 === nodeType) {
+          const container = node;
+          let cursor = node;
+          while (cursor && !(nextNode = nextSibling(cursor))) {
+            cursor = cursor.parentNode;
+          }
+          walkContainer(walker2, container, node, nextNode, container.qVnodeData || "", container.qVNodeRefs, prefix + "  ");
+        } else if (16 === nodeType) {
+          let islandNode = node;
+          do {
+            islandNode = walker2.nextNode();
+            if (!islandNode) {
+              throw new Error(`Island inside \x3c!--${null == node ? void 0 : node.nodeValue}--\x3e not found!`);
+            }
+          } while (65 !== getFastNodeType(islandNode));
+          nextNode = null;
+        } else if (128 === nodeType) {
+          nextNode = node;
+          do {
+            nextNode = walker2.nextNode();
+            if (!nextNode) {
+              throw new Error("Ignore block not closed!");
+            }
+          } while (32 !== getFastNodeType(nextNode));
+          nextNode = null;
+        } else if (5 === nodeType) {
+          nextNode = node;
+          do {
+            nextNode = nextSibling(nextNode);
+            if (!nextNode) {
+              throw new Error(`\x3c!--${null == node ? void 0 : node.nodeValue}--\x3e not closed!`);
+            }
+          } while (8 !== getFastNodeType(nextNode));
+          walkContainer(walker2, node, node, nextNode, "", null, prefix + "  ");
+        } else if (6 === nodeType) {
+          nextNode = nextSibling(node);
+          const shadowRootContainer = node;
+          const shadowRoot = null == shadowRootContainer ? void 0 : shadowRootContainer.shadowRoot;
+          shadowRoot && walkContainer(document2.createTreeWalker(shadowRoot, 129), null, firstChild(shadowRoot), null, "", null, prefix + "  ");
         }
-        let length = 0;
-        while (isLowercase(peek())) {
-          length += consume() - 97;
-          length *= 26;
+        if (2 === (2 & nodeType)) {
+          if (vNodeElementIndex < elementIdx) {
+            -1 === vNodeElementIndex && (vNodeElementIndex = 0);
+            vData_start = vData_end;
+            if (vData_start < vData_length) {
+              vNodeElementIndex += howManyElementsToSkip();
+              const shouldStoreRef = ch === VNodeDataSeparator.REFERENCE;
+              if (shouldStoreRef) {
+                needsToStoreRef = vNodeElementIndex;
+                vData_start++;
+                ch = vData_start < vData_length ? vData.charCodeAt(vData_end) : VNodeDataSeparator.ADVANCE_1;
+              }
+              vData_end = findVDataSectionEnd(vData, vData_start, vData_length);
+            } else {
+              vNodeElementIndex = Number.MAX_SAFE_INTEGER;
+            }
+          }
+          if (elementIdx === vNodeElementIndex) {
+            needsToStoreRef === elementIdx && qVNodeRefs.set(elementIdx, node);
+            const instructions = vData.substring(vData_start, vData_end);
+            vNodeDataMap.set(node, instructions);
+          }
+          elementIdx++;
         }
-        length += consume() - 65;
-        const text = null === combinedText ? "" : combinedText.substring(textIdx, textIdx + length);
-        addVNode(previousTextNode = vnode_newSharedText(previousTextNode, textNode, text));
-        textIdx += length;
-      }
-    }
-    vParent[5] = vLast;
-    return vFirst;
+      } while (node = nextNode || walker2.nextNode());
+    };
+    const walker = document2.createTreeWalker(document2, 129);
+    walkContainer(walker, null, walker.firstChild(), null, "", null, "");
   }
-  var vnode_getType = vnode => {
-    const type = vnode[0];
-    if (1 & type) {
-      return 1;
-    }
-    if (2 & type) {
-      return 11;
-    }
-    if (4 & type) {
-      return 3;
-    }
-    throw throwErrorAndStop("Unknown vnode type: " + type);
-  };
-  var isElement = node => node && "object" == typeof node && 1 === fastNodeType(node);
-  var aPath = [];
-  var bPath = [];
-  var vnode_documentPosition = (a, b) => {
-    if (a === b) {
-      return 0;
-    }
-    let aDepth = -1;
-    let bDepth = -1;
-    while (a) {
-      a = (aPath[++aDepth] = a)[1];
-    }
-    while (b) {
-      b = (bPath[++bDepth] = b)[1];
+  function getDomContainer(element) {
+    const qContainerElement = _getQContainerElement(element);
+    if (!qContainerElement) {
+      throw qError(41);
     }
-    while (aDepth >= 0 && bDepth >= 0) {
-      a = aPath[aDepth];
-      b = bPath[bDepth];
-      if (a !== b) {
-        let cursor = b;
-        do {
-          cursor = vnode_getNextSibling(cursor);
-          if (cursor === a) {
-            return 1;
-          }
-        } while (cursor);
-        cursor = b;
-        do {
-          cursor = vnode_getPreviousSibling(cursor);
-          if (cursor === a) {
-            return -1;
+    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];
+            if (attr.name === Q_PROPS_SEPARATOR) {
+              continue;
+            }
+            containerAttributes[attr.name] = attr.value;
           }
-        } while (cursor);
-        return 1;
-      }
-      aDepth--;
-      bDepth--;
-    }
-    return aDepth < bDepth ? -1 : 1;
-  };
-  var vnode_getProjectionParentComponent = (vHost, rootVNode) => {
-    let projectionDepth = 1;
-    while (projectionDepth--) {
-      while (vHost && (!vnode_isVirtualVNode(vHost) || null === vnode_getProp(vHost, OnRenderProp, null))) {
-        const qSlotParentProp = vnode_getProp(vHost, QSlotParent, 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;
-  };
-  var VNodeArray = class VNode extends Array {
-    static createElement(flags, parent, previousSibling, nextSibling, firstChild, lastChild, element, elementName) {
-      const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-      vnode.push(firstChild, lastChild, element, elementName);
-      return vnode;
-    }
-    static createText(flags, parent, previousSibling, nextSibling, textNode, text) {
-      const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-      vnode.push(textNode, text);
-      return vnode;
-    }
-    static createVirtual(flags, parent, previousSibling, nextSibling, firstChild, lastChild) {
-      const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-      vnode.push(firstChild, lastChild);
-      return vnode;
-    }
-    constructor(flags, parent, previousSibling, nextSibling) {
-      super();
-      this.push(flags, parent, previousSibling, nextSibling);
-      isDev && (this.toString = vnode_toString);
-    }
-  };
-  var _context;
-  var tryGetInvokeContext = () => {
-    if (!_context) {
-      const context = "undefined" !== typeof document && document && document.__q_context__;
-      if (!context) {
-        return;
-      }
-      if (isArray(context)) {
-        return document.__q_context__ = newInvokeContextFromTuple(context);
+        }
       }
-      return context;
-    }
-    return _context;
-  };
-  var useInvokeContext = () => {
-    const ctx = tryGetInvokeContext();
-    if (!ctx || ctx.$event$ !== RenderEvent) {
-      throw qError(QError_useInvokeContext);
+      container.$serverData$ = {
+        containerAttributes: containerAttributes
+      };
+      qElement.setAttribute(QContainerAttr, "resumed");
+      qElement.qContainer = container;
     }
-    assertDefined(ctx.$hostElement$, "invoke: $hostElement$ must be defined", ctx);
-    assertDefined(ctx.$effectSubscriber$, "invoke: $effectSubscriber$ must be defined", ctx);
-    return ctx;
-  };
-  function invoke(context, fn, ...args) {
-    return invokeApply.call(this, context, fn, args);
+    return container;
   }
-  function invokeApply(context, fn, args) {
-    const previousContext = _context;
-    let returnValue;
-    try {
-      _context = context;
-      returnValue = fn.apply(this, args);
-    } finally {
-      _context = previousContext;
-    }
-    return returnValue;
+  function _getQContainerElement(element) {
+    const qContainerElement = Array.isArray(element) ? vnode_getDomParent(element) : element;
+    return qContainerElement.closest(QContainerSelector);
   }
-  var newInvokeContextFromTuple = ([element, event, url]) => {
-    const container = element.closest(QContainerSelector);
-    const locale = (null == container ? void 0 : container.getAttribute(QLocaleAttr)) || void 0;
-    locale && setLocale(locale);
-    return newInvokeContext(locale, void 0, element, event, url);
-  };
-  var newInvokeContext = (locale, hostElement, element, event, url) => {
-    const $locale$ = locale || ("object" === typeof event && event && "locale" in event ? event.locale : void 0);
-    const ctx = {
-      $url$: url,
-      $i$: 0,
-      $hostElement$: hostElement,
-      $element$: element,
-      $event$: event,
-      $qrl$: void 0,
-      $effectSubscriber$: void 0,
-      $locale$: $locale$,
-      $container$: void 0
-    };
-    seal(ctx);
-    return ctx;
-  };
-  var untrack = fn => invoke(void 0, fn);
-  var trackInvocation = newInvokeContext(void 0, void 0, void 0, RenderEvent);
-  var trackSignal = (fn, subscriber, property, container, data) => {
-    const previousSubscriber = trackInvocation.$effectSubscriber$;
-    const previousContainer = trackInvocation.$container$;
-    try {
-      trackInvocation.$effectSubscriber$ = [ subscriber, property ];
-      data && trackInvocation.$effectSubscriber$.push(data);
-      trackInvocation.$container$ = container;
-      return invoke(trackInvocation, fn);
-    } finally {
-      trackInvocation.$effectSubscriber$ = previousSubscriber;
-      trackInvocation.$container$ = previousContainer;
-    }
-  };
-  var _jsxSorted = (type, varProps, constProps, children, flags, key, dev) => {
-    const processed = null == key ? null : String(key);
-    const node = new JSXNodeImpl(type, varProps || {}, constProps || null, children, flags, processed);
-    qDev && dev && (node.dev = {
-      stack: (new Error).stack,
-      ...dev
-    });
-    seal(node);
-    return node;
-  };
-  var _jsxSplit = (type, varProps, constProps, children, flags, key, dev) => {
-    let sortedProps;
-    sortedProps = varProps ? Object.fromEntries(untrack((() => Object.entries(varProps))).filter((entry => {
-      const attr = entry[0];
-      if ("children" === attr) {
-        children ??= entry[1];
-        return false;
+  var isDomContainer = container => container instanceof DomContainer;
+  var DomContainer = class 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(QContainerAttr);
+      if (!this.qContainer) {
+        throw qError(42);
       }
-      if ("key" === attr) {
-        key = entry[1];
-        return false;
+      this.$journal$ = [ 3, element.ownerDocument ];
+      this.document = element.ownerDocument;
+      this.element = element;
+      this.qBase = element.getAttribute(QBaseAttr);
+      this.$instanceHash$ = element.getAttribute(QInstanceAttr);
+      this.qManifestHash = element.getAttribute("q:manifest-hash");
+      this.rootVNode = vnode_newUnMaterializedElement(this.element);
+      this.$rawStateData$ = null;
+      this.stateData = null;
+      const document2 = this.element.ownerDocument;
+      document2.qVNodeData || processVNodeData2(document2);
+      this.$rawStateData$ = [];
+      this.stateData = [];
+      const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
+      if (0 !== qwikStates.length) {
+        const lastState = qwikStates[qwikStates.length - 1];
+        this.$rawStateData$ = JSON.parse(lastState.textContent);
+        this.stateData = wrapDeserializerProxy(this, this.$rawStateData$);
       }
-      return !constProps || !(attr in constProps) || /^on[A-Z].*\$$/.test(attr);
-    })).sort((([a], [b]) => a < b ? -1 : 1))) : "string" === typeof type ? EMPTY_OBJ : {};
-    if (constProps && "children" in constProps) {
-      children = constProps.children;
-      constProps.children = void 0;
+      this.$qFuncs$ = getQFuncs(document2, this.$instanceHash$) || EMPTY_ARRAY;
     }
-    return _jsxSorted(type, sortedProps, constProps, children, flags, key, dev);
-  };
-  var isPropsProxy = obj => obj && void 0 !== obj[_VAR_PROPS];
-  var JSXNodeImpl = class {
-    constructor(type, varProps, constProps, children, flags, key = null) {
-      this.type = type;
-      this.varProps = varProps;
-      this.constProps = constProps;
-      this.children = children;
-      this.flags = flags;
-      this.key = key;
+    $setRawState$(id, vParent) {
+      this.stateData[id] = vParent;
+    }
+    parseQRL(qrl) {
+      return inflateQRL(this, parseQRL(qrl));
+    }
+    handleError(err, host) {
       if (qDev) {
-        if ("object" !== typeof varProps) {
-          throw new Error("JSXNodeImpl: varProps must be objects: " + JSON.stringify(varProps));
+        if ("undefined" !== typeof document) {
+          const vHost = host;
+          const errorDiv = document.createElement("errored-host");
+          err && err instanceof Error && (errorDiv.props = {
+            error: err
+          });
+          errorDiv.setAttribute("q:key", "_error_");
+          const journal = [];
+          vnode_getDOMChildNodes(journal, vHost).forEach((child => errorDiv.appendChild(child)));
+          const vErrorDiv = vnode_newElement(errorDiv, "error-host");
+          vnode_insertBefore(journal, vHost, vErrorDiv, null);
+          vnode_applyJournal(journal);
         }
-        if ("object" !== typeof constProps) {
-          throw new Error("JSXNodeImpl: constProps must be objects: " + JSON.stringify(constProps));
+        err && err instanceof Error && ("hostElement" in err || (err.hostElement = host));
+        if (!isRecoverable(err)) {
+          throw err;
         }
       }
+      const errorStore = this.resolveContext(host, ERROR_CONTEXT);
+      if (!errorStore) {
+        throw err;
+      }
+      errorStore.error = err;
     }
-    dev;
-    _proxy=null;
-    get props() {
-      this._proxy || (this._proxy = createPropsProxy(this.varProps, this.constProps, this.children));
-      return this._proxy;
+    setContext(host, context, value) {
+      let ctx = this.getHostProp(host, QCtxAttr);
+      ctx || this.setHostProp(host, QCtxAttr, ctx = []);
+      mapArray_set(ctx, context.id, value, 0);
     }
-  };
-  var Virtual = props => props.children;
-  var isJSXNode = n => {
-    if (qDev) {
-      if (n instanceof JSXNodeImpl) {
-        return true;
+    resolveContext(host, contextId) {
+      while (host) {
+        const ctx = this.getHostProp(host, QCtxAttr);
+        if (ctx) {
+          const value = mapArray_get(ctx, contextId.id, 0);
+          if (value) {
+            return value;
+          }
+        }
+        host = this.getParentHost(host);
       }
-      if (isObject(n) && "key" in n && "props" in n && "type" in n) {
-        logWarn('Duplicate implementations of "JSXNode" found');
-        return true;
+      return;
+    }
+    getParentHost(host) {
+      let vNode = vnode_getParent(host);
+      while (vNode) {
+        if (vnode_isVirtualVNode(vNode)) {
+          if (null !== vnode_getProp(vNode, OnRenderProp, null)) {
+            return vNode;
+          }
+          const parent = vnode_getProp(vNode, QSlotParent, this.$vnodeLocate$);
+          if (parent) {
+            vNode = parent;
+            continue;
+          }
+        }
+        vNode = vnode_getParent(vNode);
       }
-      return false;
+      return null;
     }
-    return n instanceof JSXNodeImpl;
-  };
-  var Fragment = props => props.children;
-  function createPropsProxy(varProps, constProps, children) {
-    return new Proxy({}, new PropsProxyHandler(varProps, constProps, children));
-  }
-  var PropsProxyHandler = class {
-    constructor($varProps$, $constProps$, $children$) {
-      this.$varProps$ = $varProps$;
-      this.$constProps$ = $constProps$;
-      this.$children$ = $children$;
+    setHostProp(host, name, value) {
+      const vNode = host;
+      vnode_setProp(vNode, name, value);
     }
-    get(_, prop) {
-      if (prop === _CONST_PROPS) {
-        return this.$constProps$;
-      }
-      if (prop === _VAR_PROPS) {
-        return this.$varProps$;
-      }
-      if (null != this.$children$ && "children" === prop) {
-        return this.$children$;
+    getHostProp(host, name) {
+      const vNode = host;
+      let getObjectById = null;
+      switch (name) {
+       case ELEMENT_SEQ:
+       case ELEMENT_PROPS:
+       case OnRenderProp:
+       case QCtxAttr:
+       case QSubscribers:
+        getObjectById = this.$getObjectById$;
+        break;
+
+       case ELEMENT_SEQ_IDX:
+       case USE_ON_LOCAL_SEQ_IDX:
+        getObjectById = parseInt;
+        break;
       }
-      const value = this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] : this.$varProps$[prop];
-      return value instanceof WrappedSignal ? value.value : value;
+      return vnode_getProp(vNode, name, getObjectById);
     }
-    set(_, prop, value) {
-      if (prop === _CONST_PROPS) {
-        this.$constProps$ = value;
-        return true;
+    scheduleRender() {
+      this.$renderCount$++;
+      this.renderDone ||= getPlatform().nextTick((() => this.processChores()));
+      return this.renderDone;
+    }
+    processChores() {
+      let renderCount = this.$renderCount$;
+      const result = this.$scheduler$(255);
+      if (isPromise(result)) {
+        return result.then((async () => {
+          while (renderCount !== this.$renderCount$) {
+            renderCount = this.$renderCount$;
+            await this.$scheduler$(255);
+          }
+          this.renderDone = null;
+        }));
       }
-      if (prop === _VAR_PROPS) {
-        this.$varProps$ = value;
-        return true;
+      if (renderCount !== this.$renderCount$) {
+        this.processChores();
+        return;
       }
-      this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] = value : this.$varProps$[prop] = value;
-      return true;
+      this.renderDone = null;
     }
-    deleteProperty(_, prop) {
-      if ("string" !== typeof prop) {
-        return false;
+    ensureProjectionResolved(vNode) {
+      if (0 === (16 & vNode[0])) {
+        vNode[0] |= 16;
+        for (let i = vnode_getPropStartIndex(vNode); i < vNode.length; i += 2) {
+          const prop = vNode[i];
+          if (isSlotProp(prop)) {
+            const value = vNode[i + 1];
+            "string" == typeof value && (vNode[i + 1] = this.$vnodeLocate$(value));
+          }
+        }
       }
-      let didDelete = delete this.$varProps$[prop];
-      this.$constProps$ && (didDelete = delete this.$constProps$[prop] || didDelete);
-      null != this.$children$ && "children" === prop && (this.$children$ = null);
-      return didDelete;
-    }
-    has(_, prop) {
-      const hasProp = "children" === prop && null != this.$children$ || prop === _CONST_PROPS || prop === _VAR_PROPS || prop in this.$varProps$ || !!this.$constProps$ && prop in this.$constProps$;
-      return hasProp;
     }
-    getOwnPropertyDescriptor(target, p) {
-      const value = "children" === p && null != this.$children$ ? this.$children$ : this.$constProps$ && p in this.$constProps$ ? this.$constProps$[p] : this.$varProps$[p];
-      return {
-        configurable: true,
-        enumerable: true,
-        value: value
-      };
+    $getObjectById$=id => {
+      "string" === typeof id && (id = parseFloat(id));
+      assertTrue(id < this.$rawStateData$.length / 2, `Invalid reference: ${id} >= ${this.$rawStateData$.length / 2}`);
+      return this.stateData[id];
+    };
+    getSyncFn(id) {
+      const fn = this.$qFuncs$[id];
+      assertTrue("function" === typeof fn, "Invalid reference: " + id);
+      return fn;
     }
-    ownKeys() {
-      const out = Object.keys(this.$varProps$);
-      null != this.$children$ && -1 === out.indexOf("children") && out.push("children");
-      if (this.$constProps$) {
-        for (const key in this.$constProps$) {
-          -1 === out.indexOf(key) && out.push(key);
-        }
+    $appendStyle$(content, styleId, host, scoped) {
+      if (scoped) {
+        const scopedStyleIdsString = this.getHostProp(host, QScopedStyle);
+        const scopedStyleIds = new Set(convertScopedStyleIdsToArray(scopedStyleIdsString));
+        scopedStyleIds.add(styleId);
+        this.setHostProp(host, QScopedStyle, convertStyleIdsToString(scopedStyleIds));
+      }
+      if (null == this.$styleIds$) {
+        this.$styleIds$ = new Set;
+        this.element.querySelectorAll(QStyleSelector).forEach((style => {
+          this.$styleIds$.add(style.getAttribute(QStyle));
+        }));
+      }
+      if (!this.$styleIds$.has(styleId)) {
+        this.$styleIds$.add(styleId);
+        const styleElement = this.document.createElement("style");
+        styleElement.setAttribute(QStyle, styleId);
+        styleElement.textContent = content;
+        this.$journal$.push(5, this.document.head, null, styleElement);
       }
-      return out;
-    }
-  };
-  var directGetPropsProxyProp = (jsx2, prop) => jsx2.constProps && prop in jsx2.constProps ? jsx2.constProps[prop] : jsx2.varProps[prop];
-  var componentQrl = componentQrl2 => {
-    function QwikComponent(props, key, flags = 0) {
-      assertQrl(componentQrl2);
-      assertNumber(flags, "The Qwik Component was not invoked correctly");
-      const hash = qTest ? "sX" : componentQrl2.$hash$.slice(0, 4);
-      const finalKey = hash + ":" + (key || "");
-      const InnerCmp = () => {};
-      InnerCmp[SERIALIZABLE_STATE] = [ componentQrl2 ];
-      return _jsxSplit(InnerCmp, props, null, props.children, flags, finalKey);
     }
-    QwikComponent[SERIALIZABLE_STATE] = [ componentQrl2 ];
-    return QwikComponent;
   };
-  var SERIALIZABLE_STATE = Symbol("serializable-data");
-  var isQwikComponent = component => "function" == typeof component && void 0 !== component[SERIALIZABLE_STATE];
-  implicit$FirstArg(eventQrl);
-  var rule = 0;
-  var elementClassIdSelector = 1;
-  var starSelector = 2;
-  var pseudoClassWithSelector = 3;
-  var pseudoClass = 4;
-  var pseudoGlobal = 5;
-  var pseudoElement = 6;
-  var attrSelector = 7;
-  var inertParenthesis = 8;
-  var inertBlock = 9;
-  var atRuleSelector = 10;
-  var atRuleBlock = 11;
-  var atRuleInert = 12;
-  var body = 13;
-  var stringSingle = 14;
-  var stringDouble = 15;
-  var commentMultiline = 16;
-  var EXIT = 17;
-  var EXIT_INSERT_SCOPE = 18;
-  var ANY = 0;
-  var IDENT = 1;
-  var NOT_IDENT = 2;
-  var WHITESPACE = 3;
-  var DOUBLE_QUOTE = 34;
-  var HASH = 35;
-  var SINGLE_QUOTE = 39;
-  var OPEN_PARENTHESIS = 40;
-  var CLOSE_PARENTHESIS = 41;
-  var STAR = 42;
-  var DOT = 46;
-  var FORWARD_SLASH = 47;
-  var COLON = 58;
-  var SEMICOLON = 59;
-  var AT = 64;
-  var OPEN_BRACKET = 91;
-  var CLOSE_BRACKET = 93;
-  var OPEN_BRACE = 123;
-  var CLOSE_BRACE = 125;
-  var STRINGS_COMMENTS = (() => [ [ ANY, SINGLE_QUOTE, stringSingle ], [ ANY, DOUBLE_QUOTE, stringDouble ], [ ANY, FORWARD_SLASH, commentMultiline, "*" ] ])();
-  var useComputedQrl = qrl2 => {
-    const {val: val, set: set} = useSequentialScope();
-    if (val) {
-      return val;
-    }
-    assertQrl(qrl2);
-    const signal = new ComputedSignal(null, qrl2);
-    set(signal);
-    throwIfQRLNotResolved(qrl2);
-    return signal;
-  };
-  implicit$FirstArg(useComputedQrl);
-  Number.MAX_SAFE_INTEGER;
-  Number.MAX_SAFE_INTEGER;
   var deserializedProxyMap = new WeakMap;
   var unwrapDeserializerProxy = value => {
     const unwrapped = "object" === typeof value && null !== value && value[SERIALIZER_PROXY_UNWRAP];
@@ -7232,7 +7208,8 @@ globalThis.qwikOptimizer = function(module) {
         signal.$args$ = d[1];
         signal.$effectDependencies$ = d[2];
         signal.$untrackedValue$ = d[3];
-        signal.$effects$ = d.slice(4);
+        signal.$hostElement$ = d[4];
+        signal.$effects$ = d.slice(5);
         break;
       }
 
@@ -7338,12 +7315,13 @@ globalThis.qwikOptimizer = function(module) {
      case 30:
       {
         const effectData = target;
-        effectData.data = data[0];
+        effectData.data.$scopedStyleIdPrefix$ = data[0];
+        effectData.data.$isConst$ = data[1];
         break;
       }
 
      default:
-      return throwErrorAndStop("Not implemented");
+      throw qError(33, [ typeId ]);
     }
   };
   var _constants = [ void 0, null, true, false, "", EMPTY_ARRAY, EMPTY_OBJ, NEEDS_COMPUTATION, Slot, Fragment, NaN, 1 / 0, -1 / 0, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER - 1, Number.MIN_SAFE_INTEGER ];
@@ -7368,11 +7346,11 @@ globalThis.qwikOptimizer = function(module) {
       return {};
 
      case 18:
-      const qrl2 = container.$getObjectById$(value);
-      return parseQRL(qrl2);
+      const qrl = container.$getObjectById$(value);
+      return parseQRL(qrl);
 
      case 19:
-      return new Task2(-1, -1, null, null, null, null);
+      return new Task(-1, -1, null, null, null, null);
 
      case 20:
       {
@@ -7460,26 +7438,29 @@ globalThis.qwikOptimizer = function(module) {
         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(34, [ typeof vNode ]);
 
      case 30:
-      return new EffectData(null);
+      return new EffectPropData({});
 
      default:
-      return throwErrorAndStop("unknown allocate type: " + typeId);
+      throw qError(35, [ typeId ]);
     }
   };
   function retrieveVNodeOrDocument(container, value) {
     var _a;
     return value ? container.rootVNode ? vnode_locate(container.rootVNode, value) : void 0 : null == (_a = container.element) ? void 0 : _a.ownerDocument;
   }
-  function parseQRL(qrl2) {
-    const hashIdx = qrl2.indexOf("#");
-    const captureStart = qrl2.indexOf("[", hashIdx);
-    const captureEnd = qrl2.indexOf("]", captureStart);
-    const chunk = hashIdx > -1 ? qrl2.slice(0, hashIdx) : qrl2.slice(0, captureStart);
-    const symbol = captureStart > -1 ? qrl2.slice(hashIdx + 1, captureStart) : qrl2.slice(hashIdx + 1);
-    const captureIds = captureStart > -1 && captureEnd > -1 ? qrl2.slice(captureStart + 1, captureEnd).split(" ").filter((v => v.length)).map((s => parseInt(s, 10))) : null;
+  function parseQRL(qrl) {
+    const hashIdx = qrl.indexOf("#");
+    const captureStart = qrl.indexOf("[", hashIdx);
+    const captureEnd = qrl.indexOf("]", captureStart);
+    const chunk = hashIdx > -1 ? qrl.slice(0, hashIdx) : qrl.slice(0, captureStart);
+    const symbol = captureStart > -1 ? qrl.slice(hashIdx + 1, captureStart) : qrl.slice(hashIdx + 1);
+    const captureIds = captureStart > -1 && captureEnd > -1 ? qrl.slice(captureStart + 1, captureEnd).split(" ").filter((v => v.length)).map((s => parseInt(s, 10))) : null;
     let qrlRef = null;
     if (isDev2 && chunk === QRL_RUNTIME_CHUNK) {
       const backChannel = globalThis[QRL_RUNTIME_CHUNK];
@@ -7488,11 +7469,11 @@ globalThis.qwikOptimizer = function(module) {
     }
     return createQRL(chunk, symbol, qrlRef, null, captureIds, null, null);
   }
-  function inflateQRL(container, qrl2) {
-    const captureIds = qrl2.$capture$;
-    qrl2.$captureRef$ = captureIds ? captureIds.map((id => container.$getObjectById$(id))) : null;
-    container.element && qrl2.$setContainer$(container.element);
-    return qrl2;
+  function inflateQRL(container, qrl) {
+    const captureIds = qrl.$capture$;
+    qrl.$captureRef$ = captureIds ? captureIds.map((id => container.$getObjectById$(id))) : null;
+    container.element && qrl.$setContainer$(container.element);
+    return qrl;
   }
   var isDomRef = obj => false;
   var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, prepVNodeData) => {
@@ -7538,7 +7519,7 @@ globalThis.qwikOptimizer = function(module) {
       $getRootId$: obj => {
         const id = map.get(obj);
         if (!id || -1 === id) {
-          return throwErrorAndStop("Missing root id for: ", obj);
+          throw qError(36, [ obj ]);
         }
         return id;
       },
@@ -7581,8 +7562,8 @@ globalThis.qwikOptimizer = function(module) {
           if (isQrl2(obj)) {
             obj.$captureRef$ && discoveredValues.push(...obj.$captureRef$);
           } else if (isQwikComponent(obj)) {
-            const [qrl2] = obj[SERIALIZABLE_STATE];
-            discoveredValues.push(qrl2);
+            const [qrl] = obj[SERIALIZABLE_STATE];
+            discoveredValues.push(qrl);
           }
         } else if ("object" !== typeof obj || null === obj || obj instanceof URL || obj instanceof Date || obj instanceof RegExp || obj instanceof Uint8Array || obj instanceof URLSearchParams || "undefined" !== typeof FormData && obj instanceof FormData || fastSkipSerialize(obj)) {} else if (obj instanceof Error) {
           discoveredValues.push(...Object.values(obj));
@@ -7608,13 +7589,19 @@ globalThis.qwikOptimizer = function(module) {
           if (obj instanceof WrappedSignal) {
             obj.$effectDependencies$ && discoveredValues.push(...obj.$effectDependencies$);
             obj.$args$ && discoveredValues.push(...obj.$args$);
+            obj.$hostElement$ && discoveredValues.push(obj.$hostElement$);
           } else {
             obj instanceof ComputedSignal && discoveredValues.push(obj.$computeQrl$);
           }
-        } else if (obj instanceof Task2) {
+        } else if (obj instanceof Task) {
           discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$, obj.$effectDependencies$);
         } else if (isSsrNode(obj)) {
-          discoveredValues.push(obj.vnodeData);
+          discoverValuesForVNodeData(obj.vnodeData, discoveredValues);
+          if (obj.childrenVNodeData && obj.childrenVNodeData.length) {
+            for (const data of obj.childrenVNodeData) {
+              discoverValuesForVNodeData(data, discoveredValues);
+            }
+          }
         } else if (isDomRef(obj)) {
           discoveredValues.push(obj.$ssrNode$.id);
         } else if (isJSXNode(obj)) {
@@ -7634,11 +7621,11 @@ globalThis.qwikOptimizer = function(module) {
             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(37, [ obj ]);
           }
           Object.entries(obj).forEach((([key, value]) => {
             discoveredValues.push(key, value);
@@ -7667,6 +7654,20 @@ globalThis.qwikOptimizer = function(module) {
       } while (discoveredValues.length);
     }
   };
+  var isSsrAttrs = value => Array.isArray(value) && value.length > 0;
+  var discoverValuesForVNodeData = (vnodeData, discoveredValues) => {
+    for (const value of vnodeData) {
+      if (isSsrAttrs(value)) {
+        for (let i = 1; i < value.length; i += 2) {
+          if (value[i - 1] === ELEMENT_KEY) {
+            continue;
+          }
+          const attrValue = value[i];
+          discoveredValues.push(attrValue);
+        }
+      }
+    }
+  };
   var promiseResults = new WeakMap;
   function serialize(serializationContext) {
     const {$writer$: $writer$, $isSsrNode$: $isSsrNode$, $isDomRef$: $isDomRef$, $setProp$: $setProp$, $storeProxyMap$: $storeProxyMap$} = serializationContext;
@@ -7711,13 +7712,13 @@ globalThis.qwikOptimizer = function(module) {
         } else if (value === Fragment) {
           output(1, 9);
         } else if (isQrl2(value)) {
-          const qrl2 = qrlToString(serializationContext, value);
-          const id = serializationContext.$addRoot$(qrl2);
+          const qrl = qrlToString(serializationContext, value);
+          const id = serializationContext.$addRoot$(qrl);
           output(18, id);
         } else if (isQwikComponent(value)) {
-          const [qrl2] = value[SERIALIZABLE_STATE];
-          serializationContext.$renderSymbols$.add(qrl2.$symbol$);
-          output(21, [ qrl2 ]);
+          const [qrl] = value[SERIALIZABLE_STATE];
+          serializationContext.$renderSymbols$.add(qrl.$symbol$);
+          output(21, [ qrl ]);
         } else {
           console.error("Cannot serialize function (ignoring for now): " + value.toString());
           output(1, 0);
@@ -7741,8 +7742,13 @@ globalThis.qwikOptimizer = function(module) {
           const seen = depth > 1 && serializationContext.$wasSeen$(value);
           "number" === typeof seen && seen >= 0 ? output(0, seen) : output(3, value);
         }
+      } else if ("undefined" === typeof value) {
+        output(1, 0);
       } else {
-        "undefined" === typeof value ? output(1, 0) : value === NEEDS_COMPUTATION ? output(1, 7) : throwErrorAndStop("Unknown type: " + typeof value);
+        if (value !== NEEDS_COMPUTATION) {
+          throw qError(37, [ typeof value ]);
+        }
+        output(1, 7);
       }
     };
     const writeObjectValue = (value, idx) => {
@@ -7760,14 +7766,14 @@ globalThis.qwikOptimizer = function(module) {
         const constProps = value[_CONST_PROPS];
         const out = constProps ? [ varProps, constProps ] : Object.keys(varProps).length ? [ varProps ] : 0;
         output(29, out);
-      } else if (value instanceof EffectData) {
-        output(30, [ value.data ]);
+      } else if (value instanceof EffectPropData) {
+        output(30, [ value.data.$scopedStyleIdPrefix$, value.data.$isConst$ ]);
       } else if (isStore(value)) {
         if (isResource(value)) {
           serializationContext.$resources$.add(value);
           const res = promiseResults.get(value.value);
           if (!res) {
-            return throwErrorAndStop("Unvisited Resource");
+            throw qError(38, [ "resource" ]);
           }
           output(20, [ ...res, getStoreHandler(value).$effects$ ]);
         } else {
@@ -7802,12 +7808,12 @@ globalThis.qwikOptimizer = function(module) {
           output(13, out);
         }
       } else if ($isDomRef$(value)) {
-        value.$ssrNode$.vnodeData[0] |= 8;
+        value.$ssrNode$.vnodeData[0] |= 16;
         output(9, 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(23, [ ...serializeWrappingFn(serializationContext, value), value.$effectDependencies$, v, ...value.$effects$ || [] ]);
+          output(23, [ ...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);
@@ -7834,11 +7840,11 @@ globalThis.qwikOptimizer = function(module) {
           const vNodeData = value.vnodeData;
           if (vNodeData) {
             null == (_a = serializationContext.$prepVNodeData$) || _a.call(serializationContext, vNodeData);
-            vNodeData[0] |= 8;
+            vNodeData[0] |= 16;
           }
           if (value.childrenVNodeData) {
             for (const vNodeData2 of value.childrenVNodeData) {
-              vNodeData2[0] |= 8;
+              vNodeData2[0] |= 16;
             }
           }
         } else {
@@ -7863,7 +7869,7 @@ globalThis.qwikOptimizer = function(module) {
         output(16, combined);
       } else if (isJSXNode(value)) {
         output(28, [ value.type, value.varProps, value.constProps, value.children, value.flags, value.key ]);
-      } else if (value instanceof Task2) {
+      } else if (value instanceof Task) {
         const out = [ value.$qrl$, value.$flags$, value.$index$, value.$el$, value.$effectDependencies$, value.$state$ ];
         while (null == out[out.length - 1]) {
           out.pop();
@@ -7872,12 +7878,12 @@ globalThis.qwikOptimizer = function(module) {
       } else if (isPromise(value)) {
         const res = promiseResults.get(value);
         if (!res) {
-          return throwErrorAndStop("Unvisited Promise");
+          throw qError(38, [ "promise" ]);
         }
         output(14, res);
       } else {
         if (!(value instanceof Uint8Array)) {
-          return throwErrorAndStop("implement");
+          throw qError(37, [ typeof value ]);
         }
         {
           let buf = "";
@@ -7922,7 +7928,9 @@ globalThis.qwikOptimizer = function(module) {
         backChannel.set(value.$symbol$, value._devOnlySymbolRef);
         chunk || (chunk = QRL_RUNTIME_CHUNK);
       }
-      chunk || throwErrorAndStop("Missing chunk for: " + value.$symbol$);
+      if (!chunk) {
+        throw qError(31, [ value.$symbol$ ]);
+      }
       chunk.startsWith("./") && (chunk = chunk.slice(2));
     }
     let qrlStringInline = `${chunk}#${symbol}`;
@@ -7956,7 +7964,7 @@ globalThis.qwikOptimizer = function(module) {
   function isResource(value) {
     return "__brand" in value && "resource" === value.__brand;
   }
-  var frameworkType = obj => "object" === typeof obj && null !== obj && (obj instanceof Signal || obj instanceof Task2 || isJSXNode(obj)) || isQrl2(obj);
+  var frameworkType = obj => "object" === typeof obj && null !== obj && (obj instanceof Signal || obj instanceof Task || isJSXNode(obj)) || isQrl2(obj);
   var canSerialize = value => {
     if (null == value || "string" === typeof value || "number" === typeof value || "boolean" === typeof value || "bigint" === typeof value) {
       return true;
@@ -8061,7 +8069,7 @@ globalThis.qwikOptimizer = function(module) {
           let expectIndex = 0;
           unwrapped.forEach(((v, i) => {
             if (i !== expectIndex) {
-              throw qError(QError_verifySerializable, unwrapped);
+              throw qError(3, [ unwrapped ]);
             }
             _verifySerializable(v, seen, ctx + "[" + i + "]");
             expectIndex = i + 1;
@@ -8090,8 +8098,7 @@ globalThis.qwikOptimizer = function(module) {
         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(3, [ message ]);
     }
     return value;
   };
@@ -8117,7 +8124,7 @@ globalThis.qwikOptimizer = function(module) {
       }
     }
     let _containerEl;
-    const qrl2 = async function(...args) {
+    const qrl = async function(...args) {
       const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
       const result = await boundedFn(...args);
       return result;
@@ -8129,7 +8136,7 @@ globalThis.qwikOptimizer = function(module) {
     function bindFnToContext(currentCtx, beforeFn) {
       return (...args) => maybeThen(resolveLazy(), (fn => {
         if (!isFunction(fn)) {
-          throw qError(QError_qrlIsNotFunction);
+          throw qError(10);
         }
         if (beforeFn && false === beforeFn()) {
           return;
@@ -8137,7 +8144,7 @@ globalThis.qwikOptimizer = function(module) {
         const context = createOrReuseInvocationContext(currentCtx);
         const prevQrl = context.$qrl$;
         const prevEvent = context.$event$;
-        context.$qrl$ = qrl2;
+        context.$qrl$ = qrl;
         context.$event$ ||= this;
         try {
           return invoke.call(this, context, fn, ...args);
@@ -8158,7 +8165,7 @@ globalThis.qwikOptimizer = function(module) {
           return fn.apply(this, args);
         }
         context = newInvokeContext();
-        context.$qrl$ = qrl2;
+        context.$qrl$ = qrl;
         context.$event$ = this;
         return invoke.call(this, context, fn, ...args);
       };
@@ -8173,15 +8180,15 @@ globalThis.qwikOptimizer = function(module) {
         const hash2 = _containerEl.getAttribute(QInstanceAttr);
         const doc = _containerEl.ownerDocument;
         const qFuncs = getQFuncs(doc, hash2);
-        return qrl2.resolved = symbolRef = qFuncs[Number(symbol)];
+        return qrl.resolved = symbolRef = qFuncs[Number(symbol)];
       }
       const start = now();
       const ctx = tryGetInvokeContext();
       if (null !== symbolFn) {
-        symbolRef = symbolFn().then((module2 => qrl2.resolved = symbolRef = wrapFn(module2[symbol])));
+        symbolRef = symbolFn().then((module2 => qrl.resolved = symbolRef = wrapFn(module2[symbol])));
       } else {
         const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-        symbolRef = maybeThen(imported, (ref => qrl2.resolved = symbolRef = wrapFn(ref)));
+        symbolRef = maybeThen(imported, (ref => qrl.resolved = symbolRef = wrapFn(ref)));
       }
       "object" === typeof symbolRef && isPromise(symbolRef) && symbolRef.then((() => emitUsedSymbol(symbol, null == ctx ? void 0 : ctx.$element$, start)), (err => {
         console.error(`qrl ${symbol} failed to load`, err);
@@ -8193,7 +8200,7 @@ globalThis.qwikOptimizer = function(module) {
     const createOrReuseInvocationContext = invoke2 => null == invoke2 ? newInvokeContext() : isArray(invoke2) ? newInvokeContextFromTuple(invoke2) : invoke2;
     const resolvedSymbol = refSymbol ?? symbol;
     const hash = getSymbolHash(resolvedSymbol);
-    Object.assign(qrl2, {
+    Object.assign(qrl, {
       getSymbol: () => resolvedSymbol,
       getHash: () => hash,
       getCaptured: () => captureRef,
@@ -8210,12 +8217,12 @@ globalThis.qwikOptimizer = function(module) {
       dev: null,
       resolved: void 0
     });
-    symbolRef && (symbolRef = maybeThen(symbolRef, (resolved => qrl2.resolved = symbolRef = wrapFn(resolved))));
-    isDev && Object.defineProperty(qrl2, "_devOnlySymbolRef", {
+    symbolRef && (symbolRef = maybeThen(symbolRef, (resolved => qrl.resolved = symbolRef = wrapFn(resolved))));
+    isDev && Object.defineProperty(qrl, "_devOnlySymbolRef", {
       get: () => symbolRef
     });
-    qDev && seal(qrl2);
-    return qrl2;
+    qDev && seal(qrl);
+    return qrl;
   };
   var getSymbolHash = symbolName => {
     const index = symbolName.lastIndexOf("_");
@@ -8224,8 +8231,8 @@ globalThis.qwikOptimizer = function(module) {
     }
     return symbolName;
   };
-  function assertQrl(qrl2) {
-    if (qDev && !isQrl2(qrl2)) {
+  function assertQrl(qrl) {
+    if (qDev && !isQrl2(qrl)) {
       throw new Error("Not a QRL");
     }
   }
@@ -8329,8 +8336,8 @@ globalThis.qwikOptimizer = function(module) {
           }
           const firstInput = opts.input && Object.values(opts.input)[0];
           const ssrModule = await server.ssrLoadModule(firstInput);
-          const render2 = ssrModule.default ?? ssrModule.render;
-          if ("function" === typeof render2) {
+          const render = ssrModule.default ?? ssrModule.render;
+          if ("function" === typeof render) {
             const manifest = {
               manifestHash: "",
               symbols: {},
@@ -8379,7 +8386,7 @@ globalThis.qwikOptimizer = function(module) {
             res.setHeader("Access-Control-Allow-Origin", "*");
             res.setHeader("X-Powered-By", "Qwik Vite Dev Server");
             res.writeHead(status);
-            const result = await render2(renderOpts);
+            const result = await render(renderOpts);
             Array.from(server.moduleGraph.fileToModulesMap.entries()).forEach((entry => {
               entry[1].forEach((v => {
                 const {pathId: pathId, query: query} = parseId(v.url);