@tsrx/core 0.1.20 → 0.1.24

package/src/transform/jsx/index.js

@@ -7,6 +7,7 @@ import { print } from 'esrap';
 import { error } from '../../errors.js';
 import { analyze_css } from '../../analyze/css-analyze.js';
 import { prune_css } from '../../analyze/prune.js';
+import { create_scopes, ScopeRoot } from '../../scope.js';
 import {
 	in_jsx_child_context,
 	set_node_path_metadata,
@@ -24,7 +25,6 @@ import {
 	identifier_to_jsx_name,
 	is_bare_render_expression,
 	is_component_jsx_name,
-	is_dynamic_element_id,
 	is_jsx_child,
 	set_loc,
 	to_text_expression,
@@ -63,6 +63,17 @@ const HOOK_CALLBACK_OUTER_MUTATION_ERROR =
 	'Hook callbacks inside conditional or repeated TSRX scopes must not mutate bindings declared outside the generated hook component.';
 const TEMPLATE_FRAGMENT_ERROR =
 	'JSX fragment syntax is not needed in TSRX templates. TSRX renders in immediate mode, so everything is already a fragment. Use `<>...</>` only in expression position.';
+const TSRX_FOR_RETURN_ERROR =
+	'Return statements are not allowed inside TSRX template for...of loops. Filter the iterable before rendering or use an @empty fallback for empty lists.';
+const TSRX_FOR_BREAK_ERROR =
+	'Break statements are not allowed inside TSRX template for...of loops.';
+const TSRX_FOR_CONTINUE_ERROR =
+	'Continue statements are not allowed inside TSRX template for...of loops. Filter the iterable before rendering.';
+const TSRX_IF_RETURN_ERROR =
+	'Return statements are not allowed inside TSRX template @if blocks. Move the return before the template output or render conditionally instead.';
+const TSRX_IF_BREAK_ERROR = 'Break statements are not allowed inside TSRX template @if blocks.';
+const TSRX_IF_CONTINUE_ERROR =
+	'Continue statements are not allowed inside TSRX template @if blocks. Filter before rendering or use conditional output instead.';
 
 /**
  * @param {AST.Node} node
@@ -142,6 +153,156 @@ function is_function_or_class_boundary(node) {
 	);
 }
 
+/**
+ * @param {any} node
+ * @param {boolean} [inside_function]
+ * @param {Set<any>} [seen]
+ * @returns {void}
+ */
+function mark_nested_function_return_jsx(node, inside_function = false, seen = new Set()) {
+	if (!node || typeof node !== 'object' || seen.has(node)) return;
+	seen.add(node);
+
+	if (Array.isArray(node)) {
+		for (const item of node) mark_nested_function_return_jsx(item, inside_function, seen);
+		return;
+	}
+
+	const now_inside = inside_function || is_function_or_class_boundary(node);
+
+	if (
+		now_inside &&
+		node.type === 'ReturnStatement' &&
+		(node.argument?.type === 'JSXFragment' ||
+			node.argument?.type === 'JSXElement' ||
+			node.argument?.type === 'JSXStyleElement')
+	) {
+		node.argument.metadata = { ...(node.argument.metadata || {}), native_tsrx: true };
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+		mark_nested_function_return_jsx(node[key], now_inside, seen);
+	}
+}
+
+/**
+ * Flatten a `@{ … }` code block that appears as an element/fragment child into
+ * the element's children list: its setup statements followed by its single
+ * render output. The render pipeline already handles interleaved setup
+ * statements and JSX children. This is the element-scoped equivalent of
+ * `transform_function`'s body lowering — function and arrow bodies are never
+ * element children, so they are untouched here.
+ * @param {any} node
+ * @param {Set<any>} [seen]
+ * @returns {void}
+ */
+function expand_child_code_blocks(node, seen = new Set()) {
+	if (!node || typeof node !== 'object' || seen.has(node)) return;
+	seen.add(node);
+
+	if (Array.isArray(node)) {
+		for (const item of node) expand_child_code_blocks(item, seen);
+		return;
+	}
+
+	if (
+		Array.isArray(node.children) &&
+		node.children.some((/** @type {any} */ c) => c?.type === 'JSXCodeBlock')
+	) {
+		node.children = node.children.flatMap((/** @type {any} */ child) =>
+			child?.type === 'JSXCodeBlock'
+				? [...child.body, ...(child.render != null ? [child.render] : [])]
+				: [child],
+		);
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+		expand_child_code_blocks(node[key], seen);
+	}
+}
+
+/**
+ * A `@`-prefixed JSX control-flow expression (`@if`/`@for`/`@switch`/`@try`).
+ * These are the only control-flow nodes that can appear in expression position;
+ * the plain statement forms (`IfStatement`, `SwitchStatement`, …) never do.
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_jsx_control_flow_expression(node) {
+	return (
+		node?.type === 'JSXIfExpression' ||
+		node?.type === 'JSXForExpression' ||
+		node?.type === 'JSXSwitchExpression' ||
+		node?.type === 'JSXTryExpression'
+	);
+}
+
+/**
+ * Wrap a render-output node in a native TSRX fragment so it flows through the
+ * same single-child render path as a `<> … </>` output.
+ * @param {any} node
+ * @returns {any}
+ */
+function wrap_in_native_tsrx_fragment(node) {
+	const fragment = b.jsx_fragment([node]);
+	fragment.metadata = { ...(fragment.metadata || {}), native_tsrx: true };
+	return fragment;
+}
+
+/**
+ * Wrap a bare JSX control-flow directive that sits directly in an expression
+ * position — an expression-bodied arrow (`() => @switch (…) { … }`), a
+ * `return @switch (…) { … }`, an unused expression statement,
+ * assignment to a variable
+ * (`const x = @switch (…) { … }`, `x = @switch (…) { … }`), or a call/`new`
+ * argument (`render(@if (…) { … })`) — in a native TSRX fragment.
+ * @param {any} node
+ * @param {Set<any>} [seen]
+ * @returns {void}
+ */
+function wrap_control_flow_expression_values(node, seen = new Set()) {
+	if (!node || typeof node !== 'object' || seen.has(node)) return;
+	seen.add(node);
+
+	if (Array.isArray(node)) {
+		for (const item of node) wrap_control_flow_expression_values(item, seen);
+		return;
+	}
+
+	if (
+		node.type === 'ArrowFunctionExpression' &&
+		node.body?.type !== 'BlockStatement' &&
+		is_jsx_control_flow_expression(node.body)
+	) {
+		node.body = wrap_in_native_tsrx_fragment(node.body);
+	} else if (node.type === 'ReturnStatement' && is_jsx_control_flow_expression(node.argument)) {
+		node.argument = wrap_in_native_tsrx_fragment(node.argument);
+	} else if (
+		node.type === 'ExpressionStatement' &&
+		is_jsx_control_flow_expression(node.expression)
+	) {
+		node.expression = wrap_in_native_tsrx_fragment(node.expression);
+	} else if (node.type === 'VariableDeclarator' && is_jsx_control_flow_expression(node.init)) {
+		node.init = wrap_in_native_tsrx_fragment(node.init);
+	} else if (node.type === 'AssignmentExpression' && is_jsx_control_flow_expression(node.right)) {
+		node.right = wrap_in_native_tsrx_fragment(node.right);
+	} else if (
+		(node.type === 'CallExpression' || node.type === 'NewExpression') &&
+		Array.isArray(node.arguments)
+	) {
+		node.arguments = node.arguments.map((/** @type {any} */ arg) =>
+			is_jsx_control_flow_expression(arg) ? wrap_in_native_tsrx_fragment(arg) : arg,
+		);
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+		wrap_control_flow_expression_values(node[key], seen);
+	}
+}
+
 /**
  * Build a `transform()` function for a specific JSX platform (React, Preact,
  * Solid). Given a `JsxPlatform` descriptor, returns a transform that lowers
@@ -150,7 +311,7 @@ function is_function_or_class_boundary(node) {
  * Any `<style>` element declared inside a TSRX fragment is collected, rendered
  * via `@tsrx/core`'s stylesheet renderer, and returned alongside the JS output
  * so a downstream plugin can inject it. The compiler also augments every
- * non-style Element in that fragment with the stylesheet's hash class so scoped
+ * non-style JSX element in that fragment with the stylesheet's hash class so scoped
  * selectors match correctly.
  *
  * @param {JsxPlatform} platform
@@ -192,6 +353,7 @@ export function createJsxTransform(platform) {
 			hook_helpers_enabled: false,
 			available_bindings: new Map(),
 			lazy_next_id: 0,
+			runtime_dynamic_scopes: null,
 			filename: filename ?? null,
 			source,
 			collect,
@@ -203,6 +365,13 @@ export function createJsxTransform(platform) {
 			...(platform.hooks?.initialState?.() ?? {}),
 		};
 
+		expand_child_code_blocks(/** @type {any} */ (ast));
+		wrap_control_flow_expression_values(/** @type {any} */ (ast));
+		transform_context.runtime_dynamic_scopes = create_runtime_dynamic_scopes(
+			/** @type {any} */ (ast),
+			transform_context,
+		);
+
 		if (!transform_context.typeOnly) {
 			preallocate_lazy_ids(/** @type {any} */ (ast), transform_context);
 		}
@@ -213,7 +382,11 @@ export function createJsxTransform(platform) {
 				return next();
 			},
 
-			TsrxFragment(node, { next, path, state, visit }) {
+			JSXFragment(node, { next, path, state, visit }) {
+				if (!node.metadata?.native_tsrx) {
+					return next() ?? node;
+				}
+
 				const parent = /** @type {AST.ArrowFunctionExpression} */ (path.at(-1));
 				if (parent?.metadata?.native_tsrx && parent.body === node) {
 					return /** @type {any} */ (visit(create_native_tsrx_render_block(node, state), state));
@@ -233,18 +406,11 @@ export function createJsxTransform(platform) {
 				return /** @type {any} */ (wrap_jsx_setup_declarations(expression, in_jsx_child));
 			},
 
-			TsxCompat(node, { next, path, state }) {
-				const inner = /** @type {any} */ (next() ?? node);
-				const in_jsx_child = in_jsx_child_context(path);
-				return /** @type {any} */ (
-					wrap_jsx_setup_declarations(
-						tsx_compat_node_to_jsx_expression(inner, state, in_jsx_child),
-						in_jsx_child,
-					)
-				);
-			},
+			JSXElement(node, { next, path, state }) {
+				if (!node.metadata?.native_tsrx) {
+					return next() ?? node;
+				}
 
-			Element(node, { next, path, state }) {
 				if (is_style_element(node) && is_style_expression_position(path)) {
 					const stylesheet = get_style_element_stylesheet(node);
 					if (stylesheet) {
@@ -254,30 +420,57 @@ export function createJsxTransform(platform) {
 					}
 				}
 
-				// Capture raw children BEFORE the walker transforms them so a
-				// platform hook (e.g. Solid's textContent optimization) can
-				// inspect the original Text / TSRXExpression nodes rather than
-				// their walker-lowered JSXExpressionContainer equivalents.
+				// Capture raw children BEFORE the walker transforms them so platform
+				// hooks can inspect the original JSX child shape.
 				const raw_children = /** @type {any} */ (node.children || []).map(
 					(/** @type {any} */ child) => (child && typeof child === 'object' ? { ...child } : child),
 				);
 				const inner = /** @type {any} */ (next() ?? node);
 				const hook = platform.hooks?.transformElement;
 				if (hook) return /** @type {any} */ (hook(inner, state, raw_children));
-				return /** @type {any} */ (to_jsx_element(inner, state, raw_children));
+				return /** @type {any} */ (
+					to_jsx_element(inner, state, raw_children, in_jsx_child_context(path))
+				);
 			},
 
-			Text(node, { next }) {
-				const inner = /** @type {any} */ (next() ?? node);
+			JSXExpressionContainer(node, { next, state }) {
+				const result = /** @type {any} */ (next() ?? node);
+				const expression = result.expression;
+				// `@if`/`@for`/`@switch`/`@try` used as an expression value (e.g. an
+				// attribute value `content={@if (…) { … }}` or a `{ … }` child) leaks a
+				// JSX*Expression node straight to the printer. Lower it with the same
+				// control-flow machinery used for render children and unwrap the value.
+				if (
+					is_if_control_node(expression) ||
+					is_switch_control_node(expression) ||
+					is_try_control_node(expression) ||
+					expression?.type === 'JSXForExpression'
+				) {
+					const lowered = /** @type {any} */ (to_jsx_child(expression, state));
+					return { ...result, expression: lowered?.expression ?? lowered };
+				}
+				return result;
+			},
+
+			JSXStyleElement(node, { path, state }) {
+				if (is_style_expression_position(path)) {
+					const stylesheet = get_style_element_stylesheet(node);
+					if (stylesheet) {
+						analyze_css(stylesheet);
+						state.stylesheets.push(stylesheet);
+						return /** @type {any} */ (create_style_expression_value(node, stylesheet, state));
+					}
+				}
 				return /** @type {any} */ (
-					to_jsx_expression_container(to_text_expression(inner.expression, inner), inner)
+					b.jsx_element(
+						/** @type {ESTreeJSX.JSXElement} */ ({ ...node, type: 'JSXElement', children: [] }),
+						node.openingElement?.attributes ?? [],
+						[],
+					)
 				);
 			},
 
-			TSRXExpression(node, { next }) {
-				const inner = /** @type {any} */ (next() ?? node);
-				return /** @type {any} */ (to_jsx_expression_container(inner.expression, inner));
-			},
+			JSXCodeBlock: transform_jsx_code_block,
 
 			BlockStatement: transform_block_statement,
 			ReturnStatement: transform_return_statement,
@@ -330,6 +523,7 @@ export function createJsxTransform(platform) {
 				? expanded
 				: apply_lazy_transforms(/** @type {any} */ (expanded), new Map())
 		);
+		lower_remaining_jsx_code_blocks(final_program, transform_context);
 
 		const result = print(/** @type {any} */ (final_program), tsx_with_ts_locations(), {
 			sourceMapSource: filename,
@@ -352,16 +546,26 @@ export function createJsxTransform(platform) {
  *
  * @param {any} component
  * @param {any} css
+ * @param {TransformContext} transform_context
  * @param {boolean} [export_top_scoped_classes]
  * @returns {void}
  */
-function apply_css_definition_metadata(component, css, export_top_scoped_classes = false) {
+function apply_css_definition_metadata(
+	component,
+	css,
+	transform_context,
+	export_top_scoped_classes = false,
+) {
 	analyze_css(css);
 
 	const metadata = component.metadata || (component.metadata = { path: [] });
 	const style_classes = metadata.styleClasses || (metadata.styleClasses = new Map());
 	const top_scoped_classes = metadata.topScopedClasses || new Map();
-	const elements = collect_css_prunable_elements(component.body || component.children || []);
+	const elements = collect_css_prunable_elements(
+		component.body || component.children || [],
+		[],
+		transform_context,
+	);
 
 	const prune = () => {
 		for (const element of elements) {
@@ -386,16 +590,17 @@ function apply_css_definition_metadata(component, css, export_top_scoped_classes
 /**
  * @param {any} value
  * @param {any[]} [elements]
+ * @param {TransformContext | null} [transform_context]
  * @returns {any[]}
  */
-function collect_css_prunable_elements(value, elements = []) {
+function collect_css_prunable_elements(value, elements = [], transform_context = null) {
 	if (!value || typeof value !== 'object') {
 		return elements;
 	}
 
 	if (Array.isArray(value)) {
 		for (const child of value) {
-			collect_css_prunable_elements(child, elements);
+			collect_css_prunable_elements(child, elements, transform_context);
 		}
 		return elements;
 	}
@@ -408,7 +613,8 @@ function collect_css_prunable_elements(value, elements = []) {
 		return elements;
 	}
 
-	if (value.type === 'Element') {
+	if (value.type === 'JSXElement' && value.metadata?.native_tsrx) {
+		mark_runtime_dynamic_element(value, transform_context);
 		if (!is_style_element(value)) {
 			elements.push(value);
 		}
@@ -418,12 +624,247 @@ function collect_css_prunable_elements(value, elements = []) {
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
 			continue;
 		}
-		collect_css_prunable_elements(value[key], elements);
+		collect_css_prunable_elements(value[key], elements, transform_context);
 	}
 
 	return elements;
 }
 
+/**
+ * @param {AST.Program} ast
+ * @param {TransformContext} transform_context
+ * @returns {Map<any, any> | null}
+ */
+function create_runtime_dynamic_scopes(ast, transform_context) {
+	const dynamic_source = transform_context.platform.imports.dynamic;
+	if (!dynamic_source) {
+		return null;
+	}
+	if (!has_runtime_dynamic_import(ast, dynamic_source)) {
+		return null;
+	}
+
+	const { scopes } = create_scopes(ast, new ScopeRoot(), null, {
+		collect: true,
+		errors: [],
+		filename: transform_context.filename ?? '',
+		comments: transform_context.comments,
+	});
+
+	return scopes;
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext | null} transform_context
+ * @returns {void}
+ */
+function mark_runtime_dynamic_element(node, transform_context) {
+	const dynamic_source = transform_context?.platform.imports.dynamic;
+	const scopes = transform_context?.runtime_dynamic_scopes;
+	if (
+		!dynamic_source ||
+		!scopes ||
+		node.metadata?.runtime_dynamic_element === true ||
+		!has_jsx_attribute(node, 'is') ||
+		!is_runtime_dynamic_jsx_name(node.openingElement?.name, scopes.get(node), dynamic_source)
+	) {
+		return;
+	}
+
+	node.metadata.runtime_dynamic_element = true;
+}
+
+/**
+ * @param {AST.Program} ast
+ * @param {string} dynamic_source
+ * @returns {boolean}
+ */
+function has_runtime_dynamic_import(ast, dynamic_source) {
+	return ast.body.some(
+		(/** @type {any} */ node) =>
+			node.type === 'ImportDeclaration' &&
+			node.importKind !== 'type' &&
+			node.source?.type === 'Literal' &&
+			node.source.value === dynamic_source &&
+			node.specifiers.some(
+				(/** @type {any} */ specifier) =>
+					is_runtime_dynamic_import_specifier(specifier, 'component') ||
+					is_runtime_dynamic_import_specifier(specifier, 'namespace'),
+			),
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {string} name
+ * @returns {boolean}
+ */
+function has_jsx_attribute(node, name) {
+	return (node.openingElement?.attributes ?? []).some(
+		(/** @type {any} */ attr) =>
+			attr.type === 'JSXAttribute' &&
+			attr.name?.type === 'JSXIdentifier' &&
+			attr.name.name === name,
+	);
+}
+
+/**
+ * @param {any} name
+ * @param {any} scope
+ * @param {string} dynamic_source
+ * @returns {boolean}
+ */
+function is_runtime_dynamic_jsx_name(name, scope, dynamic_source) {
+	if (!scope || !name) {
+		return false;
+	}
+
+	if (name.type === 'JSXIdentifier') {
+		return is_runtime_dynamic_binding(scope.get(name.name), dynamic_source, 'component', new Set());
+	}
+
+	if (
+		name.type === 'JSXMemberExpression' &&
+		name.object?.type === 'JSXIdentifier' &&
+		name.property?.type === 'JSXIdentifier' &&
+		name.property.name === 'Dynamic'
+	) {
+		return is_runtime_dynamic_binding(
+			scope.get(name.object.name),
+			dynamic_source,
+			'namespace',
+			new Set(),
+		);
+	}
+
+	return false;
+}
+
+/**
+ * @param {any} binding
+ * @param {string} dynamic_source
+ * @param {'component' | 'namespace'} kind
+ * @param {Set<any>} seen
+ * @returns {boolean}
+ */
+function is_runtime_dynamic_binding(binding, dynamic_source, kind, seen) {
+	if (!binding || seen.has(binding)) {
+		return false;
+	}
+	seen.add(binding);
+
+	if (is_runtime_dynamic_import_binding(binding, dynamic_source, kind)) {
+		return true;
+	}
+
+	if (binding.reassigned) {
+		return false;
+	}
+
+	const initial = unwrap_reference_expression(binding.initial);
+	if (!initial) {
+		return false;
+	}
+
+	if (initial.type === 'Identifier') {
+		return is_runtime_dynamic_binding(binding.scope.get(initial.name), dynamic_source, kind, seen);
+	}
+
+	if (
+		kind === 'component' &&
+		initial.type === 'MemberExpression' &&
+		!initial.computed &&
+		initial.object?.type === 'Identifier' &&
+		initial.property?.type === 'Identifier' &&
+		initial.property.name === 'Dynamic'
+	) {
+		return is_runtime_dynamic_binding(
+			binding.scope.get(initial.object.name),
+			dynamic_source,
+			'namespace',
+			new Set(),
+		);
+	}
+
+	return false;
+}
+
+/**
+ * @param {any} binding
+ * @param {string} dynamic_source
+ * @param {'component' | 'namespace'} kind
+ * @returns {boolean}
+ */
+function is_runtime_dynamic_import_binding(binding, dynamic_source, kind) {
+	const declaration = binding?.initial;
+	if (
+		binding?.declaration_kind !== 'import' ||
+		declaration?.type !== 'ImportDeclaration' ||
+		declaration.importKind === 'type' ||
+		declaration.source?.type !== 'Literal' ||
+		declaration.source.value !== dynamic_source
+	) {
+		return false;
+	}
+
+	return declaration.specifiers.some(
+		(/** @type {any} */ specifier) =>
+			specifier.local?.name === binding.node?.name &&
+			is_runtime_dynamic_import_specifier(specifier, kind),
+	);
+}
+
+/**
+ * @param {any} specifier
+ * @param {'component' | 'namespace'} kind
+ * @returns {boolean}
+ */
+function is_runtime_dynamic_import_specifier(specifier, kind) {
+	if (kind === 'namespace') {
+		return specifier.type === 'ImportNamespaceSpecifier';
+	}
+	return (
+		specifier.type === 'ImportSpecifier' &&
+		specifier.importKind !== 'type' &&
+		get_imported_name(specifier) === 'Dynamic'
+	);
+}
+
+/**
+ * @param {any} specifier
+ * @returns {string | null}
+ */
+function get_imported_name(specifier) {
+	const imported = specifier.imported;
+	if (imported?.type === 'Identifier') {
+		return imported.name;
+	}
+	if (imported?.type === 'Literal') {
+		return String(imported.value);
+	}
+	return null;
+}
+
+/**
+ * @param {any} expression
+ * @returns {any}
+ */
+function unwrap_reference_expression(expression) {
+	let node = expression;
+	while (
+		node &&
+		(node.type === 'TSAsExpression' ||
+			node.type === 'TSTypeAssertion' ||
+			node.type === 'TSNonNullExpression' ||
+			node.type === 'ParenthesizedExpression' ||
+			node.type === 'ChainExpression')
+	) {
+		node = node.expression;
+	}
+	return node;
+}
+
 /**
  * @param {any[]} body_nodes
  * @param {TransformContext} transform_context
@@ -440,6 +881,12 @@ function build_component_statements(body_nodes, transform_context) {
  * @returns {any[]}
  */
 function build_render_statements(body_nodes, return_null_when_empty, transform_context) {
+	body_nodes = body_nodes.flatMap((node) =>
+		node?.type === 'JSXCodeBlock'
+			? [...node.body, ...(node.render != null ? [node.render] : [])]
+			: [node],
+	);
+
 	const statements = [];
 	const render_nodes = [];
 	let has_terminal_return = false;
@@ -480,7 +927,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 					(node) =>
 						!is_loop_skip_return_statement(node) &&
 						!is_loop_skip_if_statement(node) &&
-						!is_jsx_child(node),
+						!is_render_child_node(node),
 				);
 
 				if (!continuation_has_setup_statements) {
@@ -522,7 +969,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		}
 
 		if (
-			child.type === 'ForOfStatement' &&
+			is_template_for_of_node(child) &&
 			!child.await &&
 			should_extract_hook_helpers(transform_context) &&
 			!transform_context.platform.hooks?.isTopLevelSetupCall &&
@@ -533,7 +980,10 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 				true,
 			)
 		) {
-			const hoisted = build_hoisted_for_of_with_hooks(child, transform_context);
+			const hoisted = build_hoisted_for_of_with_hooks(
+				jsx_control_expression_to_statement(child),
+				transform_context,
+			);
 			if (hoisted) {
 				statements.push(...hoisted.hoist_statements);
 				if (interleaved && is_capturable_jsx_child(hoisted.jsx_child)) {
@@ -547,7 +997,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 			}
 		}
 
-		if (is_jsx_child(child)) {
+		if (is_render_child_node(child)) {
 			const jsx = to_jsx_child(child, transform_context);
 			statements.push(...extract_jsx_setup_declarations(jsx));
 			if (interleaved && is_capturable_jsx_child(jsx)) {
@@ -560,6 +1010,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		} else if (is_bare_render_expression(child)) {
 			render_nodes.push(to_jsx_expression_container(child, child));
 		} else {
+			mark_nested_function_return_jsx(child);
 			statements.push(child);
 			collect_statement_bindings(child, transform_context.available_bindings);
 		}
@@ -569,78 +1020,308 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		hoist_static_render_nodes(render_nodes, transform_context);
 	}
 
-	const return_arg = build_return_expression(render_nodes);
-	if (return_arg || (return_null_when_empty && !has_terminal_return)) {
-		statements.push(b.return(return_arg || b.literal(null)));
+	const return_arg = build_return_expression(render_nodes);
+	if (return_arg || (return_null_when_empty && !has_terminal_return)) {
+		statements.push(b.return(return_arg || b.literal(null)));
+	}
+
+	transform_context.available_bindings = saved_bindings;
+	return statements;
+}
+
+/**
+ * @param {any[]} body_nodes
+ * @returns {boolean}
+ */
+function is_interleaved_body(body_nodes) {
+	return is_interleaved_body_core(body_nodes, is_render_child_node);
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function needs_hook_split(node, transform_context) {
+	const body = node.body?.body || [];
+	return (
+		transform_context.platform.hooks?.componentBodyHookHelpers === true &&
+		node.body?.type === 'BlockStatement' &&
+		(find_hook_split_index(body, transform_context) !== -1 ||
+			body_contains_component_body_branch_hook_return(body, transform_context))
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {any}
+ */
+function create_hook_split_block(node, transform_context) {
+	if (
+		transform_context.platform.hooks?.componentBodyHookHelpers !== true ||
+		!should_extract_hook_helpers(transform_context) ||
+		node.body?.type !== 'BlockStatement'
+	) {
+		return null;
+	}
+
+	const source_body = node.body.body || [];
+	const branch_rewrite = rewrite_component_body_branch_hook_returns(source_body, transform_context);
+	const body = branch_rewrite.body;
+	const split_index = find_hook_split_index(body, transform_context);
+	if (split_index === -1 && !branch_rewrite.changed) {
+		return null;
+	}
+
+	let block_body;
+	if (split_index === -1) {
+		block_body = expand_native_tsrx_return_statement_list(body, transform_context);
+	} else {
+		const split_statement = body[split_index];
+		const continuation_body = body.slice(split_index + 1);
+		const helper = create_hook_safe_helper(
+			expand_native_tsrx_return_statement_list(continuation_body, transform_context),
+			undefined,
+			get_body_source_node(continuation_body) || split_statement,
+			transform_context,
+		);
+
+		block_body = [
+			...body.slice(0, split_index + 1),
+			...helper.setup_statements,
+			set_loc(b.return(helper.component_element), split_statement),
+		];
+	}
+
+	const block = b.block(block_body, node.body);
+	block.metadata = {
+		...(block.metadata || {}),
+		hook_split_block: true,
+	};
+	return block;
+}
+
+/**
+ * @param {any[]} body_nodes
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function body_contains_component_body_branch_hook_return(body_nodes, transform_context) {
+	return body_nodes.some((node) =>
+		statement_contains_component_body_branch_hook_return(node, transform_context),
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function statement_contains_component_body_branch_hook_return(node, transform_context) {
+	if (!node || typeof node !== 'object') {
+		return false;
+	}
+
+	if (Array.isArray(node)) {
+		return body_contains_component_body_branch_hook_return(node, transform_context);
+	}
+
+	if (is_function_or_class_boundary(node)) {
+		return false;
+	}
+
+	if (is_plain_if_statement(node)) {
+		return (
+			branch_needs_component_body_hook_helper(node.consequent, transform_context) ||
+			statement_contains_component_body_branch_hook_return(node.consequent, transform_context) ||
+			branch_needs_component_body_hook_helper(node.alternate, transform_context) ||
+			statement_contains_component_body_branch_hook_return(node.alternate, transform_context)
+		);
+	}
+
+	if (node.type === 'BlockStatement') {
+		return body_contains_component_body_branch_hook_return(node.body || [], transform_context);
+	}
+
+	return false;
+}
+
+/**
+ * @param {any[]} body_nodes
+ * @param {TransformContext} transform_context
+ * @returns {{ body: any[], changed: boolean }}
+ */
+function rewrite_component_body_branch_hook_returns(body_nodes, transform_context) {
+	let changed = false;
+	const body = body_nodes.map((node) => {
+		const next_node = rewrite_component_body_branch_hook_return_statement(node, transform_context);
+		if (next_node !== node) {
+			changed = true;
+		}
+		return next_node;
+	});
+	return changed ? { body, changed } : { body: body_nodes, changed: false };
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {any}
+ */
+function rewrite_component_body_branch_hook_return_statement(node, transform_context) {
+	if (!node || typeof node !== 'object' || is_function_or_class_boundary(node)) {
+		return node;
+	}
+
+	if (is_plain_if_statement(node)) {
+		const consequent = rewrite_component_body_hook_return_branch(
+			node.consequent,
+			transform_context,
+		);
+		const alternate = node.alternate
+			? rewrite_component_body_hook_return_branch(node.alternate, transform_context)
+			: { node: node.alternate, changed: false };
+
+		if (!consequent.changed && !alternate.changed) {
+			return node;
+		}
+		return set_loc(b.if(node.test, consequent.node, alternate.node), node);
+	}
+
+	if (node.type === 'BlockStatement') {
+		const rewritten = rewrite_component_body_branch_hook_returns(
+			node.body || [],
+			transform_context,
+		);
+		return rewritten.changed ? set_loc(b.block(rewritten.body, node), node) : node;
+	}
+
+	return node;
+}
+
+/**
+ * @param {any} branch
+ * @param {TransformContext} transform_context
+ * @returns {{ node: any, changed: boolean }}
+ */
+function rewrite_component_body_hook_return_branch(branch, transform_context) {
+	if (!branch || typeof branch !== 'object') {
+		return { node: branch, changed: false };
+	}
+
+	if (is_plain_if_statement(branch)) {
+		const next_node = rewrite_component_body_branch_hook_return_statement(
+			branch,
+			transform_context,
+		);
+		return { node: next_node, changed: next_node !== branch };
+	}
+
+	const branch_body = branch.type === 'BlockStatement' ? branch.body || [] : [branch];
+	const rewritten = rewrite_component_body_branch_hook_returns(branch_body, transform_context);
+	const body = rewritten.body;
+	const needs_helper = branch_needs_component_body_hook_helper_body(body, transform_context);
+
+	if (!needs_helper) {
+		if (!rewritten.changed) {
+			return { node: branch, changed: false };
+		}
+		const node =
+			branch.type === 'BlockStatement'
+				? set_loc(b.block(body, branch), branch)
+				: (body[0] ?? branch);
+		return { node, changed: true };
+	}
+
+	const helper_body = expand_native_tsrx_return_statement_list(body, transform_context);
+	const helper = create_hook_safe_helper(
+		helper_body,
+		undefined,
+		get_body_source_node(body) || branch,
+		transform_context,
+	);
+	const node = set_loc(
+		b.block([...helper.setup_statements, set_loc(b.return(helper.component_element), branch)]),
+		branch,
+	);
+	return { node, changed: true };
+}
+
+/**
+ * @param {any} branch
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function branch_needs_component_body_hook_helper(branch, transform_context) {
+	if (!branch || typeof branch !== 'object' || is_plain_if_statement(branch)) {
+		return false;
 	}
+	const body = branch.type === 'BlockStatement' ? branch.body || [] : [branch];
+	return branch_needs_component_body_hook_helper_body(body, transform_context);
+}
 
-	transform_context.available_bindings = saved_bindings;
-	return statements;
+/**
+ * @param {any[]} body
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function branch_needs_component_body_hook_helper_body(body, transform_context) {
+	return (
+		body_has_top_level_component_body_return(body) &&
+		body_contains_direct_top_level_hook_call(body, transform_context, true)
+	);
 }
 
 /**
- * @param {any[]} body_nodes
+ * @param {any[]} body
  * @returns {boolean}
  */
-function is_interleaved_body(body_nodes) {
-	return is_interleaved_body_core(body_nodes, is_jsx_child);
+function body_has_top_level_component_body_return(body) {
+	return body.some((node) => node?.type === 'ReturnStatement');
 }
 
 /**
- * @param {any} node
+ * @param {any[]} body
  * @param {TransformContext} transform_context
+ * @param {boolean} include_platform_setup
  * @returns {boolean}
  */
-function needs_hook_split(node, transform_context) {
-	return (
-		transform_context.platform.hooks?.componentBodyHookHelpers === true &&
-		node.body?.type === 'BlockStatement' &&
-		find_hook_split_index(node.body.body || [], transform_context) !== -1
+function body_contains_direct_top_level_hook_call(body, transform_context, include_platform_setup) {
+	return body.some((node) =>
+		statement_contains_direct_top_level_hook_call(node, transform_context, include_platform_setup),
 	);
 }
 
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
- * @returns {any}
+ * @param {boolean} include_platform_setup
+ * @returns {boolean}
  */
-function create_hook_split_block(node, transform_context) {
-	if (
-		transform_context.platform.hooks?.componentBodyHookHelpers !== true ||
-		!should_extract_hook_helpers(transform_context) ||
-		node.body?.type !== 'BlockStatement'
-	) {
-		return null;
+function statement_contains_direct_top_level_hook_call(
+	node,
+	transform_context,
+	include_platform_setup,
+) {
+	if (!node || typeof node !== 'object') {
+		return false;
 	}
 
-	const body = node.body.body || [];
-	const split_index = find_hook_split_index(body, transform_context);
-	if (split_index === -1) {
-		return null;
+	if (is_function_or_class_boundary(node)) {
+		return false;
 	}
 
-	const split_statement = body[split_index];
-	const continuation_body = body.slice(split_index + 1);
-	const helper = create_hook_safe_helper(
-		expand_native_tsrx_return_statement_list(continuation_body, transform_context),
-		undefined,
-		get_body_source_node(continuation_body) || split_statement,
-		transform_context,
-	);
+	if (
+		is_plain_if_statement(node) ||
+		is_switch_control_node(node) ||
+		is_try_control_node(node) ||
+		is_for_of_control_node(node)
+	) {
+		return false;
+	}
 
-	const block = b.block(
-		[
-			...body.slice(0, split_index + 1),
-			...helper.setup_statements,
-			set_loc(b.return(helper.component_element), split_statement),
-		],
-		node.body,
-	);
-	block.metadata = {
-		...(block.metadata || {}),
-		hook_split_block: true,
-	};
-	return block;
+	return statement_contains_top_level_hook_call(node, transform_context, include_platform_setup);
 }
 
 /**
@@ -667,7 +1348,7 @@ function find_hook_split_index(body_nodes, transform_context) {
  * @returns {boolean}
  */
 function is_component_body_conditional_return_statement(node) {
-	if (node?.type !== 'IfStatement') {
+	if (!is_if_control_node(node)) {
 		return false;
 	}
 
@@ -702,20 +1383,20 @@ function statement_contains_component_body_return(node) {
 		return (node.body || []).some(statement_contains_component_body_return);
 	}
 
-	if (node.type === 'IfStatement') {
+	if (is_if_control_node(node)) {
 		return (
 			statement_contains_component_body_return(node.consequent) ||
 			statement_contains_component_body_return(node.alternate)
 		);
 	}
 
-	if (node.type === 'SwitchStatement') {
+	if (is_switch_control_node(node)) {
 		return (node.cases || []).some((/** @type {any} */ switch_case) =>
 			statement_contains_component_body_return(switch_case.consequent || []),
 		);
 	}
 
-	if (node.type === 'TryStatement') {
+	if (is_try_control_node(node)) {
 		return (
 			statement_contains_component_body_return(node.block) ||
 			statement_contains_component_body_return(node.handler?.body) ||
@@ -992,7 +1673,7 @@ function transform_block_statement(node, { next, visit, state, path }) {
 		}
 	}
 
-	if (get_active_native_tsrx_function(path)) {
+	if (get_active_native_tsrx_function(path)?.metadata?.native_tsrx_body) {
 		const block = create_native_tsrx_statement_list_block(node, state);
 		if (block) {
 			return visit(block, state);
@@ -1008,13 +1689,56 @@ function transform_block_statement(node, { next, visit, state, path }) {
  * @returns {any}
  */
 function transform_return_statement(node, { next, visit, state, path }) {
-	if (get_active_native_tsrx_function(path) && node.argument?.type === 'TsrxFragment') {
+	const active_native_tsrx_function = get_active_native_tsrx_function(path);
+	if (active_native_tsrx_function && is_native_tsrx_node(node.argument)) {
+		if (!active_native_tsrx_function.metadata?.native_tsrx_body) {
+			const statements = mark_native_pretransformed_jsx(
+				create_native_tsrx_render_statements(node.argument, state),
+			);
+			if (statements.length === 1) {
+				return visit(statements[0], state);
+			}
+			const block = b.block(statements, node.argument);
+			block.metadata = {
+				...(block.metadata || {}),
+				native_return_block: true,
+			};
+			return visit(block, state);
+		}
 		return visit(create_native_tsrx_render_block(node.argument, state), state);
 	}
 
 	return next() ?? node;
 }
 
+/**
+ * @param {any} node
+ * @param {{ state: TransformContext, path: AST.Node[] }} context
+ * @returns {any}
+ */
+function transform_jsx_code_block(node, { state, path }) {
+	const body_nodes = get_jsx_code_block_body_nodes(node, state);
+	const parent = /** @type {any} */ (path.at(-1));
+
+	if (parent && parent.body === node && is_function_or_class_boundary(parent)) {
+		const block = b.block(
+			mark_native_pretransformed_jsx(build_render_statements(body_nodes, true, state)),
+			node,
+		);
+		block.metadata = {
+			...(block.metadata || {}),
+			native_return_block: true,
+		};
+		return block;
+	}
+
+	const expression = b.call(
+		b.arrow([], b.block(build_render_statements(body_nodes, true, state), node)),
+	);
+
+	return in_jsx_child_context(path) ? to_jsx_expression_container(expression, node) : expression;
+}
+
 /**
  * @param {AST.Node[]} path
  * @returns {any | null}
@@ -1035,19 +1759,62 @@ function get_active_native_tsrx_function(path) {
  * @returns {any}
  */
 function transform_function(node, context) {
-	if (node.metadata?.native_tsrx_function || function_has_native_tsrx_return(node)) {
-		return transform_native_tsrx_function(node, context);
+	// Lower a `@{ … }` function body (JSXCodeBlock) to an ordinary block: the
+	// setup statements followed by `return <render>` when the block produces a
+	// render output. The parser already marks the render JSX as native_tsrx, so
+	// from here it flows through the existing native-component machinery exactly
+	// like the older fenced `{ return <> … </> }` shape.
+	const has_jsx_code_block_body = node.body?.type === 'JSXCodeBlock';
+	lower_jsx_code_block_function_body(node);
+
+	if (
+		has_jsx_code_block_body ||
+		node.metadata?.native_tsrx_function ||
+		function_has_native_tsrx_return(node)
+	) {
+		return transform_native_tsrx_function(node, context, {
+			nativeBody: has_jsx_code_block_body || !!node.metadata?.native_tsrx_function,
+		});
 	}
 
 	return transform_function_with_hook_helpers(node, context);
 }
 
+/**
+ * @param {any} node
+ * @returns {void}
+ */
+function lower_jsx_code_block_function_body(node) {
+	if (node.body?.type !== 'JSXCodeBlock') return;
+
+	const code_block = node.body;
+	const statements = [...code_block.body];
+	if (code_block.render != null) {
+		let render = code_block.render;
+		if (!is_native_tsrx_node(render)) {
+			// A control-flow output (@if/@for/@switch/@try) isn't itself a native
+			// template node, so `return @if (…) { … }` wouldn't be recognized as a
+			// component render output. Wrap it in a native fragment so it flows
+			// through the same children-rendering path as a `<> … </>` render.
+			const fragment = b.jsx_fragment([render]);
+			fragment.metadata = { ...fragment.metadata, native_tsrx: true };
+			render = fragment;
+		}
+		statements.push(b.return(render, code_block.render));
+	}
+	node.body = b.block(statements, code_block);
+	if (node.type === 'ArrowFunctionExpression') {
+		node.expression = false;
+	}
+}
+
 /**
  * @param {any} node
  * @param {{ next: () => any, state: TransformContext }} context
+ * @param {{ nativeBody?: boolean }} [options]
  * @returns {any}
  */
-function transform_native_tsrx_function(node, { next, state }) {
+function transform_native_tsrx_function(node, { next, state }, { nativeBody = false } = {}) {
 	const helper_state =
 		state.helper_state || create_helper_state(get_function_helper_base_name(node));
 	const saved_helper_state = state.helper_state;
@@ -1059,7 +1826,8 @@ function transform_native_tsrx_function(node, { next, state }) {
 	node.metadata = {
 		...(node.metadata || {}),
 		native_tsrx: true,
-		...(needs_hook_split(node, state) ? { hook_split: true } : {}),
+		...(nativeBody ? { native_tsrx_body: true } : {}),
+		...(nativeBody && needs_hook_split(node, state) ? { hook_split: true } : {}),
 	};
 	state.available_bindings = merge_binding_maps(
 		saved_bindings,
@@ -1072,7 +1840,7 @@ function transform_native_tsrx_function(node, { next, state }) {
 	if (
 		inner !== node &&
 		node.type === 'ArrowFunctionExpression' &&
-		node.body?.type === 'TsrxFragment' &&
+		is_native_tsrx_node(node.body) &&
 		inner.body?.type === 'BlockStatement'
 	) {
 		inner.expression = false;
@@ -1085,6 +1853,7 @@ function transform_native_tsrx_function(node, { next, state }) {
 	inner.metadata = {
 		...strip_function_transform_metadata(inner.metadata),
 		native_tsrx_function: true,
+		...(nativeBody ? { native_tsrx_body: true } : {}),
 		...(!saved_helper_state ? create_generated_helper_metadata(helper_state) || {} : {}),
 	};
 
@@ -1132,6 +1901,10 @@ function find_native_await(node) {
 		return find_first_top_level_await(node.body, false);
 	}
 
+	if (node.body?.type === 'JSXCodeBlock') {
+		return find_native_await_in_list(get_raw_jsx_code_block_body_nodes(node.body));
+	}
+
 	const body = node.body?.type === 'BlockStatement' ? node.body.body || [] : [];
 	return find_native_await_in_list(body);
 }
@@ -1155,7 +1928,7 @@ function find_native_await_in_list(statements) {
 function find_native_await_in_statement(statement) {
 	if (!statement || typeof statement !== 'object') return null;
 
-	if (statement.type === 'ReturnStatement' && statement.argument?.type === 'TsrxFragment') {
+	if (statement.type === 'ReturnStatement' && is_native_tsrx_node(statement.argument)) {
 		return find_first_top_level_await_in_tsrx_function_body(statement.argument.children || []);
 	}
 
@@ -1174,14 +1947,14 @@ function find_native_await_in_statement(statement) {
 		return find_native_await_in_list(statement.body || []);
 	}
 
-	if (statement.type === 'IfStatement') {
+	if (is_if_control_node(statement)) {
 		return (
 			find_native_await_in_statement(statement.consequent) ||
 			find_native_await_in_statement(statement.alternate)
 		);
 	}
 
-	if (statement.type === 'SwitchStatement') {
+	if (is_switch_control_node(statement)) {
 		for (const switch_case of statement.cases || []) {
 			const found = find_native_await_in_list(switch_case.consequent || []);
 			if (found) return found;
@@ -1189,7 +1962,7 @@ function find_native_await_in_statement(statement) {
 		return null;
 	}
 
-	if (statement.type === 'TryStatement') {
+	if (is_try_control_node(statement)) {
 		return (
 			find_native_await_in_statement(statement.block) ||
 			find_native_await_in_statement(statement.handler?.body) ||
@@ -1197,7 +1970,7 @@ function find_native_await_in_statement(statement) {
 		);
 	}
 
-	return null;
+	return find_first_top_level_await(statement, false);
 }
 
 /**
@@ -1207,12 +1980,7 @@ function find_native_await_in_statement(statement) {
  */
 function transform_function_with_hook_helpers(node, { next, state }) {
 	const has_hook_bearing_tsrx = function_contains_hook_bearing_tsrx(node, state);
-	const has_hook_split = needs_hook_split(node, state);
-	if (
-		state.helper_state ||
-		!is_uppercase_function_like(node) ||
-		(!has_hook_bearing_tsrx && !has_hook_split)
-	) {
+	if (state.helper_state || !is_uppercase_function_like(node) || !has_hook_bearing_tsrx) {
 		return next() ?? node;
 	}
 
@@ -1223,12 +1991,6 @@ function transform_function_with_hook_helpers(node, { next, state }) {
 
 	state.helper_state = helper_state;
 	state.hook_helpers_enabled = true;
-	if (has_hook_split) {
-		node.metadata = {
-			...(node.metadata || {}),
-			hook_split: true,
-		};
-	}
 	state.available_bindings = collect_function_scope_bindings(node);
 
 	const inner = /** @type {any} */ (next() ?? node);
@@ -1250,7 +2012,7 @@ function transform_function_with_hook_helpers(node, { next, state }) {
  * @returns {string}
  */
 function get_function_helper_base_name(node) {
-	return get_function_like_name(node) || 'TsrxFragment';
+	return get_function_like_name(node) || 'TSRXTemplate';
 }
 
 /**
@@ -1329,7 +2091,7 @@ function collect_function_scope_bindings(node) {
 	const bindings = collect_param_bindings(node.params || []);
 	if (node.body?.type === 'BlockStatement') {
 		for (const statement of node.body.body || []) {
-			if (statement.type === 'ReturnStatement' && statement.argument?.type === 'TsrxFragment') {
+			if (statement.type === 'ReturnStatement' && is_native_tsrx_node(statement.argument)) {
 				for (const child of get_tsrx_render_children(statement.argument)) {
 					collect_statement_bindings(child, bindings);
 				}
@@ -1361,6 +2123,10 @@ function merge_binding_maps(outer, inner) {
 function function_has_native_tsrx_return(node) {
 	if (!node) return false;
 
+	if (node.body?.type === 'JSXCodeBlock') {
+		return true;
+	}
+
 	if (node.type === 'ArrowFunctionExpression' && node.body?.type !== 'BlockStatement') {
 		return node_contains_native_tsrx_template(node.body);
 	}
@@ -1396,22 +2162,23 @@ function statement_contains_native_tsrx_return(statement) {
 		return statements_contain_native_tsrx_return(statement.body || []);
 	}
 
-	if (statement.type === 'IfStatement') {
+	if (is_if_control_node(statement)) {
 		return (
 			statement_contains_native_tsrx_return(statement.consequent) ||
 			statement_contains_native_tsrx_return(statement.alternate)
 		);
 	}
 
-	if (statement.type === 'SwitchStatement') {
+	if (is_switch_control_node(statement)) {
 		return (statement.cases || []).some((/** @type {any} */ c) =>
 			statements_contain_native_tsrx_return(c.consequent || []),
 		);
 	}
 
-	if (statement.type === 'TryStatement') {
+	if (is_try_control_node(statement)) {
 		return (
 			statement_contains_native_tsrx_return(statement.block) ||
+			statement_contains_native_tsrx_return(statement.pending) ||
 			statement_contains_native_tsrx_return(statement.handler?.body) ||
 			statement_contains_native_tsrx_return(statement.finalizer)
 		);
@@ -1438,7 +2205,7 @@ function statement_contains_native_tsrx_return(statement) {
  */
 function node_contains_native_tsrx_template(node) {
 	if (!node || typeof node !== 'object') return false;
-	if (node.type === 'Element' || node.type === 'TsrxFragment') return true;
+	if (is_native_tsrx_node(node)) return true;
 
 	if (is_function_or_class_boundary(node)) {
 		return false;
@@ -1487,7 +2254,7 @@ function prepare_tsrx_fragment_styles(node, transform_context) {
 	if (!css) return null;
 
 	const style_refs = collect_style_ref_attributes(node);
-	apply_css_definition_metadata(node, css, style_refs.length > 0);
+	apply_css_definition_metadata(node, css, transform_context, style_refs.length > 0);
 	transform_context.stylesheets.push(css);
 	const fragment = annotate_tsrx_with_hash(
 		node,
@@ -1629,11 +2396,11 @@ function collect_style_elements(node, styles) {
 		return;
 	}
 
-	if (is_function_or_class_boundary(node) || node.type === 'TsrxFragment') {
+	if (is_function_or_class_boundary(node)) {
 		return;
 	}
 
-	if (node.type === 'Element') {
+	if ((node.type === 'JSXElement' || node.type === 'JSXFragment') && node.metadata?.native_tsrx) {
 		collect_style_elements(node.children || [], styles);
 		return;
 	}
@@ -1643,20 +2410,20 @@ function collect_style_elements(node, styles) {
 		return;
 	}
 
-	if (node.type === 'IfStatement') {
+	if (is_if_control_node(node)) {
 		collect_style_elements(node.consequent, styles);
 		collect_style_elements(node.alternate, styles);
 		return;
 	}
 
-	if (node.type === 'SwitchStatement') {
+	if (is_switch_control_node(node)) {
 		for (const switch_case of node.cases || []) {
 			collect_style_elements(switch_case.consequent || [], styles);
 		}
 		return;
 	}
 
-	if (node.type === 'TryStatement') {
+	if (is_try_control_node(node)) {
 		collect_style_elements(node.block, styles);
 		collect_style_elements(node.handler?.body, styles);
 		collect_style_elements(node.finalizer, styles);
@@ -1708,7 +2475,7 @@ function strip_style_elements(node) {
 		return node;
 	}
 
-	if (node.type === 'Element') {
+	if ((node.type === 'JSXElement' || node.type === 'JSXFragment') && node.metadata?.native_tsrx) {
 		node.children = strip_style_elements(node.children || []);
 		return node;
 	}
@@ -1718,20 +2485,20 @@ function strip_style_elements(node) {
 		return node;
 	}
 
-	if (node.type === 'IfStatement') {
+	if (is_if_control_node(node)) {
 		node.consequent = strip_style_elements(node.consequent);
 		if (node.alternate) node.alternate = strip_style_elements(node.alternate);
 		return node;
 	}
 
-	if (node.type === 'SwitchStatement') {
+	if (is_switch_control_node(node)) {
 		for (const switch_case of node.cases || []) {
 			switch_case.consequent = strip_style_elements(switch_case.consequent || []);
 		}
 		return node;
 	}
 
-	if (node.type === 'TryStatement') {
+	if (is_try_control_node(node)) {
 		node.block = strip_style_elements(node.block);
 		if (node.handler?.body) node.handler.body = strip_style_elements(node.handler.body);
 		if (node.finalizer) node.finalizer = strip_style_elements(node.finalizer);
@@ -1747,9 +2514,7 @@ function strip_style_elements(node) {
 function is_style_expression_position(path) {
 	const parent = path.at(-1);
 	return !(
-		parent?.type === 'Element' ||
-		parent?.type === 'TsrxFragment' ||
-		parent?.type === 'TsxCompat' ||
+		is_native_tsrx_node(parent) ||
 		parent?.type === 'BlockStatement' ||
 		parent?.type === 'Program' ||
 		parent?.type === 'SwitchCase'
@@ -1804,9 +2569,11 @@ function create_native_tsrx_statement_list_block(block, transform_context) {
 function create_native_tsrx_render_statements(fragment, transform_context) {
 	return with_tsrx_fragment_styles(fragment, transform_context, (style_context) => {
 		const target = style_context?.fragment ?? fragment;
+		const render_nodes =
+			target.type === 'JSXFragment' ? get_tsrx_render_children(target) : [target];
 		return [
 			...create_tsrx_style_ref_setup_statements(target, style_context, transform_context),
-			...build_render_statements(get_tsrx_render_children(target), true, transform_context),
+			...build_render_statements(render_nodes, true, transform_context),
 		];
 	});
 }
@@ -1836,7 +2603,7 @@ function expand_native_tsrx_return_statement_list(statements, transform_context)
 function expand_native_tsrx_return_statement(statement, transform_context) {
 	if (!statement || typeof statement !== 'object') return [statement];
 
-	if (statement.type === 'ReturnStatement' && statement.argument?.type === 'TsrxFragment') {
+	if (statement.type === 'ReturnStatement' && is_native_tsrx_node(statement.argument)) {
 		return create_native_tsrx_render_statements(statement.argument, transform_context);
 	}
 
@@ -1849,7 +2616,7 @@ function expand_native_tsrx_return_statement(statement, transform_context) {
 		return body === statement.body ? [statement] : [b.block(body, statement)];
 	}
 
-	if (statement.type === 'IfStatement') {
+	if (is_if_control_node(statement)) {
 		const consequent = expand_embedded_native_return_statement(
 			statement.consequent,
 			transform_context,
@@ -1863,7 +2630,7 @@ function expand_native_tsrx_return_statement(statement, transform_context) {
 		return [set_loc(b.if(statement.test, consequent, alternate), statement)];
 	}
 
-	if (statement.type === 'SwitchStatement') {
+	if (is_switch_control_node(statement)) {
 		let changed = false;
 		const cases = (statement.cases || []).map((/** @type {any} */ switch_case) => {
 			const consequent = expand_native_tsrx_return_statement_list(
@@ -1879,8 +2646,11 @@ function expand_native_tsrx_return_statement(statement, transform_context) {
 		return changed ? [set_loc(b.switch(statement.discriminant, cases), statement)] : [statement];
 	}
 
-	if (statement.type === 'TryStatement') {
+	if (is_try_control_node(statement)) {
 		const block = expand_embedded_native_return_statement(statement.block, transform_context);
+		const pending = statement.pending
+			? expand_embedded_native_return_statement(statement.pending, transform_context)
+			: statement.pending;
 		const handler_body = statement.handler?.body
 			? expand_embedded_native_return_statement(statement.handler.body, transform_context)
 			: statement.handler?.body;
@@ -1889,6 +2659,7 @@ function expand_native_tsrx_return_statement(statement, transform_context) {
 			: statement.finalizer;
 		if (
 			block === statement.block &&
+			pending === statement.pending &&
 			handler_body === statement.handler?.body &&
 			finalizer === statement.finalizer
 		) {
@@ -1903,7 +2674,7 @@ function expand_native_tsrx_return_statement(statement, transform_context) {
 						statement.handler,
 					)
 				: statement.handler;
-		return [set_loc(b.try(block, handler, finalizer, statement.pending ?? null), statement)];
+		return [set_loc(b.try(block, handler, finalizer, pending ?? null), statement)];
 	}
 
 	return [statement];
@@ -2036,7 +2807,7 @@ function node_contains_hook_bearing_tsrx(node, transform_context) {
 		return node.some((child) => node_contains_hook_bearing_tsrx(child, transform_context));
 	}
 
-	if (node.type === 'TsrxFragment') {
+	if (is_native_tsrx_node(node)) {
 		return body_contains_top_level_hook_call(node.children || [], transform_context, true);
 	}
 
@@ -2083,7 +2854,7 @@ function should_extract_hook_helpers(transform_context) {
  */
 function create_module_scoped_hook_component_id(helper_id, transform_context) {
 	return create_generated_identifier(
-		`${transform_context.helper_state?.base_name || 'TsrxFragment'}__${helper_id.name}`,
+		`${transform_context.helper_state?.base_name || 'TSRXTemplate'}__${helper_id.name}`,
 	);
 }
 
@@ -2301,6 +3072,48 @@ function expand_component_helpers(program) {
 	return program;
 }
 
+/**
+ * Generated helper metadata can be appended after the main transformer walk.
+ * If one of those helpers contains a statement-container body, lower it before
+ * the printer sees the helper subtree.
+ *
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @param {Set<any>} [seen]
+ * @returns {void}
+ */
+function lower_remaining_jsx_code_blocks(node, transform_context, seen = new Set()) {
+	if (!node || typeof node !== 'object' || seen.has(node)) return;
+	seen.add(node);
+
+	if (is_function_or_class_boundary(node)) {
+		lower_jsx_code_block_function_body(node);
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+		let value = node[key];
+		if (!value || typeof value !== 'object') continue;
+
+		if (Array.isArray(value)) {
+			if (key === 'body') {
+				value = node[key] = value.flatMap((child) => {
+					if (child?.type !== 'JSXCodeBlock') return [child];
+					const body_nodes = get_jsx_code_block_body_nodes(child, transform_context);
+					return mark_native_pretransformed_jsx(
+						build_render_statements(body_nodes, true, transform_context),
+					);
+				});
+			}
+			for (const child of value) {
+				lower_remaining_jsx_code_blocks(child, transform_context, seen);
+			}
+		} else {
+			lower_remaining_jsx_code_blocks(value, transform_context, seen);
+		}
+	}
+}
+
 /**
  * Generated helper/statics metadata can be carried on function declarations,
  * variable declarations, object literal members, or export-safe expressions,
@@ -2383,11 +3196,7 @@ function create_component_return_statement(
  * @returns {boolean}
  */
 function is_loop_skip_return_statement(node) {
-	return (
-		node?.type === 'ReturnStatement' &&
-		node.argument == null &&
-		node.metadata?.generated_loop_continue_return === true
-	);
+	return node?.type === 'ReturnStatement' && node.metadata?.generated_loop_continue_return === true;
 }
 
 /**
@@ -2403,7 +3212,7 @@ function is_loop_skip_if_statement(node) {
  * @returns {any[] | null}
  */
 function get_loop_skip_if_consequent_body(node) {
-	if (node?.type !== 'IfStatement' || node.alternate) {
+	if (!is_if_control_node(node) || node.alternate) {
 		return null;
 	}
 
@@ -2424,7 +3233,15 @@ function create_component_loop_skip_if_statement(node, render_nodes, transform_c
 	const branch_statements = build_render_statements(consequent_body, true, transform_context);
 	prepend_render_nodes_to_return_statements(branch_statements, render_nodes);
 
-	return set_loc(b.if(node.test, set_loc(b.block(branch_statements), node.consequent), null), node);
+	const statement = set_loc(
+		b.if(node.test, set_loc(b.block(branch_statements), node.consequent), null),
+		node,
+	);
+	statement.metadata = {
+		...(statement.metadata || {}),
+		generated_loop_skip_if: true,
+	};
+	return statement;
 }
 
 /**
@@ -2803,26 +3620,33 @@ function create_helper_props_type_literal_with_typeof_flags(bindings, aliases, u
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
+ * @param {boolean} [in_jsx_child]
  * @returns {any}
  */
-function to_jsx_element(node, transform_context, raw_children = node.children || []) {
-	if (node.type === 'JSXElement') return node;
-	if (!node.id) {
+function to_jsx_element(
+	node,
+	transform_context,
+	raw_children = node.children || [],
+	in_jsx_child = false,
+) {
+	if (node.type === 'JSXElement' && !node.metadata?.native_tsrx) {
+		return node;
+	}
+
+	const source_opening = node.openingElement;
+	const source_name = source_opening?.name;
+	if (!source_name) {
 		report_jsx_fragment_in_tsrx_error(node, transform_context);
 		return set_loc(b.jsx_fragment(), node);
 	}
-	if (is_dynamic_element_id(node.id)) {
-		return dynamic_element_to_jsx_child(node, transform_context);
-	}
-
-	const name = identifier_to_jsx_name(node.id);
+	const name = clone_jsx_name(source_name);
 	const attributes = transform_element_attributes_dispatch(
-		node.attributes || [],
+		source_opening.attributes || [],
 		transform_context,
 		node,
 	);
 	const walked_children = node.children || [];
-	let selfClosing = !!node.selfClosing;
+	let selfClosing = !!source_opening.selfClosing;
 	let children;
 	const child_transform = transform_context.platform.hooks?.transformElementChildren?.(
 		node,
@@ -2848,7 +3672,7 @@ function to_jsx_element(node, transform_context, raw_children = node.children ||
 		name,
 		attributes,
 		selfClosing,
-		node.openingElement?.typeArguments,
+		source_opening.typeArguments,
 	);
 	const openingElement = has_unmappable_attribute
 		? opening_element_node
@@ -2950,7 +3774,7 @@ function child_contains_return_semantics(node) {
  * @returns {boolean}
  */
 function is_inline_element_child(node) {
-	return node && is_jsx_child(node);
+	return node && is_render_child_node(node);
 }
 
 /**
@@ -3122,7 +3946,13 @@ function collect_block_binding_names_from_statement(statement, names) {
 		return;
 	}
 
-	if (statement.type === 'ForOfStatement' || statement.type === 'ForInStatement') {
+	if (
+		statement.type === 'ForOfStatement' ||
+		statement.type === 'ForInStatement' ||
+		(statement.type === 'JSXForExpression' &&
+			(statement.statementType === 'ForOfStatement' ||
+				statement.statementType === 'ForInStatement'))
+	) {
 		if (statement.left?.type === 'VariableDeclaration' && statement.left.kind === 'var') {
 			for (const declaration of statement.left.declarations || []) {
 				collect_pattern_names(declaration.id, names);
@@ -3283,7 +4113,7 @@ function validate_hook_outer_assignments_in_node(
 		}
 	}
 
-	if (node.type === 'ForOfStatement') {
+	if (is_for_of_control_node(node)) {
 		if (
 			node.left &&
 			node.left.type !== 'VariableDeclaration' &&
@@ -3716,9 +4546,7 @@ function get_hook_callee_name(callee) {
  * @param {any} source_node
  * @param {TransformContext} transform_context
  * @param {AST.Identifier} [preallocated_helper_id] - Optional pre-allocated id.
- *   Used by the switch lift's chained-call build, which allocates ids in
- *   source order in a forward pass and then constructs helpers in reverse so
- *   each fall-through case can reference the next case's component element.
+ *   Used by switch lifting to keep generated helper ids stable in source order.
  * @param {{ transientBindings?: Set<string> }} [options]
  * @returns {{ setup_statements: any[], component_element: ESTreeJSX.JSXElement }}
  */
@@ -3997,6 +4825,133 @@ function get_body_source_node(body_nodes) {
 	return first;
 }
 
+/**
+ * @param {any} node
+ * @returns {any}
+ */
+function jsx_control_expression_to_statement(node) {
+	if (!node?.statementType) return node;
+	return { ...node, type: node.statementType };
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {any[]}
+ */
+function get_jsx_code_block_body_nodes(node, transform_context) {
+	if (!node.render) {
+		return node.body || [];
+	}
+
+	if (is_native_tsrx_node(node.render)) {
+		const style_context = prepare_tsrx_fragment_styles(node.render, transform_context);
+		const render = style_context?.fragment ?? node.render;
+		return [
+			...(node.body || []),
+			...create_tsrx_style_ref_setup_statements(render, style_context, transform_context),
+			render,
+		];
+	}
+
+	return [...(node.body || []), node.render];
+}
+
+/**
+ * @param {any} node
+ * @returns {any[]}
+ */
+function get_raw_jsx_code_block_body_nodes(node) {
+	return [...(node.body || []), ...(node.render ? [node.render] : [])];
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_native_tsrx_node(node) {
+	return (
+		node?.type === 'JSXCodeBlock' ||
+		((node?.type === 'JSXElement' ||
+			node?.type === 'JSXFragment' ||
+			node?.type === 'JSXStyleElement') &&
+			node.metadata?.native_tsrx)
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_if_control_node(node) {
+	return node?.type === 'IfStatement' || node?.type === 'JSXIfExpression';
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_plain_if_statement(node) {
+	return node?.type === 'IfStatement' && !is_template_if_node(node);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_render_child_node(node) {
+	if (!node) return false;
+
+	switch (node.type) {
+		case 'JSXElement':
+		case 'JSXFragment':
+		case 'JSXExpressionContainer':
+		case 'JSXText':
+		case 'JSXIfExpression':
+		case 'JSXForExpression':
+		case 'JSXSwitchExpression':
+		case 'JSXTryExpression':
+			return true;
+		case 'IfStatement':
+			return is_template_if_node(node);
+		case 'ForOfStatement':
+			return is_template_for_of_node(node);
+		case 'SwitchStatement':
+			return is_template_switch_node(node);
+		case 'TryStatement':
+			return is_template_try_node(node);
+		default:
+			return false;
+	}
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_switch_control_node(node) {
+	return node?.type === 'SwitchStatement' || node?.type === 'JSXSwitchExpression';
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_try_control_node(node) {
+	return node?.type === 'TryStatement' || node?.type === 'JSXTryExpression';
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_for_of_control_node(node) {
+	return (
+		node?.type === 'ForOfStatement' ||
+		(node?.type === 'JSXForExpression' && node.statementType === 'ForOfStatement')
+	);
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -4005,33 +4960,65 @@ function get_body_source_node(body_nodes) {
 function to_jsx_child(node, transform_context) {
 	if (!node) return node;
 	switch (node.type) {
-		case 'TsrxFragment':
-			return tsrx_node_to_jsx_expression(node, transform_context, true);
-		case 'TsxCompat':
-			return tsx_compat_node_to_jsx_expression(node, transform_context, true);
-		case 'Element':
-			return to_jsx_element(node, transform_context);
-		case 'Text':
-			return to_jsx_expression_container(to_text_expression(node.expression, node), node);
-		case 'TSRXExpression':
-			return to_jsx_expression_container(node.expression, node);
+		case 'JSXElement':
+			if (is_native_tsrx_node(node)) {
+				return to_jsx_element(node, transform_context, node.children || [], true);
+			}
+			return node;
+		case 'JSXFragment':
+			if (is_native_tsrx_node(node)) {
+				return tsrx_node_to_jsx_expression(node, transform_context, true);
+			}
+			return node;
+		case 'JSXIfExpression':
 		case 'IfStatement':
+			if (node.type === 'IfStatement' && !is_template_if_node(node)) {
+				return node;
+			}
+			if (node.metadata?.generated_loop_skip_if) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.ifStatement ?? if_statement_to_jsx_child
-			)(node, transform_context);
+			)(jsx_control_expression_to_statement(node), transform_context);
+		case 'JSXForExpression':
+			if (node.statementType !== 'ForOfStatement') {
+				error(
+					'TSRX `@for` currently supports `for...of` loops in template output.',
+					transform_context.filename,
+					node,
+					transform_context.errors,
+					transform_context.comments,
+				);
+				return to_jsx_expression_container(create_null_literal(), node);
+			}
+			return (
+				transform_context.platform.hooks?.controlFlow?.forOf ?? for_of_statement_to_jsx_child
+			)(jsx_control_expression_to_statement(node), transform_context);
 		case 'ForOfStatement':
+			if (!is_template_for_of_node(node)) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.forOf ?? for_of_statement_to_jsx_child
 			)(node, transform_context);
+		case 'JSXSwitchExpression':
 		case 'SwitchStatement':
+			if (node.type === 'SwitchStatement' && !is_template_switch_node(node)) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.switchStatement ??
 				switch_statement_to_jsx_child
-			)(node, transform_context);
+			)(jsx_control_expression_to_statement(node), transform_context);
+		case 'JSXTryExpression':
 		case 'TryStatement':
+			if (node.type === 'TryStatement' && !is_template_try_node(node)) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.tryStatement ?? try_statement_to_jsx_child
-			)(node, transform_context);
+			)(jsx_control_expression_to_statement(node), transform_context);
 		default:
 			return node;
 	}
@@ -4040,7 +5027,7 @@ function to_jsx_child(node, transform_context) {
 /**
  * Lower a native TSRX fragment body to a JSX expression.
  * Children have already been parsed and transformed through the normal TSRX
- * Element/Text/control-flow visitors.
+ * JSX element/text/control-flow visitors.
  *
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -4123,7 +5110,7 @@ function return_value_statement_to_expression(node, transform_context) {
 		return node.argument;
 	}
 
-	if (node?.type === 'IfStatement') {
+	if (is_if_control_node(node)) {
 		return return_value_if_statement_to_conditional_expression(node, transform_context);
 	}
 
@@ -4217,7 +5204,7 @@ function return_value_block_to_expression(node, transform_context) {
  * @returns {any | null}
  */
 function return_value_if_statement_to_conditional_expression(node, transform_context) {
-	if (!node || node.type !== 'IfStatement') return null;
+	if (!is_if_control_node(node)) return null;
 
 	const consequent = return_value_block_to_expression(node.consequent, transform_context);
 	if (!consequent) return null;
@@ -4257,14 +5244,14 @@ function if_statement_to_jsx_child(node, transform_context) {
  * @returns {any | null}
  */
 function render_if_statement_to_conditional_expression(node) {
-	if (!node || node.type !== 'IfStatement') return null;
+	if (!is_if_control_node(node)) return null;
 
 	const consequent = block_statement_to_return_expression(node.consequent);
 	if (!consequent) return null;
 
 	let alternate = create_null_literal();
 	if (node.alternate) {
-		if (node.alternate.type === 'IfStatement') {
+		if (is_if_control_node(node.alternate)) {
 			alternate = render_if_statement_to_conditional_expression(node.alternate);
 			if (!alternate) return null;
 		} else {
@@ -4301,25 +5288,11 @@ function block_statement_to_return_expression(block) {
 /**
  * Find the first `key` attribute expression in the top-level elements of a body.
  * Used to propagate keys from loop body elements to wrapper components.
- * Works on both pre-transform (Ripple Element) and post-transform (JSXElement) nodes.
- *
  * @param {any[]} body_nodes
  * @returns {any | undefined}
  */
 function find_key_expression_in_body(body_nodes) {
 	for (const node of body_nodes) {
-		// Pre-transform: Ripple Element node
-		if (node.type === 'Element') {
-			for (const attr of node.attributes || []) {
-				if (attr.type === 'Attribute') {
-					const attr_name = typeof attr.name === 'string' ? attr.name : attr.name?.name;
-					if (attr_name === 'key') {
-						return attr.value?.expression ?? attr.value;
-					}
-				}
-			}
-		}
-		// Post-transform: JSXElement node
 		if (node.type === 'JSXElement') {
 			for (const attr of node.openingElement?.attributes || []) {
 				if (
@@ -4344,7 +5317,7 @@ function find_key_expression_in_body(body_nodes) {
  * @returns {any}
  */
 function continue_to_bare_return(source_node) {
-	const node = set_loc(b.return(null), source_node);
+	const node = set_loc(b.return(create_null_literal()), source_node);
 	node.metadata = {
 		...(node.metadata || {}),
 		generated_loop_continue_return: true,
@@ -4354,8 +5327,9 @@ function continue_to_bare_return(source_node) {
 
 /**
  * `continue` in a component `for...of` body means "skip this item". JSX targets
- * lower `for...of` to callbacks, so a raw ContinueStatement would be invalid JS;
- * a bare `return` from the callback preserves the item-skip behavior.
+ * lower `for...of` to callbacks, so a raw ContinueStatement would be invalid JS.
+ * Returning null from the callback preserves the item-skip behavior while still
+ * producing an explicit "render nothing" value for JSX runtimes.
  *
  * @param {any[] | any} node
  * @param {boolean} [is_root]
@@ -4363,7 +5337,9 @@ function continue_to_bare_return(source_node) {
  */
 export function rewrite_loop_continues_to_bare_returns(node, is_root = true) {
 	if (Array.isArray(node)) {
-		return node.map((child) => rewrite_loop_continues_to_bare_returns(child, false));
+		return node.map((child) =>
+			rewrite_loop_continues_to_bare_returns(child, is_root && !is_loop_statement(child)),
+		);
 	}
 
 	if (!node || typeof node !== 'object') {
@@ -4388,6 +5364,181 @@ export function rewrite_loop_continues_to_bare_returns(node, is_root = true) {
 	return node;
 }
 
+/**
+ * @param {any[] | any} node
+ * @param {TransformContext} transform_context
+ * @param {boolean} [is_root]
+ */
+function validate_for_body_control_flow(node, transform_context, is_root = true) {
+	if (Array.isArray(node)) {
+		for (const child of node) {
+			validate_for_body_control_flow(
+				child,
+				transform_context,
+				is_root && !is_loop_statement(child),
+			);
+		}
+		return;
+	}
+
+	if (!node || typeof node !== 'object') {
+		return;
+	}
+
+	if (is_template_if_node(node)) {
+		return;
+	}
+
+	if (node.type === 'ReturnStatement') {
+		error(
+			TSRX_FOR_RETURN_ERROR,
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+		return;
+	}
+	if (node.type === 'BreakStatement') {
+		error(
+			TSRX_FOR_BREAK_ERROR,
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+		return;
+	}
+	if (node.type === 'ContinueStatement') {
+		error(
+			TSRX_FOR_CONTINUE_ERROR,
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+		return;
+	}
+
+	if (is_function_or_class_boundary(node) || (!is_root && is_loop_statement(node))) {
+		return;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		validate_for_body_control_flow(node[key], transform_context, false);
+	}
+}
+
+/**
+ * @param {any[] | any} node
+ * @param {TransformContext} transform_context
+ */
+function validate_if_body_control_flow(node, transform_context) {
+	if (Array.isArray(node)) {
+		for (const child of node) {
+			validate_if_body_control_flow(child, transform_context);
+		}
+		return;
+	}
+
+	if (!node || typeof node !== 'object') {
+		return;
+	}
+
+	if (node.type === 'ReturnStatement') {
+		error(
+			TSRX_IF_RETURN_ERROR,
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+		return;
+	}
+	if (node.type === 'BreakStatement') {
+		error(
+			TSRX_IF_BREAK_ERROR,
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+		return;
+	}
+	if (node.type === 'ContinueStatement') {
+		error(
+			TSRX_IF_CONTINUE_ERROR,
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+		return;
+	}
+
+	if (is_function_or_class_boundary(node)) {
+		return;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		validate_if_body_control_flow(node[key], transform_context);
+	}
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_if_node(node) {
+	return (
+		node?.type === 'JSXIfExpression' ||
+		node?.metadata?.tsrxDirective === 'if' ||
+		(node?.type === 'IfStatement' && node?.statementType === 'IfStatement')
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_for_of_node(node) {
+	return (
+		node?.type === 'JSXForExpression' ||
+		node?.metadata?.tsrxDirective === 'for' ||
+		(node?.type === 'ForOfStatement' && node?.statementType === 'ForOfStatement')
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_switch_node(node) {
+	return (
+		node?.type === 'JSXSwitchExpression' ||
+		node?.metadata?.tsrxDirective === 'switch' ||
+		(node?.type === 'SwitchStatement' && node?.statementType === 'SwitchStatement')
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_try_node(node) {
+	return (
+		node?.type === 'JSXTryExpression' ||
+		node?.metadata?.tsrxDirective === 'try' ||
+		(node?.type === 'TryStatement' && node?.statementType === 'TryStatement')
+	);
+}
+
 /**
  * @param {any} node
  * @returns {boolean}
@@ -4395,8 +5546,11 @@ export function rewrite_loop_continues_to_bare_returns(node, is_root = true) {
 function is_loop_statement(node) {
 	return (
 		node?.type === 'ForOfStatement' ||
+		(node?.type === 'JSXForExpression' && node.statementType === 'ForOfStatement') ||
 		node?.type === 'ForStatement' ||
+		(node?.type === 'JSXForExpression' && node.statementType === 'ForStatement') ||
 		node?.type === 'ForInStatement' ||
+		(node?.type === 'JSXForExpression' && node.statementType === 'ForInStatement') ||
 		node?.type === 'WhileStatement' ||
 		node?.type === 'DoWhileStatement'
 	);
@@ -4420,10 +5574,9 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 
 	const loop_params = get_for_of_iteration_params(node.left, node.index);
 	const loop_body = /** @type {any[]} */ (
-		rewrite_loop_continues_to_bare_returns(
-			node.body.type === 'BlockStatement' ? node.body.body : [node.body],
-		)
+		node.body.type === 'BlockStatement' ? node.body.body : [node.body]
 	);
+	validate_for_body_control_flow(loop_body, transform_context);
 	const has_hooks =
 		should_extract_hook_helpers(transform_context) &&
 		body_contains_top_level_hook_call(loop_body, transform_context, true);
@@ -4478,17 +5631,49 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 	transform_context.available_bindings = saved_bindings;
 
 	const iter_callback = b.arrow(loop_params, b.block(body_statements));
+	const empty_fallback = node.empty
+		? b.call(
+				b.arrow(
+					[],
+					b.block(
+						build_render_statements(
+							node.empty.type === 'BlockStatement' ? node.empty.body : [node.empty],
+							true,
+							transform_context,
+						),
+					),
+					false,
+					undefined,
+					node.empty,
+				),
+			)
+		: null;
 
 	if (transform_context.platform.imports.forOfIterableHelper) {
 		transform_context.needs_for_of_iterable = true;
+		const args = [node.right, iter_callback];
+		if (empty_fallback) {
+			args.push(b.literal(null), b.arrow([], empty_fallback));
+		}
+		return to_jsx_expression_container(b.call(b.id(MAP_ITERABLE_INTERNAL_NAME), ...args));
+	}
+
+	const map_call = b.call(b.member(node.right, create_generated_identifier('map')), iter_callback);
+	if (empty_fallback) {
 		return to_jsx_expression_container(
-			b.call(b.id(MAP_ITERABLE_INTERNAL_NAME), node.right, iter_callback),
+			b.conditional(
+				b.binary(
+					'===',
+					b.member(clone_expression_node(node.right), create_generated_identifier('length')),
+					b.literal(0),
+				),
+				empty_fallback,
+				map_call,
+			),
 		);
 	}
 
-	return to_jsx_expression_container(
-		b.call(b.member(node.right, create_generated_identifier('map')), iter_callback),
-	);
+	return to_jsx_expression_container(map_call);
 }
 
 /**
@@ -4498,25 +5683,6 @@ function for_of_statement_to_jsx_child(node, transform_context) {
  */
 function apply_key_to_loop_body(body_nodes, key_expression) {
 	for (const node of body_nodes) {
-		if (node.type === 'Element') {
-			const attributes = node.attributes || (node.attributes = []);
-			const has_key = attributes.some((/** @type {any} */ attr) => {
-				const attr_name = typeof attr.name === 'string' ? attr.name : attr.name?.name;
-				return attr_name === 'key';
-			});
-
-			if (!has_key) {
-				attributes.push({
-					type: 'Attribute',
-					name: b.id('key'),
-					value: clone_expression_node(key_expression),
-					shorthand: false,
-					metadata: { path: [] },
-				});
-			}
-			return;
-		}
-
 		if (node.type === 'JSXElement') {
 			const attributes = node.openingElement?.attributes || [];
 			const has_key = attributes.some(
@@ -4546,7 +5712,7 @@ function apply_key_to_loop_body(body_nodes, key_expression) {
 function should_apply_key_to_loop_body(body_nodes) {
 	let keyable_children = 0;
 	for (const node of body_nodes) {
-		if (node.type === 'Element' || node.type === 'JSXElement') {
+		if (node.type === 'JSXElement') {
 			keyable_children += 1;
 		}
 	}
@@ -4636,11 +5802,11 @@ function switch_statement_to_jsx_child(node, transform_context) {
 }
 
 /**
- * Transform a `try { ... } pending { ... } catch (err, reset) { ... }` block
+ * Transform an `@try { ... } @pending { ... } @catch (err, reset) { ... }` block
  * into React `<TsrxErrorBoundary>` and/or `<Suspense>` JSX elements.
  *
- * - `pending` → `<Suspense fallback={...}>`
- * - `catch` → `<TsrxErrorBoundary fallback={(err, reset) => ...}>`
+ * - `@pending` → `<Suspense fallback={...}>`
+ * - `@catch` → `<TsrxErrorBoundary fallback={(err, reset) => ...}>`
  * - both → ErrorBoundary wraps Suspense
  * - JavaScript `try/finally` is not part of component template control flow
  *
@@ -4684,30 +5850,6 @@ function try_statement_to_jsx_child(node, transform_context) {
 		);
 	}
 
-	// Validate that try body contains JSX if pending block is present
-	if (pending) {
-		const try_body = node.block.body || [];
-		if (!try_body.some(is_jsx_child)) {
-			error(
-				'TSRX try statements must contain a template in their main body. Move the try statement into a function if it does not render anything.',
-				transform_context.filename,
-				node.block,
-				transform_context.errors,
-				transform_context.comments,
-			);
-		}
-		const pending_body = pending.body || [];
-		if (pending_body.length > 0 && !pending_body.some(is_jsx_child)) {
-			error(
-				'TSRX try statements must contain a template in their "pending" body. Rendering a pending fallback is required to have a template.',
-				transform_context.filename,
-				pending,
-				transform_context.errors,
-				transform_context.comments,
-			);
-		}
-	}
-
 	// Build the try body content as JSX children
 	const try_body_nodes = node.block.body || [];
 	const try_content = statement_body_to_jsx_child(try_body_nodes, transform_context);
@@ -4860,8 +6002,8 @@ function create_jsx_element(tag_name, attributes, children) {
 
 /**
  * Inject runtime-helper import declarations the transform decided it needed
- * during the walk: `Suspense` for `try { ... } pending { ... }`,
- * `TsrxErrorBoundary` for `try { ... } catch (...)`, and `mergeRefs` for
+ * during the walk: `Suspense` for `@try { ... } @pending { ... }`,
+ * `TsrxErrorBoundary` for `@try { ... } @catch (...)`, and `mergeRefs` for
  * elements with multiple `ref` attributes under the `'merge-refs'`
  * strategy. Import sources are platform-specific.
  *
@@ -4975,16 +6117,22 @@ function add_ref_import_specifier(imports, source, specifier) {
 function create_render_if_statement(node, transform_context) {
 	const consequent_body =
 		node.consequent.type === 'BlockStatement' ? node.consequent.body : [node.consequent];
+	if (is_template_if_node(node)) {
+		validate_if_body_control_flow(consequent_body, transform_context);
+	}
 	const consequent_has_hooks =
 		should_extract_hook_helpers(transform_context) &&
 		body_contains_top_level_hook_call(consequent_body, transform_context, true);
 
 	let alternate = null;
 	if (node.alternate) {
-		if (node.alternate.type === 'IfStatement') {
+		if (is_if_control_node(node.alternate)) {
 			alternate = create_render_if_statement(node.alternate, transform_context);
 		} else {
 			const alternate_body = node.alternate.body || [node.alternate];
+			if (is_template_if_node(node)) {
+				validate_if_body_control_flow(alternate_body, transform_context);
+			}
 			const alternate_has_hooks =
 				should_extract_hook_helpers(transform_context) &&
 				body_contains_top_level_hook_call(alternate_body, transform_context, true);
@@ -5021,9 +6169,8 @@ function create_render_if_statement(node, transform_context) {
  * case body needs to be hoisted into its own helper component or can stay
  * inline.
  *
- * `own_body` is everything in the case's `consequent` up to (and including for
- * `return <expr>`, excluding for `break` / bare `return;`) the first
- * terminator. `has_terminator` records whether such a terminator was seen.
+ * `own_body` is the case's isolated consequent. JSX `@switch` cases do not
+ * fall through, so `break` is not part of the template switch model.
  *
  * @param {any[]} consequent
  * @returns {{ own_body: any[], has_terminator: boolean }}
@@ -5032,10 +6179,6 @@ function summarize_switch_case_body(consequent) {
 	const own_body = [];
 	let has_terminator = false;
 	for (const child of consequent) {
-		if (child.type === 'BreakStatement') {
-			has_terminator = true;
-			break;
-		}
 		if (child.type === 'ReturnStatement' && child.argument == null) {
 			has_terminator = true;
 			break;
@@ -5068,11 +6211,10 @@ export function clone_switch_helper_invocation(helper) {
 
 /**
  * Plan the switch lift: decide which case bodies to hoist into their own
- * helper components, build them in reverse so each helper can chain into the
- * next, and return everything callers need to construct a target-specific
- * switch shape (a JS `switch` for React/Preact/Vue or `<Switch>/<Match>` for
- * Solid). Centralizes the lift bookkeeping so both consumers see the same
- * hook-detection rules, duplication analysis, and helper-id numbering.
+ * helper components and return everything callers need to construct a
+ * target-specific switch shape (a JS `switch` for React/Preact/Vue or
+ * `<Switch>/<Match>` for Solid). JSX `@switch` cases are isolated and do not
+ * fall through.
  *
  * Returned helpers — when non-null — are already constructed via
  * `create_hook_safe_helper`, which is the same path hook-bearing case bodies
@@ -5086,7 +6228,6 @@ export function clone_switch_helper_invocation(helper) {
  * @returns {{
  *   case_info: Array<{ own_body: any[], has_terminator: boolean }>,
  *   case_helpers: Array<{ setup_statements: any[], component_element: ESTreeJSX.JSXElement } | null>,
- *   find_next_helper_after: (from_index: number) => { component_element: ESTreeJSX.JSXElement } | null,
  *   setup_statements: any[],
  * }}
  */
@@ -5096,22 +6237,15 @@ export function plan_switch_lift(switch_node, transform_context) {
 		return summarize_switch_case_body(consequent);
 	});
 
-	// A case body needs to be lifted iff (a) it would render in more than one
-	// arm after fall-through expansion, or (b) it contains hooks (which always
-	// went through the lift pipeline before this change). Duplication happens
-	// exactly when the previous case has no terminator — that's the only way
-	// an earlier arm can reach this body via JS fall-through semantics.
+	// A case body needs to be lifted iff it contains hooks. Cases are isolated,
+	// so downstream case bodies are never duplicated into earlier arms.
 	const needs_helper = case_info.map(
-		(/** @type {{ own_body: any[], has_terminator: boolean }} */ info, /** @type {number} */ k) => {
+		(/** @type {{ own_body: any[], has_terminator: boolean }} */ info) => {
 			if (info.own_body.length === 0) return false;
-			if (
+			return (
 				should_extract_hook_helpers(transform_context) &&
 				body_contains_top_level_hook_call(info.own_body, transform_context, true)
-			) {
-				return true;
-			}
-			if (k === 0) return false;
-			return !case_info[k - 1].has_terminator;
+			);
 		},
 	);
 
@@ -5128,37 +6262,12 @@ export function plan_switch_lift(switch_node, transform_context) {
 	/** @type {Array<{ setup_statements: any[], component_element: ESTreeJSX.JSXElement } | null>} */
 	const case_helpers = new Array(switch_node.cases.length).fill(null);
 
-	/**
-	 * Find the next downstream helper this arm chains into when it has no
-	 * terminator: scan forward past any empty cases until we hit either a
-	 * helper-bearing case or a case whose body has a terminator (which stops
-	 * the chain — JS would have `break`/`return`ed out at that point).
-	 *
-	 * @param {number} from_index
-	 * @returns {{ component_element: ESTreeJSX.JSXElement } | null}
-	 */
-	function find_next_helper_after(from_index) {
-		for (let j = from_index + 1; j < switch_node.cases.length; j++) {
-			if (case_helpers[j]) return case_helpers[j];
-			if (case_info[j].has_terminator) return null;
-		}
-		return null;
-	}
-
 	for (let i = switch_node.cases.length - 1; i >= 0; i--) {
 		if (!needs_helper[i]) continue;
-		const { own_body, has_terminator } = case_info[i];
-
-		let helper_body = own_body;
-		if (!has_terminator) {
-			const next_helper = find_next_helper_after(i);
-			if (next_helper) {
-				helper_body = [...own_body, clone_switch_helper_invocation(next_helper)];
-			}
-		}
+		const { own_body } = case_info[i];
 
 		case_helpers[i] = create_hook_safe_helper(
-			helper_body,
+			own_body,
 			undefined,
 			switch_node.cases[i],
 			transform_context,
@@ -5176,40 +6285,17 @@ export function plan_switch_lift(switch_node, transform_context) {
 	return {
 		case_info,
 		case_helpers,
-		find_next_helper_after,
 		setup_statements,
 	};
 }
 
 /**
- * Switch lift for fall-through deduplication. Reuses the same `create_hook_safe_helper`
- * pipeline as hook-bearing case bodies: every case whose body would otherwise
- * appear in 2+ arms (because the previous case had no `break` / `return`) is
- * hoisted into its own helper component, and each upstream arm references the
- * next helper at the end of its own body to materialize JS fall-through at
- * render time. Cases whose bodies live in exactly one arm stay inline so the
- * common (break-terminated) shape compiles to the same simple switch as before
- * the lift was introduced.
- *
- * The chain pattern:
- *   helper_idle  = () => <><Online/><Helper_active/></>
- *   helper_active = () => <><Away/><Helper_offline/></>
- *   helper_offline = () => <Offline/>
- *
- *   case "idle":    return <Helper_idle/>
- *   case "active":  return <Helper_active/>
- *   case "offline": return <Helper_offline/>
- *
- * Each case body appears exactly once in the generated module — matching how
- * we already handle hook-bearing case bodies — which keeps the bundle from
- * growing quadratically in case count and means editor mappings are 1:1.
- *
  * @param {any} switch_node
  * @param {TransformContext} transform_context
  * @returns {{ setup_statements: any[], switch_statement: any }}
  */
 function build_switch_with_lift(switch_node, transform_context) {
-	const { case_info, case_helpers, find_next_helper_after, setup_statements } = plan_switch_lift(
+	const { case_info, case_helpers, setup_statements } = plan_switch_lift(
 		switch_node,
 		transform_context,
 	);
@@ -5229,10 +6315,10 @@ function build_switch_with_lift(switch_node, transform_context) {
 			const { own_body, has_terminator } = case_info[i];
 
 			if (own_body.length === 0 && !has_terminator) {
-				// Alias-pattern empty case (`case 'a': case 'b': ...`) — keep
-				// the arm body empty so JS falls through to the next case at
-				// runtime, where the helper invocation actually lives.
-				return set_loc(b.switch_case(original_case.test, []), original_case);
+				return set_loc(
+					b.switch_case(original_case.test, [create_null_return_statement()]),
+					original_case,
+				);
 			}
 
 			const case_body = [];
@@ -5250,7 +6336,7 @@ function build_switch_with_lift(switch_node, transform_context) {
 					has_terminal = true;
 					break;
 				}
-				if (is_jsx_child(child)) {
+				if (is_render_child_node(child)) {
 					render_nodes.push(to_jsx_child(child, transform_context));
 				} else if (is_bare_render_expression(child)) {
 					render_nodes.push(to_jsx_expression_container(child, child));
@@ -5259,27 +6345,13 @@ function build_switch_with_lift(switch_node, transform_context) {
 				}
 			}
 
-			if (!has_terminal && !has_terminator) {
-				const next_helper = find_next_helper_after(i);
-				if (next_helper) {
-					render_nodes.push(clone_switch_helper_invocation(next_helper));
-				}
-			}
-
 			if (!has_terminal) {
 				if (render_nodes.length > 0) {
 					case_body.push(create_component_return_statement(render_nodes, original_case));
-				} else if (has_terminator) {
-					// Empty body with explicit `break;` / bare `return;` — keep
-					// a `break` so JS doesn't fall through into the next case
-					// (which may now hold the lifted helper invocation).
-					case_body.push(b.break);
 				} else if (case_body.length > 0) {
-					// Statements-only inline case without terminator. We've
-					// already inlined the downstream chain via the helper
-					// reference above, so emit a `break` to stop the runtime
-					// from re-running downstream statements via JS fall-through.
-					case_body.push(b.break);
+					case_body.push(create_null_return_statement());
+				} else if (has_terminator) {
+					case_body.push(create_null_return_statement());
 				}
 			}
 
@@ -5356,12 +6428,12 @@ function transform_element_attributes_dispatch(attrs, transform_context, element
  * @returns {boolean}
  */
 export function is_component_like_element(element) {
-	const id = element?.id;
-	if (!id) return false;
-	if (id.type === 'Identifier') return /^[A-Z]/.test(id.name);
-	if (id.type === 'JSXIdentifier') return /^[A-Z]/.test(id.name);
-	if (id.type === 'MemberExpression') return true;
-	if (id.type === 'JSXMemberExpression') return true;
+	const name = element?.openingElement?.name;
+	if (!name) return false;
+	if (name.type === 'Identifier') return /^[A-Z]/.test(name.name);
+	if (name.type === 'JSXIdentifier') return /^[A-Z]/.test(name.name);
+	if (name.type === 'MemberExpression') return true;
+	if (name.type === 'JSXMemberExpression') return true;
 	return false;
 }
 
@@ -5514,10 +6586,7 @@ function wrap_jsx_setup_declarations(expression, in_jsx_child) {
 /**
  * Reject elements with more than one TSX-style `ref={...}` attribute.
  * This validator runs over the raw, pre-lowering attribute list so each
- * shape is still distinguishable by `type`. Ripple `Element` attributes have type `Attribute` with an
- * `Identifier` name (the parser normalizes `JSXAttribute`/`JSXIdentifier`
- * for native elements); inside `<tsx:react>` compat blocks they retain
- * the original `JSXAttribute`/`JSXIdentifier` shape, so we accept both.
+ * shape is still distinguishable by `type`.
  *
  * @param {any[]} raw_attrs
  * @param {TransformContext} [transform_context]
@@ -5528,14 +6597,10 @@ export function validate_at_most_one_ref_attribute(raw_attrs, transform_context)
 	for (const attr of raw_attrs) {
 		if (!attr) continue;
 		const is_ref_attr =
-			(attr.type === 'Attribute' &&
-				attr.name &&
-				attr.name.type === 'Identifier' &&
-				attr.name.name === 'ref') ||
-			(attr.type === 'JSXAttribute' &&
-				attr.name &&
-				attr.name.type === 'JSXIdentifier' &&
-				attr.name.name === 'ref');
+			attr.type === 'JSXAttribute' &&
+			attr.name &&
+			attr.name.type === 'JSXIdentifier' &&
+			attr.name.name === 'ref';
 		if (!is_ref_attr) continue;
 		refs.push(attr.name);
 	}
@@ -5747,8 +6812,6 @@ function infer_ref_namespace(tag_name) {
  * @returns {string | null}
  */
 function get_element_ref_tag_name(element) {
-	const id = element?.id;
-	if (id?.type === 'Identifier') return id.name;
 	const name = element?.name;
 	if (name?.type === 'JSXIdentifier') return name.name;
 	if (element?.openingElement?.name?.type === 'JSXIdentifier') {
@@ -5784,15 +6847,6 @@ export function to_jsx_attribute(attr, transform_context) {
 	if (attr.type === 'JSXSpreadAttribute') {
 		return attr;
 	}
-	if (attr.type === 'SpreadAttribute') {
-		return set_loc(
-			/** @type {any} */ ({
-				type: 'JSXSpreadAttribute',
-				argument: attr.argument,
-			}),
-			attr,
-		);
-	}
 	// Keep this legacy hook for targets that need React-style DOM attrs. The
 	// current first-party targets preserve authored `class`.
 	let attr_name = attr.name;
@@ -5841,53 +6895,6 @@ function value_has_unmappable_jsx_loc(value) {
 	);
 }
 
-/**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @returns {ESTreeJSX.JSXExpressionContainer}
- */
-function dynamic_element_to_jsx_child(node, transform_context) {
-	const dynamic_id = set_loc(create_generated_identifier('DynamicElement'), node.id);
-	const alias_declaration = set_loc(b.const(dynamic_id, clone_expression_node(node.id)), node);
-	const jsx_element = create_dynamic_jsx_element(dynamic_id, node, transform_context);
-
-	return to_jsx_expression_container(
-		b.call(
-			b.arrow(
-				[],
-				b.block([
-					alias_declaration,
-					b.return(b.conditional(clone_identifier(dynamic_id), jsx_element, create_null_literal())),
-				]),
-			),
-		),
-		node,
-	);
-}
-
-/**
- * @param {AST.Identifier} dynamic_id
- * @param {any} node
- * @param {TransformContext} transform_context
- * @returns {ESTreeJSX.JSXElement}
- */
-function create_dynamic_jsx_element(dynamic_id, node, transform_context) {
-	const attributes = transform_element_attributes_dispatch(
-		node.attributes || [],
-		transform_context,
-		node,
-	);
-	const selfClosing = !!node.selfClosing;
-	const children = create_element_children(node.children || [], transform_context);
-	const name = identifier_to_jsx_name(clone_identifier(dynamic_id));
-
-	return b.jsx_element_fresh(
-		b.jsx_opening_element(name, attributes, selfClosing),
-		selfClosing ? null : b.jsx_closing_element(clone_jsx_name(name)),
-		children,
-	);
-}
-
 /**
  * @param {any[]} render_nodes
  * @returns {any}
@@ -5899,6 +6906,10 @@ function build_return_expression(render_nodes) {
 		if (only.type === 'JSXExpressionContainer') {
 			return only.expression;
 		}
+		if (only.type === 'JSXText') {
+			const value = (only.value ?? '').trim();
+			return b.literal(value, JSON.stringify(value), only);
+		}
 		return only;
 	}
 	const first = render_nodes[0];
@@ -5917,25 +6928,3 @@ function build_return_expression(render_nodes) {
 			: undefined,
 	);
 }
-
-/**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @param {boolean} [in_jsx_child]
- * @returns {any}
- */
-function tsx_compat_node_to_jsx_expression(node, transform_context, in_jsx_child = false) {
-	const platform = transform_context.platform;
-	if (!platform.jsx.acceptedTsxKinds.includes(node.kind)) {
-		const accepted = platform.jsx.acceptedTsxKinds.map((k) => `<tsx:${k}>`).join(', ');
-		error(
-			`${platform.name} TSRX does not support <tsx:${node.kind}> blocks. Use one of: ${accepted}.`,
-			transform_context.filename,
-			node,
-			transform_context.errors,
-			transform_context.comments,
-		);
-	}
-
-	return tsx_node_to_jsx_expression(node, in_jsx_child);
-}