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

package/dist/optimizer.mjs

@@ -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
@@ -1260,7 +1260,7 @@ function createPath(opts = {}) {
 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() {
@@ -1541,7 +1541,7 @@ function generateManifestFromBundles(path, segments, injections, outputBundles,
     }
     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;
@@ -2265,7 +2265,7 @@ function createPlugin(optimizerOptions = {}) {
     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));
@@ -2812,7 +2812,7 @@ function imgImportName(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;
@@ -2941,7 +2941,7 @@ var logWarn = (message, ...optionalParams) => {
 
 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);
@@ -2997,33 +2997,21 @@ function assertNumber(value1, text, ...parts) {
 
 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 = () => ({
@@ -3037,10 +3025,10 @@ var createPlatform = () => ({
       }
     }
     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);
@@ -3098,7 +3086,7 @@ var maybeThen = (valueOrPromise, thenFn) => isPromise(valueOrPromise) ? valueOrP
 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 => {
@@ -3131,43 +3119,6 @@ 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);
-
-var QObjectRecursive = 1;
-
-var QObjectImmutable = 2;
-
-var QObjectTargetSymbol = Symbol("proxy target");
-
-var QObjectFlagsSymbol = Symbol("proxy flags");
-
-var QObjectManagerSymbol = Symbol("proxy manager");
-
-var _CONST_PROPS = Symbol("CONST");
-
-var _VAR_PROPS = Symbol("VAR");
-
-var _IMMUTABLE = Symbol("IMMUTABLE");
-
 var DEBUG_TYPE = "q:type";
 
 var START = "";
@@ -3260,6 +3211,8 @@ 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";
@@ -3279,38 +3232,29 @@ function setLocale(locale) {
 }
 
 var versions3 = {
-  qwik: "2.0.0-alpha.3-dev+418fd6d",
+  qwik: "2.0.0-alpha.4-dev+374e0d6",
   qwikDom: 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("$");
 
@@ -3371,525 +3315,341 @@ 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 fromCamelToKebabCaseWithDash = text => text.replace(/([A-Z])/g, "-$1").toLowerCase();
 
-var isRecoverable = err => {
-  if (err && err instanceof Error && "plugin" in err) {
-    return false;
+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);
+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 isParentSlotProp(prop) {
-  return prop.startsWith(QSlotParent);
+function isEnumeratedBooleanAttribute(key) {
+  return isAriaAttribute(key) || [ "spellcheck", "draggable", "contenteditable" ].includes(key);
 }
 
-var Subscriber = class {
-  constructor() {
-    __publicField(this, "$effectDependencies$", null);
+var setValueForStyle = (styleName, value) => {
+  if ("number" === typeof value && 0 !== value && !isUnitlessNumber(styleName)) {
+    return value + "px";
   }
+  return value;
 };
 
-function isSubscriber(value) {
-  return value instanceof Subscriber || value instanceof WrappedSignal;
+function isAriaAttribute(prop) {
+  return prop.startsWith("aria-");
 }
 
-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 styleContent = styleId => ComponentStylesPrefixContent + styleId;
 
-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);
+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;
+function convertScopedStyleIdsToArray(scopedStyleIds) {
+  return scopedStyleIds?.split(" ") ?? null;
+}
 
-var log = (...args) => console.log("SIGNAL", ...args.map(qwikDebugToString));
+function convertStyleIdsToString(scopedStyleIds) {
+  return Array.from(scopedStyleIds).join(" ");
+}
 
-var throwIfQRLNotResolved = qrl2 => {
-  const resolved = qrl2.resolved;
-  if (!resolved) {
-    throw qrl2.resolve();
+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 DEBUG = false;
 
-var EffectData = class {
-  constructor(data) {
-    __publicField(this, "data");
-    this.data = data;
+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 => 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 {
-  constructor(container, value) {
-    __publicField(this, "$untrackedValue$");
+var StoreHandler = class {
+  constructor($flags$, $container$) {
+    this.$flags$ = $flags$;
+    this.$container$ = $container$;
     __publicField(this, "$effects$", null);
-    __publicField(this, "$container$", null);
-    this.$container$ = container;
-    this.$untrackedValue$ = value;
-    DEBUG && log("new", this);
-  }
-  get untrackedValue() {
-    return this.$untrackedValue$;
   }
-  set untrackedValue(value) {
-    this.$untrackedValue$ = value;
+  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$ || (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);
+    }
+    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) {
+        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 this.untrackedValue;
+    return true;
   }
-  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$);
+  deleteProperty(target, prop) {
+    if ("string" != typeof prop || !delete target[prop]) {
+      return false;
     }
+    triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$));
+    return true;
   }
-  valueOf() {
-    if (qDev) {
-      return throwErrorAndStop("Cannot coerce a Signal, use `.value` instead");
+  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);
   }
-  toString() {
-    return `[${this.constructor.name}${this.$invalid$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + (this.$effects$?.map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n") || "");
+  ownKeys(target) {
+    const ctx = tryGetInvokeContext();
+    const effectSubscriber = ctx?.$effectSubscriber$;
+    effectSubscriber && addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber);
+    return Reflect.ownKeys(target);
   }
-  toJSON() {
+  getOwnPropertyDescriptor(target, prop) {
+    if (Array.isArray(target) || "symbol" === typeof prop) {
+      return Object.getOwnPropertyDescriptor(target, prop);
+    }
     return {
-      value: this.$untrackedValue$
+      enumerable: true,
+      configurable: true
     };
   }
 };
 
-var ensureContains = (array, value) => {
-  const isMissing = -1 === array.indexOf(value);
-  isMissing && array.push(value);
-};
+function addEffect(target, prop, store, effectSubscriber) {
+  const effectsMap = store.$effects$ || (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(), "  "));
+}
 
-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;
-    }
+function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
+  target[prop] = value;
+  triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
+}
+
+function getEffects(target, prop, storeEffects) {
+  let effectsToTrigger = storeEffects ? Array.isArray(target) ? Object.values(storeEffects).flatMap((effects => effects)) : storeEffects[prop] : null;
+  const storeArrayValue = storeEffects?.[STORE_ARRAY_PROP];
+  if (storeArrayValue) {
+    effectsToTrigger || (effectsToTrigger = []);
+    effectsToTrigger.push(...storeArrayValue);
   }
-  array.push(effectSubscriptions);
-};
+  return effectsToTrigger;
+}
 
-var ensureEffectContainsSubscriber = (effect, subscriber, container) => {
-  if (isSubscriber(effect)) {
-    effect.$effectDependencies$ || (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 || (subscribers = []);
-    if (subscriberExistInSubscribers(subscribers, subscriber)) {
-      return;
-    }
-    subscribers.push(subscriber);
-    vnode_setProp(effect, QSubscribers, subscribers);
-  } else if (isSSRNode(effect)) {
-    let subscribers = effect.getProp(QSubscribers);
-    subscribers || (subscribers = []);
-    if (subscriberExistInSubscribers(subscribers, subscriber)) {
-      return;
-    }
-    subscribers.push(subscriber);
-    effect.setProp(QSubscribers, subscribers);
+var Subscriber = class {
+  constructor() {
+    __publicField(this, "$effectDependencies$", null);
   }
 };
 
-var isSSRNode = effect => "setProp" in effect && "getProp" in effect && "removeProp" in effect && "id" in effect;
+function isSubscriber(value) {
+  return value instanceof Subscriber || value instanceof WrappedSignal;
+}
 
-var subscriberExistInSubscribers = (subscribers, subscriber) => {
-  for (let i = 0; i < subscribers.length; i++) {
-    if (subscribers[i] === subscriber) {
-      return true;
-    }
+function clearVNodeEffectDependencies(container, value) {
+  vnode_isElementVNode(value) && ensureMaterialized(value);
+  const effects = vnode_getProp(value, QSubscribers, container.$getObjectById$);
+  if (!effects) {
+    return;
   }
-  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);
-        }
-      }
-    };
-    effects.forEach(scheduleEffect);
+  for (let i = effects.length - 1; i >= 0; i--) {
+    const subscriber = effects[i];
+    const subscriptionRemoved = clearEffects(subscriber, value);
+    subscriptionRemoved && effects.splice(i, 1);
   }
-  DEBUG && log("done scheduling");
-};
+}
 
-var ComputedSignal = class extends Signal {
-  constructor(container, fn) {
-    super(container, NEEDS_COMPUTATION);
-    __publicField(this, "$computeQrl$");
-    __publicField(this, "$invalid$", true);
-    this.$computeQrl$ = fn;
-  }
-  $invalidate$() {
-    this.$invalid$ = true;
-    if (!this.$effects$?.length) {
-      return;
+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);
     }
-    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$;
+}
+
+function clearEffects(subscriber, value) {
+  if (!isSignal(subscriber)) {
+    return false;
   }
-  $computeIfNeeded$() {
-    if (!this.$invalid$) {
-      return false;
-    }
-    const computeQrl = this.$computeQrl$;
-    throwIfQRLNotResolved(computeQrl);
-    const ctx = tryGetInvokeContext();
-    const previousEffectSubscription = 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);
+  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;
+      }
     }
   }
-  get value() {
-    return super.value;
-  }
-  set value(_) {
-    throwErrorAndStop("ComputedSignal is read-only");
+  const args = subscriber.$args$;
+  if (args) {
+    for (let i = args.length - 1; i >= 0; i--) {
+      clearEffects(args[i], subscriber);
+    }
   }
-};
-
-var WrappedSignal = class extends Signal {
-  constructor(container, fn, args, fnStr) {
-    super(container, NEEDS_COMPUTATION);
-    __publicField(this, "$args$");
-    __publicField(this, "$func$");
-    __publicField(this, "$funcStr$");
-    __publicField(this, "$invalid$", true);
-    __publicField(this, "$effectDependencies$", null);
-    this.$args$ = args;
-    this.$func$ = fn;
-    this.$funcStr$ = fnStr;
-  }
-  $invalidate$() {
-    this.$invalid$ = true;
-    if (!this.$effects$?.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$;
-  }
-  $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;
-  }
-  get value() {
-    return super.value;
-  }
-  set value(_) {
-    throwErrorAndStop("WrappedSignal is read-only");
-  }
-};
-
-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 => 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 StoreHandler = class {
-  constructor($flags$, $container$) {
-    this.$flags$ = $flags$;
-    this.$container$ = $container$;
-    __publicField(this, "$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 = 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$ || (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 = storeEffects?.[STORE_ARRAY_PROP];
-  if (storeArrayValue) {
-    effectsToTrigger || (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: 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: opts?.timeout ?? -1,
+    _cache: 0
+  };
+  return resource;
 };
 
 var createResourceReturn = (container, opts, initialPromise) => {
@@ -4000,161 +3760,42 @@ var runResource = (task, container, host) => {
 
 var ignoreErrorToPreventNodeFromCrashing = err => {};
 
-var Slot = props => _jsxSorted(Virtual, null, {
-  [QSlotS]: ""
-}, props.children, 0, props.name ?? "");
-
-var SkipRender = Symbol("skip render");
+var isForeignObjectElement = elementName => "foreignobject" === elementName.toLowerCase();
 
-var SSRRaw = () => null;
+var isSvgElement = elementName => "svg" === elementName || isForeignObjectElement(elementName);
 
-var SSRComment = () => null;
+var isMathElement = elementName => "math" === elementName;
 
-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 vnode_isDefaultNamespace = vnode => {
+  const flags = vnode[0];
+  return 0 === (192 & flags);
+};
 
-var isUnitlessNumber = name => unitlessNumbers.has(name);
+var vnode_getElementNamespaceFlags = elementName => isSvgElement(elementName) ? 64 : isMathElement(elementName) ? 128 : 0;
 
-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);
-    }
+function vnode_getDomChildrenWithCorrectNamespacesToInsert(journal, domParentVNode, newChild) {
+  const {elementNamespace: elementNamespace, elementNamespaceFlag: elementNamespaceFlag} = getNewElementNamespaceData(domParentVNode, newChild);
+  let domChildren = [];
+  if (elementNamespace === HTML_NS) {
+    domChildren = vnode_getDOMChildNodes(journal, newChild);
   } else {
-    for (const [key, value] of Object.entries(obj)) {
-      value && classes.push(key.trim());
+    const children = vnode_getDOMChildNodes(journal, newChild, true);
+    for (let i = 0; i < children.length; i++) {
+      const childVNode = children[i];
+      if (vnode_isTextVNode(childVNode)) {
+        domChildren.push(childVNode[4]);
+        continue;
+      }
+      if ((192 & childVNode[0]) === (192 & domParentVNode[0])) {
+        domChildren.push(childVNode[6]);
+        continue;
+      }
+      const newChildElement = vnode_cloneElementWithNamespace(childVNode, domParentVNode, elementNamespace, elementNamespaceFlag);
+      newChildElement && domChildren.push(newChildElement);
     }
   }
-  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 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;
-
-var vnode_isDefaultNamespace = vnode => {
-  const flags = vnode[0];
-  return 0 === (192 & flags);
-};
-
-var vnode_getElementNamespaceFlags = elementName => isSvgElement(elementName) ? 64 : isMathElement(elementName) ? 128 : 0;
-
-function vnode_getDomChildrenWithCorrectNamespacesToInsert(journal, domParentVNode, newChild) {
-  const {elementNamespace: elementNamespace, elementNamespaceFlag: elementNamespaceFlag} = getNewElementNamespaceData(domParentVNode, newChild);
-  let domChildren = [];
-  if (elementNamespace === HTML_NS) {
-    domChildren = vnode_getDOMChildNodes(journal, newChild);
-  } else {
-    const children = vnode_getDOMChildNodes(journal, newChild, true);
-    for (let i = 0; i < children.length; i++) {
-      const childVNode = children[i];
-      if (vnode_isTextVNode(childVNode)) {
-        domChildren.push(childVNode[4]);
-        continue;
-      }
-      if ((192 & childVNode[0]) === (192 & domParentVNode[0])) {
-        domChildren.push(childVNode[6]);
-        continue;
-      }
-      const newChildElement = vnode_cloneElementWithNamespace(childVNode, domParentVNode, elementNamespace, elementNamespaceFlag);
-      newChildElement && domChildren.push(newChildElement);
-    }
-  }
-  return domChildren;
-}
+  return domChildren;
+}
 
 function cloneElementWithNamespace(element, elementName, namespace) {
   const newElement = element.ownerDocument.createElementNS(namespace, elementName);
@@ -4302,7 +3943,7 @@ var executeComponent = (container, renderHost, subscriptionHost, componentQRL, p
       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);
@@ -4392,6 +4033,14 @@ function addScriptNodeForInvisibleComponents(jsx2) {
   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;
@@ -4452,9 +4101,9 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
           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);
@@ -4651,7 +4300,7 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     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;
@@ -4725,11 +4374,11 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
           }
         }
         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;
@@ -4738,7 +4387,9 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         }
         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);
@@ -4791,9 +4442,9 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         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;
           }
         }));
@@ -4842,7 +4493,7 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
       eventName && registerQwikLoaderEvent(eventName);
     };
     while (null !== srcKey || null !== dstKey) {
-      if (dstKey?.startsWith(HANDLER_PREFIX) || dstKey == ELEMENT_KEY) {
+      if (dstKey?.startsWith(HANDLER_PREFIX) || dstKey?.startsWith(Q_PREFIX)) {
         dstIdx++;
         dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
       } else if (null == srcKey) {
@@ -4996,7 +4647,7 @@ var vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     }
   }
   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");
@@ -5037,8 +4688,8 @@ function getComponentHash(vNode, getObject) {
   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() {}
@@ -5047,8 +4698,8 @@ 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;
   }
@@ -5064,9 +4715,12 @@ function propsDiffer(src, dst) {
   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;
 }
 
@@ -5079,9 +4733,9 @@ function cleanup(container, vNode) {
   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++) {
@@ -5089,7 +4743,7 @@ function cleanup(container, vNode) {
             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);
             }
           }
         }
@@ -5173,11 +4827,7 @@ 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 = [];
@@ -5185,8 +4835,8 @@ var createScheduler = (container, scheduleDrain, journalFlush) => {
   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,
@@ -5200,11 +4850,11 @@ var createScheduler = (container, scheduleDrain, journalFlush) => {
       $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);
@@ -5226,8 +4876,8 @@ var createScheduler = (container, scheduleDrain, journalFlush) => {
         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);
@@ -5240,12 +4890,12 @@ var createScheduler = (container, scheduleDrain, journalFlush) => {
   }
   function executeChore(chore) {
     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;
@@ -5270,11 +4920,11 @@ var createScheduler = (container, scheduleDrain, journalFlush) => {
       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;
@@ -5309,9 +4959,23 @@ var createScheduler = (container, scheduleDrain, journalFlush) => {
         returnValue = target.resolved ? null : target.resolve();
         break;
       }
+
+     case 8:
+      {
+        const target = chore.$target$;
+        const forceRunEffects = target.$forceRunEffects$;
+        target.$forceRunEffects$ = false;
+        if (!target.$effects$?.length) {
+          break;
+        }
+        returnValue = retryOnPromise((() => {
+          (target.$computeIfNeeded$() || forceRunEffects) && triggerEffects(container, target, target.$effects$);
+        }));
+        break;
+      }
     }
     return maybeThenPassError(returnValue, (value => {
-      DEBUG3 && debugTrace("execute.DONE", null, currentChore, choreQueue);
+      DEBUG2 && debugTrace("execute.DONE", null, currentChore, choreQueue);
       if (currentChore) {
         currentChore.$executed$ = true;
         currentChore.$resolve$?.(value);
@@ -5333,17 +4997,19 @@ function vNodeAlreadyDeleted(chore) {
 }
 
 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;
       }
@@ -5362,7 +5028,7 @@ function choreComparator(a, b, shouldThrowOnHostMismatch) {
     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;
     }
   }
@@ -5408,11 +5074,11 @@ function debugChoreToString(chore) {
     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 = chore.$target$?.$symbol$;
@@ -5429,618 +5095,564 @@ function debugTrace(action, arg, currentChore, queue) {
   console.log(lines.join("\n  ") + "\n");
 }
 
-var version = "2.0.0-alpha.3-dev+418fd6d";
+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);
+    }
+  };
+  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 _SharedContainer = class {
-  constructor(scheduleDrain, journalFlush, serverData, locale) {
-    __publicField(this, "$version$");
-    __publicField(this, "$scheduler$");
-    __publicField(this, "$storeProxyMap$");
-    __publicField(this, "$locale$");
-    __publicField(this, "$getObjectById$");
-    __publicField(this, "$serverData$");
-    __publicField(this, "$currentUniqueId$", 0);
-    __publicField(this, "$instanceHash$", null);
-    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 cleanupTask = task => {
+  const destroy = task.$destroy$;
+  if (destroy) {
+    task.$destroy$ = null;
+    try {
+      destroy();
+    } catch (err) {
+      logError(err);
+    }
   }
 };
 
-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 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 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: "~"
+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();
+  }
 };
 
-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) => {
-    let getter2;
-    while (prototype2 && !(getter2 = Object.getOwnPropertyDescriptor(prototype2, name)?.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;
+var isSignal = value => value instanceof Signal;
+
+var EffectPropData = class {
+  constructor(data) {
+    __publicField(this, "data");
+    this.data = data;
+  }
+};
+
+var Signal = class {
+  constructor(container, value) {
+    __publicField(this, "$untrackedValue$");
+    __publicField(this, "$effects$", null);
+    __publicField(this, "$container$", null);
+    this.$container$ = container;
+    this.$untrackedValue$ = value;
+    DEBUG3 && log2("new", this);
+  }
+  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;
         }
-        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;
+        this.$container$ = ctx.$container$;
+      } else {
+        assertTrue(!ctx.$container$ || ctx.$container$ === this.$container$, "Do not use signals across containers");
       }
-      if (nodeValue.startsWith(Q_CONTAINER_END)) {
-        return 8;
+      const effectSubscriber = ctx.$effectSubscriber$;
+      if (effectSubscriber) {
+        const effects = this.$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(), "  "));
       }
     }
-    return 0;
-  };
-  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++;
-      }
+    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$);
     }
-    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;
+  }
+  valueOf() {
+    if (qDev) {
+      throw qError(46);
+    }
+  }
+  toString() {
+    return `[${this.constructor.name}${this.$invalid$ ? " INVALID" : ""} ${String(this.$untrackedValue$)}]` + (this.$effects$?.map((e => "\n -> " + pad(qwikDebugToString(e[0]), "    "))).join("\n") || "");
+  }
+  toJSON() {
+    return {
+      value: this.$untrackedValue$
     };
-    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!--${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!--${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 = 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 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);
-}
+var ensureContains = (array, value) => {
+  const isMissing = -1 === array.indexOf(value);
+  isMissing && array.push(value);
+};
 
-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;
+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$ || (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 || (subscribers = []);
+    if (subscriberExistInSubscribers(subscribers, subscriber)) {
+      return;
+    }
+    subscribers.push(subscriber);
+    vnode_setProp(effect, QSubscribers, subscribers);
+  } else if (isSSRNode(effect)) {
+    let subscribers = effect.getProp(QSubscribers);
+    subscribers || (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);
         }
       }
+    };
+    effects.forEach(scheduleEffect);
+  }
+  DEBUG3 && log2("done scheduling");
+};
+
+var ComputedSignal = class extends Signal {
+  constructor(container, fn) {
+    super(container, NEEDS_COMPUTATION);
+    __publicField(this, "$computeQrl$");
+    __publicField(this, "$invalid$", true);
+    __publicField(this, "$forceRunEffects$", false);
+    this.$computeQrl$ = fn;
+  }
+  $invalidate$() {
+    this.$invalid$ = true;
+    this.$forceRunEffects$ = false;
+    this.$container$?.$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;
+    }
+    const computeQrl = this.$computeQrl$;
+    throwIfQRLNotResolved(computeQrl);
+    const ctx = tryGetInvokeContext();
+    const previousEffectSubscription = 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);
     }
-    container.$serverData$ = {
-      containerAttributes: containerAttributes
-    };
-    qElement.setAttribute(QContainerAttr, "resumed");
-    qElement.qContainer = container;
   }
-  return container;
-}
+  get value() {
+    return super.value;
+  }
+  set value(_) {
+    throw qError(48);
+  }
+};
 
-function _getQContainerElement(element) {
-  const qContainerElement = Array.isArray(element) ? vnode_getDomParent(element) : element;
-  return qContainerElement.closest(QContainerSelector);
-}
+var WrappedSignal = class extends Signal {
+  constructor(container, fn, args, fnStr) {
+    super(container, NEEDS_COMPUTATION);
+    __publicField(this, "$args$");
+    __publicField(this, "$func$");
+    __publicField(this, "$funcStr$");
+    __publicField(this, "$invalid$", true);
+    __publicField(this, "$effectDependencies$", null);
+    __publicField(this, "$hostElement$", null);
+    __publicField(this, "$forceRunEffects$", false);
+    this.$args$ = args;
+    this.$func$ = fn;
+    this.$funcStr$ = fnStr;
+  }
+  $invalidate$() {
+    this.$invalid$ = true;
+    this.$forceRunEffects$ = false;
+    this.$container$?.$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;
+  }
+  get value() {
+    return super.value;
+  }
+  set value(_) {
+    throw qError(49);
+  }
+};
 
-var isDomContainer = container => container instanceof DomContainer;
+var version = "2.0.0-alpha.4-dev+374e0d6";
 
-var DomContainer = class extends _SharedContainer {
-  constructor(element) {
-    super((() => this.scheduleRender()), (() => vnode_applyJournal(this.$journal$)), {}, element.getAttribute("q:locale"));
-    __publicField(this, "element");
-    __publicField(this, "qContainer");
-    __publicField(this, "qBase");
-    __publicField(this, "qManifestHash");
-    __publicField(this, "rootVNode");
-    __publicField(this, "document");
-    __publicField(this, "$journal$");
-    __publicField(this, "renderDone", null);
-    __publicField(this, "$rawStateData$");
-    __publicField(this, "$storeProxyMap$", new WeakMap);
-    __publicField(this, "$qFuncs$");
-    __publicField(this, "$instanceHash$");
-    __publicField(this, "stateData");
-    __publicField(this, "$styleIds$", null);
-    __publicField(this, "$vnodeLocate$", (id => vnode_locate(this.rootVNode, id)));
-    __publicField(this, "$renderCount$", 0);
-    __publicField(this, "$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];
-    }));
-    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 _SharedContainer = class {
+  constructor(scheduleDrain, journalFlush, serverData, locale) {
+    __publicField(this, "$version$");
+    __publicField(this, "$scheduler$");
+    __publicField(this, "$storeProxyMap$");
+    __publicField(this, "$locale$");
+    __publicField(this, "$getObjectById$");
+    __publicField(this, "$serverData$");
+    __publicField(this, "$currentUniqueId$", 0);
+    __publicField(this, "$instanceHash$", null);
+    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);
   }
-  $setRawState$(id, vParent) {
-    this.stateData[id] = vParent;
+  trackSignalValue(signal, subscriber, property, data) {
+    return trackSignalAndAssignHost(signal, subscriber, property, this, data);
   }
-  parseQRL(qrl2) {
-    return inflateQRL(this, parseQRL(qrl2));
+  serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+    return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
   }
-  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);
-      }
-      err && err instanceof Error && ("hostElement" in err || (err.hostElement = host));
-      if (!isRecoverable(err)) {
-        throw err;
-      }
+};
+
+var QObjectRecursive = 1;
+
+var QObjectImmutable = 2;
+
+var QObjectTargetSymbol = Symbol("proxy target");
+
+var QObjectFlagsSymbol = Symbol("proxy flags");
+
+var QObjectManagerSymbol = Symbol("proxy manager");
+
+var _CONST_PROPS = Symbol("CONST");
+
+var _VAR_PROPS = Symbol("VAR");
+
+var _IMMUTABLE = 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 ?? (children = entry[1]);
+      return false;
     }
-    const errorStore = this.resolveContext(host, ERROR_CONTEXT);
-    if (!errorStore) {
-      throw err;
+    if ("key" === attr) {
+      key = entry[1];
+      return false;
     }
-    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);
+    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;
   }
-  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;
-        }
+  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;
+    __publicField(this, "dev");
+    __publicField(this, "_proxy", null);
+    if (qDev) {
+      if ("object" !== typeof varProps) {
+        throw new Error("JSXNodeImpl: varProps must be objects: " + JSON.stringify(varProps));
       }
-      host = this.getParentHost(host);
-    }
-    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;
-        }
+      if ("object" !== typeof constProps) {
+        throw new Error("JSXNodeImpl: constProps must be objects: " + JSON.stringify(constProps));
       }
-      vNode = vnode_getParent(vNode);
     }
-    return null;
   }
-  setHostProp(host, name, value) {
-    const vNode = host;
-    vnode_setProp(vNode, name, value);
+  get props() {
+    this._proxy || (this._proxy = createPropsProxy(this.varProps, this.constProps, this.children));
+    return this._proxy;
   }
-  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;
+var Virtual = props => props.children;
+
+var isJSXNode = n => {
+  if (qDev) {
+    if (n instanceof JSXNodeImpl) {
+      return true;
     }
-    return vnode_getProp(vNode, name, getObjectById);
+    if (isObject(n) && "key" in n && "props" in n && "type" in n) {
+      logWarn('Duplicate implementations of "JSXNode" found');
+      return true;
+    }
+    return false;
   }
-  scheduleRender() {
-    this.$renderCount$++;
-    this.renderDone || (this.renderDone = getPlatform().nextTick((() => this.processChores())));
-    return this.renderDone;
+  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$;
   }
-  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;
-      }));
+  get(_, prop) {
+    if (prop === _CONST_PROPS) {
+      return this.$constProps$;
     }
-    if (renderCount !== this.$renderCount$) {
-      this.processChores();
-      return;
+    if (prop === _VAR_PROPS) {
+      return this.$varProps$;
     }
-    this.renderDone = null;
-  }
-  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));
-        }
-      }
+    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;
   }
-  getSyncFn(id) {
-    const fn = this.$qFuncs$[id];
-    assertTrue("function" === typeof fn, "Invalid reference: " + id);
-    return fn;
-  }
-  $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));
+  set(_, prop, value) {
+    if (prop === _CONST_PROPS) {
+      this.$constProps$ = value;
+      return true;
     }
-    if (null == this.$styleIds$) {
-      this.$styleIds$ = new Set;
-      this.element.querySelectorAll(QStyleSelector).forEach((style => {
-        this.$styleIds$.add(style.getAttribute(QStyle));
-      }));
+    if (prop === _VAR_PROPS) {
+      this.$varProps$ = value;
+      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);
+    this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] = value : this.$varProps$[prop] = value;
+    return true;
+  }
+  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;
   }
-};
-
-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);
-            }
-          }));
-        }));
+  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);
       }
-      cleanupFns.push(fn);
-    }
-  };
-  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);
     }
+    return out;
   }
 };
 
-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$;
-  }
-};
-
-var isTask = value => value instanceof Task2;
+var directGetPropsProxyProp = (jsx2, prop) => jsx2.constProps && prop in jsx2.constProps ? jsx2.constProps[prop] : jsx2.varProps[prop];
 
 var stringifyPath = [];
 
@@ -6116,6 +5728,72 @@ var jsxToString = value => {
   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);
@@ -6688,10 +6366,30 @@ var vnode_materialize = vNode => {
   const element = vNode[6];
   const firstChild = fastFirstChild(element);
   const vNodeData = element.ownerDocument?.qVNodeData?.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];
@@ -6803,7 +6501,7 @@ var fastGetter = (prototype, name) => {
 
 var isQStyleElement = node => isElement(node) && "STYLE" === node.nodeName && (node.hasAttribute(QScopedStyle) || node.hasAttribute(QStyle));
 
-var materializeFromDOM = (vParent, firstChild) => {
+var materializeFromDOM = (vParent, firstChild, vData) => {
   let vFirstChild = null;
   const skipStyleElements = () => {
     while (isQStyleElement(child)) {
@@ -6829,9 +6527,46 @@ var materializeFromDOM = (vParent, firstChild) => {
   }
   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];
@@ -6908,7 +6643,7 @@ var vnode_getPropStartIndex = vnode => {
   if (2 === type) {
     return 6;
   }
-  throw throwErrorAndStop("Invalid vnode type.");
+  throw qError(43, [ type ]);
 };
 
 var vnode_getParent = vnode => vnode[1] || null;
@@ -6924,7 +6659,7 @@ var vnode_getNode = vnode => {
   return vnode[4];
 };
 
-function vnode_toString(depth = 10, offset = "", materialize = false, siblings = false) {
+function vnode_toString(depth = 10, offset = "", materialize2 = false, siblings = false) {
   let vnode = this;
   if (0 === depth) {
     return "...";
@@ -6972,7 +6707,7 @@ function vnode_toString(depth = 10, offset = "", materialize = false, siblings =
         -1 === keys2.indexOf(attr.name) && attrs.push(" " + attr.name + (attr.value ? "=" + qwikDebugToString(attr.value) : ""));
       }
       strings.push("<" + tag + attrs.join("") + ">");
-      if (vnode_isMaterialized(vnode) || materialize) {
+      if (vnode_isMaterialized(vnode) || materialize2) {
         const child = vnode_getFirstChild(vnode);
         child && strings.push("  " + vnode_toString.call(child, depth - 1, offset + "  ", true, true));
       } else {
@@ -6993,19 +6728,9 @@ 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++;
@@ -7015,22 +6740,16 @@ function materializeFromVNodeData(vParent, vData, element, child) {
     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);
-  };
   let textIdx = 0;
   let combinedText = null;
   let container = null;
-  while (0 !== peek()) {
+  processVNodeData(vData, ((peek, consumeValue, consume, nextToConsumeIdx) => {
     if (isNumber(peek())) {
       while (!isElement(child)) {
         child = fastNextSibling(child);
-        child || throwErrorAndStop("Materialize error: missing element: " + vData + " " + peek() + " " + nextToConsumeIdx);
+        if (!child) {
+          throw qError(44, [ vData, peek(), nextToConsumeIdx ]);
+        }
       }
       while (isQStyleElement(child)) {
         child = fastNextSibling(child);
@@ -7065,6 +6784,8 @@ function materializeFromVNodeData(vParent, vData, element, child) {
       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) {
@@ -7104,7 +6825,7 @@ function materializeFromVNodeData(vParent, vData, element, child) {
       addVNode(previousTextNode = vnode_newSharedText(previousTextNode, textNode, text));
       textIdx += length;
     }
-  }
+  }));
   vParent[5] = vLast;
   return vFirst;
 }
@@ -7120,440 +6841,639 @@ var vnode_getType = vnode => {
   if (4 & type) {
     return 3;
   }
-  throw throwErrorAndStop("Unknown vnode type: " + type);
+  throw qError(43, [ 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];
+  }
+  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;
+    }
+    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;
+};
+
+function invoke(context, fn, ...args) {
+  return invokeApply.call(this, context, fn, args);
+}
+
+function invokeApply(context, fn, args) {
+  const previousContext = _context;
+  let returnValue;
+  try {
+    _context = context;
+    returnValue = fn.apply(this, args);
+  } finally {
+    _context = previousContext;
+  }
+  return returnValue;
+}
+
+var newInvokeContextFromTuple = ([element, event, url]) => {
+  const container = element.closest(QContainerSelector);
+  const locale = 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 isElement = node => node && "object" == typeof node && 1 === fastNodeType(node);
+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 aPath = [];
+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 bPath = [];
+var ERROR_CONTEXT = createContextId("qk-error");
 
-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;
-    }
-    aDepth--;
-    bDepth--;
+var isRecoverable = err => {
+  if (err && err instanceof Error && "plugin" in err) {
+    return false;
   }
-  return aDepth < bDepth ? -1 : 1;
+  return true;
 };
 
-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);
+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) => {
+    let getter2;
+    while (prototype2 && !(getter2 = Object.getOwnPropertyDescriptor(prototype2, name)?.get)) {
+      prototype2 = Object.getPrototypeOf(prototype2);
     }
-    projectionDepth > 0 && (vHost = vnode_getParent(vHost));
-  }
-  return vHost;
-};
+    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;
+      }
+    }
+    return 0;
+  };
+  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++;
+      }
+    }
+    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!--${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!--${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 = 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 walker = document2.createTreeWalker(document2, 129);
+  walkContainer(walker, null, walker.firstChild(), null, "", null, "");
+}
 
-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);
+function getDomContainer(element) {
+  const qContainerElement = _getQContainerElement(element);
+  if (!qContainerElement) {
+    throw qError(41);
   }
-};
-
-var _context;
+  return getDomContainerFromQContainerElement(qContainerElement);
+}
 
-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);
+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;
+        }
+      }
     }
-    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 = 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 isDomContainer = container => container instanceof DomContainer;
 
-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 ?? (children = entry[1]);
-      return false;
+var DomContainer = class extends _SharedContainer {
+  constructor(element) {
+    super((() => this.scheduleRender()), (() => vnode_applyJournal(this.$journal$)), {}, element.getAttribute("q:locale"));
+    __publicField(this, "element");
+    __publicField(this, "qContainer");
+    __publicField(this, "qBase");
+    __publicField(this, "qManifestHash");
+    __publicField(this, "rootVNode");
+    __publicField(this, "document");
+    __publicField(this, "$journal$");
+    __publicField(this, "renderDone", null);
+    __publicField(this, "$rawStateData$");
+    __publicField(this, "$storeProxyMap$", new WeakMap);
+    __publicField(this, "$qFuncs$");
+    __publicField(this, "$instanceHash$");
+    __publicField(this, "stateData");
+    __publicField(this, "$styleIds$", null);
+    __publicField(this, "$vnodeLocate$", (id => vnode_locate(this.rootVNode, id)));
+    __publicField(this, "$renderCount$", 0);
+    __publicField(this, "$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];
+    }));
+    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;
-    __publicField(this, "dev");
-    __publicField(this, "_proxy", null);
-    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));
-      }
-    }
+  $setRawState$(id, vParent) {
+    this.stateData[id] = vParent;
   }
-  get props() {
-    this._proxy || (this._proxy = createPropsProxy(this.varProps, this.constProps, this.children));
-    return this._proxy;
+  parseQRL(qrl) {
+    return inflateQRL(this, parseQRL(qrl));
   }
-};
-
-var Virtual = props => props.children;
-
-var isJSXNode = n => {
-  if (qDev) {
-    if (n instanceof JSXNodeImpl) {
-      return true;
+  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);
+      }
+      err && err instanceof Error && ("hostElement" in err || (err.hostElement = host));
+      if (!isRecoverable(err)) {
+        throw err;
+      }
     }
-    if (isObject(n) && "key" in n && "props" in n && "type" in n) {
-      logWarn('Duplicate implementations of "JSXNode" found');
-      return true;
+    const errorStore = this.resolveContext(host, ERROR_CONTEXT);
+    if (!errorStore) {
+      throw err;
     }
-    return false;
+    errorStore.error = err;
   }
-  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$;
+  setContext(host, context, value) {
+    let ctx = this.getHostProp(host, QCtxAttr);
+    ctx || this.setHostProp(host, QCtxAttr, ctx = []);
+    mapArray_set(ctx, context.id, value, 0);
   }
-  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$;
+  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);
     }
-    const value = this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] : this.$varProps$[prop];
-    return value instanceof WrappedSignal ? value.value : value;
+    return;
   }
-  set(_, prop, value) {
-    if (prop === _CONST_PROPS) {
-      this.$constProps$ = value;
-      return true;
-    }
-    if (prop === _VAR_PROPS) {
-      this.$varProps$ = value;
-      return true;
+  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);
     }
-    this.$constProps$ && prop in this.$constProps$ ? this.$constProps$[prop] = value : this.$varProps$[prop] = value;
-    return true;
+    return null;
   }
-  deleteProperty(_, prop) {
-    if ("string" !== typeof prop) {
-      return false;
+  setHostProp(host, name, value) {
+    const vNode = host;
+    vnode_setProp(vNode, name, 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;
     }
-    let didDelete = delete this.$varProps$[prop];
-    this.$constProps$ && (didDelete = delete this.$constProps$[prop] || didDelete);
-    null != this.$children$ && "children" === prop && (this.$children$ = null);
-    return didDelete;
+    return vnode_getProp(vNode, name, getObjectById);
   }
-  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;
+  scheduleRender() {
+    this.$renderCount$++;
+    this.renderDone || (this.renderDone = getPlatform().nextTick((() => this.processChores())));
+    return this.renderDone;
   }
-  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
-    };
+  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 (renderCount !== this.$renderCount$) {
+      this.processChores();
+      return;
+    }
+    this.renderDone = null;
   }
-  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);
+  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 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);
+  getSyncFn(id) {
+    const fn = this.$qFuncs$[id];
+    assertTrue("function" === typeof fn, "Invalid reference: " + id);
+    return fn;
   }
-  QwikComponent[SERIALIZABLE_STATE] = [ componentQrl2 ];
-  return QwikComponent;
-};
-
-var SERIALIZABLE_STATE = Symbol("serializable-data");
-
-var isQwikComponent = component => "function" == typeof component && void 0 !== component[SERIALIZABLE_STATE];
-
-var event$ = 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 STATE_MACHINE = (() => [ [ [ ANY, STAR, starSelector ], [ ANY, OPEN_BRACKET, attrSelector ], [ ANY, COLON, pseudoElement, ":", "before", "after", "first-letter", "first-line" ], [ ANY, COLON, pseudoGlobal, "global" ], [ ANY, COLON, pseudoClassWithSelector, "has", "host-context", "not", "where", "is", "matches", "any" ], [ ANY, COLON, pseudoClass ], [ ANY, IDENT, elementClassIdSelector ], [ ANY, DOT, elementClassIdSelector ], [ ANY, HASH, elementClassIdSelector ], [ ANY, AT, atRuleSelector, "keyframe" ], [ ANY, AT, atRuleBlock, "media", "supports", "container" ], [ ANY, AT, atRuleInert ], [ ANY, OPEN_BRACE, body ], [ FORWARD_SLASH, STAR, commentMultiline ], [ ANY, SEMICOLON, EXIT ], [ ANY, CLOSE_BRACE, EXIT ], [ ANY, CLOSE_PARENTHESIS, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, OPEN_PARENTHESIS, rule ], [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, OPEN_PARENTHESIS, inertParenthesis ], [ ANY, NOT_IDENT, EXIT_INSERT_SCOPE ] ], [ [ ANY, OPEN_PARENTHESIS, rule ], [ ANY, NOT_IDENT, EXIT ] ], [ [ ANY, NOT_IDENT, EXIT ] ], [ [ ANY, CLOSE_BRACKET, EXIT_INSERT_SCOPE ], [ ANY, SINGLE_QUOTE, stringSingle ], [ ANY, DOUBLE_QUOTE, stringDouble ] ], [ [ ANY, CLOSE_PARENTHESIS, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, CLOSE_BRACE, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, CLOSE_BRACE, EXIT ], [ WHITESPACE, IDENT, elementClassIdSelector ], [ ANY, COLON, pseudoGlobal, "global" ], [ ANY, OPEN_BRACE, body ], ...STRINGS_COMMENTS ], [ [ ANY, OPEN_BRACE, rule ], [ ANY, SEMICOLON, EXIT ], ...STRINGS_COMMENTS ], [ [ ANY, SEMICOLON, EXIT ], [ ANY, OPEN_BRACE, inertBlock ], ...STRINGS_COMMENTS ], [ [ ANY, CLOSE_BRACE, EXIT ], [ ANY, OPEN_BRACE, body ], [ ANY, OPEN_PARENTHESIS, inertParenthesis ], ...STRINGS_COMMENTS ], [ [ ANY, SINGLE_QUOTE, EXIT ] ], [ [ ANY, DOUBLE_QUOTE, EXIT ] ], [ [ STAR, FORWARD_SLASH, EXIT ] ] ])();
-
-var useComputedQrl = qrl2 => {
-  const {val: val, set: set} = useSequentialScope();
-  if (val) {
-    return val;
+  $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);
+    }
   }
-  assertQrl(qrl2);
-  const signal = new ComputedSignal(null, qrl2);
-  set(signal);
-  throwIfQRLNotResolved(qrl2);
-  return signal;
 };
 
-var useComputed$ = implicit$FirstArg(useComputedQrl);
-
-var OPEN_FRAGMENT = Number.MAX_SAFE_INTEGER;
-
-var CLOSE_FRAGMENT = Number.MAX_SAFE_INTEGER - 1;
-
 var deserializedProxyMap = new WeakMap;
 
 var unwrapDeserializerProxy = value => {
@@ -7735,7 +7655,8 @@ var inflate = (container, target, typeId, data) => {
       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;
     }
 
@@ -7841,12 +7762,13 @@ var inflate = (container, target, typeId, data) => {
    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 ]);
   }
 };
 
@@ -7873,11 +7795,11 @@ var allocate = (container, typeId, value) => {
     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:
     {
@@ -7965,13 +7887,16 @@ var allocate = (container, typeId, value) => {
       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 ]);
   }
 };
 
@@ -7979,13 +7904,13 @@ function retrieveVNodeOrDocument(container, value) {
   return value ? container.rootVNode ? vnode_locate(container.rootVNode, value) : void 0 : container.element?.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];
@@ -7995,11 +7920,11 @@ function parseQRL(qrl2) {
   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;
@@ -8047,7 +7972,7 @@ var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToCh
     $getRootId$: obj => {
       const id = map.get(obj);
       if (!id || -1 === id) {
-        return throwErrorAndStop("Missing root id for: ", obj);
+        throw qError(36, [ obj ]);
       }
       return id;
     },
@@ -8090,8 +8015,8 @@ var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToCh
         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));
@@ -8117,13 +8042,19 @@ var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToCh
         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)) {
@@ -8143,11 +8074,11 @@ var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToCh
           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);
@@ -8177,6 +8108,22 @@ var createSerializationContext = (NodeConstructor, DomRefConstructor, symbolToCh
   }
 };
 
+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) {
@@ -8222,13 +8169,13 @@ function serialize(serializationContext) {
       } 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);
@@ -8252,8 +8199,13 @@ function serialize(serializationContext) {
         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) => {
@@ -8270,14 +8222,14 @@ function serialize(serializationContext) {
       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 {
@@ -8312,12 +8264,12 @@ function serialize(serializationContext) {
         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);
@@ -8344,11 +8296,11 @@ function serialize(serializationContext) {
         const vNodeData = value.vnodeData;
         if (vNodeData) {
           serializationContext.$prepVNodeData$?.(vNodeData);
-          vNodeData[0] |= 8;
+          vNodeData[0] |= 16;
         }
         if (value.childrenVNodeData) {
           for (const vNodeData2 of value.childrenVNodeData) {
-            vNodeData2[0] |= 8;
+            vNodeData2[0] |= 16;
           }
         }
       } else {
@@ -8373,7 +8325,7 @@ function serialize(serializationContext) {
       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();
@@ -8382,12 +8334,12 @@ function serialize(serializationContext) {
     } 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 = "";
@@ -8433,7 +8385,9 @@ function qrlToString(serializationContext, value) {
       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}`;
@@ -8472,7 +8426,7 @@ 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) {
@@ -8581,7 +8535,7 @@ var _verifySerializable = (value, seen, ctx, preMessage) => {
         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;
@@ -8610,8 +8564,7 @@ var _verifySerializable = (value, seen, ctx, preMessage) => {
       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;
 };
@@ -8645,7 +8598,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     }
   }
   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;
@@ -8657,7 +8610,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
   function bindFnToContext(currentCtx, beforeFn) {
     return (...args) => maybeThen(resolveLazy(), (fn => {
       if (!isFunction(fn)) {
-        throw qError(QError_qrlIsNotFunction);
+        throw qError(10);
       }
       if (beforeFn && false === beforeFn()) {
         return;
@@ -8665,7 +8618,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
       const context = createOrReuseInvocationContext(currentCtx);
       const prevQrl = context.$qrl$;
       const prevEvent = context.$event$;
-      context.$qrl$ = qrl2;
+      context.$qrl$ = qrl;
       context.$event$ || (context.$event$ = this);
       try {
         return invoke.call(this, context, fn, ...args);
@@ -8686,7 +8639,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
         return fn.apply(this, args);
       }
       context = newInvokeContext();
-      context.$qrl$ = qrl2;
+      context.$qrl$ = qrl;
       context.$event$ = this;
       return invoke.call(this, context, fn, ...args);
     };
@@ -8701,15 +8654,15 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
       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((module => qrl2.resolved = symbolRef = wrapFn(module[symbol])));
+      symbolRef = symbolFn().then((module => qrl.resolved = symbolRef = wrapFn(module[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, ctx?.$element$, start)), (err => {
       console.error(`qrl ${symbol} failed to load`, err);
@@ -8721,7 +8674,7 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
   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,
@@ -8738,12 +8691,12 @@ var createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSym
     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 => {
@@ -8754,8 +8707,8 @@ var getSymbolHash = symbolName => {
   return symbolName;
 };
 
-function assertQrl(qrl2) {
-  if (qDev && !isQrl2(qrl2)) {
+function assertQrl(qrl) {
+  if (qDev && !isQrl2(qrl)) {
     throw new Error("Not a QRL");
   }
 }
@@ -8872,8 +8825,8 @@ async function configureDevServer(base, server, opts, sys, path, isClientDevOnly
         }
         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: {},
@@ -8921,7 +8874,7 @@ async function configureDevServer(base, server, opts, sys, path, isClientDevOnly
           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);