remote-components 0.1.0 → 0.2.0

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

@@ -8,20 +8,17 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// 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;
@@ -30,13 +27,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;
@@ -48,12 +45,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.`
@@ -112,7 +109,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}`
@@ -130,11 +127,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) {
@@ -145,7 +142,7 @@ var init_error = __esm({
   }
 });
 
-// src/shared/utils/logger.ts
+// src/utils/logger.ts
 function logDebug(location2, message) {
   if (DEBUG) {
     console.debug(`[${PREFIX}:${location2}]: ${message}`);
@@ -169,14 +166,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}". If this is a protected deployment, ensure withRemoteComponentsHostProxy middleware is configured in your host and that the remote URL is included in allowedProxyUrls. 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();
@@ -185,7 +182,99 @@ 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] = (module) => {
+            module.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__ ?? {})}`
+    );
+  }
+}
+var init_apply_shared_modules = __esm({
+  "src/config/webpack/apply-shared-modules.ts"() {
+    "use strict";
+    init_logger();
+  }
+});
+
+// src/config/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
   const nextCssOriginal = document.querySelector(
@@ -297,213 +386,416 @@ 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
+import { jsx } from "react/jsx-runtime";
+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] = (module) => {
-            module.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__ ?? {})}`
-    );
-  }
-}
-var init_shared_modules = __esm({
-  "src/shared/webpack/shared-modules.ts"() {
-    "use strict";
-    init_logger();
-  }
-});
-
-// 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| )/;
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return 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.`
-              )
-            );
-          }
-        };
-        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();
+  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
   }
-});
-
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
 }
-var init_utils = __esm({
-  "src/shared/utils/index.ts"() {
-    "use strict";
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
   }
-});
-
-// src/shared/client/const.ts
-function getBundleKey(bundle) {
-  return escapeString(bundle);
+  const propSrc = src;
+  return applyBundleUrlToSrc(bundle, propSrc.src);
 }
-var RUNTIME_WEBPACK, RUNTIME_TURBOPACK, REMOTE_COMPONENT_REGEX;
-var init_const = __esm({
-  "src/shared/client/const.ts"() {
-    "use strict";
-    init_utils();
-    RUNTIME_WEBPACK = "webpack";
-    RUNTIME_TURBOPACK = "turbopack";
-    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-  }
-});
-
-// 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;
-    logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
-    if (remoteRuntime === RUNTIME_WEBPACK) {
-      logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
-      return Promise.resolve(void 0);
-    }
-    const url = new URL(
-      path ? `${prefix ?? ""}${path}`.replace(
-        /(?<char>[^:])(?<double>\/\/)/g,
-        "$1/"
-      ) : "/",
-      self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
-    ).href;
-    if (url.endsWith(".css")) {
-      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
-      return;
-    }
-    if (!self.__remote_components_turbopack_chunk_loader_promise__) {
-      self.__remote_components_turbopack_chunk_loader_promise__ = {};
-    }
-    if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
+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();
+          }
+        };
+      },
+      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__ */ 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 imageImpl;
+var init_polyfill = __esm({
+  "src/host/shared/polyfill.tsx"() {
+    "use strict";
+    init_logger();
+    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 (
+        // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+        /* @__PURE__ */ 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(
+              new RemoteComponentsError(
+                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHostProxy 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);
+      });
+    })
+  );
+}
+var init_script_loader = __esm({
+  "src/runtime/loaders/script-loader.ts"() {
+    "use strict";
+    init_constants2();
+    init_protected_rc_fallback();
+    init_constants();
+    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");
+      return Promise.resolve(void 0);
+    }
+    const url = new URL(
+      path ? `${prefix ?? ""}${path}`.replace(
+        /(?<char>[^:])(?<double>\/\/)/g,
+        "$1/"
+      ) : "/",
+      self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
+    ).href;
+    if (url.endsWith(".css")) {
+      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
+      return;
+    }
+    if (!self.__remote_components_turbopack_chunk_loader_promise__) {
+      self.__remote_components_turbopack_chunk_loader_promise__ = {};
+    }
+    if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
       logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
       return self.__remote_components_turbopack_chunk_loader_promise__[url];
     }
@@ -528,7 +820,7 @@ function createChunkLoader(runtime, resolveClientUrl) {
         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}`
+              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
             )
           );
         } else {
@@ -678,18 +970,18 @@ 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_constants2();
+    init_protected_rc_fallback();
     init_constants();
     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);
@@ -858,768 +1150,309 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
       }
       return mod;
     },
-    // require
-    r(requireId) {
-      return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
-    },
-    // value exports
-    v(value) {
-      if (typeof value === "function") {
-        exports.default = value((vid) => {
-          return self.__webpack_require__?.(`[${bundle}] ${vid}`);
-        });
-      } else {
-        moduleExports.exports = value;
-      }
-    },
-    // async module initializer
-    async a(mod) {
-      let result;
-      await mod(
-        () => {
-        },
-        (value) => result = value
-      );
-      exports.default = result;
-    },
-    // async module loader
-    async A(Aid) {
-      const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
-      return mod.default(
-        (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
-      );
-    },
-    // dynamic import tracking — no-op for remote components
-    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, module]) => {
-          if (self.__remote_shared_modules__?.[bundle]) {
-            if (hostShared[module]) {
-              self.__remote_shared_modules__[bundle][id] = await hostShared[module](bundle);
-            } else {
-              logError(
-                "SharedModules",
-                `Host shared module "${module}" not found for ID ${id}`
-              );
-            }
-          }
-        })
-      );
-    }
-  }
-  return Promise.all(
-    Object.entries(remoteShared).map(async ([id, module]) => {
-      if (self.__remote_shared_modules__?.[bundle]) {
-        if (hostShared[module]) {
-          const normalizedId = id.replace("[app-ssr]", "[app-client]");
-          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module](bundle);
-        } else {
-          logError(
-            "SharedModules",
-            `Shared module "${module}" 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);
+    // require
+    r(requireId) {
+      return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
+    },
+    // value exports
+    v(value) {
+      if (typeof value === "function") {
+        exports.default = value((vid) => {
+          return self.__webpack_require__?.(`[${bundle}] ${vid}`);
+        });
+      } else {
+        moduleExports.exports = value;
       }
-      throw new Error(`Module "${id}" not found.`);
-    } catch (requireError) {
-      logWarn(
-        "WebpackAdapter",
-        `Module require failed: ${String(requireError)}`
+    },
+    // async module initializer
+    async a(mod) {
+      let result;
+      await mod(
+        () => {
+        },
+        (value) => result = value
       );
-      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 }
-        );
+      exports.default = result;
+    },
+    // async module loader
+    async A(Aid) {
+      const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
+      return mod.default(
+        (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
+      );
+    },
+    // dynamic import tracking — no-op for remote components
+    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_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();
-          }
-          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
+  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}`
         );
-        return {
-          mount: void 0,
-          unmount: void 0
-        };
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = extractSharedModuleIds(
+        shared,
+        bundleKey,
+        self
+      );
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module](bundle);
+            } else {
+              logError(
+                "SharedModules",
+                `Host shared module "${module}" not found for ID ${id}`
+              );
+            }
+          }
+        })
+      );
+    }
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        if (hostShared[module]) {
+          const normalizedId = id.replace("[app-ssr]", "[app-client]");
+          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module](bundle);
+        } else {
+          logError(
+            "SharedModules",
+            `Shared module "${module}" not found for "${bundle}"`
+          );
+        }
       }
     })
   );
-  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"() {
-    "use strict";
-    init_logger();
-  }
-});
-
-// src/shared/client/polyfill.tsx
-import { jsx } from "react/jsx-runtime";
-function applyBundleUrlToSrc(bundle, src) {
+function getSharedModule(bundle, id) {
   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;
-  }
-  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
-}
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
+  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;
+    }
   }
-  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"
-          );
-        }
-        return /* @__PURE__ */ 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
-      })
-    )),
-    "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;
+  return null;
 }
-var imageImpl;
-var init_polyfill = __esm({
-  "src/shared/client/polyfill.tsx"() {
+var init_shared_modules = __esm({
+  "src/runtime/turbopack/shared-modules.ts"() {
     "use strict";
+    init_constants2();
     init_logger();
-    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 (
-        // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            decoding: "async",
-            style: { color: "transparent" },
-            ...props,
-            src: newSrc,
-            suppressHydrationWarning: true
-          }
-        )
-      );
-    };
+    init_module();
+    init_patterns();
   }
 });
 
-// src/html/host/runtime/webpack.ts
-var webpack_exports = {};
-__export(webpack_exports, {
-  webpackRuntime: () => webpackRuntime
-});
-async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
+// 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.__DISABLE_WEBPACK_EXEC__) {
-    self.__DISABLE_WEBPACK_EXEC__ = {};
+  if (!self.__remote_bundle_url__) {
+    self.__remote_bundle_url__ = {};
   }
-  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 \`withRemoteComponents\` 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 \`withRemoteComponents\` on both host and remote?`
-        );
-      }
-      return self.__remote_webpack_require__[remoteBundle](id);
-    };
-    self.__webpack_chunk_load__ = () => {
-      return Promise.resolve([]);
-    };
+  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 {
-    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;
-        },
-        {}
-      )
-    };
+  if (runtime === RUNTIME_TURBOPACK) {
     await Promise.all(
-      Object.entries(resolve).map(async ([key, value]) => {
-        if (typeof value === "function") {
-          resolve[key] = await value(remoteBundle);
+      scripts.map((script) => {
+        if (script.src) {
+          return self.__webpack_chunk_load__?.(script.src, bundle);
         }
-        return Promise.resolve(value);
+        return Promise.resolve(void 0);
       })
     );
-    applySharedModules(remoteBundle, resolve);
   }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
+  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
+  );
 }
-var init_webpack = __esm({
-  "src/html/host/runtime/webpack.ts"() {
+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)}`
+      );
+      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("WebpackRuntime", "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 }
+        );
+      }
+    }
+  };
+}
+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
@@ -1627,7 +1460,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__
@@ -1657,25 +1490,181 @@ async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClient
       resolveClientUrl
     );
   }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
+  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
@@ -1694,17 +1683,101 @@ 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
+// src/host/html/index.tsx
 import { startTransition, useLayoutEffect } from "react";
 import { hydrateRoot } from "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",
@@ -1766,49 +1839,103 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
   }
 }
 
-// src/shared/client/proxy-through-host.ts
-init_protected_rc_fallback();
-function withRemoteSrc(resolveClientUrl, remoteSrc) {
-  return (url) => resolveClientUrl(remoteSrc, url);
-}
-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;
+// src/runtime/html/parse-remote-html.ts
+init_constants2();
+init_error();
+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);
   }
-  try {
-    const parsed = new URL(url, location.href);
-    if (parsed.origin === remoteOrigin) {
-      return generateProtectedRcFallbackSrc(url);
-    }
-  } catch {
+}
+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>?`
+    );
   }
-  return void 0;
-};
-
-// src/shared/client/default-resolve-client-url.ts
-function bindResolveClientUrl(prop, remoteSrc) {
-  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+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/client/remote-component.ts
-init_error();
-
-// src/shared/client/component-loader.ts
-init_error();
-init_logger();
-init_next_client_pages_loader();
-init_shared_modules();
-import * as React from "react";
-import * as JSXDevRuntime from "react/jsx-dev-runtime";
-import * as JSXRuntime from "react/jsx-runtime";
-import * as ReactDOM from "react-dom";
-import * as ReactDOMClient from "react-dom/client";
-
-// src/shared/client/rsc.ts
+// src/runtime/rsc.ts
 import { ReadableStream } from "web-streams-polyfill";
 function fixPayload(payload) {
   if (Array.isArray(payload)) {
@@ -1874,78 +2001,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/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/html/host/index.tsx
+// src/runtime/url/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// 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,
@@ -2028,7 +2114,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") {
@@ -2062,7 +2148,7 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
   );
 }
 
-// src/html/host/index.tsx
+// src/host/html/index.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
@@ -2071,42 +2157,76 @@ if (typeof HTMLElement !== "undefined") {
     fallbackSlot;
     __next = null;
     fouc = null;
-    isLoading = false;
-    prevIsRemoteComponent = false;
-    prevUrl;
-    prevSrc = null;
-    prevName;
+    hostState = createHostState();
     root = null;
     reactRoot;
     onRequest;
     onResponse;
     resolveClientUrl;
-    /** Current AbortController for the loading operation - can be used to cancel loading via controller.abort() */
-    abortController;
+    // -- ConsumeServerConfig property accessors (attribute-reflected) --
+    get src() {
+      return this.getAttribute("src") ?? void 0;
+    }
+    set src(value) {
+      if (value == null) {
+        this.removeAttribute("src");
+      } else {
+        this.setAttribute("src", String(value));
+      }
+    }
+    /** Always `true` — the HTML host always isolates via Shadow DOM. */
+    get isolate() {
+      return true;
+    }
+    get mode() {
+      const attr = this.getAttribute("mode");
+      return attr === "closed" ? "closed" : "open";
+    }
+    set mode(value) {
+      if (value) {
+        this.setAttribute("mode", value);
+      }
+    }
+    get reset() {
+      return this.getAttribute("reset") !== null;
+    }
+    set reset(value) {
+      if (value) {
+        this.setAttribute("reset", "");
+      } else {
+        this.removeAttribute("reset");
+      }
+    }
+    get credentials() {
+      return this.getAttribute("credentials") || "same-origin";
+    }
+    set credentials(value) {
+      if (value) {
+        this.setAttribute("credentials", value);
+      } else {
+        this.removeAttribute("credentials");
+      }
+    }
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
-    // watch for src attribute changes
-    // this is required to reload the remote component when the src attribute is added later
-    // this is for rendering the custom element using React
+    dispatchLifecycleEvent(type, detail) {
+      const event = new Event(type, { bubbles: true, composed: true });
+      if (detail) {
+        Object.assign(event, detail);
+      }
+      this.dispatchEvent(event);
+    }
     attributeChangedCallback(name, oldValue, newValue) {
       if ((name === "src" || name === "name") && oldValue !== newValue) {
-        if (this.getAttribute("src")) {
+        if (this.src) {
           this.load().catch((e) => {
             if (isAbortError(e)) {
               return;
             }
             logError("HtmlHost", "Error loading remote component.", e);
-            const errorEvent = new Event("error", {
-              bubbles: true,
-              composed: true
-            });
-            Object.assign(errorEvent, {
-              error: e,
-              src: this.getAttribute("src")
-            });
-            this.dispatchEvent(errorEvent);
-            this.isLoading = false;
+            this.dispatchLifecycleEvent("error", { error: e, src: this.src });
+            this.hostState.stage = "error";
           });
         }
       } else if (name === "mode" && oldValue !== newValue && this.root) {
@@ -2122,15 +2242,7 @@ if (typeof HTMLElement !== "undefined") {
             return;
           }
           logError("HtmlHost", "Error reloading remote component.", e);
-          const errorEvent = new Event("error", {
-            bubbles: true,
-            composed: true
-          });
-          Object.assign(errorEvent, {
-            error: e,
-            src: this.getAttribute("src")
-          });
-          this.dispatchEvent(errorEvent);
+          this.dispatchLifecycleEvent("error", { error: e, src: this.src });
         });
       }
     }
@@ -2140,9 +2252,9 @@ if (typeof HTMLElement !== "undefined") {
           resolve(void 0);
         });
       });
-      if (this.isLoading) {
-        this.abortController?.abort();
-        this.isLoading = false;
+      if (this.hostState.stage === "loading") {
+        this.hostState.abortController?.abort();
+        this.hostState.stage = "idle";
         if (this.root && !this.reactRoot) {
           this.root.innerHTML = "";
           this.fouc = null;
@@ -2152,29 +2264,24 @@ if (typeof HTMLElement !== "undefined") {
       }
       if (!this.root) {
         this.root = this.attachShadow({
-          mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
+          mode: this.mode === "closed" ? "closed" : "open"
         });
         this.fallbackSlot = document.createElement("slot");
         this.root.appendChild(this.fallbackSlot);
       }
       this.name = this.getAttribute("name") || "__vercel_remote_component";
       this.bundle = "default";
-      this.isLoading = true;
-      const src = this.getAttribute("src");
-      this.abortController = new AbortController();
-      const signal = this.abortController.signal;
-      const isCurrentLoad = () => !signal.aborted && this.getAttribute("src") === src;
+      this.hostState.stage = "loading";
+      const src = this.src;
+      this.hostState.abortController = new AbortController();
+      const signal = this.hostState.abortController.signal;
+      const isCurrentLoad = () => !signal.aborted && this.src === src;
       const abandonLoad = () => {
-        if (this.abortController?.signal === signal && this.isLoading) {
-          this.isLoading = false;
+        if (this.hostState.abortController?.signal === signal && this.hostState.stage === "loading") {
+          this.hostState.stage = "idle";
         }
       };
-      const beforeLoadEvent = new Event("beforeload", {
-        bubbles: true,
-        composed: true
-      });
-      Object.assign(beforeLoadEvent, { src });
-      this.dispatchEvent(beforeLoadEvent);
+      this.dispatchLifecycleEvent("beforeload", { src });
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
       if (!src && !remoteComponentChild) {
         throw new RemoteComponentsError('"src" attribute is required');
@@ -2182,15 +2289,16 @@ if (typeof HTMLElement !== "undefined") {
       let url = null;
       let html = this.innerHTML;
       if (src) {
-        url = new URL(src, window.location.href);
-        if (url.hash) {
-          this.name = url.hash.slice(1);
-        }
+        url = getClientOrServerUrl(src, window.location.href);
+        this.name = resolveNameFromSrc(
+          src,
+          this.name ?? "__vercel_remote_component"
+        );
       }
       const resolveClientUrl = url ? bindResolveClientUrl(this.resolveClientUrl, url.href) : void 0;
       if (!remoteComponentChild && url) {
         const fetchInit = {
-          credentials: this.getAttribute("credentials") || "same-origin"
+          credentials: this.credentials || "same-origin"
         };
         const resolvedUrl = new URL(
           resolveClientUrl?.(url.href) ?? url.href,
@@ -2201,7 +2309,7 @@ if (typeof HTMLElement !== "undefined") {
           res = await fetchWithHooks(resolvedUrl, fetchInit, {
             onRequest: this.onRequest,
             onResponse: this.onResponse,
-            abortController: this.abortController
+            abortController: this.hostState.abortController
           });
         } catch (e) {
           if (isAbortError(e)) {
@@ -2226,29 +2334,27 @@ if (typeof HTMLElement !== "undefined") {
       }
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
-      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
-        `div[data-bundle][data-route][id^="${this.name}"]`
-      ) || doc.querySelectorAll("remote-component").length > 1 && !doc.querySelector(`remote-component[name="${this.name}"]`)) {
-        throw multipleRemoteComponentsError(
-          url?.href ?? (this.getAttribute("src") || "unknown")
-        );
-      }
-      const component = doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
-      doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
-      doc.querySelector("div#__next") ?? // fallback to a <remote-component> element
-      doc.querySelector(`remote-component[name="${this.name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
-      const nextData = JSON.parse(
-        (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+      const parsed = parseRemoteComponentDocument(
+        doc,
+        this.name ?? "__vercel_remote_component",
+        url ?? new URL(window.location.href)
       );
-      const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
+      const {
+        component,
+        name: resolvedName,
+        isRemoteComponent,
+        metadata: parsedMetadata,
+        nextData,
+        rsc,
+        remoteShared
+      } = parsed;
       if (nextData && nextData.buildId === "development" && !this.reactRoot) {
         this.fouc = document.createElement("style");
         this.fouc.textContent = `:host { display: none; }`;
         this.root.appendChild(this.fouc);
       }
-      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component.getAttribute("name") || (nextData ? "__next" : this.name);
-      const rsc = doc.querySelector(`#${this.name}_rsc`);
-      this.bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || this.bundle;
+      this.name = resolvedName;
+      this.bundle = parsedMetadata.bundle;
       if (url) {
         const self2 = globalThis;
         if (!self2.__remote_bundle_url__) {
@@ -2256,38 +2362,28 @@ if (typeof HTMLElement !== "undefined") {
         }
         self2.__remote_bundle_url__[this.bundle ?? "default"] = url;
       }
-      const metadata = document.createElement("script");
-      metadata.type = "application/json";
-      metadata.setAttribute("data-remote-component", "");
+      const metadataEl = document.createElement("script");
+      metadataEl.type = "application/json";
+      metadataEl.setAttribute("data-remote-component", "");
       const metadataObj = {
         name: this.name,
         bundle: this.bundle,
-        route: component?.getAttribute("data-route") ?? nextData?.page ?? url?.pathname ?? "/",
-        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? "script"
+        route: parsedMetadata.route,
+        runtime: parsedMetadata.runtime
       };
-      metadata.textContent = JSON.stringify(metadataObj);
+      metadataEl.textContent = JSON.stringify(metadataObj);
       if (this.previousElementSibling?.getAttribute("data-remote-component") !== null) {
         this.previousElementSibling?.remove();
       }
-      this.parentElement?.insertBefore(metadata, this);
-      const remoteSharedEl = doc.querySelector(
-        `#${this.name}_shared[data-remote-components-shared]`
-      );
-      const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
-      remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
+      this.parentElement?.insertBefore(metadataEl, this);
       if ("__remote_components_missing_shared__" in remoteShared) {
         throw new RemoteComponentsError(
           remoteShared.__remote_components_missing_shared__
         );
       }
-      if (!component || !(rsc || nextData || isRemoteComponent)) {
-        throw new RemoteComponentsError(
-          `Remote Component not found on ${src}.${this.name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${this.name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
-        );
-      }
-      if (this.prevIsRemoteComponent) {
-        if (this.prevUrl) {
-          const prevUrl = this.prevUrl;
+      if (this.hostState.prevIsRemoteComponent) {
+        if (this.hostState.prevUrl) {
+          const prevUrl = this.hostState.prevUrl;
           const self2 = globalThis;
           if (self2.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
             await Promise.all(
@@ -2312,26 +2408,21 @@ if (typeof HTMLElement !== "undefined") {
         }
         this.root.innerHTML = "";
       }
-      if (this.prevSrc !== null) {
-        const changeEvent = new Event("change", {
-          bubbles: true,
-          composed: true
-        });
-        Object.assign(changeEvent, {
-          previousSrc: this.prevSrc,
+      if (this.hostState.prevSrc !== void 0) {
+        this.dispatchLifecycleEvent("change", {
+          previousSrc: this.hostState.prevSrc,
           nextSrc: src,
-          previousName: this.prevName,
+          previousName: this.hostState.prevName,
           nextName: this.name
         });
-        this.dispatchEvent(changeEvent);
       }
-      this.prevUrl = url ?? new URL(window.location.href);
-      this.prevIsRemoteComponent = isRemoteComponent;
-      this.prevSrc = src;
-      this.prevName = this.name;
+      this.hostState.prevUrl = url ?? new URL(window.location.href);
+      this.hostState.prevIsRemoteComponent = isRemoteComponent;
+      this.hostState.prevSrc = src;
+      this.hostState.prevName = this.name;
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
-      const remoteComponentSrc = this.getAttribute("src");
+      const remoteComponentSrc = this.src ? String(this.src) : null;
       const doAttachStyles = () => attachStyles({
         doc,
         component,
@@ -2405,7 +2496,7 @@ if (typeof HTMLElement !== "undefined") {
       }
       this.fallbackSlot?.remove();
       const applyReset = () => {
-        if (this.getAttribute("reset") !== null && !this.root?.querySelector("link[data-remote-components-reset]")) {
+        if (this.reset && !this.root?.querySelector("link[data-remote-components-reset]")) {
           const allInitial = document.createElement("link");
           allInitial.setAttribute("data-remote-components-reset", "");
           const css = `:host { all: initial; }`;
@@ -2423,7 +2514,7 @@ if (typeof HTMLElement !== "undefined") {
             allInitial.removeAttribute("onload");
           };
           this.root?.prepend(allInitial);
-        } else if (this.getAttribute("reset") === null && this.root?.querySelector("link[data-remote-components-reset]")) {
+        } else if (!this.reset && this.root?.querySelector("link[data-remote-components-reset]")) {
           this.root.querySelector("link[data-remote-components-reset]")?.remove();
         }
       };
@@ -2531,14 +2622,9 @@ if (typeof HTMLElement !== "undefined") {
               });
             }
             if (isCurrentLoad()) {
-              this.isLoading = false;
+              this.hostState.stage = "loaded";
             }
-            const loadEvent = new Event("load", {
-              bubbles: true,
-              composed: true
-            });
-            Object.assign(loadEvent, { src: this.getAttribute("src") });
-            this.dispatchEvent(loadEvent);
+            this.dispatchLifecycleEvent("load", { src: this.src });
           }, [initial, name]);
           return Component;
         };
@@ -2572,7 +2658,7 @@ if (typeof HTMLElement !== "undefined") {
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
           this.bundle ?? "default",
-          nextData.page,
+          nextData.page ?? "/",
           this.root
         );
         if (Component) {
@@ -2586,16 +2672,11 @@ if (typeof HTMLElement !== "undefined") {
                 });
               }
               if (isCurrentLoad()) {
-                remoteComponent.isLoading = false;
+                remoteComponent.hostState.stage = "loaded";
               }
-              const loadEvent = new Event("load", {
-                bubbles: true,
-                composed: true
-              });
-              Object.assign(loadEvent, {
-                src: remoteComponent.getAttribute("src")
+              remoteComponent.dispatchLifecycleEvent("load", {
+                src: remoteComponent.src
               });
-              remoteComponent.dispatchEvent(loadEvent);
             }, [initial, remoteComponent]);
             return NextApp ? /* @__PURE__ */ jsx2(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ jsx2(NextComponent, { ...nextData.props });
           })(App, Component, this);
@@ -2605,7 +2686,7 @@ if (typeof HTMLElement !== "undefined") {
               root.render(/* @__PURE__ */ jsx2(RemoteComponentFromNext, { initial: false }));
               doCleanup();
               if (isCurrentLoad()) {
-                this.isLoading = false;
+                this.hostState.stage = "loaded";
               }
             });
             return;
@@ -2636,22 +2717,12 @@ if (typeof HTMLElement !== "undefined") {
             }
           })
         );
-        const loadEvent = new Event("load", {
-          bubbles: true,
-          composed: true
-        });
-        Object.assign(loadEvent, { src: this.getAttribute("src") });
-        this.dispatchEvent(loadEvent);
+        this.dispatchLifecycleEvent("load", { src: this.src });
       } else {
-        const loadEvent = new Event("load", {
-          bubbles: true,
-          composed: true
-        });
-        Object.assign(loadEvent, { src: this.getAttribute("src") });
-        this.dispatchEvent(loadEvent);
+        this.dispatchLifecycleEvent("load", { src: this.src });
       }
       if (isCurrentLoad()) {
-        this.isLoading = false;
+        this.hostState.stage = "loaded";
       }
     }
   }
@@ -2669,7 +2740,6 @@ function registerSharedModules(modules = {}) {
   });
 }
 export {
-  proxyClientRequestsThroughHost,
   registerSharedModules
 };
-//# sourceMappingURL=host.js.map
+//# sourceMappingURL=html.js.map