marko 6.1.3 → 6.1.4

package/dist/debug/html.js

@@ -61,51 +61,8 @@ function joinWithAnd(a) {
 	}
 }
 //#endregion
-//#region src/common/helpers.ts
-const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
-function stringifyClassObject(name, value) {
-	return value ? name : "";
-}
-function stringifyStyleObject(name, value) {
-	return value || value === 0 ? name + ":" + value : "";
-}
-const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
-	let str = "";
-	let sep = "";
-	let part;
-	if (val) if (typeof val !== "object") str += val;
-	else if (Array.isArray(val)) for (const v of val) {
-		part = toDelimitedString(v, delimiter, stringify);
-		if (part) {
-			str += sep + part;
-			sep = delimiter;
-		}
-	}
-	else for (const name in val) {
-		part = stringify(name, val[name]);
-		if (part) {
-			str += sep + part;
-			sep = delimiter;
-		}
-	}
-	return str;
-};
-function isEventHandler(name) {
-	return /^on[A-Z-]/.test(name);
-}
-function getEventHandlerName(name) {
-	return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
-}
-function isVoid(value) {
-	return value == null || value === false;
-}
-function normalizeDynamicRenderer(value) {
-	if (value) {
-		if (typeof value === "string") return value;
-		const normalized = value.content || value.default || value;
-		if ("id" in normalized) return normalized;
-	}
-}
+//#region src/common/meta.ts
+const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
 //#endregion
 //#region src/html/content.ts
 function _unescaped(val) {
@@ -133,145 +90,10 @@ function _escape_comment(val) {
 	return val ? escapeCommentStr(val + "") : val === 0 ? "0" : "";
 }
 //#endregion
-//#region src/common/for.ts
-function forIn(obj, cb) {
-	for (const key in obj) cb(key, obj[key]);
-}
-function forOf(list, cb) {
-	if (list) {
-		let i = 0;
-		for (const item of list) cb(item, i++);
-	}
-}
-function forTo(to, from, step, cb) {
-	const start = from || 0;
-	const delta = step || 1;
-	for (let steps = (to - start) / delta, i = 0; i <= steps; i++) cb(start + i * delta);
-}
-function forUntil(until, from, step, cb) {
-	const start = from || 0;
-	const delta = step || 1;
-	for (let steps = (until - start) / delta, i = 0; i < steps; i++) cb(start + i * delta);
-}
-//#endregion
-//#region src/common/opt.ts
-function push(opt, item) {
-	return opt ? Array.isArray(opt) ? (opt.push(item), opt) : [opt, item] : item;
-}
-//#endregion
-//#region src/html/for.ts
-function forOfBy(by, item, index) {
-	if (by) {
-		if (typeof by === "string") return item[by];
-		return by(item, index);
-	}
-	return index;
-}
-function forInBy(by, name, value) {
-	if (by) return by(name, value);
-	return name;
-}
-function forStepBy(by, index) {
-	if (by) return by(index);
-	return index;
-}
-//#endregion
-//#region src/html/inlined-runtimes.debug.ts
-const WALKER_RUNTIME_CODE = `((runtimeId) => (self[runtimeId] ||= (
-  renderId,
-  prefix = runtimeId + renderId,
-  prefixLen = prefix.length,
-  lookup = {},
-  visits = [],
-  doc = document,
-  walker = doc.createTreeWalker(
-    doc,
-    129 /* NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_ELEMENT */,
-  ),
-) =>
-  doc = (self[runtimeId][renderId] = {
-    i: prefix,
-    d: doc,
-    l: lookup,
-    v: visits,
-    x() {},
-    w(node, op, id) {
-      while ((node = walker.nextNode())) {
-        doc.x(
-          (op =
-            (op = node.data) &&
-            !op.indexOf(prefix) &&
-            ((lookup[(id = op.slice(prefixLen + 1))] = node), op[prefixLen])),
-          id,
-          node,
-        );
-
-        if (op > "#") {
-          visits.push(node);
-        }
-      }
-    },
-  })
-, self[runtimeId]))`;
-const REORDER_RUNTIME_CODE = `((runtime) => {
-  if (runtime.j) return;
-  let onNextSibling,
-    placeholder,
-    nextSibling,
-    placeholders = runtime.p = {},
-    replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);
-  runtime.d.head.append(
-    runtime.d.querySelector("style[" + runtime.i + "]") || ""
-  );
-  runtime.j = {};
-  runtime.x = (op, id, node, placeholderRoot, placeholderCb) => {
-    if (node == nextSibling) {
-      onNextSibling();
-    }
-
-    if (op == "#") {
-      (placeholders[id] = placeholder).i++;
-    } else if (op == "!") {
-      if (runtime.l[id] && placeholders[id]) {
-        nextSibling = node.nextSibling;
-        onNextSibling = () => placeholders[id].c();
-      }
-    } else if (node.tagName == "T" && (id = node.getAttribute(runtime.i))) {
-      nextSibling = node.nextSibling;
-      onNextSibling = () => {
-        node.remove();
-        placeholderRoot || replace(id, node);
-        placeholder.c();
-      };
-      placeholder =
-        placeholders[id] ||
-        (placeholderRoot = placeholders[id] =
-          {
-            i: runtime.l[id] ? 1 : 2,
-            c(start = runtime.l["^" + id]) {
-              if (--placeholderRoot.i) return 1;
-              for (
-                ;
-                (nextSibling =
-                  runtime.l[id].previousSibling || start).remove(),
-                  start != nextSibling;
-
-              );
-              replace(id, node);
-            },
-          });
-      // repurpose "op" for callbacks ...carefully
-      if ((op = runtime.j[id])) {
-        placeholderCb = placeholder.c;
-        placeholder.c = () => placeholderCb() || op(runtime.r);
-      }
-    }
-  };
-})`;
-//#endregion
 //#region src/html/serializer.ts
+const K_SCOPE_ID = Symbol("Scope ID");
 const kTouchedIterator = Symbol.for("marko.touchedIterator");
-const { hasOwnProperty } = {};
+const { hasOwnProperty: hasOwnProperty$1 } = {};
 const Generator = (function* () {})().constructor;
 const AsyncGenerator = (async function* () {})().constructor;
 patchIteratorNext(Generator.prototype);
@@ -517,15 +339,14 @@ const KNOWN_OBJECTS = new Map([
 var State$1 = class {
 	ids = 0;
 	flush = 0;
-	registerInstanceId = 0;
-	flushed = false;
 	wroteUndefined = false;
 	buf = [];
 	strs = /* @__PURE__ */ new Map();
 	refs = /* @__PURE__ */ new WeakMap();
 	assigned = /* @__PURE__ */ new Set();
-	registered = [];
 	boundary = void 0;
+	channel = void 0;
+	channelDeps = null;
 	mutated = [];
 };
 var Reference = class {
@@ -534,19 +355,15 @@ var Reference = class {
 	flush;
 	pos;
 	id;
-	registered = null;
 	assigns = null;
+	scopeId = void 0;
+	channel = void 0;
 	constructor(parent, accessor, flush, pos = null, id = null) {
 		this.parent = parent;
 		this.accessor = accessor;
 		this.flush = flush;
 		this.pos = pos;
 		this.id = id;
-		this.parent = parent;
-		this.accessor = accessor;
-		this.flush = flush;
-		this.pos = pos;
-		this.id = id;
 	}
 };
 const DEBUG = /* @__PURE__ */ new WeakMap();
@@ -559,57 +376,43 @@ function setDebugInfo(obj, file, loc, vars) {
 }
 var Serializer = class {
 	#state = new State$1();
-	get flushed() {
-		return this.#state.flushed;
+	pending(channel) {
+		return hasMatchingMutations(this.#state.mutated, channel?.readyId);
 	}
-	stringify(val, boundary) {
+	pendingReadyChannel() {
+		for (const mutation of this.#state.mutated) if (mutation.channel?.readyId) return mutation.channel;
+	}
+	stringifyScopes(flushes, globals, boundary, channel) {
 		try {
-			this.#state.flushed = false;
 			this.#state.boundary = boundary;
-			return writeRoot(this.#state, val);
+			this.#state.channel = channel;
+			return writeScopesRoot(this.#state, flushes, globals);
 		} finally {
 			this.#state.flush++;
 			this.#state.buf = [];
 		}
 	}
-	nextId() {
-		return nextId(this.#state);
+	written(val) {
+		return this.#state.refs.has(val);
 	}
-	symbol(id) {
-		const symbol = Symbol();
-		this.#state.refs.set(symbol, new Reference(null, null, 0, null, id));
-		return symbol;
+	takeChannelDeps() {
+		const deps = this.#state.channelDeps;
+		this.#state.channelDeps = null;
+		return deps;
 	}
-	writeCall(value, object, property, spread) {
-		const state = this.#state;
-		state.mutated.push({
-			type: 0,
+	writeCall(value, object, property, channel) {
+		this.#state.mutated.push({
 			value,
 			object,
 			property,
-			spread
-		});
-		state.flushed = true;
-	}
-	writeAssign(value, object, property) {
-		const state = this.#state;
-		state.mutated.push({
-			type: 1,
-			value,
-			object,
-			property
+			channel
 		});
-		state.flushed = true;
-	}
-	register(id, val, scope) {
-		return register(id, val, scope, scope ? ++this.#state.registerInstanceId : 0);
 	}
 };
-function register(id, val, scope, instanceId) {
+function register(id, val, scope) {
 	REGISTRY.set(val, {
 		id,
 		scope,
-		instanceId: instanceId ?? 0,
 		access: "_._" + toAccess(toObjectKey(id))
 	});
 	return val;
@@ -621,65 +424,70 @@ function getRegistered(val) {
 		scope: registered.scope
 	};
 }
-function writeRoot(state, root) {
+function writeScopesRoot(state, flushes, globals) {
 	const { buf } = state;
-	const hadBuf = buf.length !== 0;
-	let result;
-	if (hadBuf) buf.push(",");
-	if (writeProp(state, root, null, "")) {
-		const rootRef = state.refs.get(root);
-		if (rootRef) {
-			const rootId = ensureId(state, rootRef);
-			if (state.assigned.size || state.registered.length || state.mutated.length) {
-				state.assigned.delete(rootRef);
-				writeAssigned(state);
-				buf.push("," + (rootRef.assigns ? assignsToString(rootRef.assigns, rootId) : rootId));
-			}
-		}
-		result = "(";
-		buf.push(")");
-	} else {
-		if (hadBuf) {
-			buf.pop();
-			writeAssigned(state);
+	let nextSlotId = -1;
+	let fillIndex = -1;
+	if (globals) {
+		fillIndex = buf.push("[0,") - 1;
+		writeProp(state, globals, null, "");
+		nextSlotId = 1;
+	}
+	for (const flush of flushes) {
+		const scopeId = flush[0];
+		const scope = flush[1];
+		const ref = state.refs.get(scope) || newScopeReference(state, scope, scopeId);
+		const openIndex = buf.push("") - 1;
+		if (writeObjectProps(state, flush[2], ref)) {
+			buf[openIndex] = nextSlotId === -1 ? "[" + scopeId + ",{" : (scopeId > nextSlotId ? "," + (scopeId - nextSlotId) : "") + ",{";
+			if (fillIndex === -1) fillIndex = openIndex;
+			nextSlotId = scopeId + 1;
+			buf.push("}");
+		} else buf.pop();
+	}
+	if (nextSlotId !== -1) buf.push("]");
+	let extras = "";
+	if (state.assigned.size || hasChannelMutations(state)) {
+		extras = ",0)";
+		if (fillIndex !== -1) {
+			buf[fillIndex] = "_(" + buf[fillIndex];
+			buf.push(")");
 		}
-		result = "{";
-		buf.push("}");
+		writeAssigned(state);
 	}
+	let result = extras && "(";
 	for (const chunk of buf) result += chunk;
+	result += extras;
+	if (!result) return "";
 	if (state.wroteUndefined) {
 		state.wroteUndefined = false;
 		return "(_,$)=>" + result;
 	} else return "_=>" + result;
 }
 function writeAssigned(state) {
+	let sep = state.buf.length ? "," : "";
 	if (state.assigned.size) {
 		let buf = "";
 		for (const ref of state.assigned) {
-			buf += "," + assignsToString(ref.assigns, ref.id);
+			buf += sep + assignsToString(ref.assigns, ref.id);
 			ref.assigns = null;
+			sep = ",";
 		}
 		state.buf.push(buf);
 		state.assigned = /* @__PURE__ */ new Set();
 	}
-	if (state.registered.length) {
-		let buf = "";
-		for (const ref of state.registered.sort(compareRegisteredReferences)) {
-			const scopeRef = state.refs.get(ref.registered.scope);
-			buf += "," + assignsToString(ref.assigns, ref.registered.access + "(" + (scopeRef ? ensureId(state, scopeRef) : ref.assigns[0]) + ")");
-			ref.assigns = null;
-			ref.registered = null;
-		}
-		state.buf.push(buf);
-		state.registered = [];
-	}
-	if (state.mutated.length) {
+	if (hasChannelMutations(state)) {
+		const remaining = [];
 		for (const mutation of state.mutated) {
+			if (!mutationMatchesReadyId(mutation, state.channel?.readyId)) {
+				remaining.push(mutation);
+				continue;
+			}
 			const hasSeen = state.refs.get(mutation.object)?.id;
 			const objectStartIndex = state.buf.push(state.buf.length === 0 ? "" : ",");
 			if (writeProp(state, mutation.object, null, "")) {
 				const objectRef = state.refs.get(mutation.object);
-				if (objectRef) {
+				if (objectRef && objectRef.scopeId === void 0) {
 					if (!objectRef.id) {
 						objectRef.id = nextRefAccess(state);
 						state.buf[objectStartIndex] = "(" + objectRef.id + "=" + state.buf[objectStartIndex];
@@ -690,21 +498,30 @@ function writeAssigned(state) {
 					}
 				}
 			} else state.buf.push("void 0");
-			const isCall = mutation.type === 0;
-			const valueStartIndex = state.buf.push(isCall ? (mutation.property === void 0 ? "" : toAccess(toObjectKey(mutation.property))) + "(" + (mutation.spread ? "..." : "") : toAccess(toObjectKey(mutation.property)) + "=");
-			if (writeProp(state, mutation.value, null, "")) {
+			const valueStartIndex = state.buf.push(toAccess(toObjectKey(mutation.property)) + "(");
+			if (mutation.value === void 0) {} else if (writeProp(state, mutation.value, null, "")) {
 				const valueRef = state.refs.get(mutation.value);
-				if (valueRef && !valueRef.id) {
-					valueRef.id = nextRefAccess(state);
+				if (valueRef && !valueRef.id && valueRef.scopeId === void 0) {
+					valueRef.id = mutation.valueId || nextRefAccess(state);
 					state.buf[valueStartIndex] = valueRef.id + "=" + state.buf[valueStartIndex];
 				}
 			} else state.buf.push("void 0");
-			if (isCall) state.buf.push(")");
+			state.buf.push(")");
 		}
-		state.mutated = [];
-		if (state.assigned.size || state.registered.length) writeAssigned(state);
+		state.mutated = remaining;
+		if (state.assigned.size) writeAssigned(state);
 	}
 }
+function hasChannelMutations(state) {
+	return hasMatchingMutations(state.mutated, state.channel?.readyId);
+}
+function hasMatchingMutations(mutated, readyId) {
+	for (const mutation of mutated) if (mutationMatchesReadyId(mutation, readyId)) return true;
+	return false;
+}
+function mutationMatchesReadyId(mutation, readyId) {
+	return mutation.channel?.readyId ? mutation.channel.readyId === readyId : !readyId;
+}
 function writeProp(state, val, parent, accessor) {
 	switch (typeof val) {
 		case "string": return writeString(state, val, parent, accessor);
@@ -720,16 +537,26 @@ function writeProp(state, val, parent, accessor) {
 	}
 }
 function writeReferenceOr(state, write, val, parent, accessor) {
+	const scopeId = val[K_SCOPE_ID];
+	if (scopeId !== void 0) {
+		trackScope(state, val, scopeId);
+		state.buf.push("_(" + scopeId + ")");
+		return true;
+	}
 	let ref = state.refs.get(val);
 	if (ref) {
+		if (!trackChannel(state, ref)) {
+			abortUnreachableChannel(state, val);
+			return false;
+		}
 		if (parent) {
 			if (ref.assigns) {
-				addAssignment(ref, ensureId(state, parent) + toAccess(accessor));
+				addAssignment(ref, accessId(state, parent) + toAccess(accessor));
 				return false;
 			} else if (isCircular(parent, ref)) {
 				ensureId(state, ref);
 				state.assigned.add(ref);
-				addAssignment(ref, ensureId(state, parent) + toAccess(accessor));
+				addAssignment(ref, accessId(state, parent) + toAccess(accessor));
 				return false;
 			}
 		}
@@ -739,27 +566,35 @@ function writeReferenceOr(state, write, val, parent, accessor) {
 	const registered = REGISTRY.get(val);
 	if (registered) return writeRegistered(state, val, parent, accessor, registered);
 	state.refs.set(val, ref = new Reference(parent, accessor, state.flush, state.buf.length));
+	ref.channel = state.channel;
 	ref.debug = DEBUG.get(val);
 	if (write(state, val, ref)) return true;
 	state.refs.delete(val);
 	return false;
 }
+function trackScope(state, val, scopeId) {
+	const ref = state.refs.get(val);
+	if (ref) trackChannel(state, ref);
+	else newScopeReference(state, val, scopeId);
+}
+function newScopeReference(state, val, scopeId) {
+	const ref = new Reference(null, null, state.flush);
+	ref.scopeId = scopeId;
+	ref.channel = state.channel;
+	state.refs.set(val, ref);
+	ref.debug = DEBUG.get(val);
+	return ref;
+}
 function writeRegistered(state, val, parent, accessor, registered) {
-	if (parent && registered.scope) {
-		if (!state.refs.has(registered.scope)) {
-			state.buf.push(registered.access + "(");
-			writeProp(state, registered.scope, null, "");
-			state.buf.push(")");
-			const scopeRef = state.refs.get(registered.scope);
-			if (scopeRef) ensureId(state, scopeRef);
-			return true;
-		}
-		const fnRef = new Reference(parent, accessor, state.flush, state.buf.length);
-		fnRef.registered = registered;
-		state.refs.set(val, fnRef);
-		state.registered.push(fnRef);
-		addAssignment(fnRef, ensureId(state, parent) + toAccess(accessor));
-		return false;
+	const { scope } = registered;
+	if (scope) {
+		const ref = new Reference(parent, accessor, state.flush, state.buf.length);
+		ref.channel = state.channel;
+		state.refs.set(val, ref);
+		ref.debug = DEBUG.get(val);
+		const scopeId = scope[K_SCOPE_ID];
+		trackScope(state, scope, scopeId);
+		state.buf.push("_(" + scopeId + "," + quote(registered.id, 0) + ")");
 	} else state.buf.push(registered.access);
 	return true;
 }
@@ -768,9 +603,15 @@ function writeString(state, val, parent, accessor) {
 	if (val.length > STRING_DEDUP_LENGTH) {
 		const ref = state.strs.get(val);
 		if (ref) {
-			state.buf.push(ensureId(state, ref));
-			return true;
-		} else state.strs.set(val, new Reference(parent, accessor, state.flush, state.buf.length));
+			if (trackChannel(state, ref)) {
+				state.buf.push(ensureId(state, ref));
+				return true;
+			}
+		} else {
+			const ref = new Reference(parent, accessor, state.flush, state.buf.length);
+			ref.channel = state.channel;
+			state.strs.set(val, ref);
+		}
 	}
 	state.buf.push(quote(val, 0));
 	return true;
@@ -902,15 +743,22 @@ function writeRegExp(state, val) {
 	return true;
 }
 function writePromise(state, val, ref) {
-	const { boundary } = state;
+	const { boundary, channel } = state;
 	if (!boundary) return false;
 	const pId = nextRefAccess(state);
-	const pRef = new Reference(ref, null, state.flush, null, pId);
+	const handle = newAsyncHandle(state, ref, pId);
 	state.buf.push("(p=>p=new Promise((f,r)=>" + pId + "={f,r(e){p.catch(_=>0);r(e)}}))()");
-	val.then((v) => writeAsyncCall(state, boundary, pRef, "f", v, pId), (v) => writeAsyncCall(state, boundary, pRef, "r", v, pId));
+	val.then((v) => writeAsyncCall(state, boundary, handle, "f", v, channel, pId), (v) => writeAsyncCall(state, boundary, handle, "r", v, channel, pId));
 	boundary.startAsync();
 	return true;
 }
+function newAsyncHandle(state, parent, id) {
+	const handle = {};
+	const handleRef = new Reference(parent, null, state.flush, null, id);
+	handleRef.channel = state.channel;
+	state.refs.set(handle, handleRef);
+	return handle;
+}
 function writeMap(state, val, ref) {
 	if (!val.size) {
 		state.buf.push("new Map");
@@ -983,7 +831,7 @@ function writeArrayArg(state, ref, items, assignsPrefix, plainPrefix, needsId) {
 }
 function isDedupedMember(val) {
 	switch (typeof val) {
-		case "object": return val !== null;
+		case "object": return val !== null && val[K_SCOPE_ID] === void 0;
 		case "function":
 		case "symbol": return true;
 		case "string": return val.length > STRING_DEDUP_LENGTH;
@@ -1136,21 +984,21 @@ function writeResponse(state, val, ref) {
 	return true;
 }
 function writeReadableStream(state, val, ref) {
-	const { boundary } = state;
+	const { boundary, channel } = state;
 	if (!boundary || val.locked) return false;
 	const reader = val.getReader();
 	const iterId = nextRefAccess(state);
-	const iterRef = new Reference(ref, null, state.flush, null, iterId);
+	const handle = newAsyncHandle(state, ref, iterId);
 	const onFulfilled = ({ value, done }) => {
-		if (done) writeAsyncCall(state, boundary, iterRef, "r", value);
+		if (done) writeAsyncCall(state, boundary, handle, "r", value, channel);
 		else if (!boundary.signal.aborted) {
 			reader.read().then(onFulfilled, onRejected);
 			boundary.startAsync();
-			writeAsyncCall(state, boundary, iterRef, "f", value);
+			writeAsyncCall(state, boundary, handle, "f", value, channel);
 		}
 	};
 	const onRejected = (reason) => {
-		writeAsyncCall(state, boundary, iterRef, "j", reason);
+		writeAsyncCall(state, boundary, handle, "j", reason, channel);
 	};
 	state.buf.push("new ReadableStream({start(c){(async(_,f,v,l,i,p=a=>l=new Promise((r,j)=>{f=_.r=r;_.j=j}),a=((_.f=v=>{f(v);a.push(p())}),[p()]))=>{for(i of a)v=await i,i==l?c.close():c.enqueue(v)})(" + iterId + "={}).catch(e=>c.error(e))}})");
 	reader.read().then(onFulfilled, onRejected);
@@ -1188,20 +1036,20 @@ function writeAsyncGenerator(state, iter, ref) {
 		state.buf.push("(async function*(){}())");
 		return true;
 	}
-	const { boundary } = state;
+	const { boundary, channel } = state;
 	if (!boundary) return false;
 	const iterId = nextRefAccess(state);
-	const iterRef = new Reference(ref, null, state.flush, null, iterId);
+	const handle = newAsyncHandle(state, ref, iterId);
 	const onFulfilled = ({ value, done }) => {
-		if (done) writeAsyncCall(state, boundary, iterRef, "r", value);
+		if (done) writeAsyncCall(state, boundary, handle, "r", value, channel);
 		else if (!boundary.signal.aborted) {
 			iter.next().then(onFulfilled, onRejected);
 			boundary.startAsync();
-			writeAsyncCall(state, boundary, iterRef, "f", value);
+			writeAsyncCall(state, boundary, handle, "f", value, channel);
 		}
 	};
 	const onRejected = (reason) => {
-		writeAsyncCall(state, boundary, iterRef, "j", reason);
+		writeAsyncCall(state, boundary, handle, "j", reason, channel);
 	};
 	state.buf.push("(async function*(_,f,v,l,i,p=a=>l=new Promise((r,j)=>{f=_.r=r;_.j=j}),a=((_.f=v=>{f(v);a.push(p())}),[p()])){for(i of a)v=await i,i!=l&&(yield v);return v})(" + iterId + "={})");
 	iter.next().then(onFulfilled, onRejected);
@@ -1215,7 +1063,7 @@ function writeNullObject(state, val, ref) {
 }
 function writeObjectProps(state, val, ref) {
 	let sep = "";
-	for (const key in val) if (hasOwnProperty.call(val, key)) {
+	for (const key in val) if (hasOwnProperty$1.call(val, key)) {
 		const escapedKey = toObjectKey(key);
 		state.buf.push(sep + escapedKey + ":");
 		if (writeProp(state, val[key], ref, escapedKey)) sep = ",";
@@ -1236,18 +1084,15 @@ function writeObjectProps(state, val, ref) {
 	}
 	return sep;
 }
-function writeAsyncCall(state, boundary, ref, method, value, preferredValueId = null) {
+function writeAsyncCall(state, boundary, handle, method, value, channel, valueId = null) {
 	if (boundary.signal.aborted) return;
-	state.flushed = true;
-	const valueStartIndex = state.buf.push((state.buf.length === 0 ? "" : ",") + ref.id + "." + method + "(");
-	if (writeProp(state, value, ref, "")) {
-		const valueRef = state.refs.get(value);
-		if (valueRef && !valueRef.id) {
-			valueRef.id = preferredValueId || nextRefAccess(state);
-			state.buf[valueStartIndex] = valueRef.id + "=" + state.buf[valueStartIndex];
-		}
-	}
-	state.buf.push(")");
+	state.mutated.push({
+		value,
+		object: handle,
+		property: method,
+		channel,
+		valueId
+	});
 	boundary.endAsync();
 }
 function throwUnserializable(state, cause, ref = null, accessor = "") {
@@ -1279,6 +1124,26 @@ function throwUnserializable(state, cause, ref = null, accessor = "") {
 		state.boundary.abort(err);
 	}
 }
+function trackChannel(state, ref) {
+	const refReadyId = ref.channel?.readyId;
+	if (!refReadyId || refReadyId === state.channel?.readyId) return true;
+	let cur = state.channel?.parent;
+	while (cur) {
+		if (cur.readyId === refReadyId) {
+			(state.channelDeps ||= /* @__PURE__ */ new Set()).add(refReadyId);
+			return true;
+		}
+		cur = cur.parent;
+	}
+	return false;
+}
+function abortUnreachableChannel(state, val) {
+	if (state.boundary?.abort) {
+		const err = new TypeError("Unable to serialize a value shared between independently lazy loaded content. Values shared this way must also be serialized by content that is not lazily loaded, or by a common parent.", { cause: val });
+		err.stack = void 0;
+		state.boundary.abort(err);
+	}
+}
 function isCircular(parent, ref) {
 	let cur = parent;
 	while (cur) {
@@ -1338,7 +1203,19 @@ function quote(str, startPos) {
 	return "\"" + (lastPos === startPos ? str : result + str.slice(lastPos)) + "\"";
 }
 function ensureId(state, ref) {
-	return ref.id || assignId(state, ref);
+	if (ref.scopeId !== void 0) {
+		trackChannel(state, ref);
+		return "_(" + ref.scopeId + ")";
+	}
+	if (ref.id) {
+		trackChannel(state, ref);
+		return ref.id;
+	}
+	return assignId(state, ref);
+}
+function accessId(state, ref) {
+	const id = ensureId(state, ref);
+	return id === ref.id || ref.scopeId !== void 0 ? id : "(" + id + ")";
 }
 function assignId(state, ref) {
 	const { pos } = ref;
@@ -1348,17 +1225,20 @@ function assignId(state, ref) {
 		else state.buf[pos - 1] += ref.id + "=";
 		return ref.id;
 	}
+	ref.channel = state.channel;
 	let cur = ref;
 	let accessPrevValue = "";
 	do {
 		accessPrevValue = toAccess(cur.accessor) + accessPrevValue;
 		const parent = cur.parent;
 		if (parent.id) {
-			accessPrevValue = parent.id + accessPrevValue;
-			break;
+			if (trackChannel(state, parent) || !parent.parent) {
+				accessPrevValue = parent.id + accessPrevValue;
+				break;
+			}
 		}
-		if (parent.flush === state.flush) {
-			accessPrevValue = ensureId(state, parent) + accessPrevValue;
+		if (parent.flush === state.flush || parent.scopeId !== void 0) {
+			accessPrevValue = accessId(state, parent) + accessPrevValue;
 			break;
 		}
 		cur = parent;
@@ -1427,18 +1307,209 @@ function patchIteratorNext(proto) {
 	};
 	proto.next[kTouchedIterator] = true;
 }
-function compareRegisteredReferences(a, b) {
-	return a.registered.instanceId - b.registered.instanceId;
-}
 //#endregion
-//#region src/html/writer.ts
-let $chunk;
-const NOOP$2 = () => {};
-const K_SCOPE_ID = Symbol("Scope ID");
-const K_SCOPE_REFERENCED = Symbol("Scope Referenced");
-function getChunk() {
-	return $chunk;
-}
+//#region src/common/helpers.ts
+const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
+function stringifyClassObject(name, value) {
+	return value ? name : "";
+}
+function stringifyStyleObject(name, value) {
+	return value || value === 0 ? name + ":" + value : "";
+}
+const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
+	let str = "";
+	let sep = "";
+	let part;
+	if (val) if (typeof val !== "object") str += val;
+	else if (Array.isArray(val)) for (const v of val) {
+		part = toDelimitedString(v, delimiter, stringify);
+		if (part) {
+			str += sep + part;
+			sep = delimiter;
+		}
+	}
+	else for (const name in val) {
+		part = stringify(name, val[name]);
+		if (part) {
+			str += sep + part;
+			sep = delimiter;
+		}
+	}
+	return str;
+};
+function isEventHandler(name) {
+	return /^on[A-Z-]/.test(name);
+}
+function getEventHandlerName(name) {
+	return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
+}
+function isVoid(value) {
+	return value == null || value === false;
+}
+function normalizeDynamicRenderer(value) {
+	if (value) {
+		if (typeof value === "string") return value;
+		const normalized = value.content || value.default || value;
+		if ("id" in normalized) return normalized;
+	}
+}
+//#endregion
+//#region src/common/for.ts
+function forIn(obj, cb) {
+	for (const key in obj) cb(key, obj[key]);
+}
+function forOf(list, cb) {
+	if (list) {
+		let i = 0;
+		for (const item of list) cb(item, i++);
+	}
+}
+function forTo(to, from, step, cb) {
+	const start = from || 0;
+	const delta = step || 1;
+	for (let steps = (to - start) / delta, i = 0; i <= steps; i++) cb(start + i * delta);
+}
+function forUntil(until, from, step, cb) {
+	const start = from || 0;
+	const delta = step || 1;
+	for (let steps = (until - start) / delta, i = 0; i < steps; i++) cb(start + i * delta);
+}
+//#endregion
+//#region src/common/opt.ts
+function forEach(opt, cb) {
+	if (opt) if (Array.isArray(opt)) for (const item of opt) cb(item);
+	else cb(opt);
+}
+function push(opt, item) {
+	return opt ? Array.isArray(opt) ? (opt.push(item), opt) : [opt, item] : item;
+}
+function concat(opt, other) {
+	if (!opt) return other;
+	if (!other) return opt;
+	if (Array.isArray(opt)) {
+		if (Array.isArray(other)) for (const item of other) opt.push(item);
+		else opt.push(other);
+		return opt;
+	}
+	return Array.isArray(other) ? [opt, ...other] : [opt, other];
+}
+//#endregion
+//#region src/html/for.ts
+function forOfBy(by, item, index) {
+	if (by) {
+		if (typeof by === "string") return item[by];
+		return by(item, index);
+	}
+	return index;
+}
+function forInBy(by, name, value) {
+	if (by) return by(name, value);
+	return name;
+}
+function forStepBy(by, index) {
+	if (by) return by(index);
+	return index;
+}
+//#endregion
+//#region src/html/inlined-runtimes.debug.ts
+const WALKER_RUNTIME_CODE = `((runtimeId) => (self[runtimeId] ||= (
+  renderId,
+  prefix = runtimeId + renderId,
+  prefixLen = prefix.length,
+  lookup = {},
+  visits = [],
+  doc = document,
+  walker = doc.createTreeWalker(
+    doc,
+    129 /* NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_ELEMENT */,
+  ),
+) =>
+  doc = (self[runtimeId][renderId] = {
+    i: prefix,
+    d: doc,
+    l: lookup,
+    v: visits,
+    x() {},
+    w(node, op, id) {
+      while ((node = walker.nextNode())) {
+        doc.x(
+          (op =
+            (op = node.data) &&
+            !op.indexOf(prefix) &&
+            ((lookup[(id = op.slice(prefixLen + 1))] = node), op[prefixLen])),
+          id,
+          node,
+        );
+
+        if (op > "#") {
+          visits.push(node);
+        }
+      }
+    },
+  })
+, self[runtimeId]))`;
+const REORDER_RUNTIME_CODE = `((runtime) => {
+  if (runtime.j) return;
+  let onNextSibling,
+    placeholder,
+    nextSibling,
+    placeholders = runtime.p = {},
+    replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);
+  runtime.d.head.append(
+    runtime.d.querySelector("style[" + runtime.i + "]") || ""
+  );
+  runtime.j = {};
+  runtime.x = (op, id, node, placeholderRoot, placeholderCb) => {
+    if (node == nextSibling) {
+      onNextSibling();
+    }
+
+    if (op == "#") {
+      (placeholders[id] = placeholder).i++;
+    } else if (op == "!") {
+      if (runtime.l[id] && placeholders[id]) {
+        nextSibling = node.nextSibling;
+        onNextSibling = () => placeholders[id].c();
+      }
+    } else if (node.tagName == "T" && (id = node.getAttribute(runtime.i))) {
+      nextSibling = node.nextSibling;
+      onNextSibling = () => {
+        node.remove();
+        placeholderRoot || replace(id, node);
+        placeholder.c();
+      };
+      placeholder =
+        placeholders[id] ||
+        (placeholderRoot = placeholders[id] =
+          {
+            i: runtime.l[id] ? 1 : 2,
+            c(start = runtime.l["^" + id]) {
+              if (--placeholderRoot.i) return 1;
+              for (
+                ;
+                (nextSibling =
+                  runtime.l[id].previousSibling || start).remove(),
+                  start != nextSibling;
+
+              );
+              replace(id, node);
+            },
+          });
+      // repurpose "op" for callbacks ...carefully
+      if ((op = runtime.j[id])) {
+        placeholderCb = placeholder.c;
+        placeholder.c = () => placeholderCb() || op(runtime.r);
+      }
+    }
+  };
+})`;
+//#endregion
+//#region src/html/writer.ts
+let $chunk;
+const NOOP$2 = () => {};
+function getChunk() {
+	return $chunk;
+}
 function getContext(key) {
 	return $chunk.context?.[key];
 }
@@ -1454,8 +1525,28 @@ function _html(html) {
 function writeScript(script) {
 	$chunk.writeScript(script);
 }
+function writeWaitReady(readyId, renderer, input) {
+	const chunk = $chunk;
+	const { boundary } = chunk;
+	const body = new Chunk(boundary, null, chunk.context, {
+		readyId,
+		parent: chunk.serializeState,
+		resumes: "",
+		writeScopes: {},
+		flushScopes: false
+	});
+	const bodyEnd = body.render(renderer, input);
+	if (body === bodyEnd) {
+		chunk.writeHTML(body.html);
+		body.deferOwnReady();
+		chunk.deferredReady = push(chunk.deferredReady, body);
+	} else {
+		bodyEnd.next = $chunk = chunk.fork(boundary, chunk.next);
+		chunk.next = body;
+	}
+}
 function _script(scopeId, registryId) {
-	if ($chunk.context?.[kIsAsync]) _resume_branch(scopeId);
+	if ($chunk.serializeState.readyId || $chunk.context?.[kIsAsync]) _resume_branch(scopeId);
 	$chunk.boundary.state.needsMainRuntime = true;
 	$chunk.writeEffect(scopeId, registryId);
 }
@@ -1467,7 +1558,7 @@ function _attr_content(nodeAccessor, scopeId, content, serializeReason) {
 	else render();
 	if (_peek_scope_id() !== branchId) {
 		if (shouldResume) writeScope(scopeId, {
-			["BranchScopes:" + nodeAccessor]: referenceScope(writeScope(branchId, {})),
+			["BranchScopes:" + nodeAccessor]: writeScope(branchId, {}),
 			["ConditionalRenderer:" + nodeAccessor]: render?.["id"]
 		});
 	} else _scope_id();
@@ -1491,13 +1582,20 @@ function withContext(key, value, cb, cbValue) {
 	}
 }
 function _var(parentScopeId, scopeOffsetAccessor, childScopeId, registryId, nodeAccessor) {
-	_scope_with_id(parentScopeId)[scopeOffsetAccessor] = _scope_id();
-	const childScope = _scope_with_id(childScopeId);
-	childScope["#TagVariable"] = _resume({}, registryId, parentScopeId);
+	writeScopePassive(parentScopeId, { [scopeOffsetAccessor]: _scope_id() });
+	const childScope = writeScopePassive(childScopeId, { ["#TagVariable"]: _resume({}, registryId, parentScopeId) });
 	if (nodeAccessor !== void 0) writeScope(parentScopeId, { ["BranchScopes:" + nodeAccessor]: childScope });
 }
+function writeScopePassive(scopeId, partialScope) {
+	const target = $chunk.serializeState;
+	const scope = _scope_with_id(scopeId);
+	const passive = target.passiveScopes ||= {};
+	Object.assign(scope, partialScope);
+	passive[scopeId] = Object.assign(passive[scopeId] || {}, partialScope);
+	return scope;
+}
 function _resume(val, id, scopeId) {
-	return scopeId === void 0 ? register(id, val) : $chunk.boundary.state.serializer.register(id, val, _scope_with_id(scopeId));
+	return register(id, val, scopeId === void 0 ? void 0 : _scope_with_id(scopeId));
 }
 function _id() {
 	const state = $chunk.boundary.state;
@@ -1608,7 +1706,7 @@ function forBranches(by, iterate, scopeId, accessor, serializeBranch, serializeM
 		withBranchId(branchId, () => {
 			render();
 			const branchScope = writeScope(branchId, resumeKeys && !sameAsIndex ? { ["#LoopKey"]: itemKey } : {});
-			if (!resumeMarker) loopScopes = push(loopScopes, referenceScope(branchScope));
+			if (!resumeMarker) loopScopes = push(loopScopes, branchScope);
 		});
 	});
 	if (loopScopes) writeScope(scopeId, { ["BranchScopes:" + accessor]: loopScopes });
@@ -1624,7 +1722,7 @@ function _if(cb, scopeId, accessor, serializeBranch, serializeMarker, serializeS
 	const shouldWriteBranch = resumeBranch && branchIndex !== void 0;
 	if (shouldWriteBranch && (branchIndex || !resumeMarker)) writeScope(scopeId, {
 		["ConditionalRenderer:" + accessor]: branchIndex || void 0,
-		["BranchScopes:" + accessor]: resumeMarker ? void 0 : referenceScope(writeScope(branchId, {}))
+		["BranchScopes:" + accessor]: resumeMarker ? void 0 : writeScope(branchId, {})
 	});
 	writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, singleNode, shouldWriteBranch ? " " + branchId : "");
 }
@@ -1637,46 +1735,34 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
-function scopeHasReference(scope) {
-	return !!scope[K_SCOPE_REFERENCED];
-}
-function referenceScope(scope) {
-	scope[K_SCOPE_REFERENCED] = 1;
-	return scope;
-}
 let writeScope = (scopeId, partialScope) => {
-	return writeScopeToState($chunk.boundary.state, scopeId, partialScope);
-};
-function writeScopeToState(state, scopeId, partialScope) {
-	const { scopes } = state;
-	let scope = scopes.get(scopeId);
+	const { state } = $chunk.boundary;
+	const target = $chunk.serializeState;
+	const scope = scopeWithId(state, scopeId);
+	const pending = target.writeScopes[scopeId];
 	state.needsMainRuntime = true;
-	if (scope) Object.assign(scope, partialScope);
-	else {
-		scope = partialScope;
-		scope[K_SCOPE_ID] = scopeId;
-		state.scopes.set(scopeId, scope);
-	}
-	if (state.writeScopes) state.writeScopes[scopeId] = scope;
-	else state.writeScopes = { [scopeId]: scope };
+	Object.assign(scope, partialScope);
+	if (pending && pending !== partialScope) Object.assign(pending, partialScope);
+	else target.writeScopes[scopeId] = partialScope;
+	target.flushScopes = true;
 	return scope;
-}
+};
 writeScope = ((writeScope) => (scopeId, partialScope, file, loc, vars) => {
 	const scope = writeScope(scopeId, partialScope);
 	if (file && loc !== void 0) setDebugInfo(scope, file, loc, vars);
 	return scope;
 })(writeScope);
 function _existing_scope(scopeId) {
-	return writeScope(scopeId, _scope_with_id(scopeId));
+	return writeScope(scopeId, {});
 }
 function _scope_with_id(scopeId) {
-	const { state } = $chunk.boundary;
-	let scope = state.scopes.get(scopeId);
-	if (!scope) {
-		scope = { [K_SCOPE_ID]: scopeId };
-		state.scopes.set(scopeId, scope);
-	}
-	return referenceScope(scope);
+	return scopeWithId($chunk.boundary.state, scopeId);
+}
+function scopeWithId(state, scopeId) {
+	const { scopes } = state;
+	let scope = scopes.get(scopeId);
+	if (!scope) scopes.set(scopeId, scope = { [K_SCOPE_ID]: scopeId });
+	return scope;
 }
 function $global() {
 	return $chunk.boundary.state.$global;
@@ -1694,7 +1780,7 @@ function _await(scopeId, accessor, promise, content, serializeMarker) {
 	}
 	const chunk = $chunk;
 	const { boundary } = chunk;
-	chunk.next = $chunk = new Chunk(boundary, chunk.next, chunk.context);
+	chunk.next = $chunk = chunk.fork(boundary, chunk.next);
 	chunk.async = true;
 	if (chunk.context?.[kPendingContexts]) chunk.context = {
 		...chunk.context,
@@ -1739,22 +1825,24 @@ function _try(scopeId, accessor, content, input) {
 function tryPlaceholder(content, placeholder, branchId) {
 	const chunk = $chunk;
 	const { boundary } = chunk;
-	const body = new Chunk(boundary, null, chunk.context);
+	const body = chunk.fork(boundary, null);
 	if (body === body.render(content)) {
 		chunk.append(body);
 		return;
 	}
-	chunk.next = $chunk = new Chunk(boundary, chunk.next, chunk.context);
-	chunk.placeholderBody = body;
-	chunk.placeholderRender = placeholder;
-	chunk.placeholderBranchId = branchId;
+	chunk.next = $chunk = chunk.fork(boundary, chunk.next);
+	chunk.placeholder = {
+		body,
+		render: placeholder,
+		branchId
+	};
 }
 function tryCatch(content, catchContent) {
 	const chunk = $chunk;
 	const { boundary } = chunk;
 	const { state } = boundary;
 	const catchBoundary = new Boundary(state);
-	const body = new Chunk(catchBoundary, null, chunk.context);
+	const body = chunk.fork(catchBoundary, null);
 	const bodyEnd = body.render(content);
 	if (catchBoundary.signal.aborted) {
 		catchContent(catchBoundary.signal.reason);
@@ -1766,7 +1854,7 @@ function tryCatch(content, catchContent) {
 	}
 	const reorderId = state.nextReorderId();
 	const endMarker = state.mark("!", reorderId);
-	const bodyNext = bodyEnd.next = $chunk = new Chunk(boundary, chunk.next, body.context);
+	const bodyNext = bodyEnd.next = $chunk = body.fork(boundary, chunk.next);
 	chunk.next = body;
 	chunk.writeHTML(state.mark("!^", reorderId));
 	bodyEnd.writeHTML(endMarker);
@@ -1787,12 +1875,12 @@ function tryCatch(content, catchContent) {
 						cur.needsWalk = true;
 						cur.html = endMarker;
 						cur.scripts = cur.effects = cur.lastEffect = "";
-						cur.placeholderBody = cur.placeholderRender = cur.reorderId = null;
+						cur.placeholder = cur.reorderId = cur.deferredReady = null;
 					}
 					cur = next;
 				} while (cur !== bodyNext);
 			}
-			const catchChunk = new Chunk(boundary, null, chunk.context);
+			const catchChunk = chunk.fork(boundary, null);
 			catchChunk.reorderId = reorderId;
 			catchChunk.render(catchContent, catchBoundary.signal.reason);
 			state.reorder(catchChunk);
@@ -1806,10 +1894,11 @@ var State = class {
 	tagId = 1;
 	scopeId = 1;
 	reorderId = 1;
-	lastSerializedScopeId = this.scopeId;
+	readyGate = 1;
 	hasGlobals = false;
 	needsMainRuntime = false;
 	hasMainRuntime = false;
+	hasReadyRuntime = false;
 	hasReorderRuntime = false;
 	hasWrittenResume = false;
 	walkOnNextFlush = false;
@@ -1819,11 +1908,11 @@ var State = class {
 	serializer = new Serializer();
 	writeReorders = null;
 	scopes = /* @__PURE__ */ new Map();
-	writeScopes = null;
-	ensureReady = null;
+	flushScopes = false;
+	writeScopes = {};
+	readyIds = null;
 	serializeReason;
 	constructor($global) {
-		this.$global = $global;
 		this.$global = $global;
 		if ($global.cspNonce) this.nonceAttr = " nonce" + attrAssignment($global.cspNonce);
 	}
@@ -1842,6 +1931,17 @@ var State = class {
 			this.writeReorders = [chunk];
 		}
 	}
+	writeReady(id, resumes) {
+		const readyKey = toObjectKey(id);
+		if (this.readyIds?.has(id)) return this.readyAccess(readyKey) + ".push(" + resumes + ")";
+		(this.readyIds ||= /* @__PURE__ */ new Set()).add(id);
+		if (this.hasReadyRuntime) return this.readyAccess(readyKey) + "=[" + resumes + "]";
+		this.hasReadyRuntime = true;
+		return this.runtimePrefix + ".b={" + readyKey + ":[" + resumes + "]}";
+	}
+	readyAccess(readyKey) {
+		return this.runtimePrefix + ".b" + toAccess(readyKey);
+	}
 	nextReorderId() {
 		const c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789";
 		let n = this.reorderId++;
@@ -1860,7 +1960,6 @@ var Boundary = class extends AbortController {
 	constructor(state, parent) {
 		super();
 		this.state = state;
-		this.state = state;
 		this.signal.addEventListener("abort", () => {
 			this.count = 0;
 			this.state = new State(this.state.$global);
@@ -1872,7 +1971,7 @@ var Boundary = class extends AbortController {
 		});
 	}
 	flush() {
-		if (!this.signal.aborted) flushSerializer(this);
+		if (!this.signal.aborted) flushSerializer(this, this.state);
 		return this.count ? 1 : this.signal.aborted ? 2 : 0;
 	}
 	startAsync() {
@@ -1886,10 +1985,11 @@ var Boundary = class extends AbortController {
 		}
 	}
 };
-var Chunk = class {
+var Chunk = class Chunk {
 	boundary;
 	next;
 	context;
+	serializeState;
 	html = "";
 	scripts = "";
 	effects = "";
@@ -1898,16 +1998,16 @@ var Chunk = class {
 	consumed = false;
 	needsWalk = false;
 	reorderId = null;
-	placeholderBody = null;
-	placeholderRender = null;
-	placeholderBranchId = null;
-	constructor(boundary, next, context) {
-		this.boundary = boundary;
-		this.next = next;
-		this.context = context;
+	deferredReady = null;
+	placeholder = null;
+	constructor(boundary, next, context, serializeState) {
 		this.boundary = boundary;
 		this.next = next;
 		this.context = context;
+		this.serializeState = serializeState;
+	}
+	fork(boundary, next) {
+		return new Chunk(boundary, next, this.context, this.serializeState);
 	}
 	writeHTML(html) {
 		this.html += html;
@@ -1927,16 +2027,31 @@ var Chunk = class {
 		this.effects = concatEffects(this.effects, chunk.effects);
 		this.scripts = concatScripts(this.scripts, chunk.scripts);
 		this.lastEffect = chunk.lastEffect || this.lastEffect;
+		this.deferredReady = concat(this.deferredReady, chunk.takeDeferredReady());
+	}
+	takeDeferredReady() {
+		const { deferredReady } = this;
+		this.deferredReady = null;
+		return deferredReady;
+	}
+	deferOwnReady() {
+		if (this.serializeState.readyId && (this.effects || this.scripts || this.serializeState.flushScopes)) {
+			const deferred = this.fork(this.boundary, null);
+			deferred.effects = this.effects;
+			deferred.scripts = this.scripts;
+			this.effects = this.scripts = this.lastEffect = "";
+			this.deferredReady = concat(deferred, this.deferredReady);
+		}
 	}
 	flushPlaceholder() {
-		if (this.placeholderBody) {
-			const body = this.placeholderBody.consume();
+		const { placeholder } = this;
+		if (placeholder) {
+			const body = placeholder.body.consume();
 			if (body.async) {
 				const { state } = this.boundary;
-				const reorderId = body.reorderId = this.placeholderBranchId ? this.placeholderBranchId + "" : state.nextReorderId();
-				this.placeholderBranchId = null;
+				const reorderId = body.reorderId = placeholder.branchId ? placeholder.branchId + "" : state.nextReorderId();
 				this.writeHTML(state.mark("!^", reorderId));
-				const after = this.render(this.placeholderRender);
+				const after = this.render(placeholder.render);
 				if (after !== this) this.boundary.abort(/* @__PURE__ */ new Error("An @placeholder cannot contain async content."));
 				after.writeHTML(state.mark("!", reorderId));
 				state.reorder(body);
@@ -1944,33 +2059,38 @@ var Chunk = class {
 				body.next = this.next;
 				this.next = body;
 			}
-			this.placeholderRender = this.placeholderBody = null;
+			this.placeholder = null;
 		}
 	}
 	consume() {
 		let cur = this;
-		let needsWalk = cur.needsWalk;
-		if (cur.next && !cur.async) {
-			let html = "";
-			let effects = "";
-			let scripts = "";
-			let lastEffect = "";
-			do {
-				cur.flushPlaceholder();
-				needsWalk ||= cur.needsWalk;
-				html += cur.html;
+		let html = "";
+		let effects = "";
+		let scripts = "";
+		let lastEffect = "";
+		let needsWalk = false;
+		let deferredReady;
+		while (cur.next && !cur.async) {
+			cur.flushPlaceholder();
+			needsWalk ||= cur.needsWalk;
+			html += cur.html;
+			if (cur.serializeState.readyId) deferredReady = push(deferredReady, cur);
+			else {
 				effects = concatEffects(effects, cur.effects);
 				scripts = concatScripts(scripts, cur.scripts);
 				lastEffect = cur.lastEffect || lastEffect;
-				cur.consumed = true;
-				cur = cur.next;
-			} while (cur.next && !cur.async);
-			cur.needsWalk = needsWalk;
-			cur.html = html + cur.html;
-			cur.effects = concatEffects(effects, cur.effects);
-			cur.scripts = concatScripts(scripts, cur.scripts);
-			cur.lastEffect = lastEffect;
+			}
+			deferredReady = concat(deferredReady, cur.takeDeferredReady());
+			cur.consumed = true;
+			cur = cur.next;
 		}
+		cur.deferOwnReady();
+		cur.deferredReady = concat(deferredReady, cur.deferredReady);
+		cur.needsWalk ||= needsWalk;
+		cur.html = html + cur.html;
+		cur.effects = concatEffects(effects, cur.effects);
+		cur.scripts = concatScripts(scripts, cur.scripts);
+		cur.lastEffect ||= lastEffect;
 		return cur;
 	}
 	render(content, val) {
@@ -1986,28 +2106,57 @@ var Chunk = class {
 			$chunk = prev;
 		}
 	}
+	flushReadyScripts(reservations) {
+		const { boundary, serializeState } = this;
+		const { readyId } = serializeState;
+		let scripts = "";
+		forEach(this.takeDeferredReady(), (chunk) => {
+			scripts = concatScripts(scripts, chunk.flushReadyScripts(reservations));
+		});
+		if (readyId && !this.async) {
+			const { state } = boundary;
+			flushSerializer(boundary, serializeState);
+			const deps = state.serializer.takeChannelDeps();
+			const { effects } = this;
+			const { resumes } = serializeState;
+			const chunkScripts = this.scripts;
+			serializeState.resumes = "";
+			this.effects = this.scripts = "";
+			this.lastEffect = "";
+			if (resumes || effects) {
+				state.needsMainRuntime = true;
+				const batch = concatSequence(depsMarker(deps), concatSequence(resumes, effects && `"${effects}"`));
+				if (reservations) {
+					const gate = state.readyGate++;
+					reservations.push(state.writeReady(readyId, gate + ""));
+					scripts = concatScripts(scripts, "(b=>b.splice(b.indexOf(" + gate + "),1," + batch + "))(" + state.readyAccess(toObjectKey(readyId)) + ")");
+				} else scripts = concatScripts(scripts, state.writeReady(readyId, batch));
+			}
+			scripts = concatScripts(scripts, chunkScripts);
+		}
+		return scripts;
+	}
 	flushScript() {
-		const { boundary, effects } = this;
+		const { boundary } = this;
 		const { state } = boundary;
 		const { $global, runtimePrefix, nonceAttr } = state;
-		let { html, scripts } = this;
 		let needsWalk = state.walkOnNextFlush;
 		if (needsWalk) state.walkOnNextFlush = false;
+		let readyResumeScripts = this.flushReadyScripts();
+		for (let channel; channel = state.serializer.pendingReadyChannel();) {
+			const resumes = state.serializer.stringifyScopes([], 0, boundary, channel);
+			const deps = state.serializer.takeChannelDeps();
+			state.needsMainRuntime = true;
+			readyResumeScripts = concatScripts(readyResumeScripts, state.writeReady(channel.readyId, concatSequence(depsMarker(deps), resumes)));
+		}
+		if (readyResumeScripts) needsWalk = true;
+		const { effects } = this;
+		let { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime) {
 			state.hasMainRuntime = true;
 			scripts = concatScripts(scripts, WALKER_RUNTIME_CODE + "(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")");
 		}
-		if (state.ensureReady && state.hasMainRuntime) {
-			let first = true;
-			for (const id in state.ensureReady) {
-				if (state.ensureReady[id]) {
-					state.ensureReady[id] = 0;
-					if (first) scripts = concatScripts(scripts, "(" + runtimePrefix + ".b={})" + toAccess(toObjectKey(id)) + "=1");
-					else scripts = concatScripts(scripts, runtimePrefix + ".b" + toAccess(toObjectKey(id)) + "=1");
-				}
-				first = false;
-			}
-		}
+		scripts = concatScripts(scripts, readyResumeScripts);
 		if (effects) {
 			needsWalk = true;
 			state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\"";
@@ -2026,6 +2175,7 @@ var Chunk = class {
 			}
 			for (const reorderedChunk of state.writeReorders) {
 				const { reorderId } = reorderedChunk;
+				const readyReservations = [];
 				let reorderHTML = "";
 				let reorderEffects = "";
 				let reorderScripts = "";
@@ -2033,11 +2183,13 @@ var Chunk = class {
 				reorderedChunk.reorderId = null;
 				for (;;) {
 					cur.flushPlaceholder();
+					cur.deferOwnReady();
 					const { next } = cur;
+					const readyResumeScripts = cur.flushReadyScripts(readyReservations);
 					cur.consumed = true;
 					reorderHTML += cur.html;
 					reorderEffects = concatEffects(reorderEffects, cur.effects);
-					reorderScripts = concatScripts(reorderScripts, cur.scripts);
+					reorderScripts = concatScripts(reorderScripts, concatScripts(readyResumeScripts, cur.scripts));
 					if (cur.async) {
 						reorderHTML += state.mark("#", cur.reorderId = state.nextReorderId());
 						cur.html = cur.effects = cur.scripts = cur.lastEffect = "";
@@ -2053,6 +2205,7 @@ var Chunk = class {
 					}
 					reorderScripts = concatScripts(reorderScripts, "_.push(\"" + reorderEffects + "\")");
 				}
+				for (const reservation of readyReservations) scripts = concatScripts(scripts, reservation);
 				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}");
 				html += "<t " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
@@ -2086,35 +2239,60 @@ var Chunk = class {
 		return html;
 	}
 };
-function flushSerializer(boundary) {
+function flushSerializer(boundary, serializeState) {
 	const { state } = boundary;
-	const { writeScopes, serializer } = state;
-	const { flushed } = serializer;
-	if (writeScopes || flushed) {
-		let shouldSerialize = false;
-		const serializeData = [];
-		let { lastSerializedScopeId } = state;
-		if (!state.hasGlobals) {
+	const { serializer } = state;
+	const pending = serializer.pending(serializeState);
+	if (serializeState.flushScopes || pending) {
+		const { writeScopes, passiveScopes } = serializeState;
+		const isBlockingState = serializeState !== state;
+		const flushes = [];
+		let globals = 0;
+		if (passiveScopes) for (const key in passiveScopes) {
+			const props = writeScopes[key];
+			if (props) {
+				writeScopes[key] = Object.assign(passiveScopes[key], props);
+				delete passiveScopes[key];
+			}
+		}
+		if (!isBlockingState && !state.hasGlobals) {
 			state.hasGlobals = true;
-			serializeData.push(getFilteredGlobals(state.$global));
-			shouldSerialize = true;
+			globals = getFilteredGlobals(state.$global);
 		}
 		for (const key in writeScopes) {
-			const scope = writeScopes[key];
-			if (scopeHasReference(scope) || Object.getOwnPropertyNames(scope).length) {
-				const scopeId = getScopeId(scope);
-				const scopeIdDelta = scopeId - lastSerializedScopeId;
-				lastSerializedScopeId = scopeId + 1;
-				if (scopeIdDelta) serializeData.push(scopeIdDelta);
-				serializeData.push(scope);
-				shouldSerialize = true;
-			}
+			const scopeId = +key;
+			const props = writeScopes[scopeId];
+			if (Object.getOwnPropertyNames(props).length) flushes.push([
+				scopeId,
+				state.scopes.get(scopeId),
+				props
+			]);
+		}
+		if (flushes.length || globals || pending) {
+			if (isBlockingState && !state.hasGlobals) flushSerializerGlobals(boundary);
+			serializeState.resumes = concatSequence(serializeState.resumes, serializer.stringifyScopes(flushes, globals, boundary, serializeState));
 		}
-		if (shouldSerialize) state.resumes = concatSequence(state.resumes, serializer.stringify(serializeData, boundary));
-		state.lastSerializedScopeId = lastSerializedScopeId;
-		state.writeScopes = null;
-		if (flushed) state.walkOnNextFlush = true;
+		serializeState.writeScopes = {};
+		serializeState.flushScopes = false;
+		if (pending) state.walkOnNextFlush = true;
+	}
+}
+function flushSerializerGlobals(boundary) {
+	const { state } = boundary;
+	const globals = getFilteredGlobals(state.$global);
+	if (globals) {
+		state.hasGlobals = true;
+		state.needsMainRuntime = true;
+		state.resumes = concatSequence(state.resumes, state.serializer.stringifyScopes([], globals, boundary));
+	}
+}
+function depsMarker(deps) {
+	let marker = "";
+	if (deps) {
+		for (const dep of deps) marker += (marker ? "," : "[") + quote(dep, 0);
+		marker += "]";
 	}
+	return marker;
 }
 function _trailers(html) {
 	$chunk.boundary.state.trailerHTML += html;
@@ -2166,8 +2344,12 @@ function getFilteredGlobals($global) {
 	return filtered;
 }
 function _subscribe(subscribers, scope) {
-	if (subscribers) $chunk.boundary.state.serializer.writeCall(scope, subscribers, "add");
-	return referenceScope(scope);
+	if (subscribers) {
+		const { serializer } = $chunk.boundary.state;
+		if (!$chunk.serializeState.readyId && !serializer.written(subscribers)) subscribers.add(scope);
+		else serializer.writeCall(scope, subscribers, "add", $chunk.serializeState);
+	}
+	return scope;
 }
 //#endregion
 //#region src/html/attrs.ts
@@ -2350,14 +2532,6 @@ function normalizeBoolAttrValue(value) {
 	if (value != null && value !== false) return true;
 }
 //#endregion
-//#region src/common/compat-meta.ts
-const RENDERER_REGISTER_ID = "$compat_renderer";
-const SET_SCOPE_REGISTER_ID = "$compat_setScope";
-const RENDER_BODY_ID = "$compat_renderBody";
-//#endregion
-//#region src/common/meta.ts
-const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
-//#endregion
 //#region src/html/dynamic-tag.ts
 const voidElementsReg = /^(?:area|b(?:ase|r)|col|embed|hr|i(?:mg|nput)|link|meta|param|source|track|wbr)$/;
 let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, serializeReason) => {
@@ -2389,7 +2563,7 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 		const childScope = getScopeById(branchId);
 		const needsScript = childScope && (childScope[`EventAttributes:#${renderer}/0`] || childScope[`ControlledHandler:#${renderer}/0`]);
 		if (needsScript) {
-			childScope["#Renderer"] = renderer;
+			writeScope(branchId, { ["#Renderer"]: renderer });
 			_script(branchId, DYNAMIC_TAG_SCRIPT_REGISTER_ID);
 		}
 		if (shouldResume || needsScript) _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
@@ -2431,115 +2605,6 @@ const patchDynamicTag = ((originalDynamicTag) => (patch) => {
 	};
 })(_dynamic_tag);
 //#endregion
-//#region src/html/compat.ts
-const K_TAGS_API_STATE = Symbol();
-const COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap();
-const compat = {
-	$global,
-	fork: _await,
-	write: _html,
-	writeScript,
-	nextScopeId: _scope_id,
-	peekNextScopeId: _peek_scope_id,
-	isInResumedBranch,
-	ensureState($global) {
-		let state = $global[K_TAGS_API_STATE] ||= getChunk()?.boundary.state;
-		if (!state) {
-			$global.runtimeId ||= "M";
-			$global.renderId ||= $global.componentIdPrefix || $global.widgetIdPrefix || "_";
-			$global[K_TAGS_API_STATE] = state = new State($global);
-		}
-		return state;
-	},
-	isTagsAPI(fn) {
-		return !!fn["id"];
-	},
-	onFlush(fn) {
-		const { flushHTML } = Chunk.prototype;
-		Chunk.prototype.flushHTML = function() {
-			fn(this);
-			return flushHTML.call(this);
-		};
-	},
-	patchDynamicTag,
-	writeSetScopeForComponent(branchId, m5c, m5i) {
-		writeScope(branchId, {
-			m5c,
-			m5i
-		});
-		_script(branchId, SET_SCOPE_REGISTER_ID);
-	},
-	toJSON(state) {
-		return function toJSON() {
-			let compatRegistered = COMPAT_REGISTRY.get(this);
-			if (!compatRegistered) {
-				const registered = getRegistered(this);
-				if (registered) {
-					const scopeId = registered.scope ? getScopeId(registered.scope) : void 0;
-					if (scopeId !== void 0) writeScopeToState(state, scopeId, {});
-					COMPAT_REGISTRY.set(this, compatRegistered = [registered.id, scopeId]);
-				}
-			}
-			return compatRegistered;
-		};
-	},
-	flushScript($global) {
-		const boundary = new Boundary(this.ensureState($global));
-		if (boundary.flush() === 1) throw new Error("Cannot serialize promise across tags/class compat layer.");
-		return new Chunk(boundary, null, null).flushScript().scripts;
-	},
-	render(renderer, willRerender, classAPIOut, component, input, completeChunks) {
-		const boundary = new Boundary(this.ensureState(classAPIOut.global));
-		let head = new Chunk(boundary, null, null);
-		let normalizedInput = input;
-		if ("renderBody" in input) {
-			normalizedInput = {};
-			for (const key in input) normalizedInput[key === "renderBody" ? "content" : key] = input[key];
-		}
-		head.render(() => {
-			if (willRerender) {
-				const scopeId = _peek_scope_id();
-				writeScope(scopeId, { m5c: component.id });
-				_script(scopeId, SET_SCOPE_REGISTER_ID);
-			}
-			_set_serialize_reason(willRerender ? 1 : 0);
-			try {
-				renderer(normalizedInput);
-			} finally {
-				_set_serialize_reason(void 0);
-			}
-			const asyncOut = classAPIOut.beginAsync({
-				last: true,
-				timeout: -1
-			});
-			classAPIOut.onLast((next) => {
-				(boundary.onNext = () => {
-					if (boundary.signal.aborted) {
-						asyncOut.error(boundary.signal.reason);
-						boundary.onNext = NOOP$1;
-					} else if (!boundary.count) {
-						boundary.onNext = NOOP$1;
-						head = head.consume();
-						asyncOut.write(head.html);
-						asyncOut.script(head.scripts);
-						asyncOut.end();
-						head.html = head.scripts = "";
-						completeChunks.push(head);
-						next();
-					}
-				})();
-			});
-		});
-	},
-	registerRenderer(renderer, id) {
-		return register(RENDERER_REGISTER_ID, renderer, register(id, () => {}));
-	},
-	registerRenderBody(fn) {
-		register(RENDER_BODY_ID, fn);
-	}
-};
-function NOOP$1() {}
-//#endregion
 //#region src/html/template.ts
 const _template = (templateId, renderer, page) => {
 	renderer.render = render;
@@ -2566,9 +2631,9 @@ function render(input = {}) {
 		renderId: getDefaultRenderId(this)
 	};
 	const state = new State($global);
-	const head = new Chunk(new Boundary(state, $global.signal), null, null);
-	if (this["embed"]) (state.ensureReady ||= {})[this["id"]] = 1;
-	head.render(this, input);
+	const head = new Chunk(new Boundary(state, $global.signal), null, null, state);
+	if (this["embed"]) head.render(() => writeWaitReady(this["id"], this, input));
+	else head.render(this, input);
 	return new ServerRendered(head);
 }
 function getDefaultRenderId(template) {
@@ -2704,7 +2769,7 @@ var ServerRendered = class {
 			(boundary.onNext = () => {
 				switch (!boundary.count && boundary.flush()) {
 					case 2:
-						boundary.onNext = NOOP;
+						boundary.onNext = NOOP$1;
 						reject(boundary.signal.reason);
 						break;
 					case 0:
@@ -2727,7 +2792,7 @@ var ServerRendered = class {
 			const status = boundary.flush();
 			if (status === 2) {
 				if (!tick) offTick(onNext);
-				boundary.onNext = NOOP;
+				boundary.onNext = NOOP$1;
 				onAbort(boundary.signal.reason);
 			} else if (write || status === 0) {
 				const html = (head = head.consume()).flushHTML();
@@ -2756,6 +2821,208 @@ var ServerRendered = class {
 		return head.consume().flushHTML();
 	}
 };
+function NOOP$1() {}
+//#endregion
+//#region src/html/assets.ts
+const kAssets = Symbol();
+const kBlockIndex = Symbol();
+const kDeferIndex = Symbol();
+const { hasOwnProperty } = {};
+let assetFlush;
+function withLoadAssets(renderer, assetId, triggers) {
+	return Object.assign((input) => {
+		const g = $global();
+		addAsset(g, assetId, triggers);
+		_html(flush(g, ""));
+		return writeWaitReady(assetId, renderer, input);
+	}, renderer);
+}
+function withPageAssets(template, runtime, assetId, runtimeId) {
+	assetFlush = runtime;
+	return Object.assign((input) => {
+		const g = $global();
+		if (runtimeId) {
+			if (g.runtimeId !== "M" && g.runtimeId !== runtimeId) throw new Error(`$global.runtimeId ("${g.runtimeId}") conflicts with the runtimeId this entry was compiled with ("${runtimeId}").`);
+			g.runtimeId = runtimeId;
+		}
+		addAsset(g, assetId);
+		if (g.__flush__) {
+			_html(flush(g, ""));
+			return writeWaitReady(assetId, template, input);
+		}
+		g.__flush__ = flush;
+		return template(input);
+	}, template);
+}
+function _flush_head() {
+	const g = $global();
+	return g[kAssets] ? flush(g, "") : "";
+}
+function flush(g, html) {
+	let result = "";
+	const assets = g[kAssets];
+	const { length } = assets;
+	let bi = g[kBlockIndex];
+	let di = g[kDeferIndex];
+	for (; bi < length; bi++) result += assetFlush(g, "block", assets[bi].id);
+	for (; di < length; di++) {
+		const { id, triggers } = assets[di];
+		const deferHTML = assetFlush(g, "defer", id);
+		if (triggers) {
+			if (deferHTML) writeTriggerScript(deferHTML, triggers);
+		} else result += deferHTML;
+	}
+	g[kBlockIndex] = bi;
+	g[kDeferIndex] = di;
+	return result + html;
+}
+function addAsset(g, id, triggers) {
+	const assets = g[kAssets];
+	if (!assets) {
+		g[kAssets] = [{
+			id,
+			triggers
+		}];
+		g[kBlockIndex] = g[kDeferIndex] = 0;
+	} else if (!assets.find((a) => a.id === id)) assets.push({
+		id,
+		triggers
+	});
+}
+function writeTriggerScript(html, triggers) {
+	const htmlStr = _escape_script(JSON.stringify(html));
+	const exprs = triggers.map((trigger) => {
+		const options = trigger.options && toObjectExpression(trigger.options);
+		switch (trigger.type) {
+			case "visible": return `(e=>e&&new IntersectionObserver((e,i)=>e.some(e=>e.isIntersecting)&&i.disconnect()+l()${options ? `,${options}` : ""}).observe(e))(document.querySelector(${JSON.stringify(trigger.selector)})||l())`;
+			case "idle": return `(self.requestIdleCallback||l)(l${options ? `,${options}` : ""})`;
+			case "media": return `(m=>m.matches?l():m.addEventListener("change",l,{once:1}))(matchMedia(${JSON.stringify(trigger.selector)}))`;
+			default: return `(e=>e?.addEventListener("${trigger.type.slice(3)}",l,{once:1}))(document.querySelector(${JSON.stringify(trigger.selector)})||l())`;
+		}
+	});
+	writeScript(`((p,h,d,l=$=>d||p.insertAdjacentHTML("afterend",d=h))=>${exprs.length > 1 ? `{${exprs.join(";")}}` : exprs[0]})(document.currentScript,${htmlStr})`);
+}
+function toObjectExpression(options) {
+	let result = "{";
+	let sep = "";
+	for (const key in options) if (hasOwnProperty.call(options, key)) {
+		result += sep + toObjectKey(key) + ":" + JSON.stringify(options[key]);
+		sep = ",";
+	}
+	return result + "}";
+}
+//#endregion
+//#region src/common/compat-meta.ts
+const SET_SCOPE_REGISTER_ID = "$compat_setScope";
+const RENDER_BODY_ID = "$compat_renderBody";
+//#endregion
+//#region src/html/compat.ts
+const K_TAGS_API_STATE = Symbol();
+const COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap();
+const compat = {
+	$global,
+	fork: _await,
+	write: _html,
+	writeScript,
+	nextScopeId: _scope_id,
+	peekNextScopeId: _peek_scope_id,
+	isInResumedBranch,
+	ensureState($global) {
+		let state = $global[K_TAGS_API_STATE] ||= getChunk()?.boundary.state;
+		if (!state) {
+			$global.runtimeId ||= "M";
+			$global.renderId ||= $global.componentIdPrefix || $global.widgetIdPrefix || "_";
+			$global[K_TAGS_API_STATE] = state = new State($global);
+		}
+		return state;
+	},
+	isTagsAPI(fn) {
+		return !!fn["id"];
+	},
+	onFlush(fn) {
+		const { flushHTML } = Chunk.prototype;
+		Chunk.prototype.flushHTML = function() {
+			fn(this);
+			return flushHTML.call(this);
+		};
+	},
+	patchDynamicTag,
+	writeSetScopeForComponent(branchId, m5c, m5i) {
+		writeScope(branchId, {
+			m5c,
+			m5i
+		});
+		_script(branchId, SET_SCOPE_REGISTER_ID);
+	},
+	toJSON() {
+		return function toJSON() {
+			let compatRegistered = COMPAT_REGISTRY.get(this);
+			if (!compatRegistered) {
+				const registered = getRegistered(this);
+				if (registered) {
+					const scopeId = registered.scope ? getScopeId(registered.scope) : void 0;
+					if (scopeId !== void 0) _script(scopeId, SET_SCOPE_REGISTER_ID);
+					COMPAT_REGISTRY.set(this, compatRegistered = [registered.id, scopeId]);
+				}
+			}
+			return compatRegistered;
+		};
+	},
+	flushScript($global) {
+		const state = this.ensureState($global);
+		const boundary = new Boundary(state);
+		if (boundary.flush() === 1) throw new Error("Cannot serialize promise across tags/class compat layer.");
+		return new Chunk(boundary, null, null, state).flushScript().scripts;
+	},
+	render(renderer, willRerender, classAPIOut, component, input, completeChunks) {
+		const state = this.ensureState(classAPIOut.global);
+		const boundary = new Boundary(state);
+		let head = new Chunk(boundary, null, null, state);
+		let normalizedInput = input;
+		if ("renderBody" in input) {
+			normalizedInput = {};
+			for (const key in input) normalizedInput[key === "renderBody" ? "content" : key] = input[key];
+		}
+		head.render(() => {
+			if (willRerender) {
+				const scopeId = _peek_scope_id();
+				writeScope(scopeId, { m5c: component.id });
+				_script(scopeId, SET_SCOPE_REGISTER_ID);
+			}
+			_set_serialize_reason(willRerender ? 1 : 0);
+			try {
+				renderer(normalizedInput);
+			} finally {
+				_set_serialize_reason(void 0);
+			}
+			const asyncOut = classAPIOut.beginAsync({
+				last: true,
+				timeout: -1
+			});
+			classAPIOut.onLast((next) => {
+				(boundary.onNext = () => {
+					if (boundary.signal.aborted) {
+						asyncOut.error(boundary.signal.reason);
+						boundary.onNext = NOOP;
+					} else if (!boundary.count) {
+						boundary.onNext = NOOP;
+						head = head.consume();
+						asyncOut.write(head.html);
+						asyncOut.script(head.scripts);
+						asyncOut.end();
+						head.html = head.scripts = "";
+						completeChunks.push(head);
+						next();
+					}
+				})();
+			});
+		});
+	},
+	register,
+	registerRenderBody(fn) {
+		register(RENDER_BODY_ID, fn);
+	}
+};
 function NOOP() {}
 //#endregion
 exports.$global = $global;
@@ -2794,6 +3061,7 @@ exports._escape_comment = _escape_comment;
 exports._escape_script = _escape_script;
 exports._escape_style = _escape_style;
 exports._existing_scope = _existing_scope;
+exports._flush_head = _flush_head;
 exports._for_in = _for_in;
 exports._for_of = _for_of;
 exports._for_to = _for_to;
@@ -2836,3 +3104,5 @@ exports.forOfBy = forOfBy;
 exports.forStepBy = forStepBy;
 exports.forTo = forTo;
 exports.forUntil = forUntil;
+exports.withLoadAssets = withLoadAssets;
+exports.withPageAssets = withPageAssets;