@fluid-app/widget-runtime 0.1.3 → 0.1.5

package/dist/{remote-dom-renderer-CpdKWANy.mjs → remote-dom-renderer-Dn3pfVsl.mjs}

@@ -1,8 +1,10 @@
 import { n as release, r as retain, t as Thread } from "./Thread-BiW7rXts.mjs";
-import { a as REMOTE_DOM_SEARCH_SORT_EVENTS, c as isRemoteDomSerializableValue, l as isSafeRemoteDomPropertyKey, o as SUPPORTED_REMOTE_DOM_EVENTS, r as REMOTE_DOM_ALLOWED_TAG_NAMES, s as createRemoteDomUrlOriginPolicy } from "./remote-dom-values-BSAxrOE7.mjs";
+import { a as isRemoteDomSerializableValue, c as REMOTE_DOM_SUPPORTED_UI_CONTRACT_VERSIONS, i as createRemoteDomUrlOriginPolicy, l as REMOTE_DOM_UI_COMPONENTS, o as isSafeRemoteDomPropertyKey, r as SUPPORTED_REMOTE_DOM_EVENTS, t as REMOTE_DOM_ALLOWED_TAG_NAMES, u as getRemoteDomUiComponent } from "./remote-dom-values-wEbrw5iW.mjs";
 import { MUTATION_TYPE_INSERT_CHILD, MUTATION_TYPE_REMOVE_CHILD, MUTATION_TYPE_UPDATE_PROPERTY, MUTATION_TYPE_UPDATE_TEXT, NODE_TYPE_ELEMENT, NODE_TYPE_TEXT, ROOT_ID, UPDATE_PROPERTY_TYPE_ATTRIBUTE, UPDATE_PROPERTY_TYPE_EVENT_LISTENER, UPDATE_PROPERTY_TYPE_PROPERTY } from "@remote-dom/core";
-import { remoteId } from "@remote-dom/core/elements";
-import { DOMRemoteReceiver } from "@remote-dom/core/receivers";
+import { RemoteFragmentRenderer, RemoteReceiver, RemoteRootRenderer, renderRemoteNode, useRemoteReceived } from "@remote-dom/react/host";
+import { createElement, useEffect, useLayoutEffect, useRef } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
 import postcssParse from "postcss/lib/parse";
 import valueParser from "postcss-value-parser";
 //#region src/remote-dom-sanitizer.ts
@@ -306,7 +308,6 @@ const MEDIA_SOURCE_TAGS = new Set([
 	"video"
 ]);
 const SUPPORTED_REMOTE_DOM_EVENT_SET = new Set(SUPPORTED_REMOTE_DOM_EVENTS);
-const REMOTE_DOM_SEARCH_SORT_EVENT_SET = new Set(REMOTE_DOM_SEARCH_SORT_EVENTS);
 function sanitizeRemoteDomTagName(tagName) {
 	if (typeof tagName !== "string") return void 0;
 	const normalizedTagName = tagName.trim().toLowerCase();
@@ -322,7 +323,7 @@ function sanitizeRemoteDomAttributes(tagName, attributes, options = {}) {
 	}
 	return sanitizedAttributes;
 }
-function sanitizeRemoteDomProperty(tagName, rawName, rawValue) {
+function sanitizeRemoteDomProperty(tagName, rawName, rawValue, options = {}) {
 	if (typeof rawName !== "string") return void 0;
 	const normalizedTagName = tagName.trim().toLowerCase();
 	const name = rawName.trim().toLowerCase();
@@ -337,45 +338,54 @@ function sanitizeRemoteDomProperty(tagName, rawName, rawValue) {
 			value: rawValue
 		};
 	}
-	if (normalizedTagName === "fluid-ui-search-sort") {
-		if (name === "searchvalue" && typeof rawValue === "string") return {
-			name: "searchValue",
-			value: rawValue
-		};
-		if (name === "placeholder") return typeof rawValue === "string" || rawValue === void 0 ? {
-			name: "placeholder",
-			value: rawValue
-		} : void 0;
-		if (name === "sortoptions") {
-			const value = sanitizeSearchSortOptions(rawValue);
-			return value === void 0 && rawValue !== void 0 ? void 0 : {
-				name: "sortOptions",
+	const definition = getRemoteDomUiComponent(normalizedTagName);
+	if (definition) {
+		const propertyEntry = Object.entries(definition.properties).find(([propertyName]) => propertyName.toLowerCase() === name);
+		if (!propertyEntry) return void 0;
+		const [propertyName, codec] = propertyEntry;
+		if (codec === "navigation-url" && rawValue !== void 0) {
+			const value = sanitizeRemoteDomUrl(rawValue, {
+				allowHashOnly: true,
+				allowMailTo: false,
+				allowRelative: true,
+				allowTel: false,
+				allowedHttpOriginGroups: ["navigation"],
+				...options.allowedAnchorUrls ? { allowedHttpUrls: options.allowedAnchorUrls } : {},
+				originPolicy: options.urlOriginPolicy,
+				relativeUrlBase: "navigation"
+			});
+			return value === void 0 ? void 0 : {
+				name: propertyName,
 				value
 			};
 		}
-		if (name === "sortvalue") return typeof rawValue === "string" || rawValue === void 0 ? {
-			name: "sortValue",
-			value: rawValue
-		} : void 0;
-	}
-	if (normalizedTagName === "fluid-spacer-widget") {
-		if (name === "customheight") return typeof rawValue === "string" || rawValue === void 0 ? {
-			name: "customHeight",
+		if (codec === "url" && rawValue !== void 0) {
+			const value = sanitizeRemoteDomUrl(rawValue, {
+				allowHashOnly: false,
+				allowMailTo: false,
+				allowRelative: true,
+				allowTel: false,
+				allowedHttpOriginGroups: ["artifact", "media"],
+				originPolicy: options.urlOriginPolicy,
+				relativeUrlBase: "artifact"
+			});
+			return value === void 0 ? void 0 : {
+				name: propertyName,
+				value
+			};
+		}
+		return isRemoteDomUiPropertyValue(rawValue, codec) ? {
+			name: propertyName,
 			value: rawValue
 		} : void 0;
-		if (name === "previewmode" && typeof rawValue === "boolean") return {
-			name: "previewMode",
-			value: rawValue
-		};
 	}
 }
 function isRemoteDomPropertyName(tagName, rawName) {
 	const normalizedTagName = tagName.trim().toLowerCase();
 	const name = rawName.trim().toLowerCase();
 	if (normalizedTagName === "input") return name === "checked" || name === "value";
-	if (normalizedTagName === "fluid-ui-search-sort") return name === "searchvalue" || name === "placeholder" || name === "sortoptions" || name === "sortvalue";
-	if (normalizedTagName === "fluid-spacer-widget") return name === "customheight" || name === "previewmode";
-	return false;
+	const definition = getRemoteDomUiComponent(normalizedTagName);
+	return Boolean(definition && Object.keys(definition.properties).some((propertyName) => propertyName.toLowerCase() === name));
 }
 function sanitizeRemoteDomAttribute(tagName, rawName, rawValue, options = {}) {
 	if (typeof rawName !== "string") return void 0;
@@ -465,7 +475,8 @@ function sanitizeRemoteDomCssUrlReferences(value, options = {}) {
 }
 function isSupportedRemoteDomEventName(eventName, tagName) {
 	if (SUPPORTED_REMOTE_DOM_EVENT_SET.has(eventName)) return true;
-	return tagName?.trim().toLowerCase() === "fluid-ui-search-sort" && REMOTE_DOM_SEARCH_SORT_EVENT_SET.has(eventName);
+	const definition = tagName ? getRemoteDomUiComponent(tagName.trim().toLowerCase()) : void 0;
+	return Boolean(definition?.events.some((event) => event.eventName === eventName));
 }
 function serializeRemoteDomEvent(event, targetId, currentTargetId, currentTargetTagName) {
 	if (!isSupportedRemoteDomEventName(event.type, currentTargetTagName)) return;
@@ -484,20 +495,22 @@ function serializeRemoteDomEvent(event, targetId, currentTargetId, currentTarget
 		...readCustomEventDetail(event)
 	};
 }
-function sanitizeSearchSortOptions(value) {
-	if (!Array.isArray(value)) return void 0;
-	const options = [];
-	for (const option of value) {
-		if (!isObjectRecord$1(option) || typeof option.label !== "string" || typeof option.value !== "string") return;
-		options.push({
-			label: option.label,
-			value: option.value
-		});
+function isRemoteDomUiPropertyValue(value, codec) {
+	if (value === void 0) return true;
+	switch (codec) {
+		case "boolean": return typeof value === "boolean";
+		case "finite-number-array": return Array.isArray(value) && value.every((item) => typeof item === "number" && Number.isFinite(item));
+		case "finite-number": return typeof value === "number" && Number.isFinite(value);
+		case "navigation-url": return false;
+		case "option-array": return Array.isArray(value) && value.every((item) => isObjectRecord$1(item) && typeof item.label === "string" && typeof item.value === "string" && Object.keys(item).every((key) => key === "label" || key === "value"));
+		case "string": return typeof value === "string";
+		case "string-array": return Array.isArray(value) && value.every((item) => typeof item === "string");
+		case "string-or-string-array": return typeof value === "string" || Array.isArray(value) && value.every((item) => typeof item === "string");
+		case "url": return false;
 	}
-	return options;
 }
 function readCustomEventDetail(event) {
-	if (!(event instanceof CustomEvent) || !REMOTE_DOM_SEARCH_SORT_EVENT_SET.has(event.type)) return {};
+	if (!(event instanceof CustomEvent)) return {};
 	if (!isRemoteDomSerializableValue(event.detail)) return {};
 	try {
 		const detailJson = JSON.stringify(event.detail);
@@ -561,6 +574,7 @@ function hasControlCharacter(value) {
 }
 function isAllowedAttributeName(tagName, name) {
 	if (name.length === 0 || name.startsWith("on") || name === "style" || name === "srcdoc" || name.includes(":") || !/^[a-z][a-z0-9_.-]*$/u.test(name)) return false;
+	if (name === "data-fluid-remote-dom-node-id") return false;
 	if (name.startsWith("data-")) return true;
 	if (GLOBAL_ALLOWED_ATTRIBUTES.has(name)) return true;
 	return TAG_ALLOWED_ATTRIBUTES[tagName]?.has(name) === true;
@@ -995,14 +1009,26 @@ function normalizeUpdatePropertyRecordForHost(options, state, mutation, pendingE
 			eventName: property,
 			listener
 		});
-		return { ok: true };
+		return {
+			ok: true,
+			record: [
+				MUTATION_TYPE_UPDATE_PROPERTY,
+				id,
+				property,
+				listener,
+				UPDATE_PROPERTY_TYPE_EVENT_LISTENER
+			]
+		};
 	}
 	if (value !== void 0 && !isRemoteDomSerializableValue(value)) return {
 		ok: false,
 		message: `Remote DOM mutation property "${property}" was not serializable.`
 	};
 	if (updateType === UPDATE_PROPERTY_TYPE_PROPERTY) {
-		const sanitizedProperty = sanitizeRemoteDomProperty(node.localName, property, value);
+		const sanitizedProperty = sanitizeRemoteDomProperty(node.localName, property, value, {
+			...options.allowedAnchorUrls ? { allowedAnchorUrls: options.allowedAnchorUrls } : {},
+			urlOriginPolicy: options.urlOriginPolicy
+		});
 		if (sanitizedProperty) return {
 			ok: true,
 			record: [
@@ -1082,7 +1108,7 @@ function normalizeRemoteNodeForHost(options, state, value, seen, pendingEventLis
 		ok: false,
 		message: `Remote DOM element "${value.id}" used an unsupported tag name.`
 	};
-	queueRemoteNodeEventListeners(value.id, tagName, value.eventListeners, pendingEventListenerUpdates);
+	const eventListeners = sanitizeRemoteNodeEventListeners(value.id, tagName, value.eventListeners, pendingEventListenerUpdates);
 	if (!Array.isArray(value.children)) return {
 		ok: false,
 		message: `Remote DOM element "${value.id}" did not contain a valid children array.`
@@ -1101,7 +1127,10 @@ function normalizeRemoteNodeForHost(options, state, value, seen, pendingEventLis
 		const mutableAttributeProperties = { ...properties };
 		attributeProperties = mutableAttributeProperties;
 		for (const [rawName, rawValue] of Object.entries(value.properties)) {
-			const property = sanitizeRemoteDomProperty(tagName, rawName, rawValue);
+			const property = sanitizeRemoteDomProperty(tagName, rawName, rawValue, {
+				...options.allowedAnchorUrls ? { allowedAnchorUrls: options.allowedAnchorUrls } : {},
+				urlOriginPolicy: options.urlOriginPolicy
+			});
 			if (property) {
 				remoteProperties[property.name] = property.value;
 				delete mutableAttributeProperties[rawName];
@@ -1128,13 +1157,15 @@ function normalizeRemoteNodeForHost(options, state, value, seen, pendingEventLis
 			element: tagName,
 			attributes: remoteAttributes,
 			properties: remoteProperties,
+			eventListeners,
 			children
 		},
 		nodeCount
 	};
 }
-function queueRemoteNodeEventListeners(id, tagName, eventListeners, pendingEventListenerUpdates) {
-	if (!isObjectRecord(eventListeners)) return;
+function sanitizeRemoteNodeEventListeners(id, tagName, eventListeners, pendingEventListenerUpdates) {
+	const sanitized = {};
+	if (!isObjectRecord(eventListeners)) return sanitized;
 	for (const [eventName, listener] of Object.entries(eventListeners)) {
 		if (!isSafeRemoteDomPropertyKey(eventName) || !isSupportedRemoteDomEventName(eventName, tagName)) continue;
 		pendingEventListenerUpdates.push({
@@ -1142,7 +1173,9 @@ function queueRemoteNodeEventListeners(id, tagName, eventListeners, pendingEvent
 			eventName,
 			listener: typeof listener === "function" ? listener : null
 		});
+		if (typeof listener === "function") sanitized[eventName] = listener;
 	}
+	return sanitized;
 }
 function validateRemoteNodeId(id, seen) {
 	if (id === ROOT_ID) return {
@@ -1680,8 +1713,207 @@ function mirrorClasses({ host, sourceElement, classNames, managedClasses, origin
 }
 //#endregion
 //#region src/remote-dom-renderer.ts
-const DEFAULT_MAX_MUTATION_BATCH_SIZE = 100;
+const DEFAULT_MAX_MUTATION_BATCH_SIZE = 1e3;
 const DEFAULT_MAX_DOM_NODE_COUNT = 1e3;
+const BOOLEAN_ATTRIBUTE_REACT_PROPERTIES = new Map([
+	["allowfullscreen", "allowFullScreen"],
+	["async", "async"],
+	["autofocus", "autoFocus"],
+	["autoplay", "autoPlay"],
+	["checked", "checked"],
+	["controls", "controls"],
+	["default", "default"],
+	["defer", "defer"],
+	["disabled", "disabled"],
+	["disablepictureinpicture", "disablePictureInPicture"],
+	["disableremoteplayback", "disableRemotePlayback"],
+	["formnovalidate", "formNoValidate"],
+	["hidden", "hidden"],
+	["inert", "inert"],
+	["itemscope", "itemScope"],
+	["loop", "loop"],
+	["multiple", "multiple"],
+	["muted", "muted"],
+	["nomodule", "noModule"],
+	["novalidate", "noValidate"],
+	["open", "open"],
+	["playsinline", "playsInline"],
+	["readonly", "readOnly"],
+	["required", "required"],
+	["reversed", "reversed"],
+	["selected", "selected"]
+]);
+function createRemoteComponentRenderers(options, isDisposed) {
+	const renderers = /* @__PURE__ */ new Map();
+	const fluidTags = new Set(REMOTE_DOM_UI_COMPONENTS.map(({ tagName }) => tagName));
+	for (const tagName of REMOTE_DOM_ALLOWED_TAG_NAMES) {
+		if (fluidTags.has(tagName)) continue;
+		renderers.set(tagName, createNativeRemoteComponentRenderer(tagName, options, isDisposed));
+	}
+	for (const definition of REMOTE_DOM_UI_COMPONENTS) {
+		if (definition.contractVersion !== "1") continue;
+		renderers.set(definition.tagName, createNativeRemoteComponentRenderer(definition.tagName, options, isDisposed));
+	}
+	renderers.set("remote-fragment", RemoteFragmentRenderer);
+	for (const [tagName, renderer] of options.componentRenderers ?? []) {
+		if (!fluidTags.has(tagName)) continue;
+		renderers.set(tagName, renderer);
+	}
+	return renderers;
+}
+function createNativeRemoteComponentRenderer(tagName, options, isDisposed) {
+	function NativeRemoteComponent({ element, receiver, components }) {
+		const attachedElement = useRemoteReceived(element, receiver);
+		const elementRef = useRef(null);
+		useEffect(() => {
+			const hostElement = elementRef.current;
+			if (!hostElement || !attachedElement) return;
+			const cleanup = [];
+			for (const [eventName, listener] of Object.entries(attachedElement.eventListeners)) {
+				if (typeof listener !== "function") continue;
+				const handleEvent = (event) => {
+					if (hasCloserRemoteEventListener(receiver, event, attachedElement.id, eventName)) return;
+					deliverRemoteDomEvent({
+						event,
+						eventName,
+						currentTargetId: attachedElement.id,
+						currentTargetTagName: tagName,
+						listener,
+						options,
+						isDisposed
+					});
+				};
+				hostElement.addEventListener(eventName, handleEvent);
+				cleanup.push(() => hostElement.removeEventListener(eventName, handleEvent));
+			}
+			return () => {
+				for (const dispose of cleanup) dispose();
+			};
+		}, [
+			attachedElement,
+			attachedElement?.version,
+			receiver
+		]);
+		useLayoutEffect(() => {
+			const hostElement = elementRef.current;
+			if (!(hostElement instanceof HTMLInputElement) || !attachedElement) return;
+			const value = attachedElement.properties.value;
+			if (typeof value === "string" && hostElement.value !== value) hostElement.value = value;
+			const checked = attachedElement.properties.checked;
+			if (typeof checked === "boolean" && hostElement.checked !== checked) hostElement.checked = checked;
+		}, [attachedElement, attachedElement?.version]);
+		if (!attachedElement) return null;
+		const domProps = {};
+		for (const [name, value] of Object.entries({
+			...attachedElement.attributes,
+			...attachedElement.properties
+		})) {
+			if (tagName === "input" && (name === "checked" || name === "value")) continue;
+			const booleanProperty = BOOLEAN_ATTRIBUTE_REACT_PROPERTIES.get(name);
+			domProps[booleanProperty ?? toReactDomPropertyName(name)] = booleanProperty && typeof value === "string" ? true : value;
+		}
+		domProps["data-fluid-remote-dom-node-id"] = attachedElement.id;
+		domProps.ref = elementRef;
+		const renderOptions = {
+			receiver,
+			components
+		};
+		return createElement(tagName, domProps, ...attachedElement.children.map((child) => renderRemoteNode(child, renderOptions)));
+	}
+	NativeRemoteComponent.displayName = `RemoteDomNative(${tagName})`;
+	return NativeRemoteComponent;
+}
+function RemoteRootEventBoundary({ receiver, container, options, isDisposed, children }) {
+	const root = useRemoteReceived(receiver.root, receiver);
+	useEffect(() => {
+		if (!root) return;
+		const cleanup = [];
+		for (const [eventName, listener] of Object.entries(root.eventListeners)) {
+			if (typeof listener !== "function") continue;
+			const handleEvent = (event) => {
+				if (hasCloserRemoteEventListener(receiver, event, ROOT_ID, eventName)) return;
+				deliverRemoteDomEvent({
+					event,
+					eventName,
+					currentTargetId: ROOT_ID,
+					listener,
+					options,
+					isDisposed
+				});
+			};
+			container.addEventListener(eventName, handleEvent, { capture: true });
+			cleanup.push(() => container.removeEventListener(eventName, handleEvent, { capture: true }));
+		}
+		return () => {
+			for (const dispose of cleanup) dispose();
+		};
+	}, [
+		container,
+		isDisposed,
+		options,
+		receiver,
+		root,
+		root?.version
+	]);
+	return children;
+}
+function deliverRemoteDomEvent({ event, eventName, currentTargetId, currentTargetTagName, listener, options, isDisposed }) {
+	if (eventName === "submit" && event.cancelable) event.preventDefault();
+	const targetId = resolveRenderedRemoteNodeId(event) ?? currentTargetId;
+	const payload = serializeRemoteDomEvent(event, targetId, currentTargetId, currentTargetTagName);
+	if (!payload) return;
+	try {
+		const result = listener({
+			targetId,
+			detail: toSerializableEventPayload(payload)
+		});
+		if (isPromiseLike(result)) result.catch((error) => {
+			if (!isDisposed()) reportError(options, "Remote DOM event delivery failed", error);
+		});
+	} catch (error) {
+		if (!isDisposed()) reportError(options, "Remote DOM event delivery failed", error);
+	}
+}
+function hasCloserRemoteEventListener(receiver, event, currentTargetId, eventName) {
+	for (const pathTarget of event.composedPath()) {
+		if (!(pathTarget instanceof Element)) continue;
+		const id = pathTarget.getAttribute("data-fluid-remote-dom-node-id");
+		if (!id) continue;
+		if (id === currentTargetId) return false;
+		const remoteNode = receiver.get({ id });
+		if (remoteNode && "eventListeners" in remoteNode && typeof remoteNode.eventListeners[eventName] === "function") return true;
+	}
+	return false;
+}
+function resolveRenderedRemoteNodeId(event) {
+	for (const pathTarget of event.composedPath()) {
+		if (!(pathTarget instanceof Element)) continue;
+		const id = pathTarget.getAttribute("data-fluid-remote-dom-node-id");
+		if (id) return id;
+	}
+}
+function toReactDomPropertyName(name) {
+	switch (name) {
+		case "class": return "className";
+		case "for": return "htmlFor";
+		case "readonly": return "readOnly";
+		case "tabindex": return "tabIndex";
+		default: return name;
+	}
+}
+function getSupportedUiContractVersions(componentRenderers) {
+	return REMOTE_DOM_UI_COMPONENTS.every(({ contractVersion, tagName }) => contractVersion !== "2" || componentRenderers.has(tagName)) ? REMOTE_DOM_SUPPORTED_UI_CONTRACT_VERSIONS : REMOTE_DOM_SUPPORTED_UI_CONTRACT_VERSIONS.filter((version) => version !== "2");
+}
+/**
+* Mounts one Remote DOM widget worker into an isolated shadow root.
+*
+* The low-level runtime supports native Remote DOM elements by default. A host
+* that supports worker-facing Fluid UI components must also provide the full
+* reviewed {@link MountRemoteDomWidgetOptions.componentRenderers} map, a
+* containment-aware {@link MountRemoteDomWidgetOptions.wrapRemoteRoot}, and
+* the matching Fluid component CSS. The runtime advertises Fluid UI contract
+* v2 only when every v2 renderer is present.
+*/
 function mountRemoteDomWidget(options) {
 	const initialProps = options.props ?? null;
 	assertSerializable(initialProps, "Initial widget props");
@@ -1728,35 +1960,25 @@ function mountRemoteDomWidget(options) {
 		throw error;
 	}
 	let state;
-	const pendingListenerUpdates = /* @__PURE__ */ new Map();
-	const connection = createSanitizingRemoteConnection({
-		connection: new DOMRemoteReceiver({
-			root: shadowRoot,
-			call: () => {
-				throw new RemoteDomConnectionCallDeniedError("remote element method");
-			}
-		}).connection,
-		...options.allowedAnchorUrls ? { allowedAnchorUrls: options.allowedAnchorUrls } : {},
-		urlOriginPolicy,
-		maxMutationBatchSize: options.maxMutationBatchSize ?? DEFAULT_MAX_MUTATION_BATCH_SIZE,
-		maxDomNodeCount: options.maxDomNodeCount ?? DEFAULT_MAX_DOM_NODE_COUNT,
-		onEventListenerUpdate: (targetId, eventName, listener) => {
-			pendingListenerUpdates.set(subscriptionKey(targetId, eventName), {
-				targetId,
-				eventName,
-				listener
-			});
-		},
-		onNodeLimitExceeded: () => {
-			reportError(options, "Remote DOM widget exceeded its DOM node limit");
-		},
-		onInvalidRecord: (message) => reportError(options, message),
-		onMutateError: (error) => reportError(options, "Remote DOM mutation could not be applied", error)
+	const receiver = new RemoteReceiver({
+		retain,
+		release
 	});
+	const renderContainer = document.createElement("div");
+	renderContainer.setAttribute("data-fluid-remote-dom-render-root", "");
+	const portalContainer = document.createElement("div");
+	portalContainer.setAttribute("data-fluid-remote-dom-portal-container", "");
+	shadowRoot.append(renderContainer, portalContainer);
 	const submitListener = createSubmitPreventionListener();
 	const navigationListener = (event) => {
 		handleNavigationIntent(state, event);
 	};
+	const reactRoot = createRoot(renderContainer, { onUncaughtError(error) {
+		reportError(options, "Remote DOM host rendering failed", error);
+		queueMicrotask(() => {
+			if (!state.disposed) disposeAfterFailure(state, false);
+		});
+	} });
 	state = {
 		options,
 		shadowRoot,
@@ -1765,14 +1987,40 @@ function mountRemoteDomWidget(options) {
 		styles,
 		urlOriginPolicy,
 		navigationOrigin,
-		nodesById: new Map([[ROOT_ID, shadowRoot]]),
-		subscriptions: /* @__PURE__ */ new Map(),
-		pendingListenerUpdates,
+		receiver,
+		reactRoot,
+		renderContainer,
+		portalContainer,
 		submitListener,
 		navigationListener,
 		disposed: false,
 		cleanupStarted: false
 	};
+	const componentRenderers = createRemoteComponentRenderers(options, () => state.disposed);
+	const remoteRoot = createElement(RemoteRootEventBoundary, {
+		receiver,
+		container: renderContainer,
+		options,
+		isDisposed: () => state?.disposed ?? false
+	}, createElement(RemoteRootRenderer, {
+		receiver,
+		components: componentRenderers
+	}));
+	flushSync(() => {
+		reactRoot.render(options.wrapRemoteRoot ? options.wrapRemoteRoot(remoteRoot, portalContainer) : remoteRoot);
+	});
+	const connection = createSanitizingRemoteConnection({
+		connection: receiver.connection,
+		...options.allowedAnchorUrls ? { allowedAnchorUrls: options.allowedAnchorUrls } : {},
+		urlOriginPolicy,
+		maxMutationBatchSize: options.maxMutationBatchSize ?? DEFAULT_MAX_MUTATION_BATCH_SIZE,
+		maxDomNodeCount: options.maxDomNodeCount ?? DEFAULT_MAX_DOM_NODE_COUNT,
+		onNodeLimitExceeded: () => {
+			reportError(options, "Remote DOM widget exceeded its DOM node limit");
+		},
+		onInvalidRecord: (message) => reportError(options, message),
+		onMutateError: (error) => reportError(options, "Remote DOM mutation could not be applied", error)
+	});
 	shadowRoot.addEventListener("submit", submitListener, { capture: true });
 	shadowRoot.addEventListener("click", navigationListener, { capture: true });
 	worker.onerror = (event) => {
@@ -1784,10 +2032,8 @@ function mountRemoteDomWidget(options) {
 	const hostApi = {
 		mutate(records) {
 			if (state.disposed) return;
-			connection.mutate(records);
-			rebuildNodeIndex(state);
+			flushSync(() => connection.mutate(records));
 			enforceAllowedAnchorSafety(state);
-			flushPendingListenerUpdates(state);
 		},
 		callCapability(capability, method, payload) {
 			return callCapability(state, capability, method, payload);
@@ -1799,6 +2045,7 @@ function mountRemoteDomWidget(options) {
 	const ready = Promise.all([styles.ready, thread.imports.mount({
 		widgetType: options.artifact.widgetType,
 		props: initialProps,
+		supportedUiContractVersions: getSupportedUiContractVersions(componentRenderers),
 		...options.artifact.networkAccessGranted === true ? {
 			networkAccessGranted: true,
 			hostOrigin: options.hostOrigin
@@ -1848,82 +2095,6 @@ function assertSerializableCapabilityResult(result) {
 	if (!isRemoteDomSerializableValue(result)) throw new Error("Remote DOM capability result was not serializable");
 	return result;
 }
-function rebuildNodeIndex(state) {
-	state.nodesById.clear();
-	state.nodesById.set(ROOT_ID, state.shadowRoot);
-	const visit = (node) => {
-		state.nodesById.set(remoteId(node), node);
-		for (const child of node.childNodes) visit(child);
-	};
-	for (const child of state.shadowRoot.childNodes) if (!isWidgetStyleNode(child)) visit(child);
-	for (const subscription of Array.from(state.subscriptions.values())) if (!state.nodesById.has(subscription.targetId)) unsubscribe(state, subscription.targetId, subscription.eventName);
-}
-function flushPendingListenerUpdates(state) {
-	for (const update of state.pendingListenerUpdates.values()) if (update.listener === null) unsubscribe(state, update.targetId, update.eventName);
-	else subscribe(state, update.targetId, update.eventName, update.listener);
-	state.pendingListenerUpdates.clear();
-}
-function subscribe(state, targetId, eventName, proxy) {
-	const target = state.nodesById.get(targetId);
-	const tagName = target instanceof Element ? target.localName : void 0;
-	if (!target || !isSupportedRemoteDomEventName(eventName, tagName)) return;
-	unsubscribe(state, targetId, eventName);
-	const capture = targetId === ROOT_ID;
-	const listener = (event) => {
-		if (!capture && hasCloserEventSubscription(state, event, target, eventName)) return;
-		if (eventName === "submit" && event.cancelable) event.preventDefault();
-		const actualTargetId = resolveEventTargetId(state, event);
-		if (!actualTargetId) return;
-		const eventPayload = serializeRemoteDomEvent(event, actualTargetId, targetId, tagName);
-		if (!eventPayload) return;
-		try {
-			const result = proxy({
-				targetId: actualTargetId,
-				detail: toSerializableEventPayload(eventPayload)
-			});
-			if (isPromiseLike(result)) result.catch((error) => {
-				reportEventDeliveryFailure(state, error);
-			});
-		} catch (error) {
-			reportEventDeliveryFailure(state, error);
-		}
-	};
-	target.addEventListener(eventName, listener, { capture });
-	retain(proxy);
-	state.subscriptions.set(subscriptionKey(targetId, eventName), {
-		targetId,
-		eventName,
-		target,
-		listener,
-		capture,
-		proxy
-	});
-}
-function hasCloserEventSubscription(state, event, subscriptionTarget, eventName) {
-	for (const pathTarget of event.composedPath()) {
-		if (pathTarget === subscriptionTarget) return false;
-		if (!(pathTarget instanceof Node)) continue;
-		const pathTargetId = remoteId(pathTarget);
-		if (state.nodesById.get(pathTargetId) === pathTarget && state.subscriptions.has(subscriptionKey(pathTargetId, eventName))) return true;
-	}
-	return false;
-}
-function unsubscribe(state, targetId, eventName) {
-	const key = subscriptionKey(targetId, eventName);
-	const subscription = state.subscriptions.get(key);
-	if (!subscription) return;
-	subscription.target.removeEventListener(eventName, subscription.listener, { capture: subscription.capture });
-	release(subscription.proxy);
-	state.subscriptions.delete(key);
-}
-function resolveEventTargetId(state, event) {
-	for (const target of event.composedPath()) {
-		if (target === state.shadowRoot) return ROOT_ID;
-		if (!(target instanceof Node)) continue;
-		const id = remoteId(target);
-		if (state.nodesById.get(id) === target) return id;
-	}
-}
 function handleNavigationIntent(state, event) {
 	if (!(event instanceof MouseEvent)) return;
 	const anchor = (event.target instanceof Element ? event.target : event.target instanceof Text ? event.target.parentElement : null)?.closest("a[href]");
@@ -1978,10 +2149,7 @@ function disposeMount(state, notifyWorker = true) {
 			state.shadowRoot.removeEventListener("click", state.navigationListener, { capture: true });
 		}
 	];
-	for (const subscription of Array.from(state.subscriptions.values())) cleanupSteps.push(() => {
-		unsubscribe(state, subscription.targetId, subscription.eventName);
-	});
-	cleanupSteps.push(() => state.pendingListenerUpdates.clear(), () => state.styles.dispose(), () => clearRenderedRemoteDomNodes(state.shadowRoot), () => state.nodesById.clear());
+	cleanupSteps.push(() => flushSync(() => state.reactRoot.unmount()), () => clearRemoteReceiver(state.receiver), () => state.styles.dispose(), () => clearRenderedRemoteDomNodes(state.shadowRoot));
 	const cleanupErrors = collectCleanupErrors(cleanupSteps);
 	if (notifyWorker) Promise.resolve(state.thread.imports.dispose()).catch(() => void 0);
 	queueMicrotask(() => {
@@ -1996,10 +2164,6 @@ function disposeAfterFailure(state, notifyWorker = true) {
 		reportError(state.options, "Remote DOM widget cleanup failed after an earlier error", cleanupError);
 	}
 }
-function reportEventDeliveryFailure(state, error) {
-	if (state.disposed) return;
-	reportError(state.options, "Remote DOM event delivery failed", error);
-}
 function createShadowRoot(host) {
 	if (host.shadowRoot) {
 		host.shadowRoot.replaceChildren();
@@ -2065,8 +2229,8 @@ function resolveInternalNavigationUrl(href, navigationOrigin) {
 		return;
 	}
 }
-function findNodeId(state, node) {
-	for (const [id, candidate] of state.nodesById) if (candidate === node) return id;
+function findNodeId(_state, node) {
+	return (node instanceof Element ? node : node.parentElement)?.closest("[data-fluid-remote-dom-node-id]")?.getAttribute("data-fluid-remote-dom-node-id") ?? void 0;
 }
 function isWidgetStyleNode(node) {
 	return node instanceof HTMLStyleElement && node.hasAttribute("data-fluid-widget-style");
@@ -2074,6 +2238,13 @@ function isWidgetStyleNode(node) {
 function clearRenderedRemoteDomNodes(shadowRoot) {
 	for (const child of Array.from(shadowRoot.childNodes)) if (!isWidgetStyleNode(child)) child.remove();
 }
+function clearRemoteReceiver(receiver) {
+	while (receiver.root.children.length > 0) receiver.connection.mutate([[
+		MUTATION_TYPE_REMOVE_CHILD,
+		ROOT_ID,
+		0
+	]]);
+}
 function toSerializableEventPayload(payload) {
 	const result = {
 		bubbles: payload.bubbles,
@@ -2178,13 +2349,10 @@ function reportCleanupErrors(options, message, errors) {
 	if (errors.length === 0) return;
 	reportError(options, message, errors.length === 1 ? errors[0] : new AggregateError(errors, "Multiple cleanup operations failed"));
 }
-function subscriptionKey(targetId, eventName) {
-	return `${targetId}:${eventName}`;
-}
 function isPromiseLike(value) {
 	return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
 }
 //#endregion
 export { mountRemoteDomWidget as t };
 
-//# sourceMappingURL=remote-dom-renderer-CpdKWANy.mjs.map
+//# sourceMappingURL=remote-dom-renderer-Dn3pfVsl.mjs.map