marko 6.1.24 → 6.2.0

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

@@ -56,6 +56,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;

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, "\\$&").replace(/</g, "\\3C ");
+	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" : "";
 }
@@ -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();) {
@@ -1490,7 +1505,7 @@ var State = class {
 		readyResumeScripts && (needsWalk = !0);
 		let { effects } = this, { 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,7 +1516,7 @@ 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;
 		}
@@ -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, "\\$&").replace(/</g, "\\3C ");
+	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" : "";
 }
@@ -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();) {
@@ -1489,7 +1504,7 @@ var State = class {
 		readyResumeScripts && (needsWalk = !0);
 		let { effects } = this, { 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,7 +1515,7 @@ 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;
 		}
@@ -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;