eclipsa 0.1.3 → 0.1.5

package/{action-CgM3EJUS.mjs → action-DqgkV3zb.mjs}

@@ -1,4 +1,4 @@
-import { i as jsxDEV, n as isSSRAttrValue, r as isSSRTemplate } from "./jsx-dev-runtime-CY60yQJY.mjs";
+import { a as jsxDEV, i as isSSRTemplate, n as isSSRAttrValue, r as isSSRRawValue } from "./jsx-dev-runtime-DpbWQ4Q0.mjs";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -20,6 +20,15 @@ const noSerialize = (value) => {
 };
 const isNoSerialize = (value) => canNoSerialize(value) && noSerializeValues.has(value);
 //#endregion
+//#region core/shared.ts
+const IS_BROWSER = typeof window !== "undefined" && typeof document !== "undefined";
+const IS_SSR = !IS_BROWSER;
+const isPlainObject = (value) => {
+	if (!value || typeof value !== "object") return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+};
+//#endregion
 //#region core/serialize.ts
 const DEFAULT_MAX_DEPTH = 64;
 const DEFAULT_MAX_ENTRIES = 1e4;
@@ -28,11 +37,6 @@ const RESERVED_KEYS = new Set([
 	"constructor",
 	"prototype"
 ]);
-const isPlainObject$2 = (value) => {
-	if (!value || typeof value !== "object") return false;
-	const proto = Object.getPrototypeOf(value);
-	return proto === Object.prototype || proto === null;
-};
 const getSerializedObjectTag = (value) => Object.prototype.toString.call(value);
 const getSerializedConstructorName = (value) => {
 	const constructor = value.constructor;
@@ -143,7 +147,7 @@ const serializeUnknown = (value, state, stack, depth) => {
 				entries: [...value].map((entry) => serializeUnknown(entry, state, stack, depth + 1))
 			};
 		}
-		if (isPlainObject$2(value)) {
+		if (isPlainObject(value)) {
 			assertSafeObject(value);
 			const descriptors = Object.entries(value);
 			state.entryCount += descriptors.length + 1;
@@ -248,9 +252,8 @@ const APP_HOOKS_ELEMENT_ID = "eclipsa-app-hooks";
 const PUBLIC_ERROR_KEY = Symbol.for("eclipsa.public-error");
 let requestContextStorage = null;
 let clientHooks = {};
-const isBrowserRuntime = () => typeof window !== "undefined" && typeof document !== "undefined";
 const getAsyncLocalStorageConstructor = () => {
-	if (isBrowserRuntime() || typeof process === "undefined") return null;
+	if (IS_BROWSER || typeof process === "undefined") return null;
 	const asyncHooks = process.getBuiltinModule?.("node:async_hooks");
 	return typeof asyncHooks?.AsyncLocalStorage === "function" ? asyncHooks.AsyncLocalStorage : null;
 };
@@ -260,11 +263,6 @@ const getRequestContextStorage = () => {
 	requestContextStorage ??= new AsyncLocalStorageCtor();
 	return requestContextStorage;
 };
-const isPlainObject$1 = (value) => {
-	if (!value || typeof value !== "object") return false;
-	const proto = Object.getPrototypeOf(value);
-	return proto === Object.prototype || proto === null;
-};
 const normalizePublicError = (value) => {
 	if (value && typeof value === "object") {
 		const message = value.message;
@@ -357,7 +355,7 @@ const resolveReroute = (reroute, request, pathname, baseUrl) => {
 	if (!resolved) return pathname;
 	return (resolved instanceof URL ? resolved : new URL(String(resolved), url)).pathname;
 };
-const toPublicError = (error) => error && typeof error === "object" && error[PUBLIC_ERROR_KEY] && isPlainObject$1(error[PUBLIC_ERROR_KEY]) ? error[PUBLIC_ERROR_KEY] : normalizePublicError(error);
+const toPublicError = (error) => error && typeof error === "object" && error[PUBLIC_ERROR_KEY] && isPlainObject(error[PUBLIC_ERROR_KEY]) ? error[PUBLIC_ERROR_KEY] : normalizePublicError(error);
 const markPublicError = (error, publicError) => {
 	if (!error || typeof error !== "object" && typeof error !== "function") return error;
 	Object.defineProperty(error, PUBLIC_ERROR_KEY, {
@@ -586,6 +584,17 @@ const renderRouteMetadataHead = (metadata) => {
 	return elements;
 };
 //#endregion
+//#region core/router-shared.ts
+const ROUTE_LINK_ATTR = "data-e-link";
+const ROUTE_DATA_ENDPOINT = "/__eclipsa/route-data";
+const ROUTE_DATA_REQUEST_HEADER = "x-eclipsa-route-data";
+const ROUTE_MANIFEST_ELEMENT_ID = "eclipsa-route-manifest";
+const ROUTE_PREFETCH_ATTR = "data-e-link-prefetch";
+const ROUTE_PREFLIGHT_ENDPOINT = "/__eclipsa/route-preflight";
+const ROUTE_PREFLIGHT_REQUEST_HEADER = "x-eclipsa-route-preflight";
+const ROUTE_RPC_URL_HEADER = "x-eclipsa-route-url";
+const ROUTE_REPLACE_ATTR = "data-e-link-replace";
+//#endregion
 //#region core/loader.ts
 var loader_exports = /* @__PURE__ */ __exportAll({
 	__eclipsaLoader: () => __eclipsaLoader,
@@ -678,8 +687,12 @@ const parseJsonLoaderResponse = async (response) => {
 	return deserializePublicValue(body.value);
 };
 const invokeLoader = async (id) => {
+	const currentRouteUrl = typeof window !== "undefined" ? window.location.href : null;
 	return parseJsonLoaderResponse(await fetch(`/__eclipsa/loader/${encodeURIComponent(id)}`, {
-		headers: { accept: LOADER_CONTENT_TYPE },
+		headers: {
+			accept: LOADER_CONTENT_TYPE,
+			...currentRouteUrl ? { [ROUTE_RPC_URL_HEADER]: currentRouteUrl } : {}
+		},
 		method: "GET"
 	}));
 };
@@ -812,6 +825,7 @@ const __eclipsaLoader = (id, middlewares, handler) => {
 //#endregion
 //#region core/internal.ts
 const COMPONENT_META_KEY = Symbol.for("eclipsa.component-meta");
+const EXTERNAL_COMPONENT_META_KEY = Symbol.for("eclipsa.external-component-meta");
 const LAZY_META_KEY = Symbol.for("eclipsa.lazy-meta");
 const NAVIGATE_META_KEY = Symbol.for("eclipsa.navigate-meta");
 const SIGNAL_META_KEY = Symbol.for("eclipsa.signal-meta");
@@ -829,6 +843,7 @@ const __eclipsaComponent = (component, symbol, captures, projectionSlots, option
 		value: {
 			symbol,
 			captures,
+			...options?.external ? { external: options.external } : {},
 			...options?.optimizedRoot ? { optimizedRoot: true } : {},
 			...projectionSlots ? { projectionSlots } : {}
 		},
@@ -875,6 +890,19 @@ const getLazyMeta = (value) => {
 	if (typeof value !== "function") return null;
 	return value[LAZY_META_KEY] ?? null;
 };
+const setExternalComponentMeta = (target, meta) => {
+	Object.defineProperty(target, EXTERNAL_COMPONENT_META_KEY, {
+		configurable: true,
+		enumerable: false,
+		value: meta,
+		writable: true
+	});
+	return target;
+};
+const getExternalComponentMeta = (value) => {
+	if (typeof value !== "function") return null;
+	return value[EXTERNAL_COMPONENT_META_KEY] ?? null;
+};
 const setNavigateMeta = (target) => {
 	Object.defineProperty(target, NAVIGATE_META_KEY, {
 		configurable: true,
@@ -1005,17 +1033,7 @@ const getSignalMeta = (value) => {
 	return value[SIGNAL_META_KEY] ?? null;
 };
 //#endregion
-//#region core/router-shared.ts
-const ROUTE_LINK_ATTR = "data-e-link";
-const ROUTE_DATA_ENDPOINT = "/__eclipsa/route-data";
-const ROUTE_DATA_REQUEST_HEADER = "x-eclipsa-route-data";
-const ROUTE_MANIFEST_ELEMENT_ID = "eclipsa-route-manifest";
-const ROUTE_PREFETCH_ATTR = "data-e-link-prefetch";
-const ROUTE_PREFLIGHT_ENDPOINT = "/__eclipsa/route-preflight";
-const ROUTE_PREFLIGHT_REQUEST_HEADER = "x-eclipsa-route-preflight";
-const ROUTE_REPLACE_ATTR = "data-e-link-replace";
-//#endregion
-//#region core/runtime.ts
+//#region core/runtime/constants.ts
 const CONTAINER_STACK_KEY = Symbol.for("eclipsa.container-stack");
 const CONTEXT_VALUE_STACK_KEY = Symbol.for("eclipsa.context-value-stack");
 const FRAME_STACK_KEY = Symbol.for("eclipsa.frame-stack");
@@ -1047,15 +1065,18 @@ const RENDER_REFERENCE_KIND = "render";
 const REF_SIGNAL_ATTR = "data-e-ref";
 const STREAM_STATE_KEY = "__eclipsa_stream";
 const PENDING_RESUME_LINK_KEY = "__eclipsa_pending_route_link";
-const BIND_VALUE_PROP = "bind:value";
-const BIND_CHECKED_PROP = "bind:checked";
 const BIND_VALUE_ATTR = "data-e-bind-value";
 const BIND_CHECKED_ATTR = "data-e-bind-checked";
 const CLIENT_INSERT_OWNER_SYMBOL = "$client-insert-root";
 const CLIENT_INSERT_OWNER_ID_PREFIX = "$insert:";
-const DOM_TEXT_NODE = 3;
-const DOM_COMMENT_NODE = 8;
-const DOM_SHOW_COMMENT = 128;
+const EXTERNAL_ROOT_ATTR = "data-e-external-root";
+const EXTERNAL_ROOT_COMPONENT_ATTR = "data-e-external-component";
+const EXTERNAL_ROOT_KIND_ATTR = "data-e-external-kind";
+const getExternalSlotTag = (_kind) => "e-slot-host";
+//#endregion
+//#region core/runtime/dom.ts
+const managedElementAttributes = /* @__PURE__ */ new WeakMap();
+const insertMarkerNodeCounts = /* @__PURE__ */ new WeakMap();
 const getDomContexts = (value) => {
 	const contexts = [];
 	if (!value || typeof value !== "object" && typeof value !== "function") return contexts;
@@ -1086,34 +1107,6 @@ const isHTMLTextAreaElementNode = (value) => isDomInstance(value, "HTMLTextAreaE
 const isTextEntryElement = (value) => isHTMLInputElementNode(value) || isHTMLTextAreaElementNode(value);
 const isHTMLAnchorElementNode = (value) => isDomInstance(value, "HTMLAnchorElement");
 const isHTMLFormElementNode = (value) => isDomInstance(value, "HTMLFormElement");
-const COMPONENT_BOUNDARY_PROPS_CHANGED = Symbol.for("eclipsa.component-boundary-props-changed");
-const COMPONENT_BOUNDARY_SYMBOL_CHANGED = Symbol.for("eclipsa.component-boundary-symbol-changed");
-const isMissingGeneratedScopeReferenceError = (error) => error instanceof ReferenceError && /\b__scope\b/.test(error.message);
-const toRuntimeError = (error) => error instanceof Error ? error : new Error(typeof error === "string" ? error : String(error));
-const areShallowEqualRenderProps = (previous, next) => {
-	if (previous === next) return true;
-	if (!previous || !next) return !previous && !next;
-	const previousKeys = Object.keys(previous);
-	const nextKeys = Object.keys(next);
-	if (previousKeys.length !== nextKeys.length) return false;
-	for (const key of previousKeys) if (!Object.hasOwn(next, key) || !Object.is(previous[key], next[key])) return false;
-	for (const hiddenKey of [ROUTE_PARAMS_PROP, ROUTE_ERROR_PROP]) {
-		const previousHas = Object.hasOwn(previous, hiddenKey);
-		if (previousHas !== Object.hasOwn(next, hiddenKey)) return false;
-		if (previousHas && !Object.is(previous[hiddenKey], next[hiddenKey])) return false;
-	}
-	return true;
-};
-const wrapGeneratedScopeReferenceError = (error, context) => {
-	const baseError = toRuntimeError(error);
-	if (!isMissingGeneratedScopeReferenceError(baseError)) return baseError;
-	const location = [context.componentId ? `component "${context.componentId}"` : null, context.symbolId ? `symbol "${context.symbolId}"` : null].filter(Boolean).join(", ");
-	const wrapped = new Error(`Eclipsa runtime failed while ${context.phase}${location ? ` ${location}` : ""}. The generated resumable symbol referenced "__scope" outside its valid scope. This usually means a same-file helper was transformed incorrectly during symbol compilation. Inline that helper into the component as a workaround. Original error: ${baseError.message}`, { cause: baseError });
-	wrapped.name = "EclipsaRuntimeError";
-	return wrapped;
-};
-const resolvedRuntimeSymbols = /* @__PURE__ */ new WeakMap();
-const managedElementAttributes = /* @__PURE__ */ new WeakMap();
 const listNodeChildren = (node) => Array.from(node?.childNodes ?? []);
 const getElementAttributeNames = (element) => {
 	const withGetAttributeNames = element;
@@ -1142,21 +1135,6 @@ const hasElementAttribute = (element, name) => {
 	if (attributes instanceof Map) return attributes.has(name);
 	return null;
 };
-const insertMarkerNodeCounts = /* @__PURE__ */ new WeakMap();
-const getResolvedRuntimeSymbols = (container) => {
-	const existing = resolvedRuntimeSymbols.get(container);
-	if (existing) return existing;
-	const created = /* @__PURE__ */ new Map();
-	resolvedRuntimeSymbols.set(container, created);
-	return created;
-};
-const invalidateRuntimeSymbolCaches = (container, symbolIds) => {
-	const resolved = getResolvedRuntimeSymbols(container);
-	for (const symbolId of symbolIds) {
-		container.imports.delete(symbolId);
-		resolved.delete(symbolId);
-	}
-};
 const cloneManagedAttributeSnapshot = (element) => new Set(getElementAttributeNames(element));
 const replaceManagedAttributeSnapshot = (element, names) => {
 	managedElementAttributes.set(element, new Set(names));
@@ -1187,20 +1165,148 @@ const rememberInsertMarkerRange = (marker, nodes) => {
 	for (const _node of nodes) count += 1;
 	insertMarkerNodeCounts.set(marker, count);
 };
-const withResumeHmrTimestamp = (url, timestamp) => {
-	const parsed = new URL(url, "http://localhost");
-	parsed.searchParams.set("t", timestamp.toString());
-	return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+const getRememberedInsertMarkerNodeCount = (marker) => marker ? insertMarkerNodeCounts.get(marker) ?? 0 : 0;
+const setRememberedInsertMarkerNodeCount = (marker, count) => {
+	insertMarkerNodeCounts.set(marker, count);
 };
-const canBustRuntimeSymbolUrl = (url) => parseSymbolIdFromUrl(url) !== null;
-const bustRuntimeSymbolUrls = (container, symbolIds, timestamp) => {
-	for (const symbolId of symbolIds) {
-		const current = container.symbols.get(symbolId);
-		if (!current || !canBustRuntimeSymbolUrl(current)) continue;
-		container.symbols.set(symbolId, withResumeHmrTimestamp(current, timestamp));
+const getBoundaryChildren = (start, end) => {
+	const nodes = [];
+	let cursor = start.nextSibling;
+	while (cursor && cursor !== end) {
+		nodes.push(cursor);
+		cursor = cursor.nextSibling;
 	}
+	return nodes;
 };
-const isRenderObject = (value) => typeof value === "object" && value !== null && "type" in value && "props" in value;
+const getNodePath = (root, target) => {
+	if (root === target) return [];
+	const path = [];
+	let cursor = target;
+	while (cursor && cursor !== root) {
+		const parent = cursor.parentNode;
+		if (!parent) return null;
+		const index = Array.prototype.indexOf.call(parent.childNodes, cursor);
+		if (index < 0) return null;
+		path.unshift(index);
+		cursor = parent;
+	}
+	return cursor === root ? path : null;
+};
+const getNodeByPath = (root, path) => {
+	let cursor = root;
+	for (const index of path) {
+		const childNodes = cursor ? cursor.childNodes ?? void 0 : void 0;
+		cursor = (childNodes && ("item" in childNodes ? childNodes.item(index) : childNodes[index] ?? null)) ?? null;
+		if (!cursor) return null;
+	}
+	return cursor;
+};
+const getElementPath = (root, target) => {
+	if (root === target) return [];
+	const path = [];
+	let cursor = target;
+	while (cursor && cursor !== root) {
+		const parent = cursor.parentElement;
+		if (!parent) return null;
+		const index = Array.prototype.indexOf.call(parent.children, cursor);
+		if (index < 0) return null;
+		path.unshift(index);
+		cursor = parent;
+	}
+	return cursor === root ? path : null;
+};
+const getElementByPath = (root, path) => {
+	let cursor = root;
+	for (const index of path) {
+		const children = cursor ? cursor.children ?? void 0 : void 0;
+		cursor = (children && ("item" in children ? children.item(index) : children[index] ?? null)) ?? null;
+		if (!cursor) return null;
+	}
+	return cursor;
+};
+const restoreFocusTarget = (doc, nextActive, snapshot) => {
+	const restore = () => {
+		if (!nextActive.isConnected) return false;
+		nextActive.focus({ preventScroll: true });
+		if (isTextEntryElement(nextActive) && snapshot.selectionStart !== null && snapshot.selectionStart !== void 0) nextActive.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd ?? snapshot.selectionStart, snapshot.selectionDirection ?? void 0);
+		return doc.activeElement === nextActive;
+	};
+	if (restore()) return;
+	const win = doc.defaultView;
+	if (!win) return;
+	let remainingAttempts = 3;
+	const retry = () => {
+		if (remainingAttempts <= 0) return;
+		remainingAttempts--;
+		const run = () => {
+			if (restore()) return;
+			retry();
+		};
+		if (typeof win.requestAnimationFrame === "function") {
+			win.requestAnimationFrame(() => run());
+			return;
+		}
+		win.setTimeout(run, 16);
+	};
+	retry();
+};
+const captureBoundaryFocus = (doc, start, end) => {
+	const activeElement = doc.activeElement;
+	if (!isHTMLElementNode(activeElement)) return null;
+	const topLevelNodes = getBoundaryChildren(start, end);
+	for (let index = 0; index < topLevelNodes.length; index += 1) {
+		const candidate = topLevelNodes[index];
+		if (candidate !== activeElement && (!isElementNode(candidate) || !candidate.contains(activeElement))) continue;
+		const innerPath = getNodePath(candidate, activeElement);
+		if (!innerPath) continue;
+		return {
+			path: [index, ...innerPath],
+			selectionDirection: isTextEntryElement(activeElement) ? activeElement.selectionDirection : null,
+			selectionEnd: isTextEntryElement(activeElement) ? activeElement.selectionEnd : null,
+			selectionStart: isTextEntryElement(activeElement) ? activeElement.selectionStart : null
+		};
+	}
+	return null;
+};
+const restoreBoundaryFocus = (doc, start, end, snapshot) => {
+	if (!snapshot) return;
+	const [topLevelIndex, ...innerPath] = snapshot.path;
+	const root = getBoundaryChildren(start, end)[topLevelIndex];
+	if (!root) return;
+	const nextActive = innerPath.length > 0 ? getNodeByPath(root, innerPath) : root;
+	if (!isHTMLElementNode(nextActive)) return;
+	restoreFocusTarget(doc, nextActive, snapshot);
+};
+const captureDocumentFocus = (doc, focusSource) => {
+	const candidate = isHTMLElementNode(focusSource) ? focusSource : isHTMLElementNode(doc.activeElement) ? doc.activeElement : null;
+	if (!candidate) return null;
+	const path = getElementPath(doc.body, candidate);
+	if (!path) return null;
+	return {
+		path,
+		selectionDirection: isTextEntryElement(candidate) ? candidate.selectionDirection : null,
+		selectionEnd: isTextEntryElement(candidate) ? candidate.selectionEnd : null,
+		selectionStart: isTextEntryElement(candidate) ? candidate.selectionStart : null
+	};
+};
+const shouldSkipPendingFocusRestore = (doc, pending) => {
+	const activeElement = doc.activeElement;
+	if (!isHTMLElementNode(activeElement)) return false;
+	if (activeElement === doc.body || !activeElement.isConnected || !doc.body.contains(activeElement)) return false;
+	const activePath = getElementPath(doc.body, activeElement);
+	if (!activePath) return false;
+	if (activePath.length !== pending.snapshot.path.length) return true;
+	return activePath.some((index, position) => index !== pending.snapshot.path[position]);
+};
+const restorePendingFocus$1 = (doc, pending) => {
+	if (!pending) return;
+	if (shouldSkipPendingFocusRestore(doc, pending)) return;
+	const nextActive = getElementByPath(doc.body, pending.snapshot.path);
+	if (!isHTMLElementNode(nextActive)) return;
+	restoreFocusTarget(doc, nextActive, pending.snapshot);
+};
+//#endregion
+//#region core/runtime/globals.ts
 const getContainerStack = () => {
 	const globalRecord = globalThis;
 	const existing = globalRecord[CONTAINER_STACK_KEY];
@@ -1245,58 +1351,19 @@ const getAsyncSignalSnapshotCache = () => {
 	globalRecord[ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY] = created;
 	return created;
 };
-const readAsyncSignalSnapshot = (id, container = getCurrentContainer()) => container?.asyncSignalStates.get(id) ?? container?.asyncSignalSnapshotCache.get(id) ?? getAsyncSignalSnapshotCache().get(id);
-const writeAsyncSignalSnapshot = (id, value, container = getCurrentContainer()) => {
+const readAsyncSignalSnapshot$1 = (id, container) => container?.asyncSignalStates.get(id) ?? container?.asyncSignalSnapshotCache.get(id) ?? getAsyncSignalSnapshotCache().get(id);
+const writeAsyncSignalSnapshot$1 = (id, value, container) => {
 	container?.asyncSignalStates.set(id, value);
 	container?.asyncSignalSnapshotCache.set(id, value);
 	if (!container) getAsyncSignalSnapshotCache().set(id, value);
 };
-const getCurrentFrame = () => {
-	const stack = getFrameStack();
-	return stack.length > 0 ? stack[stack.length - 1] : null;
-};
-const shouldReconnectDetachedInsertMarkers = (container) => {
-	const frame = getCurrentFrame();
-	if (!container || !frame || frame.container !== container) return true;
-	return frame.projectionState.reuseExistingDom;
-};
-const hasScopedStyles = (frame) => !!frame && frame.scopedStyles.length > 0;
-const getScopedStyleRootSelector = (scopeId) => `[${SCOPED_STYLE_ATTR}="${escapeAttr(scopeId)}"]`;
-const wrapScopedStyleCss = (scopeId, cssText) => `@scope (${getScopedStyleRootSelector(scopeId)}) {\n${cssText}\n}`;
-const renderScopedStyleString = (scopeId, style) => {
-	const attrParts = Object.entries(style.attributes).filter(([, value]) => value !== false && value !== void 0 && value !== null).map(([name, value]) => value === true ? name : `${name}="${escapeAttr(String(value))}"`);
-	return `<style${attrParts.length > 0 ? ` ${attrParts.join(" ")}` : ""}>${escapeText(wrapScopedStyleCss(scopeId, style.cssText))}</style>`;
-};
-const renderScopedStyleNode = (container, scopeId, style) => {
-	const element = createElementNode(container.doc, "style");
-	for (const [name, value] of Object.entries(style.attributes)) {
-		if (value === false || value === void 0 || value === null) continue;
-		if (value === true) {
-			element.setAttribute(name, "");
-			continue;
-		}
-		element.setAttribute(name, String(value));
-	}
-	element.appendChild(container.doc.createTextNode(wrapScopedStyleCss(scopeId, style.cssText)));
-	return element;
-};
-const renderFrameScopedStylesToString = (frame) => frame.scopedStyles.map((style) => renderScopedStyleString(frame.component.scopeId, style)).join("");
-const renderFrameScopedStylesToNodes = (frame, container) => frame.scopedStyles.map((style) => renderScopedStyleNode(container, frame.component.scopeId, style));
-const registerRuntimeScopedStyle = (cssText, attributes = {}) => {
-	const frame = getCurrentFrame();
-	if (!frame || frame.component.id === ROOT_COMPONENT_ID) throw new Error("useStyleScoped() can only be used while rendering a component.");
-	if (cssText.length === 0) return;
-	if (frame.scopedStyles.find((entry) => entry.cssText === cssText && JSON.stringify(entry.attributes) === JSON.stringify(attributes))) return;
-	frame.scopedStyles.push({
-		attributes: { ...attributes },
-		cssText
-	});
-};
-const normalizeRoutePath = (pathname) => {
-	const normalizedPath = pathname.trim() || "/";
-	const withLeadingSlash = normalizedPath.startsWith("/") ? normalizedPath : `/${normalizedPath}`;
-	if (withLeadingSlash.length > 1 && withLeadingSlash.endsWith("/")) return withLeadingSlash.slice(0, -1);
-	return withLeadingSlash;
+//#endregion
+//#region core/runtime/routes.ts
+const normalizeRoutePath = (pathname) => {
+	const normalizedPath = pathname.trim() || "/";
+	const withLeadingSlash = normalizedPath.startsWith("/") ? normalizedPath : `/${normalizedPath}`;
+	if (withLeadingSlash.length > 1 && withLeadingSlash.endsWith("/")) return withLeadingSlash.slice(0, -1);
+	return withLeadingSlash;
 };
 const parseLocationHref = (href) => new URL(href, "http://localhost");
 const createStandaloneLocation = () => ({
@@ -1328,6 +1395,10 @@ const createRouterLocation = (router) => ({
 	}
 });
 const EMPTY_ROUTE_PARAMS = Object.freeze({});
+const ROUTE_DOCUMENT_FALLBACK = Object.freeze({
+	document: true,
+	ok: false
+});
 const splitRoutePath = (pathname) => normalizeRoutePath(pathname).split("/").filter(Boolean);
 const matchRouteSegments = (segments, pathnameSegments, routeIndex = 0, pathIndex = 0, params = {}) => {
 	if (routeIndex >= segments.length) return pathIndex >= pathnameSegments.length ? params : null;
@@ -1377,11 +1448,11 @@ const matchRouteManifest = (manifest, pathname) => {
 	return null;
 };
 const scoreSpecialManifestEntry = (entry, pathname) => {
-	const pathnameSegments = splitRoutePath(pathname);
+	const pathSegments = splitRoutePath(pathname);
 	let score = 0;
-	for (let index = 0; index < entry.segments.length && index < pathnameSegments.length; index += 1) {
+	for (let index = 0; index < entry.segments.length && index < pathSegments.length; index += 1) {
 		const segment = entry.segments[index];
-		const pathnameSegment = pathnameSegments[index];
+		const pathnameSegment = pathSegments[index];
 		if (segment.kind === "static") {
 			if (segment.value !== pathnameSegment) break;
 			score += 10;
@@ -1411,116 +1482,223 @@ const findSpecialManifestEntry = (manifest, pathname, kind) => {
 	}
 	return best;
 };
-const routeCacheKey = (pathname, variant = "page") => `${normalizeRoutePath(pathname)}::${variant}`;
-const routePrefetchKey = (url) => `${normalizeRoutePath(url.pathname)}${url.search}`;
-const isLoaderSignalId = (id) => id.startsWith("$loader:");
-let currentEffect = null;
-let currentCleanupSlot = null;
-const withoutTrackedEffect = (fn) => {
-	const previous = currentEffect;
-	currentEffect = null;
-	try {
-		return fn();
-	} finally {
-		currentEffect = previous;
-	}
+const resolvePageRouteMatch = (manifest, pathname) => {
+	const matched = matchRouteManifest(manifest, pathname);
+	return matched?.entry.page ? matched : null;
 };
-const createCleanupSlot = () => ({ callbacks: [] });
-const withCleanupSlot = (slot, fn) => {
-	const previous = currentCleanupSlot;
-	currentCleanupSlot = slot;
-	try {
-		return fn();
-	} finally {
-		currentCleanupSlot = previous;
-	}
+const resolveNotFoundRouteMatch = (manifest, pathname) => {
+	const matched = findSpecialManifestEntry(manifest, pathname, "notFound");
+	return matched?.entry.notFound ? matched : null;
 };
-const disposeCleanupSlot = (slot) => {
-	if (!slot || slot.callbacks.length === 0) return;
-	const callbacks = [...slot.callbacks].reverse();
-	slot.callbacks.length = 0;
-	let firstError = null;
-	const previous = currentCleanupSlot;
-	currentCleanupSlot = null;
-	try {
-		for (const callback of callbacks) try {
-			withoutTrackedEffect(callback);
-		} catch (error) {
-			firstError ??= error;
-		}
-	} finally {
-		currentCleanupSlot = previous;
-	}
-	if (firstError) throw firstError;
+const resolveRoutableMatch = (manifest, pathname) => {
+	const matched = matchRouteManifest(manifest, pathname);
+	if (matched?.entry.page) return {
+		kind: "page",
+		matched
+	};
+	if (matched) return null;
+	const notFoundMatch = resolveNotFoundRouteMatch(manifest, pathname);
+	if (!notFoundMatch) return null;
+	return {
+		kind: "not-found",
+		matched: notFoundMatch
+	};
 };
-const resetComponentRenderEffects = (component) => {
-	disposeCleanupSlot(component.renderEffectCleanupSlot);
-	component.renderEffectCleanupSlot = createCleanupSlot();
+const resolveCurrentRouteManifestEntry = (router) => {
+	const currentPath = normalizeRoutePath(router.currentPath.value);
+	const matched = matchRouteManifest(router.manifest, currentPath);
+	if (matched?.entry.page) return matched.entry;
+	return findSpecialManifestEntry(router.manifest, currentPath, "notFound")?.entry ?? null;
 };
-const syncEffectOnlyLocalSignalPreference = (component) => {
-	component.prefersEffectOnlyLocalSignalWrites = component.optimizedRoot === true;
+const getRouteModuleUrl = (entry, variant = "page") => variant === "page" ? entry.page : variant === "loading" ? entry.loading : variant === "error" ? entry.error : entry.notFound;
+const isRouteDataSuccess = (body) => body.ok === true && typeof body.finalHref === "string" && typeof body.finalPathname === "string" && (body.kind === "page" || body.kind === "not-found") && !!body.loaders && typeof body.loaders === "object";
+const isRouteSlot = (value) => typeof value === "object" && value !== null && "__eclipsa_type" in value && value.__eclipsa_type === "route-slot";
+const createRouteSlot = (route, startLayoutIndex) => {
+	const slot = {
+		__eclipsa_type: ROUTE_SLOT_TYPE,
+		pathname: route.pathname,
+		startLayoutIndex
+	};
+	Object.defineProperty(slot, ROUTE_SLOT_ROUTE_KEY, {
+		configurable: true,
+		enumerable: false,
+		value: route,
+		writable: true
+	});
+	return slot;
 };
-const clearEffectSignals = (effect) => {
-	for (const signal of effect.signals) signal.effects.delete(effect);
-	effect.signals.clear();
+const resolveRouteSlot = (container, slot) => {
+	const route = slot[ROUTE_SLOT_ROUTE_KEY] ?? container?.router?.loadedRoutes.get(routeCacheKey(slot.pathname, "page"));
+	if (!route) return null;
+	return createRouteElement(route, slot.startLayoutIndex);
 };
-const collectTrackedDependencies = (effect, fn) => {
-	clearEffectSignals(effect);
-	currentEffect = effect;
-	try {
-		fn();
-	} finally {
-		currentEffect = null;
-	}
+const defineHiddenRouteProp = (props, key, value) => {
+	Object.defineProperty(props, key, {
+		configurable: true,
+		enumerable: false,
+		value,
+		writable: true
+	});
 };
-const runWithoutDependencyTracking = (fn) => {
-	const previousEffect = currentEffect;
-	currentEffect = null;
-	try {
-		return fn();
-	} finally {
-		currentEffect = previousEffect;
-	}
+const createRouteRenderProps = (route, props) => {
+	const nextProps = { ...props };
+	defineHiddenRouteProp(nextProps, ROUTE_PARAMS_PROP, route.params);
+	defineHiddenRouteProp(nextProps, ROUTE_ERROR_PROP, route.error);
+	return nextProps;
 };
-const trackWatchDependencies = (dependencies, errorLabel = "useWatch") => {
-	for (const dependency of dependencies) {
-		if (typeof dependency === "function") {
-			dependency();
-			continue;
-		}
-		if (!getSignalMeta(dependency)) throw new TypeError(`${errorLabel} dependencies must be signals or getter functions.`);
-		dependency.value;
+const createRouteElement = (route, startLayoutIndex = 0) => {
+	if (startLayoutIndex >= route.layouts.length) return jsxDEV(route.page.renderer, createRouteRenderProps(route, {}), null, false, {});
+	let children = null;
+	for (let index = route.layouts.length - 1; index >= startLayoutIndex; index -= 1) {
+		const layout = route.layouts[index];
+		children = jsxDEV(layout.renderer, createRouteRenderProps(route, { children: createRouteSlot(route, index + 1) }), null, false, {});
 	}
+	return children;
 };
-const runWatchCallback = (effect, cleanupSlot, fn, dependencies) => {
-	disposeCleanupSlot(cleanupSlot);
-	if (!dependencies) {
-		collectTrackedDependencies(effect, () => {
-			withCleanupSlot(cleanupSlot, fn);
-		});
-		return;
+const routeCacheKey = (pathname, variant = "page") => `${normalizeRoutePath(pathname)}::${variant}`;
+const routePrefetchKey = (url) => `${normalizeRoutePath(url.pathname)}${url.search}`;
+const isLoaderSignalId = (id) => id.startsWith("$loader:");
+//#endregion
+//#region core/runtime/ssr.ts
+const EVENT_PROP_REGEX = /^on([A-Z].+)$/;
+const DANGEROUSLY_SET_INNER_HTML_PROP = "dangerouslySetInnerHTML";
+const TEXT_ESCAPE_REGEX = /[&<>]/;
+const ATTR_ESCAPE_REGEX = /[&<>'"]/;
+const escapeString = (value, mode) => {
+	const escapePattern = mode === "attr" ? ATTR_ESCAPE_REGEX : TEXT_ESCAPE_REGEX;
+	const firstMatch = value.search(escapePattern);
+	if (firstMatch < 0) return value;
+	let output = "";
+	let lastIndex = 0;
+	for (let index = firstMatch; index < value.length; index += 1) {
+		let escaped = null;
+		switch (value.charCodeAt(index)) {
+			case 34:
+				escaped = mode === "attr" ? "&quot;" : null;
+				break;
+			case 38:
+				escaped = "&amp;";
+				break;
+			case 39:
+				escaped = mode === "attr" ? "&#39;" : null;
+				break;
+			case 60:
+				escaped = "&lt;";
+				break;
+			case 62:
+				escaped = "&gt;";
+				break;
+		}
+		if (!escaped) continue;
+		output += value.slice(lastIndex, index);
+		output += escaped;
+		lastIndex = index + 1;
 	}
-	collectTrackedDependencies(effect, () => {
-		trackWatchDependencies(dependencies);
-	});
-	withCleanupSlot(cleanupSlot, fn);
+	return output + value.slice(lastIndex);
 };
-const createLocalWatchRunner = (effect, cleanupSlot, fn, dependencies) => () => {
-	runWatchCallback(effect, cleanupSlot, fn, dependencies);
+const escapeText = (value) => escapeString(value, "text");
+const escapeAttr = (value) => escapeString(value, "attr");
+const resolveDangerouslySetInnerHTML = (value) => value === false || value === void 0 || value === null ? null : String(value);
+const toEventName = (propName) => {
+	const matched = propName.match(EVENT_PROP_REGEX);
+	if (!matched) return null;
+	const [first, ...rest] = matched[1];
+	return `${first.toLowerCase()}${rest.join("")}`;
 };
-const isPlainObject = (value) => {
-	if (!value || typeof value !== "object") return false;
-	const proto = Object.getPrototypeOf(value);
-	return proto === Object.prototype || proto === null;
+const isDangerouslySetInnerHTMLProp = (propName) => propName === DANGEROUSLY_SET_INNER_HTML_PROP;
+const createSSRRenderer = ({ getCurrentContainer, isProjectionSlot, isRouteSlot, renderProjectionSlotToString, renderStringNode, resolveRouteSlot }) => {
+	const renderSSRAttr = (name, value) => {
+		if (name === "key") return "";
+		if (value === false || value === void 0 || value === null) return "";
+		if (value === true) return ` ${name}`;
+		return ` ${name}="${escapeAttr(String(value))}"`;
+	};
+	const renderSSRTemplateNode = (template) => {
+		let output = template.strings[0] ?? "";
+		for (let index = 0; index < template.values.length; index += 1) {
+			const value = template.values[index];
+			output += isSSRAttrValue(value) ? renderSSRAttr(value.name, value.value) : renderSSRValue(value);
+			output += template.strings[index + 1] ?? "";
+		}
+		return output;
+	};
+	const renderStringArray = (values) => {
+		let output = "";
+		for (let index = 0; index < values.length; index += 1) {
+			const value = values[index];
+			if (Array.isArray(value)) {
+				output += renderStringArray(value);
+				continue;
+			}
+			if (value === false || value === null || value === void 0) continue;
+			if (typeof value === "string") {
+				output += escapeText(value);
+				continue;
+			}
+			if (typeof value === "number" || typeof value === "boolean") {
+				output += escapeText(String(value));
+				continue;
+			}
+			if (isSSRRawValue(value)) {
+				output += value.value;
+				continue;
+			}
+			if (isSSRTemplate(value)) {
+				output += renderSSRTemplateNode(value);
+				continue;
+			}
+			if (isProjectionSlot(value)) {
+				output += renderProjectionSlotToString(value);
+				continue;
+			}
+			if (isRouteSlot(value)) {
+				const routeElement = resolveRouteSlot(getCurrentContainer(), value);
+				if (routeElement) output += renderStringNode(routeElement);
+				continue;
+			}
+			output += renderStringNode(value);
+		}
+		return output;
+	};
+	const renderSSRValue = (value) => {
+		if (value === false || value === null || value === void 0) return "";
+		if (Array.isArray(value)) return renderStringArray(value);
+		if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return escapeText(String(value));
+		if (isSSRRawValue(value)) return value.value;
+		if (isSSRTemplate(value)) return renderSSRTemplateNode(value);
+		if (isProjectionSlot(value)) return renderProjectionSlotToString(value);
+		if (isRouteSlot(value)) {
+			const routeElement = resolveRouteSlot(getCurrentContainer(), value);
+			return routeElement ? renderStringNode(routeElement) : "";
+		}
+		return renderStringNode(value);
+	};
+	const renderSSRMap = (value, renderItem) => {
+		if (Array.isArray(value)) {
+			let output = "";
+			for (let index = 0; index < value.length; index += 1) {
+				if (!(index in value)) continue;
+				output += renderItem(value[index], index);
+			}
+			return output;
+		}
+		return value.map(renderItem).join("");
+	};
+	return {
+		renderSSRAttr,
+		renderSSRValue,
+		renderSSRMap
+	};
 };
-const isProjectionSlot = (value) => isPlainObject(value) && value.__eclipsa_type === PROJECTION_SLOT_TYPE;
-const createProjectionSlot = (componentId, name, occurrence, source) => ({
-	__eclipsa_type: PROJECTION_SLOT_TYPE,
-	componentId,
-	name,
-	occurrence,
-	source
-});
+//#endregion
+//#region core/runtime/markers.ts
+const COMPONENT_BOUNDARY_PROPS_CHANGED = Symbol.for("eclipsa.component-boundary-props-changed");
+const COMPONENT_BOUNDARY_SYMBOL_CHANGED = Symbol.for("eclipsa.component-boundary-symbol-changed");
+const INSERT_MARKER_PREFIX = "ec:i:";
+const COMPONENT_BOUNDARY_MARKER_REGEX = /^ec:c:(.+):(start|end)$/;
+const KEYED_RANGE_MARKER_REGEX = /^ec:k:([^:]+):([^:]+):(start|end)$/;
+const PROJECTION_SLOT_MARKER_REGEX = /^ec:s:([^:]+):([^:]+):(\d+):(start|end)$/;
+const INSERT_MARKER_REGEX = /^ec:i:(.+)$/;
 const encodeProjectionSlotName = (value) => encodeURIComponent(value);
 const decodeProjectionSlotName = (value) => decodeURIComponent(value);
 const encodeKeyedRangeToken = (value) => encodeURIComponent(String(value));
@@ -1531,12 +1709,28 @@ const decodeKeyedRangeToken = (value) => {
 		return value;
 	}
 };
-const createProjectionSlotMarker = (componentId, name, occurrence, kind) => `ec:s:${componentId}:${encodeProjectionSlotName(name)}:${occurrence}:${kind}`;
-const createKeyedRangeMarker = (value, kind) => `ec:k:${encodeKeyedRangeToken(value)}:${kind}`;
-const COMPONENT_BOUNDARY_MARKER_REGEX = /^ec:c:(.+):(start|end)$/;
-const INSERT_MARKER_REGEX = /^ec:i:(.+)$/;
-const KEYED_RANGE_MARKER_REGEX = /^ec:k:([^:]+):(start|end)$/;
-const PROJECTION_SLOT_MARKER_REGEX = /^ec:s:([^:]+):([^:]+):(\d+):(start|end)$/;
+const createComponentBoundaryMarker = (componentId, kind) => `ec:c:${componentId}:${kind}`;
+const createComponentBoundaryHtmlComment = (componentId, kind) => `<!--${createComponentBoundaryMarker(componentId, kind)}-->`;
+const setComponentBoundaryChangeFlags = (start, options) => {
+	start[COMPONENT_BOUNDARY_PROPS_CHANGED] = options?.propsChanged === true;
+	start[COMPONENT_BOUNDARY_SYMBOL_CHANGED] = options?.symbolChanged === true;
+};
+const didComponentBoundaryPropsChange = (start) => Boolean(start[COMPONENT_BOUNDARY_PROPS_CHANGED]);
+const didComponentBoundarySymbolChange = (start) => Boolean(start[COMPONENT_BOUNDARY_SYMBOL_CHANGED]);
+const didComponentBoundaryChange = (start) => didComponentBoundaryPropsChange(start) || didComponentBoundarySymbolChange(start);
+const createComponentBoundaryPair = (doc, componentId, options) => {
+	const start = doc.createComment(createComponentBoundaryMarker(componentId, "start"));
+	const end = doc.createComment(createComponentBoundaryMarker(componentId, "end"));
+	setComponentBoundaryChangeFlags(start, options);
+	return {
+		end,
+		start
+	};
+};
+const createProjectionSlotRangeKey = (componentId, name, occurrence) => `${componentId}:${encodeProjectionSlotName(name)}:${occurrence}`;
+const createProjectionSlotMarker = (componentId, name, occurrence, kind) => `ec:s:${createProjectionSlotRangeKey(componentId, name, occurrence)}:${kind}`;
+const createKeyedRangeMarker = (scope, value, kind) => `ec:k:${encodeKeyedRangeToken(scope)}:${encodeKeyedRangeToken(value)}:${kind}`;
+const createInsertMarker = (key) => `${INSERT_MARKER_PREFIX}${key}`;
 const parseComponentBoundaryMarker = (value) => {
 	const matched = value.match(COMPONENT_BOUNDARY_MARKER_REGEX);
 	if (!matched) return null;
@@ -1550,8 +1744,8 @@ const parseProjectionSlotMarker = (value) => {
 	if (!matched) return null;
 	return {
 		componentId: matched[1],
+		key: createProjectionSlotRangeKey(matched[1], decodeProjectionSlotName(matched[2]), Number(matched[3])),
 		kind: matched[4],
-		key: `${matched[1]}:${matched[2]}:${matched[3]}`,
 		name: decodeProjectionSlotName(matched[2]),
 		occurrence: Number(matched[3])
 	};
@@ -1560,8 +1754,9 @@ const parseKeyedRangeMarker = (value) => {
 	const matched = value.match(KEYED_RANGE_MARKER_REGEX);
 	if (!matched) return null;
 	return {
-		key: decodeKeyedRangeToken(matched[1]),
-		kind: matched[2]
+		scope: decodeKeyedRangeToken(matched[1]),
+		key: decodeKeyedRangeToken(matched[2]),
+		kind: matched[3]
 	};
 };
 const parseInsertMarker = (value) => {
@@ -1569,274 +1764,512 @@ const parseInsertMarker = (value) => {
 	if (!matched) return null;
 	return { key: matched[1] };
 };
-const getRenderComponentTypeRef = (value) => {
-	if (typeof value !== "function") return null;
-	return value[RENDER_COMPONENT_TYPE_KEY] ?? null;
-};
-const createMaterializedRenderComponentType = (container, symbol, scopeId) => {
-	const component = __eclipsaComponent(((props) => {
-		const module = getResolvedRuntimeSymbols(container).get(symbol);
-		if (!module) throw new Error(`Missing preloaded render component symbol ${symbol}.`);
-		return module.default(materializeScope(container, scopeId), props);
-	}), symbol, () => materializeScope(container, scopeId));
-	Object.defineProperty(component, RENDER_COMPONENT_TYPE_KEY, {
-		configurable: true,
-		enumerable: false,
-		value: {
-			scopeId,
-			symbol
-		},
-		writable: true
-	});
-	return component;
-};
-const serializeRenderObjectReference = (container, value) => {
-	if (typeof value.type === "function" && !getComponentMeta(value.type)) {
-		const resolved = resolveRenderable(value.type(value.props));
-		if (!isRenderObject(resolved)) throw new TypeError("Only resumable component render objects can be serialized.");
-		return serializeRenderObjectReference(container, resolved);
-	}
-	const evaluatedProps = evaluateProps(value.props);
-	const key = value.key ?? null;
-	const metadata = value.metadata ?? null;
-	if (typeof value.type === "string") return {
-		__eclipsa_type: "ref",
-		data: [
-			"element",
-			value.type,
-			null,
-			serializeRuntimeValue(container, evaluatedProps),
-			serializeRuntimeValue(container, key),
-			value.isStatic,
-			serializeRuntimeValue(container, metadata)
-		],
-		kind: RENDER_REFERENCE_KIND,
-		token: "jsx"
+//#endregion
+//#region core/runtime/serialization.ts
+const createRuntimeSerialization = ({ createProjectionSlot, ensureRouterState, ensureRuntimeElementId, evaluateProps, findRuntimeElement, getResolvedRuntimeSymbols, isPlainObject, isProjectionSlot, isRenderObject, isRouteSlot, loadSymbol, materializeScope, materializeSymbolReference, registerScope, registerSerializedScope, resolveRenderable }) => {
+	const getRenderComponentTypeRef = (value) => {
+		if (typeof value !== "function") return null;
+		return value[RENDER_COMPONENT_TYPE_KEY] ?? null;
 	};
-	const meta = getComponentMeta(value.type);
-	if (!meta) throw new TypeError("Only resumable component render objects can be serialized.");
-	return {
-		__eclipsa_type: "ref",
-		data: [
-			"component",
-			meta.symbol,
-			registerScope(container, meta.captures()),
-			serializeRuntimeValue(container, evaluatedProps),
-			serializeRuntimeValue(container, key),
-			value.isStatic,
-			serializeRuntimeValue(container, metadata)
-		],
-		kind: RENDER_REFERENCE_KIND,
-		token: "jsx"
+	const createMaterializedRenderComponentType = (container, symbol, scopeId) => {
+		const component = __eclipsaComponent(((props) => {
+			const module = getResolvedRuntimeSymbols(container).get(symbol);
+			if (!module) throw new Error(`Missing preloaded render component symbol ${symbol}.`);
+			return module.default(materializeScope(container, scopeId), props);
+		}), symbol, () => materializeScope(container, scopeId));
+		Object.defineProperty(component, RENDER_COMPONENT_TYPE_KEY, {
+			configurable: true,
+			enumerable: false,
+			value: {
+				scopeId,
+				symbol
+			},
+			writable: true
+		});
+		return component;
 	};
-};
-const deserializeRenderObjectReference = (container, data) => {
-	if (!Array.isArray(data) || data.length !== 7) throw new TypeError("Render references require a seven-part payload.");
-	const [variant, typeValue, scopeValue, propsValue, keyValue, isStaticValue, metadataValue] = data;
-	if (variant !== "element" && variant !== "component") throw new TypeError(`Unsupported render reference variant "${String(variant)}".`);
-	if (typeof isStaticValue !== "boolean") throw new TypeError("Render references require a boolean static flag.");
-	const props = deserializeRuntimeValue(container, propsValue);
-	const key = deserializeRuntimeValue(container, keyValue);
-	const metadata = deserializeRuntimeValue(container, metadataValue);
-	if (!props || typeof props !== "object") throw new TypeError("Render references require object props.");
-	if (variant === "element") {
-		if (typeof typeValue !== "string") throw new TypeError("Element render references require a string tag name.");
+	const serializeRenderObjectReference = (container, value) => {
+		if (typeof value.type === "function" && !getComponentMeta(value.type)) {
+			const resolved = resolveRenderable(value.type(value.props));
+			if (!isRenderObject(resolved)) throw new TypeError("Only resumable component render objects can be serialized.");
+			return serializeRenderObjectReference(container, resolved);
+		}
+		const evaluatedProps = evaluateProps(value.props);
+		const key = value.key ?? null;
+		const isStatic = value.isStatic === true;
+		const metadata = value.metadata ?? null;
+		if (typeof value.type === "string") return {
+			__eclipsa_type: "ref",
+			data: [
+				"element",
+				value.type,
+				null,
+				serializeRuntimeValue(container, evaluatedProps),
+				serializeRuntimeValue(container, key),
+				isStatic,
+				serializeRuntimeValue(container, metadata)
+			],
+			kind: RENDER_REFERENCE_KIND,
+			token: "jsx"
+		};
+		const meta = getComponentMeta(value.type);
+		if (!meta) throw new TypeError("Only resumable component render objects can be serialized.");
 		return {
-			isStatic: isStaticValue,
+			__eclipsa_type: "ref",
+			data: [
+				"component",
+				meta.symbol,
+				registerScope(container, meta.captures()),
+				serializeRuntimeValue(container, evaluatedProps),
+				serializeRuntimeValue(container, key),
+				isStatic,
+				serializeRuntimeValue(container, metadata)
+			],
+			kind: RENDER_REFERENCE_KIND,
+			token: "jsx"
+		};
+	};
+	const deserializeRenderObjectReference = (container, data) => {
+		if (!Array.isArray(data) || data.length !== 7) throw new TypeError("Render references require a seven-part payload.");
+		const [variant, typeValue, scopeValue, propsValue, keyValue, isStaticValue, metadataValue] = data;
+		if (variant !== "element" && variant !== "component") throw new TypeError(`Unsupported render reference variant "${String(variant)}".`);
+		if (typeof isStaticValue !== "boolean" && isStaticValue !== null && isStaticValue !== void 0) throw new TypeError("Render references require a boolean static flag.");
+		const isStatic = isStaticValue === true;
+		const props = deserializeRuntimeValue(container, propsValue);
+		const key = deserializeRuntimeValue(container, keyValue);
+		const metadata = deserializeRuntimeValue(container, metadataValue);
+		if (!props || typeof props !== "object") throw new TypeError("Render references require object props.");
+		if (variant === "element") {
+			if (typeof typeValue !== "string") throw new TypeError("Element render references require a string tag name.");
+			return {
+				isStatic,
+				key: key ?? void 0,
+				metadata: metadata ?? void 0,
+				props,
+				type: typeValue
+			};
+		}
+		if (typeof typeValue !== "string" || typeof scopeValue !== "string") throw new TypeError("Component render references require a symbol id and scope id.");
+		return {
+			isStatic,
 			key: key ?? void 0,
 			metadata: metadata ?? void 0,
 			props,
-			type: typeValue
+			type: createMaterializedRenderComponentType(container, typeValue, scopeValue)
 		};
-	}
-	if (typeof typeValue !== "string" || typeof scopeValue !== "string") throw new TypeError("Component render references require a symbol id and scope id.");
+	};
+	const preloadResumableValue = async (container, value, seen = /* @__PURE__ */ new Set()) => {
+		if (value === null || value === void 0 || value === false) return;
+		if (seen.has(value)) return;
+		if (typeof value === "function") {
+			const renderComponentRef = getRenderComponentTypeRef(value);
+			if (!renderComponentRef) return;
+			seen.add(value);
+			await loadSymbol(container, renderComponentRef.symbol);
+			for (const capturedValue of materializeScope(container, renderComponentRef.scopeId)) await preloadResumableValue(container, capturedValue, seen);
+			return;
+		}
+		if (Array.isArray(value)) {
+			seen.add(value);
+			for (const entry of value) await preloadResumableValue(container, entry, seen);
+			return;
+		}
+		if (typeof Node !== "undefined" && value instanceof Node) return;
+		if (isProjectionSlot(value)) return;
+		if (isRenderObject(value)) {
+			seen.add(value);
+			await preloadResumableValue(container, value.type, seen);
+			await preloadResumableValue(container, evaluateProps(value.props), seen);
+			return;
+		}
+		if (!isPlainObject(value)) return;
+		seen.add(value);
+		for (const entry of Object.values(value)) await preloadResumableValue(container, entry, seen);
+	};
+	const serializeRuntimeValue = (container, value) => serializePublicValue(value, { serializeReference(candidate) {
+		const signalMeta = getSignalMeta(candidate);
+		if (signalMeta) return {
+			__eclipsa_type: "ref",
+			kind: "signal",
+			token: signalMeta.id
+		};
+		if (getNavigateMeta(candidate)) return {
+			__eclipsa_type: "ref",
+			kind: "navigate",
+			token: "navigate"
+		};
+		const actionMeta = getActionHandleMeta(candidate);
+		if (actionMeta) return {
+			__eclipsa_type: "ref",
+			kind: "action",
+			token: actionMeta.id
+		};
+		const actionHookMeta = getActionHookMeta(candidate);
+		if (actionHookMeta) return {
+			__eclipsa_type: "ref",
+			kind: "action-hook",
+			token: actionHookMeta.id
+		};
+		const loaderMeta = getLoaderHandleMeta(candidate);
+		if (loaderMeta) return {
+			__eclipsa_type: "ref",
+			kind: "loader",
+			token: loaderMeta.id
+		};
+		const loaderHookMeta = getLoaderHookMeta(candidate);
+		if (loaderHookMeta) return {
+			__eclipsa_type: "ref",
+			kind: "loader-hook",
+			token: loaderHookMeta.id
+		};
+		const contextReference = getRuntimeContextReference(candidate);
+		if (contextReference) return {
+			__eclipsa_type: "ref",
+			data: serializeRuntimeValue(container, {
+				defaultValue: contextReference.defaultValue,
+				hasDefault: contextReference.hasDefault
+			}),
+			kind: contextReference.kind,
+			token: contextReference.id
+		};
+		if (isRouteSlot(candidate)) return {
+			__eclipsa_type: "ref",
+			data: serializePublicValue(candidate.startLayoutIndex),
+			kind: "route-slot",
+			token: candidate.pathname
+		};
+		if (isProjectionSlot(candidate)) return {
+			__eclipsa_type: "ref",
+			data: serializeRuntimeValue(container, candidate.source),
+			kind: PROJECTION_SLOT_TYPE,
+			token: JSON.stringify([
+				candidate.componentId,
+				candidate.name,
+				candidate.occurrence
+			])
+		};
+		if (isRenderObject(candidate)) return serializeRenderObjectReference(container, candidate);
+		const lazyMeta = getLazyMeta(candidate);
+		if (lazyMeta) return {
+			__eclipsa_type: "ref",
+			data: lazyMeta.captures().map((entry) => serializeRuntimeValue(container, entry)),
+			kind: "symbol",
+			token: lazyMeta.symbol
+		};
+		if (typeof Element !== "undefined" && candidate instanceof Element) return {
+			__eclipsa_type: "ref",
+			kind: "dom",
+			token: ensureRuntimeElementId(container, candidate)
+		};
+		return null;
+	} });
+	const deserializeRuntimeValue = (container, value) => deserializePublicValue(value, { deserializeReference(reference) {
+		if (reference.kind === "navigate") return ensureRouterState(container).navigate;
+		if (reference.kind === "action") {
+			const action = container.actions.get(reference.token);
+			if (!action) throw new Error(`Missing action handle ${reference.token}.`);
+			return action;
+		}
+		if (reference.kind === "action-hook") {
+			const actionHook = getRegisteredActionHook(reference.token);
+			if (!actionHook) throw new Error(`Missing action hook ${reference.token}.`);
+			return actionHook;
+		}
+		if (reference.kind === "loader") {
+			const loader = container.loaders.get(reference.token);
+			if (!loader) throw new Error(`Missing loader handle ${reference.token}.`);
+			return loader;
+		}
+		if (reference.kind === "loader-hook") {
+			const loaderHook = getRegisteredLoaderHook(reference.token);
+			if (!loaderHook) throw new Error(`Missing loader hook ${reference.token}.`);
+			return loaderHook;
+		}
+		if (reference.kind === "context" || reference.kind === "context-provider") {
+			const decoded = reference.data === void 0 ? null : deserializeRuntimeValue(container, reference.data);
+			const hasDefault = decoded?.hasDefault === true;
+			const descriptor = {
+				defaultValue: hasDefault ? decoded?.defaultValue : void 0,
+				hasDefault,
+				id: reference.token
+			};
+			return reference.kind === "context" ? materializeRuntimeContext(descriptor) : materializeRuntimeContextProvider(descriptor);
+		}
+		if (reference.kind === "route-slot") {
+			const startLayoutIndex = reference.data === void 0 ? 0 : deserializePublicValue(reference.data);
+			if (typeof startLayoutIndex !== "number" || !Number.isInteger(startLayoutIndex)) throw new TypeError("Route slot references require an integer start layout index.");
+			return {
+				__eclipsa_type: ROUTE_SLOT_TYPE,
+				pathname: reference.token,
+				startLayoutIndex
+			};
+		}
+		if (reference.kind === "projection-slot") {
+			let componentId = "";
+			let name = "";
+			let occurrence = 0;
+			try {
+				const parsed = JSON.parse(reference.token);
+				if (!Array.isArray(parsed) || parsed.length !== 3 || typeof parsed[0] !== "string" || typeof parsed[1] !== "string" || typeof parsed[2] !== "number") throw new Error("invalid projection slot token");
+				componentId = parsed[0];
+				name = parsed[1];
+				occurrence = parsed[2];
+			} catch {
+				throw new TypeError("Projection slot references require a component id, name, and occurrence.");
+			}
+			return createProjectionSlot(componentId, name, occurrence, deserializeRuntimeValue(container, reference.data));
+		}
+		if (reference.kind === "signal") {
+			const record = container.signals.get(reference.token);
+			if (!record) throw new Error(`Missing signal ${reference.token}.`);
+			return record.handle;
+		}
+		if (reference.kind === "symbol") {
+			if (!reference.data || !Array.isArray(reference.data)) throw new TypeError("Symbol references require an encoded scope array.");
+			const scopeId = registerSerializedScope(container, reference.data);
+			return materializeSymbolReference(container, reference.token, scopeId);
+		}
+		if (reference.kind === "render") return deserializeRenderObjectReference(container, reference.data);
+		if (reference.kind === "dom") {
+			const element = findRuntimeElement(container, reference.token);
+			if (!element) throw new Error(`Missing DOM reference ${reference.token}.`);
+			return element;
+		}
+		throw new TypeError(`Unsupported runtime reference kind "${reference.kind}".`);
+	} });
 	return {
-		isStatic: isStaticValue,
-		key: key ?? void 0,
-		metadata: metadata ?? void 0,
-		props,
-		type: createMaterializedRenderComponentType(container, typeValue, scopeValue)
+		deserializeRuntimeValue,
+		preloadResumableValue,
+		serializeRuntimeValue
 	};
 };
-const preloadResumableValue = async (container, value, seen = /* @__PURE__ */ new Set()) => {
-	if (value === null || value === void 0 || value === false) return;
-	if (seen.has(value)) return;
-	if (typeof value === "function") {
-		const renderComponentRef = getRenderComponentTypeRef(value);
-		if (!renderComponentRef) return;
-		seen.add(value);
-		await loadSymbol(container, renderComponentRef.symbol);
-		for (const capturedValue of materializeScope(container, renderComponentRef.scopeId)) await preloadResumableValue(container, capturedValue, seen);
-		return;
+//#endregion
+//#region core/runtime.ts
+const isMissingGeneratedScopeReferenceError = (error) => error instanceof ReferenceError && /\b__scope\b/.test(error.message);
+const toRuntimeError = (error) => error instanceof Error ? error : new Error(typeof error === "string" ? error : String(error));
+const areShallowEqualRenderProps = (previous, next) => {
+	if (previous === next) return true;
+	if (!previous || !next) return !previous && !next;
+	const previousKeys = Object.keys(previous);
+	const nextKeys = Object.keys(next);
+	if (previousKeys.length !== nextKeys.length) return false;
+	for (const key of previousKeys) if (!Object.hasOwn(next, key) || !Object.is(previous[key], next[key])) return false;
+	for (const hiddenKey of [ROUTE_PARAMS_PROP, ROUTE_ERROR_PROP]) {
+		const previousHas = Object.hasOwn(previous, hiddenKey);
+		if (previousHas !== Object.hasOwn(next, hiddenKey)) return false;
+		if (previousHas && !Object.is(previous[hiddenKey], next[hiddenKey])) return false;
 	}
-	if (Array.isArray(value)) {
-		seen.add(value);
-		for (const entry of value) await preloadResumableValue(container, entry, seen);
-		return;
+	return true;
+};
+const wrapGeneratedScopeReferenceError = (error, context) => {
+	const baseError = toRuntimeError(error);
+	if (!isMissingGeneratedScopeReferenceError(baseError)) return baseError;
+	const location = [context.componentId ? `component "${context.componentId}"` : null, context.symbolId ? `symbol "${context.symbolId}"` : null].filter(Boolean).join(", ");
+	const wrapped = new Error(`Eclipsa runtime failed while ${context.phase}${location ? ` ${location}` : ""}. The generated resumable symbol referenced "__scope" outside its valid scope. This usually means a same-file helper was transformed incorrectly during symbol compilation. Inline that helper into the component as a workaround. Original error: ${baseError.message}`, { cause: baseError });
+	wrapped.name = "EclipsaRuntimeError";
+	return wrapped;
+};
+const resolvedRuntimeSymbols = /* @__PURE__ */ new WeakMap();
+const getResolvedRuntimeSymbols = (container) => {
+	const existing = resolvedRuntimeSymbols.get(container);
+	if (existing) return existing;
+	const created = /* @__PURE__ */ new Map();
+	resolvedRuntimeSymbols.set(container, created);
+	return created;
+};
+const invalidateRuntimeSymbolCaches = (container, symbolIds) => {
+	const resolved = getResolvedRuntimeSymbols(container);
+	for (const symbolId of symbolIds) {
+		container.imports.delete(symbolId);
+		resolved.delete(symbolId);
 	}
-	if (typeof Node !== "undefined" && value instanceof Node) return;
-	if (isProjectionSlot(value)) return;
-	if (isRenderObject(value)) {
-		seen.add(value);
-		await preloadResumableValue(container, value.type, seen);
-		await preloadResumableValue(container, evaluateProps(value.props), seen);
-		return;
+};
+const withResumeHmrTimestamp = (url, timestamp) => {
+	const parsed = new URL(url, "http://localhost");
+	parsed.searchParams.set("t", timestamp.toString());
+	return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+};
+const canBustRuntimeSymbolUrl = (url) => parseSymbolIdFromUrl(url) !== null;
+const bustRuntimeSymbolUrls = (container, symbolIds, timestamp) => {
+	for (const symbolId of symbolIds) {
+		const current = container.symbols.get(symbolId);
+		if (!current || !canBustRuntimeSymbolUrl(current)) continue;
+		container.symbols.set(symbolId, withResumeHmrTimestamp(current, timestamp));
 	}
-	if (!isPlainObject(value)) return;
-	seen.add(value);
-	for (const entry of Object.values(value)) await preloadResumableValue(container, entry, seen);
 };
-const serializeRuntimeValue = (container, value) => serializePublicValue(value, { serializeReference(candidate) {
-	const signalMeta = getSignalMeta(candidate);
-	if (signalMeta) return {
-		__eclipsa_type: "ref",
-		kind: "signal",
-		token: signalMeta.id
-	};
-	if (getNavigateMeta(candidate)) return {
-		__eclipsa_type: "ref",
-		kind: "navigate",
-		token: "navigate"
-	};
-	const actionMeta = getActionHandleMeta(candidate);
-	if (actionMeta) return {
-		__eclipsa_type: "ref",
-		kind: "action",
-		token: actionMeta.id
-	};
-	const actionHookMeta = getActionHookMeta(candidate);
-	if (actionHookMeta) return {
-		__eclipsa_type: "ref",
-		kind: "action-hook",
-		token: actionHookMeta.id
-	};
-	const loaderMeta = getLoaderHandleMeta(candidate);
-	if (loaderMeta) return {
-		__eclipsa_type: "ref",
-		kind: "loader",
-		token: loaderMeta.id
-	};
-	const loaderHookMeta = getLoaderHookMeta(candidate);
-	if (loaderHookMeta) return {
-		__eclipsa_type: "ref",
-		kind: "loader-hook",
-		token: loaderHookMeta.id
-	};
-	const contextReference = getRuntimeContextReference(candidate);
-	if (contextReference) return {
-		__eclipsa_type: "ref",
-		data: serializeRuntimeValue(container, {
-			defaultValue: contextReference.defaultValue,
-			hasDefault: contextReference.hasDefault
-		}),
-		kind: contextReference.kind,
-		token: contextReference.id
-	};
-	if (isRouteSlot(candidate)) return {
-		__eclipsa_type: "ref",
-		data: serializePublicValue(candidate.startLayoutIndex),
-		kind: "route-slot",
-		token: candidate.pathname
-	};
-	if (isProjectionSlot(candidate)) return {
-		__eclipsa_type: "ref",
-		data: serializeRuntimeValue(container, candidate.source),
-		kind: PROJECTION_SLOT_TYPE,
-		token: JSON.stringify([
-			candidate.componentId,
-			candidate.name,
-			candidate.occurrence
-		])
-	};
-	if (isRenderObject(candidate)) return serializeRenderObjectReference(container, candidate);
-	const lazyMeta = getLazyMeta(candidate);
-	if (lazyMeta) return {
-		__eclipsa_type: "ref",
-		data: lazyMeta.captures().map((entry) => serializeRuntimeValue(container, entry)),
-		kind: "symbol",
-		token: lazyMeta.symbol
-	};
-	if (isElementNode(candidate)) return {
-		__eclipsa_type: "ref",
-		kind: "dom",
-		token: ensureRuntimeElementId(container, candidate)
-	};
-	return null;
-} });
-const deserializeRuntimeValue = (container, value) => deserializePublicValue(value, { deserializeReference(reference) {
-	if (reference.kind === "navigate") return ensureRouterState(container).navigate;
-	if (reference.kind === "action") {
-		const action = container.actions.get(reference.token);
-		if (!action) throw new Error(`Missing action handle ${reference.token}.`);
-		return action;
-	}
-	if (reference.kind === "action-hook") {
-		const actionHook = getRegisteredActionHook(reference.token);
-		if (!actionHook) throw new Error(`Missing action hook ${reference.token}.`);
-		return actionHook;
-	}
-	if (reference.kind === "loader") {
-		const loader = container.loaders.get(reference.token);
-		if (!loader) throw new Error(`Missing loader handle ${reference.token}.`);
-		return loader;
-	}
-	if (reference.kind === "loader-hook") {
-		const loaderHook = getRegisteredLoaderHook(reference.token);
-		if (!loaderHook) throw new Error(`Missing loader hook ${reference.token}.`);
-		return loaderHook;
-	}
-	if (reference.kind === "context" || reference.kind === "context-provider") {
-		const decoded = reference.data === void 0 ? null : deserializeRuntimeValue(container, reference.data);
-		const hasDefault = decoded?.hasDefault === true;
-		const descriptor = {
-			defaultValue: hasDefault ? decoded?.defaultValue : void 0,
-			hasDefault,
-			id: reference.token
-		};
-		return reference.kind === "context" ? materializeRuntimeContext(descriptor) : materializeRuntimeContextProvider(descriptor);
+const isRenderObject = (value) => typeof value === "object" && value !== null && "type" in value && "props" in value;
+const readAsyncSignalSnapshot = (id, container = getCurrentContainer()) => readAsyncSignalSnapshot$1(id, container);
+const writeAsyncSignalSnapshot = (id, value, container = getCurrentContainer()) => {
+	writeAsyncSignalSnapshot$1(id, value, container);
+};
+const getCurrentFrame = () => {
+	const stack = getFrameStack();
+	return stack.length > 0 ? stack[stack.length - 1] : null;
+};
+const shouldReconnectDetachedInsertMarkers = (container) => {
+	const frame = getCurrentFrame();
+	if (!container || !frame || frame.container !== container) return true;
+	return frame.projectionState.reuseExistingDom;
+};
+const hasScopedStyles = (frame) => !!frame && frame.scopedStyles.length > 0;
+const getScopedStyleRootSelector = (scopeId) => `[${SCOPED_STYLE_ATTR}="${escapeAttr(scopeId)}"]`;
+const wrapScopedStyleCss = (scopeId, cssText) => `@scope (${getScopedStyleRootSelector(scopeId)}) {\n${cssText}\n}`;
+const renderScopedStyleString = (scopeId, style) => {
+	const attrParts = Object.entries(style.attributes).filter(([, value]) => value !== false && value !== void 0 && value !== null).map(([name, value]) => value === true ? name : `${name}="${escapeAttr(String(value))}"`);
+	return `<style${attrParts.length > 0 ? ` ${attrParts.join(" ")}` : ""}>${escapeText(wrapScopedStyleCss(scopeId, style.cssText))}</style>`;
+};
+const renderScopedStyleNode = (container, scopeId, style) => {
+	const element = createElementNode(container.doc, "style");
+	for (const [name, value] of Object.entries(style.attributes)) {
+		if (value === false || value === void 0 || value === null) continue;
+		if (value === true) {
+			element.setAttribute(name, "");
+			continue;
+		}
+		element.setAttribute(name, String(value));
 	}
-	if (reference.kind === "route-slot") {
-		const startLayoutIndex = reference.data === void 0 ? 0 : deserializePublicValue(reference.data);
-		if (typeof startLayoutIndex !== "number" || !Number.isInteger(startLayoutIndex)) throw new TypeError("Route slot references require an integer start layout index.");
-		return {
-			__eclipsa_type: ROUTE_SLOT_TYPE,
-			pathname: reference.token,
-			startLayoutIndex
-		};
+	element.appendChild(container.doc.createTextNode(wrapScopedStyleCss(scopeId, style.cssText)));
+	return element;
+};
+const renderFrameScopedStylesToString = (frame) => frame.scopedStyles.map((style) => renderScopedStyleString(frame.component.scopeId, style)).join("");
+const renderFrameScopedStylesToNodes = (frame, container) => frame.scopedStyles.map((style) => renderScopedStyleNode(container, frame.component.scopeId, style));
+const registerRuntimeScopedStyle = (cssText, attributes = {}) => {
+	const frame = getCurrentFrame();
+	if (!frame || frame.component.id === "$root") throw new Error("useStyleScoped() can only be used while rendering a component.");
+	if (cssText.length === 0) return;
+	if (frame.scopedStyles.find((entry) => entry.cssText === cssText && JSON.stringify(entry.attributes) === JSON.stringify(attributes))) return;
+	frame.scopedStyles.push({
+		attributes: { ...attributes },
+		cssText
+	});
+};
+let currentEffect = null;
+let currentCleanupSlot = null;
+const withoutTrackedEffect = (fn) => {
+	const previous = currentEffect;
+	currentEffect = null;
+	try {
+		return fn();
+	} finally {
+		currentEffect = previous;
 	}
-	if (reference.kind === PROJECTION_SLOT_TYPE) {
-		let componentId = "";
-		let name = "";
-		let occurrence = 0;
-		try {
-			const parsed = JSON.parse(reference.token);
-			if (!Array.isArray(parsed) || parsed.length !== 3 || typeof parsed[0] !== "string" || typeof parsed[1] !== "string" || typeof parsed[2] !== "number") throw new Error("invalid projection slot token");
-			componentId = parsed[0];
-			name = parsed[1];
-			occurrence = parsed[2];
-		} catch {
-			throw new TypeError("Projection slot references require a component id, name, and occurrence.");
+};
+const createCleanupSlot = () => ({ callbacks: [] });
+const withCleanupSlot = (slot, fn) => {
+	const previous = currentCleanupSlot;
+	currentCleanupSlot = slot;
+	try {
+		return fn();
+	} finally {
+		currentCleanupSlot = previous;
+	}
+};
+const disposeCleanupSlot = (slot) => {
+	if (!slot || slot.callbacks.length === 0) return;
+	const callbacks = [...slot.callbacks].reverse();
+	slot.callbacks.length = 0;
+	let firstError = null;
+	const previous = currentCleanupSlot;
+	currentCleanupSlot = null;
+	try {
+		for (const callback of callbacks) try {
+			withoutTrackedEffect(callback);
+		} catch (error) {
+			firstError ??= error;
 		}
-		return createProjectionSlot(componentId, name, occurrence, deserializeRuntimeValue(container, reference.data));
+	} finally {
+		currentCleanupSlot = previous;
 	}
-	if (reference.kind === "signal") {
-		const record = container.signals.get(reference.token);
-		if (!record) throw new Error(`Missing signal ${reference.token}.`);
-		return record.handle;
+	if (firstError) throw firstError;
+};
+const resetComponentRenderEffects = (component) => {
+	disposeCleanupSlot(component.renderEffectCleanupSlot);
+	component.renderEffectCleanupSlot = createCleanupSlot();
+};
+const syncEffectOnlyLocalSignalPreference = (component) => {
+	component.prefersEffectOnlyLocalSignalWrites = component.optimizedRoot === true;
+};
+const clearEffectSignals = (effect) => {
+	for (const signal of effect.signals) signal.effects.delete(effect);
+	effect.signals.clear();
+};
+const collectTrackedDependencies = (effect, fn) => {
+	clearEffectSignals(effect);
+	currentEffect = effect;
+	try {
+		fn();
+	} finally {
+		currentEffect = null;
+	}
+};
+const runWithoutDependencyTracking = (fn) => {
+	const previousEffect = currentEffect;
+	currentEffect = null;
+	try {
+		return fn();
+	} finally {
+		currentEffect = previousEffect;
 	}
-	if (reference.kind === "symbol") {
-		if (!reference.data || !Array.isArray(reference.data)) throw new TypeError("Symbol references require an encoded scope array.");
-		const scopeId = registerSerializedScope(container, reference.data);
-		return materializeSymbolReference(container, reference.token, scopeId);
+};
+const trackWatchDependencies = (dependencies, errorLabel = "useWatch") => {
+	for (const dependency of dependencies) {
+		if (typeof dependency === "function") {
+			dependency();
+			continue;
+		}
+		if (!getSignalMeta(dependency)) throw new TypeError(`${errorLabel} dependencies must be signals or getter functions.`);
+		dependency.value;
 	}
-	if (reference.kind === RENDER_REFERENCE_KIND) return deserializeRenderObjectReference(container, reference.data);
-	if (reference.kind === "dom") {
-		const element = findRuntimeElement(container, reference.token);
-		if (!element) throw new Error(`Missing DOM reference ${reference.token}.`);
-		return element;
+};
+const runWatchCallback = (effect, cleanupSlot, fn, dependencies) => {
+	disposeCleanupSlot(cleanupSlot);
+	if (!dependencies) {
+		collectTrackedDependencies(effect, () => {
+			withCleanupSlot(cleanupSlot, fn);
+		});
+		return;
 	}
-	throw new TypeError(`Unsupported runtime reference kind "${reference.kind}".`);
-} });
+	collectTrackedDependencies(effect, () => {
+		trackWatchDependencies(dependencies);
+	});
+	withCleanupSlot(cleanupSlot, fn);
+};
+const createLocalWatchRunner = (effect, cleanupSlot, fn, dependencies) => () => {
+	runWatchCallback(effect, cleanupSlot, fn, dependencies);
+};
+const isProjectionSlot = (value) => isPlainObject(value) && value.__eclipsa_type === "projection-slot";
+const createProjectionSlot = (componentId, name, occurrence, source) => ({
+	__eclipsa_type: PROJECTION_SLOT_TYPE,
+	componentId,
+	name,
+	occurrence,
+	source
+});
+let runtimeSerialization = null;
+const getRuntimeSerialization = () => {
+	runtimeSerialization ??= createRuntimeSerialization({
+		createProjectionSlot,
+		ensureRouterState,
+		ensureRuntimeElementId,
+		evaluateProps,
+		findRuntimeElement,
+		getResolvedRuntimeSymbols,
+		isPlainObject,
+		isProjectionSlot,
+		isRenderObject,
+		isRouteSlot,
+		loadSymbol,
+		materializeScope,
+		materializeSymbolReference,
+		registerScope,
+		registerSerializedScope,
+		resolveRenderable: (value) => resolveRenderable(value)
+	});
+	return runtimeSerialization;
+};
+const preloadResumableValue = (container, value, seen = /* @__PURE__ */ new Set()) => getRuntimeSerialization().preloadResumableValue(container, value, seen);
+const serializeRuntimeValue = (container, value) => getRuntimeSerialization().serializeRuntimeValue(container, value);
+const deserializeRuntimeValue = (container, value) => getRuntimeSerialization().deserializeRuntimeValue(container, value);
 const findNextNumericId = (ids, prefix) => {
 	let nextId = 0;
 	for (const id of ids) {
@@ -1882,11 +2315,11 @@ const restoreSignalRefs = (container, root) => {
 		if (!record) return;
 		writeSignalValue(container, record, element);
 	};
-	if (isElementNode(root) && root.getAttribute(REF_SIGNAL_ATTR)) assignElement(root);
+	if (isElementNode(root) && root.getAttribute("data-e-ref")) assignElement(root);
 	const visitDescendants = (node) => {
 		for (const child of listNodeChildren(node)) {
 			if (!isElementNode(child)) continue;
-			if (child.getAttribute(REF_SIGNAL_ATTR)) assignElement(child);
+			if (child.getAttribute("data-e-ref")) assignElement(child);
 			visitDescendants(child);
 		}
 	};
@@ -1962,7 +2395,7 @@ const preloadComponentProps = async (container, meta, props) => {
 	}
 	await preloadResumableValue(container, entries);
 };
-const createContainer = (symbols, doc, asyncSignalSnapshotCache) => ({
+const createContainer = (symbols, doc, asyncSignalSnapshotCache, externalRenderCache) => ({
 	actions: /* @__PURE__ */ new Map(),
 	actionStates: /* @__PURE__ */ new Map(),
 	asyncSignalStates: /* @__PURE__ */ new Map(),
@@ -1973,6 +2406,7 @@ const createContainer = (symbols, doc, asyncSignalSnapshotCache) => ({
 	dirtyFlushQueued: false,
 	doc,
 	eventDispatchPromise: null,
+	externalRenderCache: externalRenderCache ?? /* @__PURE__ */ new Map(),
 	id: `rt${globalThis[CONTAINER_ID_KEY] = (globalThis[CONTAINER_ID_KEY] ?? 0) + 1}`,
 	imports: /* @__PURE__ */ new Map(),
 	interactivePrefetchCheckQueued: false,
@@ -2061,7 +2495,7 @@ const ensureSignalRecord = (container, id, initialValue) => {
 	container.signals.set(id, record);
 	return record;
 };
-const isRouterSignalId = (id) => id === ROUTER_CURRENT_PATH_SIGNAL_ID || id === ROUTER_CURRENT_URL_SIGNAL_ID || id === ROUTER_IS_NAVIGATING_SIGNAL_ID;
+const isRouterSignalId = (id) => id === "$router:path" || id === "$router:url" || id === "$router:isNavigating";
 const isAtomSignalId = (id) => id.startsWith("a");
 const createStandaloneNavigate = () => {
 	const navigate = (async (href, options) => {
@@ -2260,6 +2694,8 @@ const createFrame = (container, component, mode, options) => ({
 	container,
 	effectCleanupSlot: options?.effectCleanupSlot ?? component.renderEffectCleanupSlot,
 	insertCursor: 0,
+	keyedRangeCursor: 0,
+	keyedRangeScopeStack: [],
 	mountCallbacks: [],
 	mode,
 	projectionState: {
@@ -2274,7 +2710,7 @@ const createFrame = (container, component, mode, options) => ({
 	watchCursor: 0
 });
 const createComponentId = (container, parentId, childIndex) => {
-	if (!parentId || parentId === ROOT_COMPONENT_ID) return `c${childIndex}`;
+	if (!parentId || parentId === "$root") return `c${childIndex}`;
 	return `${parentId}.${childIndex}`;
 };
 const getOrCreateComponentState = (container, id, symbol, parentId) => {
@@ -2287,6 +2723,11 @@ const getOrCreateComponentState = (container, id, symbol, parentId) => {
 	const component = {
 		active: false,
 		didMount: false,
+		external: void 0,
+		externalSlotHtml: null,
+		externalSlotDom: null,
+		externalInstance: void 0,
+		externalMeta: null,
 		id,
 		mountCleanupSlots: [],
 		optimizedRoot: false,
@@ -2313,10 +2754,15 @@ const resetComponentForSymbolChange = (container, component, meta) => {
 	disposeCleanupSlot(component.renderEffectCleanupSlot);
 	component.renderEffectCleanupSlot = createCleanupSlot();
 	component.didMount = false;
+	component.external = meta.external;
+	component.externalSlotHtml = null;
+	component.externalSlotDom = null;
 	component.optimizedRoot = meta.optimizedRoot === true;
 	component.prefersEffectOnlyLocalSignalWrites = false;
 	component.projectionSlots = meta.projectionSlots ?? null;
 	component.rawProps = null;
+	component.externalInstance = void 0;
+	component.externalMeta = null;
 	component.scopeId = registerScope(container, meta.captures());
 	component.signalIds = [];
 	component.suspensePromise = null;
@@ -2342,6 +2788,7 @@ const getOrCreateWatchState = (container, id, componentId) => {
 		id,
 		mode: "dynamic",
 		pending: null,
+		resumed: false,
 		run: null,
 		scopeId: registerScope(container, []),
 		symbol: "",
@@ -2404,7 +2851,18 @@ const getOrCreateVisibleState = (container, id, componentId) => {
 const clearComponentSubscriptions = (container, componentId) => {
 	for (const record of container.signals.values()) record.subscribers.delete(componentId);
 };
+const disposeExternalComponentInstance = (component) => {
+	if (!component.externalMeta || component.externalInstance === void 0) {
+		component.externalInstance = void 0;
+		component.externalMeta = null;
+		return;
+	}
+	component.externalMeta.unmount(component.externalInstance);
+	component.externalInstance = void 0;
+	component.externalMeta = null;
+};
 const disposeComponentMountCleanups = (component) => {
+	disposeExternalComponentInstance(component);
 	disposeCleanupSlot(component.renderEffectCleanupSlot);
 	component.renderEffectCleanupSlot = createCleanupSlot();
 	const cleanupSlots = [...component.mountCleanupSlots].reverse();
@@ -2583,6 +3041,41 @@ const scheduleMountCallbacks = (container, component, callbacks) => {
 		});
 	});
 };
+const scheduleExternalComponentMount = (container, component, external, props) => {
+	if (component.didMount) return;
+	component.didMount = true;
+	scheduleMicrotask(() => {
+		const host = getExternalRoot(component);
+		if (!host) return;
+		withClientContainer(container, async () => {
+			syncExternalProjectionSlotDom(container, component, props, host);
+			await syncExternalComponentInstance(component, external, props, host);
+			syncExternalProjectionSlotDom(container, component, props, host);
+			rebindExternalHost(container, host);
+			scheduleExternalHostRebind(container, host);
+			await flushDirtyComponents(container);
+			scheduleVisibleCallbacksCheck(container);
+		});
+	});
+};
+const rebindExternalHost = (container, host) => {
+	if (!host.parentNode || !("querySelectorAll" in host.parentNode)) return;
+	bindComponentBoundaries(container, host.parentNode);
+	restoreSignalRefs(container, host.parentNode);
+	bindRouterLinks(container, host.parentNode);
+};
+const scheduleExternalHostRebind = (container, host) => {
+	const schedule = container.doc?.defaultView?.setTimeout?.bind(container.doc.defaultView) ?? (typeof setTimeout === "function" ? setTimeout : null);
+	if (!schedule) return;
+	for (const delay of [
+		0,
+		16,
+		100
+	]) schedule(() => {
+		if (!host.isConnected) return;
+		rebindExternalHost(container, host);
+	}, delay);
+};
 const collectProjectionSlotRanges = (roots) => {
 	const starts = /* @__PURE__ */ new Map();
 	const ranges = /* @__PURE__ */ new Map();
@@ -2608,8 +3101,8 @@ const collectComponentBoundaryIds = (roots) => {
 	const ids = /* @__PURE__ */ new Set();
 	const visit = (node) => {
 		if (typeof Comment !== "undefined" ? node instanceof Comment : node.nodeType === 8) {
-			const matched = node.data.match(/^ec:c:(.+):(start|end)$/);
-			if (matched) ids.add(matched[1]);
+			const marker = parseComponentBoundaryMarker(node.data);
+			if (marker) ids.add(marker.id);
 		}
 		for (const child of Array.from(node.childNodes ?? [])) visit(child);
 	};
@@ -2637,6 +3130,7 @@ const collectComponentBoundaryRanges = (roots) => {
 	for (const root of roots) visit(root);
 	return ranges;
 };
+const createKeyedRangeIdentity = (scope, key) => JSON.stringify([scope, key]);
 const collectKeyedRangeRanges = (roots) => {
 	const starts = /* @__PURE__ */ new Map();
 	const ranges = /* @__PURE__ */ new Map();
@@ -2644,13 +3138,16 @@ const collectKeyedRangeRanges = (roots) => {
 		if (typeof Comment !== "undefined" ? node instanceof Comment : node.nodeType === 8) {
 			const commentNode = node;
 			const marker = parseKeyedRangeMarker(commentNode.data);
-			if (marker) if (marker.kind === "start") starts.set(marker.key, commentNode);
-			else {
-				const startNode = starts.get(marker.key);
-				if (startNode) ranges.set(marker.key, {
-					end: commentNode,
-					start: startNode
-				});
+			if (marker) {
+				const identity = createKeyedRangeIdentity(marker.scope, marker.key);
+				if (marker.kind === "start") starts.set(identity, commentNode);
+				else {
+					const startNode = starts.get(identity);
+					if (startNode) ranges.set(identity, {
+						end: commentNode,
+						start: startNode
+					});
+				}
 			}
 		}
 		for (const child of Array.from(node.childNodes ?? [])) visit(child);
@@ -2668,12 +3165,45 @@ const collectBoundaryRangeNodes = (start, end) => {
 	}
 	return [];
 };
+const canReuseNodeAsIs = (current, next) => {
+	if (current.nodeType !== next.nodeType) return false;
+	if (current.nodeType === 3 && next.nodeType === 3) return current.textContent === next.textContent;
+	if ((typeof Comment !== "undefined" ? current instanceof Comment : current.nodeType === 8) && (typeof Comment !== "undefined" ? next instanceof Comment : next.nodeType === 8)) {
+		const currentComment = current;
+		const nextComment = next;
+		const currentBoundary = parseComponentBoundaryMarker(currentComment.data);
+		const nextBoundary = parseComponentBoundaryMarker(nextComment.data);
+		if (currentBoundary || nextBoundary) {
+			if (!currentBoundary || !nextBoundary) return false;
+			if (currentBoundary.id !== nextBoundary.id || currentBoundary.kind !== nextBoundary.kind) return false;
+			return nextBoundary.kind !== "start" || !didComponentBoundaryChange(nextComment);
+		}
+		return currentComment.data === nextComment.data;
+	}
+	if (!isElementNode(current) || !isElementNode(next) || current.tagName !== next.tagName) return false;
+	const currentNames = current.getAttributeNames();
+	const nextNames = next.getAttributeNames();
+	if (currentNames.length !== nextNames.length) return false;
+	for (const name of currentNames) if (current.getAttribute(name) !== next.getAttribute(name)) return false;
+	if (isHTMLInputElementNode(current) && isHTMLInputElementNode(next) && current.checked !== next.checked) return false;
+	if ("value" in current && "value" in next && current.value !== next.value) return false;
+	const currentChildren = Array.from(current.childNodes);
+	const nextChildren = Array.from(next.childNodes);
+	if (currentChildren.length !== nextChildren.length) return false;
+	for (let index = 0; index < currentChildren.length; index += 1) if (!canReuseNodeAsIs(currentChildren[index], nextChildren[index])) return false;
+	return true;
+};
+const canReuseNodeSequenceAsIs = (currentNodes, nextNodes) => {
+	if (currentNodes.length !== nextNodes.length) return false;
+	for (let index = 0; index < currentNodes.length; index += 1) if (!canReuseNodeAsIs(currentNodes[index], nextNodes[index])) return false;
+	return true;
+};
 const preserveComponentBoundaryContentsInRoots = (currentRoots, nextRoots) => {
 	const currentRanges = collectComponentBoundaryRanges(currentRoots);
 	const nextRanges = collectComponentBoundaryRanges(nextRoots);
 	const preservedComponentIds = /* @__PURE__ */ new Set();
 	for (const [id, nextRange] of nextRanges) {
-		if (Boolean(nextRange.start[COMPONENT_BOUNDARY_SYMBOL_CHANGED] || nextRange.start[COMPONENT_BOUNDARY_PROPS_CHANGED])) continue;
+		if (didComponentBoundaryChange(nextRange.start)) continue;
 		const currentRange = currentRanges.get(id);
 		if (!currentRange) continue;
 		const movedRoots = collectBoundaryRangeNodes(currentRange.start, currentRange.end);
@@ -2746,29 +3276,44 @@ const preserveKeyedRangeContentsInRoots = (currentRoots, nextRoots) => {
 	for (const [key, nextRange] of nextRanges) {
 		const currentRange = currentRanges.get(key);
 		if (!currentRange) continue;
-		const movedRoots = collectBoundaryRangeNodes(currentRange.start, currentRange.end);
-		if (movedRoots.length === 0) continue;
-		const replacementParent = nextRange.start.parentNode;
-		if (!replacementParent) continue;
-		for (const node of movedRoots) replacementParent.insertBefore(node, nextRange.start);
-		let cursor = nextRange.start;
-		while (cursor) {
-			const nextSibling = cursor.nextSibling;
-			if (typeof cursor.remove === "function") cursor.remove();
-			else cursor.parentNode?.removeChild(cursor);
-			if (cursor === nextRange.end) break;
-			cursor = nextSibling;
+		const currentBodyRoots = getBoundaryChildren(currentRange.start, currentRange.end);
+		const nextBodyRoots = getBoundaryChildren(nextRange.start, nextRange.end);
+		if (canReuseNodeSequenceAsIs(currentBodyRoots, nextBodyRoots)) {
+			const movedRoots = collectBoundaryRangeNodes(currentRange.start, currentRange.end);
+			if (movedRoots.length === 0) continue;
+			const replacementParent = nextRange.start.parentNode;
+			if (!replacementParent) continue;
+			for (const node of movedRoots) replacementParent.insertBefore(node, nextRange.start);
+			let cursor = nextRange.start;
+			while (cursor) {
+				const nextSibling = cursor.nextSibling;
+				if (typeof cursor.remove === "function") cursor.remove();
+				else cursor.parentNode?.removeChild(cursor);
+				if (cursor === nextRange.end) break;
+				cursor = nextSibling;
+			}
+			for (const componentId of collectComponentBoundaryIds(movedRoots)) preservedComponentIds.add(componentId);
+			continue;
 		}
-		for (const componentId of collectComponentBoundaryIds(movedRoots)) preservedComponentIds.add(componentId);
+		if (currentBodyRoots.length === 0 && nextBodyRoots.length === 0) continue;
+		for (const componentId of preserveReusableContentInRoots(currentBodyRoots, nextBodyRoots)) preservedComponentIds.add(componentId);
 	}
 	return preservedComponentIds;
 };
 const canMatchReusableRoot = (current, next) => {
 	if (current.nodeType !== next.nodeType) return false;
 	if ((typeof Comment !== "undefined" ? current instanceof Comment : current.nodeType === 8) && (typeof Comment !== "undefined" ? next instanceof Comment : next.nodeType === 8)) return current.data === next.data;
-	if (current.nodeType === DOM_TEXT_NODE && next.nodeType === DOM_TEXT_NODE) return true;
+	if (current.nodeType === 3 && next.nodeType === 3) return true;
 	return isElementNode(current) && isElementNode(next) && current.tagName === next.tagName;
 };
+const preserveExternalRootContents = (current, next) => {
+	if (!isElementNode(current) || !isElementNode(next)) return null;
+	if (current.getAttribute("data-e-external-root") !== "true" || next.getAttribute("data-e-external-root") !== "true") return null;
+	if (next.childNodes.length > 0) return /* @__PURE__ */ new Set();
+	const movedRoots = [...current.childNodes];
+	for (const node of movedRoots) next.appendChild(node);
+	return collectComponentBoundaryIds(movedRoots);
+};
 const preserveInsertMarkerContentsInRoots = (currentRoots, nextRoots) => {
 	const preservedComponentIds = /* @__PURE__ */ new Set();
 	const preserveLists = (currentChildren, nextChildren) => {
@@ -2787,7 +3332,7 @@ const preserveInsertMarkerContentsInRoots = (currentRoots, nextRoots) => {
 				}
 				if (markerIndex < 0) continue;
 				const currentMarker = currentChildren[markerIndex];
-				const explicitCount = insertMarkerNodeCounts.get(currentMarker);
+				const explicitCount = getRememberedInsertMarkerNodeCount(currentMarker);
 				if (explicitCount === void 0) {
 					currentIndex = markerIndex + 1;
 					continue;
@@ -2799,7 +3344,7 @@ const preserveInsertMarkerContentsInRoots = (currentRoots, nextRoots) => {
 					continue;
 				}
 				for (const node of movedRoots) nextChild.parentNode?.insertBefore(node, nextChild);
-				insertMarkerNodeCounts.set(nextChild, movedRoots.length);
+				setRememberedInsertMarkerNodeCount(nextChild, movedRoots.length);
 				for (const componentId of collectComponentBoundaryIds(movedRoots)) preservedComponentIds.add(componentId);
 				currentIndex = markerIndex + 1;
 				continue;
@@ -2811,7 +3356,15 @@ const preserveInsertMarkerContentsInRoots = (currentRoots, nextRoots) => {
 			}
 			if (matchedIndex < 0) continue;
 			const currentChild = currentChildren[matchedIndex];
-			if (isElementNode(currentChild) && isElementNode(nextChild)) preserveLists(Array.from(currentChild.childNodes), Array.from(nextChild.childNodes));
+			if (isElementNode(currentChild) && isElementNode(nextChild)) {
+				const preservedExternalRootIds = preserveExternalRootContents(currentChild, nextChild);
+				if (preservedExternalRootIds) {
+					for (const componentId of preservedExternalRootIds) preservedComponentIds.add(componentId);
+					currentIndex = matchedIndex + 1;
+					continue;
+				}
+				preserveLists(Array.from(currentChild.childNodes), Array.from(nextChild.childNodes));
+			}
 			currentIndex = matchedIndex + 1;
 		}
 	};
@@ -2819,9 +3372,10 @@ const preserveInsertMarkerContentsInRoots = (currentRoots, nextRoots) => {
 	return preservedComponentIds;
 };
 const preserveReusableContentInRoots = (currentRoots, nextRoots, options) => {
-	const preservedComponentIds = preserveComponentBoundaryContentsInRoots(currentRoots, nextRoots);
-	if (options?.preserveProjectionSlots ?? true) for (const componentId of preserveProjectionSlotContentsInRoots(currentRoots, nextRoots)) preservedComponentIds.add(componentId);
+	const preservedComponentIds = /* @__PURE__ */ new Set();
 	for (const componentId of preserveKeyedRangeContentsInRoots(currentRoots, nextRoots)) preservedComponentIds.add(componentId);
+	for (const componentId of preserveComponentBoundaryContentsInRoots(currentRoots, nextRoots)) preservedComponentIds.add(componentId);
+	if (options?.preserveProjectionSlots ?? true) for (const componentId of preserveProjectionSlotContentsInRoots(currentRoots, nextRoots)) preservedComponentIds.add(componentId);
 	for (const componentId of preserveInsertMarkerContentsInRoots(currentRoots, nextRoots)) preservedComponentIds.add(componentId);
 	return preservedComponentIds;
 };
@@ -2895,7 +3449,7 @@ const replaceInsertRangeOwnedNodes = (currentMarker, currentOwnedNodes, nextOwne
 	}
 	for (const node of nextOwnedNodes) parent.insertBefore(node, currentMarker);
 	rememberManagedAttributesForNodes(parent.childNodes);
-	insertMarkerNodeCounts.set(currentMarker, nextOwnedNodes.length);
+	setRememberedInsertMarkerNodeCount(currentMarker, nextOwnedNodes.length);
 	return true;
 };
 const getPatchOpaqueRangeToken = (node, kind) => {
@@ -2914,7 +3468,7 @@ const getPatchOpaqueRangeToken = (node, kind) => {
 	const keyedRange = parseKeyedRangeMarker(comment.data);
 	if (keyedRange?.kind === kind) return {
 		rangeKind: "keyed",
-		token: `keyed:${keyedRange.key}`
+		token: `keyed:${createKeyedRangeIdentity(keyedRange.scope, keyedRange.key)}`
 	};
 	return null;
 };
@@ -2933,7 +3487,7 @@ const collectPatchSequenceUnits = (nodes) => {
 				});
 				continue;
 			}
-			const ownedNodeCount = insertMarkerNodeCounts.get(node) ?? 0;
+			const ownedNodeCount = getRememberedInsertMarkerNodeCount(node);
 			let remaining = ownedNodeCount;
 			while (remaining > 0) {
 				const previous = units[units.length - 1];
@@ -2995,14 +3549,14 @@ const tryPatchNodeSequenceInPlace = (currentNodes, nextNodes) => {
 			if (currentUnit.token !== nextUnit.token && (hasStructuredPatchUnits(currentOwnedNodes) || hasStructuredPatchUnits(nextOwnedNodes))) return false;
 			if (currentOwnedNodes.length > 0 || nextOwnedNodes.length > 0 || currentUnit.nodeCount !== nextUnit.nodeCount) if (!tryPatchNodeSequenceInPlace(currentOwnedNodes, nextOwnedNodes)) {
 				if (!replaceInsertRangeOwnedNodes(currentUnit.marker, currentOwnedNodes, nextOwnedNodes)) return false;
-			} else insertMarkerNodeCounts.set(currentUnit.marker, nextOwnedNodes.length);
+			} else setRememberedInsertMarkerNodeCount(currentUnit.marker, nextOwnedNodes.length);
 			continue;
 		}
 		if (currentUnit.kind === "opaque-range" && nextUnit.kind === "opaque-range") {
 			if (currentUnit.token !== nextUnit.token || currentUnit.rangeKind !== nextUnit.rangeKind) return false;
 			if (currentUnit.rangeKind === "component-boundary") {
-				if (Boolean(nextUnit.start[COMPONENT_BOUNDARY_SYMBOL_CHANGED])) return false;
-				if (Boolean(nextUnit.start[COMPONENT_BOUNDARY_PROPS_CHANGED])) {
+				if (didComponentBoundarySymbolChange(nextUnit.start)) return false;
+				if (didComponentBoundaryPropsChange(nextUnit.start)) {
 					const nextRangeNodes = nextUnit.bodyNodes;
 					if (!tryPatchBoundaryContentsInPlace(currentUnit.start, currentUnit.end, nextRangeNodes)) replaceBoundaryContents(currentUnit.start, currentUnit.end, nextRangeNodes);
 				}
@@ -3019,11 +3573,11 @@ const tryPatchNodeSequenceInPlace = (currentNodes, nextNodes) => {
 };
 const patchNodeInPlace = (current, next) => {
 	if (current.nodeType !== next.nodeType) return false;
-	if (current.nodeType === DOM_TEXT_NODE && next.nodeType === DOM_TEXT_NODE) {
+	if (current.nodeType === 3 && next.nodeType === 3) {
 		if (current.textContent !== next.textContent) current.textContent = next.textContent;
 		return true;
 	}
-	if (current.nodeType === DOM_COMMENT_NODE && next.nodeType === DOM_COMMENT_NODE) {
+	if (current.nodeType === 8 && next.nodeType === 8) {
 		const currentComment = current;
 		const nextComment = next;
 		const currentIsProjectionSlot = !!parseProjectionSlotMarker(currentComment.data);
@@ -3044,235 +3598,43 @@ const patchNodeInPlace = (current, next) => {
 	return tryPatchElementShellInPlace(current, next);
 };
 const tryPatchBoundaryContentsInPlace = (start, end, nextNodes) => {
-	return tryPatchNodeSequenceInPlace(getBoundaryChildren(start, end), nextNodes);
-};
-const getBoundaryChildren = (start, end) => {
-	const nodes = [];
-	let cursor = start.nextSibling;
-	while (cursor && cursor !== end) {
-		nodes.push(cursor);
-		cursor = cursor.nextSibling;
-	}
-	return nodes;
-};
-const collectMountedBoundaryDescendants = (component) => component.start && component.end ? collectComponentBoundaryIds(getBoundaryChildren(component.start, component.end)) : /* @__PURE__ */ new Set();
-const collectMountedDescendantComponentIds = (container, component) => expandComponentIdsToDescendants(container, collectMountedBoundaryDescendants(component));
-const collectProjectionSlotComponentIds = (roots) => {
-	const preserved = /* @__PURE__ */ new Set();
-	for (const range of collectProjectionSlotRanges(roots).values()) for (const componentId of collectComponentBoundaryIds(getBoundaryChildren(range.start, range.end))) preserved.add(componentId);
-	return preserved;
-};
-const collectPreservedProjectionSlotComponentIds = (container, start, end) => expandComponentIdsToDescendants(container, collectProjectionSlotComponentIds(getBoundaryChildren(start, end)));
-const getNodePath = (root, target) => {
-	if (root === target) return [];
-	const path = [];
-	let cursor = target;
-	while (cursor && cursor !== root) {
-		const parent = cursor.parentNode;
-		if (!parent) return null;
-		const index = Array.prototype.indexOf.call(parent.childNodes, cursor);
-		if (index < 0) return null;
-		path.unshift(index);
-		cursor = parent;
-	}
-	return cursor === root ? path : null;
-};
-const getNodeByPath = (root, path) => {
-	let cursor = root;
-	for (const index of path) {
-		const childNodes = cursor ? cursor.childNodes ?? void 0 : void 0;
-		cursor = (childNodes && ("item" in childNodes ? childNodes.item(index) : childNodes[index] ?? null)) ?? null;
-		if (!cursor) return null;
-	}
-	return cursor;
-};
-const getElementPath = (root, target) => {
-	if (root === target) return [];
-	const path = [];
-	let cursor = target;
-	while (cursor && cursor !== root) {
-		const parent = cursor.parentElement;
-		if (!parent) return null;
-		const index = Array.prototype.indexOf.call(parent.children, cursor);
-		if (index < 0) return null;
-		path.unshift(index);
-		cursor = parent;
-	}
-	return cursor === root ? path : null;
-};
-const getElementByPath = (root, path) => {
-	let cursor = root;
-	for (const index of path) {
-		const children = cursor ? cursor.children ?? void 0 : void 0;
-		cursor = (children && ("item" in children ? children.item(index) : children[index] ?? null)) ?? null;
-		if (!cursor) return null;
-	}
-	return cursor;
-};
-const captureBoundaryFocus = (doc, start, end) => {
-	const activeElement = doc.activeElement;
-	if (!isHTMLElementNode(activeElement)) return null;
-	const topLevelNodes = getBoundaryChildren(start, end);
-	for (let i = 0; i < topLevelNodes.length; i++) {
-		const candidate = topLevelNodes[i];
-		if (candidate !== activeElement && (!isElementNode(candidate) || !candidate.contains(activeElement))) continue;
-		const innerPath = getNodePath(candidate, activeElement);
-		if (!innerPath) continue;
-		return {
-			path: [i, ...innerPath],
-			selectionDirection: isTextEntryElement(activeElement) ? activeElement.selectionDirection : null,
-			selectionEnd: isTextEntryElement(activeElement) ? activeElement.selectionEnd : null,
-			selectionStart: isTextEntryElement(activeElement) ? activeElement.selectionStart : null
-		};
-	}
-	return null;
-};
-const restoreBoundaryFocus = (doc, start, end, snapshot) => {
-	if (!snapshot) return;
-	const [topLevelIndex, ...innerPath] = snapshot.path;
-	const root = getBoundaryChildren(start, end)[topLevelIndex];
-	if (!root) return;
-	const nextActive = innerPath.length > 0 ? getNodeByPath(root, innerPath) : root;
-	if (!isHTMLElementNode(nextActive)) return;
-	restoreFocusTarget(doc, nextActive, snapshot);
-};
-const restoreFocusTarget = (doc, nextActive, snapshot) => {
-	const restore = () => {
-		if (!nextActive.isConnected) return false;
-		nextActive.focus({ preventScroll: true });
-		if (isTextEntryElement(nextActive) && snapshot.selectionStart !== null && snapshot.selectionStart !== void 0) nextActive.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd ?? snapshot.selectionStart, snapshot.selectionDirection ?? void 0);
-		return doc.activeElement === nextActive;
-	};
-	if (restore()) return;
-	const win = doc.defaultView;
-	if (!win) return;
-	let remainingAttempts = 3;
-	const retry = () => {
-		if (remainingAttempts <= 0) return;
-		remainingAttempts--;
-		const run = () => {
-			if (restore()) return;
-			retry();
-		};
-		if (typeof win.requestAnimationFrame === "function") {
-			win.requestAnimationFrame(() => run());
-			return;
-		}
-		win.setTimeout(run, 16);
-	};
-	retry();
-};
-const captureDocumentFocus = (doc, focusSource) => {
-	const candidate = isHTMLElementNode(focusSource) ? focusSource : isHTMLElementNode(doc.activeElement) ? doc.activeElement : null;
-	if (!candidate) return null;
-	const path = getElementPath(doc.body, candidate);
-	if (!path) return null;
-	return {
-		path,
-		selectionDirection: isTextEntryElement(candidate) ? candidate.selectionDirection : null,
-		selectionEnd: isTextEntryElement(candidate) ? candidate.selectionEnd : null,
-		selectionStart: isTextEntryElement(candidate) ? candidate.selectionStart : null
-	};
+	return tryPatchNodeSequenceInPlace(getBoundaryChildren(start, end), nextNodes);
+};
+const collectMountedBoundaryDescendants = (component) => component.start && component.end ? collectComponentBoundaryIds(getBoundaryChildren(component.start, component.end)) : /* @__PURE__ */ new Set();
+const collectMountedDescendantComponentIds = (container, component) => expandComponentIdsToDescendants(container, collectMountedBoundaryDescendants(component));
+const collectProjectionSlotComponentIds = (roots) => {
+	const preserved = /* @__PURE__ */ new Set();
+	for (const range of collectProjectionSlotRanges(roots).values()) for (const componentId of collectComponentBoundaryIds(getBoundaryChildren(range.start, range.end))) preserved.add(componentId);
+	return preserved;
 };
+const collectPreservedProjectionSlotComponentIds = (container, start, end) => expandComponentIdsToDescendants(container, collectProjectionSlotComponentIds(getBoundaryChildren(start, end)));
 const capturePendingFocusRestore = (container, focusSource) => {
 	if (!container.doc) return null;
 	const snapshot = captureDocumentFocus(container.doc, focusSource);
 	if (!snapshot) return null;
 	return { snapshot };
 };
-const shouldSkipPendingFocusRestore = (container, pending) => {
-	if (!container.doc) return false;
-	const activeElement = container.doc.activeElement;
-	if (!isHTMLElementNode(activeElement)) return false;
-	if (activeElement === container.doc.body || !activeElement.isConnected || !container.doc.body.contains(activeElement)) return false;
-	const activePath = getElementPath(container.doc.body, activeElement);
-	if (!activePath) return false;
-	if (activePath.length !== pending.snapshot.path.length) return true;
-	return activePath.some((index, position) => index !== pending.snapshot.path[position]);
-};
 const restorePendingFocus = (container, pending) => {
 	if (!pending || !container.doc) return;
-	if (shouldSkipPendingFocusRestore(container, pending)) return;
-	const nextActive = getElementByPath(container.doc.body, pending.snapshot.path);
-	if (!isHTMLElementNode(nextActive)) return;
-	restoreFocusTarget(container.doc, nextActive, pending.snapshot);
-};
-const EVENT_PROP_REGEX = /^on([A-Z].+)$/;
-const DANGEROUSLY_SET_INNER_HTML_PROP = "dangerouslySetInnerHTML";
-const resolveDangerouslySetInnerHTML = (value) => value === false || value === void 0 || value === null ? null : String(value);
-const toEventName = (propName) => {
-	const matched = propName.match(EVENT_PROP_REGEX);
-	if (!matched) return null;
-	const [first, ...rest] = matched[1];
-	return `${first.toLowerCase()}${rest.join("")}`;
-};
-const TEXT_ESCAPE_REGEX = /[&<>]/;
-const ATTR_ESCAPE_REGEX = /[&<>'"]/;
-const escapeString = (value, mode) => {
-	const escapePattern = mode === "attr" ? ATTR_ESCAPE_REGEX : TEXT_ESCAPE_REGEX;
-	const firstMatch = value.search(escapePattern);
-	if (firstMatch < 0) return value;
-	let output = "";
-	let lastIndex = 0;
-	for (let index = firstMatch; index < value.length; index += 1) {
-		let escaped = null;
-		switch (value.charCodeAt(index)) {
-			case 34:
-				escaped = mode === "attr" ? "&quot;" : null;
-				break;
-			case 38:
-				escaped = "&amp;";
-				break;
-			case 39:
-				escaped = mode === "attr" ? "&#39;" : null;
-				break;
-			case 60:
-				escaped = "&lt;";
-				break;
-			case 62:
-				escaped = "&gt;";
-				break;
-		}
-		if (!escaped) continue;
-		output += value.slice(lastIndex, index);
-		output += escaped;
-		lastIndex = index + 1;
-	}
-	return output + value.slice(lastIndex);
-};
-const escapeText = (value) => escapeString(value, "text");
-const escapeAttr = (value) => escapeString(value, "attr");
-const renderSSRAttr = (name, value) => {
-	if (value === false || value === void 0 || value === null) return "";
-	if (value === true) return ` ${name}`;
-	return ` ${name}="${escapeAttr(String(value))}"`;
-};
-const renderStringArray = (values) => {
-	let output = "";
-	for (let index = 0; index < values.length; index += 1) output += renderStringNode(values[index]);
-	return output;
-};
-const renderSSRTemplateValue = (value) => {
-	if (value === false || value === null || value === void 0) return "";
-	if (Array.isArray(value)) return renderStringArray(value);
-	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return escapeText(String(value));
-	if (isSSRTemplate(value)) return renderSSRTemplateNode(value);
-	if (isProjectionSlot(value)) return renderProjectionSlotToString(value);
-	if (isRouteSlot(value)) {
-		const routeElement = resolveRouteSlot(getCurrentContainer(), value);
-		return routeElement ? renderStringNode(routeElement) : "";
-	}
-	return renderStringNode(value);
-};
-const renderSSRTemplateNode = (template) => {
-	let output = template.strings[0] ?? "";
-	for (let index = 0; index < template.values.length; index += 1) {
-		const value = template.values[index];
-		output += isSSRAttrValue(value) ? renderSSRAttr(value.name, value.value) : renderSSRTemplateValue(value);
-		output += template.strings[index + 1] ?? "";
-	}
-	return output;
+	restorePendingFocus$1(container.doc, pending);
+};
+let ssrRenderer = null;
+const getSSRRenderer = () => {
+	ssrRenderer ??= createSSRRenderer({
+		getCurrentContainer,
+		isProjectionSlot: (value) => isProjectionSlot(value),
+		isRouteSlot: (value) => isRouteSlot(value),
+		renderProjectionSlotToString: (value) => renderProjectionSlotToString(value),
+		renderStringNode,
+		resolveRouteSlot: (container, slot) => resolveRouteSlot(container, slot)
+	});
+	return ssrRenderer;
 };
+const renderSSRAttr = (name, value) => getSSRRenderer().renderSSRAttr(name, value);
+const renderSSRValue = (value) => getSSRRenderer().renderSSRValue(value);
+const renderSSRMap = (value, renderItem) => getSSRRenderer().renderSSRMap(value, renderItem);
+const renderStringArray = (values) => withActiveKeyedRangeScope(allocateKeyedRangeScope(), () => renderSSRValue(values));
+const renderSSRTemplateNode = (template) => renderSSRValue(template);
 const resolveRenderable = (value) => {
 	let current = value;
 	while (typeof current === "function" && !getLazyMeta(current) && !getComponentMeta(current) && !getContextProviderMeta(current)) current = current();
@@ -3314,8 +3676,28 @@ const renderProjectionSlotToString = (slot) => {
 	if (frame?.component.id === slot.componentId && frame.projectionState.reuseExistingDom) return `<!--${start}--><!--${end}-->`;
 	return `<!--${start}-->${renderStringNode(slot.source)}<!--${end}-->`;
 };
-const wrapStringWithKeyedRange = (value, key) => {
-	return `<!--${createKeyedRangeMarker(key, "start")}-->${value}<!--${createKeyedRangeMarker(key, "end")}-->`;
+let unscopedKeyedRangeScopeCounter = 0;
+const allocateKeyedRangeScope = () => {
+	const frame = getCurrentFrame();
+	if (!frame) return `global:${unscopedKeyedRangeScopeCounter++}`;
+	return `${frame.component.id}:k${frame.keyedRangeCursor++}`;
+};
+const withActiveKeyedRangeScope = (scope, render) => {
+	const frame = getCurrentFrame();
+	if (!frame) return render();
+	frame.keyedRangeScopeStack.push(scope);
+	try {
+		return render();
+	} finally {
+		frame.keyedRangeScopeStack.pop();
+	}
+};
+const resolveKeyedRangeScope = () => {
+	const frame = getCurrentFrame();
+	return (frame && frame.keyedRangeScopeStack.length > 0 ? frame.keyedRangeScopeStack[frame.keyedRangeScopeStack.length - 1] : null) ?? allocateKeyedRangeScope();
+};
+const wrapStringWithKeyedRange = (value, scope, key) => {
+	return `<!--${createKeyedRangeMarker(scope, key, "start")}-->${value}<!--${createKeyedRangeMarker(scope, key, "end")}-->`;
 };
 const resolveForItemKey = (value, item, index) => value.key ? value.key(item, index) : typeof item === "string" || typeof item === "number" || typeof item === "symbol" ? item : index;
 const stripForChildRootKey = (value) => {
@@ -3332,10 +3714,11 @@ const resolveShowBranch = (value) => {
 };
 const renderForValueToString = (value) => {
 	if (value.arr.length === 0) return renderStringNode(value.fallback ?? null);
+	const scope = allocateKeyedRangeScope();
 	let output = "";
 	for (let index = 0; index < value.arr.length; index += 1) {
 		const item = value.arr[index];
-		output += wrapStringWithKeyedRange(renderStringNode(stripForChildRootKey(value.fn(item, index))), resolveForItemKey(value, item, index));
+		output += wrapStringWithKeyedRange(renderStringNode(stripForChildRootKey(value.fn(item, index))), scope, resolveForItemKey(value, item, index));
 	}
 	return output;
 };
@@ -3351,6 +3734,199 @@ const renderProjectionSlotToNodes = (slot, container) => {
 		end
 	];
 };
+const createExternalRootHtml = (componentId, kind, body) => `<e-island-root ${EXTERNAL_ROOT_ATTR}="true" ${EXTERNAL_ROOT_COMPONENT_ATTR}="${escapeAttr(componentId)}" ${EXTERNAL_ROOT_KIND_ATTR}="${escapeAttr(kind)}">${body}</e-island-root>`;
+const createExternalRootNode = (container, componentId, kind, body) => {
+	if (!container.doc) throw new Error("Client rendering requires a document.");
+	const host = container.doc.createElement("e-island-root");
+	host.setAttribute(EXTERNAL_ROOT_ATTR, "true");
+	host.setAttribute(EXTERNAL_ROOT_COMPONENT_ATTR, componentId);
+	host.setAttribute(EXTERNAL_ROOT_KIND_ATTR, kind);
+	if (body) host.innerHTML = body;
+	return host;
+};
+const getExternalRoot = (component) => {
+	if (!component.start || !component.end) return null;
+	let cursor = component.start.nextSibling;
+	while (cursor && cursor !== component.end) {
+		if (isElementNode(cursor) && cursor.getAttribute("data-e-external-root") === "true") return cursor;
+		cursor = cursor.nextSibling;
+	}
+	return null;
+};
+const findExternalSlotHost = (host, kind, name) => {
+	if (typeof host.querySelectorAll !== "function") return host.querySelector?.(`${getExternalSlotTag(kind)}[data-e-slot="${name}"]`) ?? null;
+	const matches = [...host.querySelectorAll(`${getExternalSlotTag(kind)}[data-e-slot="${name}"]`)];
+	if (matches.length === 0) return null;
+	for (let index = matches.length - 1; index >= 0; index -= 1) {
+		const candidate = matches[index];
+		if (candidate.childNodes.length > 0 || (candidate.innerHTML ?? "") !== "") return candidate;
+	}
+	return matches[0];
+};
+const captureExternalSlotDom = (component) => {
+	if (!component.external) return null;
+	const host = getExternalRoot(component);
+	if (!host || typeof host.querySelector !== "function") return null;
+	const captured = /* @__PURE__ */ new Map();
+	for (const name of component.external.slots) {
+		const slotHost = findExternalSlotHost(host, component.external.kind, name);
+		captured.set(name, slotHost ? [...slotHost.childNodes] : []);
+	}
+	return captured;
+};
+const captureExternalSlotHtml = (component) => {
+	if (!component.external) return null;
+	const host = getExternalRoot(component);
+	if (!host || typeof host.querySelector !== "function") return null;
+	const captured = /* @__PURE__ */ new Map();
+	for (const name of component.external.slots) {
+		const slotHost = findExternalSlotHost(host, component.external.kind, name);
+		captured.set(name, slotHost?.innerHTML ?? "");
+	}
+	return captured;
+};
+const createExternalProjectionSlotOwnerId = (componentId, name, occurrence) => `${componentId}.$slot:${encodeURIComponent(name)}:${occurrence}`;
+const renderExternalProjectionSlotNodes = (container, component, name, occurrence, source) => {
+	const ownerId = createExternalProjectionSlotOwnerId(component.id, name, occurrence);
+	return {
+		nodes: renderClientInsertableForOwner(source, container, {
+			childIndex: 0,
+			componentId: ownerId,
+			keyedRangeCursor: 0,
+			projectionCounters: []
+		}),
+		ownerId
+	};
+};
+const syncExternalProjectionSlotDom = (container, component, props, host) => {
+	if (!component.external || !component.projectionSlots) return false;
+	const oldDescendants = collectDescendantIds(container, component.id);
+	const slotRanges = collectProjectionSlotRanges([host]);
+	const keptSlotOwners = /* @__PURE__ */ new Set();
+	let changed = false;
+	for (const [name, totalOccurrences] of Object.entries(component.projectionSlots)) for (let occurrence = 0; occurrence < totalOccurrences; occurrence += 1) {
+		const rangeKey = createProjectionSlotRangeKey(component.id, name, occurrence);
+		const range = slotRanges.get(rangeKey);
+		if (!hasProjectionSlotValue(props, name)) {
+			if (!range) continue;
+			if (!tryPatchBoundaryContentsInPlace(range.start, range.end, [])) replaceProjectionSlotContents(range.start, range.end, []);
+			changed = true;
+			continue;
+		}
+		const slotHost = range || occurrence > 0 ? null : findExternalSlotHost(host, component.external.kind, name);
+		if (!range && !slotHost) continue;
+		const { nodes, ownerId } = renderExternalProjectionSlotNodes(container, component, name, occurrence, props[name]);
+		keptSlotOwners.add(ownerId);
+		if (range) {
+			if (!tryPatchBoundaryContentsInPlace(range.start, range.end, nodes)) replaceProjectionSlotContents(range.start, range.end, nodes);
+			changed = true;
+			continue;
+		}
+		if (!slotHost) continue;
+		while (slotHost.firstChild) slotHost.firstChild.remove();
+		const start = container.doc.createComment(createProjectionSlotMarker(component.id, name, occurrence, "start"));
+		const end = container.doc.createComment(createProjectionSlotMarker(component.id, name, occurrence, "end"));
+		slotHost.appendChild(start);
+		for (const node of nodes) slotHost.appendChild(node);
+		slotHost.appendChild(end);
+		rememberManagedAttributesForNodes([
+			start,
+			...nodes,
+			end
+		]);
+		slotRanges.set(rangeKey, {
+			end,
+			start
+		});
+		changed = true;
+	}
+	if (!changed) return false;
+	bindComponentBoundaries(container, host);
+	restoreSignalRefs(container, host);
+	bindRouterLinks(container, host);
+	const keptDescendants = expandComponentIdsToDescendants(container, [...collectComponentBoundaryIds([host]), ...keptSlotOwners]);
+	pruneRemovedComponents(container, component.id, keptDescendants);
+	for (const descendantId of oldDescendants) {
+		if (keptDescendants.has(descendantId)) continue;
+		clearComponentSubscriptions(container, descendantId);
+	}
+	component.externalSlotDom = captureExternalSlotDom(component);
+	component.externalSlotHtml = captureExternalSlotHtml(component);
+	return true;
+};
+const restoreExternalSlotDom = (component, host) => {
+	if (!component.external || !component.externalSlotDom || typeof host.querySelector !== "function") return;
+	for (const [name, nodes] of component.externalSlotDom) {
+		const slotHost = findExternalSlotHost(host, component.external.kind, name);
+		if (!slotHost || slotHost.childNodes.length > 0 || nodes.length === 0) continue;
+		for (const node of nodes) slotHost.appendChild(node);
+	}
+};
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const renderExternalSlotContentToString = (componentId, name, occurrence, source) => {
+	if (source === null || source === void 0 || source === false) return "";
+	return renderProjectionSlotToString(createProjectionSlot(componentId, name, occurrence, source));
+};
+const injectExternalSlotHtml = (componentId, kind, projectionSlots, props, html) => {
+	if (!projectionSlots) return html;
+	const slotTag = getExternalSlotTag(kind);
+	let nextHtml = html;
+	for (const [name, totalOccurrences] of Object.entries(projectionSlots)) {
+		if (!hasProjectionSlotValue(props, name)) continue;
+		const pattern = new RegExp(`<${slotTag}([^>]*?)data-e-slot=(["'])${escapeRegExp(name)}\\2([^>]*)>([\\s\\S]*?)</${slotTag}>`);
+		for (let occurrence = 0; occurrence < totalOccurrences; occurrence += 1) {
+			const slotHtml = renderExternalSlotContentToString(componentId, name, occurrence, props[name]);
+			nextHtml = nextHtml.replace(pattern, `<${slotTag}$1data-e-slot="${name}"$3>${slotHtml}</${slotTag}>`);
+		}
+	}
+	return nextHtml;
+};
+const renderExternalComponentHtml = (container, componentId, external, props, projectionSlots) => {
+	const cacheKey = `${componentId}:${external.kind}`;
+	const cached = container.externalRenderCache.get(cacheKey);
+	if (cached?.status === "resolved") return injectExternalSlotHtml(componentId, external.kind, projectionSlots, props, cached.html ?? "");
+	if (cached?.status === "rejected") throw cached.error;
+	if (cached?.status === "pending") {
+		if (cached.pending) container.pendingSuspensePromises.add(cached.pending);
+		return "";
+	}
+	const result = external.renderToString(props);
+	if (typeof result === "string") {
+		container.externalRenderCache.set(cacheKey, {
+			html: result,
+			status: "resolved"
+		});
+		return injectExternalSlotHtml(componentId, external.kind, projectionSlots, props, result);
+	}
+	const pending = Promise.resolve(result).then((resolved) => {
+		container.externalRenderCache.set(cacheKey, {
+			html: resolved,
+			status: "resolved"
+		});
+		return resolved;
+	}, (error) => {
+		container.externalRenderCache.set(cacheKey, {
+			error,
+			status: "rejected"
+		});
+		throw error;
+	});
+	container.externalRenderCache.set(cacheKey, {
+		pending,
+		status: "pending"
+	});
+	container.pendingSuspensePromises.add(pending);
+	return "";
+};
+const syncExternalComponentInstance = async (component, external, props, host) => {
+	if (component.externalInstance === void 0) {
+		component.externalMeta = external;
+		component.externalInstance = await external.hydrate(host, props);
+		return;
+	}
+	component.externalMeta = external;
+	component.externalInstance = await external.update(component.externalInstance, host, props);
+};
 const renderContextProviderToString = (token, props) => withRuntimeContextValue(token, props.value, () => renderStringNode(props.children ?? null));
 const renderContextProviderToNodes = (token, props, container) => withRuntimeContextValue(token, props.value, () => renderClientNodes(props.children ?? null, container));
 const renderStringNode = (inputElementLike) => {
@@ -3359,6 +3935,7 @@ const renderStringNode = (inputElementLike) => {
 	if (resolved === false || resolved === null || resolved === void 0) return "";
 	if (Array.isArray(resolved)) return renderStringNode(resolved);
 	if (typeof resolved === "string" || typeof resolved === "number" || typeof resolved === "boolean") return escapeText(String(resolved));
+	if (isSSRRawValue(resolved)) return resolved.value;
 	if (isShowValue(resolved)) return renderStringNode(resolveShowBranch(resolved));
 	if (isForValue(resolved)) return renderForValueToString(resolved);
 	if (isSSRTemplate(resolved)) return renderSSRTemplateNode(resolved);
@@ -3370,7 +3947,7 @@ const renderStringNode = (inputElementLike) => {
 	if (!isRenderObject(resolved)) return "";
 	if (isSuspenseType(resolved.type)) {
 		const rendered = renderSuspenseComponentToString(resolved.props);
-		return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolved.key);
+		return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key);
 	}
 	if (typeof resolved.type === "function") {
 		const providerMeta = getContextProviderMeta(resolved.type);
@@ -3380,24 +3957,33 @@ const renderStringNode = (inputElementLike) => {
 		const meta = getComponentMeta(componentFn);
 		if (!meta || !container) {
 			const rendered = renderStringNode(componentFn(resolved.props));
-			return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolved.key);
+			return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key);
 		}
 		const evaluatedProps = evaluateProps(resolved.props);
 		const position = nextComponentPosition(container);
 		const componentId = createComponentId(container, position.parentId, position.childIndex);
 		const component = getOrCreateComponentState(container, componentId, meta.symbol, position.parentId);
 		component.scopeId = registerScope(container, meta.captures());
+		component.external = meta.external;
 		component.optimizedRoot = meta.optimizedRoot === true;
 		component.props = evaluatedProps;
 		component.projectionSlots = meta.projectionSlots ?? null;
+		component.rawProps = resolved.props;
+		const externalMeta = getExternalComponentMeta(componentFn);
+		if (externalMeta) {
+			const externalBody = renderExternalComponentHtml(container, componentId, externalMeta, evaluatedProps, component.projectionSlots);
+			const host = createExternalRootHtml(componentId, externalMeta.kind, externalBody);
+			const rendered = `${createComponentBoundaryHtmlComment(componentId, "start")}${host}${createComponentBoundaryHtmlComment(componentId, "end")}`;
+			return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key);
+		}
 		const frame = createFrame(container, component, "ssr");
 		clearComponentSubscriptions(container, component.id);
 		const renderProps = createRenderProps(componentId, meta, resolved.props);
 		const body = pushFrame(frame, () => renderStringNode(componentFn(renderProps)));
 		pruneComponentVisibles(container, component, frame.visibleCursor);
 		pruneComponentWatches(container, component, frame.watchCursor);
-		const rendered = `<!--ec:c:${componentId}:start-->${renderFrameScopedStylesToString(frame)}${body}<!--ec:c:${componentId}:end-->`;
-		return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolved.key);
+		const rendered = `${createComponentBoundaryHtmlComment(componentId, "start")}${renderFrameScopedStylesToString(frame)}${body}${createComponentBoundaryHtmlComment(componentId, "end")}`;
+		return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key);
 	}
 	const attrParts = [];
 	const container = getCurrentContainer();
@@ -3408,9 +3994,10 @@ const renderStringNode = (inputElementLike) => {
 	for (const name in resolved.props) {
 		if (!Object.hasOwn(resolved.props, name)) continue;
 		if (name === "children") continue;
+		if (name === "key") continue;
 		const eventName = toEventName(name);
 		const value = resolved.props[name];
-		if (name === BIND_VALUE_PROP) {
+		if (name === "bind:value") {
 			const signalId = getBindableSignalId(value);
 			if (!signalId) continue;
 			attrParts.push(`${BIND_VALUE_ATTR}="${escapeAttr(signalId)}"`);
@@ -3418,7 +4005,7 @@ const renderStringNode = (inputElementLike) => {
 			if (currentValue !== void 0 && currentValue !== null) attrParts.push(`value="${escapeAttr(String(currentValue))}"`);
 			continue;
 		}
-		if (name === BIND_CHECKED_PROP) {
+		if (name === "bind:checked") {
 			const signalId = getBindableSignalId(value);
 			if (!signalId) continue;
 			attrParts.push(`${BIND_CHECKED_ATTR}="${escapeAttr(signalId)}"`);
@@ -3437,7 +4024,7 @@ const renderStringNode = (inputElementLike) => {
 			if (signalId) attrParts.push(`${REF_SIGNAL_ATTR}="${escapeAttr(signalId)}"`);
 			continue;
 		}
-		if (name === DANGEROUSLY_SET_INNER_HTML_PROP) {
+		if (isDangerouslySetInnerHTMLProp(name)) {
 			hasInnerHTML = true;
 			innerHTML = resolveDangerouslySetInnerHTML(value);
 			continue;
@@ -3452,13 +4039,9 @@ const renderStringNode = (inputElementLike) => {
 	}
 	if (resolved.type === "body" && container) attrParts.push("data-e-resume=\"paused\"");
 	let childrenText = innerHTML ?? "";
-	if (!hasInnerHTML) {
-		const children = resolved.props.children;
-		if (Array.isArray(children)) for (const child of children) childrenText += renderStringNode(child);
-		else childrenText += renderStringNode(children);
-	}
+	if (!hasInnerHTML) childrenText += renderStringNode(resolved.props.children);
 	const rendered = resolved.type === "__ECLIPSA_FRAGMENT" ? childrenText : `<${resolved.type}${attrParts.length > 0 ? ` ${attrParts.join(" ")}` : ""}>${childrenText}</${resolved.type}>`;
-	return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolved.key);
+	return resolved.key === null || resolved.key === void 0 ? rendered : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key);
 };
 const createElementNode = (doc, tagName) => doc.createElement(tagName);
 const renderComponentToNodes = (componentFn, props, container, mode, rawProps) => {
@@ -3474,23 +4057,54 @@ const renderComponentToNodes = (componentFn, props, container, mode, rawProps) =
 	const previousRenderProps = component.rawProps ?? component.props ?? null;
 	component.active = mode === "client";
 	if (!existing || symbolChanged) resetComponentForSymbolChange(container, component, meta);
+	component.external = meta.external;
 	component.optimizedRoot = meta.optimizedRoot === true;
 	component.props = props;
 	component.rawProps = rawProps ?? null;
 	component.projectionSlots = meta.projectionSlots ?? null;
+	const externalMeta = getExternalComponentMeta(componentFn);
 	const parentFrame = getCurrentFrame();
 	const shouldReuseProjectionSlotDom = parentFrame?.projectionState.reuseProjectionSlotDom ?? false;
 	const previousStart = component.start;
 	const previousEnd = component.end;
-	const boundaryContentsChanged = symbolChanged || !areShallowEqualRenderProps(previousRenderProps, rawProps ?? props ?? null) || !wasActive && !!previousStart && !!previousEnd;
+	const propsChanged = symbolChanged || !areShallowEqualRenderProps(previousRenderProps, rawProps ?? props ?? null);
+	const boundaryContentsChanged = propsChanged || !wasActive && !!previousStart && !!previousEnd;
+	if (mode === "client" && externalMeta && previousStart && previousEnd && !symbolChanged) {
+		const { end, start } = createComponentBoundaryPair(container.doc, componentId);
+		const host = getExternalRoot(component);
+		if (wasActive && host && propsChanged) withClientContainer(container, async () => {
+			syncExternalProjectionSlotDom(container, component, props, host);
+			await syncExternalComponentInstance(component, externalMeta, props, host);
+			syncExternalProjectionSlotDom(container, component, props, host);
+			rebindExternalHost(container, host);
+			scheduleExternalHostRebind(container, host);
+		});
+		if (parentFrame) for (const descendantId of expandComponentIdsToDescendants(container, [componentId])) parentFrame.visitedDescendants.add(descendantId);
+		return [start, end];
+	}
 	if (mode === "client" && wasActive && previousStart && previousEnd && !boundaryContentsChanged) {
-		const start = container.doc.createComment(`ec:c:${componentId}:start`);
-		const end = container.doc.createComment(`ec:c:${componentId}:end`);
-		start[COMPONENT_BOUNDARY_PROPS_CHANGED] = false;
-		start[COMPONENT_BOUNDARY_SYMBOL_CHANGED] = false;
+		const { end, start } = createComponentBoundaryPair(container.doc, componentId);
 		if (parentFrame) for (const descendantId of expandComponentIdsToDescendants(container, [componentId])) parentFrame.visitedDescendants.add(descendantId);
 		return [start, end];
 	}
+	if (externalMeta) {
+		const { end, start } = createComponentBoundaryPair(container.doc, componentId, {
+			propsChanged: true,
+			symbolChanged
+		});
+		if (!previousStart || !previousEnd) {
+			component.start = start;
+			component.end = end;
+		}
+		const host = createExternalRootNode(container, componentId, externalMeta.kind);
+		if (parentFrame) parentFrame.visitedDescendants.add(componentId);
+		if (mode === "client") scheduleExternalComponentMount(container, component, externalMeta, props);
+		return [
+			start,
+			host,
+			end
+		];
+	}
 	const speculativeEffectCleanupSlot = !previousStart || !previousEnd ? null : boundaryContentsChanged ? null : createCleanupSlot();
 	if (!speculativeEffectCleanupSlot) resetComponentRenderEffects(component);
 	const frame = createFrame(container, component, mode, {
@@ -3500,10 +4114,10 @@ const renderComponentToNodes = (componentFn, props, container, mode, rawProps) =
 	});
 	clearComponentSubscriptions(container, componentId);
 	const oldDescendants = collectDescendantIds(container, componentId);
-	const start = container.doc.createComment(`ec:c:${componentId}:start`);
-	const end = container.doc.createComment(`ec:c:${componentId}:end`);
-	start[COMPONENT_BOUNDARY_PROPS_CHANGED] = boundaryContentsChanged;
-	start[COMPONENT_BOUNDARY_SYMBOL_CHANGED] = symbolChanged;
+	const { end, start } = createComponentBoundaryPair(container.doc, componentId, {
+		propsChanged: boundaryContentsChanged,
+		symbolChanged
+	});
 	if (!previousStart || !previousEnd) {
 		component.start = start;
 		component.end = end;
@@ -3548,28 +4162,29 @@ const renderComponentToNodes = (componentFn, props, container, mode, rawProps) =
 		end
 	];
 };
-const wrapNodesWithKeyedRange = (doc, nodes, key) => [
-	doc.createComment(createKeyedRangeMarker(key, "start")),
+const wrapNodesWithKeyedRange = (doc, nodes, scope, key) => [
+	doc.createComment(createKeyedRangeMarker(scope, key, "start")),
 	...nodes,
-	doc.createComment(createKeyedRangeMarker(key, "end"))
+	doc.createComment(createKeyedRangeMarker(scope, key, "end"))
 ];
 const renderForValueToNodes = (value, container) => {
 	if (value.arr.length === 0) return renderClientNodes(value.fallback ?? null, container);
+	const scope = allocateKeyedRangeScope();
 	const nodes = [];
 	for (let index = 0; index < value.arr.length; index += 1) {
 		const item = value.arr[index];
-		nodes.push(...wrapNodesWithKeyedRange(container.doc, renderClientNodes(stripForChildRootKey(value.fn(item, index)), container), resolveForItemKey(value, item, index)));
+		nodes.push(...wrapNodesWithKeyedRange(container.doc, renderClientNodes(stripForChildRootKey(value.fn(item, index)), container), scope, resolveForItemKey(value, item, index)));
 	}
 	return nodes;
 };
 const applyElementProp = (element, name, value, container) => {
-	if (name === BIND_VALUE_PROP) {
+	if (name === "bind:value") {
 		const signalId = getBindableSignalId(value);
 		if (signalId) element.setAttribute(BIND_VALUE_ATTR, signalId);
 		if ("value" in element) element.value = String(readBindableSignalValue(value) ?? "");
 		return;
 	}
-	if (name === BIND_CHECKED_PROP) {
+	if (name === "bind:checked") {
 		const signalId = getBindableSignalId(value);
 		if (signalId) element.setAttribute(BIND_CHECKED_ATTR, signalId);
 		if (isHTMLInputElementNode(element)) element.checked = Boolean(readBindableSignalValue(value));
@@ -3588,7 +4203,7 @@ const applyElementProp = (element, name, value, container) => {
 		assignRuntimeRef(value, element, container);
 		return;
 	}
-	if (name === DANGEROUSLY_SET_INNER_HTML_PROP) {
+	if (isDangerouslySetInnerHTMLProp(name)) {
 		const html = resolveDangerouslySetInnerHTML(value);
 		if (html !== null) element.innerHTML = html;
 		return;
@@ -3612,7 +4227,7 @@ const applyElementProp = (element, name, value, container) => {
 };
 const renderClientNodes = (inputElementLike, container) => {
 	if (!container.doc) throw new Error("Client rendering requires a document.");
-	if (Array.isArray(inputElementLike)) return inputElementLike.flatMap((entry) => renderClientNodes(entry, container));
+	if (Array.isArray(inputElementLike)) return withActiveKeyedRangeScope(allocateKeyedRangeScope(), () => inputElementLike.flatMap((entry) => renderClientNodes(entry, container)));
 	const resolved = resolveRenderable(inputElementLike);
 	if (resolved === false || resolved === null || resolved === void 0) return [];
 	if (Array.isArray(resolved)) return renderClientNodes(resolved, container);
@@ -3639,10 +4254,8 @@ const renderClientNodes = (inputElementLike, container) => {
 			if (getComponentMeta(resolved.type)) nodes = withoutTrackedEffect(() => renderComponentToNodes(componentFn, evaluateProps(resolved.props), container, "client", resolved.props));
 			else nodes = renderComponentToNodes(componentFn, resolved.props, container, "client", resolved.props);
 		}
-	} else if (resolved.type === "__ECLIPSA_FRAGMENT") {
-		const children = resolved.props.children;
-		nodes = Array.isArray(children) ? children.flatMap((child) => renderClientNodes(child, container)) : renderClientNodes(children, container);
-	} else {
+	} else if (resolved.type === "__ECLIPSA_FRAGMENT") nodes = renderClientNodes(resolved.props.children, container);
+	else {
 		const element = createElementNode(container.doc, resolved.type);
 		const frame = getCurrentFrame();
 		if (frame && hasScopedStyles(frame) && resolved.type !== "style") element.setAttribute(SCOPED_STYLE_ATTR, frame.component.scopeId);
@@ -3651,35 +4264,33 @@ const renderClientNodes = (inputElementLike, container) => {
 			if (name === "children") continue;
 			const value = descriptor.get ? descriptor.get.call(resolved.props) : descriptor.value;
 			if (resolved.type === "body" && name === "data-e-resume") continue;
-			if (name === DANGEROUSLY_SET_INNER_HTML_PROP) hasInnerHTML = true;
+			if (isDangerouslySetInnerHTMLProp(name)) hasInnerHTML = true;
 			applyElementProp(element, name, value, container);
 		}
 		if (hasInnerHTML) {
 			rememberManagedAttributesForNode(element);
 			nodes = [element];
 		} else {
-			const children = resolved.props.children;
-			const childNodes = Array.isArray(children) ? children.flatMap((child) => renderClientNodes(child, container)) : renderClientNodes(children, container);
+			const childNodes = renderClientNodes(resolved.props.children, container);
 			for (const child of childNodes) element.appendChild(child);
 			rememberManagedAttributesForNode(element);
 			nodes = [element];
 		}
 	}
-	return resolved.key === null || resolved.key === void 0 ? nodes : wrapNodesWithKeyedRange(container.doc, nodes, resolved.key);
+	return resolved.key === null || resolved.key === void 0 ? nodes : wrapNodesWithKeyedRange(container.doc, nodes, resolveKeyedRangeScope(), resolved.key);
 };
 const scanComponentBoundaries = (root) => {
-	const walker = root.ownerDocument.createTreeWalker(root, DOM_SHOW_COMMENT);
+	const walker = root.ownerDocument.createTreeWalker(root, 128);
 	const boundaries = /* @__PURE__ */ new Map();
 	while (walker.nextNode()) {
 		const node = walker.currentNode;
-		if (!(node.nodeType === DOM_COMMENT_NODE || typeof Comment !== "undefined" && node instanceof Comment)) continue;
-		const matched = node.data.match(/^ec:c:(.+):(start|end)$/);
-		if (!matched) continue;
-		const [, id, edge] = matched;
-		const boundary = boundaries.get(id) ?? {};
-		if (edge === "start") boundary.start = node;
+		if (!(node.nodeType === 8 || typeof Comment !== "undefined" && node instanceof Comment)) continue;
+		const marker = parseComponentBoundaryMarker(node.data);
+		if (!marker) continue;
+		const boundary = boundaries.get(marker.id) ?? {};
+		if (marker.kind === "start") boundary.start = node;
 		else boundary.end = node;
-		boundaries.set(id, boundary);
+		boundaries.set(marker.id, boundary);
 	}
 	return boundaries;
 };
@@ -3708,7 +4319,7 @@ const toMountedNodes = (value, container) => {
 	if (!container.doc) throw new Error("Client rendering requires a document.");
 	let resolved = value;
 	while (typeof resolved === "function") resolved = resolved();
-	if (Array.isArray(resolved)) return resolved.flatMap((entry) => toMountedNodes(entry, container));
+	if (Array.isArray(resolved)) return withActiveKeyedRangeScope(allocateKeyedRangeScope(), () => resolved.flatMap((entry) => toMountedNodes(entry, container)));
 	if (resolved === null || resolved === void 0 || resolved === false) return [container.doc.createComment("eclipsa-empty")];
 	if (typeof Node !== "undefined" && resolved instanceof Node) return [resolved];
 	if (typeof resolved === "string" || typeof resolved === "number" || typeof resolved === "boolean") return [container.doc.createTextNode(String(resolved))];
@@ -3724,6 +4335,7 @@ const captureClientInsertOwner = (container, siteKey) => {
 	return {
 		childIndex: 0,
 		componentId: ownerComponentId,
+		keyedRangeCursor: frame.keyedRangeCursor,
 		projectionCounters: [...frame.projectionState.counters.entries()]
 	};
 };
@@ -3733,18 +4345,19 @@ const createDetachedClientInsertOwner = (container) => {
 	return {
 		childIndex: 0,
 		componentId,
+		keyedRangeCursor: 0,
 		projectionCounters: []
 	};
 };
 const inferClientInsertOwnerParentId = (componentId) => {
-	if (componentId.startsWith(CLIENT_INSERT_OWNER_ID_PREFIX)) return ROOT_COMPONENT_ID;
+	if (componentId.startsWith("$insert:")) return ROOT_COMPONENT_ID;
 	const lastDotIndex = componentId.lastIndexOf(".");
 	if (lastDotIndex < 0) return ROOT_COMPONENT_ID;
 	return componentId.slice(0, lastDotIndex);
 };
 const renderClientInsertableForOwner = (value, container, owner) => {
 	if (!owner) return renderClientInsertable(value, container);
-	const component = container.components.get(owner.componentId) ?? getOrCreateComponentState(container, owner.componentId, CLIENT_INSERT_OWNER_SYMBOL, inferClientInsertOwnerParentId(owner.componentId));
+	const component = container.components.get(owner.componentId) ?? getOrCreateComponentState(container, owner.componentId, "$client-insert-root", inferClientInsertOwnerParentId(owner.componentId));
 	const parentFrame = getCurrentFrame();
 	const oldDescendants = collectDescendantIds(container, owner.componentId);
 	const frame = createFrame(container, component, "client", {
@@ -3752,6 +4365,7 @@ const renderClientInsertableForOwner = (value, container, owner) => {
 		reuseProjectionSlotDom: false
 	});
 	frame.childCursor = owner.childIndex;
+	frame.keyedRangeCursor = owner.keyedRangeCursor;
 	frame.projectionState.counters = new Map(owner.projectionCounters);
 	const nodes = pushContainer(container, () => pushFrame(frame, () => renderClientInsertable(value, container)));
 	const keptDescendants = expandComponentIdsToDescendants(container, [...frame.visitedDescendants, ...collectComponentBoundaryIds(nodes)]);
@@ -3769,7 +4383,7 @@ const renderClientInsertableForOwner = (value, container, owner) => {
 const renderClientInsertable = (value, container = getCurrentContainer()) => {
 	const doc = container?.doc ?? (typeof document !== "undefined" ? document : null);
 	if (!doc) return [];
-	if (Array.isArray(value)) return value.flatMap((entry) => renderClientInsertable(entry, container));
+	if (Array.isArray(value)) return withActiveKeyedRangeScope(allocateKeyedRangeScope(), () => value.flatMap((entry) => renderClientInsertable(entry, container)));
 	let resolved = value;
 	while (typeof resolved === "function") resolved = resolved();
 	if (resolved === null || resolved === void 0 || resolved === false) return [doc.createComment("eclipsa-empty")];
@@ -3811,51 +4425,6 @@ const resetContainerForRouteRender = (container) => {
 		if (!isRouterSignalId(id) && !isAtomSignalId(id)) container.signals.delete(id);
 	}
 };
-const isRouteSlot = (value) => isPlainObject(value) && value.__eclipsa_type === ROUTE_SLOT_TYPE;
-const createRouteSlot = (route, startLayoutIndex) => {
-	const slot = {
-		__eclipsa_type: ROUTE_SLOT_TYPE,
-		pathname: route.pathname,
-		startLayoutIndex
-	};
-	Object.defineProperty(slot, ROUTE_SLOT_ROUTE_KEY, {
-		configurable: true,
-		enumerable: false,
-		value: route,
-		writable: true
-	});
-	return slot;
-};
-const resolveRouteSlot = (container, slot) => {
-	const route = slot[ROUTE_SLOT_ROUTE_KEY] ?? container?.router?.loadedRoutes.get(routeCacheKey(slot.pathname, "page"));
-	if (!route) return null;
-	return createRouteElement(route, slot.startLayoutIndex);
-};
-const createRouteElement = (route, startLayoutIndex = 0) => {
-	const createRouteProps = (props) => {
-		const nextProps = { ...props };
-		Object.defineProperty(nextProps, ROUTE_PARAMS_PROP, {
-			configurable: true,
-			enumerable: false,
-			value: route.params,
-			writable: true
-		});
-		Object.defineProperty(nextProps, ROUTE_ERROR_PROP, {
-			configurable: true,
-			enumerable: false,
-			value: route.error,
-			writable: true
-		});
-		return nextProps;
-	};
-	if (startLayoutIndex >= route.layouts.length) return jsxDEV(route.page.renderer, createRouteProps({}), null, false, {});
-	let children = null;
-	for (let index = route.layouts.length - 1; index >= startLayoutIndex; index -= 1) {
-		const layout = route.layouts[index];
-		children = jsxDEV(layout.renderer, createRouteProps({ children: createRouteSlot(route, index + 1) }), null, false, {});
-	}
-	return children;
-};
 const trackSuspenseBoundaryPromise = (container, componentId, promise) => {
 	const component = container.components.get(componentId);
 	if (!component) return;
@@ -3874,13 +4443,12 @@ const renderSuspenseContentToString = (props, container, componentId) => {
 		return renderStringNode(typeof props.children === "function" ? props.children() : props.children ?? null);
 	} catch (error) {
 		if (!isPendingSignalError(error)) throw error;
-		container.pendingSuspensePromises.add(error.promise);
 		const component = container.components.get(componentId);
 		if (component) component.suspensePromise = error.promise;
 		return renderStringNode(props.fallback ?? null);
 	}
 };
-const collectPendingSuspenseBoundaryIds = (container) => [...container.components.values()].filter((component) => component.symbol === SUSPENSE_COMPONENT_SYMBOL && !!component.suspensePromise).map((component) => component.id).sort((left, right) => left.split(".").length - right.split(".").length);
+const collectPendingSuspenseBoundaryIds = (container) => [...container.components.values()].filter((component) => component.symbol === "$suspense" && !!component.suspensePromise).map((component) => component.id).sort((left, right) => left.split(".").length - right.split(".").length);
 const renderSuspenseContentToNodes = (props, container, componentId) => {
 	try {
 		return toMountedNodes(typeof props.children === "function" ? props.children() : props.children ?? null, container);
@@ -3907,7 +4475,7 @@ const renderSuspenseComponentToString = (props) => {
 	const body = pushFrame(frame, () => renderSuspenseContentToString(component.props, container, componentId));
 	pruneComponentVisibles(container, component, frame.visibleCursor);
 	pruneComponentWatches(container, component, frame.watchCursor);
-	return `<!--ec:c:${componentId}:start-->${body}<!--ec:c:${componentId}:end-->`;
+	return `${createComponentBoundaryHtmlComment(componentId, "start")}${body}${createComponentBoundaryHtmlComment(componentId, "end")}`;
 };
 const renderSuspenseComponentToNodes = (props, container, mode) => {
 	const parentFrame = getCurrentFrame();
@@ -3933,8 +4501,7 @@ const renderSuspenseComponentToNodes = (props, container, mode) => {
 	scheduleMountCallbacks(container, component, frame.mountCallbacks);
 	scheduleVisibleCallbacksCheck(container);
 	if (!container.doc) return bodyNodes;
-	const start = container.doc.createComment(`ec:c:${componentId}:start`);
-	const end = container.doc.createComment(`ec:c:${componentId}:end`);
+	const { end, start } = createComponentBoundaryPair(container.doc, componentId);
 	if (!component.start || !component.end) {
 		component.start = start;
 		component.end = end;
@@ -4020,7 +4587,7 @@ const loadResolvedRoute = async (container, matched, variant = "page") => {
 	const cacheKey = routeCacheKey(normalizedPath, variant);
 	const existing = router.loadedRoutes.get(cacheKey);
 	if (existing) return existing;
-	const moduleUrl = variant === "page" ? matched.entry.page : variant === "loading" ? matched.entry.loading : variant === "error" ? matched.entry.error : matched.entry.notFound;
+	const moduleUrl = getRouteModuleUrl(matched.entry, variant);
 	if (!moduleUrl) return null;
 	const [page, ...layouts] = await Promise.all([loadRouteModule(router, moduleUrl), ...matched.entry.layouts.map((layoutUrl) => loadRouteModule(router, layoutUrl))]);
 	let route;
@@ -4037,13 +4604,14 @@ const loadResolvedRoute = async (container, matched, variant = "page") => {
 	return route;
 };
 const loadResolvedRouteFromSpecial = async (container, pathname, kind) => {
-	const matched = findSpecialManifestEntry(ensureRouterState(container).manifest, pathname, kind);
+	const manifest = ensureRouterState(container).manifest;
+	const matched = kind === "notFound" ? resolveNotFoundRouteMatch(manifest, pathname) : findSpecialManifestEntry(manifest, pathname, kind);
 	if (!matched) return null;
 	return loadResolvedRoute(container, matched, kind === "error" ? "error" : "not-found");
 };
 const loadRouteComponent = async (container, pathname) => {
-	const matched = matchRouteManifest(ensureRouterState(container).manifest, pathname);
-	if (!matched || !matched.entry.page) return null;
+	const matched = resolvePageRouteMatch(ensureRouterState(container).manifest, pathname);
+	if (!matched) return null;
 	return loadResolvedRoute(container, matched, "page");
 };
 const findRouteComponentChain = (container, symbols, parentId = null) => {
@@ -4092,7 +4660,7 @@ const resolveSharedLayoutRouteRoot = (container, boundaryId, slotRange) => {
 		const component = container.components.get(candidateId);
 		if (!component?.parentId) continue;
 		const owner = container.components.get(component.parentId);
-		if (!owner || owner.symbol !== CLIENT_INSERT_OWNER_SYMBOL || owner.parentId !== boundaryId) continue;
+		if (!owner || owner.symbol !== "$client-insert-root" || owner.parentId !== boundaryId) continue;
 		return {
 			kind: "owner",
 			ownerId: owner.id,
@@ -4117,6 +4685,7 @@ const renderRouteSubtreeForProjectionSlotOwner = (container, ownerId, source) =>
 		nodes: renderClientInsertableForOwner(source, container, {
 			childIndex: 0,
 			componentId: ownerId,
+			keyedRangeCursor: 0,
 			projectionCounters: []
 		}),
 		visitedDescendants: expandComponentIdsToDescendants(container, [ownerId])
@@ -4185,7 +4754,7 @@ const updateSharedLayoutBoundary = async (container, current, next, sharedLayout
 		return true;
 	};
 	if ((boundary.projectionSlots?.children ?? 0) !== 1) return rerenderSharedLayoutBoundary();
-	const slotRange = collectProjectionSlotRanges(getBoundaryChildren(boundary.start, boundary.end)).get(`${boundaryId}:${encodeProjectionSlotName("children")}:0`);
+	const slotRange = collectProjectionSlotRanges(getBoundaryChildren(boundary.start, boundary.end)).get(createProjectionSlotRangeKey(boundaryId, "children", 0));
 	if (!slotRange) return rerenderSharedLayoutBoundary();
 	const routeRoot = resolveSharedLayoutRouteRoot(container, boundaryId, slotRange);
 	if (!routeRoot) return rerenderSharedLayoutBoundary();
@@ -4270,7 +4839,6 @@ const applyPrefetchedLoaders = (container, url) => {
 		loaded: snapshot.loaded
 	});
 };
-const isRouteDataSuccess = (body) => body.ok === true && typeof body.finalHref === "string" && typeof body.finalPathname === "string" && (body.kind === "page" || body.kind === "not-found") && !!body.loaders && typeof body.loaders === "object";
 const extractScriptTextById = (html, id) => {
 	const scriptPattern = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
 	const idPattern = /\bid\s*=\s*(?:"([^"]*)"|'([^']*)')/i;
@@ -4288,31 +4856,20 @@ const parseRouteDataFromHtml = (container, requestUrl, response, html) => {
 		ok: false
 	};
 	const payloadText = extractScriptTextById(html, "eclipsa-resume-final") ?? extractScriptTextById(html, "eclipsa-resume");
-	if (!payloadText) return {
-		document: true,
-		ok: false
-	};
+	if (!payloadText) return ROUTE_DOCUMENT_FALLBACK;
 	let payload;
 	try {
 		payload = JSON.parse(payloadText);
 	} catch {
-		return {
-			document: true,
-			ok: false
-		};
+		return ROUTE_DOCUMENT_FALLBACK;
 	}
 	const finalPathname = normalizeRoutePath(finalUrl.pathname);
-	const router = ensureRouterState(container);
-	const matched = matchRouteManifest(router.manifest, finalPathname);
-	const notFoundMatched = !matched ? findSpecialManifestEntry(router.manifest, finalPathname, "notFound") : null;
-	if (!matched?.entry.page && !notFoundMatched?.entry.notFound) return {
-		document: true,
-		ok: false
-	};
+	const resolvedMatch = resolveRoutableMatch(ensureRouterState(container).manifest, finalPathname);
+	if (!resolvedMatch) return ROUTE_DOCUMENT_FALLBACK;
 	return {
 		finalHref: finalUrl.href,
 		finalPathname,
-		kind: matched?.entry.page ? "page" : "not-found",
+		kind: resolvedMatch.kind,
 		loaders: payload.loaders ?? {},
 		ok: true
 	};
@@ -4326,10 +4883,7 @@ const requestRouteData = async (container, href) => {
 		const response = await fetch(endpointUrl.href);
 		if (response.status >= 200 && response.status < 300) {
 			const body = await response.json();
-			if (!body || typeof body !== "object" || typeof body.ok !== "boolean") return {
-				document: true,
-				ok: false
-			};
+			if (!body || typeof body !== "object" || typeof body.ok !== "boolean") return ROUTE_DOCUMENT_FALLBACK;
 			if (isRouteDataSuccess(body)) return body;
 			if ("location" in body && typeof body.location === "string") return body;
 		}
@@ -4338,10 +4892,7 @@ const requestRouteData = async (container, href) => {
 		const response = await fetch(requestUrl.href);
 		return parseRouteDataFromHtml(container, requestUrl, response, await response.text());
 	} catch {}
-	return {
-		document: true,
-		ok: false
-	};
+	return ROUTE_DOCUMENT_FALLBACK;
 };
 const resetRouteLoaderState = (container) => {
 	container.loaders.clear();
@@ -4358,10 +4909,7 @@ const requestRoutePreflight = async (href) => {
 	try {
 		const requestUrl = new URL(href, typeof window === "undefined" ? "http://localhost" : window.location.href);
 		const response = await fetch(requestUrl.href, { headers: { [ROUTE_PREFLIGHT_REQUEST_HEADER]: "1" } });
-		if (response.status < 200 || response.status >= 300) return {
-			document: true,
-			ok: false
-		};
+		if (response.status < 200 || response.status >= 300) return ROUTE_DOCUMENT_FALLBACK;
 		const finalUrl = new URL(response.url || requestUrl.href, requestUrl.href);
 		if (finalUrl.origin !== requestUrl.origin || finalUrl.pathname !== requestUrl.pathname || finalUrl.search !== requestUrl.search) return {
 			location: finalUrl.href,
@@ -4369,26 +4917,55 @@ const requestRoutePreflight = async (href) => {
 		};
 		return { ok: true };
 	} catch {
-		return {
-			document: true,
-			ok: false
-		};
+		return ROUTE_DOCUMENT_FALLBACK;
 	}
 };
 const prefetchResolvedRouteModules = async (container, pathname, finalUrl) => {
 	const router = ensureRouterState(container);
-	const matched = matchRouteManifest(router.manifest, pathname);
-	if (matched?.entry.page) {
-		await loadResolvedRoute(container, matched);
-		return;
-	}
-	const notFoundMatched = findSpecialManifestEntry(router.manifest, pathname, "notFound");
-	if (notFoundMatched?.entry.notFound) await loadResolvedRoute(container, notFoundMatched, "not-found");
+	const resolvedMatch = resolveRoutableMatch(router.manifest, pathname);
+	if (resolvedMatch) await loadResolvedRoute(container, resolvedMatch.matched, resolvedMatch.kind);
 	if (finalUrl.pathname !== pathname) {
 		const redirectedPath = normalizeRoutePath(finalUrl.pathname);
-		const redirectedMatched = matchRouteManifest(router.manifest, redirectedPath);
-		if (redirectedMatched?.entry.page) await loadResolvedRoute(container, redirectedMatched);
+		const redirectedMatch = resolveRoutableMatch(router.manifest, redirectedPath);
+		if (redirectedMatch) await loadResolvedRoute(container, redirectedMatch.matched, redirectedMatch.kind);
+	}
+};
+const renderCurrentRoute = (container, route) => {
+	renderRouteIntoRoot(container, route.render);
+	ensureRouterState(container).currentRoute = route;
+};
+const applyCurrentRouteMetadata = (container, route, url) => {
+	const doc = container.doc;
+	if (!doc) return;
+	applyRouteMetadata(doc, route, url, ensureRouterState(container).defaultTitle);
+};
+const commitRouteNavigation = (container, route, url, mode, options) => {
+	const doc = container.doc;
+	if (!doc) return;
+	const router = ensureRouterState(container);
+	applyCurrentRouteMetadata(container, route, url);
+	commitBrowserNavigation(doc, url, mode);
+	if (options?.writeLocation !== false) writeRouterLocation(router, url);
+};
+const renderAndCommitRouteNavigation = (container, route, url, mode, options) => {
+	if (options?.resetLoaders) resetRouteLoaderState(container);
+	renderCurrentRoute(container, route);
+	commitRouteNavigation(container, route, url, mode);
+};
+const handleFailedRouteRequest = async (container, doc, url, mode, redirectDepth, result) => {
+	if (!("location" in result)) {
+		fallbackDocumentNavigation(doc, url, mode);
+		return;
+	}
+	const redirectUrl = new URL(result.location, doc.location.href);
+	if (redirectDepth >= 8 || redirectUrl.origin !== doc.location.origin) {
+		fallbackDocumentNavigation(doc, redirectUrl, mode);
+		return;
 	}
+	await navigateContainer(container, redirectUrl.href, {
+		mode,
+		redirectDepth: redirectDepth + 1
+	});
 };
 const prefetchRoute = async (container, href) => {
 	const doc = container.doc;
@@ -4403,26 +4980,18 @@ const prefetchRoute = async (container, href) => {
 		return;
 	}
 	const pathname = normalizeRoutePath(requestUrl.pathname);
-	const matched = matchRouteManifest(router.manifest, pathname);
-	const specialRoute = !matched ? findSpecialManifestEntry(router.manifest, pathname, "notFound") : null;
-	if (!matched?.entry.page && !specialRoute?.entry.notFound) return;
+	if (!resolveRoutableMatch(router.manifest, pathname)) return;
 	const prefetchPromise = (async () => {
 		try {
 			const result = await requestRouteData(container, requestUrl.href);
 			if (!result.ok) return result;
 			const finalUrl = new URL(result.finalHref, requestUrl.href);
-			if (finalUrl.origin !== requestUrl.origin) return {
-				document: true,
-				ok: false
-			};
+			if (finalUrl.origin !== requestUrl.origin) return ROUTE_DOCUMENT_FALLBACK;
 			await prefetchResolvedRouteModules(container, result.finalPathname, finalUrl);
 			cachePrefetchedLoaders(container, finalUrl, result.loaders);
 			return result;
 		} catch {
-			return {
-				document: true,
-				ok: false
-			};
+			return ROUTE_DOCUMENT_FALLBACK;
 		}
 	})();
 	router.routePrefetches.set(key, prefetchPromise);
@@ -4443,70 +5012,33 @@ const navigateContainer = async (container, href, options) => {
 	const pathname = normalizeRoutePath(url.pathname);
 	const router = ensureRouterState(container);
 	const matched = matchRouteManifest(router.manifest, pathname);
-	const specialPreflightTarget = !matched ? findSpecialManifestEntry(router.manifest, pathname, "notFound") : null;
+	const routeTarget = resolveRoutableMatch(router.manifest, pathname);
 	const currentRouteUrl = new URL(router.currentUrl.value, doc.location.href);
 	const currentHref = `${currentRouteUrl.pathname}${currentRouteUrl.search}${currentRouteUrl.hash}`;
 	const nextHref = `${url.pathname}${url.search}${url.hash}`;
 	if (!force && nextHref === currentHref) return;
 	const prefetchKey = routePrefetchKey(url);
 	let pendingPrefetch = router.routePrefetches.get(prefetchKey);
-	if (!pendingPrefetch && (matched?.entry.page || specialPreflightTarget?.entry.notFound)) {
+	if (!pendingPrefetch && routeTarget) {
 		await prefetchRoute(container, url.href);
 		pendingPrefetch = router.routePrefetches.get(prefetchKey);
 	}
 	const prefetched = pendingPrefetch ? await pendingPrefetch : null;
 	if (prefetched && !prefetched.ok) {
-		if ("location" in prefetched) {
-			if (redirectDepth >= 8) {
-				fallbackDocumentNavigation(doc, new URL(prefetched.location, doc.location.href), mode);
-				return;
-			}
-			const redirectUrl = new URL(prefetched.location, doc.location.href);
-			if (redirectUrl.origin !== doc.location.origin) {
-				fallbackDocumentNavigation(doc, redirectUrl, mode);
-				return;
-			}
-			await navigateContainer(container, redirectUrl.href, {
-				mode,
-				redirectDepth: redirectDepth + 1
-			});
-			return;
-		}
-		fallbackDocumentNavigation(doc, url, mode);
+		await handleFailedRouteRequest(container, doc, url, mode, redirectDepth, prefetched);
 		return;
 	}
-	if ((matched?.entry.page && matched.entry.hasMiddleware || !!specialPreflightTarget?.entry.notFound && specialPreflightTarget.entry.hasMiddleware) && !prefetched) {
+	if (!!routeTarget?.matched.entry.hasMiddleware && !prefetched) {
 		const preflight = await requestRoutePreflight(url.href);
 		if (!preflight.ok) {
-			if ("location" in preflight) {
-				if (redirectDepth >= 8) {
-					fallbackDocumentNavigation(doc, new URL(preflight.location, doc.location.href), mode);
-					return;
-				}
-				const redirectUrl = new URL(preflight.location, doc.location.href);
-				if (redirectUrl.origin !== doc.location.origin) {
-					fallbackDocumentNavigation(doc, redirectUrl, mode);
-					return;
-				}
-				await navigateContainer(container, redirectUrl.href, {
-					mode,
-					redirectDepth: redirectDepth + 1
-				});
-				return;
-			}
-			fallbackDocumentNavigation(doc, url, mode);
+			await handleFailedRouteRequest(container, doc, url, mode, redirectDepth, preflight);
 			return;
 		}
 	}
 	if (!matched || !matched.entry.page) {
 		const notFoundRoute = !matched ? await loadResolvedRouteFromSpecial(container, pathname, "notFound") : null;
 		if (notFoundRoute) {
-			resetRouteLoaderState(container);
-			renderRouteIntoRoot(container, notFoundRoute.render);
-			router.currentRoute = notFoundRoute;
-			applyRouteMetadata(doc, notFoundRoute, url, router.defaultTitle);
-			commitBrowserNavigation(doc, url, mode);
-			writeRouterLocation(router, url);
+			renderAndCommitRouteNavigation(container, notFoundRoute, url, mode, { resetLoaders: true });
 			return;
 		}
 		fallbackDocumentNavigation(doc, url, mode);
@@ -4533,10 +5065,7 @@ const navigateContainer = async (container, href, options) => {
 			await Promise.resolve();
 			if (!settled) {
 				const loadingRoute = await loadResolvedRoute(container, matched, "loading");
-				if (loadingRoute) {
-					renderRouteIntoRoot(container, loadingRoute.render);
-					router.currentRoute = loadingRoute;
-				}
+				if (loadingRoute) renderCurrentRoute(container, loadingRoute);
 			}
 		}
 		const [currentRoute, nextRoute] = await Promise.all([router.currentRoute ? Promise.resolve(router.currentRoute) : loadRouteComponent(container, router.currentPath.value), nextRoutePromise]);
@@ -4548,18 +5077,13 @@ const navigateContainer = async (container, href, options) => {
 		router.currentRoute = nextRoute;
 		writeRouterLocation(router, url);
 		const sharedLayoutCount = countSharedLayouts(currentRoute, nextRoute);
-		if (!(currentRoute && sharedLayoutCount > 0 ? await updateSharedLayoutBoundary(container, currentRoute, nextRoute, sharedLayoutCount) : false)) renderRouteIntoRoot(container, nextRoute.render);
-		applyRouteMetadata(doc, nextRoute, url, router.defaultTitle);
-		commitBrowserNavigation(doc, url, mode);
+		if (!(currentRoute && sharedLayoutCount > 0 ? await updateSharedLayoutBoundary(container, currentRoute, nextRoute, sharedLayoutCount) : false)) renderCurrentRoute(container, nextRoute);
+		commitRouteNavigation(container, nextRoute, url, mode, { writeLocation: false });
 	} catch (error) {
 		if (sequence === router.sequence) {
 			const fallbackRoute = isRouteNotFoundError(error) ? await loadResolvedRouteFromSpecial(container, pathname, "notFound") : await loadResolvedRoute(container, matched, "error");
 			if (fallbackRoute) {
-				renderRouteIntoRoot(container, fallbackRoute.render);
-				router.currentRoute = fallbackRoute;
-				applyRouteMetadata(doc, fallbackRoute, url, router.defaultTitle);
-				commitBrowserNavigation(doc, url, mode);
-				writeRouterLocation(router, url);
+				renderAndCommitRouteNavigation(container, fallbackRoute, url, mode);
 				return;
 			}
 			fallbackDocumentNavigation(doc, url, mode);
@@ -4585,12 +5109,6 @@ const refreshRouteContainer = async (container) => {
 };
 const routeEntryReferencesModuleUrl = (entry, fileUrl) => entry.page === fileUrl || entry.loading === fileUrl || entry.error === fileUrl || entry.notFound === fileUrl || entry.layouts.includes(fileUrl);
 const routeReferencesModuleUrl = (route, fileUrl) => route.page.url === fileUrl || route.layouts.some((layout) => layout.url === fileUrl) || routeEntryReferencesModuleUrl(route.entry, fileUrl);
-const resolveCurrentRouteManifestEntry = (router) => {
-	const currentPath = normalizeRoutePath(router.currentPath.value);
-	const matched = matchRouteManifest(router.manifest, currentPath);
-	if (matched?.entry.page) return matched.entry;
-	return findSpecialManifestEntry(router.manifest, currentPath, "notFound")?.entry ?? null;
-};
 const invalidateRouteModulesForHmr = (container, fileUrl, bustToken = Date.now()) => {
 	const router = container.router;
 	if (!router) return false;
@@ -4618,17 +5136,15 @@ const invalidateRouteModulesForHmr = (container, fileUrl, bustToken = Date.now()
 const refreshRouteContainerForHmr = async (container, fileUrl, bustToken = Date.now()) => {
 	const doc = container.doc;
 	if (!doc || !invalidateRouteModulesForHmr(container, fileUrl, bustToken)) return false;
-	const router = ensureRouterState(container);
-	const pathname = normalizeRoutePath(router.currentPath.value);
+	const pathname = normalizeRoutePath(ensureRouterState(container).currentPath.value);
 	try {
 		const nextRoute = await loadRouteComponent(container, pathname) ?? await loadResolvedRouteFromSpecial(container, pathname, "notFound");
 		if (!nextRoute) {
 			await refreshRouteContainer(container);
 			return true;
 		}
-		renderRouteIntoRoot(container, nextRoute.render);
-		router.currentRoute = nextRoute;
-		applyRouteMetadata(doc, nextRoute, new URL(doc.location.href), router.defaultTitle);
+		renderCurrentRoute(container, nextRoute);
+		applyCurrentRouteMetadata(container, nextRoute, new URL(doc.location.href));
 		return true;
 	} catch {
 		await refreshRouteContainer(container);
@@ -4644,7 +5160,7 @@ const activateComponent = async (container, componentId) => {
 	const activateSymbol = component.symbol;
 	const activateMode = component.activateModeOnFlush ?? "replace";
 	component.activateModeOnFlush = void 0;
-	if (component.symbol === SUSPENSE_COMPONENT_SYMBOL) {
+	if (component.symbol === "$suspense") {
 		clearComponentSubscriptions(container, componentId);
 		const oldDescendants = collectDescendantIds(container, componentId);
 		const suspenseSpeculativeEffectCleanupSlot = component.reuseProjectionSlotDomOnActivate ? createCleanupSlot() : null;
@@ -4696,6 +5212,36 @@ const activateComponent = async (container, componentId) => {
 	const module = await loadSymbol(container, activateSymbol);
 	const rawProps = component.rawProps && typeof component.rawProps === "object" ? component.rawProps : null;
 	if (rawProps) component.props = evaluateProps(rawProps);
+	const externalMeta = getExternalComponentMeta(module.default);
+	if (externalMeta && component.props && typeof component.props === "object") {
+		component.external = {
+			kind: externalMeta.kind,
+			slots: [...externalMeta.slots]
+		};
+		const focusSnapshot = captureBoundaryFocus(container.doc, component.start, component.end);
+		let host = getExternalRoot(component);
+		if (!host) {
+			replaceBoundaryContents(component.start, component.end, [createExternalRootNode(container, component.id, externalMeta.kind)]);
+			host = getExternalRoot(component);
+		}
+		if (!host) throw new Error(`Missing external root host for component ${component.id}.`);
+		host.setAttribute("data-e-external-snapshot", component.id);
+		globalThis.__eclipsaExternalSlotSnapshotMap ??= /* @__PURE__ */ new Map();
+		globalThis.__eclipsaExternalSlotSnapshotMap.set(host, {
+			dom: component.externalSlotDom,
+			html: component.externalSlotHtml
+		});
+		restoreExternalSlotDom(component, host);
+		await withClientContainer(container, async () => {
+			await syncExternalComponentInstance(component, externalMeta, component.props, host);
+		});
+		rebindExternalHost(container, host);
+		scheduleExternalHostRebind(container, host);
+		restoreBoundaryFocus(container.doc, component.start, component.end, focusSnapshot);
+		component.active = true;
+		scheduleVisibleCallbacksCheck(container);
+		return false;
+	}
 	await preloadComponentProps(container, {
 		captures: () => [],
 		projectionSlots: component.projectionSlots ?? void 0,
@@ -4777,7 +5323,7 @@ const resolveResumeHmrBoundarySymbols = (payload) => {
 };
 const findNearestMountedBoundary = (container, componentId) => {
 	let currentId = componentId;
-	while (currentId && currentId !== ROOT_COMPONENT_ID) {
+	while (currentId && currentId !== "$root") {
 		const component = container.components.get(currentId);
 		if (!component) return null;
 		if (component.start && component.end) return component.id;
@@ -4937,7 +5483,7 @@ const beginSSRContainer = (symbols, render) => {
 	};
 };
 const beginAsyncSSRContainer = async (symbols, render, prepare, options) => {
-	const container = createContainer(symbols, void 0, options?.asyncSignalSnapshotCache);
+	const container = createContainer(symbols, void 0, options?.asyncSignalSnapshotCache, options?.externalRenderCache);
 	const rootFrame = createFrame(container, {
 		active: false,
 		didMount: false,
@@ -4975,6 +5521,10 @@ const createResumePayload = (container, componentIds) => {
 			result: serializeRuntimeValue(container, action.result)
 		}])),
 		components: Object.fromEntries(componentEntries.map(([id, component]) => [id, {
+			...component.external ? { external: {
+				kind: component.external.kind,
+				slots: [...component.external.slots]
+			} } : {},
 			...component.optimizedRoot ? { optimizedRoot: true } : {},
 			props: serializeRuntimeValue(container, component.props),
 			...component.projectionSlots ? { projectionSlots: { ...component.projectionSlots } } : {},
@@ -5039,6 +5589,12 @@ const mergeResumePayload = (container, payload) => {
 	for (const [id, componentPayload] of Object.entries(payload.components)) container.components.set(id, {
 		active: false,
 		didMount: false,
+		external: componentPayload.external ? {
+			kind: componentPayload.external.kind,
+			slots: [...componentPayload.external.slots]
+		} : void 0,
+		externalInstance: void 0,
+		externalMeta: null,
 		id,
 		mountCleanupSlots: [],
 		optimizedRoot: componentPayload.optimizedRoot === true,
@@ -5067,6 +5623,7 @@ const mergeResumePayload = (container, payload) => {
 		watch.mode = watchPayload.mode;
 		watch.scopeId = watchPayload.scope;
 		watch.symbol = watchPayload.symbol;
+		watch.resumed = true;
 		watch.track = null;
 		watch.run = null;
 		clearEffectSignals(watch.effect);
@@ -5172,6 +5729,14 @@ const createResumeContainer = (source, payload, options) => {
 	mergeResumePayload(container, payload);
 	rememberManagedAttributesForNode(root);
 	bindComponentBoundaries(container, root);
+	for (const component of container.components.values()) {
+		component.externalSlotHtml = captureExternalSlotHtml(component);
+		component.externalSlotDom = captureExternalSlotDom(component);
+	}
+	globalThis.__eclipsaExternalSlotSnapshotStore = Object.fromEntries([...container.components.values()].filter((component) => !!component.external && (component.externalSlotDom || component.externalSlotHtml)).map((component) => [component.id, {
+		dom: component.externalSlotDom,
+		html: component.externalSlotHtml
+	}]));
 	restoreSignalRefs(container, root);
 	restoreRegisteredRpcHandles(container);
 	ensureRouterState(container);
@@ -5179,7 +5744,7 @@ const createResumeContainer = (source, payload, options) => {
 	scheduleVisibleCallbacksCheck(container);
 	return container;
 };
-const canRestoreResumedLocalSignalEffects = (container, component) => !!component.start && !!component.end && !component.active && component.signalIds.length > 0 && (component.symbol === SUSPENSE_COMPONENT_SYMBOL || container.imports.has(component.symbol) || container.symbols.has(component.symbol));
+const canRestoreResumedLocalSignalEffects = (container, component) => !!component.start && !!component.end && !component.active && !component.external && component.signalIds.length > 0 && (component.symbol === "$suspense" || container.imports.has(component.symbol) || container.symbols.has(component.symbol));
 const restoreResumedLocalSignalEffects = async (container) => {
 	let queued = false;
 	const restoredIds = [];
@@ -5201,18 +5766,28 @@ const restoreResumedLocalSignalEffects = async (container) => {
 		syncEffectOnlyLocalSignalPreference(component);
 	}
 };
+const restoreResumedExternalComponents = async (container) => {
+	const externalComponents = sortDirtyComponents([...container.components.values()].filter((component) => !!component.external && !!component.start && !!component.end && !component.active && !component.didMount && container.symbols.has(component.symbol)).map((component) => component.id));
+	for (const componentId of externalComponents) await activateComponent(container, componentId);
+};
 const restoreRegisteredRpcHandles = (container) => {
-	withRuntimeContainer(container, () => {
-		for (const id of getRegisteredActionHookIds()) getRegisteredActionHook(id)?.();
-		for (const id of getRegisteredLoaderHookIds()) getRegisteredLoaderHook(id)?.();
-	});
+	const injectedWindow = !("window" in globalThis && globalThis.window !== void 0) && container.doc?.defaultView ? container.doc.defaultView : null;
+	if (injectedWindow) globalThis.window = injectedWindow;
+	try {
+		withRuntimeContainer(container, () => {
+			for (const id of getRegisteredActionHookIds()) getRegisteredActionHook(id)?.();
+			for (const id of getRegisteredLoaderHookIds()) getRegisteredLoaderHook(id)?.();
+		});
+	} finally {
+		if (injectedWindow) delete globalThis.window;
+	}
 };
 const primeRouteModules = async (container) => {
 	const router = ensureRouterState(container);
 	const currentRoute = await loadRouteComponent(container, router.currentPath.value);
 	if (currentRoute) {
 		router.currentRoute = currentRoute;
-		if (container.doc) applyRouteMetadata(container.doc, currentRoute, new URL(container.doc.location.href), router.defaultTitle);
+		if (container.doc) applyCurrentRouteMetadata(container, currentRoute, new URL(container.doc.location.href));
 	}
 };
 const getRouterEventState = (event) => {
@@ -5502,7 +6077,7 @@ const installResumeListeners = (container) => {
 const renderString = (inputElementLike) => renderStringNode(inputElementLike);
 const hasActiveRuntimeComponent = () => {
 	const frame = getCurrentFrame();
-	return !!frame && frame.component.id !== ROOT_COMPONENT_ID;
+	return !!frame && frame.component.id !== "$root";
 };
 const getRuntimeContextValue = (token) => {
 	const stack = getContextValueStack();
@@ -5527,7 +6102,7 @@ const createStandaloneRuntimeSignal = (fallback) => {
 const useRuntimeSignal = (fallback) => {
 	const container = getCurrentContainer();
 	const frame = getCurrentFrame();
-	if (!container || !frame || frame.component.id === ROOT_COMPONENT_ID) throw new Error("useSignal() can only be used while rendering a component.");
+	if (!container || !frame || frame.component.id === "$root") throw new Error("useSignal() can only be used while rendering a component.");
 	const signalIndex = frame.signalCursor++;
 	const existingId = frame.component.signalIds[signalIndex];
 	const signalId = existingId ?? `s${container.nextSignalId++}`;
@@ -5590,7 +6165,7 @@ const createEffect = (fn, options) => {
 		},
 		signals: /* @__PURE__ */ new Set()
 	};
-	if (frame && frame.mode === "client" && frame.component.id !== ROOT_COMPONENT_ID) frame.effectCleanupSlot.callbacks.push(() => {
+	if (frame && frame.mode === "client" && frame.component.id !== "$root") frame.effectCleanupSlot.callbacks.push(() => {
 		clearEffectSignals(effect);
 	});
 	effect.fn();
@@ -5601,14 +6176,14 @@ const createOnCleanup = (fn) => {
 };
 const createOnMount = (fn) => {
 	const frame = getCurrentFrame();
-	if (!frame || frame.component.id === ROOT_COMPONENT_ID || frame.mode !== "client") return;
+	if (!frame || frame.component.id === "$root" || frame.mode !== "client") return;
 	frame.mountCallbacks.push(fn);
 };
 const createOnVisible = (fn) => {
 	const container = getCurrentContainer();
 	const frame = getCurrentFrame();
 	const lazyMeta = getLazyMeta(fn);
-	if (!container || !frame || frame.component.id === ROOT_COMPONENT_ID) return;
+	if (!container || !frame || frame.component.id === "$root") return;
 	if (!lazyMeta && frame.mode === "ssr") return;
 	const visibleIndex = frame.visibleCursor++;
 	const visible = getOrCreateVisibleState(container, createVisibleId(frame.component.id, visibleIndex), frame.component.id);
@@ -5621,7 +6196,7 @@ const createWatch = (fn, dependencies) => {
 	const container = getCurrentContainer();
 	const frame = getCurrentFrame();
 	const watchMeta = getWatchMeta(fn);
-	if (!container || !frame || frame.component.id === ROOT_COMPONENT_ID || !watchMeta) {
+	if (!container || !frame || frame.component.id === "$root" || !watchMeta) {
 		const cleanupSlot = createCleanupSlot();
 		const effect = {
 			fn() {
@@ -5639,6 +6214,14 @@ const createWatch = (fn, dependencies) => {
 	watch.symbol = watchMeta.symbol;
 	watch.track = dependencies ? () => trackWatchDependencies(dependencies) : null;
 	watch.run = createLocalWatchRunner(watch.effect, watch.cleanupSlot, fn, dependencies);
+	if (frame.mode === "client" && watch.resumed) {
+		watch.resumed = false;
+		if (dependencies) collectTrackedDependencies(watch.effect, () => {
+			trackWatchDependencies(dependencies);
+		});
+		return;
+	}
+	watch.resumed = false;
 	watch.effect.fn();
 };
 const getResumePayloadScriptContent = (payload) => escapeJSONScriptText(JSON.stringify(payload));
@@ -5886,10 +6469,15 @@ const toClientAsyncGenerator = async function* (response, container) {
 };
 const invokeAction = async (id, input, container) => {
 	const isFormSubmission = isFormDataValue(input);
-	const response = await fetch(`/__eclipsa/action/${encodeURIComponent(id)}`, {
+	const actionPath = `/__eclipsa/action/${encodeURIComponent(id)}`;
+	const requestContext = typeof window === "undefined" ? getCurrentServerRequestContext() : null;
+	const currentRouteUrl = typeof window !== "undefined" ? window.location.href : requestContext?.req.header("x-eclipsa-route-url") ?? requestContext?.req.raw.url ?? null;
+	const requestUrl = requestContext ? new URL(actionPath, requestContext.req.raw.url).href : actionPath;
+	const response = await (requestContext && typeof requestContext.var.fetch === "function" ? requestContext.var.fetch : fetch)(requestUrl, {
 		body: isFormSubmission ? input : JSON.stringify({ input: serializeActionClientValue(container, input) }),
 		headers: {
 			accept: `${ACTION_STREAM_CONTENT_TYPE}, ${ACTION_CONTENT_TYPE}`,
+			...currentRouteUrl ? { [ROUTE_RPC_URL_HEADER]: currentRouteUrl } : {},
 			...isFormSubmission ? {} : { "content-type": ACTION_CONTENT_TYPE }
 		},
 		method: "POST"
@@ -6207,6 +6795,6 @@ const __eclipsaAction = (id, middlewares, handler) => {
 	}, id));
 };
 //#endregion
-export { restoreSignalRefs as $, loader as $t, createWatch as A, serializePublicValue as An, getLazyMeta as At, primeRouteModules as B, isNoSerialize as Bn, registerActionHook as Bt, createDetachedClientInsertOwner as C, getClientHooks as Cn, __eclipsaEvent as Ct, createOnVisible as D, resetClientHooks as Dn, getActionHookMeta as Dt, createOnMount as E, registerClientHooks as En, getActionHandleMeta as Et, getStreamingResumeBootstrapScriptContent as F, escapeInlineScriptText as Fn, getRegisteredActionHookIds as Ft, rememberInsertMarkerRange as G, setLoaderHookMeta as Gt, refreshRegisteredRouteContainers as H, setActionHandleMeta as Ht, installResumeListeners as I, escapeJSONScriptText as In, getRegisteredLoaderHook as It, renderClientInsertable as J, __eclipsaLoader as Jt, rememberManagedAttributesForNode as K, setNavigateMeta as Kt, notFound as L, parseSerializedJSON as Ln, getRegisteredLoaderHookIds as Lt, getRuntimeComponentId as M, transformCurrentPublicError as Mn, getLoaderHookMeta as Mt, getRuntimeContainer as N, withServerRequestContext as Nn, getNavigateMeta as Nt, createResumeContainer as O, resolveReroute as On, getComponentMeta as Ot, getRuntimeSignalId as P, deserializeValue as Pn, getRegisteredActionHook as Pt, restoreResumedLocalSignalEffects as Q, isPendingSsrLoaderError as Qt, preserveReusableContentInRoots as R, serializeJSONScriptContent as Rn, getSignalMeta as Rt, collectPendingSuspenseBoundaryIds as S, deserializePublicValue as Sn, __eclipsaComponent as St, createOnCleanup as T, markPublicError as Tn, __eclipsaWatch as Tt, registerResumeContainer as U, setActionHookMeta as Ut, readAsyncSignalSnapshot as V, noSerialize as Vn, registerLoaderHook as Vt, registerRuntimeScopedStyle as W, setLoaderHandleMeta as Wt, renderString as X, executeLoader as Xt, renderClientInsertableForOwner as Y, consumePendingSsrLoaderIds as Yt, restoreRegisteredRpcHandles as Z, hasLoader as Zt, assignRuntimeRef as _, isPendingSignalError as _n, ROUTE_MANIFEST_ELEMENT_ID as _t, action as a, ROUTE_METADATA_HEAD_ATTR as an, tryPatchElementShellInPlace as at, bindRuntimeEvent as b, attachRequestFetch as bn, ROUTE_PREFLIGHT_REQUEST_HEADER as bt, getActionFormSubmissionId as c, resolveRouteMetadata as cn, useRuntimeNavigate as ct, primeActionState as d, getRuntimeContextReference as dn, useRuntimeSignal as dt, loader_exports as en, shouldReconnectDetachedInsertMarkers as et, registerAction as f, materializeRuntimeContext as fn, withRuntimeContainer as ft, applyResumeHmrUpdateToRegisteredContainers as g, createPendingSignalError as gn, ROUTE_LINK_ATTR as gt, RESUME_STATE_ELEMENT_ID as h, Suspense as hn, ROUTE_DATA_REQUEST_HEADER as ht, __eclipsaAction as i, resolvePendingLoaders as in, toResumePayloadSubset as it, getResumePayloadScriptContent as j, toPublicError as jn, getLoaderHandleMeta as jt, createStandaloneRuntimeSignal as k, runHandleError as kn, getEventMeta as kt, getNormalizedActionInput as l, createContext as ln, useRuntimeRouteError as lt, RESUME_FINAL_STATE_ELEMENT_ID as m, useContext as mn, ROUTE_DATA_ENDPOINT as mt, ACTION_FORM_ATTR as n, primeLoaderState as nn, syncRuntimeRefMarker as nt, executeAction as o, composeRouteMetadata as on, tryPatchNodeSequenceInPlace as ot, validator as p, materializeRuntimeContextProvider as pn, writeAsyncSignalSnapshot as pt, rememberManagedAttributesForNodes as q, setSignalMeta as qt, ACTION_FORM_FIELD as r, registerLoader as rn, toResumePayload as rt, executeActionSubmission as s, renderRouteMetadataHead as sn, useRuntimeLocation as st, ACTION_CONTENT_TYPE as t, markPendingSsrLoader as tn, syncManagedAttributeSnapshot as tt, hasAction as u, getContextProviderMeta as un, useRuntimeRouteParams as ut, beginAsyncSSRContainer as v, isSuspenseType as vn, ROUTE_PREFETCH_ATTR as vt, createEffect as w, getCurrentServerRequestContext as wn, __eclipsaLazy as wt, captureClientInsertOwner as x, createRequestFetch as xn, ROUTE_REPLACE_ATTR as xt, beginSSRContainer as y, APP_HOOKS_ELEMENT_ID as yn, ROUTE_PREFLIGHT_ENDPOINT as yt, primeLocationState as z, serializeValue as zn, getWatchMeta as zt };
+export { shouldReconnectDetachedInsertMarkers as $, IS_BROWSER as $n, consumePendingSsrLoaderIds as $t, getRuntimeComponentId as A, isPendingSignalError as An, getComponentMeta as At, refreshRegisteredRouteContainers as B, resetClientHooks as Bn, getRegisteredLoaderHookIds as Bt, createOnCleanup as C, getContextProviderMeta as Cn, RESUME_STATE_ELEMENT_ID as Ct, createStandaloneRuntimeSignal as D, useContext as Dn, __eclipsaWatch as Dt, createResumeContainer as E, materializeRuntimeContextProvider as En, __eclipsaLazy as Et, notFound as F, deserializePublicValue as Fn, getLoaderHookMeta as Ft, renderSSRAttr as G, transformCurrentPublicError as Gn, setActionHandleMeta as Gt, registerRuntimeScopedStyle as H, runHandleError as Hn, getWatchMeta as Ht, preserveReusableContentInRoots as I, getClientHooks as In, getNavigateMeta as It, renderString as J, escapeInlineScriptText as Jn, setLoaderHandleMeta as Jt, renderSSRMap as K, withServerRequestContext as Kn, setActionHookMeta as Kt, primeLocationState as L, getCurrentServerRequestContext as Ln, getRegisteredActionHook as Lt, getRuntimeSignalId as M, APP_HOOKS_ELEMENT_ID as Mn, getExternalComponentMeta as Mt, getStreamingResumeBootstrapScriptContent as N, attachRequestFetch as Nn, getLazyMeta as Nt, createWatch as O, Suspense as On, getActionHandleMeta as Ot, installResumeListeners as P, createRequestFetch as Pn, getLoaderHandleMeta as Pt, restoreSignalRefs as Q, serializeValue as Qn, __eclipsaLoader as Qt, primeRouteModules as R, markPublicError as Rn, getRegisteredActionHookIds as Rt, createEffect as S, createContext as Sn, RESUME_FINAL_STATE_ELEMENT_ID as St, createOnVisible as T, materializeRuntimeContext as Tn, __eclipsaEvent as Tt, renderClientInsertable as U, serializePublicValue as Un, registerActionHook as Ut, registerResumeContainer as V, resolveReroute as Vn, getSignalMeta as Vt, renderClientInsertableForOwner as W, toPublicError as Wn, registerLoaderHook as Wt, restoreResumedExternalComponents as X, parseSerializedJSON as Xn, setNavigateMeta as Xt, restoreRegisteredRpcHandles as Y, escapeJSONScriptText as Yn, setLoaderHookMeta as Yt, restoreResumedLocalSignalEffects as Z, serializeJSONScriptContent as Zn, setSignalMeta as Zt, beginSSRContainer as _, ROUTE_RPC_URL_HEADER as _n, getRememberedInsertMarkerNodeCount as _t, action as a, markPendingSsrLoader as an, useRuntimeLocation as at, collectPendingSuspenseBoundaryIds as b, renderRouteMetadataHead as bn, rememberManagedAttributesForNodes as bt, getActionFormSubmissionId as c, resolvePendingLoaders as cn, useRuntimeRouteParams as ct, primeActionState as d, ROUTE_LINK_ATTR as dn, writeAsyncSignalSnapshot as dt, executeLoader as en, IS_SSR as er, syncRuntimeRefMarker as et, registerAction as f, ROUTE_MANIFEST_ELEMENT_ID as fn, INSERT_MARKER_PREFIX as ft, beginAsyncSSRContainer as g, ROUTE_REPLACE_ATTR as gn, parseInsertMarker as gt, assignRuntimeRef as h, ROUTE_PREFLIGHT_REQUEST_HEADER as hn, parseComponentBoundaryMarker as ht, __eclipsaAction as i, loader_exports as in, tryPatchNodeSequenceInPlace as it, getRuntimeContainer as j, isSuspenseType as jn, getEventMeta as jt, getResumePayloadScriptContent as k, createPendingSignalError as kn, getActionHookMeta as kt, getNormalizedActionInput as l, ROUTE_DATA_ENDPOINT as ln, useRuntimeSignal as lt, applyResumeHmrUpdateToRegisteredContainers as m, ROUTE_PREFLIGHT_ENDPOINT as mn, createInsertMarker as mt, ACTION_FORM_ATTR as n, isPendingSsrLoaderError as nn, noSerialize as nr, toResumePayloadSubset as nt, executeAction as o, primeLoaderState as on, useRuntimeNavigate as ot, validator as p, ROUTE_PREFETCH_ATTR as pn, createComponentBoundaryHtmlComment as pt, renderSSRValue as q, deserializeValue as qn, setExternalComponentMeta as qt, ACTION_FORM_FIELD as r, loader as rn, tryPatchElementShellInPlace as rt, executeActionSubmission as s, registerLoader as sn, useRuntimeRouteError as st, ACTION_CONTENT_TYPE as t, hasLoader as tn, isNoSerialize as tr, toResumePayload as tt, hasAction as u, ROUTE_DATA_REQUEST_HEADER as un, withRuntimeContainer as ut, bindRuntimeEvent as v, ROUTE_METADATA_HEAD_ATTR as vn, rememberInsertMarkerRange as vt, createOnMount as w, getRuntimeContextReference as wn, __eclipsaComponent as wt, createDetachedClientInsertOwner as x, resolveRouteMetadata as xn, syncManagedAttributeSnapshot as xt, captureClientInsertOwner as y, composeRouteMetadata as yn, rememberManagedAttributesForNode as yt, readAsyncSignalSnapshot as z, registerClientHooks as zn, getRegisteredLoaderHook as zt };
 
-//# sourceMappingURL=action-CgM3EJUS.mjs.map
+//# sourceMappingURL=action-DqgkV3zb.mjs.map