remote-components 0.1.2 → 0.2.1

package/dist/{next/host/client/index.cjs → host/nextjs/app/client-only.cjs}

@@ -6,6 +6,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -28,86 +31,46 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/next/host/client/index.tsx
-var client_exports = {};
-__export(client_exports, {
-  RemoteComponent: () => RemoteComponent2,
-  RemoteComponentsProvider: () => import_context3.RemoteComponentsProvider
+// src/utils/constants.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME, MISSING_SHARED_MODULES_MESSAGE, CORS_DOCS_URL;
+var init_constants = __esm({
+  "src/utils/constants.ts"() {
+    "use strict";
+    RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+    MISSING_SHARED_MODULES_MESSAGE = "Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?";
+    CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
+  }
 });
-module.exports = __toCommonJS(client_exports);
-var Image = __toESM(require("next/image"), 1);
-
-// src/react/index.tsx
-var import_react3 = require("react");
-var import_react_dom = require("react-dom");
 
-// src/shared/client/apply-origin.ts
-var tagNames = [
-  "img",
-  "source",
-  "video",
-  "audio",
-  "track",
-  "iframe",
-  "embed",
-  "script",
-  "link"
-];
-function applyOriginToNodes(doc, url, resolveClientUrl) {
-  if (url.origin !== location.origin) {
-    const nodes = doc.querySelectorAll(
-      tagNames.map(
-        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
-      ).join(",")
-    );
-    nodes.forEach((node) => {
-      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
-        const absoluteSrc = new URL(node.getAttribute("src") ?? "/", url).href;
-        const isScript = node.tagName.toLowerCase() === "script";
-        node.src = isScript ? absoluteSrc : resolveClientUrl?.(absoluteSrc) ?? absoluteSrc;
-      }
-      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
-        const absoluteHref = new URL(node.getAttribute("href") ?? "/", url).href;
-        node.setAttribute(
-          "href",
-          resolveClientUrl?.(absoluteHref) ?? absoluteHref
-        );
-      }
-      if (node.hasAttribute("srcset")) {
-        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
-          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("srcset", srcSet);
-        }
-      }
-      if (node.hasAttribute("imagesrcset")) {
-        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
-          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("imagesrcset", srcSet);
-        }
-      }
-    });
+// src/host/defaults/app.ts
+var app_exports = {};
+__export(app_exports, {
+  shared: () => shared
+});
+var shared;
+var init_app = __esm({
+  "src/host/defaults/app.ts"() {
+    "use strict";
+    init_constants();
+    shared = {
+      __remote_components_missing_shared__: () => Promise.reject(new Error(MISSING_SHARED_MODULES_MESSAGE))
+    };
   }
-}
+});
 
-// src/shared/constants.ts
-var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
-var CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
+// src/host/nextjs/app-client-only.tsx
+var app_client_only_exports = {};
+__export(app_client_only_exports, {
+  ConsumeRemoteComponent: () => ConsumeRemoteComponent2
+});
+module.exports = __toCommonJS(app_client_only_exports);
+var Image = __toESM(require("next/image"), 1);
 
-// src/shared/client/protected-rc-fallback.ts
+// src/utils/logger.ts
+init_constants();
+
+// src/runtime/url/protected-rc-fallback.ts
+init_constants();
 function isProxiedUrl(url) {
   try {
     return new URL(url, location.href).pathname === RC_PROTECTED_REMOTE_FETCH_PATHNAME;
@@ -116,7 +79,7 @@ function isProxiedUrl(url) {
   }
 }
 
-// src/shared/utils/abort.ts
+// src/utils/abort.ts
 function isAbortError(error) {
   if (error instanceof DOMException && error.name === "AbortError") {
     return true;
@@ -128,7 +91,8 @@ function isAbortError(error) {
   return false;
 }
 
-// src/shared/error.ts
+// src/utils/error.ts
+init_constants();
 var RemoteComponentsError = class extends Error {
   code = "REMOTE_COMPONENTS_ERROR";
   constructor(message, options) {
@@ -186,6 +150,11 @@ async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
   }
   return fallback;
 }
+function failedProxiedAssetError(kind, url, resolvedUrl) {
+  return new RemoteComponentsError(
+    `Failed to load ${kind} "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured, "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher, and the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+  );
+}
 function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
   if (status === 404) {
     return new RemoteComponentsError(
@@ -194,7 +163,7 @@ function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
 The host server needs middleware or a route that handles "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}".
 
 Proxying requires two pieces:
-  1. resolveClientUrl={proxyClientRequestsThroughHost} on <RemoteComponent>
+  1. resolveClientUrl={routeThroughHostProxy} on <RemoteComponent>
   2. Middleware or a route for "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" on the host server
 
 Docs: ${CORS_DOCS_URL}`
@@ -211,123 +180,7 @@ Docs: ${CORS_DOCS_URL}`
   );
 }
 
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var attrToProp = {
-  fetchpriority: "fetchPriority",
-  crossorigin: "crossOrigin",
-  imagesrcset: "imageSrcSet",
-  imagesizes: "imageSizes",
-  srcset: "srcSet"
-};
-
-// src/shared/client/const.ts
-var DEFAULT_ROUTE = "/";
-var RUNTIME_WEBPACK = "webpack";
-var RUNTIME_TURBOPACK = "turbopack";
-var RUNTIME_SCRIPT = "script";
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-
-// src/shared/client/parse-remote-html.ts
-function validateSingleComponent(doc, name, url) {
-  if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
-    throw multipleRemoteComponentsError(url);
-  }
-}
-function findComponentElement(doc, name) {
-  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
-}
-function parseNextData(doc) {
-  return JSON.parse(
-    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
-  );
-}
-function resolveComponentName(component, nextData, fallbackName) {
-  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
-  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
-  return { name, isRemoteComponent };
-}
-function extractComponentMetadata(component, nextData, name, url) {
-  return {
-    name,
-    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
-    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
-    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
-  };
-}
-function extractRemoteShared(doc, name, nextData) {
-  const remoteSharedEl = doc.querySelector(
-    `#${name}_shared[data-remote-components-shared]`
-  );
-  const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
-  remoteSharedEl?.remove();
-  return remoteShared;
-}
-function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
-  if (!component || !(rsc || nextData || isRemoteComponent)) {
-    throw new RemoteComponentsError(
-      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
-    );
-  }
-}
-function extractLinks(doc, component) {
-  return Array.from(doc.querySelectorAll("link[href]")).filter(
-    (link) => !component.contains(link)
-  );
-}
-function extractScripts(doc, component, isRemoteComponent) {
-  return Array.from(
-    (isRemoteComponent ? component : doc).querySelectorAll(
-      "script[src],script[data-src]"
-    )
-  );
-}
-function parseRemoteComponentDocument(doc, name, url) {
-  validateSingleComponent(doc, name, url.href);
-  const component = findComponentElement(doc, name);
-  const nextData = parseNextData(doc);
-  const { name: resolvedName, isRemoteComponent } = resolveComponentName(
-    component,
-    nextData,
-    name
-  );
-  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
-  const metadata = extractComponentMetadata(
-    component,
-    nextData,
-    resolvedName,
-    url
-  );
-  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
-  validateComponentFound(
-    component,
-    rsc,
-    nextData,
-    isRemoteComponent,
-    url.href,
-    resolvedName
-  );
-  const links = extractLinks(doc, component);
-  const scripts = extractScripts(doc, component, isRemoteComponent);
-  return {
-    component,
-    name: resolvedName,
-    isRemoteComponent,
-    metadata,
-    nextData,
-    rsc,
-    remoteShared,
-    links,
-    scripts
-  };
-}
-
-// src/shared/utils/logger.ts
+// src/utils/logger.ts
 var PREFIX = "remote-components";
 var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
 function logDebug(location2, message) {
@@ -353,13 +206,13 @@ function warnCrossOriginFetchError(logLocation, url) {
     }
     logWarn(
       logLocation,
-      `Failed to fetch cross-origin resource "${parsed.href}". If this is a protected deployment, ensure withRemoteComponentsHost middleware is configured in your host and that the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+      `Failed to fetch cross-origin resource "${parsed.href}". To load assets from a protected deployment, two steps are required: (1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. See: ${CORS_DOCS_URL}`
     );
   } catch {
   }
 }
 
-// src/shared/client/polyfill.tsx
+// src/host/shared/polyfill.tsx
 var import_jsx_runtime = (
   // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
   require("react/jsx-runtime")
@@ -382,7 +235,7 @@ function applyBundleUrlToImagePropsSrc(bundle, src) {
   const propSrc = src;
   return applyBundleUrlToSrc(bundle, propSrc.src);
 }
-var imageImpl = (bundle) => function RemoteImage({
+var imageImpl = (bundle, resolveClientUrl) => function RemoteImage({
   fill: _fill,
   loader: _loader,
   quality: _quality,
@@ -399,21 +252,22 @@ var imageImpl = (bundle) => function RemoteImage({
     bundle,
     typeof src === "string" ? src : src.src
   );
+  const proxiedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "img",
     {
       decoding: "async",
       style: { color: "transparent" },
       ...props,
-      src: newSrc,
+      src: proxiedSrc,
       suppressHydrationWarning: true
     }
   );
 };
-function sharedPolyfills(shared) {
+function sharedPolyfills(shared2, resolveClientUrl) {
   const self = globalThis;
   const polyfill = {
-    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared2?.["next/navigation"] ?? (() => Promise.resolve({
       useRouter() {
         return {
           push: (routerUrl) => {
@@ -444,7 +298,7 @@ function sharedPolyfills(shared) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared2?.["next/link"] ?? (() => Promise.resolve({
       default: ({
         scroll: _,
         replace,
@@ -494,18 +348,18 @@ function sharedPolyfills(shared) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared2?.["next/form"] ?? (() => Promise.resolve({
       default: () => {
         throw new Error("Next.js <Form> component not implemented");
       },
       __esModule: true
     })),
-    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      Image: imageImpl(bundle),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared2?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle, resolveClientUrl),
       __esModule: true
     })),
-    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      default: imageImpl(bundle),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared2?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle, resolveClientUrl),
       getImageProps: (_imgProps) => {
         throw new Error(
           "Next.js getImageProps() is not implemented in remote components"
@@ -513,13 +367,13 @@ function sharedPolyfills(shared) {
       },
       __esModule: true
     })),
-    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared2?.["next/script"] ?? (() => Promise.resolve({
       // TODO: implement <Script> component for non-Next.js host applications
       // do not throw an error for now
       default: () => null,
       __esModule: true
     })),
-    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
+    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared2?.["next/router"] ?? (() => (
       // TODO: incomplete implementation
       Promise.resolve({
         useRouter() {
@@ -555,126 +409,378 @@ function sharedPolyfills(shared) {
   return polyfill;
 }
 
-// src/shared/client/component-loader.ts
-var React = __toESM(require("react"), 1);
-var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
-var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
-var ReactDOM = __toESM(require("react-dom"), 1);
-var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+// src/host/nextjs/image-impl.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createRemoteLoader(bundle, resolveClientUrl) {
+  return ({ src, width, quality }) => {
+    const self = globalThis;
+    const origin = self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+    let imageUrl = src;
+    try {
+      const parsed = new URL(src);
+      if (origin && parsed.origin === origin) {
+        imageUrl = parsed.pathname + parsed.search;
+      }
+    } catch {
+    }
+    const { assetPrefix } = /^(?<assetPrefix>.*?)\/_next\//.exec(imageUrl)?.groups ?? {};
+    const url = `${origin}${assetPrefix ?? ""}/_next/image?url=${encodeURIComponent(imageUrl)}&w=${width}&q=${quality ?? 75}`;
+    return resolveClientUrl?.(url) ?? url;
+  };
+}
+function imageImpl2(ImageComponent, bundle, resolveClientUrl, useRemoteLoader) {
+  const remoteLoader = useRemoteLoader ? createRemoteLoader(bundle, resolveClientUrl) : void 0;
+  const component = function RemoteImage(props) {
+    if (remoteLoader) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImageComponent, { loader: remoteLoader, ...props });
+    }
+    const rawSrc = applyBundleUrlToImagePropsSrc(bundle, props.src);
+    const src = resolveClientUrl?.(rawSrc) ?? rawSrc;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImageComponent, { ...props, src });
+  };
+  component.default = component;
+  return component;
+}
 
-// src/shared/webpack/next-client-pages-loader.ts
-function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
-  const self = globalThis;
-  const nextCssOriginal = document.querySelector(
-    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
-  );
-  if (nextCssOriginal) {
-    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+// src/runtime/url/resolve-client-url.ts
+function withRemoteSrc(resolveClientUrl, remoteSrc) {
+  const remoteOrigin = parseOrigin(remoteSrc);
+  return (url) => {
+    const urlOrigin = parseOrigin(url);
+    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
+      return void 0;
+    }
+    return resolveClientUrl(remoteSrc, url);
+  };
+}
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
   }
-  const nextCss = document.createElement("noscript");
-  nextCss.id = "__next_css__DO_NOT_USE__";
-  nextCss.setAttribute("data-bundle", bundle);
-  nextCss.setAttribute("data-route", route);
-  const nextCssEnd = document.createElement("noscript");
-  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
-  nextCssEnd.setAttribute("data-bundle", bundle);
-  nextCssEnd.setAttribute("data-route", route);
-  document.head.appendChild(nextCssEnd);
-  document.head.appendChild(nextCss);
-  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
-  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
-  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? ""] ?? -1;
-  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
-  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
-  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? ""] ?? -1;
-  if (!(componentLoaderChunk && appLoaderChunk)) {
-    throw new RemoteComponentsError(
-      `Next.js client pages loader not found in bundle "${bundle}".`
+}
+
+// src/runtime/url/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// src/host/react/index.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/host/server/fetch-headers.ts
+function remoteFetchHeaders() {
+  return {
+    /**
+     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
+     * If the remote component uses vercel deployment protection, ensure the host and remote vercel
+     * projects share a common automation bypass secret, and the shared secret is used as the
+     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
+     */
+    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
+      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+    } : {},
+    Accept: "text/html"
+  };
+}
+
+// src/host/server/fetch-with-hooks.ts
+async function fetchWithWarning(url, init) {
+  try {
+    return await fetch(url, init);
+  } catch (error) {
+    warnCrossOriginFetchError("FetchRemoteComponent", url);
+    throw error;
+  }
+}
+async function fetchWithHooks(url, additionalInit, options = {}) {
+  const {
+    onRequest,
+    onResponse,
+    abortController = new AbortController()
+  } = options;
+  const signal = abortController.signal;
+  const hookOptions = {
+    signal,
+    abort: (reason) => abortController.abort(reason)
+  };
+  const init = {
+    method: "GET",
+    headers: remoteFetchHeaders(),
+    signal,
+    ...additionalInit
+  };
+  const res = await onRequest?.(url, init, hookOptions) ?? await fetchWithWarning(url, init);
+  return await onResponse?.(url, res, hookOptions) ?? res;
+}
+
+// src/host/server/get-client-or-server-url.ts
+function getClientOrServerUrl(src, serverFallback) {
+  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
+  if (!src) {
+    return new URL(fallback);
+  }
+  return typeof src === "string" ? new URL(src, fallback) : src;
+}
+
+// src/host/shared/state.ts
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+
+// src/host/utils/resolve-name-from-src.ts
+function resolveNameFromSrc(src, defaultName) {
+  if (!src) {
+    return defaultName;
+  }
+  const hash = typeof src === "string" ? src : src.hash;
+  const hashIndex = hash.indexOf("#");
+  if (hashIndex < 0) {
+    return defaultName;
+  }
+  const name = hash.slice(hashIndex + 1);
+  return name || defaultName;
+}
+
+// src/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/runtime/constants.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/runtime/html/apply-origin.ts
+var tagNames = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+function applyOriginToNodes(doc, url, resolveClientUrl) {
+  if (url.origin !== location.origin) {
+    const nodes = doc.querySelectorAll(
+      tagNames.map(
+        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
+      ).join(",")
     );
+    nodes.forEach((node) => {
+      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
+        const absoluteSrc = new URL(node.getAttribute("src") ?? "/", url).href;
+        const isScript = node.tagName.toLowerCase() === "script";
+        node.src = isScript ? absoluteSrc : resolveClientUrl?.(absoluteSrc) ?? absoluteSrc;
+      }
+      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        const absoluteHref = new URL(node.getAttribute("href") ?? "/", url).href;
+        node.setAttribute(
+          "href",
+          resolveClientUrl?.(absoluteHref) ?? absoluteHref
+        );
+      }
+      if (node.hasAttribute("srcset")) {
+        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
+          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("srcset", srcSet);
+        }
+      }
+      if (node.hasAttribute("imagesrcset")) {
+        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
+          const [urlPart, descriptor] = entry.trim().split(/\s+/);
+          if (!urlPart)
+            return entry;
+          const absoluteUrl = new URL(urlPart, url).href;
+          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
+          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("imagesrcset", srcSet);
+        }
+      }
+    });
   }
-  const __NEXT_P_ORIGINAL = self.__NEXT_P;
-  const selfOriginal = self;
-  delete selfOriginal.__NEXT_P;
-  self.__remote_webpack_require__?.[bundle]?.(
-    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+}
+
+// src/runtime/html/parse-remote-html.ts
+function validateSingleComponent(doc, name, url) {
+  if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
+    throw multipleRemoteComponentsError(url);
+  }
+}
+function findComponentElement(doc, name) {
+  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+}
+function parseNextData(doc) {
+  return JSON.parse(
+    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
   );
-  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
-    self.__remote_webpack_require__?.[bundle]?.(
-      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
+}
+function resolveComponentName(component, nextData, fallbackName) {
+  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
+  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
+  return { name, isRemoteComponent };
+}
+function extractComponentMetadata(component, nextData, name, url) {
+  return {
+    name,
+    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
+    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
+  };
+}
+function extractRemoteShared(doc, name, nextData) {
+  const remoteSharedEl = doc.querySelector(
+    `#${name}_shared[data-remote-components-shared]`
+  );
+  const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
+  remoteSharedEl?.remove();
+  return remoteShared;
+}
+function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
+  if (!component || !(rsc || nextData || isRemoteComponent)) {
+    throw new RemoteComponentsError(
+      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
     );
   }
-  if (self.__NEXT_P) {
-    const [, componentLoader] = self.__NEXT_P[0] ?? [
-      void 0,
-      () => ({ default: null })
-    ];
-    const [, appLoader] = self.__NEXT_P[2] ?? [
-      void 0,
-      () => ({
-        default: null
-      })
-    ];
-    const { default: Component } = componentLoader();
-    const { default: App } = appLoader();
-    if (!self.__remote_next_css__) {
-      self.__remote_next_css__ = {};
-    }
-    if (!self.__remote_next_css__[bundle]) {
-      const cssRE = /\.s?css$/;
-      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
-        self.__remote_webpack_require__?.[bundle]?.(id);
-      });
-      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
-        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
-        if (id) {
-          self.__remote_webpack_require__?.[bundle]?.(id);
-        }
-      });
-      const elements = [];
-      let node = nextCss.previousSibling;
-      while (node && node !== nextCssEnd) {
-        elements.push(node);
-        node.remove();
-        node = nextCss.previousSibling;
-      }
-      self.__remote_next_css__[bundle] = elements;
+}
+function extractLinks(doc, component) {
+  return Array.from(doc.querySelectorAll("link[href]")).filter(
+    (link) => !component.contains(link)
+  );
+}
+function extractScripts(doc, component, isRemoteComponent) {
+  return Array.from(
+    (isRemoteComponent ? component : doc).querySelectorAll(
+      "script[src],script[data-src]"
+    )
+  );
+}
+function parseRemoteComponentDocument(doc, name, url) {
+  validateSingleComponent(doc, name, url.href);
+  const component = findComponentElement(doc, name);
+  const nextData = parseNextData(doc);
+  const { name: resolvedName, isRemoteComponent } = resolveComponentName(
+    component,
+    nextData,
+    name
+  );
+  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const metadata = extractComponentMetadata(
+    component,
+    nextData,
+    resolvedName,
+    url
+  );
+  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
+  validateComponentFound(
+    component,
+    rsc,
+    nextData,
+    isRemoteComponent,
+    url.href,
+    resolvedName
+  );
+  const links = extractLinks(doc, component);
+  const scripts = extractScripts(doc, component, isRemoteComponent);
+  return {
+    component,
+    name: resolvedName,
+    isRemoteComponent,
+    metadata,
+    nextData,
+    rsc,
+    remoteShared,
+    links,
+    scripts
+  };
+}
+
+// src/runtime/html/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
     }
-    if (styleContainer) {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        styleContainer.appendChild(el.cloneNode(true));
-      });
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
     } else {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        document.head.appendChild(el);
-      });
+      el.setAttribute(attr, String(value));
     }
-    delete self.__NEXT_P;
-    self.__NEXT_P = __NEXT_P_ORIGINAL;
-    if (nextCssOriginal) {
-      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
     }
-    nextCss.remove();
-    nextCssEnd.remove();
-    return { Component, App };
   }
-  return { Component: null, App: null };
 }
 
-// src/shared/webpack/shared-modules.ts
+// src/runtime/loaders/component-loader.ts
+var React = __toESM(require("react"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+
+// src/config/webpack/apply-shared-modules.ts
+var DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
 function applySharedModules(bundle, resolve) {
   logDebug(
     "SharedModules",
@@ -694,48 +800,160 @@ function applySharedModules(bundle, resolve) {
       `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
     );
     for (const [key, value] of Object.entries(resolve)) {
-      let ids = modulePaths.filter((p) => p === key);
-      if (ids.length === 0) {
-        ids = modulePaths.filter((p) => p.includes(key));
-      }
+      const exactIds = modulePaths.filter((p) => p === key);
+      const ids = exactIds.length > 0 ? exactIds : modulePaths.filter((p) => p.includes(key));
       if (ids.length === 0) {
         logDebug(
           "SharedModules",
           `No matching module path found for shared module "${key}"`
         );
       }
-      for (let id of ids) {
+      for (const id of ids) {
         const webpackBundle = self.__remote_webpack_require__[bundle];
         if (webpackBundle.m) {
-          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
-            const mappedId = `${self.__remote_webpack_module_map__[bundle][id]}`;
+          const resolvedId = self.__remote_webpack_module_map__?.[bundle]?.[id] ? `${self.__remote_webpack_module_map__[bundle][id]}` : id;
+          if (resolvedId !== id) {
             logDebug(
               "SharedModules",
-              `Mapped module id: "${id}" -> "${mappedId}"`
+              `Mapped module id: "${id}" -> "${resolvedId}"`
             );
-            id = mappedId;
           }
-          webpackBundle.m[id] = (module2) => {
+          webpackBundle.m[resolvedId] = (module2) => {
             module2.exports = value;
           };
         } else {
           logWarn(
             "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}"`
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
           );
         }
       }
     }
-  } else {
-    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
-    logDebug(
-      "SharedModules",
-      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
-    );
+  } else {
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
+    );
+  }
+}
+
+// src/config/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
+    );
+  }
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(
+    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+  );
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(
+      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
+    );
+  }
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    if (!self.__remote_next_css__) {
+      self.__remote_next_css__ = {};
+    }
+    if (!self.__remote_next_css__[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
+      let node = nextCss.previousSibling;
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
+        node = nextCss.previousSibling;
+      }
+      self.__remote_next_css__[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
   }
+  return { Component: null, App: null };
 }
 
-// src/shared/client/rsc.ts
+// src/runtime/rsc.ts
 var import_web_streams_polyfill = require("web-streams-polyfill");
 function fixPayload(payload) {
   if (Array.isArray(payload)) {
@@ -801,56 +1019,15 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/shared/client/webpack-patterns.ts
-var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
-
-// src/shared/client/script-loader.ts
-async function loadScripts(scripts, resolveClientUrl) {
-  await Promise.all(
-    scripts.map((script) => {
-      return new Promise((resolve, reject) => {
-        const newSrc = new URL(
-          // remove the remote component bundle name identifier from the script src
-          script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
-          location.origin
-        ).href;
-        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
-        const newScript = document.createElement("script");
-        newScript.onload = () => resolve();
-        newScript.onerror = () => {
-          const isProxied = isProxiedUrl(resolvedSrc);
-          if (isProxied) {
-            reject(
-              new RemoteComponentsError(
-                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHost middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-              )
-            );
-          } else {
-            warnCrossOriginFetchError("ScriptLoader", newSrc);
-            reject(
-              new RemoteComponentsError(
-                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
-              )
-            );
-          }
-        };
-        newScript.src = resolvedSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
-    })
-  );
-}
-
-// src/shared/client/turbopack-patterns.ts
+// src/runtime/turbopack/patterns.ts
 var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
-var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
+var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|[a-z])\.A\((?<sharedModuleId>[0-9]+)\)/;
 var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
 var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
 var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
 var TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
 
-// src/shared/client/chunk-loader.ts
+// src/runtime/turbopack/chunk-loader.ts
 function createChunkLoader(runtime, resolveClientUrl) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
     logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
@@ -910,11 +1087,7 @@ function createChunkLoader(runtime, resolveClientUrl) {
       }).then(resolve).catch((error) => {
         const isProxied = isProxiedUrl(resolvedUrl);
         if (isProxied) {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHost middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-            )
-          );
+          reject(failedProxiedAssetError("chunk", url, resolvedUrl));
         } else {
           warnCrossOriginFetchError("ChunkLoader", url);
           reject(error);
@@ -1062,7 +1235,7 @@ async function handleTurbopackChunk(code, bundle, url) {
   }
 }
 
-// src/shared/client/turbopack-module.ts
+// src/runtime/turbopack/module.ts
 function handleTurbopackModule(bundle, moduleId, id) {
   const self = globalThis;
   const bundleKey = getBundleKey(bundle);
@@ -1291,7 +1464,8 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
   };
 }
 
-// src/shared/client/shared-modules.ts
+// src/runtime/turbopack/shared-modules.ts
+var DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
 async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
   self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
@@ -1328,9 +1502,9 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
       }
     }
     if (sharedModuleInitializer) {
-      const { shared } = await sharedModuleInitializer;
+      const { shared: shared2 } = await sharedModuleInitializer;
       const sharedModuleIds = extractSharedModuleIds(
-        shared,
+        shared2,
         bundleKey,
         self
       );
@@ -1342,7 +1516,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
             } else {
               logError(
                 "SharedModules",
-                `Host shared module "${module2}" not found for ID ${id}`
+                `Host shared module "${module2}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
               );
             }
           }
@@ -1359,15 +1533,15 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
         } else {
           logError(
             "SharedModules",
-            `Shared module "${module2}" not found for "${bundle}"`
+            `Shared module "${module2}" not found for "${bundle}". ${DEDUPLICATION_WARNING}`
           );
         }
       }
     })
   );
 }
-function extractSharedModuleIds(shared, bundleKey, self) {
-  return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+function extractSharedModuleIds(shared2, bundleKey, self) {
+  return Object.entries(shared2).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
     const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
     if (asyncSharedModuleId) {
       const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
@@ -1411,8 +1585,8 @@ function getSharedModule(bundle, id) {
   return null;
 }
 
-// src/shared/client/webpack-adapter.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
+// src/runtime/turbopack/webpack-runtime.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared2 = {}, remoteShared = {}, resolveClientUrl) {
   const self = globalThis;
   if (!self.__remote_bundle_url__) {
     self.__remote_bundle_url__ = {};
@@ -1449,7 +1623,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
     "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
     "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
     "react-dom/client": async () => (await import("react-dom/client")).default,
-    ...shared
+    ...shared2
   };
   await initializeSharedModules(
     bundle ?? "default",
@@ -1466,7 +1640,7 @@ function createModuleRequire(runtime) {
       id
     };
     const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
-    logDebug("WebpackAdapter", `remoteRuntime: "${remoteRuntime}"`);
+    logDebug("WebpackRuntime", `remoteRuntime: "${remoteRuntime}"`);
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
         return self.__remote_webpack_require__?.[bundle]?.(moduleId);
@@ -1482,7 +1656,7 @@ function createModuleRequire(runtime) {
       throw new Error(`Module "${id}" not found.`);
     } catch (requireError) {
       logWarn(
-        "WebpackAdapter",
+        "WebpackRuntime",
         `Module require failed: ${String(requireError)}`
       );
       if (typeof self.__original_webpack_require__ !== "function") {
@@ -1494,7 +1668,7 @@ function createModuleRequire(runtime) {
         );
       }
       try {
-        logDebug("WebpackAdapter", "Falling back to original webpack require");
+        logDebug("WebpackRuntime", "Falling back to original webpack require");
         return self.__original_webpack_require__(id);
       } catch (originalError) {
         throw new RemoteComponentsError(
@@ -1506,7 +1680,41 @@ function createModuleRequire(runtime) {
   };
 }
 
-// src/shared/client/component-loader.ts
+// src/runtime/loaders/script-loader.ts
+async function loadScripts(scripts, resolveClientUrl) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
+          location.origin
+        ).href;
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        newScript.onerror = () => {
+          const isProxied = isProxiedUrl(resolvedSrc);
+          if (isProxied) {
+            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
+          } else {
+            warnCrossOriginFetchError("ScriptLoader", newSrc);
+            reject(
+              new RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
+        };
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+
+// src/runtime/loaders/component-loader.ts
 async function loadRemoteComponent({
   url,
   name,
@@ -1517,7 +1725,7 @@ async function loadRemoteComponent({
   data,
   nextData,
   scripts = [],
-  shared = Promise.resolve({}),
+  shared: shared2 = Promise.resolve({}),
   remoteShared = {},
   container,
   resolveClientUrl
@@ -1531,7 +1739,7 @@ async function loadRemoteComponent({
       self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
       await loadScripts(scripts, resolveClientUrl);
     }
-    const hostShared = await shared;
+    const hostShared = await shared2;
     logDebug(
       "ComponentLoader",
       `loadRemoteComponent: bundle="${bundle}", name="${name}"`
@@ -1609,17 +1817,19 @@ async function loadRemoteComponent({
     };
   }
 }
-async function loadRSCComponent(rscName, data) {
-  let createFromReadableStream;
+async function importCreateFromReadableStream() {
   try {
-    const { createFromReadableStream: _createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
-    createFromReadableStream = _createFromReadableStream;
+    const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+    return createFromReadableStream;
   } catch {
     const {
-      default: { createFromReadableStream: _createFromReadableStream }
+      default: { createFromReadableStream }
     } = await import("react-server-dom-webpack/client.browser");
-    createFromReadableStream = _createFromReadableStream;
+    return createFromReadableStream;
   }
+}
+async function loadRSCComponent(rscName, data) {
+  const createFromReadableStream = await importCreateFromReadableStream();
   if (typeof createFromReadableStream !== "function") {
     throw new RemoteComponentsError(
       'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
@@ -1640,68 +1850,7 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
-// src/shared/client/proxy-through-host.ts
-function withRemoteSrc(resolveClientUrl, remoteSrc) {
-  const remoteOrigin = parseOrigin(remoteSrc);
-  return (url) => {
-    const urlOrigin = parseOrigin(url);
-    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
-      return void 0;
-    }
-    return resolveClientUrl(remoteSrc, url);
-  };
-}
-function parseOrigin(url) {
-  try {
-    return new URL(url).origin;
-  } catch {
-    return void 0;
-  }
-}
-
-// src/shared/client/set-attributes-from-props.ts
-var DOMAttributeNames = {
-  acceptCharset: "accept-charset",
-  className: "class",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  noModule: "noModule"
-};
-var ignoreProps = [
-  "onLoad",
-  "onReady",
-  "dangerouslySetInnerHTML",
-  "children",
-  "onError",
-  "strategy",
-  "stylesheets"
-];
-function isBooleanScriptAttribute(attr) {
-  return ["async", "defer", "noModule"].includes(attr);
-}
-function setAttributesFromProps(el, props) {
-  for (const [p, value] of Object.entries(props)) {
-    if (!Object.hasOwn(props, p))
-      continue;
-    if (ignoreProps.includes(p))
-      continue;
-    if (value === void 0) {
-      continue;
-    }
-    const attr = DOMAttributeNames[p] || p.toLowerCase();
-    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
-      el[attr] = Boolean(value);
-    } else {
-      el.setAttribute(attr, String(value));
-    }
-    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
-      el.setAttribute(attr, "");
-      el.removeAttribute(attr);
-    }
-  }
-}
-
-// src/shared/client/static-loader.ts
+// src/runtime/loaders/static-loader.ts
 async function importViaCallback(absoluteSrc, resolveClientUrl) {
   const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;
   const fetchUrl = new URL(resolvedUrl, location.href).href;
@@ -1851,101 +2000,9 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   );
 }
 
-// src/shared/contract/host-state.ts
-function createHostState() {
-  return {
-    stage: "idle",
-    prevSrc: void 0,
-    prevUrl: void 0,
-    prevName: void 0,
-    prevIsRemoteComponent: false,
-    abortController: void 0
-  };
-}
-
-// src/shared/contract/resolve-name-from-src.ts
-function resolveNameFromSrc(src, defaultName) {
-  if (!src) {
-    return defaultName;
-  }
-  const hash = typeof src === "string" ? src : src.hash;
-  const hashIndex = hash.indexOf("#");
-  if (hashIndex < 0) {
-    return defaultName;
-  }
-  const name = hash.slice(hashIndex + 1);
-  return name || defaultName;
-}
-
-// src/shared/ssr/fetch-headers.ts
-function remoteFetchHeaders() {
-  return {
-    /**
-     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
-     * If the remote component uses vercel deployment protection, ensure the host and remote vercel
-     * projects share a common automation bypass secret, and the shared secret is used as the
-     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
-     */
-    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
-      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
-    } : {},
-    Accept: "text/html"
-  };
-}
-
-// src/shared/ssr/fetch-with-hooks.ts
-async function fetchWithHooks(url, additionalInit, options = {}) {
-  const {
-    onRequest,
-    onResponse,
-    abortController = new AbortController()
-  } = options;
-  const signal = abortController.signal;
-  const hookOptions = {
-    signal,
-    abort: (reason) => abortController.abort(reason)
-  };
-  const init = {
-    method: "GET",
-    headers: remoteFetchHeaders(),
-    signal,
-    ...additionalInit
-  };
-  let res = await onRequest?.(url, init, hookOptions);
-  if (!res) {
-    try {
-      res = await fetch(url, init);
-    } catch (error) {
-      warnCrossOriginFetchError("FetchRemoteComponent", url);
-      throw error;
-    }
-  }
-  const transformedRes = await onResponse?.(url, res, hookOptions);
-  if (transformedRes) {
-    res = transformedRes;
-  }
-  return res;
-}
-
-// src/shared/ssr/get-client-or-server-url.ts
-function getClientOrServerUrl(src, serverFallback) {
-  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
-  if (!src) {
-    return new URL(fallback);
-  }
-  return typeof src === "string" ? new URL(src, fallback) : src;
-}
-
-// src/react/hooks/use-resolve-client-url.ts
+// src/host/react/hooks/use-resolve-client-url.ts
 var import_react = require("react");
-var import_context = require("#internal/react/context");
-
-// src/shared/client/default-resolve-client-url.ts
-function bindResolveClientUrl(prop, remoteSrc) {
-  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
-}
-
-// src/react/hooks/use-resolve-client-url.ts
+var import_context = require("#internal/host/react/context");
 function useResolveClientUrl(prop, urlHref) {
   const { resolveClientUrl: contextValue } = (0, import_context.useRemoteComponentsContext)();
   const resolveClientUrl = prop ?? contextValue;
@@ -1955,7 +2012,7 @@ function useResolveClientUrl(prop, urlHref) {
   );
 }
 
-// src/react/hooks/use-shadow-root.ts
+// src/host/react/hooks/use-shadow-root.ts
 var import_react2 = require("react");
 function useShadowRoot({
   isolate,
@@ -2004,7 +2061,7 @@ function useShadowRoot({
   return { shadowRoot, shadowRootContainerRef };
 }
 
-// src/react/utils/extract-remote-html.ts
+// src/host/react/utils/extract-remote-html.ts
 var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -2026,21 +2083,20 @@ function getRemoteComponentHtml(html) {
   return "";
 }
 
-// src/react/index.tsx
-var import_context2 = require("#internal/react/context");
-var import_jsx_runtime2 = (
+// src/host/react/index.tsx
+var import_jsx_runtime3 = (
   // TODO: remove wrapper div by converting HTML to RSC or React tree
   require("react/jsx-runtime")
 );
 var import_react4 = require("react");
-function RemoteComponent({
+function ConsumeRemoteComponent({
   src,
   isolate,
   mode = "open",
   reset,
   credentials = "same-origin",
   name: nameProp = "__vercel_remote_component",
-  shared = {},
+  shared: shared2 = {},
   children,
   onBeforeLoad,
   onLoad,
@@ -2055,7 +2111,9 @@ function RemoteComponent({
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
   );
-  const [data, setData] = (0, import_react3.useState)(null);
+  const [data, setData] = (0, import_react3.useState)(
+    null
+  );
   const url = (0, import_react3.useMemo)(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
   const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
@@ -2272,11 +2330,10 @@ function RemoteComponent({
             });
             self.__next_s = prevNextScripts;
           }
-          let rscName;
+          const rscName = rsc ? `__remote_component_rsc_${escapeString(id)}_${escapeString(
+            remoteName
+          )}` : void 0;
           if (rsc) {
-            rscName = `__remote_component_rsc_${escapeString(
-              id
-            )}_${escapeString(remoteName)}`;
             rsc.textContent = rsc.textContent?.replace(
               new RegExp(`self\\["${remoteName}"\\]`, "g"),
               `self["${rscName}"]`
@@ -2294,7 +2351,7 @@ function RemoteComponent({
           componentHydrationHtml.current = `${Array.from(
             doc.querySelectorAll("link,style")
           ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
-          const userShared = await shared;
+          const userShared = await shared2;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
               throw e;
@@ -2315,10 +2372,7 @@ function RemoteComponent({
             }
             setData(newData);
             if (shadowRoot) {
-              let shadowRootHtml = component.innerHTML;
-              if (reset) {
-                shadowRootHtml = `<style data-remote-components-reset="">:host { all: initial; }</style>${shadowRootHtml}`;
-              }
+              const shadowRootHtml = reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>${component.innerHTML}` : component.innerHTML;
               shadowRoot.innerHTML = shadowRootHtml;
               htmlRef.current = null;
               setRemoteComponent(null);
@@ -2334,7 +2388,7 @@ function RemoteComponent({
               onLoad?.(src);
             } else if (isolate === false) {
               setRemoteComponent(
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "div",
                   {
                     dangerouslySetInnerHTML: { __html: component.innerHTML },
@@ -2386,7 +2440,7 @@ function RemoteComponent({
                 };
               }),
               shared: {
-                ...sharedPolyfills(userShared),
+                ...sharedPolyfills(userShared, resolveClientUrl),
                 ...userShared
               },
               remoteShared,
@@ -2432,7 +2486,7 @@ function RemoteComponent({
     isolate,
     credentials,
     name,
-    shared,
+    shared2,
     shadowRoot,
     reset,
     id,
@@ -2447,13 +2501,13 @@ function RemoteComponent({
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
   }
-  const metadataJson = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+  const metadataJson = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
     runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
-  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react4.createElement)(
     "link",
     {
@@ -2462,7 +2516,7 @@ function RemoteComponent({
       key: JSON.stringify(link)
     }
   )) || null;
-  const componentToRender = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  const componentToRender = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     resetStyle,
     linksToRender,
     remoteComponent ?? children
@@ -2500,9 +2554,9 @@ function RemoteComponent({
     if (shadowRemoteComponentHtml) {
       shadowRemoteComponentHtml.remove();
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       metadataJson,
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
           "data-remote-component-id": `shadowroot_${keySuffix}`,
@@ -2511,8 +2565,8 @@ function RemoteComponent({
           children: [
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("template", { shadowrootmode: mode, children: [
-                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "div",
                   {
                     dangerouslySetInnerHTML: {
@@ -2534,12 +2588,12 @@ function RemoteComponent({
               ] })
             ) : null,
             shadowRoot && remoteComponent ? (0, import_react_dom.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_start` }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_start` }),
                 resetStyle,
                 linksToRender,
                 remoteComponent,
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
               ] }),
               shadowRoot
             ) : null
@@ -2549,33 +2603,16 @@ function RemoteComponent({
     ] });
   }
   htmlRef.current = null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_start` }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_start` }),
     metadataJson,
     componentToRender,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("template", { id: `${name}_end`, ref: endTemplateRef })
   ] });
 }
 
-// src/next/host/client/index.tsx
-var import_context3 = require("#internal/react/context");
-
-// src/next/host/app-router-compat.tsx
+// src/host/nextjs/app-compat.tsx
 var import_navigation = require("next/navigation");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function imageImpl2(ImageComponent, bundle) {
-  const component = function RemoteImage(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      ImageComponent,
-      {
-        ...props,
-        src: applyBundleUrlToImagePropsSrc(bundle, props.src)
-      }
-    );
-  };
-  component.default = component;
-  return component;
-}
 var routerImpl = async () => {
   const { useRouter } = await import("next/navigation");
   return Promise.resolve({
@@ -2639,17 +2676,34 @@ var routerImpl = async () => {
   });
 };
 
-// src/next/host/client/index.tsx
+// src/host/nextjs/image-shared.ts
+function createNextImageSharedEntries(getWrappedImage, options) {
+  const entries = {
+    "next/image": (bundle) => Promise.resolve(getWrappedImage(bundle)),
+    "next/dist/client/image-component": (bundle) => Promise.resolve({
+      Image: getWrappedImage(bundle)
+    })
+  };
+  if (options?.getImageProps) {
+    entries["next/dist/api/image"] = (bundle) => Promise.resolve({
+      default: getWrappedImage(bundle),
+      getImageProps: options.getImageProps
+    });
+  }
+  return entries;
+}
+
+// src/host/nextjs/app-client-only.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 async function tryImportShared() {
   try {
-    const { shared } = await import("remote-components/shared/host/app");
-    return shared;
+    const { shared: shared2 } = await Promise.resolve().then(() => (init_app(), app_exports));
+    return shared2;
   } catch {
     return {};
   }
 }
-var sharedModules = async (userShared) => {
+var sharedModules = async (userShared, resolveClientUrl) => {
   const [resolvedShared, resolvedUserShared] = await Promise.all([
     tryImportShared(),
     userShared ?? Promise.resolve({})
@@ -2657,20 +2711,28 @@ var sharedModules = async (userShared) => {
   return {
     ...resolvedShared,
     "next/router": routerImpl,
-    "next/image": (bundle) => Promise.resolve(imageImpl2(Image.default, bundle ?? "default")),
-    "next/dist/client/image-component": (bundle) => Promise.resolve({ Image: imageImpl2(Image.default, bundle ?? "default") }),
+    ...createNextImageSharedEntries(
+      (bundle) => imageImpl2(Image.default, bundle ?? "default", resolveClientUrl)
+    ),
     ...resolvedUserShared
   };
 };
-function RemoteComponent2(props) {
+function ConsumeRemoteComponent2(props) {
   if (typeof props.src !== "string" && !(props.src instanceof URL)) {
     return props.children ?? null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RemoteComponent, { ...props, shared: sharedModules(props.shared) });
+  const src = typeof props.src === "string" ? props.src : props.src.href;
+  const resolveClientUrl = props.resolveClientUrl ? bindResolveClientUrl(props.resolveClientUrl, src) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ConsumeRemoteComponent,
+    {
+      ...props,
+      shared: sharedModules(props.shared, resolveClientUrl)
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponent,
-  RemoteComponentsProvider
+  ConsumeRemoteComponent
 });
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=client-only.cjs.map