marko 6.1.24 → 6.2.1

package/dist/dom.js

@@ -132,6 +132,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -176,6 +181,10 @@ function forUntil(until, from, step, cb) {
 function toArray(opt) {
 	return opt ? Array.isArray(opt) ? opt : [opt] : [];
 }
+function forEach(opt, cb) {
+	if (opt) if (Array.isArray(opt)) for (let item of opt) cb(item);
+	else cb(opt);
+}
 function push(opt, item) {
 	return opt ? Array.isArray(opt) ? (opt.push(item), opt) : [opt, item] : item;
 }
@@ -491,8 +500,8 @@ function init(runtimeId = "M") {
 				for (visitType !== "[" && (visitScope[nextToken()] = visitType === ")" || visitType === "}" ? parent : visit, accessor = "A" + lastToken, singleNode = visitType !== "]" && visitType !== ")", nextToken()); branchId = +lastToken;) {
 					if ((endedBranches ||= []).push(branch = getScope(branchId)), setParentBranch(branch, branch.F), (branch.O = render.p?.[branchId]) && (branch.O.m = render.m), singleNode) {
 						for (; startVisit.previousSibling && ~visits.indexOf(startVisit = startVisit.previousSibling););
-						branch.K = branch.S = startVisit, visitType === "'" && (branch.a = startVisit);
-					} else curBranchScopes = push(curBranchScopes, branch), accessor && (visitScope[accessor] = curBranchScopes, curBranchScopes = branchScopesStack.pop()), startVisit = branchStarts.pop(), parent !== startVisit.parentNode && parent.prepend(startVisit), branch.S = startVisit, branch.K = visit.previousSibling === startVisit ? startVisit : parent.insertBefore(new Text(), visit);
+						branch._ ??= visitScope, branch.K = branch.S = startVisit, visitType === "'" && (branch.a = startVisit);
+					} else curBranchScopes = push(curBranchScopes, branch), accessor && (visitScope[accessor] = curBranchScopes, forEach(curBranchScopes, (scope) => scope._ ??= visitScope), curBranchScopes = branchScopesStack.pop()), startVisit = branchStarts.pop(), parent !== startVisit.parentNode && parent.prepend(startVisit), branch.S = startVisit, branch.K = visit.previousSibling === startVisit ? startVisit : parent.insertBefore(new Text(), visit);
 					for (; i && orphanBranches[--i].L > branchId;) setParentBranch(orphanBranches.pop(), branch);
 					for (; j && deferredOwners[--j].L > branchId;) {
 						let owner = deferredOwners.pop();
@@ -762,6 +771,14 @@ 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) {
+	let element = scope[nodeAccessor], id = _id(scope);
+	_attr_nonce(scope, nodeAccessor), element.className = id, _text_content(element, "." + id + "~*{}");
+}
+function _style_rule_item(element, name, value) {
+	let text = element.textContent, decl = name + ":" + escapeStyleValue(_to_text(value)) + ";", start = text.indexOf("{" + name + ":");
+	~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.$.cspNonce);
 }
@@ -1012,6 +1029,21 @@ function _if(nodeAccessor, ...branchesArgs) {
 		newBranch !== (scope[branchAccessor] ?? (scope["A" + nodeAccessor] && 0)) && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
+function _show(nodeAccessor, startNodeAccessor) {
+	nodeAccessor = decodeAccessor(nodeAccessor), startNodeAccessor !== void 0 && (startNodeAccessor = decodeAccessor(startNodeAccessor));
+	let rangeAccessor = "A" + nodeAccessor;
+	return enableBranches(), (scope, display) => {
+		let referenceNode = scope[nodeAccessor], onlyChild = referenceNode.nodeType === 1, parentNode = onlyChild ? referenceNode : referenceNode.parentNode, range = scope[rangeAccessor];
+		range || (range = scope[rangeAccessor] = {}, range.S = onlyChild ? parentNode.firstChild : scope[startNodeAccessor], range.K = onlyChild ? parentNode.lastChild : referenceNode.previousSibling);
+		let startNode = range.S;
+		if (range.L && startNode === range.K && startNode.tagName === "T") {
+			let wrapper = startNode;
+			wrapper.firstChild || wrapper.appendChild(new Text()), range = scope[rangeAccessor] = {}, range.S = startNode = wrapper.firstChild, range.K = wrapper.lastChild, wrapper.replaceWith(...wrapper.childNodes);
+		}
+		let inDom = startNode.parentNode === parentNode;
+		display ? inDom || insertBranchBefore(range, parentNode, onlyChild ? null : referenceNode) : inDom && tempDetachBranch(range);
+	};
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1315,4 +1347,4 @@ exports.$signal = $signal, exports.$signalReset = $signalReset, exports._assert_
 	get: function() {
 		return _dynamic_tag;
 	}
-}), exports._dynamic_tag_content = _dynamic_tag_content, exports._el = _el, exports._el_read = _el_read, 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, exports._hoist_resume = _hoist_resume, exports._html = _html, exports._id = _id, exports._if = _if, exports._if_closure = _if_closure, exports._let = _let, exports._let_change = _let_change, exports._lifecycle = _lifecycle, exports._load_event_trigger = _load_event_trigger, exports._load_idle_trigger = _load_idle_trigger, exports._load_media_trigger = _load_media_trigger, exports._load_race_trigger = _load_race_trigger, exports._load_setup = _load_setup, exports._load_signal = _load_signal, exports._load_template = _load_template, exports._load_visible_trigger = _load_visible_trigger, exports._on = _on, exports._or = _or, exports._resume = _resume, exports._resume_dynamic_tag = _resume_dynamic_tag, exports._return = _return, exports._return_change = _return_change, exports._script = _script, exports._template = _template, exports._text = _text, exports._text_content = _text_content, exports._to_text = _to_text, exports._try = _try, exports._var = _var, exports._var_change = _var_change, exports._var_resume = _var_resume, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forOf = forOf, exports.forTo = forTo, exports.forUntil = forUntil, exports.init = init, exports.initEmbedded = initEmbedded, exports.ready = ready, exports.run = run;
+}), exports._dynamic_tag_content = _dynamic_tag_content, exports._el = _el, exports._el_read = _el_read, 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, exports._hoist_resume = _hoist_resume, exports._html = _html, exports._id = _id, exports._if = _if, exports._if_closure = _if_closure, exports._let = _let, exports._let_change = _let_change, exports._lifecycle = _lifecycle, exports._load_event_trigger = _load_event_trigger, exports._load_idle_trigger = _load_idle_trigger, exports._load_media_trigger = _load_media_trigger, exports._load_race_trigger = _load_race_trigger, exports._load_setup = _load_setup, exports._load_signal = _load_signal, exports._load_template = _load_template, exports._load_visible_trigger = _load_visible_trigger, exports._on = _on, exports._or = _or, exports._resume = _resume, 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, exports._to_text = _to_text, exports._try = _try, exports._var = _var, exports._var_change = _var_change, exports._var_resume = _var_resume, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forOf = forOf, exports.forTo = forTo, exports.forUntil = forUntil, exports.init = init, exports.initEmbedded = initEmbedded, exports.ready = ready, exports.run = run;

package/dist/dom.mjs

@@ -131,6 +131,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -175,6 +180,10 @@ function forUntil(until, from, step, cb) {
 function toArray(opt) {
 	return opt ? Array.isArray(opt) ? opt : [opt] : [];
 }
+function forEach(opt, cb) {
+	if (opt) if (Array.isArray(opt)) for (let item of opt) cb(item);
+	else cb(opt);
+}
 function push(opt, item) {
 	return opt ? Array.isArray(opt) ? (opt.push(item), opt) : [opt, item] : item;
 }
@@ -490,8 +499,8 @@ function init(runtimeId = "M") {
 				for (visitType !== "[" && (visitScope[nextToken()] = visitType === ")" || visitType === "}" ? parent : visit, accessor = "A" + lastToken, singleNode = visitType !== "]" && visitType !== ")", nextToken()); branchId = +lastToken;) {
 					if ((endedBranches ||= []).push(branch = getScope(branchId)), setParentBranch(branch, branch.F), (branch.O = render.p?.[branchId]) && (branch.O.m = render.m), singleNode) {
 						for (; startVisit.previousSibling && ~visits.indexOf(startVisit = startVisit.previousSibling););
-						branch.K = branch.S = startVisit, visitType === "'" && (branch.a = startVisit);
-					} else curBranchScopes = push(curBranchScopes, branch), accessor && (visitScope[accessor] = curBranchScopes, curBranchScopes = branchScopesStack.pop()), startVisit = branchStarts.pop(), parent !== startVisit.parentNode && parent.prepend(startVisit), branch.S = startVisit, branch.K = visit.previousSibling === startVisit ? startVisit : parent.insertBefore(new Text(), visit);
+						branch._ ??= visitScope, branch.K = branch.S = startVisit, visitType === "'" && (branch.a = startVisit);
+					} else curBranchScopes = push(curBranchScopes, branch), accessor && (visitScope[accessor] = curBranchScopes, forEach(curBranchScopes, (scope) => scope._ ??= visitScope), curBranchScopes = branchScopesStack.pop()), startVisit = branchStarts.pop(), parent !== startVisit.parentNode && parent.prepend(startVisit), branch.S = startVisit, branch.K = visit.previousSibling === startVisit ? startVisit : parent.insertBefore(new Text(), visit);
 					for (; i && orphanBranches[--i].L > branchId;) setParentBranch(orphanBranches.pop(), branch);
 					for (; j && deferredOwners[--j].L > branchId;) {
 						let owner = deferredOwners.pop();
@@ -761,6 +770,14 @@ 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) {
+	let element = scope[nodeAccessor], id = _id(scope);
+	_attr_nonce(scope, nodeAccessor), element.className = id, _text_content(element, "." + id + "~*{}");
+}
+function _style_rule_item(element, name, value) {
+	let text = element.textContent, decl = name + ":" + escapeStyleValue(_to_text(value)) + ";", start = text.indexOf("{" + name + ":");
+	~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.$.cspNonce);
 }
@@ -1011,6 +1028,21 @@ function _if(nodeAccessor, ...branchesArgs) {
 		newBranch !== (scope[branchAccessor] ?? (scope["A" + nodeAccessor] && 0)) && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
+function _show(nodeAccessor, startNodeAccessor) {
+	nodeAccessor = decodeAccessor(nodeAccessor), startNodeAccessor !== void 0 && (startNodeAccessor = decodeAccessor(startNodeAccessor));
+	let rangeAccessor = "A" + nodeAccessor;
+	return enableBranches(), (scope, display) => {
+		let referenceNode = scope[nodeAccessor], onlyChild = referenceNode.nodeType === 1, parentNode = onlyChild ? referenceNode : referenceNode.parentNode, range = scope[rangeAccessor];
+		range || (range = scope[rangeAccessor] = {}, range.S = onlyChild ? parentNode.firstChild : scope[startNodeAccessor], range.K = onlyChild ? parentNode.lastChild : referenceNode.previousSibling);
+		let startNode = range.S;
+		if (range.L && startNode === range.K && startNode.tagName === "T") {
+			let wrapper = startNode;
+			wrapper.firstChild || wrapper.appendChild(new Text()), range = scope[rangeAccessor] = {}, range.S = startNode = wrapper.firstChild, range.K = wrapper.lastChild, wrapper.replaceWith(...wrapper.childNodes);
+		}
+		let inDom = startNode.parentNode === parentNode;
+		display ? inDom || insertBranchBefore(range, parentNode, onlyChild ? null : referenceNode) : inDom && tempDetachBranch(range);
+	};
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1310,4 +1342,4 @@ function getSelectorOrResolve(selector, resolve) {
 	return document.querySelector(selector) || 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/html/attrs.d.ts

@@ -9,6 +9,7 @@ export declare function _attr_input_checked(scopeId: number, nodeAccessor: Acces
 export declare function _attr_input_checkedValue(scopeId: number, nodeAccessor: Accessor, checkedValue: unknown, checkedValueChange: unknown, value: unknown, serializeType?: 1): string;
 export declare function _attr_details_or_dialog_open(scopeId: number, nodeAccessor: Accessor, open: unknown, openChange: unknown, serializeType?: 1): "" | " open";
 export declare function _attr_nonce(): string;
+export declare function _style_html(decls: string): string;
 export declare function _attr(name: string, value: unknown): string;
 export declare function _attr_and(name: string, value: unknown, attr: string): string;
 export declare function _attr_or(name: string, value: unknown, attr: string): string;

package/dist/html/content.d.ts

@@ -3,4 +3,5 @@ export declare function _unescaped(val: unknown): string;
 export declare function _escape(val: unknown): string;
 export declare function _escape_script(val: unknown): string;
 export declare function _escape_style(val: unknown): string;
+export declare function _escape_style_value(val: unknown): string;
 export declare function _escape_comment(val: unknown): string;

package/dist/html/inlined-runtimes.d.ts

@@ -1,2 +1,2 @@
 export declare const WALKER_RUNTIME_CODE = "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))";
-export declare const REORDER_RUNTIME_CODE = "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector(\"style[\"+e.i+\"]\")||\"\"),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})";
+export declare const REORDER_RUNTIME_CODE = "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})";

package/dist/html/inlined-runtimes.debug.d.ts

@@ -1,2 +1,2 @@
 export declare const WALKER_RUNTIME_CODE = "((runtimeId) => (self[runtimeId] ||= (\n  renderId,\n  prefix = runtimeId + renderId,\n  prefixLen = prefix.length,\n  lookup = {},\n  visits = [],\n  doc = document,\n  walker = doc.createTreeWalker(\n    doc,\n    129 /* NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_ELEMENT */,\n  ),\n) =>\n  doc = (self[runtimeId][renderId] = {\n    i: prefix,\n    d: doc,\n    l: lookup,\n    v: visits,\n    x() {},\n    w(node, op, id) {\n      while ((node = walker.nextNode())) {\n        doc.x(\n          (op =\n            (op = node.data) &&\n            !op.indexOf(prefix) &&\n            ((lookup[(id = op.slice(prefixLen + 1))] = node), op[prefixLen])),\n          id,\n          node,\n        );\n\n        if (op > \"#\") {\n          visits.push(node);\n        }\n      }\n    },\n  })\n, self[runtimeId]))";
-export declare const REORDER_RUNTIME_CODE = "((runtime) => {\n  if (runtime.j) return;\n  let onNextSibling,\n    placeholder,\n    nextSibling,\n    placeholders = runtime.p = {},\n    replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);\n  runtime.d.head.append(\n    runtime.d.querySelector(\"style[\" + runtime.i + \"]\") || \"\"\n  );\n  runtime.j = {};\n  runtime.x = (op, id, node, placeholderRoot, placeholderCb) => {\n    if (node == nextSibling) {\n      onNextSibling();\n    }\n\n    if (op == \"#\") {\n      (placeholders[id] = placeholder).i++;\n    } else if (op == \"!\") {\n      if (runtime.l[id] && placeholders[id]) {\n        nextSibling = node.nextSibling;\n        onNextSibling = () => placeholders[id].c();\n      }\n    } else if (node.tagName == \"T\" && (id = node.getAttribute(runtime.i))) {\n      nextSibling = node.nextSibling;\n      onNextSibling = () => {\n        node.remove();\n        placeholderRoot || replace(id, node);\n        placeholder.c();\n      };\n      placeholder =\n        placeholders[id] ||\n        (placeholderRoot = placeholders[id] =\n          {\n            i: runtime.l[id] ? 1 : 2,\n            c(start = runtime.l[\"^\" + id]) {\n              if (--placeholderRoot.i) return 1;\n              for (\n                ;\n                (nextSibling =\n                  runtime.l[id].previousSibling || start).remove(),\n                  start != nextSibling;\n\n              );\n              replace(id, node);\n            },\n          });\n      // repurpose \"op\" for callbacks ...carefully\n      if ((op = runtime.j[id])) {\n        placeholderCb = placeholder.c;\n        placeholder.c = () => placeholderCb() || op(runtime.r);\n      }\n    }\n  };\n})";
+export declare const REORDER_RUNTIME_CODE = "((runtime) => {\n  if (runtime.j) return;\n  let onNextSibling,\n    placeholder,\n    nextSibling,\n    placeholders = runtime.p = {},\n    replace = (id, container) => runtime.l[id].replaceWith(...container.childNodes);\n  runtime.j = {};\n  runtime.x = (op, id, node, placeholderRoot, placeholderCb) => {\n    if (node == nextSibling) {\n      onNextSibling();\n    }\n\n    if (op == \"#\") {\n      (placeholders[id] = placeholder).i++;\n    } else if (op == \"!\") {\n      if (runtime.l[id] && placeholders[id]) {\n        nextSibling = node.nextSibling;\n        onNextSibling = () => placeholders[id].c();\n      }\n    } else if (node.tagName == \"T\" && (id = node.getAttribute(runtime.i))) {\n      nextSibling = node.nextSibling;\n      onNextSibling = () => {\n        node.remove();\n        placeholderRoot || replace(id, node);\n        placeholder.c();\n      };\n      placeholder =\n        placeholders[id] ||\n        (placeholderRoot = placeholders[id] =\n          {\n            i: runtime.l[id] ? 1 : 2,\n            c(start = runtime.l[\"^\" + id]) {\n              if (--placeholderRoot.i) return 1;\n              for (\n                ;\n                (nextSibling =\n                  runtime.l[id].previousSibling || start).remove(),\n                  start != nextSibling;\n\n              );\n              replace(id, node);\n            },\n          });\n      // repurpose \"op\" for callbacks ...carefully\n      if ((op = runtime.j[id])) {\n        placeholderCb = placeholder.c;\n        placeholder.c = () => placeholderCb() || op(runtime.r);\n      }\n    }\n  };\n})";

package/dist/html/writer.d.ts

@@ -37,10 +37,11 @@ export declare function _id(): string;
 export declare function _scope_id(): number;
 export declare function _peek_scope_id(): number;
 export declare function getScopeById(scopeId: number | undefined): ScopeInternals | undefined;
-export declare function _set_serialize_reason(reason: undefined | 0 | 1): void;
-export declare function _scope_reason(): 0 | 1 | undefined;
-export declare function _serialize_if(condition: undefined | 1 | Record<string, 1>, key: string): 1 | undefined;
-export declare function _serialize_guard(condition: undefined | 1 | Record<string, 1>, key: string): 0 | 1;
+export type SerializeReasonValue = undefined | number | Partial<Record<string, 0 | 1>>;
+export declare function _set_serialize_reason(reason: SerializeReasonValue): void;
+export declare function _scope_reason(): SerializeReasonValue;
+export declare function _serialize_if(condition: SerializeReasonValue, key: number): 1 | undefined;
+export declare function _serialize_guard(condition: SerializeReasonValue, key: number): 0 | 1;
 export declare function _el_resume(scopeId: number, accessor: Accessor, shouldResume?: 0 | 1): string;
 export declare function _sep(shouldResume: 0 | 1): "" | "<!>";
 export declare function _el(scopeId: number, id: string): () => void;
@@ -56,6 +57,8 @@ export declare function _for_in(obj: Falsy | {}, cb: (key: string, value: unknow
 export declare function _for_to(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, by: Falsy | ((v: number) => unknown), scopeId: number, accessor: Accessor, serializeBranch?: 0 | 1, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1): void;
 export declare function _for_until(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, by: Falsy | ((v: number) => unknown), scopeId: number, accessor: Accessor, serializeBranch?: 0 | 1, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1): void;
 export declare function _if(cb: () => void | number, scopeId: number, accessor: Accessor, serializeBranch?: 0 | 1, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1): void;
+export declare function _show_start(display: unknown, mark?: unknown): void;
+export declare function _show_end(scopeId: number, accessor: Accessor, display: unknown, serializeMarker?: 0 | 1, serializeStateful?: 0 | 1, parentEndTag?: string | 0, singleNode?: 1 | 0): void;
 declare let writeScope: (scopeId: number, partialScope: PartialScope) => ScopeInternals;
 export { writeScope as _scope };
 export declare function _existing_scope(scopeId: number): ScopeInternals;
@@ -98,7 +101,7 @@ export declare class State implements SerializeState {
     flushScopes: boolean;
     writeScopes: Record<number, PartialScope>;
     readyIds: Set<string> | null;
-    serializeReason: undefined | 0 | 1;
+    serializeReason: SerializeReasonValue;
     constructor($global: $Global & {
         renderId: string;
         runtimeId: string;

package/dist/html.d.ts

@@ -1,10 +1,10 @@
 export { attrTag, attrTags } from "./common/attr-tag";
 export { _assert_hoist, _el_read_error, _hoist_read_error, } from "./common/errors";
 export { _flush_head, withLoadAssets, withPageAssets } from "./html/assets";
-export { _attr, _attr_and, _attr_class, _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, } from "./html/attrs";
+export { _attr, _attr_and, _attr_class, _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, _style_html, } from "./html/attrs";
 export { compat } from "./html/compat";
-export { _escape, _escape_comment, _escape_script, _escape_style, _to_text, _unescaped, } from "./html/content";
+export { _escape, _escape_comment, _escape_script, _escape_style, _escape_style_value, _to_text, _unescaped, } from "./html/content";
 export { _content, _content_resume, _dynamic_tag } from "./html/dynamic-tag";
 export { forIn, forInBy, forOf, forOfBy, forStepBy, forTo, forUntil, } from "./html/for";
 export { _template } from "./html/template";
-export { _attr_content, _await, _el, _el_resume, _existing_scope, _for_in, _for_of, _for_to, _for_until, _hoist, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _subscribe, _trailers, _try, _var, $global, } from "./html/writer";
+export { _attr_content, _await, _el, _el_resume, _existing_scope, _for_in, _for_of, _for_to, _for_until, _hoist, _html, _id, _if, _peek_scope_id, _resume, _resume_branch, _scope, _scope_id, _scope_reason, _scope_with_id, _script, _sep, _serialize_guard, _serialize_if, _set_serialize_reason, _show_end, _show_start, _subscribe, _trailers, _try, _var, $global, } from "./html/writer";

package/dist/html.js

@@ -375,6 +375,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -419,6 +424,9 @@ function _escape_script(val) {
 function _escape_style(val) {
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
+function _escape_style_value(val) {
+	return val || val === 0 ? escapeStyleValue(val + "") : "";
+}
 function _escape_comment(val) {
 	return val ? escapeCommentStr(val + "") : val === 0 ? "0" : "";
 }
@@ -1137,7 +1145,7 @@ function _scope_reason() {
 	return $chunk.boundary.state.serializeReason = void 0, 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;
@@ -1231,6 +1239,13 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
+function _show_start(display, mark) {
+	display ? mark && $chunk.writeHTML($chunk.boundary.state.mark("[", "")) : $chunk.writeHTML("<t hidden>");
+}
+function _show_end(scopeId, accessor, display, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	let branchId = _scope_id(), wrap = !display;
+	wrap && $chunk.writeHTML("</t>"), writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, wrap || singleNode ? 1 : void 0, " " + branchId);
+}
 function _existing_scope(scopeId) {
 	return writeScope(scopeId, {});
 }
@@ -1480,7 +1495,7 @@ var State = class {
 		return scripts;
 	}
 	flushScript() {
-		let { boundary } = this, { state } = boundary, { $global, runtimePrefix, nonceAttr } = state, needsWalk = state.walkOnNextFlush;
+		let { boundary } = this, { state } = boundary, { $global, runtimePrefix } = state, needsWalk = state.walkOnNextFlush;
 		needsWalk && (state.walkOnNextFlush = !1);
 		let readyResumeScripts = this.flushReadyScripts();
 		for (let channel; channel = state.serializer.pendingReadyChannel();) {
@@ -1488,9 +1503,9 @@ var State = class {
 			state.needsMainRuntime = !0, readyResumeScripts = concatScripts(readyResumeScripts, state.writeReady(channel.readyId, concatSequence(depsMarker(deps), resumes)));
 		}
 		readyResumeScripts && (needsWalk = !0);
-		let { effects } = this, { html, scripts } = this;
+		let effects = this.async ? "" : this.effects, { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), state.writeReorders) {
-			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, html += "<style " + state.commentPrefix + nonceAttr + ">t{display:none}</style>", scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector(\"style[\"+e.i+\"]\")||\"\"),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
+			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
 			for (let reorderedChunk of state.writeReorders) {
 				let { reorderId } = reorderedChunk, readyReservations = [], reorderHTML = "", reorderEffects = "", reorderScripts = "", cur = reorderedChunk;
 				for (reorderedChunk.reorderId = null;;) {
@@ -1501,11 +1516,11 @@ var State = class {
 				}
 				reorderEffects && (state.hasWrittenResume || (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[]")), reorderScripts = concatScripts(reorderScripts, "_.push(\"" + reorderEffects + "\")"));
 				for (let reservation of readyReservations) scripts = concatScripts(scripts, reservation);
-				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
+				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
-		return needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.effects = this.lastEffect = state.resumes = "", this;
+		return needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.async || (this.effects = this.lastEffect = ""), state.resumes = "", this;
 	}
 	flushHTML() {
 		let { boundary } = this, { state } = boundary;
@@ -1644,6 +1659,10 @@ function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, s
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
+function _style_html(decls) {
+	let id = _id();
+	return `<style${_attr_nonce()} class=${id}>.${id}~*{${decls}}</style>`;
+}
 function _attr(name, value) {
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
@@ -1781,8 +1800,8 @@ function render(input = {}) {
 }
 function getDefaultRenderId(template) {
 	if (template.i) {
-		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 53];
-		for (n = n / 53 | 0; n; n >>>= 6) r += ENCODE_CHARS[n & 63];
+		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 52];
+		for (n = n / 52 | 0; n; n = n / 63 | 0) r += ENCODE_CHARS[n % 63];
 		return r;
 	}
 	return "_";
@@ -1984,4 +2003,4 @@ exports.$global = $global, exports._assert_hoist = _assert_hoist, exports._attr
 	get: function() {
 		return _dynamic_tag;
 	}
-}), exports._el = _el, exports._el_read_error = _el_read_error, exports._el_resume = _el_resume, exports._escape = _escape, 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, exports._for_until = _for_until, exports._hoist = _hoist, exports._hoist_read_error = _hoist_read_error, exports._html = _html, exports._id = _id, exports._if = _if, exports._peek_scope_id = _peek_scope_id, exports._resume = _resume, exports._resume_branch = _resume_branch, exports._scope = writeScope, exports._scope_id = _scope_id, exports._scope_reason = _scope_reason, exports._scope_with_id = _scope_with_id, exports._script = _script, exports._sep = _sep, exports._serialize_guard = _serialize_guard, exports._serialize_if = _serialize_if, exports._set_serialize_reason = _set_serialize_reason, exports._subscribe = _subscribe, exports._template = _template, exports._to_text = _to_text, exports._trailers = _trailers, exports._try = _try, exports._unescaped = _unescaped, exports._var = _var, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forInBy = forInBy, exports.forOf = forOf, exports.forOfBy = forOfBy, exports.forStepBy = forStepBy, exports.forTo = forTo, exports.forUntil = forUntil, exports.withLoadAssets = withLoadAssets, exports.withPageAssets = withPageAssets;
+}), exports._el = _el, exports._el_read_error = _el_read_error, exports._el_resume = _el_resume, 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, exports._for_of = _for_of, exports._for_to = _for_to, exports._for_until = _for_until, exports._hoist = _hoist, exports._hoist_read_error = _hoist_read_error, exports._html = _html, exports._id = _id, exports._if = _if, exports._peek_scope_id = _peek_scope_id, exports._resume = _resume, exports._resume_branch = _resume_branch, exports._scope = writeScope, exports._scope_id = _scope_id, exports._scope_reason = _scope_reason, exports._scope_with_id = _scope_with_id, exports._script = _script, 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, exports._trailers = _trailers, exports._try = _try, exports._unescaped = _unescaped, exports._var = _var, exports.attrTag = attrTag, exports.attrTags = attrTags, exports.compat = compat, exports.forIn = forIn, exports.forInBy = forInBy, exports.forOf = forOf, exports.forOfBy = forOfBy, exports.forStepBy = forStepBy, exports.forTo = forTo, exports.forUntil = forUntil, exports.withLoadAssets = withLoadAssets, exports.withPageAssets = withPageAssets;

package/dist/html.mjs

@@ -374,6 +374,11 @@ function stringifyClassObject(name, value) {
 function stringifyStyleObject(name, value) {
 	return value || value === 0 ? name + ":" + value : "";
 }
+function escapeStyleValue(str) {
+	let closers = "", result = str.replace(/[\\"'{};<>]|\/(?=\*)/g, (c) => c === "<" ? "\\3C " : c === ";" ? "\\3B " : c === "{" ? "\\7B " : "\\" + c);
+	for (let c of result) c === "(" ? closers = ")" + closers : c === "[" ? closers = "]" + closers : c === closers[0] && (closers = closers.slice(1));
+	return result + closers;
+}
 function isEventHandler(name) {
 	return /^on[A-Z-]/.test(name);
 }
@@ -418,6 +423,9 @@ function _escape_script(val) {
 function _escape_style(val) {
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
+function _escape_style_value(val) {
+	return val || val === 0 ? escapeStyleValue(val + "") : "";
+}
 function _escape_comment(val) {
 	return val ? escapeCommentStr(val + "") : val === 0 ? "0" : "";
 }
@@ -1136,7 +1144,7 @@ function _scope_reason() {
 	return $chunk.boundary.state.serializeReason = void 0, 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;
@@ -1230,6 +1238,13 @@ function writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, p
 	} else $chunk.writeHTML(endTag + _el_resume(scopeId, accessor));
 	else $chunk.writeHTML(endTag);
 }
+function _show_start(display, mark) {
+	display ? mark && $chunk.writeHTML($chunk.boundary.state.mark("[", "")) : $chunk.writeHTML("<t hidden>");
+}
+function _show_end(scopeId, accessor, display, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	let branchId = _scope_id(), wrap = !display;
+	wrap && $chunk.writeHTML("</t>"), writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, wrap || singleNode ? 1 : void 0, " " + branchId);
+}
 function _existing_scope(scopeId) {
 	return writeScope(scopeId, {});
 }
@@ -1479,7 +1494,7 @@ var State = class {
 		return scripts;
 	}
 	flushScript() {
-		let { boundary } = this, { state } = boundary, { $global, runtimePrefix, nonceAttr } = state, needsWalk = state.walkOnNextFlush;
+		let { boundary } = this, { state } = boundary, { $global, runtimePrefix } = state, needsWalk = state.walkOnNextFlush;
 		needsWalk && (state.walkOnNextFlush = !1);
 		let readyResumeScripts = this.flushReadyScripts();
 		for (let channel; channel = state.serializer.pendingReadyChannel();) {
@@ -1487,9 +1502,9 @@ var State = class {
 			state.needsMainRuntime = !0, readyResumeScripts = concatScripts(readyResumeScripts, state.writeReady(channel.readyId, concatSequence(depsMarker(deps), resumes)));
 		}
 		readyResumeScripts && (needsWalk = !0);
-		let { effects } = this, { html, scripts } = this;
+		let effects = this.async ? "" : this.effects, { html, scripts } = this;
 		if (state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(scripts, "(e=>(self[e]||=(l,f=e+l,s=f.length,a={},d=[],t=document,n=t.createTreeWalker(t,129))=>t=self[e][l]={i:f,d:t,l:a,v:d,x(){},w(e,l,r){for(;e=n.nextNode();)t.x(l=(l=e.data)&&!l.indexOf(f)&&(a[r=l.slice(s+1)]=e,l[s]),r,e),l>\"#\"&&d.push(e)}},self[e]))(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")")), scripts = concatScripts(scripts, readyResumeScripts), effects && (needsWalk = !0, state.resumes = state.resumes ? state.resumes + ",\"" + effects + "\"" : "\"" + effects + "\""), state.resumes && (state.hasWrittenResume ? scripts = concatScripts(scripts, runtimePrefix + ".r.push(" + state.resumes + ")") : (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[" + state.resumes + "]"))), state.writeReorders) {
-			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, html += "<style " + state.commentPrefix + nonceAttr + ">t{display:none}</style>", scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.d.head.append(e.d.querySelector(\"style[\"+e.i+\"]\")||\"\"),e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
+			needsWalk = !0, state.hasReorderRuntime || (state.hasReorderRuntime = !0, scripts = concatScripts(scripts, "(e=>{if(e.j)return;let i,l,r,t=e.p={},c=(i,l)=>e.l[i].replaceWith(...l.childNodes);e.j={},e.x=(n,a,d,o,g)=>{d==r&&i(),\"#\"==n?(t[a]=l).i++:\"!\"==n?e.l[a]&&t[a]&&(r=d.nextSibling,i=()=>t[a].c()):\"T\"==d.tagName&&(a=d.getAttribute(e.i))&&(r=d.nextSibling,i=()=>{d.remove(),o||c(a,d),l.c()},l=t[a]||(o=t[a]={i:e.l[a]?1:2,c(i=e.l[\"^\"+a]){if(--o.i)return 1;for(;(r=e.l[a].previousSibling||i).remove(),i!=r;);c(a,d)}}),(n=e.j[a])&&(g=l.c,l.c=()=>g()||n(e.r)))}})(" + runtimePrefix + ")"));
 			for (let reorderedChunk of state.writeReorders) {
 				let { reorderId } = reorderedChunk, readyReservations = [], reorderHTML = "", reorderEffects = "", reorderScripts = "", cur = reorderedChunk;
 				for (reorderedChunk.reorderId = null;;) {
@@ -1500,11 +1515,11 @@ var State = class {
 				}
 				reorderEffects && (state.hasWrittenResume || (state.hasWrittenResume = !0, scripts = concatScripts(scripts, runtimePrefix + ".r=[]")), reorderScripts = concatScripts(reorderScripts, "_.push(\"" + reorderEffects + "\")"));
 				for (let reservation of readyReservations) scripts = concatScripts(scripts, reservation);
-				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
+				scripts = concatScripts(scripts, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}"), html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
-		return needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.effects = this.lastEffect = state.resumes = "", this;
+		return needsWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), this.html = html, this.scripts = scripts, this.async || (this.effects = this.lastEffect = ""), state.resumes = "", this;
 	}
 	flushHTML() {
 		let { boundary } = this, { state } = boundary;
@@ -1643,6 +1658,10 @@ function _attr_details_or_dialog_open(scopeId, nodeAccessor, open, openChange, s
 function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
+function _style_html(decls) {
+	let id = _id();
+	return `<style${_attr_nonce()} class=${id}>.${id}~*{${decls}}</style>`;
+}
 function _attr(name, value) {
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
@@ -1780,8 +1799,8 @@ function render(input = {}) {
 }
 function getDefaultRenderId(template) {
 	if (template.i) {
-		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 53];
-		for (n = n / 53 | 0; n; n >>>= 6) r += ENCODE_CHARS[n & 63];
+		let ENCODE_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789", n = Math.random() * 4294967296 >>> 0, r = ENCODE_CHARS[n % 52];
+		for (n = n / 52 | 0; n; n = n / 63 | 0) r += ENCODE_CHARS[n % 63];
 		return r;
 	}
 	return "_";
@@ -1979,4 +1998,4 @@ function toObjectExpression(options) {
 //#region src/html/compat.ts
 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/translator/core/index.d.ts

@@ -106,6 +106,7 @@ declare const _default: {
     "<return>": import("@marko/compiler/babel-utils").Tag;
     "<script>": import("@marko/compiler/babel-utils").Tag;
     "<server>": import("@marko/compiler/babel-utils").Tag;
+    "<show>": import("@marko/compiler/babel-utils").Tag;
     "<static>": import("@marko/compiler/babel-utils").Tag;
     "<style>": import("@marko/compiler/babel-utils").Tag;
     "<try>": import("@marko/compiler/babel-utils").Tag;

package/dist/translator/core/show.d.ts

@@ -0,0 +1,17 @@
+import { types as t } from "@marko/compiler";
+import { type Tag } from "@marko/compiler/babel-utils";
+import { type Binding } from "../util/references";
+declare const kStartBinding: unique symbol;
+declare const kStaticDisplay: unique symbol;
+declare const kSingleNodeBody: unique symbol;
+declare const kDisplayRef: unique symbol;
+declare module "@marko/compiler/dist/types" {
+    interface NodeExtra {
+        [kStartBinding]?: Binding;
+        [kStaticDisplay]?: boolean;
+        [kSingleNodeBody]?: boolean;
+        [kDisplayRef]?: t.Expression;
+    }
+}
+declare const _default: Tag;
+export default _default;

package/dist/translator/core/style.d.ts

@@ -1,7 +1,13 @@
 import { type Tag } from "@marko/compiler/babel-utils";
+import { type Binding } from "../util/references";
+interface DynamicStyle {
+    names: string[];
+    binding: Binding;
+}
 declare module "@marko/compiler/dist/types" {
     interface NodeExtra {
         styleImportPath?: string | null;
+        dynamicStyle?: DynamicStyle;
     }
 }
 declare const _default: Tag;

package/dist/translator/index.d.ts

@@ -113,6 +113,7 @@ export declare const taglibs: (string | {
     "<return>": import("@marko/compiler/babel-utils").Tag;
     "<script>": import("@marko/compiler/babel-utils").Tag;
     "<server>": import("@marko/compiler/babel-utils").Tag;
+    "<show>": import("@marko/compiler/babel-utils").Tag;
     "<static>": import("@marko/compiler/babel-utils").Tag;
     "<style>": import("@marko/compiler/babel-utils").Tag;
     "<try>": import("@marko/compiler/babel-utils").Tag;