@torpor/view 0.4.18 → 1.0.0

package/dist/compile.cjs

@@ -1,13 +1,210 @@
-
-//#region src/compile/utils/endOfTemplateString.ts
-function endOfTemplateString(content, start) {
-	let level = 0;
-	for (let j = start + 1; j < content.length; j++) if (content[j] === "`" && content[j - 1] !== "\\" && level === 0) return j;
-	else if (content[j] === "{" && (level > 0 || content[j - 1] === "$")) level += 1;
-	else if (content[j] === "}" && level > 0) level -= 1;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/compile/utils/endOfString.ts
+function endOfString(char, content, start) {
+	for (let j = start + 1; j < content.length; j++) if (content[j] === char && content[j - 1] !== "\\") return j;
 	return content.length;
 }
-
+//#endregion
+//#region src/compile/utils/codeScanner.ts
+/**
+* Shared scanner for skipping over non-code parts of JavaScript expression
+* text: string literals, template literals (including their interpolations),
+* comments, and regex literals. Used everywhere the compiler scans
+* expression text and needs to tell code from literal text.
+*
+* Note: this is for *code* contexts. For torpor template text (where quotes
+* are literal characters and `{...}` are interpolation delimiters), use this
+* only for the *interiors* of `{...}` expressions -- the template level
+* itself has different rules.
+*/
+const REGEX_KEYWORDS = /* @__PURE__ */ new Set([
+	"return",
+	"typeof",
+	"instanceof",
+	"in",
+	"of",
+	"new",
+	"delete",
+	"void",
+	"throw",
+	"case",
+	"do",
+	"else",
+	"yield",
+	"await"
+]);
+/**
+* If the character at `start` begins a string literal, a template literal, a
+* comment (line or block), or a regex literal, returns the index just after
+* it. Returns -1 if it doesn't (a `/` that is division, or any other
+* character).
+*/
+function skipStringOrComment(value, start) {
+	return skipInRange(value, start);
+}
+/**
+* Returns the [start, end) ranges of `value` that are code -- i.e. not the
+* contents of string literals, regex literals, or comments. Template string
+* contents are skipped, except for the contents of `${...}` interpolations,
+* which are code again.
+*/
+function codeRanges(value) {
+	const ranges = [];
+	let codeStart = 0;
+	let i = 0;
+	while (i < value.length) {
+		const next = skipInRange(value, i, ranges, codeStart);
+		if (next !== -1) {
+			i = next;
+			codeStart = i;
+		} else i += 1;
+	}
+	pushRange(ranges, codeStart, value.length);
+	return ranges;
+}
+/**
+* `skipStringOrComment` with optional collection of the interrupted code
+* range (for `codeRanges`), so there is a single implementation of the scan
+* order.
+*/
+function skipInRange(value, start, ranges, codeStart) {
+	const char = value[start];
+	if (char === "'" || char === "\"") {
+		if (ranges) pushRange(ranges, codeStart, start);
+		return endOfString(char, value, start) + 1;
+	}
+	if (char === "`") {
+		if (ranges) pushRange(ranges, codeStart, start);
+		return skipTemplateString(value, start, ranges);
+	}
+	if (char === "/" && value[start + 1] === "/") {
+		if (ranges) pushRange(ranges, codeStart, start);
+		const end = value.indexOf("\n", start + 2);
+		return end === -1 ? value.length : end;
+	}
+	if (char === "/" && value[start + 1] === "*") {
+		if (ranges) pushRange(ranges, codeStart, start);
+		const end = value.indexOf("*/", start + 2);
+		return end === -1 ? value.length : end + 2;
+	}
+	if (char === "/" && isRegexPosition(value, start)) {
+		if (ranges) pushRange(ranges, codeStart, start);
+		return skipRegexLiteral(value, start);
+	}
+	return -1;
+}
+/**
+* Skips over a template string, given the index of its opening backtick, and
+* returns the index just after the closing backtick. Handles escaped
+* characters, and scans `${...}` interpolations correctly (nested strings,
+* templates, comments and regexes within them can't desync the scan).
+*/
+function skipTemplateString(value, start, ranges) {
+	let i = start + 1;
+	while (i < value.length) {
+		const char = value[i];
+		if (char === "\\") i += 2;
+		else if (char === "`") return i + 1;
+		else if (char === "$" && value[i + 1] === "{") i = endOfInterpolation(value, i + 2, ranges) + 1;
+		else i += 1;
+	}
+	return value.length;
+}
+/**
+* Skips over the code inside a `${...}` interpolation, given the index just
+* after the `${`, collecting its code ranges when provided. Returns the
+* index of the matching `}`.
+*/
+function endOfInterpolation(value, start, ranges) {
+	let level = 0;
+	let codeStart = start;
+	let i = start;
+	while (i < value.length) {
+		const char = value[i];
+		if (char === "{") {
+			level += 1;
+			i += 1;
+		} else if (char === "}") {
+			if (level === 0) {
+				pushRange(ranges, codeStart, i);
+				return i;
+			}
+			level -= 1;
+			i += 1;
+		} else {
+			const next = skipInRange(value, i, ranges, codeStart);
+			if (next !== -1) {
+				i = next;
+				codeStart = i;
+			} else i += 1;
+		}
+	}
+	pushRange(ranges, codeStart, value.length);
+	return value.length;
+}
+/**
+* Decides whether the `/` at `slashIndex` starts a regex literal (rather
+* than being division), by looking at the previous significant character.
+* The standard lexical heuristic -- not a full parse, but correct for
+* real-world code.
+*/
+function isRegexPosition(value, slashIndex) {
+	let i = slashIndex - 1;
+	while (i >= 0) {
+		const char = value[i];
+		if (char === " " || char === "	" || char === "\n" || char === "\r") i -= 1;
+		else if (char === "/" && value[i - 1] === "*") {
+			const open = value.lastIndexOf("/*", i - 2);
+			if (open === -1) return true;
+			i = open - 1;
+		} else break;
+	}
+	if (i < 0) return true;
+	const char = value[i];
+	if (char === ")" || char === "]" || char === "}" || char === "\"" || char === "'" || char === "`") return false;
+	if (/[a-z0-9_$]/i.test(char)) {
+		let wordStart = i;
+		while (wordStart >= 0 && /[a-z0-9_$]/i.test(value[wordStart])) wordStart -= 1;
+		return REGEX_KEYWORDS.has(value.substring(wordStart + 1, i + 1));
+	}
+	if (char === "+" || char === "-") {
+		if (value[i - 1] === char) {
+			const before = value[i - 2];
+			return !(before && /[a-z0-9_$)\]]/i.test(before));
+		}
+		return true;
+	}
+	return true;
+}
+/**
+* Skips over a regex literal, given the index of its opening `/`, and
+* returns the index just after its flags. Returns -1 if the literal is
+* unterminated (in which case the `/` is treated as division).
+*/
+function skipRegexLiteral(value, start) {
+	let i = start + 1;
+	let inClass = false;
+	while (i < value.length) {
+		const char = value[i];
+		if (char === "\\") i += 2;
+		else if (char === "\n") return -1;
+		else if (char === "[") {
+			inClass = true;
+			i += 1;
+		} else if (char === "]") {
+			inClass = false;
+			i += 1;
+		} else if (char === "/" && !inClass) {
+			i += 1;
+			while (i < value.length && /[a-z]/i.test(value[i])) i += 1;
+			return i;
+		} else i += 1;
+	}
+	return -1;
+}
+function pushRange(ranges, start, end) {
+	if (ranges && end > start) ranges.push([start, end]);
+}
 //#endregion
 //#region src/compile/utils/Builder.ts
 var Builder = class {
@@ -24,7 +221,7 @@ var Builder = class {
 	append(text) {
 		if (this.#mapped) {
 			this.lineMap.push(this.#text.length);
-			for (let i$1 = 0; i$1 < text.length; i$1++) if (text[i$1] === "\n") this.lineMap.push(this.#text.length + i$1);
+			for (let i = 0; i < text.length; i++) if (text[i] === "\n") this.lineMap.push(this.#text.length + i);
 			this.#text += "\n" + text;
 			return;
 		}
@@ -40,12 +237,12 @@ var Builder = class {
 			} else {
 				if (text[i] === "}" || text[i] === ")" || text[i] === "]") this.#space -= 1;
 				this.#text += "	".repeat(Math.max(0, this.#space));
-				const start$1 = i;
+				const start = i;
 				while (i < text.length && text[i] !== "\n") {
-					if (text[i] === "`") i = endOfTemplateString(text, i);
+					if (text[i] === "`") i = skipStringOrComment(text, i) - 1;
 					i++;
 				}
-				const line = text.substring(start$1, i + 1);
+				const line = text.substring(start, i + 1);
 				if (line.startsWith("*")) this.#text += " ";
 				this.#text += line;
 				if (text[i - 1] === "{" || text[i - 1] === "(" || text[i - 1] === "[") this.#space += 1;
@@ -58,7 +255,99 @@ var Builder = class {
 		return this.#text;
 	}
 };
-
+//#endregion
+//#region src/compile/utils/isParentNode.ts
+function isParentNode(node) {
+	return "children" in node;
+}
+//#endregion
+//#region src/compile/utils/collectMarkupExpressions.ts
+/**
+* Walks a markup tree and returns every expression string it contains —
+* `@control (...)` statements, reactive attribute values, and `{...}` text
+* interpolations — concatenated. Used for import detection: `$`-primitives
+* used inside markup (e.g. `@if ($pending(() => $state.data))`,
+* `disabled={$pending(...)}`) must be imported, and the script-only scan in
+* `buildCode`/`buildServerCode` doesn't see them.
+*
+* Static attribute values and literal text outside `{...}` are excluded, so a
+* plain string containing e.g. `$pending` does not produce a spurious import.
+*/
+function collectMarkupExpressions(root) {
+	let out = "";
+	const walk = (node) => {
+		if (node.type === "control") out += node.statement + "\n";
+		if (node.type === "element" || node.type === "component" || node.type === "special") {
+			for (const attribute of node.attributes) if (attribute.reactive && attribute.value !== void 0) out += attribute.value + "\n";
+		}
+		if (node.type === "text") out += extractInterpolations(node.content) + "\n";
+		if (isParentNode(node)) for (const child of node.children) walk(child);
+	};
+	walk(root);
+	return out;
+}
+/**
+* Extracts the `{expr}` interpolation segments from text content (level 0
+* text is prose and is dropped), skipping string literals, template strings,
+* comments and regex literals inside the braces (they're copied into the
+* output verbatim).
+*/
+function extractInterpolations(content) {
+	let out = "";
+	let level = 0;
+	for (let i = 0; i < content.length; i++) {
+		const char = content[i];
+		if (char === "{") {
+			if (level === 0) out += "\n";
+			level++;
+			out += char;
+		} else if (char === "}") {
+			level--;
+			out += char;
+		} else if (level > 0) {
+			const skipped = skipStringOrComment(content, i);
+			if (skipped !== -1) {
+				out += content.substring(i, skipped);
+				i = skipped - 1;
+				continue;
+			}
+			out += char;
+		}
+	}
+	return out;
+}
+//#endregion
+//#region src/compile/utils/markupRendersComponent.ts
+/**
+* Returns true if `markup` renders anything that forwards the component's
+* `$context` parameter: a child component invocation (`<Child />`), a
+* self-recursive `<@component self>`, or a `<slot>` definition (whose
+* generated render call passes `$context` through to the filling parent).
+*
+* `contextProps` only captures *direct* `$context.x` reads in the script, so
+* this is needed to decide whether the `$context` parameter is actually used:
+* every child-component / slot render call passes `$context` positionally
+* (see buildComponentNode / buildSlotNode and their server counterparts),
+* even when the component never names `$context` explicitly.
+*
+* Bias is towards `true`: when uncertain we keep `$context` named, which is
+* always safe at the cost of a missed unused-parameter cleanup.
+*/
+function markupRendersComponent(markup) {
+	return nodeRendersComponent(markup);
+}
+function nodeRendersComponent(node) {
+	if (node.type === "component") return true;
+	if (node.type === "special") {
+		const tagName = node.tagName;
+		if (tagName === "@component" || tagName === "slot") return true;
+	}
+	const children = node.children;
+	if (children) {
+		for (const child of children) if (nodeRendersComponent(child)) return true;
+	}
+	return false;
+}
 //#endregion
 //#region src/compile/build/client/addMappedText.ts
 function addMappedText(preText, text, postText, span, status, b) {
@@ -76,7 +365,6 @@ function addMappedText(preText, text, postText, span, status, b) {
 		});
 	} else b.append(preText + text + postText);
 }
-
 //#endregion
 //#region src/compile/build/client/addPopDevBoundary.ts
 function addPopDevBoundary(status, b) {
@@ -86,7 +374,6 @@ function addPopDevBoundary(status, b) {
 		b.append(`t_pop_dev_bound();`);
 	}
 }
-
 //#endregion
 //#region src/compile/build/client/addPushDevBoundary.ts
 function addPushDevBoundary(type, name, status, b) {
@@ -100,14 +387,73 @@ function addPushDevBoundary(type, name, status, b) {
 		b.append("");
 	}
 }
-
 //#endregion
 //#region src/compile/types/comments.ts
-const ANCHOR_COMMENT = "<!>";
 const HYDRATION_START_COMMENT = "<![>";
 const HYDRATION_END_COMMENT = "<!]>";
 const HYDRATION_BREAK_COMMENT = "<!^>";
-
+//#endregion
+//#region src/compile/utils/isControlNode.ts
+function isControlNode(node) {
+	return node.type === "control";
+}
+//#endregion
+//#region src/compile/utils/isElementNode.ts
+function isElementNode(node) {
+	return node.type === "element";
+}
+//#endregion
+//#region src/compile/utils/nonRenderingOperations.ts
+/**
+* Control operations that produce no DOM output within a fragment.
+*
+* Used by both the fragment builder (to find the first child that actually
+* renders) and the whitespace trimmer (so that whitespace adjacent to these
+* nodes is treated as leading/trailing whitespace of the container, rather
+* than as significant inter-sibling whitespace — without this, every row of
+* a `@for { @key = ...; <tr>...</tr> }` would emit a leading whitespace
+* text node, since the whitespace sits between the @key and the <tr>).
+*/
+const NON_RENDERING_OPERATIONS = /* @__PURE__ */ new Set([
+	"@key",
+	"@const",
+	"@console",
+	"@debugger",
+	"@function",
+	"@async function"
+]);
+//#endregion
+//#region src/compile/utils/getSingleElementRoot.ts
+/**
+* Returns the single rendering `Element` root child of `children` if the
+* fragment is "single-root element" — i.e. it has exactly one child that
+* renders to the DOM, that child is an `Element`, and every other child is a
+* non-rendering control node (`@key`, `@const`, …) or a comment. Returns
+* `undefined` otherwise.
+*
+* When this returns an `Element`, the compiler emits the
+* `t_fragment_el` / `t_root_el` / `t_add_element` codegen path, which clones
+* the cached template's `firstElementChild` directly into the parent and
+* skips the per-instance `DocumentFragment` allocation that `getFragment`
+* produces.
+*
+* Text-root fragments (`{row.label}` standalone inside a `@for` body) are
+* intentionally excluded: their root is a `Text`, not an `Element`, so
+* `template.content.firstElementChild` would be `null`. Multi-root fragments
+* (`<tr>...</tr><tr>...</tr>`) are excluded because no single element
+* represents the whole fragment.
+*/
+function getSingleElementRoot(children) {
+	let renderingRoot;
+	for (const child of children) {
+		if (child.type === "comment") continue;
+		if (isControlNode(child) && NON_RENDERING_OPERATIONS.has(child.operation)) continue;
+		if (renderingRoot) return void 0;
+		if (!isElementNode(child)) return void 0;
+		renderingRoot = child;
+	}
+	return renderingRoot;
+}
 //#endregion
 //#region src/compile/utils/isReactive.ts
 /**
@@ -120,7 +466,6 @@ const HYDRATION_BREAK_COMMENT = "<!^>";
 function isReactive(text) {
 	return text.includes("{") && text.includes("}");
 }
-
 //#endregion
 //#region src/compile/utils/trimQuotes.ts
 /**
@@ -139,7 +484,24 @@ function trimQuotes(text) {
 	}
 	return text.substring(start, end);
 }
-
+//#endregion
+//#region src/compile/utils/voidTags.ts
+const voidTags = [
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+];
 //#endregion
 //#region src/compile/build/client/buildFragmentText.ts
 /**
@@ -148,7 +510,10 @@ function trimQuotes(text) {
 function buildFragmentText(node, status, b) {
 	const fragments = [];
 	buildNodeFragmentText(node, status, fragments);
-	if (fragments.length) b.append(`const t_fragments: DocumentFragment[] = [];`);
+	if (fragments.length) {
+		if (fragments.some((f) => !f.singleRootElement && f.usesFragmentCache !== false)) b.append(`const t_fragments: DocumentFragment[] = [];`);
+		if (fragments.some((f) => f.singleRootElement)) b.append(`const t_fragment_els: Element[] = [];`);
+	}
 }
 function buildNodeFragmentText(node, status, fragments, currentFragment) {
 	switch (node.type) {
@@ -185,7 +550,8 @@ function buildRootFragmentText(node, status, fragments) {
 		ns: status.ns,
 		effects: [],
 		events: [],
-		animations: []
+		animations: [],
+		singleRootElement: getSingleElementRoot(node.children) !== void 0
 	};
 	fragments.push(node.fragment);
 	for (let child of node.children) buildNodeFragmentText(child, status, fragments, node.fragment);
@@ -196,19 +562,26 @@ function buildControlFragmentText(node, status, fragments, currentFragment) {
 		case "@switch group":
 		case "@for group":
 		case "@await group":
+		case "@try group":
 		case "@replace group":
 		case "@html group":
-			currentFragment.text += ANCHOR_COMMENT;
+			currentFragment.text += "<!>";
 			for (let child of node.children) buildNodeFragmentText(child, status, fragments, currentFragment);
 			break;
 		default:
+			if (NON_RENDERING_OPERATIONS.has(node.operation)) {
+				for (let child of node.children) buildNodeFragmentText(child, status, fragments, currentFragment);
+				break;
+			}
 			node.fragment = {
 				number: fragments.length,
 				text: "",
 				ns: status.ns,
 				effects: [],
 				events: [],
-				animations: []
+				animations: [],
+				singleRootElement: getSingleElementRoot(node.children) !== void 0,
+				usesFragmentCache: node.operation !== "@html"
 			};
 			fragments.push(node.fragment);
 			for (let child of node.children) buildNodeFragmentText(child, status, fragments, node.fragment);
@@ -216,7 +589,7 @@ function buildControlFragmentText(node, status, fragments, currentFragment) {
 	}
 }
 function buildComponentFragmentText(node, status, fragments, currentFragment) {
-	currentFragment.text += ANCHOR_COMMENT;
+	currentFragment.text += "<!>";
 	if (node.children.length) {
 		node.fragment = {
 			number: fragments.length,
@@ -224,16 +597,18 @@ function buildComponentFragmentText(node, status, fragments, currentFragment) {
 			ns: status.ns,
 			effects: [],
 			events: [],
-			animations: []
+			animations: [],
+			singleRootElement: getSingleElementRoot(node.children) !== void 0
 		};
 		fragments.push(node.fragment);
 		for (let child of node.children) buildNodeFragmentText(child, status, fragments, node.fragment);
 	}
 }
 function buildElementFragmentText(node, status, fragments, currentFragment) {
+	const tagName = node.tagName === "@element" ? "el" : node.tagName;
 	let needsClass = node.scopeStyles;
-	currentFragment.text += `<${node.tagName}`;
-	let attributesText = node.attributes.filter((a) => !a.name.startsWith("on")).map((a) => {
+	currentFragment.text += `<${tagName}`;
+	let attributesText = node.attributes.filter((a) => !a.name.startsWith("on")).filter((a) => !(a.name === "self" && node.tagName === "@element")).map((a) => {
 		if (a.value && a.reactive) {
 			if (a.name.startsWith("data-")) return `${a.name}=""`;
 		} else if (a.name === "class" && node.scopeStyles) {
@@ -245,29 +620,33 @@ function buildElementFragmentText(node, status, fragments, currentFragment) {
 	if (attributesText) currentFragment.text += " " + attributesText;
 	if (needsClass) currentFragment.text += ` class="torp-${status.styleHash}"`;
 	currentFragment.text += ">";
-	for (let child of node.children) buildNodeFragmentText(child, status, fragments, currentFragment);
-	currentFragment.text += `</${node.tagName}>`;
+	if (!voidTags.includes(node.tagName)) {
+		for (let child of node.children) buildNodeFragmentText(child, status, fragments, currentFragment);
+		currentFragment.text += `</${tagName}>`;
+	}
 }
 function buildSpecialFragmentText(node, status, fragments, currentFragment) {
 	switch (node.tagName) {
 		case "slot":
-			currentFragment.text += ANCHOR_COMMENT;
+			currentFragment.text += "<!>";
 			for (let child of node.children) buildNodeFragmentText(child, status, fragments, node.fragment);
 			break;
 		case "fill":
+		case "filldef":
 			node.fragment = {
 				number: fragments.length,
 				text: "",
 				ns: status.ns,
 				effects: [],
 				events: [],
-				animations: []
+				animations: [],
+				singleRootElement: getSingleElementRoot(node.children) !== void 0
 			};
 			fragments.push(node.fragment);
 			for (let child of node.children) buildNodeFragmentText(child, status, fragments, node.fragment);
 			break;
 		case "@element":
-			buildComponentFragmentText(node, status, fragments, currentFragment);
+			buildElementFragmentText(node, status, fragments, currentFragment);
 			break;
 		case "@component":
 			buildComponentFragmentText(node, status, fragments, currentFragment);
@@ -275,13 +654,67 @@ function buildSpecialFragmentText(node, status, fragments, currentFragment) {
 		default: throw new Error(`Invalid special node: ${node.tagName}`);
 	}
 }
-
+//#endregion
+//#region src/compile/utils/bindingTarget.ts
+/**
+* Builds the statements that write a component's prop value back to the
+* expression it is bound to (e.g. for `&name={$state.user?.name}`).
+*
+* The bound expression may use optional chaining, which can't be assigned to
+* directly. In that case the write is compiled to a guarded assignment: the
+* prop value is read first (so the write re-runs when the child changes it),
+* the target object is read with `$peek` (so that replacing it doesn't re-run
+* the write with a stale prop value), and the value is written through it
+* when it exists:
+*
+* ```
+* bindingTarget("$state.user?.name", `props["name"]`, "name", imports)
+* // => const t_bind_name = props["name"];
+* //      const t_target_name = $peek(() => $state.user);
+* //      if (t_target_name != null) t_target_name.name = t_bind_name;
+* ```
+*
+* @param value The bound expression
+* @param right The value to assign to it
+* @param name The prop name, used to make the temp variable names unique
+* @param imports The set of runtime imports to add `$peek` to when the
+*   expression needs a guarded write
+*
+* @returns The assignment statements
+*/
+function bindingTarget(value, right, name, imports) {
+	let lastChainStart = -1;
+	for (let i = 0; i < value.length; i++) {
+		let char = value[i];
+		if (char === "\"" || char === "'" || char === "`" || char === "/") {
+			const skipped = skipStringOrComment(value, i);
+			if (skipped !== -1) {
+				i = skipped - 1;
+				continue;
+			}
+		}
+		if (char === "?" && value[i + 1] === "." && !/[0-9]/.test(value[i + 2] ?? "")) {
+			let next = value[i + 2];
+			if (next === "(") throw new Error(`Cannot bind to "${value}": optional calls are not supported in binding expressions`);
+			lastChainStart = i;
+			if (next === "[") i += 1;
+			continue;
+		}
+	}
+	if (lastChainStart === -1) return `${value} = ${right};`;
+	let guard = value.substring(0, lastChainStart);
+	let next = value[lastChainStart + 2];
+	if (next !== "[" && !/[A-Za-z0-9_$]/.test(next ?? "")) throw new Error(`Cannot bind to "${value}": unsupported optional chain in binding expression`);
+	let suffix = value.substring(lastChainStart + (next === "[" ? 2 : 1));
+	let varSuffix = name.replace(/[^a-zA-Z0-9_$]/g, "_");
+	imports?.add("$peek");
+	return `const t_bind_${varSuffix} = ${right};\nconst t_target_${varSuffix} = $peek(() => ${guard});\nif (t_target_${varSuffix} != null) t_target_${varSuffix}${suffix} = t_bind_${varSuffix};`;
+}
 //#endregion
 //#region src/compile/utils/isSpecialNode.ts
 function isSpecialNode(node) {
 	return node.type === "special";
 }
-
 //#endregion
 //#region src/compile/build/utils/nextVarName.ts
 /**
@@ -299,7 +732,6 @@ function nextVarName(name, status) {
 	status.varNames[name] += 1;
 	return varName;
 }
-
 //#endregion
 //#region src/compile/build/client/addMappedTextWithOffsets.ts
 function addMappedTextWithOffsets(preText, text, postText, spans, offsets, lengths, status, b) {
@@ -321,35 +753,50 @@ function addMappedTextWithOffsets(preText, text, postText, spans, offsets, lengt
 		}
 	} else b.append(preText + text + postText);
 }
-
 //#endregion
 //#region src/compile/build/client/buildAddFragment.ts
 function buildAddFragment(node, status, b, parentName, anchorName) {
 	if (node.fragment) {
 		const fragment = node.fragment;
 		const fragmentName = `t_fragment_${fragment.number}`;
-		status.imports.add("t_add_fragment");
 		if (fragment.effects.length > 0) {
 			status.imports.add("$run");
+			let forVarMask;
+			for (let effect of fragment.effects) if (effect.forVarMask !== void 0) {
+				if (forVarMask === void 0) forVarMask = 0;
+				forVarMask |= effect.forVarMask;
+			}
+			let trailing = "";
+			if (forVarMask !== void 0) trailing = `, undefined, { forVarMask: ${forVarMask} }`;
 			b.append("$run(() => {");
 			if (status.options.mapped === true) for (let effect of fragment.effects) addMappedTextWithOffsets("", effect.functionBody, "", effect.spans, effect.offsets, effect.lengths, status, b);
 			else b.append(fragment.effects.map((e) => e.functionBody).join("\n"));
-			b.append(`}${status.options.dev === true ? `, "setAttributes"` : ""});`);
+			b.append(`}${status.options.dev === true ? `, "setAttributes"${trailing}` : trailing});`);
 		}
-		let params = [
-			fragmentName,
-			parentName,
-			anchorName
-		];
-		if (fragment.endVarName) params.push(fragment.endVarName);
-		b.append(`t_add_fragment(${params.join(", ")});`);
-		if (fragment.endVarName) {
-			status.imports.add("t_next");
-			b.append(`t_next(${fragment.endVarName});`);
+		if (fragment.singleRootElement) {
+			status.imports.add("t_add_element");
+			b.append(`t_add_element(${fragment.endVarName ?? fragmentName}, ${parentName}, ${anchorName});`);
+			if (fragment.endVarName) {
+				status.imports.add("t_next");
+				b.append(`t_next(${fragment.endVarName});`);
+			}
+		} else {
+			status.imports.add("t_add_fragment");
+			let params = [
+				fragmentName,
+				parentName,
+				anchorName
+			];
+			if (fragment.endVarName) params.push(fragment.endVarName);
+			if (fragment.endVarName && fragment.rootVarName) params.push(fragment.rootVarName);
+			b.append(`t_add_fragment(${params.join(", ")});`);
+			if (fragment.endVarName) {
+				status.imports.add("t_next");
+				b.append(`t_next(${fragment.endVarName});`);
+			}
 		}
 	}
 }
-
 //#endregion
 //#region src/compile/parse/utils/isSpaceChar.ts
 /**
@@ -364,7 +811,6 @@ function isSpaceChar(text, index) {
 	let code = text.charCodeAt(index);
 	return code === 32 || code >= 9 && code <= 13;
 }
-
 //#endregion
 //#region src/compile/parse/utils/isSpace.ts
 /**
@@ -378,25 +824,11 @@ function isSpace(text) {
 	for (let i = 0; i < text.length; i++) if (!isSpaceChar(text, i)) return false;
 	return true;
 }
-
-//#endregion
-//#region src/compile/utils/isControlNode.ts
-function isControlNode(node) {
-	return node.type === "control";
-}
-
-//#endregion
-//#region src/compile/utils/isElementNode.ts
-function isElementNode(node) {
-	return node.type === "element";
-}
-
 //#endregion
 //#region src/compile/utils/isTextNode.ts
 function isTextNode(node) {
 	return node.type === "text";
 }
-
 //#endregion
 //#region src/compile/build/client/buildFragment.ts
 /**
@@ -421,9 +853,14 @@ function buildFragment(node, status, b, parentName, anchorName) {
 			declareFragmentVars(node.fragment, node, fragmentPath, status, b, parentName, anchorName, varPaths, false, false);
 			b.append(`]);`);
 		} else {
-			status.imports.add("t_fragment");
 			const fragmentText = fragment.text.replaceAll("`", "\\`").replaceAll(/\s+/g, " ");
-			b.append(`const ${fragmentName} = t_fragment($parent.ownerDocument!, t_fragments, ${fragment.number}, \`${fragmentText}\`${fragment.ns ? ", true" : ""});`);
+			if (fragment.singleRootElement) {
+				status.imports.add("t_fragment_el");
+				b.append(`const ${fragmentName} = t_fragment_el($parent.ownerDocument!, t_fragment_els, ${fragment.number}, \`${fragmentText}\`${fragment.ns ? ", true" : ""});`);
+			} else {
+				status.imports.add("t_fragment");
+				b.append(`const ${fragmentName} = t_fragment($parent.ownerDocument!, t_fragments, ${fragment.number}, \`${fragmentText}\`${fragment.ns ? ", true" : ""});`);
+			}
 			let fragmentPath = {
 				parent: null,
 				type: "fragment",
@@ -437,17 +874,27 @@ function buildFragment(node, status, b, parentName, anchorName) {
 }
 function maybeAddRootNodeDeclaration(node, fragment, fragmentName, status, b, varPaths) {
 	if (!node.children.length) return;
-	let firstNode = node.children[0];
-	let firstNodeIsLastNode = node.children.length === 1;
-	if (isControlNode(firstNode) && firstNode.operation.endsWith(" group") || isElementNode(firstNode) && elementNodeNeedsDeclaration(firstNode, true, firstNodeIsLastNode) || isTextNode(firstNode) && textNodeNeedsDeclaration(firstNode, true, firstNodeIsLastNode)) {} else {
-		status.imports.add("t_root");
-		const rootName = `t_root_${fragment.number}`;
-		const params = [fragmentName];
-		if (firstNode.type === "text") params.push("true");
-		const rootPath = `t_root(${params.join(", ")})`;
-		b.append(`const ${rootName} = ${rootPath};`);
-		varPaths.set(`t_root(${fragmentName})`, rootName);
-		printDebug(rootName, status, b);
+	const rootName = `t_root_${fragment.number}`;
+	const firstRendering = firstRenderingChild(node.children);
+	const isTextRoot = !!(firstRendering && isTextNode(firstRendering));
+	const rootFn = fragment.singleRootElement ? "t_root_el" : "t_root";
+	status.imports.add(rootFn);
+	const params = [fragmentName];
+	if (!fragment.singleRootElement && isTextRoot) params.push("true");
+	const rootPath = `${rootFn}(${params.join(", ")})`;
+	b.append(`const ${rootName} = ${rootPath};`);
+	varPaths.set(`${rootFn}(${fragmentName})`, rootName);
+	if (!fragment.singleRootElement) fragment.rootVarName = rootName;
+}
+/**
+* Returns the first child that actually renders to the DOM, skipping comments
+* and no-output control nodes like @key/@const.
+*/
+function firstRenderingChild(children) {
+	for (const child of children) {
+		if (child.type === "comment") continue;
+		if (isControlNode(child) && NON_RENDERING_OPERATIONS.has(child.operation)) continue;
+		return child;
 	}
 }
 function declareFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, lastChild, declare) {
@@ -470,6 +917,7 @@ function declareFragmentVars(fragment, node, path, status, b, parentName, anchor
 		case "special":
 			declareSpecialFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, lastChild, declare);
 			break;
+		case "comment": break;
 		default: throw new Error(`Invalid node type: ${node.type}`);
 	}
 }
@@ -482,6 +930,7 @@ function declareControlFragmentVars(fragment, node, path, status, b, parentName,
 		case "@switch group":
 		case "@for group":
 		case "@await group":
+		case "@try group":
 		case "@replace group":
 		case "@html group":
 			declareParentAndAnchorFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, node.operation.substring(1).replace(" group", ""), declare);
@@ -530,10 +979,17 @@ function declareElementFragmentVars(fragment, node, path, status, b, parentName,
 			if (topLevel) fragment.endVarName = node.varName;
 			const varPath = getFragmentVarPath(fragment, status, node.varName, elementPath, varPaths);
 			if (status.options.useCreateElement === true) b.append(`let ${node.varName};`);
-			else if (node.tagName === "@element") b.append(`let ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
 			else {
-				b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
-				printDebug(node.varName, status, b);
+				if (node.tagName === "@element") b.append(`let ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
+				else {
+					b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
+					node.varName;
+				}
+				const refAttribute = node.attributes.find((a) => a.name === "&ref");
+				if (refAttribute) {
+					let { value, fullyReactive } = refAttribute;
+					if (value != null && fullyReactive) b.append(`${value} = ${node.varName};`);
+				}
 			}
 		}
 	}
@@ -577,7 +1033,7 @@ function declareTextFragmentVars(fragment, node, path, status, b, varPaths, last
 			if (status.options.useCreateElement === true) b.append(`let ${node.varName};`);
 			else {
 				b.append(`const ${node.varName} = ${varPath};`);
-				printDebug(node.varName, status, b);
+				node.varName;
 			}
 		}
 	} else {
@@ -594,8 +1050,9 @@ function declareSpecialFragmentVars(fragment, node, path, status, b, parentName,
 	switch (node.tagName) {
 		case "slot":
 		case "fill":
+		case "filldef":
 			for (let [i, child] of node.children.entries()) {
-				if (node.tagName === "slot" && isSpecialNode(child) && child.tagName === "fill") continue;
+				if (node.tagName === "slot" && isSpecialNode(child) && (child.tagName === "fill" || child.tagName === "filldef")) continue;
 				declareFragmentVars(fragment, child, path, status, b, parentName, anchorName, varPaths, i === node.children.length - 1, declare);
 			}
 			break;
@@ -609,7 +1066,8 @@ function declareSpecialFragmentVars(fragment, node, path, status, b, parentName,
 	}
 }
 function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, name, declare) {
-	if (!path.parent) node.parentName = `t_fragment_${fragment.number}`;
+	const topLevel = !path.parent;
+	if (topLevel) node.parentName = `t_fragment_${fragment.number}`;
 	else {
 		const parentPath = path;
 		const oldChildren = parentPath.children;
@@ -622,7 +1080,7 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
 			if (status.options.useCreateElement === true) b.append(`let ${node.parentName} as HTMLElement;`);
 			else {
 				b.append(`const ${node.parentName} = ${parentVarPath} as HTMLElement;`);
-				printDebug(node.parentName, status, b);
+				node.parentName;
 			}
 			varPaths.set(parentVarPath, node.parentName);
 		}
@@ -635,12 +1093,13 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
 		};
 		path.children.push(anchorPath);
 		node.varName = nextVarName(`${name}_anchor`, status);
+		if (topLevel) fragment.endVarName = node.varName;
 		const anchorVarPath = getFragmentVarPath(fragment, status, node.varName, anchorPath, varPaths);
 		if (status.options.useCreateElement === true) b.append(`let ${node.varName};`);
 		else {
 			status.imports.add("t_anchor");
 			b.append(`let ${node.varName} = t_anchor(${anchorVarPath}) as HTMLElement;`);
-			printDebug(node.varName, status, b);
+			node.varName;
 		}
 	} else {
 		status.imports.add("t_cmt");
@@ -653,7 +1112,8 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
 	let node = path;
 	while (node.parent) node = node.parent;
 	let varName = `t_fragment_${fragment.number}`;
-	let varPath = getFragmentVarPathPart(node, varName, status, true);
+	const rootFn = fragment.singleRootElement ? "t_root_el" : "t_root";
+	let varPath = getFragmentVarPathPart(node, varName, status, true, rootFn);
 	for (let [existingPath, existingName] of varPaths) if (varPath.includes(existingPath)) varPath = varPath.replace(existingPath, existingName);
 	if (name !== "?") {
 		varPaths.set(varPath, name);
@@ -678,10 +1138,10 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
 	varPath = varPath.replaceAll("t_next_text", "t_next");
 	return varPath;
 }
-function getFragmentVarPathPart(path, varPath, status, root = false) {
+function getFragmentVarPathPart(path, varPath, status, root = false, rootFn = "t_root") {
 	if (root) {
-		status.imports.add("t_root");
-		varPath = `t_root(${varPath})`;
+		status.imports.add(rootFn);
+		varPath = `${rootFn}(${varPath})`;
 	} else {
 		status.imports.add("t_child");
 		varPath = `t_child(${varPath})`;
@@ -696,37 +1156,72 @@ function getFragmentVarPathPart(path, varPath, status, root = false) {
 	}
 	return varPath;
 }
-function printDebug(varName, status, b) {}
-
+//#endregion
+//#region src/compile/utils/forVarsReadIn.ts
+/**
+* Returns a bitmask of the for-loop variables whose substituted paths appear
+* in `expr`. Bit N is set when the Nth for-var (by position in `forVarNames`)
+* is read.
+*
+* After `replaceForVarNames` has run, every reference to a for-var in the
+* body has been rewritten to its data-bag path (e.g. `row` →
+* `t_item_42.data.row`, or `t_item_42.data` for single-var loops). This
+* helper scans the POST-substitution `expr` for those paths and returns a
+* bitmask — used to annotate each effect with `forVarMask` so the keyed-list
+* reconciler's no-proxy force-rerun path (`rerunRegionEffects`) can skip
+* effects that don't depend on the changed for-vars via a single bitwise AND.
+*
+* Conservative by design: a false positive (claiming a dependency that
+* doesn't really exist) just causes an unnecessary re-run, while a false
+* negative would drop a needed update. String literals that happen to
+* contain the substituted path are extremely unlikely and harmless.
+*/
+function forVarsReadIn(expr, forVarNames) {
+	let mask = 0;
+	for (let i = 0; i < forVarNames.length; i++) {
+		const subPath = forVarNames[i][1];
+		if (subPath && expr.includes(subPath)) mask |= 1 << i;
+	}
+	return mask;
+}
 //#endregion
 //#region src/compile/build/client/replaceForVarNames.ts
 /**
 * Variables used within a for loop need to be retrieved from the loop data.
 */
 function replaceForVarNames(value, status) {
-	for (let varName of status.forVarNames) value = value.replaceAll(new RegExp(`(^|\\s|\\(|\\[|\\{|!)${varName[0]}($|\\s|\\.|,|\\(|\\)|\\[|\\]|\\}|;)`, "g"), `$1${varName[1]}$2`);
-	return value;
+	if (status.forVarNames.length === 0) return value;
+	let result = "";
+	let index = 0;
+	for (let [start, end] of codeRanges(value)) {
+		result += value.substring(index, start);
+		result += replaceVarNames(value.substring(start, end), status);
+		index = end;
+	}
+	result += value.substring(index);
+	return result;
+}
+function replaceVarNames(code, status) {
+	for (let varName of status.forVarNames) code = code.replaceAll(new RegExp(`(^|\\s|\\(|\\[|\\{|!|\\?|\\.\\.\\.)${varName[0]}($|\\s|\\.|,|\\(|\\)|\\[|\\]|\\}|;|\\?)`, "g"), `$1${varName[1]}$2`);
+	return code;
 }
-
 //#endregion
 //#region src/compile/build/client/buildRun.ts
 function buildRun(functionName, functionBody, status, b) {
 	functionBody = replaceForVarNames(functionBody, status);
 	addPushDevBoundary("run", functionName, status, b);
+	let forVarMask = status.forVarNames.length > 0 ? forVarsReadIn(functionBody, status.forVarNames) : void 0;
+	let trailing = "";
+	if (status.options.dev === true) {
+		trailing = `, "${functionName}"`;
+		if (forVarMask !== void 0) trailing += `, { forVarMask: ${forVarMask} }`;
+	} else if (forVarMask !== void 0) trailing = `, undefined, { forVarMask: ${forVarMask} }`;
 	status.imports.add("$run");
 	b.append("$run(() => {");
 	b.append(functionBody);
-	b.append(`}${status.options.dev === true ? `, "${functionName}"` : ""});`);
+	b.append(`}${trailing});`);
 	addPopDevBoundary(status, b);
 }
-
-//#endregion
-//#region src/compile/utils/endOfString.ts
-function endOfString(char, content, start) {
-	for (let j = start + 1; j < content.length; j++) if (content[j] === char && content[j - 1] !== "\\") return j;
-	return content.length;
-}
-
 //#endregion
 //#region src/compile/build/client/getAttributeOffsets.ts
 function getAttributeOffsets(value, span) {
@@ -739,7 +1234,6 @@ function getAttributeOffsets(value, span) {
 	let level = 0;
 	for (let i = 0; i < value.length; i++) {
 		const char = value[i];
-		const nextChar = value[i + 1];
 		if (char === "{") {
 			level++;
 			if (level === 1) {
@@ -762,25 +1256,10 @@ function getAttributeOffsets(value, span) {
 			}
 		} else if (char === "`" && level === 0) textContent += "\\";
 		else if (level > 0) {
-			if (char === "/" && nextChar === "/") {
-				let start = i;
-				i = value.indexOf("\n", i);
-				textContent += value.substring(start, i + 1);
-				continue;
-			} else if (char === "/" && nextChar === "*") {
-				let start = i;
-				i = value.indexOf("*/", i) + 1;
-				textContent += value.substring(start, i + 1);
-				continue;
-			} else if (char === "\"" || char === "'") {
-				let start = i;
-				i = endOfString(char, value, i);
-				textContent += value.substring(start, i + 1);
-				continue;
-			} else if (char === "`") {
-				let start = i;
-				i = endOfTemplateString(value, i);
-				textContent += value.substring(start, i + 1);
+			const skipped = skipStringOrComment(value, i);
+			if (skipped !== -1) {
+				textContent += value.substring(i, skipped);
+				i = skipped - 1;
 				continue;
 			}
 		}
@@ -794,7 +1273,6 @@ function getAttributeOffsets(value, span) {
 		lengths
 	};
 }
-
 //#endregion
 //#region src/compile/build/client/buildComponentNode.ts
 function buildComponentNode(node, status, b, root = false) {
@@ -811,51 +1289,31 @@ function buildComponentNode(node, status, b, root = false) {
 			name = name.substring(1);
 			props.push({
 				name,
-				preText: "",
 				value,
-				postText: "",
-				spans: [span],
-				offsets: [],
-				lengths: []
+				spans: [span]
 			});
 			runs.push(`${propsName}["${name}"] = ${value};`);
-			bindingRuns.push(`${value} = ${propsName}["${name}"];`);
+			bindingRuns.push(bindingTarget(value, `${propsName}["${name}"]`, name, status.imports));
 		} else if (name === "class") {
-			status.imports.add("t_class");
-			const params = [value];
-			if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
-			value = params.join(", ");
+			if (node.scopeStyles) value = `[${value}, "torp-${status.styleHash}"]`;
 			props.push({
 				name,
-				preText: "t_class(",
 				value,
-				postText: ")",
-				spans: [span],
-				offsets: [],
-				lengths: []
+				spans: [span]
 			});
-			runs.push(`${propsName}["${name}"] = t_class(${value});`);
+			runs.push(`${propsName}["${name}"] = ${value};`);
 		} else if (name === "style") {
-			status.imports.add("t_style");
 			props.push({
 				name,
-				preText: "t_style(",
 				value,
-				postText: ")",
-				spans: [span],
-				offsets: [],
-				lengths: []
+				spans: [span]
 			});
-			runs.push(`${propsName}["${name}"] = t_style(${value});`);
+			runs.push(`${propsName}["${name}"] = ${value};`);
 		} else {
 			props.push({
 				name,
-				preText: "",
 				value,
-				postText: "",
-				spans: [span],
-				offsets: [],
-				lengths: []
+				spans: [span]
 			});
 			runs.push(`${propsName}["${name}"] = ${value};`);
 		}
@@ -863,38 +1321,28 @@ function buildComponentNode(node, status, b, root = false) {
 			const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
 			value = newValue;
 			if (name === "class") {
-				status.imports.add("t_class");
-				const params = [value];
-				if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
-				value = params.join(", ");
+				if (node.scopeStyles) value = `[${value}, "torp-${status.styleHash}"]`;
 				props.push({
 					name,
-					preText: "t_class(",
 					value,
-					postText: ")",
 					spans,
 					offsets,
 					lengths
 				});
-				runs.push(`${propsName}["${name}"] = t_class(${value});`);
+				runs.push(`${propsName}["${name}"] = ${value};`);
 			} else if (name === "style") {
-				status.imports.add("t_style");
 				props.push({
 					name,
-					preText: "t_style(",
 					value,
-					postText: ")",
 					spans,
 					offsets,
 					lengths
 				});
-				runs.push(`${propsName}["${name}"] = t_style(${value});`);
+				runs.push(`${propsName}["${name}"] = ${value};`);
 			} else {
 				props.push({
 					name,
-					preText: "",
 					value,
-					postText: "",
 					spans,
 					offsets,
 					lengths
@@ -905,27 +1353,22 @@ function buildComponentNode(node, status, b, root = false) {
 			if (name === "class" && node.scopeStyles) value = `"${trimQuotes(value)} torp-${status.styleHash}"`;
 			props.push({
 				name,
-				preText: "",
 				value,
-				postText: "",
-				spans: [span],
-				offsets: [],
-				lengths: []
+				postText: " as const",
+				spans: [span]
 			});
 		} else props.push({
 			name,
-			preText: "",
 			value: "true",
-			postText: "",
-			spans: [span],
-			offsets: [],
-			lengths: []
+			spans: [span]
 		});
-		b.append(`const ${propsName} = $watch({`);
+		b.append(`let ${propsName} = $watch({`);
 		for (let p of props) {
 			let value = replaceForVarNames(p.value, status);
-			if (p.spans.length === 1) addMappedText(`${p.name}: ` + p.preText, value, p.postText + ",", p.spans[0], status, b);
-			else addMappedTextWithOffsets(`${p.name}: ` + p.preText, value, p.postText + ",", p.spans, p.offsets, p.lengths, status, b);
+			p.preText ??= "";
+			p.postText ??= "";
+			if (p.spans.length === 1) addMappedText(p.name ? `${p.name}: ` + p.preText : p.preText, value, p.postText + ",", p.spans[0], status, b);
+			else addMappedTextWithOffsets(p.name ? `${p.name}: ` + p.preText : p.preText, value, p.postText + ",", p.spans, p.offsets, p.lengths, status, b);
 		}
 		b.append("});");
 		if (runs.length) buildRun("setProps", replaceForVarNames(runs.join("\n"), status), status, b);
@@ -947,14 +1390,14 @@ function buildComponentNode(node, status, b, root = false) {
 	const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
 	if (componentHasSlots) {
 		b.append(`const ${slotsName}: Record<string, SlotRender> = {};`);
-		for (let slot of node.children) if (isSpecialNode(slot) && slot.tagName === "fill") {
+		for (let slot of node.children) if (isSpecialNode(slot) && (slot.tagName === "fill" || slot.tagName === "filldef")) {
 			const nameAttribute = slot.attributes.find((a) => a.name === "name");
 			const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
 			const slotParams = [
 				"$sparent: ParentNode",
 				"$sanchor: Node | null",
-				slot.hasSlotProps ? "$sprops: Record<PropertyKey, any>" : "// @ts-ignore\n$sprops?: Record<PropertyKey, any>",
-				"// @ts-ignore\n$context?: Record<PropertyKey, any>"
+				slot.hasSlotProps ? "$slot: Record<PropertyKey, any>" : "_$slot?: Record<PropertyKey, any>",
+				"// @ts-ignore\n// eslint-disable-next-line no-unused-vars\n$context?: Record<PropertyKey, any>"
 			];
 			b.append(`${slot.hasSlotProps ? "// @ts-ignore\n" : ""}${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`);
 			buildFragment(slot, status, b, "$sparent", "$sanchor");
@@ -978,7 +1421,172 @@ function buildComponentNode(node, status, b, root = false) {
 	addMappedText("", `${componentName}(${renderParams})`, ";", node.span, status, b);
 	b.append("");
 }
-
+//#endregion
+//#region src/compile/build/client/buildAwaitNode.ts
+function buildAwaitNode(node, status, b) {
+	const anchorName = node.varName ?? "null";
+	const parentName = node.parentName || anchorName + ".parentNode";
+	const regionName = nextVarName("await_region", status);
+	const branches = node.children.filter((n) => isControlNode(n));
+	const awaitBranch = branches.find((n) => n.operation === "@await");
+	const withBranch = branches.find((n) => n.operation === "@with");
+	status.imports.add("t_region");
+	status.imports.add("t_run_await");
+	b.append("");
+	b.append("/* @await */");
+	addPushDevBoundary("control", "@await", status, b);
+	b.append(`
+		const ${regionName} = t_region(${status.options.dev === true ? `"await"` : ""});
+		t_run_await(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
+	if (awaitBranch !== void 0 && awaitBranch.children.length > 0) {
+		buildFragment(awaitBranch, status, b, parentName, "t_before");
+		status.fragmentStack.push({
+			fragment: awaitBranch.fragment,
+			path: ""
+		});
+		for (let child of awaitBranch.children) buildNode(child, status, b, parentName, "t_before");
+		status.fragmentStack.pop();
+		buildAddFragment(awaitBranch, status, b, parentName, "t_before");
+	}
+	if (withBranch !== void 0) {
+		b.append(`}, (${status.inHead ? "" : "t_before"}) => {`);
+		if (withBranch.children.length > 0) {
+			buildFragment(withBranch, status, b, parentName, "t_before");
+			status.fragmentStack.push({
+				fragment: withBranch.fragment,
+				path: ""
+			});
+			for (let child of withBranch.children) buildNode(child, status, b, parentName, "t_before");
+			status.fragmentStack.pop();
+			buildAddFragment(withBranch, status, b, parentName, "t_before");
+		}
+		b.append(`}${status.options.dev === true ? `, "runAwait"` : ""});`);
+	} else b.append(`}, null${status.options.dev === true ? `, "runAwait"` : ""});`);
+	addPopDevBoundary(status, b);
+	b.append("");
+}
+//#endregion
+//#region src/compile/utils/hasNestedControl.ts
+/**
+* Returns true if any descendant of a `@for` body is a control node that
+* creates its own region and effects (`@if`, `@for`, `@await`, `@switch`,
+* `@replace`, `@html`).
+*
+* Operations that produce no DOM and no region (`@key`, `@const`, `@console`,
+* `@debugger`, `@function`) are fine — same category as `@key`. They are
+* descended through, so a real control statement nested under a `@key` (a
+* common shape — `@for` bodies almost always lead with `@key = ...`) is still
+* detected.
+*
+* Extracted from `isForBodyNoProxySafe` so the no-proxy specialization, the
+* leaf-row region-chain specialization (`isForBodyLeafSafe`), and any future
+* pass that needs the same structural predicate can share one source of
+* truth.
+*/
+function hasNestedControl(children) {
+	for (const child of children) {
+		if (isControlNode(child)) {
+			if (!NON_RENDERING_OPERATIONS.has(child.operation)) return true;
+			if (hasNestedControl(child.children)) return true;
+			continue;
+		}
+		if (isElementLike$1(child)) {
+			if (hasNestedControl(child.children)) return true;
+		}
+	}
+	return false;
+}
+function isElementLike$1(node) {
+	return node.type === "element" || node.type === "component" || node.type === "special";
+}
+//#endregion
+//#region src/compile/utils/isForBodyLeafSafe.ts
+/**
+* Returns true if the body of a `@for` loop contains no nested control
+* statements (`@if`, `@for`, `@await`, `@switch`, `@replace`, `@html`).
+*
+* When true, every effect created by the row template lives directly on the
+* item's own region — never on a descendant region chained off it. The
+* compiler can then emit a "leaf-row" `createListItem` that skips the
+* per-item `pushRegion(item)` / `popRegion(oldRegion)` calls: `runListItems`
+* has already pushed the item onto the active region (via
+* `pushRegion(item, true)`) before calling `create()`, and a leaf body never
+* creates descendant regions, so `context.activeRegion` stays put at the item
+* for the whole callback. Saves two function calls per row plus the
+* `devContext.onRegionPushed` / `onRegionPopped` invocations, which on the
+* 10k-row js-framework-bench `runlots` op is 20000 fewer calls per pass.
+*
+* Note: every no-proxy-safe body is also leaf-safe (`isForBodyNoProxySafe`
+* includes `hasNestedControl`), but the converse is not true — a body that
+* writes to a for-var (disqualifying it from no-proxy) can still be leaf-safe
+* and earn this specialization.
+*/
+function isForBodyLeafSafe(forBodyChildren) {
+	return !hasNestedControl(forBodyChildren);
+}
+//#endregion
+//#region src/compile/utils/isForBodyNoProxySafe.ts
+/**
+* Returns true if the body of a `@for` loop never writes to any of its loop
+* variables (`forVars`) — neither directly (`row = ...`, `row.x = ...`,
+* `row[k] = ...`) nor via compound assignment (`+=`, `++`, etc.) — AND the
+* body contains no nested control statements (`@if`, `@for`, `@await`, …).
+*
+* When both hold, the compiler can emit a "no-proxy" `@for` specialization
+* that skips the per-item shallow `$watch` Proxy around the loop variable
+* bag: reads of `data.<forVar>` are plain property accesses (no proxyGet
+* trap), and the compiler-emitted `updateListItem` callback re-runs item
+* effects manually (via `t_rerun_region_effects`) when a forVar's reference
+* actually changes.
+*
+* The "no nested controls" constraint keeps the manual effect re-run sound:
+* without it, a nested `@if`'s effects would live on a descendant region
+* chained off the original item, but after keyed reconciliation that chain
+* is orphaned (the live item is a different object), so the re-run walk
+* couldn't find them. With no nested controls every row effect is on the
+* item itself, which is exactly what `t_rerun_region_effects` walks.
+*
+* Detection is intentionally conservative: a regex scan over every
+* expression-like string in the body (text interpolation, attribute values,
+* event handlers, control statements). Anything ambiguous falls back to the
+* proxy path. The for-statement itself (`for (let row of ...)`) is NOT
+* scanned — that's the loop header, not the body — so `for (...; i++)` style
+* loops with `i++` in the header are still eligible.
+*/
+function isForBodyNoProxySafe(forBodyChildren, forVars) {
+	if (forVars.length === 0) return false;
+	if (hasNestedControl(forBodyChildren)) return false;
+	const collected = [];
+	for (const child of forBodyChildren) collectExpressionStrings(child, collected);
+	for (const varName of forVars) {
+		const escaped = varName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const writePattern = new RegExp(`\\[\\s*${escaped}\\s*\\]\\s*=(?![=>])|\\{\\s*${escaped}\\s*(:[^}]+)?\\}\\s*=(?![=>])|\\b${escaped}(?:\\.[a-zA-Z_$][\\w$]*|\\[[^\\]]+\\])?\\s*(?:=(?![=>])|[+\\-*/%&|^]=|\\+\\+|--)|(?:\\+\\+|--)\\s*${escaped}\\b`);
+		for (const text of collected) if (writePattern.test(text)) return false;
+	}
+	return true;
+}
+function isElementLike(node) {
+	return node.type === "element" || node.type === "component" || node.type === "special";
+}
+function collectExpressionStrings(node, out) {
+	if (isTextNode(node)) {
+		out.push(node.content);
+		return;
+	}
+	if (isElementLike(node)) {
+		for (const attr of node.attributes) {
+			if (attr.value !== void 0) if (attr.name.startsWith("&")) out.push(`${attr.value} =`);
+			else out.push(attr.value);
+			if (attr.fullyReactive && attr.name !== attr.value) out.push(attr.name);
+		}
+		for (const child of node.children) collectExpressionStrings(child, out);
+		return;
+	}
+	if (isControlNode(node)) {
+		out.push(node.statement);
+		for (const child of node.children) collectExpressionStrings(child, out);
+	}
+}
 //#endregion
 //#region src/compile/utils/trimMatched.ts
 /**
@@ -997,102 +1605,6 @@ function trimMatched(text, startChar, endChar) {
 	}
 	return text.substring(start, end);
 }
-
-//#endregion
-//#region src/compile/build/client/buildAwaitNode.ts
-function buildAwaitNode(node, status, b) {
-	const anchorName = node.varName ?? "null";
-	const parentName = node.parentName;
-	const regionName = nextVarName("await_region", status);
-	const indexName = nextVarName("await_index", status);
-	const tokenName = nextVarName("await_token", status);
-	const branches = node.children.filter((n) => isControlNode(n));
-	let awaitBranch = branches.find((n) => n.operation === "@await");
-	if (!awaitBranch) {}
-	let thenBranch = branches.find((n) => n.operation === "@then");
-	if (!thenBranch) thenBranch = {
-		type: "control",
-		operation: "@then",
-		statement: "then",
-		children: [],
-		span: {
-			start: 0,
-			end: 0
-		}
-	};
-	let catchBranch = branches.find((n) => n.operation === "@catch");
-	if (!catchBranch) catchBranch = {
-		type: "control",
-		operation: "@catch",
-		statement: "catch",
-		children: [],
-		span: {
-			start: 0,
-			end: 0
-		}
-	};
-	const awaiterName = trimMatched(awaitBranch.statement.substring(5).trim(), "(", ")");
-	const thenVar = trimMatched(thenBranch.statement.substring(4).trim(), "(", ")");
-	const catchVar = trimMatched(catchBranch.statement.substring(5).trim(), "(", ")");
-	status.imports.add("t_region");
-	status.imports.add("t_run_control");
-	status.imports.add("t_run_branch");
-	status.imports.add("t_push_region");
-	status.imports.add("t_pop_region");
-	b.append("");
-	b.append("/* @await */");
-	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
-	b.append(`
-		const ${regionName} = t_region(${status.options.dev === true ? `"await"` : ""});
-		let ${tokenName} = 0;
-		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
-	let index = 0;
-	buildAwaitBranch(awaitBranch, status, b, parentName, regionName, indexName, index++);
-	b.append(`
-		${tokenName}++;
-		((t_token) => {`);
-	awaitBranch.span.start += 7;
-	addMappedText("", replaceForVarNames(awaiterName, status), "", awaitBranch.span, status, b);
-	thenBranch.span.start -= 1;
-	addMappedText(".then((", replaceForVarNames(thenVar, status), ") => {", thenBranch.span, status, b);
-	b.append(`if (t_token === ${tokenName}) {`);
-	buildAwaitBranch(thenBranch, status, b, parentName, regionName, indexName, index++);
-	b.append(`}
-		})`);
-	catchBranch.span.start -= 1;
-	addMappedText(".catch((", replaceForVarNames(catchVar, status), ") => {", catchBranch.span, status, b);
-	b.append(`if (t_token === ${tokenName}) {`);
-	buildAwaitBranch(catchBranch, status, b, parentName, regionName, indexName, index++);
-	b.append(`}
-				});
-			})(${tokenName});
-		}${status.options.dev === true ? `, "runAwait"` : ""});`);
-	addPopDevBoundary(status, b);
-	b.append("");
-}
-function buildAwaitBranch(node, status, b, parentName, regionName, indexName, index) {
-	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
-	if (node.children.length > 0) {
-		b.append(`
-			const t_new_region = t_region(${status.options.dev === true ? `"await_branch"` : ""});
-			const t_old_control_region = t_push_region(${regionName});
-			const t_old_region = t_push_region(t_new_region, true);
-		`);
-		buildFragment(node, status, b, parentName, "t_before");
-		status.fragmentStack.push({
-			fragment: node.fragment,
-			path: ""
-		});
-		for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
-		status.fragmentStack.pop();
-		buildAddFragment(node, status, b, parentName, "t_before");
-		b.append("t_pop_region(t_old_region);");
-		b.append("t_pop_region(t_old_control_region);");
-	}
-	b.append(`${indexName} = ${index};`);
-}
-
 //#endregion
 //#region src/compile/build/client/buildForNode.ts
 const forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
@@ -1117,9 +1629,6 @@ function buildForNode(node, status, b) {
 	}
 	const regionName = nextVarName("for_region", status);
 	const listItemsName = nextVarName("new_items", status);
-	const previousItemName = nextVarName("previous_item", status);
-	const nextItemName = nextVarName("next_item", status);
-	const newItemName = nextVarName("new_item", status);
 	const itemName = nextVarName("item", status);
 	const beforeName = nextVarName("before", status);
 	let keyStatement = "";
@@ -1131,10 +1640,13 @@ function buildForNode(node, status, b) {
 			keyStatement = matches[2];
 		}
 	}
+	const noWatch = isForBodyNoProxySafe(node.children, forVarNames);
+	if (noWatch) status.imports.add("t_rerun_region_effects");
+	const singleVar = noWatch && forVarNames.length === 1;
+	const leafRow = isForBodyLeafSafe(node.children);
 	status.imports.add("t_region");
 	status.imports.add("t_run_list");
-	status.imports.add("t_list_item");
-	status.imports.add("ListItem");
+	status.imports.add("ListItemSpec");
 	b.append("");
 	b.append("/* @for */");
 	addPushDevBoundary("control", `@${node.statement}`, status, b);
@@ -1145,41 +1657,51 @@ function buildForNode(node, status, b) {
 		${parentName},
 		${anchorName},
 		${status.options.dev === true ? "function createNewItems() {" : "() => {"}
-			let ${listItemsName}: ListItem[] = [];
-			let ${previousItemName} = ${regionName};
-			let ${nextItemName} = ${regionName}.nextRegion;`);
+			let ${listItemsName}: ListItemSpec[] = [];`);
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
-	b.append(`let ${newItemName} = t_list_item(`);
-	b.append(`{ ${forVarNames.join(", ")} },`);
-	if (key !== void 0) addMappedText("", `${keyStatement || "undefined"}`, ",", key.span, status, b);
-	if (status.options.dev === true) b.append(`"for item"`);
-	b.append(");");
-	b.append(`
-			${newItemName}.previousRegion = ${previousItemName};
-			${previousItemName}.nextRegion = ${newItemName};
-			${previousItemName} = ${newItemName};
-			${listItemsName}.push(${newItemName});
-		}
-		${regionName}.nextRegion = ${nextItemName};
-		return ${listItemsName};
-	},
-	${status.options.dev === true ? `function createListItem(${itemName}, ${beforeName}) {` : `(${itemName}, ${beforeName}) => {`}`);
+	if (singleVar) b.append(`${listItemsName}.push({ data: ${forVarNames[0]}, key: `);
+	else b.append(`${listItemsName}.push({ data: { ${forVarNames.join(", ")} }, key: `);
+	if (key !== void 0) addMappedText("", `${keyStatement || "undefined"}`, " });", key.span, status, b);
+	else b.append(`undefined });`);
+	b.append(`}`);
+	b.append(`return ${listItemsName};`);
+	b.append(`},
+		${status.options.dev === true ? `function createListItem(${itemName}, ${beforeName}) {` : `(${itemName}, ${beforeName}) => {`}`);
 	let oldForVarNames = status.forVarNames;
-	status.forVarNames = [...status.forVarNames, ...forVarNames.map((v) => [v, `${itemName}.data.${v}`])];
-	buildForItem(node, status, b, parentName, beforeName, itemName);
+	const forVarBitBase = oldForVarNames.length;
+	status.forVarNames = [...status.forVarNames, ...singleVar ? forVarNames.map((v) => [v, `${itemName}.data`]) : forVarNames.map((v) => [v, `${itemName}.data.${v}`])];
+	buildForItem(node, status, b, parentName, beforeName, itemName, leafRow);
 	status.forVarNames = oldForVarNames;
 	b.append(`},
-	${status.options.dev === true ? "function updateListItem(t_old_item, t_new_item) {" : "(t_old_item, t_new_item) => {"}`);
-	for (let varName of forVarNames) b.append(`t_old_item.data.${varName} = t_new_item.data.${varName};`);
-	b.append(`}
-		);`);
+${status.options.dev === true ? "function updateListItem(t_old_item, t_new_item) {" : "(t_old_item, t_new_item) => {"}`);
+	if (noWatch) {
+		b.append(`let t_changed_mask = 0;`);
+		if (singleVar) {
+			const bit = 1 << forVarBitBase;
+			b.append(`if (t_old_item.data !== t_new_item.data) {
+					t_old_item.data = t_new_item.data;
+					t_changed_mask = ${bit};
+				}`);
+		} else for (let i = 0; i < forVarNames.length; i++) {
+			const varName = forVarNames[i];
+			const bit = 1 << forVarBitBase + i;
+			b.append(`if (t_old_item.data.${varName} !== t_new_item.data.${varName}) {
+						t_old_item.data.${varName} = t_new_item.data.${varName};
+						t_changed_mask |= ${bit};
+					}`);
+		}
+		b.append(`if (t_changed_mask) t_rerun_region_effects(t_old_item, t_changed_mask);`);
+	} else for (let varName of forVarNames) b.append(`t_old_item.data.${varName} = t_new_item.data.${varName};`);
+	b.append(`}${noWatch ? ",\ntrue" : ""}\n);`);
 	addPopDevBoundary(status, b);
 	b.append("");
 }
-function buildForItem(node, status, b, parentName, beforeName, itemName) {
+function buildForItem(node, status, b, parentName, beforeName, itemName, leafRow) {
 	const oldRegionName = nextVarName("old_region", status);
-	status.imports.add("t_push_region");
-	b.append(`let ${oldRegionName} = t_push_region(${itemName});`);
+	if (!leafRow) {
+		status.imports.add("t_push_region");
+		b.append(`let ${oldRegionName} = t_push_region(${itemName});`);
+	}
 	buildFragment(node, status, b, parentName, beforeName);
 	status.fragmentStack.push({
 		fragment: node.fragment,
@@ -1191,39 +1713,37 @@ function buildForItem(node, status, b, parentName, beforeName, itemName) {
 	}
 	status.fragmentStack.pop();
 	buildAddFragment(node, status, b, parentName, beforeName);
-	status.imports.add("t_pop_region");
-	b.append(`t_pop_region(${oldRegionName});`);
+	if (!leafRow) {
+		status.imports.add("t_pop_region");
+		b.append(`t_pop_region(${oldRegionName});`);
+	}
 }
-
 //#endregion
 //#region src/compile/build/client/buildHtmlNode.ts
 function buildHtmlNode(node, status, b) {
 	const htmlAnchorName = node.varName;
 	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
-	const htmlRegionName = nextVarName("html_region", status);
 	node = node.children[0];
 	status.imports.add("t_region");
 	status.imports.add("t_run_control");
-	status.imports.add("t_run_branch");
-	status.imports.add("t_push_region");
-	status.imports.add("t_pop_region");
+	const firstNodeVar = nextVarName("html_first", status);
+	const lastNodeVar = nextVarName("html_last", status);
 	b.append("");
-	b.append(`
-	/* @html */
-	const ${htmlRegionName} = t_region(${status.options.dev === true ? `"html"` : ""});
-	t_run_control(${htmlRegionName}, ${htmlAnchorName}, (t_before) => {`);
-	buildHtmlBranch(node, status, b, htmlParentName, htmlRegionName);
-	b.append(`}${status.options.dev === true ? ", \"html\"" : ""});`);
-	b.append("");
-}
-function buildHtmlBranch(node, status, b, parentName, regionName) {
-	status.imports.add("t_run_branch");
+	b.append(`/* @html */`);
+	b.append(`let ${firstNodeVar}: ChildNode | null = null;`);
+	b.append(`let ${lastNodeVar}: ChildNode | null = null;`);
+	b.append(`t_run_control(t_region(), ${htmlAnchorName}, (t_before) => {`);
 	b.append(`${replaceForVarNames(node.statement, status)};`);
-	b.append(`if (!t_run_branch(${regionName}, 0, -1)) return;`);
-	b.append(`
-		const t_new_region = t_region(${status.options.dev === true ? `"html_branch"` : ""});
-		const t_old_region = t_push_region(t_new_region, true);
-	`);
+	b.append(`if (${firstNodeVar} !== null && ${lastNodeVar} !== null) {`);
+	b.append(`let t_node: ChildNode | null = ${lastNodeVar};`);
+	b.append(`while (t_node !== null && t_node !== ${firstNodeVar}) {`);
+	b.append(`const t_prev: ChildNode | null = t_node.previousSibling;`);
+	b.append(`t_node.remove();`);
+	b.append(`t_node = t_prev;`);
+	b.append(`}`);
+	b.append(`if (${firstNodeVar}) ${firstNodeVar}.remove();`);
+	b.append(`${firstNodeVar} = ${lastNodeVar} = null;`);
+	b.append(`}`);
 	const templateName = nextVarName("template", status);
 	const fragmentName = `t_fragment_${node.fragment.number}`;
 	b.append(`let ${templateName} = document.createElement("template");`);
@@ -1231,10 +1751,23 @@ function buildHtmlBranch(node, status, b, parentName, regionName) {
 	node.span.end -= 2;
 	addMappedText("", `${templateName}.innerHTML = ${replaceForVarNames(node.statement, status)};`, "", node.span, status, b);
 	b.append(`let ${fragmentName} = ${templateName}.content.cloneNode(true) as DocumentFragment;`);
-	buildAddFragment(node, status, b, parentName, "t_before");
-	b.append("t_pop_region(t_old_region);");
+	b.append(`${firstNodeVar} = ${fragmentName}.firstChild;`);
+	b.append(`${lastNodeVar} = ${fragmentName}.lastChild;`);
+	buildAddFragment(node, status, b, htmlParentName, "t_before");
+	b.append(`if (${firstNodeVar} !== null && ${firstNodeVar}.parentNode !== ${htmlParentName}) {`);
+	b.append(`${lastNodeVar} = ${htmlAnchorName}.previousSibling as ChildNode | null;`);
+	b.append(`if (${lastNodeVar} !== null) {`);
+	b.append(`${firstNodeVar} = ${lastNodeVar};`);
+	b.append(`let t_scan: ChildNode | null = ${lastNodeVar};`);
+	b.append(`while (t_scan !== null && t_scan.previousSibling !== null && t_scan.previousSibling !== ${htmlAnchorName} && (t_scan.previousSibling.nodeType !== 3 || (t_scan.previousSibling.textContent ?? "").trim() !== "")) {`);
+	b.append(`t_scan = t_scan.previousSibling;`);
+	b.append(`}`);
+	b.append(`${firstNodeVar} = t_scan;`);
+	b.append(`}`);
+	b.append(`}`);
+	b.append(`}${status.options.dev === true ? ", \"html\"" : ""});`);
+	b.append("");
 }
-
 //#endregion
 //#region src/compile/build/client/buildIfNode.ts
 function buildIfNode(node, status, b) {
@@ -1292,7 +1825,6 @@ function buildIfBranch(node, status, b, parentName, regionName, indexName, index
 	b.append(`${indexName} = ${index};`);
 	b.append("}");
 }
-
 //#endregion
 //#region src/compile/build/client/buildReplaceNode.ts
 function buildReplaceNode(node, status, b) {
@@ -1332,7 +1864,6 @@ function buildReplaceBranch(node, status, b, parentName, regionName) {
 	buildAddFragment(node, status, b, parentName, "t_before");
 	b.append("t_pop_region(t_old_region);");
 }
-
 //#endregion
 //#region src/compile/build/client/buildScriptNode.ts
 function buildScriptNode(node, status, b) {
@@ -1343,7 +1874,6 @@ function maybeAppend$1(text, end) {
 	if (!text.endsWith(end)) text += end;
 	return text;
 }
-
 //#endregion
 //#region src/compile/build/client/buildSwitchNode.ts
 function buildSwitchNode(node, status, b) {
@@ -1355,7 +1885,7 @@ function buildSwitchNode(node, status, b) {
 	if (branches.findIndex((n) => n.operation === "@default") === -1) branches.push({
 		type: "control",
 		operation: "@default",
-		statement: "default",
+		statement: "default:",
 		children: [],
 		span: {
 			start: 0,
@@ -1406,7 +1936,45 @@ function buildSwitchBranch(node, status, b, parentName, regionName, indexName, i
 			break;
 		}`);
 }
-
+//#endregion
+//#region src/compile/build/client/buildTryNode.ts
+function buildTryNode(node, status, b) {
+	const anchorName = node.varName ?? "null";
+	const parentName = node.parentName || anchorName + ".parentNode";
+	const regionName = nextVarName("try_region", status);
+	const branches = node.children.filter((n) => isControlNode(n));
+	const tryBranch = branches.find((n) => n.operation === "@try");
+	const catchBranch = branches.find((n) => n.operation === "@catch");
+	status.imports.add("t_region");
+	status.imports.add("t_run_try");
+	b.append("");
+	b.append("/* @try */");
+	addPushDevBoundary("control", "@try", status, b);
+	b.append(`
+		const ${regionName} = t_region(${status.options.dev === true ? `"try"` : ""});
+		t_run_try(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
+	buildTryBranchBody(tryBranch, status, b, parentName);
+	const catchVar = catchBranch ? trimMatched(catchBranch.statement.substring(5).trim(), "(", ")") || "err" : null;
+	if (catchBranch && catchVar) {
+		addMappedText("},", `(${status.inHead ? "" : "t_before"}, ${replaceForVarNames(catchVar, status)}) => {`, "", catchBranch.span, status, b);
+		buildTryBranchBody(catchBranch, status, b, parentName);
+		b.append(`}${status.options.dev === true ? `, "runTry"` : ""});`);
+	} else b.append(`}, null${status.options.dev === true ? `, "runTry"` : ""});`);
+	addPopDevBoundary(status, b);
+	b.append("");
+}
+function buildTryBranchBody(node, status, b, parentName) {
+	if (node.children.length > 0) {
+		buildFragment(node, status, b, parentName, "t_before");
+		status.fragmentStack.push({
+			fragment: node.fragment,
+			path: ""
+		});
+		for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
+		status.fragmentStack.pop();
+		buildAddFragment(node, status, b, parentName, "t_before");
+	}
+}
 //#endregion
 //#region src/compile/build/client/buildControlNode.ts
 function buildControlNode(node, status, b) {
@@ -1431,8 +1999,12 @@ function buildControlNode(node, status, b) {
 			buildAwaitNode(node, status, b);
 			break;
 		case "@await":
-		case "@then":
+		case "@with":
+		case "@try":
 		case "@catch": break;
+		case "@try group":
+			buildTryNode(node, status, b);
+			break;
 		case "@replace group":
 			buildReplaceNode(node, status, b);
 			break;
@@ -1455,7 +2027,6 @@ function buildControlNode(node, status, b) {
 		default: throw new Error(`Invalid operation: ${node.operation}`);
 	}
 }
-
 //#endregion
 //#region src/compile/utils/trimEnd.ts
 /**
@@ -1471,30 +2042,29 @@ function trimEnd(text, char) {
 	while (text[end - 1] === char) end -= 1;
 	return text.substring(0, end);
 }
-
 //#endregion
 //#region src/compile/build/client/buildMount.ts
 function buildMount(_functionName, functionBody, status, b) {
 	functionBody = replaceForVarNames(functionBody, status);
-	status.imports.add("$mount");
-	b.append("// @ts-ignore\n$mount(() => {");
+	status.imports.add("$onmount");
+	b.append("// @ts-ignore\n$onmount(() => {");
 	b.append(functionBody);
 	b.append("});");
 }
-
 //#endregion
 //#region src/compile/build/client/stashRun.ts
 function stashRun(fragment, functionStart, value, functionEnd, span, status) {
 	value = replaceForVarNames(value, status);
 	let functionBody = functionStart + value + functionEnd;
+	let forVarMask = status.forVarNames.length > 0 ? forVarsReadIn(value, status.forVarNames) : void 0;
 	fragment.effects.push({
 		functionBody,
 		spans: [span],
 		offsets: [functionStart.length],
-		lengths: [value.length]
+		lengths: [value.length],
+		forVarMask
 	});
 }
-
 //#endregion
 //#region src/compile/build/client/stashRunWithOffsets.ts
 function stashRunWithOffsets(fragment, functionStart, value, functionEnd, spans, offsets, lengths, status) {
@@ -1507,17 +2077,18 @@ function stashRunWithOffsets(fragment, functionStart, value, functionEnd, spans,
 		lengths[i] += changedLength;
 		for (let j = i + 1; j < offsets.length; j++) offsets[j] += changedLength;
 	}
+	let forVarMask = status.forVarNames.length > 0 ? forVarsReadIn(functionBody, status.forVarNames) : void 0;
 	fragment.effects.push({
 		functionBody,
 		spans,
 		offsets,
-		lengths
+		lengths,
+		forVarMask
 	});
 }
-
 //#endregion
 //#region src/compile/build/client/buildElementNode.ts
-function buildElementNode(node, status, b, parentName, root = false) {
+function buildElementNode(node, status, b, parentName) {
 	if (status.inHead) {
 		if (node.tagName === "title") buildTitleNode(node, status, b);
 		else buildHeadNode(node, status, b);
@@ -1528,8 +2099,10 @@ function buildElementNode(node, status, b, parentName, root = false) {
 	if (svgElement) status.ns = true;
 	const varName = node.varName;
 	if (varName) {
-		if (node.tagName === "@element") buildDynamicElementNode(node, status, b);
-		if (root) {}
+		if (node.tagName === "@element") {
+			buildDynamicElementNode(node, status, b);
+			return;
+		}
 		buildElementAttributes$1(node, varName, status, b);
 	}
 	const oldPreserveWhitespace = status.preserveWhitespace;
@@ -1540,23 +2113,18 @@ function buildElementNode(node, status, b, parentName, root = false) {
 }
 function buildDynamicElementNode(node, status, b) {
 	let selfAttribute = node.attributes.find((a) => a.name === "self");
-	if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) {
-		status.imports.add("$run");
+	if (selfAttribute && selfAttribute.value) {
 		status.imports.add("t_dynamic");
 		let selfValue = selfAttribute.value;
-		b.append("$run(() => {");
-		b.append(`${node.varName} = t_dynamic(${node.varName}, ${selfValue});`);
-		let parentName = node.varName;
-		buildFragment(node, status, b, parentName, "null");
-		status.fragmentStack.push({
-			fragment: node.fragment,
-			path: ""
-		});
-		for (let child of node.children) buildNode(child, status, b, parentName, "null");
-		status.fragmentStack.pop();
-		buildAddFragment(node, status, b, parentName, "null");
-		b.append(`}${status.options.dev === true ? `, "setDynamic"` : ""});`);
+		if (selfAttribute.fullyReactive) {
+			status.imports.add("$run");
+			b.append("$run(() => {");
+			b.append(`${node.varName} = t_dynamic(${node.varName}, ${selfValue});`);
+			b.append(`}${status.options.dev === true ? `, "setDynamic"` : ""});`);
+		} else b.append(`${node.varName} = t_dynamic(${node.varName}, ${selfValue});`);
 	}
+	buildElementAttributes$1(node, node.varName, status, b);
+	for (let child of node.children) buildNode(child, status, b, node.varName, "null");
 }
 function buildTitleNode(node, status, b) {
 	let content = node.children[0].content || "";
@@ -1599,11 +2167,6 @@ function buildHeadNode(node, status, b) {
 function buildElementAttributes$1(node, varName, status, b) {
 	let fragment = status.fragmentStack.at(-1)?.fragment;
 	if (!fragment) throw new Error("No fragment on stack");
-	const refAttribute = node.attributes.find((a) => a.name === "&ref");
-	if (refAttribute) {
-		let { value, fullyReactive } = refAttribute;
-		if (value != null && fullyReactive) b.append(`${value} = ${varName};`);
-	}
 	for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
 	else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b);
 	else if (name === "onmount") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
@@ -1616,9 +2179,8 @@ function buildElementAttributes$1(node, varName, status, b) {
 		const propName = status.ns ? "className.baseVal" : "className";
 		stashRun(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", span, status);
 	} else if (name === "style") {
-		status.imports.add("t_attribute");
 		status.imports.add("t_style");
-		stashRun(fragment, `t_attribute(${varName}, "style", t_style(`, value, ") || null);", span, status);
+		stashRun(fragment, `${varName}.style.cssText += t_style(`, value, ");", span, status);
 	} else if (name.includes("-")) {
 		status.imports.add("t_attribute");
 		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
@@ -1637,7 +2199,7 @@ function buildElementAttributes$1(node, varName, status, b) {
 			stashRunWithOffsets(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", spans, offsets, lengths, status);
 		} else if (name === "style") {
 			status.imports.add("t_style");
-			stashRunWithOffsets(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", spans, offsets, lengths, status);
+			stashRunWithOffsets(fragment, `${varName}.style.cssText += t_style(`, value, ");", spans, offsets, lengths, status);
 		} else if (name.includes("-")) {
 			status.imports.add("t_attribute");
 			stashRunWithOffsets(fragment, `t_attribute(${varName}, "${name}", `, value, ");", spans, offsets, lengths, status);
@@ -1680,9 +2242,18 @@ function buildBindAttribute(node, varName, name, value, status, b) {
 				inputValue = "e.target.value";
 				break;
 		}
-	} else if (node.tagName === "select") eventName = "change";
+	} else if (node.tagName === "select") {
+		eventName = "change";
+		if (node.attributes.find((a) => a.name === "multiple")) {
+			buildRun("setBinding", `Array.from(${varName}.options).forEach((opt) => opt.selected = Array.isArray(${value}) && ${value}.includes(opt.value));`, status, b);
+			status.imports.add("t_event");
+			b.append(`t_event(${varName}, "change", (e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value));`);
+			return;
+		}
+	}
 	let set = `${value} || ${defaultValue}`;
-	buildRun("setBinding", `${`${varName}.${name.substring(1)} = ${set}`};`, status, b);
+	const propName = name.substring(1);
+	buildRun("setBinding", `${propName === "value" ? `${varName}.${propName} = String(${set})` : `${varName}.${propName} = ${set}`};`, status, b);
 	status.imports.add("t_event");
 	b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
 }
@@ -1718,7 +2289,6 @@ function buildTransitionAttribute(node, varName, name, value, status, b) {
 		b.append(`t_animate(${varName}, null, ${entryVarName});`);
 	}
 }
-
 //#endregion
 //#region src/compile/build/client/buildRootNode.ts
 function buildRootNode(node, status, b, parentName, anchorName) {
@@ -1731,13 +2301,12 @@ function buildRootNode(node, status, b, parentName, anchorName) {
 	status.fragmentStack.pop();
 	buildAddFragment(node, status, b, parentName, anchorName);
 }
-
 //#endregion
 //#region src/compile/build/client/buildSlotNode.ts
 function buildSlotNode(node, status, b) {
 	let slotName = node.attributes.find((a) => a.name === "name")?.value;
 	slotName = slotName ? trimQuotes(slotName) : "_";
-	const propsName = nextVarName("sprops", status);
+	const propsName = nextVarName("slot_props", status);
 	const slotAttributes = node.attributes.filter((a) => a.name !== "name");
 	const slotHasProps = slotAttributes.length;
 	if (slotHasProps) {
@@ -1774,7 +2343,7 @@ function buildSlotNode(node, status, b) {
 		"$context"
 	];
 	b.append(`$slots["${slotName}"](${params.join(", ")})`);
-	const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === "fill");
+	const fill = node.children.find((c) => isSpecialNode(c) && (c.tagName === "fill" || c.tagName === "filldef"));
 	if (fill && isSpecialNode(fill) && fill.children.length) {
 		b.append(`} else {`);
 		buildFragment(fill, status, b, slotParentName, slotAnchorName);
@@ -1788,7 +2357,6 @@ function buildSlotNode(node, status, b) {
 	}
 	b.append(`}`);
 }
-
 //#endregion
 //#region src/compile/build/client/buildSpecialNode.ts
 function buildSpecialNode(node, status, b, parentName, root = false) {
@@ -1796,9 +2364,10 @@ function buildSpecialNode(node, status, b, parentName, root = false) {
 		case "slot":
 			buildSlotNode(node, status, b);
 			break;
-		case "fill": break;
+		case "fill":
+		case "filldef": break;
 		case "@element":
-			buildElementNode(node, status, b, parentName, root);
+			buildElementNode(node, status, b, parentName);
 			break;
 		case "@component":
 			buildComponentNode(node, status, b, root);
@@ -1807,7 +2376,6 @@ function buildSpecialNode(node, status, b, parentName, root = false) {
 	}
 	return "";
 }
-
 //#endregion
 //#region src/compile/build/client/buildTextNode.ts
 function buildTextNode(node, status) {
@@ -1824,7 +2392,6 @@ function buildTextNode(node, status) {
 	let maxLevel = 0;
 	for (let i = 0; i < content.length; i++) {
 		const char = content[i];
-		const nextChar = content[i + 1];
 		if (char === "{") {
 			level++;
 			maxLevel = Math.max(level, maxLevel);
@@ -1843,25 +2410,10 @@ function buildTextNode(node, status) {
 			}
 		} else if (char === "`" && level === 0) textContent += "\\";
 		else if (level > 0) {
-			if (char === "/" && nextChar === "/") {
-				let start = i;
-				i = content.indexOf("\n", i);
-				textContent += content.substring(start, i + 1);
-				continue;
-			} else if (char === "/" && nextChar === "*") {
-				let start = i;
-				i = content.indexOf("*/", i) + 1;
-				textContent += content.substring(start, i + 1);
-				continue;
-			} else if (char === "\"" || char === "'") {
-				let start = i;
-				i = endOfString(char, content, i);
-				textContent += content.substring(start, i + 1);
-				continue;
-			} else if (char === "`") {
-				let start = i;
-				i = endOfTemplateString(content, i);
-				textContent += content.substring(start, i + 1);
+			const skipped = skipStringOrComment(content, i);
+			if (skipped !== -1) {
+				textContent += content.substring(i, skipped);
+				i = skipped - 1;
 				continue;
 			}
 		}
@@ -1881,7 +2433,6 @@ function buildTextNode(node, status) {
 		stashRunWithOffsets(fragment, `${node.varName}.textContent = `, textContent, ";", node.spans, offsets, lengths, status);
 	}
 }
-
 //#endregion
 //#region src/compile/build/client/buildNode.ts
 function buildNode(node, status, b, parentName, anchorName, root = false) {
@@ -1900,7 +2451,7 @@ function buildNode(node, status, b, parentName, anchorName, root = false) {
 			buildComponentNode(node, status, b, root);
 			break;
 		case "element":
-			buildElementNode(node, status, b, parentName, root);
+			buildElementNode(node, status, b, parentName);
 			break;
 		case "text":
 			buildTextNode(node, status);
@@ -1908,28 +2459,40 @@ function buildNode(node, status, b, parentName, anchorName, root = false) {
 		case "special":
 			buildSpecialNode(node, status, b, parentName, root);
 			break;
+		case "comment": break;
 		default: throw new Error(`Invalid node type: ${node.type}`);
 	}
 }
-
 //#endregion
 //#region src/compile/build/client/buildCode.ts
 const importsMap$1 = {
 	$watch: "import { $watch } from \"${folder}\";",
+	$bind: "import { $bind } from \"${folder}\";",
 	$cache: "import { $cache } from \"${folder}\";",
+	$async: "import { $async } from \"${folder}\";",
+	$pending: "import { $pending } from \"${folder}\";",
+	$refresh: "import { $refresh } from \"${folder}\";",
 	$run: "import { $run } from \"${folder}\";",
-	$mount: "import { $mount } from \"${folder}\";",
+	$onmount: "import { $onmount } from \"${folder}\";",
+	$stream: "import { $stream } from \"${folder}\";",
+	fromElement: "import { fromElement } from \"${folder}\";",
+	fromServer: "import { fromServer } from \"${folder}\";",
+	fromWebSocket: "import { fromWebSocket } from \"${folder}\";",
 	$unwrap: "import { $unwrap } from \"${folder}\";",
 	$peek: "import { $peek } from \"${folder}\";",
 	$batch: "import { $batch } from \"${folder}\";",
 	t_region: "import { t_region } from \"${folder}\";",
 	t_push_region: "import { t_push_region } from \"${folder}\";",
 	t_pop_region: "import { t_pop_region } from \"${folder}\";",
+	t_rerun_region_effects: "import { t_rerun_region_effects } from \"${folder}\";",
 	t_run_control: "import { t_run_control } from \"${folder}\";",
 	t_run_branch: "import { t_run_branch } from \"${folder}\";",
 	t_list_item: "import { t_list_item } from \"${folder}\";",
 	t_run_list: "import { t_run_list } from \"${folder}\";",
+	t_run_await: "import { t_run_await } from \"${folder}\";",
+	t_run_try: "import { t_run_try } from \"${folder}\";",
 	t_add_fragment: "import { t_add_fragment } from \"${folder}\";",
+	t_add_element: "import { t_add_element } from \"${folder}\";",
 	t_apply_props: "import { t_apply_props } from \"${folder}\";",
 	t_class: "import { t_class } from \"${folder}\";",
 	t_style: "import { t_style } from \"${folder}\";",
@@ -1937,19 +2500,24 @@ const importsMap$1 = {
 	t_dynamic: "import { t_dynamic } from \"${folder}\";",
 	t_fmt: "import { t_fmt } from \"${folder}\";",
 	t_fragment: "import { t_fragment } from \"${folder}\";",
+	t_fragment_el: "import { t_fragment_el } from \"${folder}\";",
 	t_event: "import { t_event } from \"${folder}\";",
 	t_animate: "import { t_animate } from \"${folder}\";",
 	t_root: "import { t_root } from \"${folder}\";",
+	t_root_el: "import { t_root_el } from \"${folder}\";",
 	t_anchor: "import { t_anchor } from \"${folder}\";",
 	t_child: "import { t_child } from \"${folder}\";",
 	t_next: "import { t_next } from \"${folder}\";",
 	t_skip: "import { t_skip } from \"${folder}\";",
 	t_frg: "import { t_frg } from \"${folder}\";",
+	t_save_hydration: "import { t_save_hydration } from \"${folder}\";",
+	t_restore_hydration: "import { t_restore_hydration } from \"${folder}\";",
 	t_elm: "import { t_elm } from \"${folder}\";",
 	t_txt: "import { t_txt } from \"${folder}\";",
 	t_cmt: "import { t_cmt } from \"${folder}\";",
 	t_print: "import { t_print } from \"${folder}\";",
 	ListItem: "import { type ListItem } from \"${folder}\";",
+	ListItemSpec: "import { type ListItemSpec } from \"${folder}\";",
 	SlotRender: "import { type SlotRender } from \"${folder}\";",
 	devContext: "import { devContext } from \"${folder}/dev\";",
 	t_push_dev_bound: "import { t_push_dev_bound } from \"${folder}/dev\";",
@@ -1962,13 +2530,10 @@ function buildCode(template, map, options) {
 	buildTemplate(template, map, imports, b, options);
 	let startSize = b.toString().length;
 	if (imports.size) {
+		const folder = options?.renderFolder ?? "@torpor/view";
+		const sortedImports = Array.from(imports).map((imp) => (importsMap$1[imp] ?? imp).replace("${folder}", folder)).sort().reverse();
 		b.prepend("");
-		for (let imp of Array.from(imports).sort().reverse()) {
-			let importStatement = importsMap$1[imp] ?? imp;
-			let folder = options?.renderFolder ?? "@torpor/view";
-			importStatement = importStatement.replace("${folder}", folder);
-			b.prepend(importStatement);
-		}
+		for (let imp of sortedImports) b.prepend(imp);
 	}
 	if (options?.mapped) {
 		let diff = b.toString().length - startSize + 1;
@@ -1981,13 +2546,27 @@ function buildCode(template, map, options) {
 }
 function buildTemplate(template, map, imports, b, options) {
 	let script = template.script.map((s) => s.script).join("\n");
-	if (/\$watch\b/.test(script)) imports.add("$watch");
-	if (/\$cache\b/.test(script)) imports.add("$cache");
-	if (/\$run\b/.test(script)) imports.add("$run");
-	if (/\$mount\b/.test(script)) imports.add("$mount");
-	if (/\$unwrap\b/.test(script)) imports.add("$unwrap");
-	if (/\$peek\b/.test(script)) imports.add("$peek");
-	if (/\$batch\b/.test(script)) imports.add("$batch");
+	for (const component of template.components) {
+		if (component.markup) script += "\n" + collectMarkupExpressions(component.markup);
+		if (component.error) script += "\n" + collectMarkupExpressions(component.error);
+		if (component.head) script += "\n" + collectMarkupExpressions(component.head);
+	}
+	let scriptCode = codeRanges(script).map(([start, end]) => script.substring(start, end)).join("");
+	if (/\$watch\b/.test(scriptCode)) imports.add("$watch");
+	if (/\$bind\b/.test(scriptCode)) imports.add("$bind");
+	if (/\$cache\b/.test(scriptCode)) imports.add("$cache");
+	if (/\$async\b/.test(scriptCode)) imports.add("$async");
+	if (/\$pending\b/.test(scriptCode)) imports.add("$pending");
+	if (/\$refresh\b/.test(scriptCode)) imports.add("$refresh");
+	if (/\$run\b/.test(scriptCode)) imports.add("$run");
+	if (/\$onmount\b/.test(scriptCode)) imports.add("$onmount");
+	if (/\$stream\b/.test(scriptCode)) imports.add("$stream");
+	if (/\bfromElement\b/.test(scriptCode)) imports.add("fromElement");
+	if (/\bfromServer\b/.test(scriptCode)) imports.add("fromServer");
+	if (/\bfromWebSocket\b/.test(scriptCode)) imports.add("fromWebSocket");
+	if (/\$unwrap\b/.test(scriptCode)) imports.add("$unwrap");
+	if (/\$peek\b/.test(scriptCode)) imports.add("$peek");
+	if (/\$batch\b/.test(scriptCode)) imports.add("$batch");
 	let currentIndex = 0;
 	let current = template.components[0];
 	let status = makeStatus(imports, map, current, options);
@@ -1999,10 +2578,10 @@ function buildTemplate(template, map, imports, b, options) {
 					${current.markup ? "$parent" : "_$parent"}: ParentNode,
 					${current.markup ? "$anchor" : "_$anchor"}: Node | null,`);
 		if (current.params !== void 0) addMappedText("", current.params, ",", chunk.span, status, b);
-		else b.append(`${current.props?.length ? "$props: Record<PropertyKey, any>" : "// @ts-ignore\n$props?: Record<PropertyKey, any>"},`);
+		else b.append(`${current.props?.length ? "$props: Record<PropertyKey, any>" : "_$props?: Record<PropertyKey, any>"},`);
 		b.append(`
-					${current.contextProps?.length ? "$context" : "// @ts-ignore\n$context"}?: Record<PropertyKey, any>,
-					${current.slotProps?.length ? "$slots" : "// @ts-ignore\n$slots"}?: Record<string, SlotRender>`);
+				${current.contextProps?.length || current.markup && markupRendersComponent(current.markup) || current.error && markupRendersComponent(current.error) ? "$context" : "_$context"}?: Record<PropertyKey, any>,
+				${current.slotProps?.length ? "$slots" : "_$slots"}?: Record<string, SlotRender>,`);
 	} else if (chunk.script === ") /* @return_type */ {") b.append("): void {");
 	else if (chunk.script === "/* @start */") {
 		addPushDevBoundary("component", current.name || "Anon Component", status, b);
@@ -2011,10 +2590,26 @@ function buildTemplate(template, map, imports, b, options) {
 		if (current.markup) {
 			b.append("");
 			b.append("/* User interface */");
+			if (current.error) {
+				status.imports.add("t_region");
+				status.imports.add("t_run_try");
+				b.append(`const t_error_region = t_region();`);
+				b.append(`t_run_try(t_error_region, $anchor, () => {`);
+			}
 			buildFragmentText(current.markup, status, b);
 			b.append("");
 			buildNode(current.markup, status, b, "$parent", "$anchor", true);
 		}
+	} else if (chunk.script === "/* @error */") {
+		if (current.markup && current.error) {
+			b.append(`}, (_, ${current.errorVar ?? "err"}) => {`);
+			b.append("");
+			b.append("/* User interface error */");
+			buildFragmentText(current.error, status, b);
+			b.append("");
+			buildNode(current.error, status, b, "$parent", "$anchor", true);
+			b.append(`}${status.options.dev === true ? ", \"runError\"" : ""});`);
+		}
 	} else if (chunk.script === "/* @head */") {
 		if (current.head) {
 			b.append("");
@@ -2046,15 +2641,26 @@ function makeStatus(imports, map, current, options) {
 		options: options ?? {}
 	};
 }
-
 //#endregion
 //#region src/compile/build/client/buildStyles.ts
 function buildStyles(style, styleHash) {
 	const b = new Builder();
-	for (let block of style.blocks) buildStyleBlock(block, b, styleHash);
+	for (let block of style.children) buildStyleNode(block, b, styleHash);
 	return b.toString();
 }
-function buildStyleBlock(block, b, styleHash) {
+function buildStyleNode(node, b, styleHash) {
+	switch (node.type) {
+		case "block":
+			buildBlockNode(node, b, styleHash);
+			break;
+		case "attribute":
+			buildAttributeNode(node, b);
+			break;
+		case "comment": break;
+		default: throw new Error(`Invalid style node type: ${node.type}`);
+	}
+}
+function buildBlockNode(block, b, styleHash) {
 	if (block.selector.startsWith("@")) b.append(`${block.selector} {`);
 	else {
 		block.selector = block.selector.replaceAll(/\s+/g, " ");
@@ -2080,8 +2686,7 @@ function buildStyleBlock(block, b, styleHash) {
 		}
 		b.append(`${selectors.join(" ").replaceAll(" ,", ",")} {`);
 	}
-	for (let attribute of block.attributes) buildStyleAttribute(attribute, b);
-	for (let child of block.children) buildStyleBlock(child, b, styleHash);
+	for (let child of block.children) buildStyleNode(child, b, styleHash);
 	b.append(`}`);
 }
 function addSelector(selectors, selector, styleHash, start, end, global) {
@@ -2100,10 +2705,9 @@ function addSelector(selectors, selector, styleHash, start, end, global) {
 		selectors.push(s);
 	}
 }
-function buildStyleAttribute(attribute, b) {
+function buildAttributeNode(attribute, b) {
 	b.append(`${attribute.name}: ${attribute.value};`);
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerComponentNode.ts
 function buildServerComponentNode(node, status, b) {
@@ -2119,20 +2723,16 @@ function buildServerComponentNode(node, status, b) {
 		for (let { name, value } of node.attributes) {
 			if (name.startsWith("&")) name = name.substring(1);
 			if (name === "class" && value != null) {
-				status.imports.add("t_class");
-				const params = [value];
-				if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
+				if (node.scopeStyles) value = `[${value}, "torp-${status.styleHash}"]`;
 				props.push({
 					name,
-					value: `t_class(${params.join(", ")})`
+					value
 				});
-			} else if (name === "style" && value != null) {
-				status.imports.add("t_style");
-				props.push({
-					name,
-					value: `t_style(${value})`
-				});
-			} else if (value != null) props.push({
+			} else if (name === "style" && value != null) props.push({
+				name,
+				value
+			});
+			else if (value != null) props.push({
 				name,
 				value
 			});
@@ -2142,17 +2742,17 @@ function buildServerComponentNode(node, status, b) {
 			});
 		}
 		b.append(`const ${propsName} = {`);
-		for (let p of props) b.append(`${p.name}: ${p.value},`);
+		for (let p of props) b.append(p.name ? `${p.name}: ${p.value},` : `${p.value},`);
 		b.append("};");
 	}
 	const componentHasSlots = node.children.length;
 	const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
 	if (componentHasSlots) {
 		b.append(`const ${slotsName}: Record<string, ServerSlotRender> = {};`);
-		for (let slot of node.children) if (isSpecialNode(slot) && slot.tagName === "fill") {
+		for (let slot of node.children) if (isSpecialNode(slot) && (slot.tagName === "fill" || slot.tagName === "filldef")) {
 			const nameAttribute = slot.attributes.find((a) => a.name === "name");
 			const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
-			const slotParams = [slot.hasSlotProps ? "$sprops: Record<PropertyKey, any>" : "// @ts-ignore\n$sprops?: Record<PropertyKey, any>", "// @ts-ignore\n$context?: Record<PropertyKey, any>"];
+			const slotParams = [slot.hasSlotProps ? "$slot: Record<PropertyKey, any>" : "_$slot?: Record<PropertyKey, any>", "// @ts-ignore\n// eslint-disable-next-line no-unused-vars\n$context?: Record<PropertyKey, any>"];
 			b.append(`${slot.hasSlotProps ? "// @ts-ignore\n" : ""}${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`);
 			b.append(`let t_body = "";`);
 			for (let child of slot.children) buildServerNode(child, status, b);
@@ -2176,9 +2776,8 @@ function buildServerComponentNode(node, status, b) {
 	b.append(`t_body += ${componentResult}.body;`);
 	b.append(`t_head += ${componentResult}.head;`);
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerAwaitNode.ts
 function buildServerAwaitNode(node, status, b) {
@@ -2187,9 +2786,9 @@ function buildServerAwaitNode(node, status, b) {
 		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
-	for (let branch of node.children) if (isControlNode(branch) && branch.operation === "@await") buildServerAwaitBranch(branch, status, b);
+	for (let branch of node.children) if (isControlNode(branch) && branch.operation === "@with") buildServerAwaitBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
 function buildServerAwaitBranch(node, status, b) {
 	for (let child of node.children) buildServerNode(child, status, b);
@@ -2198,7 +2797,6 @@ function buildServerAwaitBranch(node, status, b) {
 		status.output = "";
 	}
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerForNode.ts
 function buildServerForNode(node, status, b) {
@@ -2209,7 +2807,7 @@ function buildServerForNode(node, status, b) {
 	}
 	for (let branch of node.children) if (isControlNode(branch)) buildServerForBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
 function buildServerForBranch(node, status, b) {
 	b.append(`${node.statement} {`);
@@ -2221,16 +2819,14 @@ function buildServerForBranch(node, status, b) {
 	}
 	b.append("}");
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerHtmlNode.ts
 function buildServerHtmlNode(node, status) {
 	status.output += HYDRATION_START_COMMENT;
 	for (let branch of node.children) if (isControlNode(branch)) status.output += `\${${branch.statement}}`;
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerIfNode.ts
 function buildServerIfNode(node, status, b) {
@@ -2241,7 +2837,7 @@ function buildServerIfNode(node, status, b) {
 	}
 	for (let branch of node.children) if (isControlNode(branch)) buildServerIfBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
 function buildServerIfBranch(node, status, b) {
 	b.append(`${node.statement} {`);
@@ -2253,7 +2849,6 @@ function buildServerIfBranch(node, status, b) {
 	}
 	b.append("}");
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerReplaceNode.ts
 function buildServerReplaceNode(node, status, b) {
@@ -2264,7 +2859,7 @@ function buildServerReplaceNode(node, status, b) {
 	}
 	for (let branch of node.children) if (isControlNode(branch)) buildServerReplaceBranch(branch, status, b);
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
 function buildServerReplaceBranch(node, status, b) {
 	b.append(`${node.statement};`);
@@ -2274,7 +2869,6 @@ function buildServerReplaceBranch(node, status, b) {
 		status.output = "";
 	}
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerScriptNode.ts
 function buildServerScriptNode(node, b) {
@@ -2284,7 +2878,6 @@ function maybeAppend(text, end) {
 	if (!text.endsWith(end)) text += end;
 	return text;
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerSwitchNode.ts
 function buildServerSwitchNode(node, status, b) {
@@ -2297,7 +2890,7 @@ function buildServerSwitchNode(node, status, b) {
 	for (let branch of node.children.filter((c) => isControlNode(c))) if (isControlNode(branch)) buildServerSwitchBranch(branch, status, b);
 	b.append("}");
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
 function buildServerSwitchBranch(node, status, b) {
 	b.append(`${node.statement} {`);
@@ -2310,7 +2903,39 @@ function buildServerSwitchBranch(node, status, b) {
 	b.append("break;");
 	b.append("}");
 }
-
+//#endregion
+//#region src/compile/build/server/buildServerTryNode.ts
+function buildServerTryNode(node, status, b) {
+	status.output += HYDRATION_START_COMMENT;
+	if (status.output) {
+		b.append(`t_body += \`${status.output}\`;`);
+		status.output = "";
+	}
+	const branches = node.children.filter((n) => isControlNode(n));
+	let tryBranch = branches.find((n) => n.operation === "@try");
+	let catchBranch = branches.find((n) => n.operation === "@catch");
+	if (catchBranch) {
+		b.append(`const t_try_body = t_body;`);
+		b.append(`const t_try_head = t_head;`);
+		b.append("try {");
+		if (tryBranch) buildServerTryBranch(tryBranch, status, b);
+		const catchVar = trimMatched(catchBranch.statement.substring(5).trim(), "(", ")");
+		b.append(`} catch (${catchVar || "err"}) {`);
+		b.append("t_body = t_try_body;");
+		b.append("t_head = t_try_head;");
+		buildServerTryBranch(catchBranch, status, b);
+		b.append("}");
+	} else if (tryBranch) buildServerTryBranch(tryBranch, status, b);
+	status.output += HYDRATION_END_COMMENT;
+	status.output += "<!>";
+}
+function buildServerTryBranch(node, status, b) {
+	for (let child of node.children) buildServerNode(child, status, b);
+	if (status.output) {
+		b.append(`t_body += \`${status.output}\`;`);
+		status.output = "";
+	}
+}
 //#endregion
 //#region src/compile/build/server/buildServerControlNode.ts
 function buildServerControlNode(node, status, b) {
@@ -2335,8 +2960,12 @@ function buildServerControlNode(node, status, b) {
 			buildServerAwaitNode(node, status, b);
 			break;
 		case "@await":
-		case "@then":
+		case "@with":
+		case "@try":
 		case "@catch": break;
+		case "@try group":
+			buildServerTryNode(node, status, b);
+			break;
 		case "@replace group":
 			buildServerReplaceNode(node, status, b);
 			break;
@@ -2364,30 +2993,9 @@ function buildServerControlNode(node, status, b) {
 			break;
 		case "@console":
 		case "@debugger": break;
-		default: throw new Error(`Invalid operation: ${node.operation}`);
-	}
-}
-
-//#endregion
-//#region src/compile/utils/voidTags.ts
-const voidTags = [
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr"
-];
-var voidTags_default = voidTags;
-
+		default: throw new Error(`Invalid operation: ${node.operation}`);
+	}
+}
 //#endregion
 //#region src/compile/build/server/buildServerElementNode.ts
 function buildServerElementNode(node, status, b) {
@@ -2399,7 +3007,7 @@ function buildServerElementNode(node, status, b) {
 		if (selfAttribute) tagName = `$\{${selfAttribute.value}}`;
 	}
 	status.output += `<${tagName}${attributes}>`;
-	if (!voidTags_default.includes(tagName)) {
+	if (!voidTags.includes(tagName)) {
 		const oldPreserveWhitespace = status.preserveWhitespace;
 		status.preserveWhitespace = ["pre", "code"].includes(tagName);
 		for (let child of node.children) buildServerNode(child, status, b);
@@ -2411,6 +3019,7 @@ function buildElementAttributes(node, status) {
 	let needsClass = node.scopeStyles;
 	let attributes = [];
 	for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (name.startsWith("on") || name.startsWith(":on")) {} else if (name.startsWith("transition") && value) {} else if (value != null && fullyReactive) if (name === "&value" || name === "&checked" || name === "&group") {
+		if (name === "&value" && node.tagName === "select" && node.attributes.some((a) => a.name === "multiple")) continue;
 		let defaultValue = "";
 		let typeAttribute = node.attributes.find((a) => a.name === "type");
 		if (typeAttribute && typeAttribute.value) switch (trimQuotes(typeAttribute.value)) {
@@ -2457,13 +3066,11 @@ function buildElementAttributes(node, status) {
 	if (needsClass) attributes.push(`class="torp-${status.styleHash}"`);
 	return attributes.join(" ");
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerRootNode.ts
 function buildServerRootNode(node, status, b) {
 	for (let child of node.children) buildServerNode(child, status, b);
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerSlotNode.ts
 function buildServerSlotNode(node, status, b) {
@@ -2474,7 +3081,7 @@ function buildServerSlotNode(node, status, b) {
 	}
 	let slotName = node.attributes.find((a) => a.name === "name")?.value;
 	slotName = slotName ? trimQuotes(slotName) : "_";
-	const propsName = nextVarName("sprops", status);
+	const propsName = nextVarName("slot_props", status);
 	const slotAttributes = node.attributes.filter((a) => a.name !== "name");
 	const slotHasProps = slotAttributes.length;
 	if (slotHasProps) {
@@ -2484,7 +3091,7 @@ function buildServerSlotNode(node, status, b) {
 	}
 	b.append(`if ($slots && $slots["${slotName}"]) {`);
 	b.append(`t_body += $slots["${slotName}"](${slotHasProps ? propsName : "undefined"}, $context);`);
-	const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === "fill");
+	const fill = node.children.find((c) => isSpecialNode(c) && (c.tagName === "fill" || c.tagName === "filldef"));
 	if (fill && isSpecialNode(fill) && fill.children.length) {
 		b.append(`} else {`);
 		for (let child of fill.children) buildServerNode(child, status, b);
@@ -2495,9 +3102,8 @@ function buildServerSlotNode(node, status, b) {
 	}
 	b.append(`}`);
 	status.output += HYDRATION_END_COMMENT;
-	status.output += ANCHOR_COMMENT;
+	status.output += "<!>";
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerSpecialNode.ts
 function buildServerSpecialNode(node, status, b) {
@@ -2505,7 +3111,8 @@ function buildServerSpecialNode(node, status, b) {
 		case "slot":
 			buildServerSlotNode(node, status, b);
 			break;
-		case "fill": break;
+		case "fill":
+		case "filldef": break;
 		case "@element":
 			buildServerElementNode(node, status, b);
 			break;
@@ -2515,7 +3122,6 @@ function buildServerSpecialNode(node, status, b) {
 		default: throw new Error(`Invalid special node: ${node.tagName}`);
 	}
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerTextNode.ts
 function buildServerTextNode(node, status) {
@@ -2524,7 +3130,6 @@ function buildServerTextNode(node, status) {
 	let level = 0;
 	for (let i = 0; i < content.length; i++) {
 		const char = content[i];
-		const nextChar = content[i + 1];
 		if (char === "{") {
 			level++;
 			if (level === 1) {
@@ -2537,35 +3142,16 @@ function buildServerTextNode(node, status) {
 			if (level === 0) status.output += ")";
 		} else if (char === "`" && level === 0) status.output += "\\";
 		else if (level > 0) {
-			if (char === "/" && nextChar === "/") {
-				let start = i;
-				i = content.indexOf("\n", i);
-				status.output += escapeHtml(content.substring(start, i + 1));
-				continue;
-			} else if (char === "/" && nextChar === "*") {
-				let start = i;
-				i = content.indexOf("*/", i) + 1;
-				status.output += escapeHtml(content.substring(start, i + 1));
-				continue;
-			} else if (char === "\"" || char === "'") {
-				let start = i;
-				i = endOfString(char, content, i);
-				status.output += escapeHtml(content.substring(start, i + 1));
-				continue;
-			} else if (char === "`") {
-				let start = i;
-				i = endOfTemplateString(content, i);
-				status.output += escapeHtml(content.substring(start, i + 1));
+			const skipped = skipStringOrComment(content, i);
+			if (skipped !== -1) {
+				status.output += content.substring(i, skipped);
+				i = skipped - 1;
 				continue;
 			}
 		}
 		status.output += char;
 	}
 }
-function escapeHtml(text) {
-	return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
-}
-
 //#endregion
 //#region src/compile/build/server/buildServerNode.ts
 function buildServerNode(node, status, b) {
@@ -2588,17 +3174,25 @@ function buildServerNode(node, status, b) {
 		case "special":
 			buildServerSpecialNode(node, status, b);
 			break;
+		case "comment": break;
 		default: throw new Error(`Invalid node type: ${node.type}`);
 	}
 }
-
 //#endregion
 //#region src/compile/build/server/buildServerCode.ts
 const importsMap = {
 	$watch: "import { $watch } from \"${folder}\";",
+	$bind: "import { $bind } from \"${folder}\";",
 	$cache: "import { $cache } from \"${folder}\";",
+	$async: "import { $async } from \"${folder}\";",
+	$pending: "import { $pending } from \"${folder}\";",
+	$refresh: "import { $refresh } from \"${folder}\";",
 	$run: "import { $run } from \"${folder}\";",
-	$mount: "import { $mount } from \"${folder}\";",
+	$onmount: "import { $onmount } from \"${folder}\";",
+	$stream: "import { $stream } from \"${folder}\";",
+	fromElement: "import { fromElement } from \"${folder}\";",
+	fromServer: "import { fromServer } from \"${folder}\";",
+	fromWebSocket: "import { fromWebSocket } from \"${folder}\";",
 	$unwrap: "import { $unwrap } from \"${folder}\";",
 	$peek: "import { $peek } from \"${folder}\";",
 	$batch: "import { $batch } from \"${folder}\";",
@@ -2614,33 +3208,46 @@ function buildServerCode(template, options) {
 	imports.add("ServerSlotRender");
 	buildServerTemplate(template, imports, b, options);
 	if (imports.size) {
+		const folder = options?.renderFolder ?? "@torpor/view/ssr";
+		const sortedImports = Array.from(imports).map((imp) => (importsMap[imp] ?? imp).replace("${folder}", folder)).sort().reverse();
 		b.prepend("");
-		for (let imp of Array.from(imports).sort().reverse()) {
-			imp = importsMap[imp] || imp;
-			b.prepend(imp.replace("${folder}", options?.renderFolder || "@torpor/view/ssr"));
-		}
+		for (let imp of sortedImports) b.prepend(imp);
 	}
 	return b.toString();
 }
 function buildServerTemplate(template, imports, b, options) {
 	let script = template.script.map((s) => s.script).join("\n");
-	if (/\$watch\b/.test(script)) imports.add("$watch");
-	if (/\$cache\b/.test(script)) imports.add("$cache");
-	if (/\$run\b/.test(script)) imports.add("$run");
-	if (/\$mount\b/.test(script)) imports.add("$mount");
-	if (/\$unwrap\b/.test(script)) imports.add("$unwrap");
-	if (/\$peek\b/.test(script)) imports.add("$peek");
-	if (/\$batch\b/.test(script)) imports.add("$batch");
+	for (const component of template.components) {
+		if (component.markup) script += "\n" + collectMarkupExpressions(component.markup);
+		if (component.error) script += "\n" + collectMarkupExpressions(component.error);
+		if (component.head) script += "\n" + collectMarkupExpressions(component.head);
+	}
+	let scriptCode = codeRanges(script).map(([start, end]) => script.substring(start, end)).join("");
+	if (/\$watch\b/.test(scriptCode)) imports.add("$watch");
+	if (/\$bind\b/.test(scriptCode)) imports.add("$bind");
+	if (/\$cache\b/.test(scriptCode)) imports.add("$cache");
+	if (/\$async\b/.test(scriptCode)) imports.add("$async");
+	if (/\$pending\b/.test(scriptCode)) imports.add("$pending");
+	if (/\$refresh\b/.test(scriptCode)) imports.add("$refresh");
+	if (/\$run\b/.test(scriptCode)) imports.add("$run");
+	if (/\$onmount\b/.test(scriptCode)) imports.add("$onmount");
+	if (/\$stream\b/.test(scriptCode)) imports.add("$stream");
+	if (/\bfromElement\b/.test(scriptCode)) imports.add("fromElement");
+	if (/\bfromServer\b/.test(scriptCode)) imports.add("fromServer");
+	if (/\bfromWebSocket\b/.test(scriptCode)) imports.add("fromWebSocket");
+	if (/\$unwrap\b/.test(scriptCode)) imports.add("$unwrap");
+	if (/\$peek\b/.test(scriptCode)) imports.add("$peek");
+	if (/\$batch\b/.test(scriptCode)) imports.add("$batch");
 	let currentIndex = 0;
 	let current = template.components[0];
 	for (let chunk of template.script) if (chunk.script === "/* @params */") {
 		let params = [
-			current.params ?? `${current.props?.length ? "$props: Record<PropertyKey, any>" : "// @ts-ignore\n$props?: Record<PropertyKey, any>"}`,
-			`${current.contextProps?.length ? "$context" : "// @ts-ignore\n$context"}?: Record<PropertyKey, any>`,
-			`${current.slotProps?.length ? "$slots" : "// @ts-ignore\n$slots"}?: Record<string, ServerSlotRender>`
+			current.params ?? `${current.props?.length ? "$props: Record<PropertyKey, any>" : "_$props?: Record<PropertyKey, any>"}`,
+			`${current.contextProps?.length || current.markup && markupRendersComponent(current.markup) || current.error && markupRendersComponent(current.error) ? "$context" : "_$context"}?: Record<PropertyKey, any>`,
+			`${current.slotProps?.length ? "$slots" : "_$slots"}?: Record<string, ServerSlotRender>`
 		];
-		b.append(params.join(",\n"));
-	} else if (chunk.script === ") /* @return_type */ {") b.append("): { body: string, head: string } {");
+		b.append(params.join(",\n") + ",");
+	} else if (chunk.script === ") /* @return_type */ {") b.append("): { body: string; head: string } {");
 	else if (chunk.script === "/* @start */") {
 		if (current.contextProps?.length) b.append(`$context = Object.assign({}, $context);`);
 		b.append(`let t_body = "";`);
@@ -2657,12 +3264,38 @@ function buildServerTemplate(template, imports, b, options) {
 			};
 			b.append("");
 			b.append("/* User interface */");
+			if (current.error) {
+				b.append(`const t_try_body = t_body;`);
+				b.append(`const t_try_head = t_head;`);
+				b.append("try {");
+			}
 			buildServerNode(current.markup, status, b);
 			if (status.output) {
 				b.append(`t_body += \`${status.output}\`;`);
 				status.output = "";
 			}
 		}
+	} else if (chunk.script === "/* @error */") {
+		if (current.markup && current.error) {
+			const status = {
+				imports,
+				output: "",
+				styleHash: current.style?.hash || "",
+				varNames: {},
+				preserveWhitespace: false,
+				options
+			};
+			b.append(`} catch (${current.errorVar}) {`);
+			b.append("t_body = t_try_body;");
+			b.append("t_head = t_try_head;");
+			b.append("/* User interface error */");
+			buildServerNode(current.error, status, b);
+			if (status.output) {
+				b.append(`t_body += \`${status.output}\`;`);
+				status.output = "";
+			}
+			b.append("}");
+		}
 	} else if (chunk.script === "/* @head */") {} else if (chunk.script === "/* @style */") {
 		if (current.style) {
 			b.append("");
@@ -2676,7 +3309,109 @@ function buildServerTemplate(template, imports, b, options) {
 		current = template.components[currentIndex];
 	} else b.append(chunk.script);
 }
-
+//#endregion
+//#region src/compile/utils/trimWhitespace.ts
+/**
+* Tag names whose contents should keep all whitespace untouched, matching
+* native HTML rendering of `pre`/`textarea` and the existing build-time
+* `preserveWhitespace` behavior for `code`.
+*/
+const PRESERVE_TAGS = /* @__PURE__ */ new Set([
+	"pre",
+	"textarea",
+	"code"
+]);
+/**
+* Container tags whose child layout ignores inter-child whitespace entirely
+* (table layout collapses it). Inside these, whitespace-only text nodes
+* between children are removed rather than collapsed to a single space.
+*/
+const WHITESPACE_INSIGNIFICANT_TAGS = /* @__PURE__ */ new Set([
+	"tr",
+	"tbody",
+	"thead",
+	"tfoot",
+	"colgroup",
+	"table",
+	"ul",
+	"ol",
+	"select"
+]);
+/**
+* Trims and collapses whitespace text nodes in a parsed markup tree,
+* Svelte 5-style:
+*
+* - pure-whitespace text nodes at the start/end of a container are removed
+* - pure-whitespace text nodes between siblings are collapsed to a single space
+*   (or removed entirely inside table/list containers where whitespace is
+*   insignificant — see WHITESPACE_INSIGNIFICANT_TAGS)
+* - whitespace inside `pre`, `textarea`, and `code` is preserved
+*
+* Whitespace adjacent to non-rendering control nodes (e.g. `@key`, `@const`)
+* is treated as leading/trailing whitespace of the container and removed,
+* because those nodes produce no DOM output — without this rule, every row
+* of `@for { @key = ...; <tr>...</tr> }` would emit a phantom leading
+* whitespace text node.
+*
+* Mixed text nodes (containing non-whitespace content) are left untouched;
+* their internal whitespace continues to be collapsed at build time. The
+* walk mutates the tree in place and is idempotent.
+*
+* @param node The root node of the markup to trim (a component's markup or head)
+*/
+function trimWhitespace(node) {
+	trimChildren(node.children, false, void 0);
+}
+function trimChildren(children, preserveAll, parentTag) {
+	for (const child of children) {
+		const grandChildren = getChildren(child);
+		if (grandChildren) {
+			const childTag = getTagName(child);
+			trimChildren(grandChildren, preserveAll || PRESERVE_TAGS.has(childTag ?? ""), childTag);
+		}
+	}
+	if (preserveAll) return;
+	if (parentTag !== void 0 && WHITESPACE_INSIGNIFICANT_TAGS.has(parentTag)) {
+		for (let i = children.length - 1; i >= 0; i--) if (isWhitespaceText(children[i])) children.splice(i, 1);
+		return;
+	}
+	const length = children.length;
+	const hasRenderingBefore = Array.from({ length });
+	const hasRenderingAfter = Array.from({ length });
+	let seenBefore = false;
+	let seenAfter = false;
+	for (let i = 0; i < length; i++) {
+		hasRenderingBefore[i] = seenBefore;
+		if (isRenderingSibling(children[i])) seenBefore = true;
+		const j = length - 1 - i;
+		hasRenderingAfter[j] = seenAfter;
+		if (isRenderingSibling(children[j])) seenAfter = true;
+	}
+	for (let i = length - 1; i >= 0; i--) if (isWhitespaceText(children[i]) && (!hasRenderingBefore[i] || !hasRenderingAfter[i])) children.splice(i, 1);
+	for (const child of children) if (isTextNode(child) && child.content !== "" && isSpace(child.content)) child.content = " ";
+}
+/**
+* Returns true if `node` is a "rendering sibling" — i.e. a node that produces
+* visible DOM output and therefore acts as a boundary between leading,
+* inter-sibling, and trailing whitespace. Whitespace text nodes themselves
+* (the subject of the trim) and non-rendering control nodes (e.g. @key,
+* @const) are not rendering siblings.
+*/
+function isRenderingSibling(node) {
+	if (isWhitespaceText(node)) return false;
+	if (isControlNode(node) && NON_RENDERING_OPERATIONS.has(node.operation)) return false;
+	return true;
+}
+function getChildren(node) {
+	if (node.type === "text" || node.type === "comment") return void 0;
+	return node.children;
+}
+function getTagName(node) {
+	if (node.type === "element" || node.type === "component" || node.type === "special") return node.tagName;
+}
+function isWhitespaceText(node) {
+	return isTextNode(node) && node.content !== "" && isSpace(node.content);
+}
 //#endregion
 //#region src/compile/build.ts
 /**
@@ -2687,6 +3422,11 @@ function buildServerTemplate(template, imports, b, options) {
 * @returns The component's code and styles
 */
 function build(template, options) {
+	if (!options?.preserveWhitespace) for (const component of template.components) {
+		if (component.markup) trimWhitespace(component.markup);
+		if (component.error) trimWhitespace(component.error);
+		if (component.head) trimWhitespace(component.head);
+	}
 	let map = [];
 	return {
 		code: options?.server ? buildServerCode(template, options) : buildCode(template, map, options),
@@ -2697,7 +3437,6 @@ function build(template, options) {
 		map
 	};
 }
-
 //#endregion
 //#region src/compile/buildType.ts
 /**
@@ -2719,7 +3458,7 @@ function buildType(template, options) {
 		}
 		b.append(`
 			${component.documentation ?? ""}
-			${component.default ? "declare" : "export declare"} function ${component.name}(
+			${component.default ? "declare" : "export declare"} function ${component.name}${component.typeParams ?? ""}(
 				$parent: ParentNode,
 				$anchor: Node | null,
 				${component.params || "$props?: Record<PropertyKey, any>"},
@@ -2731,13 +3470,29 @@ function buildType(template, options) {
 	}
 	return b.toString();
 }
-
+//#endregion
+//#region src/compile/utils/endOfTemplateString.ts
+/**
+* Returns the index of the closing backtick of the template string that
+* starts at `start`.
+*
+* NOTE: For scanning JavaScript expression text, use `codeScanner.ts` instead
+* -- this variant doesn't handle escaped characters or nested templates in
+* interpolations, and is kept only for non-JS contexts (CSS in `@style`
+* blocks) where a simpler scan is wanted.
+*/
+function endOfTemplateString(content, start) {
+	let level = 0;
+	for (let j = start + 1; j < content.length; j++) if (content[j] === "`" && content[j - 1] !== "\\" && level === 0) return j;
+	else if (content[j] === "{" && (level > 0 || content[j - 1] === "$")) level += 1;
+	else if (content[j] === "}" && level > 0) level -= 1;
+	return content.length;
+}
 //#endregion
 //#region src/compile/utils/isSpaceNode.ts
 function isSpaceNode(node) {
 	return isTextNode(node) && isSpace(node.content);
 }
-
 //#endregion
 //#region src/compile/parse/utils/accept.ts
 /**
@@ -2758,25 +3513,24 @@ function accept(value, status, advance = true) {
 	}
 	return false;
 }
-
 //#endregion
 //#region src/compile/parse/parseInlineScript.ts
 function parseInlineScript(status) {
 	const start = status.i;
 	let braceCount = 0;
-	while (status.i < status.source.length) if (accept("{", status)) braceCount += 1;
-	else if (accept("}", status)) if (braceCount > 0) braceCount -= 1;
-	else return status.source.substring(start, status.i - 1);
-	else if (accept("//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
-	else if (accept("/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
-	else if (accept("\"", status) || accept("'", status)) {
-		const char = status.source[status.i - 1];
-		status.i = endOfString(char, status.source, status.i - 1) + 1;
-	} else if (accept("`", status)) status.i = endOfTemplateString(status.source, status.i - 1) + 1;
-	else status.i += 1;
+	while (status.i < status.source.length) {
+		const skipped = skipStringOrComment(status.source, status.i);
+		if (skipped !== -1) {
+			status.i = skipped;
+			continue;
+		}
+		if (accept("{", status)) braceCount += 1;
+		else if (accept("}", status)) if (braceCount > 0) braceCount -= 1;
+		else return status.source.substring(start, status.i - 1);
+		else status.i += 1;
+	}
 	return "";
 }
-
 //#endregion
 //#region src/compile/utils/trimStart.ts
 /**
@@ -2792,7 +3546,6 @@ function trimStart(text, char) {
 	while (text[start] === char) start += 1;
 	return text.substring(start);
 }
-
 //#endregion
 //#region src/compile/parse/utils/consumeSpace.ts
 /**
@@ -2809,7 +3562,6 @@ function consumeSpace(status) {
 	for (status.i; status.i < status.source.length; status.i++) if (!isSpaceChar(status.source, status.i)) return status.source.substring(start, status.i);
 	return "";
 }
-
 //#endregion
 //#region src/compile/parse/addSpaceElement.ts
 function addSpaceElement(parent, status) {
@@ -2827,7 +3579,6 @@ function addSpaceElement(parent, status) {
 		}
 	}
 }
-
 //#endregion
 //#region src/compile/utils/isFullyReactive.ts
 /**
@@ -2840,7 +3591,41 @@ function addSpaceElement(parent, status) {
 function isFullyReactive(text) {
 	return text.trim().startsWith("{") && text.trim().endsWith("}");
 }
-
+//#endregion
+//#region src/compile/parse/utils/addError.ts
+/**
+* Adds an error to the parse status
+*
+* @param status The parse status
+* @param message The error message to add
+* @param start (Optional) The start position of the error (defaults to the
+* current parse position)
+*/
+function addError(status, message, start = status.i, end = status.i) {
+	let startLine = 0;
+	let lastLineStart = 0;
+	let i = 0;
+	for (; i < start; i++) if (status.source[i] === "\n") {
+		startLine += 1;
+		lastLineStart = i + 1;
+	}
+	let startChar = start - lastLineStart;
+	let endLine = startLine;
+	for (; i < end; i++) if (status.source[i] === "\n") {
+		endLine += 1;
+		lastLineStart = i + 1;
+	}
+	let endChar = end - lastLineStart;
+	status.errors.push({
+		message,
+		startIndex: start,
+		startLine,
+		startChar,
+		endIndex: end,
+		endLine,
+		endChar
+	});
+}
 //#endregion
 //#region src/compile/parse/utils/isAlphaNumericChar.ts
 /**
@@ -2855,7 +3640,6 @@ function isAlphaNumericChar(text, index) {
 	let code = text.charCodeAt(index);
 	return code > 47 && code < 58 || code > 64 && code < 91 || code > 96 && code < 123;
 }
-
 //#endregion
 //#region src/compile/parse/utils/consumeAlphaNumeric.ts
 /**
@@ -2872,7 +3656,6 @@ function consumeAlphaNumeric(status) {
 	for (status.i; status.i < status.source.length; status.i++) if (!isAlphaNumericChar(status.source, status.i)) return status.source.substring(start, status.i);
 	return "";
 }
-
 //#endregion
 //#region src/compile/parse/utils/consumeUntil.ts
 /**
@@ -2890,7 +3673,6 @@ function consumeUntil(chars, status) {
 	for (status.i; status.i < status.source.length; status.i++) if (chars.includes(status.source[status.i])) return status.source.substring(start, status.i);
 	return "";
 }
-
 //#endregion
 //#region src/compile/parse/parseTag.ts
 function parseTag(status) {
@@ -2913,6 +3695,7 @@ function parseTag(status) {
 		type: [
 			"slot",
 			"fill",
+			"filldef",
 			"@component",
 			"@element"
 		].includes(tagName) ? "special" : "element",
@@ -2966,10 +3749,12 @@ function parseAttribute(status) {
 		value = name.substring(1, name.length - 1);
 		valueStart++;
 		valueEnd = valueStart + name.length;
-		name = value.split(".").at(-1);
+		if (value.startsWith("...")) name = value;
+		else name = value.split(".").at(-1);
 		if (name.endsWith("!")) name = name.substring(0, name.length - 1);
 		reactive = fullyReactive = true;
 	}
+	if (value != null && reactive && value.startsWith("...")) addError(status, `Spread attributes are not supported`, valueStart, valueEnd);
 	return {
 		name,
 		value,
@@ -3000,7 +3785,6 @@ function parseAttributeValue(status) {
 		return value;
 	}
 }
-
 //#endregion
 //#region src/compile/parse/parseText.ts
 function parseText(status, element) {
@@ -3014,18 +3798,16 @@ function parseText(status, element) {
 			let level = 0;
 			for (let k = j; k < status.source.length; k++) {
 				const char = status.source[k];
-				const nextChar = status.source[k + 1];
-				if (char === "/" && nextChar === "/") k = status.source.indexOf("\n", k);
-				else if (char === "/" && nextChar === "*") k = status.source.indexOf("*/", k) + 1;
-				else if (char === "\"" || char === "'") k = endOfString(char, status.source, k);
-				else if (char === "`") k = endOfTemplateString(status.source, k);
-				else if (char === "{") level += 1;
+				if (char === "{") level += 1;
 				else if (char === "}") {
 					level -= 1;
 					if (level === 0) {
 						j = k;
 						break;
 					}
+				} else {
+					const skipped = skipStringOrComment(status.source, k);
+					if (skipped !== -1) k = skipped - 1;
 				}
 			}
 			spans.push({
@@ -3061,7 +3843,38 @@ function parseText(status, element) {
 		status.i = end;
 	} else status.i += 1;
 }
-
+//#endregion
+//#region src/compile/parse/utils/usesSlot.ts
+const slotRegex = /\$slot\b/;
+/**
+* Checks whether the $slot variable is read in the nodes' own scope
+*
+* Note that the children of a component node are excluded, because they are
+* passed to the component as fills, which get their own $slot parameter.
+* The component's attributes do belong to this scope.
+*
+* @param nodes The nodes to check
+*
+* @returns True if a $slot variable is read in the nodes' own scope
+*/
+function usesSlot(nodes) {
+	for (let node of nodes) if (node.type === "text") {
+		const text = node;
+		if (slotRegex.test(text.content)) return true;
+	} else if (node.type === "control") {
+		const control = node;
+		if (slotRegex.test(control.statement)) return true;
+		if (usesSlot(control.children)) return true;
+	} else if (node.type === "element" || node.type === "special" || node.type === "component") {
+		const element = node;
+		for (let attribute of element.attributes) {
+			if (slotRegex.test(attribute.name)) return true;
+			if (attribute.value && slotRegex.test(attribute.value)) return true;
+		}
+		if (element.type !== "component" && usesSlot(element.children)) return true;
+	}
+	return false;
+}
 //#endregion
 //#region src/compile/parse/slottifyChildNodes.ts
 /**
@@ -3069,65 +3882,33 @@ function parseText(status, element) {
 * <fill> node
 */
 function slottifyChildNodes(node) {
-	const nonFillNodes = node.children.filter((c) => !isFillNode(c));
+	let nonFillNodes = [];
+	for (let child of node.children) if (isFillNode(child)) if (nonFillNodes.find((n) => !isSpaceNode(n)) === void 0) nonFillNodes = [];
+	else break;
+	else nonFillNodes.push(child);
+	if (nonFillNodes.find((n) => !isSpaceNode(n)) === void 0) nonFillNodes = [];
 	if (nonFillNodes.length) {
 		let defaultFillNode = node.children.find((n) => isFillNode(n) && !n.attributes.find((a) => a.name === "name"));
 		if (!defaultFillNode) {
 			defaultFillNode = {
 				type: "special",
-				tagName: "fill",
+				tagName: "filldef",
 				attributes: [],
 				children: nonFillNodes,
 				span: {
 					start: 0,
 					end: 0
-				}
+				},
+				hasSlotProps: usesSlot(nonFillNodes)
 			};
 			node.children.unshift(defaultFillNode);
 		}
+		node.children = node.children.filter((c) => isFillNode(c) || !nonFillNodes.includes(c));
 	}
-	node.children = node.children.filter((c) => isFillNode(c));
 }
 function isFillNode(n) {
-	return isSpecialNode(n) && n.tagName === "fill";
-}
-
-//#endregion
-//#region src/compile/parse/utils/addError.ts
-/**
-* Adds an error to the parse status
-*
-* @param status The parse status
-* @param message The error message to add
-* @param start (Optional) The start position of the error (defaults to the
-* current parse position)
-*/
-function addError(status, message, start = status.i, end = status.i) {
-	let startLine = 0;
-	let lastLineStart = 0;
-	let i = 0;
-	for (; i < start; i++) if (status.source[i] === "\n") {
-		startLine += 1;
-		lastLineStart = i + 1;
-	}
-	let startChar = start - lastLineStart;
-	let endLine = startLine;
-	for (; i < end; i++) if (status.source[i] === "\n") {
-		endLine += 1;
-		lastLineStart = i + 1;
-	}
-	let endChar = end - lastLineStart;
-	status.errors.push({
-		message,
-		startIndex: start,
-		startLine,
-		startChar,
-		endIndex: end,
-		endLine,
-		endChar
-	});
+	return isSpecialNode(n) && (n.tagName === "fill" || n.tagName === "filldef");
 }
-
 //#endregion
 //#region src/compile/parse/parseElement.ts
 function parseElement(status) {
@@ -3139,16 +3920,40 @@ function parseElement(status) {
 		addError(status, `Non-matching close tag: ${element.tagName.substring(1)}`, start, start + element.tagName.length);
 		return element;
 	}
-	if (voidTags_default.includes(element.tagName)) checkVoidElement(status, element);
-	if (!element.selfClosed && !voidTags_default.includes(element.tagName)) {
+	if (voidTags.includes(element.tagName)) checkVoidElement(status, element);
+	if (!element.selfClosed && !voidTags.includes(element.tagName)) {
 		status.stack.push(element);
 		while (status.i < status.source.length) {
 			addSpaceElement(element, status);
 			if (accept("}", status, false)) break;
-			else if (accept("<!--", status)) status.i = status.source.indexOf("-->", status.i) + 3;
-			else if (accept("@//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
-			else if (accept("@/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
-			else if (accept("</", status, false)) {
+			else if (accept("<!--", status)) {
+				const start = status.i;
+				status.i = status.source.indexOf("-->", status.i) + 3;
+				const text = {
+					type: "comment",
+					commentType: "html",
+					content: status.source.substring(start, status.i - 3)
+				};
+				element.children.push(text);
+			} else if (accept("@//", status)) {
+				const start = status.i;
+				status.i = status.source.indexOf("\n", status.i) + 1;
+				const text = {
+					type: "comment",
+					commentType: "line",
+					content: status.source.substring(start, status.i - 1)
+				};
+				element.children.push(text);
+			} else if (accept("@/*", status)) {
+				const start = status.i;
+				status.i = status.source.indexOf("*/", status.i) + 2;
+				const text = {
+					type: "comment",
+					commentType: "block",
+					content: status.source.substring(start, status.i - 2)
+				};
+				element.children.push(text);
+			} else if (accept("</", status, false)) {
 				if (checkCloseTag(status, element)) break;
 			} else if (accept("<", status, false)) {
 				const child = parseElement(status);
@@ -3167,10 +3972,8 @@ function parseElement(status) {
 			slottifyChildNodes(element);
 			current.slotProps ??= [];
 			current.slotProps.push(element.attributes.find((a) => a.name === "name")?.name ?? "default");
-		} else if (element.tagName === "fill") {
-			const fillSource = status.source.substring(start, status.i);
-			element.hasSlotProps = /\$sprops\b/.test(fillSource);
-		} else if (element.tagName === "@component") {
+		} else if (element.tagName === "fill" || element.tagName === "filldef") element.hasSlotProps = usesSlot(element.children);
+		else if (element.tagName === "@component") {
 			const selfAttribute = element.attributes.find((a) => a.name === "self");
 			if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) {
 				element.type = "component";
@@ -3198,7 +4001,7 @@ function parseElement(status) {
 			} else addError(status, "@component element must have a self attribute", start, start + element.tagName.length + 1);
 		}
 	}
-	if (!element.closed && !voidTags_default.includes(element.tagName)) addError(status, `Unclosed non-void element: ${element.tagName}`, start, start + element.tagName.length + 1);
+	if (!element.closed && !voidTags.includes(element.tagName)) addError(status, `Unclosed non-void element: ${element.tagName}`, start, start + element.tagName.length + 1);
 	return element;
 }
 function checkVoidElement(status, element) {
@@ -3233,7 +4036,6 @@ function checkCloseTag(status, element) {
 	if (!found) addError(status, `Non-matching close tag: ${closingTagName} (expected ${element.tagName})`, start, start + element.tagName.length + 1);
 	return found;
 }
-
 //#endregion
 //#region src/compile/parse/parseControl.ts
 const controlOperations = [
@@ -3245,7 +4047,8 @@ const controlOperations = [
 	"@case",
 	"@default",
 	"@await",
-	"@then",
+	"@with",
+	"@try",
 	"@catch",
 	"@replace",
 	"@html",
@@ -3268,7 +4071,7 @@ function parseControl(status, parentNode) {
 	const node = parseControlOpen(status);
 	if (!node) return;
 	if (standaloneOperations.includes(node.operation)) {
-		wrangleControlNode(node, parentNode);
+		wrangleControlNode(node, parentNode, status);
 		return;
 	}
 	while (status.i < status.source.length) {
@@ -3287,7 +4090,7 @@ function parseControl(status, parentNode) {
 			break;
 		}
 	}
-	wrangleControlNode(node, parentNode);
+	wrangleControlNode(node, parentNode, status);
 	parseControlBranches(status, parentNode);
 }
 function parseControlOpen(status) {
@@ -3309,6 +4112,7 @@ function parseControlOpen(status) {
 			accept("}", status);
 		}
 		if (operation === "@replace" || operation === "@html") statement = trimMatched(statement.substring(statement.indexOf("(")).trim(), "(", ")");
+		if (operation === "@await" && /^await\s*\(/.test(statement)) addError(status, "old `@await (expr) { … } then (…) { … }` syntax is removed — use `@await { … } with { … }` with `$async` getters", start, status.i);
 	} else {
 		addError(status, `Unknown operation: ${operation}`, status.i, status.i + operation.length);
 		return null;
@@ -3326,25 +4130,27 @@ function parseControlOpen(status) {
 }
 function parseControlStatement(start, operation, status) {
 	let parenCount = 0;
-	while (status.i < status.source.length) if (accept("(", status)) parenCount += 1;
-	else if (accept(")", status)) parenCount -= 1;
-	else if (accept("{", status) || accept("\n", status) && standaloneOperations.includes(operation)) {
-		if (parenCount === 0) return trimStart(status.source.substring(start, status.i - 1).trim(), "@");
-	} else if (accept("//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
-	else if (accept("/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
-	else if (accept("\"", status) || accept("'", status)) {
-		let char = status.source[status.i - 1];
-		status.i = endOfString(char, status.source, status.i - 1) + 1;
-	} else if (accept("`", status)) status.i = endOfTemplateString(status.source, status.i - 1) + 1;
-	else status.i += 1;
+	while (status.i < status.source.length) {
+		const skipped = skipStringOrComment(status.source, status.i);
+		if (skipped !== -1) {
+			status.i = skipped;
+			continue;
+		}
+		if (accept("(", status)) parenCount += 1;
+		else if (accept(")", status)) parenCount -= 1;
+		else if (accept("{", status) || accept("\n", status) && standaloneOperations.includes(operation)) {
+			if (parenCount === 0) return trimStart(status.source.substring(start, status.i - 1).trim(), "@");
+		} else status.i += 1;
+	}
 	return "";
 }
 /**
 * Groups the control node into the correct parent e.g. if/else into an if group
 * @param node The control node
 * @param parentNode The parent node
+* @param status The parse status, for error reporting
 */
-function wrangleControlNode(node, parentNode) {
+function wrangleControlNode(node, parentNode, status) {
 	if (node.operation === "@if") {
 		const ifGroup = {
 			type: "control",
@@ -3393,14 +4199,41 @@ function wrangleControlNode(node, parentNode) {
 			}
 		};
 		parentNode.children.push(awaitGroup);
-	} else if (node.operation === "@then" || node.operation === "@catch") for (let i = parentNode.children.length - 1; i >= 0; i--) {
+	} else if (node.operation === "@with") for (let i = parentNode.children.length - 1; i >= 0; i--) {
 		const lastChild = parentNode.children[i];
 		if (isControlNode(lastChild) && lastChild.operation === "@await group") {
 			lastChild.children.push(node);
 			break;
 		}
 	}
-	else if (node.operation === "@replace") {
+	else if (node.operation === "@catch") {
+		let attached = false;
+		let duplicate = false;
+		for (let i = parentNode.children.length - 1; i >= 0; i--) {
+			const lastChild = parentNode.children[i];
+			if (isControlNode(lastChild) && lastChild.operation === "@try group") {
+				if (lastChild.children.some((child) => isControlNode(child) && child.operation === "@catch")) duplicate = true;
+				else {
+					lastChild.children.push(node);
+					attached = true;
+				}
+				break;
+			}
+		}
+		if (!attached) addError(status, duplicate ? "`@try` cannot have more than one `@catch` block" : "`@catch` must follow a `@try` block", node.span.start, node.span.end);
+	} else if (node.operation === "@try") {
+		const tryGroup = {
+			type: "control",
+			operation: "@try group",
+			statement: "",
+			children: [node],
+			span: {
+				start: 0,
+				end: 0
+			}
+		};
+		parentNode.children.push(tryGroup);
+	} else if (node.operation === "@replace") {
 		const replaceGroup = {
 			type: "control",
 			operation: "@replace group",
@@ -3437,61 +4270,93 @@ function parseControlBranches(status, parentNode) {
 		let start = status.i;
 		status.i += 1;
 		consumeSpace(status);
-		if (accept("else", status, false) || accept("case", status, false) || accept("default", status, false) || accept("then", status, false) || accept("catch", status, false)) parseControl(status, parentNode);
+		if (accept("else", status, false) || accept("case", status, false) || accept("default", status, false) || accept("catch", status, false) || accept("with", status, false)) parseControl(status, parentNode);
 		else {
 			gotAnotherBranch = false;
 			status.i = start;
 		}
 	}
 }
-
 //#endregion
 //#region src/compile/parse/parseMarkup.ts
 function parseMarkup(status, source) {
 	const current = status.components.at(-1);
 	if (!current) return;
+	parseMarkupInto(status, source, (root) => current.markup ??= root);
+}
+/**
+* Parses markup into a root node, letting callers choose where the resulting
+* RootNode is stored (e.g. a component's `markup` or its `error` block).
+*
+* @param status The parse status
+* @param source The full source code
+* @param setRoot Called with a fresh root node the first time content is
+*   parsed; subsequent content is appended to the same node.
+*/
+function parseMarkupInto(status, source, setRoot) {
+	let root = null;
+	const getRoot = () => root ??= {
+		type: "root",
+		children: []
+	};
 	while (status.i < source.length) if (accept("}", status, false)) return;
-	else if (accept("<!--", status)) status.i = status.source.indexOf("-->", status.i) + 3;
-	else if (accept("@//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
-	else if (accept("@/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
-	else if (isSpaceChar(status.source, status.i)) {
-		current.markup ??= {
-			type: "root",
-			children: []
+	else if (accept("<!--", status)) {
+		const start = status.i;
+		status.i = status.source.indexOf("-->", status.i) + 3;
+		const text = {
+			type: "comment",
+			commentType: "html",
+			content: status.source.substring(start, status.i - 3)
+		};
+		setRoot(getRoot());
+		getRoot().children.push(text);
+	} else if (accept("@//", status)) {
+		const start = status.i;
+		status.i = status.source.indexOf("\n", status.i) + 1;
+		const text = {
+			type: "comment",
+			commentType: "line",
+			content: status.source.substring(start, status.i - 1)
 		};
+		setRoot(getRoot());
+		getRoot().children.push(text);
+	} else if (accept("@/*", status)) {
+		const start = status.i;
+		status.i = status.source.indexOf("*/", status.i) + 2;
+		const text = {
+			type: "comment",
+			commentType: "block",
+			content: status.source.substring(start, status.i - 2)
+		};
+		setRoot(getRoot());
+		getRoot().children.push(text);
+	} else if (isSpaceChar(status.source, status.i)) {
+		setRoot(getRoot());
 		const text = {
 			type: "text",
 			content: consumeSpace(status),
 			spans: []
 		};
-		current.markup.children.push(text);
+		getRoot().children.push(text);
 	} else if (accept("<", status, false)) {
-		current.markup ??= {
-			type: "root",
-			children: []
-		};
+		setRoot(getRoot());
 		const element = parseElement(status);
-		current.markup.children.push(element);
+		getRoot().children.push(element);
 	} else if (accept("@", status, false)) {
-		current.markup ??= {
-			type: "root",
-			children: []
-		};
-		parseControl(status, current.markup);
+		setRoot(getRoot());
+		parseControl(status, getRoot());
 	} else status.i += 1;
 }
-
 //#endregion
 //#region src/compile/utils/hash.ts
 const returnRegex = /\r/g;
 function hash(input) {
 	input = input.replace(returnRegex, "");
-	let hash$1 = 5381;
+	let hash = 5381;
 	let i = input.length;
-	while (i--) hash$1 = (hash$1 << 5) - hash$1 ^ input.charCodeAt(i);
-	return (hash$1 >>> 0).toString(36);
+	while (i--) hash = (hash << 5) - hash ^ input.charCodeAt(i);
+	return (hash >>> 0).toString(36);
 }
-
 //#endregion
 //#region src/compile/parse/utils/expect.ts
 /**
@@ -3513,7 +4378,6 @@ function expect(value, status, advance = true) {
 	else addError(status, "Expected token");
 	return false;
 }
-
 //#endregion
 //#region src/compile/parse/parseStyles.ts
 function parseStyles(source, status) {
@@ -3521,7 +4385,7 @@ function parseStyles(source, status) {
 	if (!current) return;
 	current.style = {
 		global: false,
-		blocks: [],
+		children: [],
 		hash: hash(source)
 	};
 	const styleStatus = {
@@ -3529,6 +4393,7 @@ function parseStyles(source, status) {
 		i: 0,
 		marker: 0,
 		level: 0,
+		braces: [],
 		imports: [],
 		script: [],
 		components: [],
@@ -3537,69 +4402,86 @@ function parseStyles(source, status) {
 	};
 	while (styleStatus.i < styleStatus.source.length) if (isSpaceChar(styleStatus.source, styleStatus.i)) consumeSpace(styleStatus);
 	else {
-		const block = parseStyleBlock(styleStatus);
-		if (block) current.style.blocks.push(block);
+		const node = parseStyleNode(styleStatus);
+		if (node) current.style.children.push(node);
 		else break;
 	}
 	status.errors = status.errors.concat(styleStatus.errors);
 }
-function parseStyleBlock(status) {
+function parseStyleNode(status) {
+	const gapBefore = /\n\s*\n\s*$/.test(status.source.slice(0, status.i));
+	if (accept("//", status, false) || accept("/*", status, false)) return parseComment(status, gapBefore);
 	const selector = consumeUntil("{", status).trim();
 	if (expect("{", status)) {
 		const block = {
+			type: "block",
 			selector,
-			attributes: [],
-			children: []
+			children: [],
+			gapBefore
 		};
 		consumeSpace(status);
 		while (status.source[status.i] !== "}") {
-			let nextColon = status.source.indexOf(":", status.i);
-			if (nextColon === -1) nextColon = status.source.length;
-			let nextOpenBrace = status.source.indexOf("{", status.i);
-			if (nextOpenBrace === -1) nextOpenBrace = status.source.length;
-			if (nextColon < nextOpenBrace) {
-				const attribute = parseStyleAttribute(status);
-				block.attributes.push(attribute);
-			} else if (nextOpenBrace < nextColon) {
-				const child = parseStyleBlock(status);
-				if (child) block.children.push(child);
-				else break;
-			} else return block;
+			if (accept("//", status, false) || accept("/*", status, false)) block.children.push(parseComment(status, false));
+			else {
+				let nextColon = status.source.indexOf(":", status.i);
+				if (nextColon === -1) nextColon = status.source.length;
+				let nextOpenBrace = status.source.indexOf("{", status.i);
+				if (nextOpenBrace === -1) nextOpenBrace = status.source.length;
+				if (nextColon < nextOpenBrace) {
+					const attribute = parseStyleAttribute(status);
+					block.children.push(attribute);
+				} else if (nextOpenBrace < nextColon) {
+					const child = parseStyleNode(status);
+					if (child) block.children.push(child);
+					else break;
+				} else return block;
+			}
 			consumeSpace(status);
 		}
 		accept("}", status);
 		return block;
 	}
 }
+function parseComment(status, gapBefore) {
+	const start = status.i;
+	if (accept("//", status)) {
+		const end = status.source.indexOf("\n", status.i);
+		status.i = end === -1 ? status.source.length : end;
+	} else {
+		accept("/*", status);
+		const end = status.source.indexOf("*/", status.i);
+		status.i = end === -1 ? status.source.length : end + 2;
+	}
+	return {
+		type: "comment",
+		content: status.source.substring(start, status.i),
+		gapBefore
+	};
+}
 function parseStyleAttribute(status) {
+	const gapBefore = /\n\s*\n\s*$/.test(status.source.slice(0, status.i));
 	const name = consumeUntil(":", status).trim();
 	accept(":", status);
 	const value = consumeUntil(";", status).trim();
 	accept(";", status);
 	return {
+		type: "attribute",
 		name,
-		value
+		value,
+		gapBefore
 	};
 }
-
 //#endregion
 //#region src/compile/utils/isComponentNode.ts
 function isComponentNode(node) {
 	return node.type === "component";
 }
-
-//#endregion
-//#region src/compile/utils/isParentNode.ts
-function isParentNode(node) {
-	return "children" in node;
-}
-
 //#endregion
 //#region src/compile/parse/scopeStyles.ts
 function scopeStyles(status) {
 	let selectors = [];
 	for (let component of status.components) if (component.style && component.markup) {
-		for (let block of component.style.blocks) collectStyleSelectors(block, selectors);
+		for (let block of component.style.children) if (block.type === "block") collectStyleSelectors(block, selectors);
 		scopeStylesOnNode(component.markup, selectors);
 	}
 }
@@ -3617,7 +4499,6 @@ function scopeStylesOnNode(node, selectors) {
 function collectStyleSelectors(block, selectors) {
 	for (let s of block.selector.split(/[\s*,>+~[\]]/)) selectors.push(s);
 }
-
 //#endregion
 //#region src/compile/parse/parseCode.ts
 function parseCode(source) {
@@ -3626,16 +4507,24 @@ function parseCode(source) {
 		i: 0,
 		marker: 0,
 		level: 0,
+		braces: [],
 		imports: [],
 		script: [],
 		components: [],
 		stack: [],
 		errors: []
 	};
-	for (status.i; status.i < source.length; status.i++) if (consumeScriptComments(status)) {} else if (status.source[status.i] === "{") status.level += 1;
-	else if (status.source[status.i] === "}") {
+	for (status.i; status.i < source.length; status.i++) if (consumeScriptComments(status)) {} else if (status.source[status.i] === "{") {
+		status.level += 1;
+		status.braces.push(false);
+	} else if (status.source[status.i] === "}") {
 		status.level -= 1;
-		if (status.level === 0) parseComponentEnd(status);
+		const fromComponent = status.braces.pop();
+		if (status.level === 0 && fromComponent) parseComponentEnd(status);
+		else if (status.level < 0) {
+			addError(status, `Unexpected closing brace`, status.i, status.i + 1);
+			status.level = 0;
+		}
 	} else if (accept("function", status)) {
 		if (consumeSpace(status)) if (/[A-Z]/.test(source[status.i])) parseComponentStart(status);
 		else status.i--;
@@ -3657,8 +4546,13 @@ function parseCode(source) {
 		if (consumeSpace(status) && accept("default", status) && consumeSpace(status) && accept("(", status, false)) parseComponentStart(status);
 		else status.i = start;
 	} else if (accept("@render", status, false)) parseComponentRender(status);
+	else if (accept("@error", status, false)) parseComponentError(status);
 	else if (accept("@head", status, false)) parseComponentHead(status);
 	else if (accept("@style", status, false)) parseComponentStyle(status);
+	if (status.level > 0) {
+		const count = status.level;
+		addError(status, `Unbalanced braces: missing ${count} closing brace${count === 1 ? "" : "s"}`, source.length, source.length);
+	}
 	status.script.push({
 		script: source.substring(status.marker, source.length),
 		span: {
@@ -3685,13 +4579,33 @@ function parseComponentStart(status) {
 	let def = /export\s+default\s+(function\s+|const\s+)*$/.test(source);
 	let isConst = /const\s+$/.test(source);
 	let isAnon = /export default\s+$/.test(source);
+	let componentStart = status.i;
+	let name = consumeAlphaNumeric(status);
+	if (def && status.components.some((c) => c.default)) addError(status, `Multiple default exports`, componentStart, componentStart + name.length);
 	const current = {
-		start: status.i,
-		name: consumeAlphaNumeric(status),
+		start: componentStart,
+		name,
 		exported,
-		default: def
+		default: def,
+		scriptStart: status.script.length
 	};
 	status.components.push(current);
+	if (status.source[status.i] === "<") {
+		const typeParamsStart = status.i;
+		let level = 0;
+		for (status.i; status.i < status.source.length; status.i++) {
+			const char = status.source[status.i];
+			if (char === "<") level += 1;
+			else if (char === ">") {
+				level -= 1;
+				if (level === 0) {
+					current.typeParams = status.source.substring(typeParamsStart, status.i + 1);
+					status.i += 1;
+					break;
+				}
+			}
+		}
+	}
 	let presource = source.substring(0, status.i).trimEnd();
 	let lastNewline = presource.lastIndexOf("\n");
 	if (lastNewline !== -1) {
@@ -3738,8 +4652,8 @@ function parseComponentStart(status) {
 	const paramsMatch = current.params?.match(/\$props:\s*([$A-Za-z0-9]+)/);
 	if (paramsMatch) {
 		let propsTypeName = paramsMatch[1];
-		let propsTypeStart = status.source.search(/* @__PURE__ */ new RegExp(`interface\\s+${propsTypeName}`));
-		if (propsTypeStart === -1) propsTypeStart = status.source.search(/* @__PURE__ */ new RegExp(`type\\s+${propsTypeName}`));
+		let propsTypeStart = status.source.search(new RegExp(`interface\\s+${propsTypeName}`));
+		if (propsTypeStart === -1) propsTypeStart = status.source.search(new RegExp(`type\\s+${propsTypeName}`));
 		if (propsTypeStart !== -1) {
 			let bracesStart = status.source.indexOf("{", propsTypeStart);
 			if (bracesStart !== -1) {
@@ -3748,6 +4662,7 @@ function parseComponentStart(status) {
 					i: bracesStart + 1,
 					marker: 0,
 					level: 0,
+					braces: [],
 					imports: [],
 					script: [],
 					components: [],
@@ -3768,6 +4683,7 @@ function parseComponentStart(status) {
 	}
 	accept("{", status);
 	status.level += 1;
+	status.braces.push(true);
 	const postFunctionChunk = {
 		script: status.source.substring(status.marker, status.i),
 		span: {
@@ -3822,6 +4738,42 @@ function parseComponentRender(status) {
 	}
 	status.marker = status.i;
 }
+function parseComponentError(status) {
+	const current = status.components.at(-1);
+	if (!current) return;
+	if (current.error) addError(status, `Multiple @error sections`, status.i, status.i + 6);
+	if (!current.markup) addError(status, `@error must come after @render`, status.i, status.i + 6);
+	status.script.push({
+		script: status.source.substring(status.marker, status.i),
+		span: {
+			start: status.marker,
+			end: status.i
+		}
+	});
+	status.script.push({
+		script: "/* @error */",
+		span: {
+			start: 0,
+			end: 0
+		}
+	});
+	accept("@error", status);
+	consumeSpace(status);
+	let errorVar = "";
+	if (accept("(", status)) {
+		let start = status.i;
+		while (status.i < status.source.length && status.source[status.i] !== ")") status.i += 1;
+		errorVar = status.source.substring(start, status.i).trim();
+		accept(")", status);
+		consumeSpace(status);
+	}
+	current.errorVar = errorVar || "err";
+	if (accept("{", status)) {
+		parseMarkupInto(status, status.source, (root) => current.error ??= root);
+		accept("}", status);
+	}
+	status.marker = status.i;
+}
 function parseComponentHead(status) {
 	const current = status.components.at(-1);
 	if (!current) return;
@@ -3875,16 +4827,22 @@ function parseComponentStyle(status) {
 	for (; status.i < status.source.length; status.i++) {
 		const char = status.source[status.i];
 		const nextChar = status.source[status.i + 1];
-		if (char === "/" && nextChar === "/") status.i = status.source.indexOf("\n", status.i);
-		else if (char === "/" && nextChar === "*") status.i = status.source.indexOf("*/", status.i) + 1;
-		else if (char === "\"" || char === "'") {
-			let start$1 = status.i;
-			status.i = endOfString(char, status.source, start$1);
-			styleSource += status.source.substring(start$1, status.i + 1);
+		if (char === "/" && nextChar === "/") {
+			let start = status.i;
+			status.i = status.source.indexOf("\n", status.i);
+			styleSource += status.source.substring(start, status.i + 1);
+		} else if (char === "/" && nextChar === "*") {
+			let start = status.i;
+			status.i = status.source.indexOf("*/", status.i) + 1;
+			styleSource += status.source.substring(start, status.i + 1);
+		} else if (char === "\"" || char === "'") {
+			let start = status.i;
+			status.i = endOfString(char, status.source, start);
+			styleSource += status.source.substring(start, status.i + 1);
 		} else if (char === "`") {
-			let start$1 = status.i;
-			status.i = endOfTemplateString(status.source, start$1);
-			styleSource += status.source.substring(start$1, status.i + 1);
+			let start = status.i;
+			status.i = endOfTemplateString(status.source, start);
+			styleSource += status.source.substring(start, status.i + 1);
 		} else if (char === "{") {
 			level += 1;
 			if (start === -1) start = status.i + 1;
@@ -3919,49 +4877,80 @@ function parseComponentEnd(status) {
 			end: 0
 		}
 	});
-	const componentSource = status.source.substring(current.start || 0, status.i);
-	current.props = getPropsUsage(componentSource);
-	current.contextProps = getContextUsage(componentSource);
+	const scriptText = status.script.slice(current.scriptStart ?? status.script.length).map((chunk) => chunk.script).join("\n");
+	const markupParts = [];
+	if (current.markup) markupParts.push(collectMarkupExpressions(current.markup));
+	if (current.error) markupParts.push(collectMarkupExpressions(current.error));
+	if (current.head) markupParts.push(collectMarkupExpressions(current.head));
+	const usageSource = scriptText + "\n" + markupParts.join("\n");
+	const usageRanges = codeRanges(usageSource);
+	current.props = getPropsUsage(usageSource, usageRanges);
+	current.contextProps = getContextUsage(usageSource, usageRanges);
 	if (current.markup && isElementNode(current.markup.children[0]) && current.markup.children[0].tagName === "html" && isSpaceNode(current.markup.children[0].children[0])) current.markup.children.splice(1, 1);
 	status.marker = status.i;
 }
-function getPropsUsage(source) {
-	const propsMatches = source.matchAll(/\$props\s*(?:\.([\d\w]+)|\[([^\]]+)\])/g);
+/**
+* Gets the `$props` names that the compiled output references. The input is
+* the component's code-only text (script plus markup expressions), with
+* `ranges` marking the positions that are code — matches that start inside a
+* string, comment or regex literal are ignored, so mentions inside
+* sample-code strings or prose don't count.
+*/
+function getPropsUsage(source, ranges) {
 	const props = [];
-	for (let match of propsMatches) {
+	for (let match of source.matchAll(/\$props\??\s*(?:\.([\d\w]+)|\[([^\]]+)\])/g)) {
+		if (!isInCode(ranges, match.index)) continue;
 		const name = trimQuotes(match[1] || match[2]);
 		if (!props.includes(name)) props.push(name);
 	}
+	if (!props.length) for (let match of source.matchAll(/(?<![\w$])\$props(?![\w])(?!\s*:)(?!<)/g)) {
+		if (!isInCode(ranges, match.index)) continue;
+		props.push("$props");
+		break;
+	}
 	return props.length ? props : void 0;
 }
-function getContextUsage(source) {
-	const contextsMatches = source.matchAll(/\$context\s*(?:\.([\d\w]+)|\[([^\]]+)\])/g);
+/**
+* Gets the `$context` names that the compiled output references. The input is
+* the component's code-only text (script plus markup expressions), with
+* `ranges` marking the positions that are code — matches that start inside a
+* string, comment or regex literal are ignored, so mentions inside
+* sample-code strings or prose don't count.
+*/
+function getContextUsage(source, ranges) {
+	const contextsMatches = source.matchAll(/\$context\??\s*(?:\.([\d\w]+)|\[([^\]]+)\])/g);
 	const contexts = [];
 	for (let match of contextsMatches) {
+		if (!isInCode(ranges, match.index)) continue;
 		const name = trimQuotes(match[1] || match[2]);
 		if (!contexts.includes(name)) contexts.push(name);
 	}
+	if (!contexts.length) for (let match of source.matchAll(/(?<![\w$])\$context(?![\w])(?!\s*:)(?!<)/g)) {
+		if (!isInCode(ranges, match.index)) continue;
+		contexts.push("$context");
+		break;
+	}
 	return contexts.length ? contexts : void 0;
 }
+/**
+* Returns true if `index` falls inside one of the (sorted, non-overlapping)
+* code ranges — i.e. not inside a string, comment or regex literal.
+*/
+function isInCode(ranges, index) {
+	for (const [start, end] of ranges) {
+		if (index >= start && index < end) return true;
+		if (index < start) return false;
+	}
+	return false;
+}
 function consumeScriptComments(status) {
-	const char = status.source[status.i];
-	const nextChar = status.source[status.i + 1];
-	if (char === "/" && nextChar === "/") {
-		status.i = status.source.indexOf("\n", status.i);
-		return true;
-	} else if (char === "/" && nextChar === "*") {
-		status.i = status.source.indexOf("*/", status.i) + 1;
-		return true;
-	} else if (char === "\"" || char === "'") {
-		status.i = endOfString(char, status.source, status.i);
-		return true;
-	} else if (char === "`") {
-		status.i = endOfTemplateString(status.source, status.i);
+	const skipped = skipStringOrComment(status.source, status.i);
+	if (skipped !== -1) {
+		status.i = skipped;
 		return true;
 	}
 	return false;
 }
-
 //#endregion
 //#region src/compile/parse.ts
 /**
@@ -3975,8 +4964,7 @@ function consumeScriptComments(status) {
 function parse(source) {
 	return parseCode(source);
 }
-
 //#endregion
 exports.build = build;
 exports.buildType = buildType;
-exports.parse = parse;
+exports.parse = parse;