marko 6.1.24 → 6.2.1

package/dist/common/helpers.d.ts

@@ -4,6 +4,7 @@ export declare function getWrongAttrSuggestion(name: string): string | undefined
 export declare function _call<T>(fn: (v: T) => unknown, v: T): T;
 export declare function stringifyClassObject(name: string, value: unknown): string;
 export declare function stringifyStyleObject(name: string, value: unknown): string;
+export declare function escapeStyleValue(str: string): string;
 export declare const toDelimitedString: (val: unknown, delimiter: string, stringify: (n: string, v: unknown) => string | undefined) => string;
 export declare function isEventHandler(name: string): name is `on${string}`;
 export declare function getEventHandlerName(name: `on${string}`): string;

package/dist/debug/dom.js

@@ -71,6 +71,14 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "";
+	const result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (const c of result) if (c === "(") closers = ")" + closers;
+	else if (c === "[") closers = "]" + closers;
+	else if (c === closers[0]) closers = closers.slice(1);
+	return result + closers;
+}
 const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
 	let str = "";
 	let sep = "";
@@ -225,6 +233,10 @@ const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
 function toArray(opt) {
 	return opt ? Array.isArray(opt) ? opt : [opt] : [];
 }
+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;
 }
@@ -770,12 +782,14 @@ function init(runtimeId = "M") {
 						if (branch["#AwaitCounter"] = render.p?.[branchId]) branch["#AwaitCounter"].m = render.m;
 						if (singleNode) {
 							while (startVisit.previousSibling && ~visits.indexOf(startVisit = startVisit.previousSibling));
+							branch["_"] ??= visitScope;
 							branch["#EndNode"] = branch["#StartNode"] = startVisit;
 							if (visitType === "'") branch[getDebugKey(0, startVisit)] = startVisit;
 						} else {
 							curBranchScopes = push(curBranchScopes, branch);
 							if (accessor) {
 								visitScope[accessor] = curBranchScopes;
+								forEach(curBranchScopes, (scope) => scope["_"] ??= visitScope);
 								curBranchScopes = branchScopesStack.pop();
 							}
 							startVisit = branchStarts.pop();
@@ -1175,6 +1189,20 @@ function _attr_style_items(element, items) {
 function _attr_style_item(element, name, value) {
 	element.style.setProperty(name, _to_text(value));
 }
+function _style_shell(scope, nodeAccessor) {
+	const element = scope[nodeAccessor];
+	const id = _id(scope);
+	_attr_nonce(scope, nodeAccessor);
+	element.className = id;
+	_text_content(element, "." + id + "~*{}");
+}
+function _style_rule_item(element, name, value) {
+	const text = element.textContent;
+	const decl = name + ":" + escapeStyleValue(_to_text(value)) + ";";
+	let start = text.indexOf("{" + name + ":");
+	if (!~start) start = text.indexOf(";" + name + ":");
+	_text_content(element, ~start ? text.slice(0, ++start) + decl + text.slice(text.indexOf(";", start) + 1) : text.slice(0, -1) + decl + "}");
+}
 function _attr_nonce(scope, nodeAccessor) {
 	_attr(scope[nodeAccessor], "nonce", scope["$global"].cspNonce);
 }
@@ -1546,6 +1574,34 @@ function _if(nodeAccessor, ...branchesArgs) {
 		if (newBranch !== (scope[branchAccessor] ?? (scope["BranchScopes:" + nodeAccessor] && 0))) setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
+function _show(nodeAccessor, startNodeAccessor) {
+	const rangeAccessor = "BranchScopes:" + nodeAccessor;
+	enableBranches();
+	return (scope, display) => {
+		const referenceNode = scope[nodeAccessor];
+		const onlyChild = referenceNode.nodeType === 1;
+		const parentNode = onlyChild ? referenceNode : referenceNode.parentNode;
+		let range = scope[rangeAccessor];
+		if (!range) {
+			range = scope[rangeAccessor] = {};
+			range["#StartNode"] = onlyChild ? parentNode.firstChild : scope[startNodeAccessor];
+			range["#EndNode"] = onlyChild ? parentNode.lastChild : referenceNode.previousSibling;
+		}
+		let startNode = range["#StartNode"];
+		if (range["#Id"] && startNode === range["#EndNode"] && startNode.tagName === "T") {
+			const wrapper = startNode;
+			if (!wrapper.firstChild) wrapper.appendChild(new Text());
+			range = scope[rangeAccessor] = {};
+			range["#StartNode"] = startNode = wrapper.firstChild;
+			range["#EndNode"] = wrapper.lastChild;
+			wrapper.replaceWith(...wrapper.childNodes);
+		}
+		const inDom = startNode.parentNode === parentNode;
+		if (display) {
+			if (!inDom) insertBranchBefore(range, parentNode, onlyChild ? null : referenceNode);
+		} else if (inDom) tempDetachBranch(range);
+	};
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -2017,8 +2073,8 @@ function mount(input = {}, reference, position) {
 			renderId: "_",
 			...$global
 		};
-		if (!String($global.runtimeId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must be a valid JavaScript identifier.`);
-		if (!String($global.renderId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must be a valid JavaScript identifier.`);
+		if (!String($global.runtimeId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
+		if (!String($global.renderId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
 	} else $global = {
 		runtimeId: "M",
 		renderId: "_"
@@ -2253,6 +2309,9 @@ exports._resume_dynamic_tag = _resume_dynamic_tag;
 exports._return = _return;
 exports._return_change = _return_change;
 exports._script = _script;
+exports._show = _show;
+exports._style_rule_item = _style_rule_item;
+exports._style_shell = _style_shell;
 exports._template = _template;
 exports._text = _text;
 exports._text_content = _text_content;

package/dist/debug/dom.mjs

@@ -69,6 +69,14 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "";
+	const result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (const c of result) if (c === "(") closers = ")" + closers;
+	else if (c === "[") closers = "]" + closers;
+	else if (c === closers[0]) closers = closers.slice(1);
+	return result + closers;
+}
 const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
 	let str = "";
 	let sep = "";
@@ -223,6 +231,10 @@ const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
 function toArray(opt) {
 	return opt ? Array.isArray(opt) ? opt : [opt] : [];
 }
+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;
 }
@@ -768,12 +780,14 @@ function init(runtimeId = "M") {
 						if (branch["#AwaitCounter"] = render.p?.[branchId]) branch["#AwaitCounter"].m = render.m;
 						if (singleNode) {
 							while (startVisit.previousSibling && ~visits.indexOf(startVisit = startVisit.previousSibling));
+							branch["_"] ??= visitScope;
 							branch["#EndNode"] = branch["#StartNode"] = startVisit;
 							if (visitType === "'") branch[getDebugKey(0, startVisit)] = startVisit;
 						} else {
 							curBranchScopes = push(curBranchScopes, branch);
 							if (accessor) {
 								visitScope[accessor] = curBranchScopes;
+								forEach(curBranchScopes, (scope) => scope["_"] ??= visitScope);
 								curBranchScopes = branchScopesStack.pop();
 							}
 							startVisit = branchStarts.pop();
@@ -1173,6 +1187,20 @@ function _attr_style_items(element, items) {
 function _attr_style_item(element, name, value) {
 	element.style.setProperty(name, _to_text(value));
 }
+function _style_shell(scope, nodeAccessor) {
+	const element = scope[nodeAccessor];
+	const id = _id(scope);
+	_attr_nonce(scope, nodeAccessor);
+	element.className = id;
+	_text_content(element, "." + id + "~*{}");
+}
+function _style_rule_item(element, name, value) {
+	const text = element.textContent;
+	const decl = name + ":" + escapeStyleValue(_to_text(value)) + ";";
+	let start = text.indexOf("{" + name + ":");
+	if (!~start) start = text.indexOf(";" + name + ":");
+	_text_content(element, ~start ? text.slice(0, ++start) + decl + text.slice(text.indexOf(";", start) + 1) : text.slice(0, -1) + decl + "}");
+}
 function _attr_nonce(scope, nodeAccessor) {
 	_attr(scope[nodeAccessor], "nonce", scope["$global"].cspNonce);
 }
@@ -1544,6 +1572,34 @@ function _if(nodeAccessor, ...branchesArgs) {
 		if (newBranch !== (scope[branchAccessor] ?? (scope["BranchScopes:" + nodeAccessor] && 0))) setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
+function _show(nodeAccessor, startNodeAccessor) {
+	const rangeAccessor = "BranchScopes:" + nodeAccessor;
+	enableBranches();
+	return (scope, display) => {
+		const referenceNode = scope[nodeAccessor];
+		const onlyChild = referenceNode.nodeType === 1;
+		const parentNode = onlyChild ? referenceNode : referenceNode.parentNode;
+		let range = scope[rangeAccessor];
+		if (!range) {
+			range = scope[rangeAccessor] = {};
+			range["#StartNode"] = onlyChild ? parentNode.firstChild : scope[startNodeAccessor];
+			range["#EndNode"] = onlyChild ? parentNode.lastChild : referenceNode.previousSibling;
+		}
+		let startNode = range["#StartNode"];
+		if (range["#Id"] && startNode === range["#EndNode"] && startNode.tagName === "T") {
+			const wrapper = startNode;
+			if (!wrapper.firstChild) wrapper.appendChild(new Text());
+			range = scope[rangeAccessor] = {};
+			range["#StartNode"] = startNode = wrapper.firstChild;
+			range["#EndNode"] = wrapper.lastChild;
+			wrapper.replaceWith(...wrapper.childNodes);
+		}
+		const inDom = startNode.parentNode === parentNode;
+		if (display) {
+			if (!inDom) insertBranchBefore(range, parentNode, onlyChild ? null : referenceNode);
+		} else if (inDom) tempDetachBranch(range);
+	};
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -2015,8 +2071,8 @@ function mount(input = {}, reference, position) {
 			renderId: "_",
 			...$global
 		};
-		if (!String($global.runtimeId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must be a valid JavaScript identifier.`);
-		if (!String($global.renderId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must be a valid JavaScript identifier.`);
+		if (!String($global.runtimeId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
+		if (!String($global.renderId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
 	} else $global = {
 		runtimeId: "M",
 		renderId: "_"
@@ -2162,4 +2218,4 @@ function getSelectorOrResolve(selector, resolve) {
 	return document.querySelector(selector) || (console.warn(`A lazy load trigger could not find an element matching "${selector}". The module was loaded immediately.`), resolve());
 }
 //#endregion
-export { $signal, $signalReset, _assert_hoist, _assert_init, _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_details_or_dialog_open_default as _attr_details_open_default, _attr_details_or_dialog_open_default as _attr_dialog_open_default, _attr_details_or_dialog_open_script as _attr_details_open_script, _attr_details_or_dialog_open_script as _attr_dialog_open_script, _attr_input_checked, _attr_input_checkedValue, _attr_input_checkedValue_default, _attr_input_checkedValue_script, _attr_input_checked_default, _attr_input_checked_script, _attr_input_value, _attr_input_value as _attr_textarea_value, _attr_input_value_default, _attr_input_value_default as _attr_textarea_value_default, _attr_input_value_script, _attr_input_value_script as _attr_textarea_value_script, _attr_nonce, _attr_select_value, _attr_select_value_default, _attr_select_value_script, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _await_content, _await_promise, _call, _child_setup, _closure, _closure_get, _const, _content, _content_closures, _content_resume, _dynamic_tag, _dynamic_tag_content, _el, _el_read, _enable_catch, _for_closure, _for_in, _for_of, _for_selector, _for_to, _for_until, _hoist, _hoist_resume, _html, _id, _if, _if_closure, _let, _let_change, _lifecycle, _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_race_trigger, _load_setup, _load_signal, _load_template, _load_visible_trigger, _on, _or, _resume, _resume_dynamic_tag, _return, _return_change, _script, _template, _text, _text_content, _to_text, _try, _var, _var_change, _var_resume, attrTag, attrTags, compat, forIn, forOf, forTo, forUntil, init, initEmbedded, ready, run };
+export { $signal, $signalReset, _assert_hoist, _assert_init, _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_details_or_dialog_open_default as _attr_details_open_default, _attr_details_or_dialog_open_default as _attr_dialog_open_default, _attr_details_or_dialog_open_script as _attr_details_open_script, _attr_details_or_dialog_open_script as _attr_dialog_open_script, _attr_input_checked, _attr_input_checkedValue, _attr_input_checkedValue_default, _attr_input_checkedValue_script, _attr_input_checked_default, _attr_input_checked_script, _attr_input_value, _attr_input_value as _attr_textarea_value, _attr_input_value_default, _attr_input_value_default as _attr_textarea_value_default, _attr_input_value_script, _attr_input_value_script as _attr_textarea_value_script, _attr_nonce, _attr_select_value, _attr_select_value_default, _attr_select_value_script, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _await_content, _await_promise, _call, _child_setup, _closure, _closure_get, _const, _content, _content_closures, _content_resume, _dynamic_tag, _dynamic_tag_content, _el, _el_read, _enable_catch, _for_closure, _for_in, _for_of, _for_selector, _for_to, _for_until, _hoist, _hoist_resume, _html, _id, _if, _if_closure, _let, _let_change, _lifecycle, _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_race_trigger, _load_setup, _load_signal, _load_template, _load_visible_trigger, _on, _or, _resume, _resume_dynamic_tag, _return, _return_change, _script, _show, _style_rule_item, _style_shell, _template, _text, _text_content, _to_text, _try, _var, _var_change, _var_resume, attrTag, attrTags, compat, forIn, forOf, forTo, forUntil, init, initEmbedded, ready, run };

package/dist/debug/html.js

@@ -67,6 +67,14 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "";
+	const result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (const c of result) if (c === "(") closers = ")" + closers;
+	else if (c === "[") closers = "]" + closers;
+	else if (c === closers[0]) closers = closers.slice(1);
+	return result + closers;
+}
 const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
 	let str = "";
 	let sep = "";
@@ -227,6 +235,10 @@ function _escape_style(val) {
 	assertValidTextValue(val);
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
+function _escape_style_value(val) {
+	assertValidTextValue(val);
+	return val || val === 0 ? escapeStyleValue(val + "") : "";
+}
 const unsafeCommentReg = />/g;
 const escapeCommentStr = (str) => unsafeCommentReg.test(str) ? str.replace(unsafeCommentReg, "&gt;") : str;
 function _escape_comment(val) {
@@ -1549,9 +1561,6 @@ const REORDER_RUNTIME_CODE = `((runtime) => {
     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) {
@@ -1714,7 +1723,7 @@ function _scope_reason() {
 	return reason;
 }
 function _serialize_if(condition, key) {
-	return condition && (condition === 1 || condition[key]) ? 1 : void 0;
+	return condition && (condition === 1 || (typeof condition === "number" ? condition >>> key + 1 & 1 : condition[key])) ? 1 : void 0;
 }
 function _serialize_guard(condition, key) {
 	return _serialize_if(condition, key) || 0;
@@ -1836,6 +1845,17 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
+function _show_start(display, mark) {
+	if (display) {
+		if (mark) $chunk.writeHTML($chunk.boundary.state.mark("[", ""));
+	} else $chunk.writeHTML("<t hidden>");
+}
+function _show_end(scopeId, accessor, display, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	const branchId = _scope_id();
+	const wrap = !display;
+	if (wrap) $chunk.writeHTML("</t>");
+	writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, wrap || singleNode ? 1 : void 0, " " + branchId);
+}
 let writeScope = (scopeId, partialScope) => {
 	const { state } = $chunk.boundary;
 	const target = $chunk.serializeState;
@@ -2240,7 +2260,7 @@ var Chunk = class Chunk {
 	flushScript() {
 		const { boundary } = this;
 		const { state } = boundary;
-		const { $global, runtimePrefix, nonceAttr } = state;
+		const { $global, runtimePrefix } = state;
 		let needsWalk = state.walkOnNextFlush;
 		if (needsWalk) state.walkOnNextFlush = false;
 		let readyResumeScripts = this.flushReadyScripts();
@@ -2251,7 +2271,7 @@ var Chunk = class Chunk {
 			readyResumeScripts = concatScripts(readyResumeScripts, state.writeReady(channel.readyId, concatSequence(depsMarker(deps), resumes)));
 		}
 		if (readyResumeScripts) needsWalk = true;
-		const { effects } = this;
+		const effects = this.async ? "" : this.effects;
 		let { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime) {
 			state.hasMainRuntime = true;
@@ -2271,7 +2291,6 @@ var Chunk = class Chunk {
 			needsWalk = true;
 			if (!state.hasReorderRuntime) {
 				state.hasReorderRuntime = true;
-				html += "<style " + state.commentPrefix + nonceAttr + ">t{display:none}</style>";
 				scripts = concatScripts(scripts, REORDER_RUNTIME_CODE + "(" + runtimePrefix + ")");
 			}
 			for (const reorderedChunk of state.writeReorders) {
@@ -2308,14 +2327,15 @@ var Chunk = class Chunk {
 				}
 				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>";
+				html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
 		if (needsWalk) scripts = concatScripts(scripts, runtimePrefix + ".w()");
 		this.html = html;
 		this.scripts = scripts;
-		this.effects = this.lastEffect = state.resumes = "";
+		if (!this.async) this.effects = this.lastEffect = "";
+		state.resumes = "";
 		return this;
 	}
 	flushHTML() {
@@ -2523,6 +2543,10 @@ function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, s
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
+function _style_html(decls) {
+	const id = _id();
+	return `<style${_attr_nonce()} class=${id}>.${id}~*{${decls}}</style>`;
+}
 function _attr(name, value) {
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
@@ -2758,8 +2782,8 @@ function render(input = {}) {
 			renderId: getDefaultRenderId(this),
 			...$global
 		};
-		if (!String($global.runtimeId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must be a valid JavaScript identifier.`);
-		if (!String($global.renderId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must be a valid JavaScript identifier.`);
+		if (!String($global.runtimeId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
+		if (!String($global.renderId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
 	} else $global = {
 		runtimeId: "M",
 		renderId: getDefaultRenderId(this)
@@ -2772,10 +2796,10 @@ function render(input = {}) {
 }
 function getDefaultRenderId(template) {
 	if (template["embed"]) {
-		const ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789";
+		const ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789";
 		let n = Math.random() * 4294967296 >>> 0;
-		let r = ENCODE_CHARS[n % 53];
-		for (n = n / 53 | 0; n; n >>>= 6) r += ENCODE_CHARS[n & 63];
+		let r = ENCODE_CHARS[n % 52];
+		for (n = n / 52 | 0; n; n = n / 63 | 0) r += ENCODE_CHARS[n % 63];
 		return r;
 	}
 	return "_";
@@ -3197,6 +3221,7 @@ exports._escape = _escape;
 exports._escape_comment = _escape_comment;
 exports._escape_script = _escape_script;
 exports._escape_style = _escape_style;
+exports._escape_style_value = _escape_style_value;
 exports._existing_scope = _existing_scope;
 exports._flush_head = _flush_head;
 exports._for_in = _for_in;
@@ -3225,6 +3250,9 @@ exports._sep = _sep;
 exports._serialize_guard = _serialize_guard;
 exports._serialize_if = _serialize_if;
 exports._set_serialize_reason = _set_serialize_reason;
+exports._show_end = _show_end;
+exports._show_start = _show_start;
+exports._style_html = _style_html;
 exports._subscribe = _subscribe;
 exports._template = _template;
 exports._to_text = _to_text;

package/dist/debug/html.mjs

@@ -65,6 +65,14 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "";
+	const result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (const c of result) if (c === "(") closers = ")" + closers;
+	else if (c === "[") closers = "]" + closers;
+	else if (c === closers[0]) closers = closers.slice(1);
+	return result + closers;
+}
 const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
 	let str = "";
 	let sep = "";
@@ -225,6 +233,10 @@ function _escape_style(val) {
 	assertValidTextValue(val);
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
+function _escape_style_value(val) {
+	assertValidTextValue(val);
+	return val || val === 0 ? escapeStyleValue(val + "") : "";
+}
 const unsafeCommentReg = />/g;
 const escapeCommentStr = (str) => unsafeCommentReg.test(str) ? str.replace(unsafeCommentReg, "&gt;") : str;
 function _escape_comment(val) {
@@ -1547,9 +1559,6 @@ const REORDER_RUNTIME_CODE = `((runtime) => {
     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) {
@@ -1712,7 +1721,7 @@ function _scope_reason() {
 	return reason;
 }
 function _serialize_if(condition, key) {
-	return condition && (condition === 1 || condition[key]) ? 1 : void 0;
+	return condition && (condition === 1 || (typeof condition === "number" ? condition >>> key + 1 & 1 : condition[key])) ? 1 : void 0;
 }
 function _serialize_guard(condition, key) {
 	return _serialize_if(condition, key) || 0;
@@ -1834,6 +1843,17 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
+function _show_start(display, mark) {
+	if (display) {
+		if (mark) $chunk.writeHTML($chunk.boundary.state.mark("[", ""));
+	} else $chunk.writeHTML("<t hidden>");
+}
+function _show_end(scopeId, accessor, display, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	const branchId = _scope_id();
+	const wrap = !display;
+	if (wrap) $chunk.writeHTML("</t>");
+	writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, wrap || singleNode ? 1 : void 0, " " + branchId);
+}
 let writeScope = (scopeId, partialScope) => {
 	const { state } = $chunk.boundary;
 	const target = $chunk.serializeState;
@@ -2238,7 +2258,7 @@ var Chunk = class Chunk {
 	flushScript() {
 		const { boundary } = this;
 		const { state } = boundary;
-		const { $global, runtimePrefix, nonceAttr } = state;
+		const { $global, runtimePrefix } = state;
 		let needsWalk = state.walkOnNextFlush;
 		if (needsWalk) state.walkOnNextFlush = false;
 		let readyResumeScripts = this.flushReadyScripts();
@@ -2249,7 +2269,7 @@ var Chunk = class Chunk {
 			readyResumeScripts = concatScripts(readyResumeScripts, state.writeReady(channel.readyId, concatSequence(depsMarker(deps), resumes)));
 		}
 		if (readyResumeScripts) needsWalk = true;
-		const { effects } = this;
+		const effects = this.async ? "" : this.effects;
 		let { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime) {
 			state.hasMainRuntime = true;
@@ -2269,7 +2289,6 @@ var Chunk = class Chunk {
 			needsWalk = true;
 			if (!state.hasReorderRuntime) {
 				state.hasReorderRuntime = true;
-				html += "<style " + state.commentPrefix + nonceAttr + ">t{display:none}</style>";
 				scripts = concatScripts(scripts, REORDER_RUNTIME_CODE + "(" + runtimePrefix + ")");
 			}
 			for (const reorderedChunk of state.writeReorders) {
@@ -2306,14 +2325,15 @@ var Chunk = class Chunk {
 				}
 				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>";
+				html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
 		if (needsWalk) scripts = concatScripts(scripts, runtimePrefix + ".w()");
 		this.html = html;
 		this.scripts = scripts;
-		this.effects = this.lastEffect = state.resumes = "";
+		if (!this.async) this.effects = this.lastEffect = "";
+		state.resumes = "";
 		return this;
 	}
 	flushHTML() {
@@ -2521,6 +2541,10 @@ function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, s
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
+function _style_html(decls) {
+	const id = _id();
+	return `<style${_attr_nonce()} class=${id}>.${id}~*{${decls}}</style>`;
+}
 function _attr(name, value) {
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
@@ -2756,8 +2780,8 @@ function render(input = {}) {
 			renderId: getDefaultRenderId(this),
 			...$global
 		};
-		if (!String($global.runtimeId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must be a valid JavaScript identifier.`);
-		if (!String($global.renderId).match(/^[_$a-z][_$a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must be a valid JavaScript identifier.`);
+		if (!String($global.runtimeId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid runtimeId: "${$global.runtimeId}". The runtimeId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
+		if (!String($global.renderId).match(/^[_a-z][_a-z0-9]*$/i)) throw new Error(`Invalid renderId: "${$global.renderId}". The renderId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
 	} else $global = {
 		runtimeId: "M",
 		renderId: getDefaultRenderId(this)
@@ -2770,10 +2794,10 @@ function render(input = {}) {
 }
 function getDefaultRenderId(template) {
 	if (template["embed"]) {
-		const ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789";
+		const ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789";
 		let n = Math.random() * 4294967296 >>> 0;
-		let r = ENCODE_CHARS[n % 53];
-		for (n = n / 53 | 0; n; n >>>= 6) r += ENCODE_CHARS[n & 63];
+		let r = ENCODE_CHARS[n % 52];
+		for (n = n / 52 | 0; n; n = n / 63 | 0) r += ENCODE_CHARS[n % 63];
 		return r;
 	}
 	return "_";
@@ -3157,4 +3181,4 @@ const compat = {
 };
 function NOOP() {}
 //#endregion
-export { $global, _assert_hoist, _attr, _attr_and, _attr_class, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_input_checked, _attr_input_checkedValue, _attr_input_value, _attr_nonce, _attr_nullish, _attr_option_value, _attr_or, _attr_select_value, _attr_style, _attr_textarea_value, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _await, _content, _content_resume, _dynamic_tag, _el, _el_read_error, _el_resume, _escape, _escape_comment, _escape_script, _escape_style, _existing_scope, _flush_head, _for_in, _for_of, _for_to, _for_until, _hoist, _hoist_read_error, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, writeScope as _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _subscribe, _template, _to_text, _trailers, _try, _unescaped, _var, attrTag, attrTags, compat, forIn, forInBy, forOf, forOfBy, forStepBy, forTo, forUntil, withLoadAssets, withPageAssets };
+export { $global, _assert_hoist, _attr, _attr_and, _attr_class, _attr_content, _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open as _attr_dialog_open, _attr_input_checked, _attr_input_checkedValue, _attr_input_value, _attr_nonce, _attr_nullish, _attr_option_value, _attr_or, _attr_select_value, _attr_style, _attr_textarea_value, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _await, _content, _content_resume, _dynamic_tag, _el, _el_read_error, _el_resume, _escape, _escape_comment, _escape_script, _escape_style, _escape_style_value, _existing_scope, _flush_head, _for_in, _for_of, _for_to, _for_until, _hoist, _hoist_read_error, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, writeScope as _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _show_end, _show_start, _style_html, _subscribe, _template, _to_text, _trailers, _try, _unescaped, _var, attrTag, attrTags, compat, forIn, forInBy, forOf, forOfBy, forStepBy, forTo, forUntil, withLoadAssets, withPageAssets };

package/dist/dom/control-flow.d.ts

@@ -10,6 +10,7 @@ export declare function _try(nodeAccessor: EncodedAccessor, template?: string |
 }) => void;
 export declare function renderCatch(scope: Scope, error: unknown): void;
 export declare function _if(nodeAccessor: EncodedAccessor, ...branchesArgs: (string | SetupFn | 0)[]): (scope: Scope, newBranch: number) => void;
+export declare function _show(nodeAccessor: EncodedAccessor, startNodeAccessor?: EncodedAccessor): (scope: Scope, display: unknown) => void;
 export declare function patchDynamicTag(fn: <T extends typeof _dynamic_tag>(cond: T) => T): void;
 export declare let _dynamic_tag: (nodeAccessor: EncodedAccessor, getContent?: ((scope: Scope) => Renderer) | 0, getTagVar?: (() => Signal<unknown>) | 0, inputIsArgs?: 1) => Signal<Renderer | string | undefined>;
 export declare function _dynamic_tag_content(nodeAccessor: EncodedAccessor): Signal<Renderer | undefined>;

package/dist/dom/dom.d.ts

@@ -7,6 +7,8 @@ export declare function _attr_class_item(element: Element, name: string, value:
 export declare function _attr_style(element: Element, value: unknown): void;
 export declare function _attr_style_items(element: HTMLElement, items: Record<string, unknown>): void;
 export declare function _attr_style_item(element: HTMLElement, name: string, value: unknown): void;
+export declare function _style_shell(scope: Scope, nodeAccessor: Accessor): void;
+export declare function _style_rule_item(element: HTMLStyleElement, name: string, value: unknown): void;
 export declare function _attr_nonce(scope: Scope, nodeAccessor: Accessor): void;
 export declare function _text(node: Text | Comment, value: unknown): void;
 export declare function _text_content(node: ParentNode, value: unknown): void;

package/dist/dom.d.ts

@@ -4,9 +4,9 @@ export { forIn, forOf, forTo, forUntil } from "./common/for";
 export { _call } from "./common/helpers";
 export { $signal, $signalReset } from "./dom/abort-signal";
 export { compat } from "./dom/compat";
-export { _await_content, _await_promise, _dynamic_tag, _dynamic_tag_content, _for_in, _for_of, _for_to, _for_until, _if, _resume_dynamic_tag, _try, } from "./dom/control-flow";
+export { _await_content, _await_promise, _dynamic_tag, _dynamic_tag_content, _for_in, _for_of, _for_to, _for_until, _if, _resume_dynamic_tag, _show, _try, } from "./dom/control-flow";
 export { _attr_details_or_dialog_open as _attr_details_open, _attr_details_or_dialog_open_default as _attr_details_open_default, _attr_details_or_dialog_open_script as _attr_details_open_script, _attr_details_or_dialog_open as _attr_dialog_open, _attr_details_or_dialog_open_default as _attr_dialog_open_default, _attr_details_or_dialog_open_script as _attr_dialog_open_script, _attr_input_checked, _attr_input_checked_default, _attr_input_checked_script, _attr_input_checkedValue, _attr_input_checkedValue_default, _attr_input_checkedValue_script, _attr_input_value, _attr_input_value_default, _attr_input_value_script, _attr_select_value, _attr_select_value_default, _attr_select_value_script, _attr_input_value as _attr_textarea_value, _attr_input_value_default as _attr_textarea_value_default, _attr_input_value_script as _attr_textarea_value_script, } from "./dom/controllable";
-export { _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_nonce, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _html, _lifecycle, _text, _text_content, _to_text, } from "./dom/dom";
+export { _attr, _attr_class, _attr_class_item, _attr_class_items, _attr_content, _attr_nonce, _attr_style, _attr_style_item, _attr_style_items, _attrs, _attrs_content, _attrs_partial, _attrs_partial_content, _attrs_script, _html, _lifecycle, _style_rule_item, _style_shell, _text, _text_content, _to_text, } from "./dom/dom";
 export { _on } from "./dom/event";
 export { _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_race_trigger, _load_setup, _load_signal, _load_template, _load_visible_trigger, } from "./dom/load";
 export { _enable_catch, run } from "./dom/queue";