remote-components 0.1.2 → 0.2.1

package/dist/{html/host.cjs → host/html.cjs}

@@ -30,20 +30,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/shared/constants.ts
+// src/utils/constants.ts
 var RC_PROTECTED_REMOTE_FETCH_PATHNAME, CORS_DOCS_URL;
 var init_constants = __esm({
-  "src/shared/constants.ts"() {
+  "src/utils/constants.ts"() {
     "use strict";
     RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
     CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
   }
 });
 
-// src/shared/client/protected-rc-fallback.ts
-function generateProtectedRcFallbackSrc(url) {
-  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;
-}
+// src/runtime/url/protected-rc-fallback.ts
 function isProxiedUrl(url) {
   try {
     return new URL(url, location.href).pathname === RC_PROTECTED_REMOTE_FETCH_PATHNAME;
@@ -52,13 +49,13 @@ function isProxiedUrl(url) {
   }
 }
 var init_protected_rc_fallback = __esm({
-  "src/shared/client/protected-rc-fallback.ts"() {
+  "src/runtime/url/protected-rc-fallback.ts"() {
     "use strict";
     init_constants();
   }
 });
 
-// src/shared/utils/abort.ts
+// src/utils/abort.ts
 function isAbortError(error) {
   if (error instanceof DOMException && error.name === "AbortError") {
     return true;
@@ -70,12 +67,12 @@ function isAbortError(error) {
   return false;
 }
 var init_abort = __esm({
-  "src/shared/utils/abort.ts"() {
+  "src/utils/abort.ts"() {
     "use strict";
   }
 });
 
-// src/shared/error.ts
+// src/utils/error.ts
 function multipleRemoteComponentsError(url) {
   return new RemoteComponentsError(
     `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
@@ -126,6 +123,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(
@@ -134,7 +136,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}`
@@ -152,11 +154,11 @@ Docs: ${CORS_DOCS_URL}`
 }
 var RemoteComponentsError;
 var init_error = __esm({
-  "src/shared/error.ts"() {
+  "src/utils/error.ts"() {
     "use strict";
     init_protected_rc_fallback();
-    init_constants();
     init_abort();
+    init_constants();
     RemoteComponentsError = class extends Error {
       code = "REMOTE_COMPONENTS_ERROR";
       constructor(message, options) {
@@ -167,34 +169,7 @@ var init_error = __esm({
   }
 });
 
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var init_utils = __esm({
-  "src/shared/utils/index.ts"() {
-    "use strict";
-  }
-});
-
-// src/shared/client/const.ts
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-var DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT, REMOTE_COMPONENT_REGEX;
-var init_const = __esm({
-  "src/shared/client/const.ts"() {
-    "use strict";
-    init_utils();
-    DEFAULT_ROUTE = "/";
-    RUNTIME_WEBPACK = "webpack";
-    RUNTIME_TURBOPACK = "turbopack";
-    RUNTIME_SCRIPT = "script";
-    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-  }
-});
-
-// src/shared/utils/logger.ts
+// src/utils/logger.ts
 function logDebug(location2, message) {
   if (DEBUG) {
     console.debug(`[${PREFIX}:${location2}]: ${message}`);
@@ -218,14 +193,14 @@ 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 {
   }
 }
 var PREFIX, DEBUG;
 var init_logger = __esm({
-  "src/shared/utils/logger.ts"() {
+  "src/utils/logger.ts"() {
     "use strict";
     init_constants();
     init_error();
@@ -234,7 +209,104 @@ var init_logger = __esm({
   }
 });
 
-// src/shared/webpack/next-client-pages-loader.ts
+// src/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var init_utils = __esm({
+  "src/utils/index.ts"() {
+    "use strict";
+  }
+});
+
+// src/runtime/constants.ts
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+var DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT, REMOTE_COMPONENT_REGEX, NEXT_BUNDLE_PATH_RE;
+var init_constants2 = __esm({
+  "src/runtime/constants.ts"() {
+    "use strict";
+    init_utils();
+    DEFAULT_ROUTE = "/";
+    RUNTIME_WEBPACK = "webpack";
+    RUNTIME_TURBOPACK = "turbopack";
+    RUNTIME_SCRIPT = "script";
+    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+  }
+});
+
+// src/config/webpack/apply-shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  logDebug(
+    "SharedModules",
+    `applySharedModules called for bundle: "${bundle}"`
+  );
+  logDebug(
+    "SharedModules",
+    `Shared modules to resolve: ${Object.keys(resolve)}`
+  );
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    logDebug(
+      "SharedModules",
+      `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      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 (const id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          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}" -> "${resolvedId}"`
+            );
+          }
+          webpackBundle.m[resolvedId] = (module2) => {
+            module2.exports = value;
+          };
+        } else {
+          logWarn(
+            "SharedModules",
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+          );
+        }
+      }
+    }
+  } else {
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
+    );
+  }
+}
+var DEDUPLICATION_SKIPPED;
+var init_apply_shared_modules = __esm({
+  "src/config/webpack/apply-shared-modules.ts"() {
+    "use strict";
+    init_logger();
+    DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
+  }
+});
+
+// src/config/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
   const nextCssOriginal = document.querySelector(
@@ -346,168 +418,389 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   return { Component: null, App: null };
 }
 var init_next_client_pages_loader = __esm({
-  "src/shared/webpack/next-client-pages-loader.ts"() {
+  "src/config/webpack/next-client-pages-loader.ts"() {
     "use strict";
     init_error();
   }
 });
 
-// src/shared/webpack/shared-modules.ts
-function applySharedModules(bundle, resolve) {
-  logDebug(
-    "SharedModules",
-    `applySharedModules called for bundle: "${bundle}"`
-  );
-  logDebug(
-    "SharedModules",
-    `Shared modules to resolve: ${Object.keys(resolve)}`
-  );
+// src/host/shared/polyfill.tsx
+function applyBundleUrlToSrc(bundle, src) {
   const self = globalThis;
-  if (self.__remote_webpack_require__?.[bundle]) {
-    const modulePaths = Object.keys(
-      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
-    );
-    logDebug(
-      "SharedModules",
-      `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));
-      }
-      if (ids.length === 0) {
-        logDebug(
-          "SharedModules",
-          `No matching module path found for shared module "${key}"`
-        );
-      }
-      for (let 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]}`;
-            logDebug(
-              "SharedModules",
-              `Mapped module id: "${id}" -> "${mappedId}"`
-            );
-            id = mappedId;
-          }
-          webpackBundle.m[id] = (module2) => {
-            module2.exports = value;
-          };
-        } else {
-          logWarn(
-            "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}"`
-          );
-        }
-      }
-    }
-  } else {
-    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
-    logDebug(
-      "SharedModules",
-      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
-    );
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return src;
   }
-}
-var init_shared_modules = __esm({
-  "src/shared/webpack/shared-modules.ts"() {
-    "use strict";
-    init_logger();
+  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
   }
-});
-
-// src/shared/client/webpack-patterns.ts
-var NEXT_BUNDLE_PATH_RE;
-var init_webpack_patterns = __esm({
-  "src/shared/client/webpack-patterns.ts"() {
-    "use strict";
-    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
+}
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
   }
-});
-
-// 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.`
-              )
-            );
+  const propSrc = src;
+  return applyBundleUrlToSrc(bundle, propSrc.src);
+}
+function sharedPolyfills(shared, resolveClientUrl) {
+  const self = globalThis;
+  const polyfill = {
+    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+      useRouter() {
+        return {
+          push: (routerUrl) => {
+            history.pushState({}, "", routerUrl);
+          },
+          replace: (routerUrl) => {
+            history.replaceState({}, "", routerUrl);
+          },
+          back: () => {
+            history.back();
           }
         };
-        newScript.src = resolvedSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
-    })
-  );
-}
-var init_script_loader = __esm({
-  "src/shared/client/script-loader.ts"() {
-    "use strict";
-    init_constants();
-    init_error();
-    init_logger();
-    init_protected_rc_fallback();
-    init_webpack_patterns();
-  }
-});
-
-// src/shared/client/turbopack-patterns.ts
-var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, TURBOPACK_GLOBAL_RE;
-var init_turbopack_patterns = __esm({
-  "src/shared/client/turbopack-patterns.ts"() {
-    "use strict";
-    REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
-    REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
-    ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
-    ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
-    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]+)\)\)\)\}/;
-    TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
-  }
-});
-
-// src/shared/client/chunk-loader.ts
-function createChunkLoader(runtime, resolveClientUrl) {
-  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
-    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
-    const self = globalThis;
-    const {
-      bundle,
-      id: path,
-      prefix
-    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
-      bundle: scriptBundle ?? "",
-      id: chunkId
-    };
-    logDebug(
-      "ChunkLoader",
-      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
-    );
-    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+      },
+      usePathname() {
+        return location.pathname;
+      },
+      useParams() {
+        return {};
+      },
+      useSearchParams() {
+        return new URLSearchParams(location.search);
+      },
+      useSelectedLayoutSegment() {
+        return null;
+      },
+      useSelectedLayoutSegments() {
+        return [];
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+      default: ({
+        scroll: _,
+        replace,
+        prefetch,
+        onNavigate,
+        children,
+        ...props
+      }) => {
+        if (prefetch) {
+          logWarn(
+            "Polyfill",
+            "Next.js Link prefetch is not supported in remote components"
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["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, resolveClientUrl),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle, resolveClientUrl),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["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"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
+          };
+        },
+        __esModule: true
+      })
+    )),
+    "next/dist/build/polyfills/process": () => Promise.resolve({
+      default: {
+        env: {
+          NODE_ENV: "production"
+        }
+      },
+      __esModule: true
+    })
+  };
+  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
+  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
+  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
+  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/script"] = polyfill["next/dist/client/script"];
+  return polyfill;
+}
+var import_jsx_runtime, imageImpl;
+var init_polyfill = __esm({
+  "src/host/shared/polyfill.tsx"() {
+    "use strict";
+    init_logger();
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    import_jsx_runtime = require("react/jsx-runtime");
+    imageImpl = (bundle, resolveClientUrl) => function RemoteImage({
+      fill: _fill,
+      loader: _loader,
+      quality: _quality,
+      priority: _priority,
+      loading: _loading,
+      placeholder: _placeholder,
+      blurDataURL: _blurDataURL,
+      unoptimized: _unoptimized,
+      overrideSrc: _overrideSrc,
+      src,
+      ...props
+    }) {
+      const newSrc = applyBundleUrlToImagePropsSrc(
+        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: proxiedSrc,
+          suppressHydrationWarning: true
+        }
+      );
+    };
+  }
+});
+
+// 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);
+      });
+    })
+  );
+}
+var init_script_loader = __esm({
+  "src/runtime/loaders/script-loader.ts"() {
+    "use strict";
+    init_constants2();
+    init_protected_rc_fallback();
+    init_error();
+    init_logger();
+  }
+});
+
+// src/host/html/runtime/webpack.ts
+var webpack_exports = {};
+__export(webpack_exports, {
+  webpackRuntime: () => webpackRuntime
+});
+async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
+  const self = globalThis;
+  if (!self.__DISABLE_WEBPACK_EXEC__) {
+    self.__DISABLE_WEBPACK_EXEC__ = {};
+  }
+  self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+  if (typeof self.__webpack_require__ !== "function" && self.__webpack_require_type__ !== "turbopack") {
+    self.__webpack_require__ = (remoteId) => {
+      const re = /\[(?<bundle>[^\]]+)\] (?<id>.*)/;
+      const match = re.exec(remoteId);
+      const remoteBundle = match?.groups?.bundle;
+      const id = match?.groups?.id;
+      if (!(id && remoteBundle)) {
+        throw new RemoteComponentsError(
+          `Remote Component module "${remoteId}" not found. Did you forget to wrap the Next.js config with \`withRemoteComponentsConfig\` on both host and remote?`
+        );
+      }
+      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
+        throw new RemoteComponentsError(
+          `Remote Components are not available in "${remoteBundle}". Did you forget to wrap the Next.js config with \`withRemoteComponentsConfig\` on both host and remote?`
+        );
+      }
+      return self.__remote_webpack_require__[remoteBundle](id);
+    };
+    self.__webpack_chunk_load__ = () => {
+      return Promise.resolve([]);
+    };
+  }
+  const {
+    default: { createFromReadableStream }
+  } = await import("react-server-dom-webpack/client.browser");
+  async function preloadScripts(scripts, url, remoteBundle, _) {
+    const scriptSrcs = scripts.flatMap((script) => {
+      const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
+      script.parentElement?.removeChild(script);
+      if (!scriptSrc)
+        return [];
+      return [
+        {
+          src: new URL(scriptSrc.replace(NEXT_BUNDLE_PATH_RE, "/_next/"), url).href
+        }
+      ];
+    });
+    await loadScripts(scriptSrcs, resolveClientUrl);
+    const hostShared = {
+      ...sharedPolyfills(shared, resolveClientUrl),
+      ...self.__remote_component_host_shared_modules__,
+      ...shared
+    };
+    const resolve = {
+      "/react/index.js": (await import("react")).default,
+      "/react/jsx-dev-runtime.js": (await import("react/jsx-dev-runtime")).default,
+      "/react/jsx-runtime.js": (await import("react/jsx-runtime")).default,
+      "/react-dom/index.js": (await import("react-dom")).default,
+      "/react-dom/client.js": (await import("react-dom/client")).default,
+      ...Object.entries(remoteShared ?? {}).reduce(
+        (acc, [key, value]) => {
+          if (typeof hostShared[value] !== "undefined") {
+            acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+          }
+          return acc;
+        },
+        {}
+      )
+    };
+    await Promise.all(
+      Object.entries(resolve).map(async ([key, value]) => {
+        if (typeof value === "function") {
+          resolve[key] = await value(remoteBundle);
+        }
+        return Promise.resolve(value);
+      })
+    );
+    applySharedModules(remoteBundle, resolve);
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_webpack = __esm({
+  "src/host/html/runtime/webpack.ts"() {
+    "use strict";
+    init_apply_shared_modules();
+    init_next_client_pages_loader();
+    init_polyfill();
+    init_constants2();
+    init_script_loader();
+    init_error();
+  }
+});
+
+// src/runtime/turbopack/patterns.ts
+var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, TURBOPACK_GLOBAL_RE;
+var init_patterns = __esm({
+  "src/runtime/turbopack/patterns.ts"() {
+    "use strict";
+    REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
+    REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|[a-z])\.A\((?<sharedModuleId>[0-9]+)\)/;
+    ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
+    ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+    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]+)\)\)\)\}/;
+    TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
+  }
+});
+
+// src/runtime/turbopack/chunk-loader.ts
+function createChunkLoader(runtime, resolveClientUrl) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
+    const self = globalThis;
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    logDebug(
+      "ChunkLoader",
+      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
+    );
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
     logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
     if (remoteRuntime === RUNTIME_WEBPACK) {
       logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
@@ -550,11 +843,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);
@@ -702,18 +991,17 @@ async function handleTurbopackChunk(code, bundle, url) {
   }
 }
 var init_chunk_loader = __esm({
-  "src/shared/client/chunk-loader.ts"() {
+  "src/runtime/turbopack/chunk-loader.ts"() {
     "use strict";
-    init_constants();
+    init_constants2();
+    init_protected_rc_fallback();
     init_error();
     init_logger();
-    init_const();
-    init_protected_rc_fallback();
-    init_turbopack_patterns();
+    init_patterns();
   }
 });
 
-// src/shared/client/turbopack-module.ts
+// src/runtime/turbopack/module.ts
 function handleTurbopackModule(bundle, moduleId, id) {
   const self = globalThis;
   const bundleKey = getBundleKey(bundle);
@@ -917,731 +1205,276 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
     j() {
     },
     // chunk loader
-    l(url) {
-      const flatModules = Array.isArray(modules) ? modules : [];
-      const moduleInitIndex = flatModules.indexOf(moduleInit);
-      if (moduleInitIndex !== -1) {
-        const scriptIndex = flatModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
-        if (scriptIndex !== -1) {
-          const script = flatModules[scriptIndex];
-          const scriptSrc = script.getAttribute("data-turbopack-src") || "";
-          const nextIndex = scriptSrc.indexOf("/_next");
-          const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
-          const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
-          return self.__webpack_chunk_load__?.(bundleUrl, bundle);
-        }
-      }
-      throw new Error(
-        `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
-      );
-    },
-    // global object for this bundle
-    g: self.__remote_components_turbopack_global__?.[bundle],
-    m: moduleExports,
-    e: exports
-  };
-}
-var init_turbopack_module = __esm({
-  "src/shared/client/turbopack-module.ts"() {
-    "use strict";
-    init_logger();
-    init_const();
-  }
-});
-
-// src/shared/client/shared-modules.ts
-async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
-  const self = globalThis;
-  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
-  if (!self.__remote_shared_modules__[bundle]) {
-    self.__remote_shared_modules__[bundle] = {};
-  }
-  const bundleKey = getBundleKey(bundle);
-  let modules = self[`TURBOPACK_${bundleKey}`];
-  if (modules && typeof modules === "object" && "__chunks__" in modules) {
-    const chunks = modules.__chunks__;
-    modules = chunks.flat();
-  }
-  let sharedModuleInitializer = null;
-  if (modules) {
-    const allModules = Array.isArray(modules) ? modules.flat() : Object.entries(modules).flat();
-    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
-      if (typeof idOrFunc !== "function") {
-        return false;
-      }
-      const funcCode = idOrFunc.toString();
-      return REMOTE_SHARED_MARKER_RE.test(funcCode);
-    });
-    if (sharedModuleInitializerIndex > 0) {
-      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
-      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
-      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
-      if (sharedModuleId) {
-        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
-          bundle,
-          sharedModuleId,
-          `[${bundle}] ${sharedModuleInitializerId}`
-        );
-        sharedModuleInitializer = sharedModuleInitializerInstance;
-      }
-    }
-    if (sharedModuleInitializer) {
-      const { shared } = await sharedModuleInitializer;
-      const sharedModuleIds = extractSharedModuleIds(
-        shared,
-        bundleKey,
-        self
-      );
-      return Promise.all(
-        Object.entries(sharedModuleIds).map(async ([id, module2]) => {
-          if (self.__remote_shared_modules__?.[bundle]) {
-            if (hostShared[module2]) {
-              self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
-            } else {
-              logError(
-                "SharedModules",
-                `Host shared module "${module2}" not found for ID ${id}`
-              );
-            }
-          }
-        })
-      );
-    }
-  }
-  return Promise.all(
-    Object.entries(remoteShared).map(async ([id, module2]) => {
-      if (self.__remote_shared_modules__?.[bundle]) {
-        if (hostShared[module2]) {
-          const normalizedId = id.replace("[app-ssr]", "[app-client]");
-          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module2](bundle);
-        } else {
-          logError(
-            "SharedModules",
-            `Shared module "${module2}" not found for "${bundle}"`
-          );
-        }
-      }
-    })
-  );
-}
-function extractSharedModuleIds(shared, bundleKey, self) {
-  return Object.entries(shared).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);
-      let asyncSharedModule;
-      let turbopackModules = self[`TURBOPACK_${bundleKey}`];
-      if (turbopackModules && typeof turbopackModules === "object" && "__chunks__" in turbopackModules) {
-        const chunks = turbopackModules.__chunks__;
-        turbopackModules = chunks.flat();
-      }
-      const newAllModules = Array.isArray(turbopackModules) ? turbopackModules.flat() : turbopackModules ? Object.entries(turbopackModules).flatMap(([key2, value2]) => [
-        key2,
-        value2
-      ]) : [];
-      const asyncSharedModuleIdIndex = newAllModules.indexOf(
-        asyncSharedModuleIdNumber
-      );
-      if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
-        asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
-      }
-      if (asyncSharedModule) {
-        const asyncSharedModuleCode = asyncSharedModule.toString();
-        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
-        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
-          "__remote_shared_module_",
-          ""
-        );
-      }
-    }
-    return acc;
-  }, {});
-}
-function getSharedModule(bundle, id) {
-  const self = globalThis;
-  for (const [key, value] of Object.entries(
-    self.__remote_shared_modules__?.[bundle] ?? {}
-  )) {
-    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
-      return value;
-    }
-  }
-  return null;
-}
-var init_shared_modules2 = __esm({
-  "src/shared/client/shared-modules.ts"() {
-    "use strict";
-    init_logger();
-    init_const();
-    init_turbopack_module();
-    init_turbopack_patterns();
-  }
-});
-
-// src/shared/client/webpack-adapter.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
-  const self = globalThis;
-  if (!self.__remote_bundle_url__) {
-    self.__remote_bundle_url__ = {};
-  }
-  self.__remote_bundle_url__[bundle ?? "default"] = url;
-  self.__webpack_get_script_filename__ = () => null;
-  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
-    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
-      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
-      self.__original_webpack_require__ = self.__webpack_require__;
-    }
-    self.__webpack_chunk_load__ = createChunkLoader(runtime, resolveClientUrl);
-    self.__webpack_require__ = createModuleRequire(runtime);
-    self.__webpack_require_type__ = runtime;
-    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
-      const remoteBundle = bundle ?? "default";
-      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
-      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
-    }
-  }
-  if (runtime === RUNTIME_TURBOPACK) {
-    await Promise.all(
-      scripts.map((script) => {
-        if (script.src) {
-          return self.__webpack_chunk_load__?.(script.src, bundle);
-        }
-        return Promise.resolve(void 0);
-      })
-    );
-  }
-  const coreShared = {
-    react: async () => (await import("react")).default,
-    "react-dom": async () => (await import("react-dom")).default,
-    "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
-  };
-  await initializeSharedModules(
-    bundle ?? "default",
-    // include all core modules as shared
-    coreShared,
-    remoteShared
-  );
-}
-function createModuleRequire(runtime) {
-  return (id) => {
-    const self = globalThis;
-    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
-      bundle: "default",
-      id
-    };
-    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
-    logDebug("WebpackAdapter", `remoteRuntime: "${remoteRuntime}"`);
-    try {
-      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
-        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
-      }
-      const sharedModuleId = moduleId ?? id;
-      const sharedModule = getSharedModule(bundle ?? "default", sharedModuleId);
-      if (sharedModule) {
-        return sharedModule;
-      }
-      if (bundle && moduleId) {
-        return handleTurbopackModule(bundle, moduleId, id);
+    l(url) {
+      const flatModules = Array.isArray(modules) ? modules : [];
+      const moduleInitIndex = flatModules.indexOf(moduleInit);
+      if (moduleInitIndex !== -1) {
+        const scriptIndex = flatModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+        if (scriptIndex !== -1) {
+          const script = flatModules[scriptIndex];
+          const scriptSrc = script.getAttribute("data-turbopack-src") || "";
+          const nextIndex = scriptSrc.indexOf("/_next");
+          const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
+          const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
+          return self.__webpack_chunk_load__?.(bundleUrl, bundle);
+        }
       }
-      throw new Error(`Module "${id}" not found.`);
-    } catch (requireError) {
-      logWarn(
-        "WebpackAdapter",
-        `Module require failed: ${String(requireError)}`
+      throw new Error(
+        `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
       );
-      if (typeof self.__original_webpack_require__ !== "function") {
-        throw new RemoteComponentsError(
-          `Module "${id}" not found in remote component bundle "${bundle}".`,
-          {
-            cause: requireError instanceof Error ? requireError : void 0
-          }
-        );
-      }
-      try {
-        logDebug("WebpackAdapter", "Falling back to original webpack require");
-        return self.__original_webpack_require__(id);
-      } catch (originalError) {
-        throw new RemoteComponentsError(
-          `Module "${id}" not found in remote component bundle "${bundle}".`,
-          { cause: originalError instanceof Error ? originalError : void 0 }
-        );
-      }
-    }
+    },
+    // global object for this bundle
+    g: self.__remote_components_turbopack_global__?.[bundle],
+    m: moduleExports,
+    e: exports
   };
 }
-var init_webpack_adapter = __esm({
-  "src/shared/client/webpack-adapter.ts"() {
+var init_module = __esm({
+  "src/runtime/turbopack/module.ts"() {
     "use strict";
-    init_error();
+    init_constants2();
     init_logger();
-    init_chunk_loader();
-    init_const();
-    init_shared_modules2();
-    init_turbopack_module();
   }
 });
 
-// src/shared/client/static-loader.ts
-async function importViaCallback(absoluteSrc, resolveClientUrl) {
-  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;
-  const fetchUrl = new URL(resolvedUrl, location.href).href;
-  const response = await fetch(fetchUrl);
-  if (!response.ok)
-    throw new Error(`Proxied fetch failed: ${response.status}`);
-  const content = (await response.text()).replace(/import\.meta\.url/g, JSON.stringify(absoluteSrc)).replace(
-    /\b(from|import)\s*(["'])(\.\.?\/[^"']+)\2/g,
-    (_, keyword, quote, relativePath) => {
-      const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;
-      const resolvedImportUrl = new URL(
-        resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,
-        location.href
-      ).href;
-      return `${keyword} ${quote}${resolvedImportUrl}${quote}`;
-    }
-  );
-  const moduleBlobUrl = URL.createObjectURL(
-    new Blob([content], { type: "text/javascript" })
-  );
-  const wrapperContent = [
-    `import*as m from${JSON.stringify(moduleBlobUrl)};`,
-    `globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,
-    `globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`
-  ].join("");
-  const wrapperBlobUrl = URL.createObjectURL(
-    new Blob([wrapperContent], { type: "text/javascript" })
-  );
-  const scriptEl = document.createElement("script");
-  scriptEl.type = "module";
-  scriptEl.src = wrapperBlobUrl;
-  try {
-    await new Promise((resolve, reject) => {
-      scriptEl.onload = () => resolve();
-      scriptEl.onerror = () => reject(new Error(`Failed to load module for ${absoluteSrc}`));
-      document.head.appendChild(scriptEl);
-    });
-  } finally {
-    scriptEl.remove();
-    URL.revokeObjectURL(moduleBlobUrl);
-    URL.revokeObjectURL(wrapperBlobUrl);
-  }
-  const registry = globalThis.__rc_module_registry__;
-  const mod = registry?.[absoluteSrc] ?? {};
-  if (registry)
-    delete registry[absoluteSrc];
-  return mod;
-}
-async function importDirectly(absoluteSrc) {
-  try {
-    return await import(
-      /* @vite-ignore */
-      /* webpackIgnore: true */
-      absoluteSrc
-    );
-  } catch (importError) {
-    if (!absoluteSrc.startsWith("blob:")) {
-      warnCrossOriginFetchError("StaticLoader", absoluteSrc);
-    }
-    throw importError;
-  }
-}
-function resolveScriptSrc(script, url) {
-  const rawSrc = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
-  if (!rawSrc && script.textContent) {
-    return URL.createObjectURL(
-      new Blob(
-        [script.textContent.replace(/import\.meta\.url/g, JSON.stringify(url))],
-        { type: "text/javascript" }
-      )
-    );
-  }
-  return rawSrc;
-}
-async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
+// src/runtime/turbopack/shared-modules.ts
+async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
-  if (self.__remote_script_entrypoint_mount__?.[url.href]) {
-    self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
+  if (!self.__remote_shared_modules__[bundle]) {
+    self.__remote_shared_modules__[bundle] = {};
   }
-  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
-    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  const bundleKey = getBundleKey(bundle);
+  let modules = self[`TURBOPACK_${bundleKey}`];
+  if (modules && typeof modules === "object" && "__chunks__" in modules) {
+    const chunks = modules.__chunks__;
+    modules = chunks.flat();
   }
-  const mountUnmountSets = await Promise.all(
-    scripts.map(async (script) => {
-      try {
-        const src = resolveScriptSrc(script, url);
-        const absoluteSrc = new URL(src, url).href;
-        const mod = resolveClientUrl ? await importViaCallback(absoluteSrc, resolveClientUrl) : await importDirectly(absoluteSrc);
-        if (src.startsWith("blob:")) {
-          URL.revokeObjectURL(src);
-        }
-        if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
-          if (!self.__remote_script_entrypoint_mount__) {
-            self.__remote_script_entrypoint_mount__ = {};
-          }
-          if (!self.__remote_script_entrypoint_mount__[url.href]) {
-            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
-          }
-          self.__remote_script_entrypoint_mount__[url.href]?.add(
-            mod.mount || mod.default?.mount || (() => {
-            })
-          );
-        }
-        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
-          if (!self.__remote_script_entrypoint_unmount__) {
-            self.__remote_script_entrypoint_unmount__ = {};
-          }
-          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
-            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  let sharedModuleInitializer = null;
+  if (modules) {
+    const allModules = Array.isArray(modules) ? modules.flat() : Object.entries(modules).flat();
+    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
+      if (typeof idOrFunc !== "function") {
+        return false;
+      }
+      const funcCode = idOrFunc.toString();
+      return REMOTE_SHARED_MARKER_RE.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          bundle,
+          sharedModuleId,
+          `[${bundle}] ${sharedModuleInitializerId}`
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = extractSharedModuleIds(
+        shared,
+        bundleKey,
+        self
+      );
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module2]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module2]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
+            } else {
+              logError(
+                "SharedModules",
+                `Host shared module "${module2}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
+              );
+            }
           }
-          self.__remote_script_entrypoint_unmount__[url.href]?.add(
-            mod.unmount || mod.default?.unmount || (() => {
-            })
+        })
+      );
+    }
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module2]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        if (hostShared[module2]) {
+          const normalizedId = id.replace("[app-ssr]", "[app-client]");
+          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module2](bundle);
+        } else {
+          logError(
+            "SharedModules",
+            `Shared module "${module2}" not found for "${bundle}". ${DEDUPLICATION_WARNING}`
           );
         }
-        return {
-          mount: mod.mount || mod.default?.mount,
-          unmount: mod.unmount || mod.default?.unmount
-        };
-      } catch (e) {
-        logError(
-          "StaticLoader",
-          `Error loading remote component script from "${script.src || url.href}".`,
-          e
-        );
-        return {
-          mount: void 0,
-          unmount: void 0
-        };
       }
     })
   );
-  return mountUnmountSets.reduce(
-    (acc, { mount, unmount }) => {
-      if (typeof mount === "function") {
-        acc.mount.add(mount);
+}
+function extractSharedModuleIds(shared, bundleKey, self) {
+  return Object.entries(shared).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);
+      let asyncSharedModule;
+      let turbopackModules = self[`TURBOPACK_${bundleKey}`];
+      if (turbopackModules && typeof turbopackModules === "object" && "__chunks__" in turbopackModules) {
+        const chunks = turbopackModules.__chunks__;
+        turbopackModules = chunks.flat();
       }
-      if (typeof unmount === "function") {
-        acc.unmount.add(unmount);
+      const newAllModules = Array.isArray(turbopackModules) ? turbopackModules.flat() : turbopackModules ? Object.entries(turbopackModules).flatMap(([key2, value2]) => [
+        key2,
+        value2
+      ]) : [];
+      const asyncSharedModuleIdIndex = newAllModules.indexOf(
+        asyncSharedModuleIdNumber
+      );
+      if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
+        asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
+      }
+      if (asyncSharedModule) {
+        const asyncSharedModuleCode = asyncSharedModule.toString();
+        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
+        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+          "__remote_shared_module_",
+          ""
+        );
       }
-      return acc;
-    },
-    {
-      mount: /* @__PURE__ */ new Set(),
-      unmount: /* @__PURE__ */ new Set()
     }
-  );
+    return acc;
+  }, {});
 }
-var init_static_loader = __esm({
-  "src/shared/client/static-loader.ts"() {
+function getSharedModule(bundle, id) {
+  const self = globalThis;
+  for (const [key, value] of Object.entries(
+    self.__remote_shared_modules__?.[bundle] ?? {}
+  )) {
+    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
+      return value;
+    }
+  }
+  return null;
+}
+var DEDUPLICATION_WARNING;
+var init_shared_modules = __esm({
+  "src/runtime/turbopack/shared-modules.ts"() {
     "use strict";
+    init_constants2();
     init_logger();
+    init_module();
+    init_patterns();
+    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).";
   }
 });
 
-// src/shared/client/polyfill.tsx
-function applyBundleUrlToSrc(bundle, src) {
+// src/runtime/turbopack/webpack-runtime.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
   const self = globalThis;
-  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
-    return src;
-  }
-  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
-  if (!path) {
-    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
+  if (!self.__remote_bundle_url__) {
+    self.__remote_bundle_url__ = {};
   }
-  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
-}
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
+  self.__remote_bundle_url__[bundle ?? "default"] = url;
+  self.__webpack_get_script_filename__ = () => null;
+  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
+    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
+      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
+      self.__original_webpack_require__ = self.__webpack_require__;
+    }
+    self.__webpack_chunk_load__ = createChunkLoader(runtime, resolveClientUrl);
+    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_require_type__ = runtime;
+    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+    }
   }
-  const propSrc = src;
-  return applyBundleUrlToSrc(bundle, propSrc.src);
-}
-function sharedPolyfills(shared) {
-  const self = globalThis;
-  const polyfill = {
-    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
-      useRouter() {
-        return {
-          push: (routerUrl) => {
-            history.pushState({}, "", routerUrl);
-          },
-          replace: (routerUrl) => {
-            history.replaceState({}, "", routerUrl);
-          },
-          back: () => {
-            history.back();
-          }
-        };
-      },
-      usePathname() {
-        return location.pathname;
-      },
-      useParams() {
-        return {};
-      },
-      useSearchParams() {
-        return new URLSearchParams(location.search);
-      },
-      useSelectedLayoutSegment() {
-        return null;
-      },
-      useSelectedLayoutSegments() {
-        return [];
-      },
-      __esModule: true
-    })),
-    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
-      default: ({
-        scroll: _,
-        replace,
-        prefetch,
-        onNavigate,
-        children,
-        ...props
-      }) => {
-        if (prefetch) {
-          logWarn(
-            "Polyfill",
-            "Next.js Link prefetch is not supported in remote components"
-          );
+  if (runtime === RUNTIME_TURBOPACK) {
+    await Promise.all(
+      scripts.map((script) => {
+        if (script.src) {
+          return self.__webpack_chunk_load__?.(script.src, bundle);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "a",
-          {
-            ...props,
-            href: props.href,
-            onClick: (e) => {
-              e.preventDefault();
-              let preventDefaulted = false;
-              e.preventDefault = () => {
-                preventDefaulted = true;
-                e.defaultPrevented = true;
-              };
-              if (typeof props.onClick === "function") {
-                props.onClick(e);
-              }
-              onNavigate?.(e);
-              if (preventDefaulted) {
-                return;
-              }
-              if (replace) {
-                history.replaceState({}, "", props.href);
-              } else {
-                history.pushState({}, "", props.href);
-              }
-            },
-            suppressHydrationWarning: true,
-            children: children ?? null
-          }
-        );
-      },
-      useLinkStatus() {
-        return { pending: false };
-      },
-      __esModule: true
-    })),
-    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["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),
-      __esModule: true
-    })),
-    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
-      default: imageImpl(bundle),
-      getImageProps: (_imgProps) => {
-        throw new Error(
-          "Next.js getImageProps() is not implemented in remote components"
-        );
-      },
-      __esModule: true
-    })),
-    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["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"] ?? (() => (
-      // TODO: incomplete implementation
-      Promise.resolve({
-        useRouter() {
-          return {
-            push: (routerUrl) => {
-              history.pushState({}, "", routerUrl);
-            },
-            replace: (routerUrl) => {
-              history.replaceState({}, "", routerUrl);
-            },
-            back: () => {
-              history.back();
-            }
-          };
-        },
-        __esModule: true
+        return Promise.resolve(void 0);
       })
-    )),
-    "next/dist/build/polyfills/process": () => Promise.resolve({
-      default: {
-        env: {
-          NODE_ENV: "production"
-        }
-      },
-      __esModule: true
-    })
+    );
+  }
+  const coreShared = {
+    react: async () => (await import("react")).default,
+    "react-dom": async () => (await import("react-dom")).default,
+    "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
   };
-  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
-  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
-  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
-  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
-  polyfill["next/script"] = polyfill["next/dist/client/script"];
-  return polyfill;
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
+    coreShared,
+    remoteShared
+  );
 }
-var import_jsx_runtime, imageImpl;
-var init_polyfill = __esm({
-  "src/shared/client/polyfill.tsx"() {
-    "use strict";
-    init_logger();
-    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-    import_jsx_runtime = require("react/jsx-runtime");
-    imageImpl = (bundle) => function RemoteImage({
-      fill: _fill,
-      loader: _loader,
-      quality: _quality,
-      priority: _priority,
-      loading: _loading,
-      placeholder: _placeholder,
-      blurDataURL: _blurDataURL,
-      unoptimized: _unoptimized,
-      overrideSrc: _overrideSrc,
-      src,
-      ...props
-    }) {
-      const newSrc = applyBundleUrlToImagePropsSrc(
-        bundle,
-        typeof src === "string" ? src : src.src
-      );
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "img",
-        {
-          decoding: "async",
-          style: { color: "transparent" },
-          ...props,
-          src: newSrc,
-          suppressHydrationWarning: true
-        }
+function createModuleRequire(runtime) {
+  return (id) => {
+    const self = globalThis;
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
+      bundle: "default",
+      id
+    };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("WebpackRuntime", `remoteRuntime: "${remoteRuntime}"`);
+    try {
+      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+      }
+      const sharedModuleId = moduleId ?? id;
+      const sharedModule = getSharedModule(bundle ?? "default", sharedModuleId);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module "${id}" not found.`);
+    } catch (requireError) {
+      logWarn(
+        "WebpackRuntime",
+        `Module require failed: ${String(requireError)}`
       );
-    };
-  }
-});
-
-// src/html/host/runtime/webpack.ts
-var webpack_exports = {};
-__export(webpack_exports, {
-  webpackRuntime: () => webpackRuntime
-});
-async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
-  const self = globalThis;
-  if (!self.__DISABLE_WEBPACK_EXEC__) {
-    self.__DISABLE_WEBPACK_EXEC__ = {};
-  }
-  self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
-  if (typeof self.__webpack_require__ !== "function" && self.__webpack_require_type__ !== "turbopack") {
-    self.__webpack_require__ = (remoteId) => {
-      const re = /\[(?<bundle>[^\]]+)\] (?<id>.*)/;
-      const match = re.exec(remoteId);
-      const remoteBundle = match?.groups?.bundle;
-      const id = match?.groups?.id;
-      if (!(id && remoteBundle)) {
+      if (typeof self.__original_webpack_require__ !== "function") {
         throw new RemoteComponentsError(
-          `Remote Component module "${remoteId}" not found. Did you forget to wrap the Next.js config with \`withRemoteComponents\` on both host and remote?`
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          {
+            cause: requireError instanceof Error ? requireError : void 0
+          }
         );
       }
-      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
+      try {
+        logDebug("WebpackRuntime", "Falling back to original webpack require");
+        return self.__original_webpack_require__(id);
+      } catch (originalError) {
         throw new RemoteComponentsError(
-          `Remote Components are not available in "${remoteBundle}". Did you forget to wrap the Next.js config with \`withRemoteComponents\` on both host and remote?`
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          { cause: originalError instanceof Error ? originalError : void 0 }
         );
       }
-      return self.__remote_webpack_require__[remoteBundle](id);
-    };
-    self.__webpack_chunk_load__ = () => {
-      return Promise.resolve([]);
-    };
-  }
-  const {
-    default: { createFromReadableStream }
-  } = await import("react-server-dom-webpack/client.browser");
-  async function preloadScripts(scripts, url, remoteBundle, _) {
-    const scriptSrcs = scripts.flatMap((script) => {
-      const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
-      script.parentElement?.removeChild(script);
-      if (!scriptSrc)
-        return [];
-      return [
-        {
-          src: new URL(scriptSrc.replace(NEXT_BUNDLE_PATH_RE, "/_next/"), url).href
-        }
-      ];
-    });
-    await loadScripts(scriptSrcs, resolveClientUrl);
-    const hostShared = {
-      ...sharedPolyfills(shared),
-      ...self.__remote_component_host_shared_modules__,
-      ...shared
-    };
-    const resolve = {
-      "/react/index.js": (await import("react")).default,
-      "/react/jsx-dev-runtime.js": (await import("react/jsx-dev-runtime")).default,
-      "/react/jsx-runtime.js": (await import("react/jsx-runtime")).default,
-      "/react-dom/index.js": (await import("react-dom")).default,
-      "/react-dom/client.js": (await import("react-dom/client")).default,
-      ...Object.entries(remoteShared ?? {}).reduce(
-        (acc, [key, value]) => {
-          if (typeof hostShared[value] !== "undefined") {
-            acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
-          }
-          return acc;
-        },
-        {}
-      )
-    };
-    await Promise.all(
-      Object.entries(resolve).map(async ([key, value]) => {
-        if (typeof value === "function") {
-          resolve[key] = await value(remoteBundle);
-        }
-        return Promise.resolve(value);
-      })
-    );
-    applySharedModules(remoteBundle, resolve);
-  }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
+    }
   };
 }
-var init_webpack = __esm({
-  "src/html/host/runtime/webpack.ts"() {
+var init_webpack_runtime = __esm({
+  "src/runtime/turbopack/webpack-runtime.ts"() {
     "use strict";
-    init_polyfill();
-    init_script_loader();
-    init_webpack_patterns();
+    init_constants2();
     init_error();
-    init_next_client_pages_loader();
+    init_logger();
+    init_chunk_loader();
+    init_module();
     init_shared_modules();
   }
 });
 
-// src/html/host/runtime/turbopack.ts
+// src/host/html/runtime/turbopack.ts
 var turbopack_exports = {};
 __export(turbopack_exports, {
   turbopackRuntime: () => turbopackRuntime
@@ -1649,7 +1482,7 @@ __export(turbopack_exports, {
 async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClientUrl) {
   const self = globalThis;
   const hostShared = {
-    ...sharedPolyfills(shared),
+    ...sharedPolyfills(shared, resolveClientUrl),
     ...self.__remote_component_host_shared_modules__,
     ...shared,
     ...self.__remote_component_shared__
@@ -1663,41 +1496,197 @@ async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClient
     remoteShared,
     resolveClientUrl
   );
-  const {
-    default: { createFromReadableStream }
-  } = await import("react-server-dom-webpack/client.browser");
-  function preloadScripts(scripts, __) {
-    return setupWebpackRuntime(
-      "turbopack",
-      scripts.map((script) => ({
-        src: script.getAttribute("src") || script.getAttribute("data-src") || script.src
-      })),
-      url,
-      bundle,
-      hostShared,
-      remoteShared,
-      resolveClientUrl
-    );
-  }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
+  const {
+    default: { createFromReadableStream }
+  } = await import("react-server-dom-webpack/client.browser");
+  function preloadScripts(scripts, __) {
+    return setupWebpackRuntime(
+      "turbopack",
+      scripts.map((script) => ({
+        src: script.getAttribute("src") || script.getAttribute("data-src") || script.src
+      })),
+      url,
+      bundle,
+      hostShared,
+      remoteShared,
+      resolveClientUrl
+    );
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_turbopack = __esm({
+  "src/host/html/runtime/turbopack.ts"() {
+    "use strict";
+    init_apply_shared_modules();
+    init_next_client_pages_loader();
+    init_polyfill();
+    init_webpack_runtime();
+  }
+});
+
+// src/runtime/loaders/static-loader.ts
+async function importViaCallback(absoluteSrc, resolveClientUrl) {
+  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;
+  const fetchUrl = new URL(resolvedUrl, location.href).href;
+  const response = await fetch(fetchUrl);
+  if (!response.ok)
+    throw new Error(`Proxied fetch failed: ${response.status}`);
+  const content = (await response.text()).replace(/import\.meta\.url/g, JSON.stringify(absoluteSrc)).replace(
+    /\b(from|import)\s*(["'])(\.\.?\/[^"']+)\2/g,
+    (_, keyword, quote, relativePath) => {
+      const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;
+      const resolvedImportUrl = new URL(
+        resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,
+        location.href
+      ).href;
+      return `${keyword} ${quote}${resolvedImportUrl}${quote}`;
+    }
+  );
+  const moduleBlobUrl = URL.createObjectURL(
+    new Blob([content], { type: "text/javascript" })
+  );
+  const wrapperContent = [
+    `import*as m from${JSON.stringify(moduleBlobUrl)};`,
+    `globalThis.__rc_module_registry__=globalThis.__rc_module_registry__||{};`,
+    `globalThis.__rc_module_registry__[${JSON.stringify(absoluteSrc)}]=m;`
+  ].join("");
+  const wrapperBlobUrl = URL.createObjectURL(
+    new Blob([wrapperContent], { type: "text/javascript" })
+  );
+  const scriptEl = document.createElement("script");
+  scriptEl.type = "module";
+  scriptEl.src = wrapperBlobUrl;
+  try {
+    await new Promise((resolve, reject) => {
+      scriptEl.onload = () => resolve();
+      scriptEl.onerror = () => reject(new Error(`Failed to load module for ${absoluteSrc}`));
+      document.head.appendChild(scriptEl);
+    });
+  } finally {
+    scriptEl.remove();
+    URL.revokeObjectURL(moduleBlobUrl);
+    URL.revokeObjectURL(wrapperBlobUrl);
+  }
+  const registry = globalThis.__rc_module_registry__;
+  const mod = registry?.[absoluteSrc] ?? {};
+  if (registry)
+    delete registry[absoluteSrc];
+  return mod;
+}
+async function importDirectly(absoluteSrc) {
+  try {
+    return await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      absoluteSrc
+    );
+  } catch (importError) {
+    if (!absoluteSrc.startsWith("blob:")) {
+      warnCrossOriginFetchError("StaticLoader", absoluteSrc);
+    }
+    throw importError;
+  }
+}
+function resolveScriptSrc(script, url) {
+  const rawSrc = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
+  if (!rawSrc && script.textContent) {
+    return URL.createObjectURL(
+      new Blob(
+        [script.textContent.replace(/import\.meta\.url/g, JSON.stringify(url))],
+        { type: "text/javascript" }
+      )
+    );
+  }
+  return rawSrc;
+}
+async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
+  const self = globalThis;
+  if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+    self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
+    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  }
+  const mountUnmountSets = await Promise.all(
+    scripts.map(async (script) => {
+      try {
+        const src = resolveScriptSrc(script, url);
+        const absoluteSrc = new URL(src, url).href;
+        const mod = resolveClientUrl ? await importViaCallback(absoluteSrc, resolveClientUrl) : await importDirectly(absoluteSrc);
+        if (src.startsWith("blob:")) {
+          URL.revokeObjectURL(src);
+        }
+        if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
+          if (!self.__remote_script_entrypoint_mount__) {
+            self.__remote_script_entrypoint_mount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_mount__[url.href]) {
+            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_mount__[url.href]?.add(
+            mod.mount || mod.default?.mount || (() => {
+            })
+          );
+        }
+        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
+          if (!self.__remote_script_entrypoint_unmount__) {
+            self.__remote_script_entrypoint_unmount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
+            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+            mod.unmount || mod.default?.unmount || (() => {
+            })
+          );
+        }
+        return {
+          mount: mod.mount || mod.default?.mount,
+          unmount: mod.unmount || mod.default?.unmount
+        };
+      } catch (e) {
+        logError(
+          "StaticLoader",
+          `Error loading remote component script from "${script.src || url.href}".`,
+          e
+        );
+        return {
+          mount: void 0,
+          unmount: void 0
+        };
+      }
+    })
+  );
+  return mountUnmountSets.reduce(
+    (acc, { mount, unmount }) => {
+      if (typeof mount === "function") {
+        acc.mount.add(mount);
+      }
+      if (typeof unmount === "function") {
+        acc.unmount.add(unmount);
+      }
+      return acc;
+    },
+    {
+      mount: /* @__PURE__ */ new Set(),
+      unmount: /* @__PURE__ */ new Set()
+    }
+  );
 }
-var init_turbopack = __esm({
-  "src/html/host/runtime/turbopack.ts"() {
+var init_static_loader = __esm({
+  "src/runtime/loaders/static-loader.ts"() {
     "use strict";
-    init_polyfill();
-    init_webpack_adapter();
-    init_next_client_pages_loader();
-    init_shared_modules();
+    init_logger();
   }
 });
 
-// src/html/host/runtime/script.ts
+// src/host/html/runtime/script.ts
 var script_exports = {};
 __export(script_exports, {
   scriptRuntime: () => scriptRuntime
@@ -1716,23 +1705,106 @@ function scriptRuntime(resolveClientUrl) {
   };
 }
 var init_script = __esm({
-  "src/html/host/runtime/script.ts"() {
+  "src/host/html/runtime/script.ts"() {
     "use strict";
     init_static_loader();
   }
 });
 
-// src/html/host/index.tsx
-var host_exports = {};
-__export(host_exports, {
-  proxyClientRequestsThroughHost: () => proxyClientRequestsThroughHost,
+// src/host/html/index.tsx
+var html_exports = {};
+__export(html_exports, {
   registerSharedModules: () => registerSharedModules
 });
-module.exports = __toCommonJS(host_exports);
+module.exports = __toCommonJS(html_exports);
 var import_react = require("react");
 var import_client = require("react-dom/client");
 
-// src/shared/client/apply-origin.ts
+// src/host/server/fetch-with-hooks.ts
+init_logger();
+
+// 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/runtime/html/apply-origin.ts
 var tagNames = [
   "img",
   "source",
@@ -1794,51 +1866,9 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
   }
 }
 
-// src/shared/client/proxy-through-host.ts
-init_protected_rc_fallback();
-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;
-  }
-}
-var proxyClientRequestsThroughHost = (remoteSrc, url) => {
-  if (typeof location === "undefined") {
-    return void 0;
-  }
-  const remoteOrigin = new URL(remoteSrc, location.href).origin;
-  if (remoteOrigin === location.origin) {
-    return void 0;
-  }
-  try {
-    const parsed = new URL(url, location.href);
-    if (parsed.origin === remoteOrigin) {
-      return generateProtectedRcFallbackSrc(url);
-    }
-  } catch {
-  }
-  return void 0;
-};
-
-// src/shared/client/default-resolve-client-url.ts
-function bindResolveClientUrl(prop, remoteSrc) {
-  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
-}
-
-// src/shared/client/parse-remote-html.ts
+// src/runtime/html/parse-remote-html.ts
+init_constants2();
 init_error();
-init_const();
 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);
@@ -1932,21 +1962,7 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 
-// src/shared/client/remote-component.ts
-init_error();
-
-// 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);
-init_error();
-init_logger();
-init_next_client_pages_loader();
-init_shared_modules();
-
-// 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)) {
@@ -2012,113 +2028,37 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/shared/client/component-loader.ts
-init_script_loader();
-init_webpack_adapter();
-
-// src/shared/client/remote-component.ts
-init_const();
-init_script_loader();
-init_static_loader();
-init_webpack_adapter();
-
-// 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/html/host/index.tsx
-init_error();
-
-// src/shared/ssr/fetch-with-hooks.ts
-init_logger();
-
-// 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/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);
   };
 }
-
-// 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;
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
   }
-  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/runtime/url/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
 }
 
-// src/html/host/index.tsx
+// src/host/html/index.tsx
 init_utils();
 init_abort();
+init_error();
 init_logger();
 
-// src/html/host/attach-styles.ts
+// src/host/html/attach-styles.ts
 init_error();
 async function attachStyles({
   doc,
@@ -2201,7 +2141,7 @@ async function attachStyles({
   }
 }
 
-// src/html/host/runtime/index.ts
+// src/host/html/runtime/index.ts
 init_error();
 async function getRuntime(type, url, bundle, shared, remoteShared, resolveClientUrl) {
   if (typeof globalThis.process === "undefined") {
@@ -2235,7 +2175,7 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
   );
 }
 
-// src/html/host/index.tsx
+// src/host/html/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
@@ -2250,7 +2190,7 @@ if (typeof HTMLElement !== "undefined") {
     onRequest;
     onResponse;
     resolveClientUrl;
-    // -- HostConfig property accessors (attribute-reflected) --
+    // -- ConsumeServerConfig property accessors (attribute-reflected) --
     get src() {
       return this.getAttribute("src") ?? void 0;
     }
@@ -2828,7 +2768,6 @@ function registerSharedModules(modules = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  proxyClientRequestsThroughHost,
   registerSharedModules
 });
-//# sourceMappingURL=host.cjs.map
+//# sourceMappingURL=html.cjs.map