marko 6.1.23 → 6.2.0

package/dist/common/accessor.d.ts

@@ -9,6 +9,7 @@ export declare enum AccessorPrefix {
     DynamicHTMLLastChild = "H",
     EventAttributes = "I",
     Getter = "J",
+    KeyedScopes = "O",
     Lifecycle = "K",
     Promise = "L",
     TagVariableChange = "M"
@@ -65,6 +66,9 @@ export declare enum ClosureSignalProp {
     SignalIndexAccessor = "b",
     Index = "c"
 }
+export declare enum KeyedScopesProp {
+    PreviousKey = "_"
+}
 export declare enum LoadSignalValue {
     Value = "a",
     Signal = "b"

package/dist/common/accessor.debug.d.ts

@@ -9,6 +9,7 @@ export declare enum AccessorPrefix {
     DynamicHTMLLastChild = "DynamicHTMLLastChild:",
     EventAttributes = "EventAttributes:",
     Getter = "Getter:",
+    KeyedScopes = "KeyedScopes:",
     Lifecycle = "Lifecycle:",
     Promise = "Promise:",
     TagVariableChange = "TagVariableChange:"
@@ -65,6 +66,9 @@ export declare enum ClosureSignalProp {
     SignalIndexAccessor = "signalIndexAccessor",
     Index = "index"
 }
+export declare enum KeyedScopesProp {
+    PreviousKey = "PreviousKey:"
+}
 export declare enum LoadSignalValue {
     Value = "value",
     Signal = "signal"

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/common/types.d.ts

@@ -41,7 +41,7 @@ export interface AwaitCounter {
     i: number;
     c: () => void | 1;
 }
-export { AccessorPrefix, AccessorProp, ClosureSignalProp, PendingRenderProp, RendererProp, } from "./accessor.debug";
+export { AccessorPrefix, AccessorProp, ClosureSignalProp, KeyedScopesProp, PendingRenderProp, RendererProp, } from "./accessor.debug";
 export declare enum NodeType {
     Element = 1,
     Text = 3,

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, "\\$&").replace(/</g, "\\3C ");
+	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 = "";
@@ -436,6 +444,44 @@ function _for_closure(ownerLoopNodeAccessor, fn) {
 	ownerSignal._ = fn;
 	return ownerSignal;
 }
+function _for_selector(ownerLoopNodeAccessor, ownerValueAccessor, keyValueAccessor, fn) {
+	const scopeAccessor = "BranchScopes:" + ownerLoopNodeAccessor;
+	const mapAccessor = "KeyedScopes:" + ownerLoopNodeAccessor;
+	const prevKeyProp = `PreviousKey:${ownerValueAccessor}`;
+	const ownerSignal = (ownerScope) => {
+		const scopes = toArray(ownerScope[scopeAccessor]);
+		if (ownerScope["#Gen"] < runId && scopes.length) {
+			const nextKey = ownerScope[ownerValueAccessor];
+			queueRender(ownerScope, () => {
+				const map = keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor);
+				if (map && prevKeyProp in map) {
+					const prevScope = map.get(map[prevKeyProp]);
+					const nextScope = map.get(nextKey);
+					if (prevScope !== nextScope) {
+						runLiveBranch(prevScope, fn);
+						runLiveBranch(nextScope, fn);
+					}
+				} else for (const scope of toArray(ownerScope[scopeAccessor])) runLiveBranch(scope, fn);
+				if (map) map[prevKeyProp] = nextKey;
+			}, -1, 0, scopes[0]["#Id"]);
+		}
+	};
+	ownerSignal._ = fn;
+	return ownerSignal;
+}
+function keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor) {
+	const map = ownerScope[mapAccessor] ||= /* @__PURE__ */ new Map();
+	if (!map.size) for (const scope of toArray(ownerScope[scopeAccessor])) {
+		const key = scope["#LoopKey"] ?? scope[keyValueAccessor];
+		if (key === void 0) return ownerScope[mapAccessor] = null;
+		scope["#LoopKey"] = key;
+		map.set(key, scope);
+	}
+	return map;
+}
+function runLiveBranch(scope, fn) {
+	if (scope && scope["#Gen"] > 0 && scope["#Gen"] < runId) fn(scope);
+}
 function _if_closure(ownerConditionalNodeAccessor, branch, fn) {
 	const scopeAccessor = "BranchScopes:" + ownerConditionalNodeAccessor;
 	const branchAccessor = "ConditionalRenderer:" + ownerConditionalNodeAccessor;
@@ -1137,6 +1183,24 @@ 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);
+	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 === -1) start = text.indexOf(";" + name + ":");
+	if (start === -1) element.textContent = text.slice(0, -1) + decl + "}";
+	else {
+		let end = ++start;
+		for (let c; (c = text[end]) && c !== ";"; end++) if (c === "\\") end++;
+		element.textContent = text.slice(0, start) + decl + text.slice(end + 1);
+	}
+}
 function _attr_nonce(scope, nodeAccessor) {
 	_attr(scope[nodeAccessor], "nonce", scope["$global"].cspNonce);
 }
@@ -1508,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);
 }
@@ -1597,12 +1689,14 @@ const _for_until = /* @__PURE__ */ loop(([until, from, step, by = byFirstArg], c
 function loop(forEach) {
 	return (nodeAccessor, template, walks, setup, params) => {
 		const scopesAccessor = "BranchScopes:" + nodeAccessor;
+		const keyedScopesAccessor = "KeyedScopes:" + nodeAccessor;
 		const renderer = _content("", template, walks, setup)();
 		enableBranches();
 		return (scope, value) => {
 			const referenceNode = scope[nodeAccessor];
 			const oldScopes = toArray(scope[scopesAccessor]);
 			const newScopes = scope[scopesAccessor] = [];
+			scope[keyedScopesAccessor] = null;
 			const oldLen = oldScopes.length;
 			const parentNode = referenceNode.nodeType > 1 ? referenceNode.parentNode || oldScopes[0]?.["#StartNode"].parentNode : referenceNode;
 			let oldScopesByKey;
@@ -1977,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: "_"
@@ -2186,6 +2280,7 @@ exports._enable_catch = _enable_catch;
 exports._for_closure = _for_closure;
 exports._for_in = _for_in;
 exports._for_of = _for_of;
+exports._for_selector = _for_selector;
 exports._for_to = _for_to;
 exports._for_until = _for_until;
 exports._hoist = _hoist;
@@ -2212,6 +2307,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, "\\$&").replace(/</g, "\\3C ");
+	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 = "";
@@ -434,6 +442,44 @@ function _for_closure(ownerLoopNodeAccessor, fn) {
 	ownerSignal._ = fn;
 	return ownerSignal;
 }
+function _for_selector(ownerLoopNodeAccessor, ownerValueAccessor, keyValueAccessor, fn) {
+	const scopeAccessor = "BranchScopes:" + ownerLoopNodeAccessor;
+	const mapAccessor = "KeyedScopes:" + ownerLoopNodeAccessor;
+	const prevKeyProp = `PreviousKey:${ownerValueAccessor}`;
+	const ownerSignal = (ownerScope) => {
+		const scopes = toArray(ownerScope[scopeAccessor]);
+		if (ownerScope["#Gen"] < runId && scopes.length) {
+			const nextKey = ownerScope[ownerValueAccessor];
+			queueRender(ownerScope, () => {
+				const map = keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor);
+				if (map && prevKeyProp in map) {
+					const prevScope = map.get(map[prevKeyProp]);
+					const nextScope = map.get(nextKey);
+					if (prevScope !== nextScope) {
+						runLiveBranch(prevScope, fn);
+						runLiveBranch(nextScope, fn);
+					}
+				} else for (const scope of toArray(ownerScope[scopeAccessor])) runLiveBranch(scope, fn);
+				if (map) map[prevKeyProp] = nextKey;
+			}, -1, 0, scopes[0]["#Id"]);
+		}
+	};
+	ownerSignal._ = fn;
+	return ownerSignal;
+}
+function keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor) {
+	const map = ownerScope[mapAccessor] ||= /* @__PURE__ */ new Map();
+	if (!map.size) for (const scope of toArray(ownerScope[scopeAccessor])) {
+		const key = scope["#LoopKey"] ?? scope[keyValueAccessor];
+		if (key === void 0) return ownerScope[mapAccessor] = null;
+		scope["#LoopKey"] = key;
+		map.set(key, scope);
+	}
+	return map;
+}
+function runLiveBranch(scope, fn) {
+	if (scope && scope["#Gen"] > 0 && scope["#Gen"] < runId) fn(scope);
+}
 function _if_closure(ownerConditionalNodeAccessor, branch, fn) {
 	const scopeAccessor = "BranchScopes:" + ownerConditionalNodeAccessor;
 	const branchAccessor = "ConditionalRenderer:" + ownerConditionalNodeAccessor;
@@ -1135,6 +1181,24 @@ 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);
+	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 === -1) start = text.indexOf(";" + name + ":");
+	if (start === -1) element.textContent = text.slice(0, -1) + decl + "}";
+	else {
+		let end = ++start;
+		for (let c; (c = text[end]) && c !== ";"; end++) if (c === "\\") end++;
+		element.textContent = text.slice(0, start) + decl + text.slice(end + 1);
+	}
+}
 function _attr_nonce(scope, nodeAccessor) {
 	_attr(scope[nodeAccessor], "nonce", scope["$global"].cspNonce);
 }
@@ -1506,6 +1570,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);
 }
@@ -1595,12 +1687,14 @@ const _for_until = /* @__PURE__ */ loop(([until, from, step, by = byFirstArg], c
 function loop(forEach) {
 	return (nodeAccessor, template, walks, setup, params) => {
 		const scopesAccessor = "BranchScopes:" + nodeAccessor;
+		const keyedScopesAccessor = "KeyedScopes:" + nodeAccessor;
 		const renderer = _content("", template, walks, setup)();
 		enableBranches();
 		return (scope, value) => {
 			const referenceNode = scope[nodeAccessor];
 			const oldScopes = toArray(scope[scopesAccessor]);
 			const newScopes = scope[scopesAccessor] = [];
+			scope[keyedScopesAccessor] = null;
 			const oldLen = oldScopes.length;
 			const parentNode = referenceNode.nodeType > 1 ? referenceNode.parentNode || oldScopes[0]?.["#StartNode"].parentNode : referenceNode;
 			let oldScopesByKey;
@@ -1975,8 +2069,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: "_"
@@ -2122,4 +2216,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_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, "\\$&").replace(/</g, "\\3C ");
+	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) {
@@ -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();
@@ -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,7 +2327,7 @@ 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;
 		}
@@ -2523,6 +2542,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 +2781,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 +2795,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 +3220,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 +3249,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, "\\$&").replace(/</g, "\\3C ");
+	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) {
@@ -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();
@@ -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,7 +2325,7 @@ 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;
 		}
@@ -2521,6 +2540,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 +2779,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 +2793,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 +3180,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/signals.d.ts

@@ -6,6 +6,7 @@ export declare function _let_change<T>(id: EncodedAccessor, fn?: SignalFn): (sco
 export declare function _const<T>(valueAccessor: EncodedAccessor, fn?: SignalFn): Signal<T>;
 export declare function _or(id: number, fn: SignalFn, defaultPending?: number, scopeIdAccessor?: EncodedAccessor): Signal<never>;
 export declare function _for_closure(ownerLoopNodeAccessor: EncodedAccessor, fn: SignalFn): SignalFn;
+export declare function _for_selector(ownerLoopNodeAccessor: EncodedAccessor, ownerValueAccessor: EncodedAccessor, keyValueAccessor: EncodedAccessor, fn: SignalFn): SignalFn;
 export declare function _if_closure(ownerConditionalNodeAccessor: EncodedAccessor, branch: number, fn: SignalFn): SignalFn;
 export declare function subscribeToScopeSet(ownerScope: Scope, accessor: Accessor, scope: Scope): void;
 export declare function _closure(...closureSignals: ReturnType<typeof _closure_get>[]): (scope: Scope) => void;