remote-components 0.3.3 → 0.3.5

package/dist/host/html.cjs

@@ -205,7 +205,7 @@ var init_logger = __esm({
     init_constants();
     init_error();
     PREFIX = "remote-components";
-    DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
+    DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true" || typeof process !== "undefined" && process.env.RC_DEBUG === "true";
   }
 });
 
@@ -240,190 +240,65 @@ var init_constants2 = __esm({
   }
 });
 
-// src/config/webpack/apply-shared-modules.ts
-function applySharedModules(bundle, resolve) {
-  logDebug(
-    "SharedModules",
-    `applySharedModules called for bundle: "${bundle}"`
-  );
-  logDebug(
-    "SharedModules",
-    `Shared modules to resolve: ${Object.keys(resolve)}`
-  );
-  const self = globalThis;
-  if (self.__remote_webpack_require__?.[bundle]) {
-    const modulePaths = Object.keys(
-      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
-    );
-    logDebug(
-      "SharedModules",
-      `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
-    );
-    for (const [key, value] of Object.entries(resolve)) {
-      const exactIds = modulePaths.filter((p) => p === key);
-      const ids = exactIds.length > 0 ? exactIds : modulePaths.filter((p) => p.includes(key));
-      if (ids.length === 0) {
-        logDebug(
-          "SharedModules",
-          `No matching module path found for shared module "${key}"`
-        );
-      }
-      for (const id of ids) {
-        const webpackBundle = self.__remote_webpack_require__[bundle];
-        if (webpackBundle.m) {
-          const resolvedId = self.__remote_webpack_module_map__?.[bundle]?.[id] ? `${self.__remote_webpack_module_map__[bundle][id]}` : id;
-          if (resolvedId !== id) {
-            logDebug(
-              "SharedModules",
-              `Mapped module id: "${id}" -> "${resolvedId}"`
-            );
-          }
-          webpackBundle.m[resolvedId] = (module2) => {
-            module2.exports = value;
-          };
-        } else {
-          logWarn(
-            "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
-          );
-        }
-      }
-    }
-  } else {
-    logWarn(
-      "SharedModules",
-      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
-    );
-    logDebug(
-      "SharedModules",
-      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
-    );
-  }
-}
-var DEDUPLICATION_SKIPPED;
-var init_apply_shared_modules = __esm({
-  "src/config/webpack/apply-shared-modules.ts"() {
-    "use strict";
-    init_logger();
-    DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
-  }
-});
-
-// src/config/webpack/next-client-pages-loader.ts
-function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
-  const self = globalThis;
-  const nextCssOriginal = document.querySelector(
-    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
-  );
-  if (nextCssOriginal) {
-    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
-  }
-  const nextCss = document.createElement("noscript");
-  nextCss.id = "__next_css__DO_NOT_USE__";
-  nextCss.setAttribute("data-bundle", bundle);
-  nextCss.setAttribute("data-route", route);
-  const nextCssEnd = document.createElement("noscript");
-  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
-  nextCssEnd.setAttribute("data-bundle", bundle);
-  nextCssEnd.setAttribute("data-route", route);
-  document.head.appendChild(nextCssEnd);
-  document.head.appendChild(nextCss);
-  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
-  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
-  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? ""] ?? -1;
-  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
-  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
-  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? ""] ?? -1;
-  if (!(componentLoaderChunk && appLoaderChunk)) {
-    throw new RemoteComponentsError(
-      `Next.js client pages loader not found in bundle "${bundle}".`
-    );
-  }
-  const __NEXT_P_ORIGINAL = self.__NEXT_P;
-  const selfOriginal = self;
-  delete selfOriginal.__NEXT_P;
-  self.__remote_webpack_require__?.[bundle]?.(
-    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
-  );
-  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
-    self.__remote_webpack_require__?.[bundle]?.(
-      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
-    );
-  }
-  if (self.__NEXT_P) {
-    const [, componentLoader] = self.__NEXT_P[0] ?? [
-      void 0,
-      () => ({ default: null })
-    ];
-    const [, appLoader] = self.__NEXT_P[2] ?? [
-      void 0,
-      () => ({
-        default: null
-      })
-    ];
-    const { default: Component } = componentLoader();
-    const { default: App } = appLoader();
-    if (!self.__remote_next_css__) {
-      self.__remote_next_css__ = {};
-    }
-    if (!self.__remote_next_css__[bundle]) {
-      const cssRE = /\.s?css$/;
-      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
-        self.__remote_webpack_require__?.[bundle]?.(id);
-      });
-      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
-        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
-        if (id) {
-          self.__remote_webpack_require__?.[bundle]?.(id);
-        }
-      });
-      const elements = [];
-      let node = nextCss.previousSibling;
-      while (node && node !== nextCssEnd) {
-        elements.push(node);
-        node.remove();
-        node = nextCss.previousSibling;
-      }
-      self.__remote_next_css__[bundle] = elements;
-    }
-    if (styleContainer) {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        styleContainer.appendChild(el.cloneNode(true));
-      });
-    } else {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        document.head.appendChild(el);
-      });
+// src/runtime/namespace.ts
+function getNamespace() {
+  const g = globalThis;
+  const existing = g.__remote_components__;
+  if (existing) {
+    return existing;
+  }
+  const ns = {
+    scopes: /* @__PURE__ */ new Map(),
+    chunkCache: {},
+    mountFns: {},
+    unmountFns: {},
+    bundleUrls: {},
+    moduleRegistry: {},
+    dispatcherRuntime: void 0,
+    hostSharedModules: {},
+    cssCache: {},
+    shadowRoots: {}
+  };
+  const nsRecord = ns;
+  for (const { global, prop } of LEGACY_ALIASES) {
+    const legacyValue = g[global];
+    if (legacyValue != null) {
+      nsRecord[prop] = legacyValue;
     }
-    delete self.__NEXT_P;
-    self.__NEXT_P = __NEXT_P_ORIGINAL;
-    if (nextCssOriginal) {
-      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    g[global] = ns[prop];
+  }
+  const gRecord = g;
+  for (const key of Object.keys(gRecord)) {
+    if (key.startsWith(SHADOW_ROOT_PREFIX)) {
+      const suffix = key.slice(SHADOW_ROOT_PREFIX.length);
+      ns.shadowRoots[suffix] = gRecord[key];
+      delete gRecord[key];
     }
-    nextCss.remove();
-    nextCssEnd.remove();
-    return { Component, App };
   }
-  return { Component: null, App: null };
+  g.__remote_components__ = ns;
+  return ns;
 }
-var init_next_client_pages_loader = __esm({
-  "src/config/webpack/next-client-pages-loader.ts"() {
+var SHADOW_ROOT_PREFIX, LEGACY_ALIASES;
+var init_namespace = __esm({
+  "src/runtime/namespace.ts"() {
     "use strict";
-    init_error();
+    SHADOW_ROOT_PREFIX = "__remote_components_shadowroot_";
+    LEGACY_ALIASES = [
+      { global: "__remote_component_scopes__", prop: "scopes" },
+      {
+        global: "__remote_components_turbopack_chunk_loader_promise__",
+        prop: "chunkCache"
+      },
+      { global: "__remote_script_entrypoint_mount__", prop: "mountFns" },
+      { global: "__remote_script_entrypoint_unmount__", prop: "unmountFns" },
+      { global: "__remote_bundle_url__", prop: "bundleUrls" },
+      { global: "__rc_module_registry__", prop: "moduleRegistry" },
+      {
+        global: "__remote_component_host_shared_modules__",
+        prop: "hostSharedModules"
+      },
+      { global: "__remote_next_css__", prop: "cssCache" }
+    ];
   }
 });
 
@@ -443,11 +318,7 @@ var init_patterns = __esm({
 
 // src/runtime/turbopack/remote-scope.ts
 function getRegistry() {
-  const self = globalThis;
-  if (!self.__remote_component_scopes__) {
-    self.__remote_component_scopes__ = /* @__PURE__ */ new Map();
-  }
-  return self.__remote_component_scopes__;
+  return getNamespace().scopes;
 }
 function createScope(name, url, runtime, resolveClientUrl) {
   const isCrossOrigin = url.origin !== location.origin;
@@ -465,7 +336,8 @@ function createScope(name, url, runtime, resolveClientUrl) {
     resolveClientUrl,
     moduleCache: {},
     sharedModules: {},
-    moduleGlobal: {}
+    moduleGlobal: {},
+    turbopackModules: []
   };
 }
 function registerScope(scope) {
@@ -507,6 +379,7 @@ var init_remote_scope = __esm({
   "src/runtime/turbopack/remote-scope.ts"() {
     "use strict";
     init_constants2();
+    init_namespace();
     init_patterns();
     init_utils();
     init_logger();
@@ -544,9 +417,9 @@ var init_remote_image_loader = __esm({
 
 // src/host/shared/polyfill.tsx
 function sharedPolyfills(shared, resolveClientUrl) {
-  const self = globalThis;
+  const hostShared = getNamespace().hostSharedModules;
   const polyfill = {
-    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+    "next/dist/client/components/navigation": hostShared["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
       useRouter() {
         return {
           push: (routerUrl) => {
@@ -577,7 +450,7 @@ function sharedPolyfills(shared, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/link": hostShared["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
       default: ({
         scroll: _,
         replace,
@@ -627,7 +500,7 @@ function sharedPolyfills(shared, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/form": hostShared["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
       default: () => {
         throw new Error("Next.js <Form> component not implemented");
       },
@@ -638,17 +511,17 @@ function sharedPolyfills(shared, resolveClientUrl) {
     // This gives us full next/image fidelity (fill, priority, srcSet, blur
     // placeholders, error handling) while routing image optimization through the
     // remote app's /_next/image endpoint.
-    "next/dist/shared/lib/image-loader": self.__remote_component_host_shared_modules__?.["next/dist/shared/lib/image-loader"] ?? shared?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
+    "next/dist/shared/lib/image-loader": hostShared["next/dist/shared/lib/image-loader"] ?? shared?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
       default: createRemoteImageLoader(bundle, resolveClientUrl),
       __esModule: true
     })),
-    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+    "next/dist/client/script": hostShared["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"] ?? (() => (
+    "next/router": hostShared["next/router"] ?? shared?.["next/router"] ?? (() => (
       // TODO: incomplete implementation
       Promise.resolve({
         useRouter() {
@@ -688,171 +561,296 @@ var init_polyfill = __esm({
   "src/host/shared/polyfill.tsx"() {
     "use strict";
     init_remote_image_loader();
+    init_namespace();
     init_logger();
     import_jsx_runtime = require("react/jsx-runtime");
   }
 });
 
-// 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 alreadyLoaded = Array.from(
-          document.querySelectorAll("script[src]")
-        ).some((s) => s.src === resolvedSrc);
-        if (alreadyLoaded) {
-          resolve();
-          return;
+// src/host/shared/shared-module-resolver.ts
+function buildCoreShared(userShared) {
+  return {
+    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,
+    ...userShared
+  };
+}
+function buildHostShared(userShared, resolveClientUrl, options) {
+  const self = globalThis;
+  const result = {
+    ...sharedPolyfills(userShared, resolveClientUrl),
+    ...self.__remote_component_host_shared_modules__,
+    ...userShared
+  };
+  if (options?.includeRemoteComponentShared) {
+    Object.assign(result, self.__remote_component_shared__);
+  }
+  return result;
+}
+async function buildWebpackResolve(hostShared, remoteShared, bundle, reactModules, callerTag = "SharedModuleResolver") {
+  const resolve = {
+    ...reactModules,
+    ...Object.entries(remoteShared).reduce(
+      (acc, [key, value]) => {
+        if (typeof hostShared[value] !== "undefined") {
+          acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+        } else {
+          logDebug(
+            callerTag,
+            `Remote requests "${value}" but host doesn't provide it`
+          );
         }
-        const newScript = document.createElement("script");
-        newScript.onload = () => resolve();
-        newScript.onerror = () => {
-          const isProxied = isProxiedUrl(resolvedSrc);
-          if (isProxied) {
-            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
-          } else {
-            warnCrossOriginFetchError("ScriptLoader", newSrc);
-            reject(
-              new RemoteComponentsError(
-                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
-              )
-            );
-          }
-        };
-        newScript.src = resolvedSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
+        return acc;
+      },
+      {}
+    )
+  };
+  await Promise.all(
+    Object.entries(resolve).map(async ([key, value]) => {
+      if (typeof value === "function") {
+        resolve[key] = await value(bundle);
+      }
+      return Promise.resolve(value);
     })
   );
+  return resolve;
 }
-var init_script_loader = __esm({
-  "src/runtime/loaders/script-loader.ts"() {
+var CORE_REACT_PATH_MAP, VENDOR_SHARED;
+var init_shared_module_resolver = __esm({
+  "src/host/shared/shared-module-resolver.ts"() {
     "use strict";
-    init_patterns();
-    init_protected_rc_fallback();
-    init_error();
+    init_polyfill();
     init_logger();
+    CORE_REACT_PATH_MAP = {
+      react: "/react/index.js",
+      "react/jsx-dev-runtime": "/react/jsx-dev-runtime.js",
+      "react/jsx-runtime": "/react/jsx-runtime.js",
+      "react-dom": "/react-dom/index.js",
+      "react-dom/client": "/react-dom/client.js"
+    };
+    VENDOR_SHARED = Object.fromEntries(
+      Object.entries(CORE_REACT_PATH_MAP).filter(([key]) => key !== "react-dom/client").map(([key, path]) => [key, `'${path}'`])
+    );
   }
 });
 
-// src/host/html/runtime/webpack.ts
-var webpack_exports = {};
-__export(webpack_exports, {
-  webpackRuntime: () => webpackRuntime
-});
-async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
+// 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.__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?`
+  const scope = getScope(bundle);
+  const webpackBundle = scope?.webpackRequire ?? self.__remote_webpack_require__?.[bundle];
+  if (webpackBundle) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? webpackBundle.m ?? {}
+    );
+    logDebug(
+      "SharedModules",
+      `Available module paths for bundle "${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}"`
         );
       }
-      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];
+      for (const id of ids) {
+        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}"`
+            );
           }
-          return acc;
-        },
-        {}
-      )
-    };
-    await Promise.all(
-      Object.entries(resolve).map(async ([key, value]) => {
-        if (typeof value === "function") {
-          resolve[key] = await value(remoteBundle);
+          webpackBundle.m[resolvedId] = (module2) => {
+            module2.exports = value;
+          };
+        } else {
+          logWarn(
+            "SharedModules",
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+          );
         }
-        return Promise.resolve(value);
-      })
+      }
+    }
+  } else {
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
     );
-    applySharedModules(remoteBundle, resolve);
   }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
 }
-var init_webpack = __esm({
-  "src/host/html/runtime/webpack.ts"() {
+var DEDUPLICATION_SKIPPED;
+var init_apply_shared_modules = __esm({
+  "src/config/webpack/apply-shared-modules.ts"() {
     "use strict";
-    init_apply_shared_modules();
-    init_next_client_pages_loader();
-    init_polyfill();
-    init_script_loader();
-    init_patterns();
+    init_remote_scope();
+    init_logger();
+    DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
+  }
+});
+
+// src/config/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
+    );
+  }
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(
+    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+  );
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(
+      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
+    );
+  }
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    const cssCache = getNamespace().cssCache;
+    if (!cssCache[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
+      let node = nextCss.previousSibling;
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
+        node = nextCss.previousSibling;
+      }
+      cssCache[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = cssCache[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = cssCache[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
+  }
+  return { Component: null, App: null };
+}
+var init_next_client_pages_loader = __esm({
+  "src/config/webpack/next-client-pages-loader.ts"() {
+    "use strict";
+    init_namespace();
     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;
+function stripQuotes(value) {
+  if (value.startsWith('"') && value.endsWith('"')) {
+    return value.slice(1, -1);
+  }
+  return value;
+}
+function extractGroup(re, input, group) {
+  const raw = re.exec(input)?.groups?.[group];
+  return raw ? stripQuotes(raw) : void 0;
+}
+var MODULE_ID_PATTERN, REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_CALLBACK_RE, TURBOPACK_GLOBAL_RE;
 var init_patterns2 = __esm({
   "src/runtime/turbopack/patterns.ts"() {
     "use strict";
+    MODULE_ID_PATTERN = '"[^"]+"|[0-9]+';
     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]+)\)\)\)\}/;
+    REMOTE_SHARED_ASSIGNMENT_RE = new RegExp(
+      `\\.TURBOPACK_REMOTE_SHARED\\s*=\\s*await (?:__turbopack_context__|[a-z])\\.A\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
+    );
+    ASYNC_MODULE_LOADER_RE = new RegExp(
+      `(?:__turbopack_context__|[a-z])\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
+    );
+    ASYNC_MODULE_CALLBACK_RE = new RegExp(
+      `(?:parentImport|[a-z])\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
+    );
     TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
   }
 });
@@ -864,6 +862,7 @@ function loadChunkWithScope(scope, chunkId) {
     `loadChunkWithScope: "${chunkId}" (scope: "${scope.scopedName}")`
   );
   const self = globalThis;
+  const ns = getNamespace();
   const { bundle, path, prefix } = parseRemoteId(chunkId);
   const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : scope.runtime;
   if (remoteRuntime === RUNTIME_WEBPACK) {
@@ -874,35 +873,31 @@ function loadChunkWithScope(scope, chunkId) {
   if (url.endsWith(".css")) {
     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]) {
-    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  if (ns.chunkCache[url]) {
+    logDebug("ChunkLoader", `Cache hit for "${chunkId}" (url="${url}")`);
+    return ns.chunkCache[url];
   }
   const resolvedUrl = scope.resolveClientUrl?.(url) ?? url;
   if (resolvedUrl !== url) {
     logDebug("ChunkLoader", `Proxied chunk URL: "${url}" \u2192 "${resolvedUrl}"`);
   }
-  self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise(
-    (resolve, reject) => {
-      fetch(resolvedUrl).then((res) => res.text()).then((code) => {
-        const hasTurbopack = TURBOPACK_GLOBAL_RE.test(code);
-        if (hasTurbopack) {
-          return handleTurbopackChunk(code, scope, url);
-        }
-      }).then(resolve).catch((error) => {
-        const isProxied = isProxiedUrl(resolvedUrl);
-        if (isProxied) {
-          reject(failedProxiedAssetError("chunk", url, resolvedUrl));
-        } else {
-          warnCrossOriginFetchError("ChunkLoader", url);
-          reject(error);
-        }
-      });
-    }
-  );
-  return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  ns.chunkCache[url] = new Promise((resolve, reject) => {
+    fetch(resolvedUrl).then((res) => res.text()).then((code) => {
+      const hasTurbopack = TURBOPACK_GLOBAL_RE.test(code);
+      if (hasTurbopack) {
+        return handleTurbopackChunk(code, scope, url);
+      }
+    }).then(resolve).catch((error) => {
+      const isProxied = isProxiedUrl(resolvedUrl);
+      if (isProxied) {
+        reject(failedProxiedAssetError("chunk", url, resolvedUrl));
+      } else {
+        warnCrossOriginFetchError("ChunkLoader", url);
+        reject(error);
+      }
+    });
+  });
+  return ns.chunkCache[url];
 }
 function createChunkDispatcher() {
   return function __chunk_dispatcher__(chunkId, scriptBundle) {
@@ -951,19 +946,39 @@ async function handleTurbopackChunk(code, scope, url) {
     `//# sourceMappingURL=${new URL(".", new URL(url, scope.url)).href}$1$2.js.map`
   );
   if (!self[`TURBOPACK_${globalKey}`]) {
-    const chunkData = [];
-    const turbopackObject = {
-      push: (item) => {
-        if (Array.isArray(item)) {
-          chunkData.push(item);
-        } else {
-          chunkData.push([item]);
+    const wrapPush = (target) => {
+      const originalPush = target.push;
+      if (typeof originalPush !== "function")
+        return target;
+      target.push = (...items) => {
+        for (const item of items) {
+          if (Array.isArray(item)) {
+            for (const entry of item) {
+              scope.turbopackModules.push(entry);
+            }
+          } else {
+            scope.turbopackModules.push(item);
+          }
         }
-        return chunkData.length;
-      },
-      __chunks__: chunkData
+        return originalPush.apply(target, items);
+      };
+      return target;
     };
-    self[`TURBOPACK_${globalKey}`] = turbopackObject;
+    const globalProp = `TURBOPACK_${globalKey}`;
+    let currentValue = wrapPush([]);
+    Object.defineProperty(self, globalProp, {
+      get() {
+        return currentValue;
+      },
+      set(newValue) {
+        if (newValue && typeof newValue === "object") {
+          wrapPush(newValue);
+        }
+        currentValue = newValue;
+      },
+      configurable: true,
+      enumerable: true
+    });
   }
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
@@ -1015,6 +1030,7 @@ var init_chunk_loader = __esm({
   "src/runtime/turbopack/chunk-loader.ts"() {
     "use strict";
     init_constants2();
+    init_namespace();
     init_patterns();
     init_protected_rc_fallback();
     init_error();
@@ -1026,13 +1042,13 @@ var init_chunk_loader = __esm({
 
 // src/runtime/turbopack/shared-modules.ts
 function getTurbopackModules(scope) {
+  if (scope.turbopackModules.length > 0) {
+    return scope.turbopackModules;
+  }
   const self = globalThis;
   const raw = self[`TURBOPACK_${scope.globalKey}`];
   if (!raw)
     return void 0;
-  if (typeof raw === "object" && "__chunks__" in raw) {
-    return raw.__chunks__.flat();
-  }
   if (Array.isArray(raw)) {
     return raw.flat();
   }
@@ -1056,7 +1072,11 @@ async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}
     if (sharedModuleInitializerIndex > 0) {
       const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
       const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
-      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
+      const sharedModuleId = extractGroup(
+        REMOTE_SHARED_ASSIGNMENT_RE,
+        sharedModuleInitializerCode,
+        "sharedModuleId"
+      );
       if (sharedModuleId) {
         const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
           scope,
@@ -1114,20 +1134,22 @@ async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}
 }
 function extractSharedModuleIds(shared, scope) {
   return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
-    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
+    const asyncSharedModuleId = extractGroup(
+      ASYNC_MODULE_LOADER_RE,
+      value.toString(),
+      "asyncSharedModuleId"
+    );
     if (asyncSharedModuleId) {
-      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
-      let asyncSharedModule;
-      const turbopackModules = getTurbopackModules(scope) ?? [];
-      const asyncSharedModuleIdIndex = turbopackModules.indexOf(
-        asyncSharedModuleIdNumber
+      const asyncSharedModule = findModuleInit(
+        getTurbopackModules(scope),
+        asyncSharedModuleId
       );
-      if (asyncSharedModuleIdIndex !== -1 && typeof turbopackModules[asyncSharedModuleIdIndex + 1] === "function") {
-        asyncSharedModule = turbopackModules[asyncSharedModuleIdIndex + 1];
-      }
       if (asyncSharedModule) {
-        const asyncSharedModuleCode = asyncSharedModule.toString();
-        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
+        const sharedModuleId = extractGroup(
+          ASYNC_MODULE_CALLBACK_RE,
+          asyncSharedModule.toString(),
+          "sharedModuleId"
+        );
         acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
           "__remote_shared_module_",
           ""
@@ -1229,9 +1251,17 @@ function findModuleInit(modules, moduleId) {
   if (idx >= 0) {
     return flat.slice(idx + 1).find((e) => typeof e === "function");
   }
-  return flat.find(
-    (e) => Boolean(e && typeof e === "object" && moduleId in e)
-  )?.[moduleId];
+  for (const entry of flat) {
+    if (!entry || typeof entry !== "object")
+      continue;
+    const obj = entry;
+    if (moduleId in obj)
+      return obj[moduleId];
+    const prefixKey = Object.keys(obj).find((k) => k.startsWith(moduleId));
+    if (prefixKey)
+      return obj[prefixKey];
+  }
+  return void 0;
 }
 function createTurbopackContext(scope, exports, moduleExports, modules, moduleInit, id) {
   const scopedRequire = (moduleId) => requireModule(scope, moduleId, formatRemoteId(scope, String(moduleId)));
@@ -1310,7 +1340,10 @@ function createTurbopackContext(scope, exports, moduleExports, modules, moduleIn
       }
       if (typeof mod !== "object" || mod === null) {
         mod = { default: mod };
-      } else if (!("default" in mod) && mod.toString() !== "[object Module]") {
+      } else if (!("default" in mod) && // ES module namespace objects have a null prototype, so calling
+      // mod.toString() directly throws. Use Object.prototype.toString
+      // to safely detect them.
+      Object.prototype.toString.call(mod) !== "[object Module]") {
         try {
           mod.default = mod;
         } catch {
@@ -1383,21 +1416,38 @@ var init_module = __esm({
   }
 });
 
-// src/runtime/turbopack/webpack-runtime.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
+// src/runtime/turbopack/remote-scope-setup.ts
+async function setupRemoteScope(runtime, scripts = [], url = new URL(location.href), bundle, resolveClientUrl) {
   const self = globalThis;
+  const ns = getNamespace();
   const bundleName = bundle ?? "default";
+  const existingScope = getScope(bundleName);
+  if (existingScope && existingScope.url.origin === url.origin) {
+    logDebug(
+      "WebpackRuntime",
+      `Reusing scope "${existingScope.scopedName}" (turbopackModules=${existingScope.turbopackModules.length})`
+    );
+    existingScope.resolveClientUrl = resolveClientUrl;
+    if (runtime === RUNTIME_TURBOPACK) {
+      await Promise.allSettled(
+        scripts.map(
+          (script) => script.src ? loadChunkWithScope(existingScope, script.src) : Promise.resolve(void 0)
+        )
+      );
+    }
+    return existingScope;
+  }
   const scope = createScope(bundleName, url, runtime, resolveClientUrl);
   registerScope(scope);
-  if (!self.__remote_bundle_url__) {
-    self.__remote_bundle_url__ = {};
+  if (runtime === RUNTIME_WEBPACK && self.__remote_webpack_require__?.[bundleName]) {
+    scope.webpackRequire = self.__remote_webpack_require__[bundleName];
   }
-  self.__remote_bundle_url__[bundleName] = url;
+  ns.bundleUrls[bundleName] = url;
   if (scope.scopedName !== bundleName) {
-    self.__remote_bundle_url__[scope.scopedName] = url;
+    ns.bundleUrls[scope.scopedName] = url;
   }
   self.__webpack_get_script_filename__ = () => null;
-  const willCreateDispatchers = typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack";
+  const willCreateDispatchers = typeof self.__webpack_require__ !== "function" || ns.dispatcherRuntime !== "turbopack";
   if (willCreateDispatchers) {
     if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
       self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
@@ -1405,6 +1455,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
     }
     self.__webpack_chunk_load__ = createChunkDispatcher();
     self.__webpack_require__ = createModuleDispatcher(runtime);
+    ns.dispatcherRuntime = runtime;
     self.__webpack_require_type__ = runtime;
     if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
       self.__remote_webpack_require__[bundleName] = self.__webpack_require__;
@@ -1432,15 +1483,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
       }
     }
   }
-  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(scope, coreShared, remoteShared);
+  return scope;
 }
 function createModuleDispatcher(runtime) {
   return (id) => {
@@ -1457,6 +1500,9 @@ function createModuleDispatcher(runtime) {
     );
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        const scope2 = getScope(bundle);
+        if (scope2?.webpackRequire)
+          return scope2.webpackRequire(moduleId);
         return self.__remote_webpack_require__?.[bundle]?.(moduleId);
       }
       const scope = getScope(bundleName);
@@ -1494,73 +1540,67 @@ function createModuleDispatcher(runtime) {
     }
   };
 }
-var init_webpack_runtime = __esm({
-  "src/runtime/turbopack/webpack-runtime.ts"() {
+var init_remote_scope_setup = __esm({
+  "src/runtime/turbopack/remote-scope-setup.ts"() {
     "use strict";
     init_constants2();
+    init_namespace();
     init_patterns();
     init_error();
     init_logger();
     init_chunk_loader();
     init_module();
     init_remote_scope();
-    init_shared_modules();
   }
 });
 
-// src/host/html/runtime/turbopack.ts
-var turbopack_exports = {};
-__export(turbopack_exports, {
-  turbopackRuntime: () => turbopackRuntime
-});
-async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClientUrl) {
-  const self = globalThis;
-  const hostShared = {
-    ...sharedPolyfills(shared, resolveClientUrl),
-    ...self.__remote_component_host_shared_modules__,
-    ...shared,
-    ...self.__remote_component_shared__
-  };
-  await setupWebpackRuntime(
-    "turbopack",
-    [],
-    url,
-    bundle,
-    hostShared,
-    remoteShared,
-    resolveClientUrl
-  );
-  const {
-    default: { createFromReadableStream }
-  } = await import("react-server-dom-webpack/client.browser");
-  function preloadScripts(scripts, __) {
-    return setupWebpackRuntime(
-      "turbopack",
-      scripts.map((script) => ({
-        src: script.getAttribute("src") || script.getAttribute("data-src") || script.src
-      })),
-      url,
-      bundle,
-      hostShared,
-      remoteShared,
-      resolveClientUrl
-    );
-  }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
+// 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 alreadyLoaded = Array.from(
+          document.querySelectorAll("script[src]")
+        ).some((s) => s.src === resolvedSrc);
+        if (alreadyLoaded) {
+          resolve();
+          return;
+        }
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        newScript.onerror = () => {
+          const isProxied = isProxiedUrl(resolvedSrc);
+          if (isProxied) {
+            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
+          } else {
+            warnCrossOriginFetchError("ScriptLoader", newSrc);
+            reject(
+              new RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
+        };
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
 }
-var init_turbopack = __esm({
-  "src/host/html/runtime/turbopack.ts"() {
+var init_script_loader = __esm({
+  "src/runtime/loaders/script-loader.ts"() {
     "use strict";
-    init_apply_shared_modules();
-    init_next_client_pages_loader();
-    init_polyfill();
-    init_webpack_runtime();
+    init_patterns();
+    init_protected_rc_fallback();
+    init_error();
+    init_logger();
   }
 });
 
@@ -1607,10 +1647,9 @@ async function importViaCallback(absoluteSrc, resolveClientUrl) {
     URL.revokeObjectURL(moduleBlobUrl);
     URL.revokeObjectURL(wrapperBlobUrl);
   }
-  const registry = globalThis.__rc_module_registry__;
-  const mod = registry?.[absoluteSrc] ?? {};
-  if (registry)
-    delete registry[absoluteSrc];
+  const registry = getNamespace().moduleRegistry;
+  const mod = registry[absoluteSrc] ?? {};
+  delete registry[absoluteSrc];
   return mod;
 }
 async function importDirectly(absoluteSrc) {
@@ -1640,12 +1679,12 @@ function resolveScriptSrc(script, url) {
   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();
+  const ns = getNamespace();
+  if (ns.mountFns[url.href]) {
+    ns.mountFns[url.href] = /* @__PURE__ */ new Set();
   }
-  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
-    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  if (ns.unmountFns[url.href]) {
+    ns.unmountFns[url.href] = /* @__PURE__ */ new Set();
   }
   const mountUnmountSets = await Promise.all(
     scripts.map(async (script) => {
@@ -1657,25 +1696,19 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
           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 (!ns.mountFns[url.href]) {
+            ns.mountFns[url.href] = /* @__PURE__ */ new Set();
           }
-          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(
+          ns.mountFns[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();
+          if (!ns.unmountFns[url.href]) {
+            ns.unmountFns[url.href] = /* @__PURE__ */ new Set();
           }
-          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+          ns.unmountFns[url.href]?.add(
             mod.unmount || mod.default?.unmount || (() => {
             })
           );
@@ -1716,10 +1749,145 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
 var init_static_loader = __esm({
   "src/runtime/loaders/static-loader.ts"() {
     "use strict";
+    init_namespace();
     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 = buildHostShared(shared, resolveClientUrl);
+    const resolve = await buildWebpackResolve(
+      hostShared,
+      remoteShared ?? {},
+      remoteBundle,
+      {
+        "/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
+      },
+      "WebpackRuntime"
+    );
+    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_shared_module_resolver();
+    init_script_loader();
+    init_patterns();
+    init_error();
+  }
+});
+
+// src/host/html/runtime/turbopack.ts
+var turbopack_exports = {};
+__export(turbopack_exports, {
+  turbopackRuntime: () => turbopackRuntime
+});
+async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClientUrl) {
+  const self = globalThis;
+  const hostShared = buildHostShared(shared, resolveClientUrl, {
+    includeRemoteComponentShared: true
+  });
+  await setupRemoteScope("turbopack", [], url, bundle, resolveClientUrl);
+  const {
+    default: { createFromReadableStream }
+  } = await import("react-server-dom-webpack/client.browser");
+  async function preloadScripts(scripts, __) {
+    const scope = await setupRemoteScope(
+      "turbopack",
+      scripts.map((script) => ({
+        src: script.getAttribute("src") || script.getAttribute("data-src") || script.src
+      })),
+      url,
+      bundle,
+      resolveClientUrl
+    );
+    await initializeSharedModules(
+      scope,
+      buildCoreShared(hostShared),
+      remoteShared ?? {}
+    );
+  }
+  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_shared_module_resolver();
+    init_remote_scope_setup();
+    init_shared_modules();
+  }
+});
+
 // src/host/html/runtime/script.ts
 var script_exports = {};
 __export(script_exports, {
@@ -1812,37 +1980,36 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/host/shared/state.ts
-function createHostState() {
+// src/host/shared/lifecycle.ts
+function makeEventEmitter(element) {
+  function dispatch(type, detail) {
+    const event = new Event(type, { bubbles: true, composed: true });
+    if (detail) {
+      Object.assign(event, detail);
+    }
+    element.dispatchEvent(event);
+  }
   return {
-    stage: "idle",
-    prevSrc: void 0,
-    prevUrl: void 0,
-    prevName: void 0,
-    prevIsRemoteComponent: false,
-    abortController: void 0
+    beforeLoad(src) {
+      dispatch("beforeload", { src });
+    },
+    load(src) {
+      dispatch("load", { src });
+    },
+    error(error, src) {
+      dispatch("error", src != null ? { error, src } : { error });
+    },
+    change(info) {
+      dispatch("change", info);
+    }
   };
 }
 
-// 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/host/html/index.tsx
-init_constants2();
+// src/host/shared/pipeline.ts
+init_shared_module_resolver();
 
-// src/runtime/html/apply-origin.ts
-var tagNames = [
+// src/runtime/html/html-spec.ts
+var ORIGIN_REWRITE_TAGS = [
   "img",
   "source",
   "video",
@@ -1853,10 +2020,37 @@ var tagNames = [
   "script",
   "link"
 ];
+var ID_SUFFIX_RSC = "_rsc";
+var ID_SUFFIX_SSR = "_ssr";
+var ID_SUFFIX_SHARED = "_shared";
+var DATA_BUNDLE = "data-bundle";
+var DATA_ROUTE = "data-route";
+var DATA_RUNTIME = "data-runtime";
+var DATA_TYPE = "data-type";
+var DATA_SRC = "data-src";
+var DATA_REMOTE_COMPONENTS_SHARED = "data-remote-components-shared";
+var TAG_REMOTE_COMPONENT = "remote-component";
+var NEXT_DATA_ID = "__NEXT_DATA__";
+var REMOTE_NEXT_DATA_ID = "__REMOTE_NEXT_DATA__";
+var NEXT_CONTAINER_ID = "__next";
+
+// src/runtime/html/rewrite-srcset.ts
+function rewriteSrcset(srcset, base, resolve) {
+  return srcset.split(",").map((entry) => {
+    const [url, descriptor] = entry.trim().split(/\s+/);
+    if (!url)
+      return entry;
+    const absoluteUrl = new URL(url, base).href;
+    const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;
+    return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
+  }).join(", ");
+}
+
+// src/runtime/html/apply-origin.ts
 function applyOriginToNodes(doc, url, resolveClientUrl) {
   if (url.origin !== location.origin) {
     const nodes = doc.querySelectorAll(
-      tagNames.map(
+      ORIGIN_REWRITE_TAGS.map(
         (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
       ).join(",")
     );
@@ -1874,29 +2068,17 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
         );
       }
       if (node.hasAttribute("srcset")) {
-        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
-          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("srcset", srcSet);
+        const raw = node.getAttribute("srcset");
+        if (raw) {
+          const resolve = resolveClientUrl ? (abs) => resolveClientUrl(abs) ?? abs : void 0;
+          node.setAttribute("srcset", rewriteSrcset(raw, url, resolve));
         }
       }
       if (node.hasAttribute("imagesrcset")) {
-        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
-          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("imagesrcset", srcSet);
+        const raw = node.getAttribute("imagesrcset");
+        if (raw) {
+          const resolve = resolveClientUrl ? (abs) => resolveClientUrl(abs) ?? abs : void 0;
+          node.setAttribute("imagesrcset", rewriteSrcset(raw, url, resolve));
         }
       }
     });
@@ -1942,26 +2124,28 @@ function buildMetadata(attrs, url) {
 // src/runtime/html/parse-remote-html.ts
 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}"]`)) {
+  if (doc.querySelectorAll(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`).length > 1 && !doc.querySelector(
+    `div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`
+  ) || doc.querySelectorAll(`${TAG_REMOTE_COMPONENT}:not([src])`).length > 1 && !doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]`)) {
     throw multipleRemoteComponentsError(url);
   }
 }
 function findComponentElement(doc, name) {
-  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+  return doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`) ?? doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`) ?? doc.querySelector(`div#${NEXT_CONTAINER_ID}`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]:not([src])`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}:not([src])`);
 }
 function parseNextData(doc) {
   return JSON.parse(
-    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+    (doc.querySelector(`#${NEXT_DATA_ID}`) ?? doc.querySelector(`#${REMOTE_NEXT_DATA_ID}`))?.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);
+  const isRemoteComponent = component?.tagName.toLowerCase() === TAG_REMOTE_COMPONENT;
+  const name = component?.getAttribute("id")?.replace(new RegExp(`${ID_SUFFIX_SSR}$`), "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
-    `#${name}_shared[data-remote-components-shared]`
+    `#${name}${ID_SUFFIX_SHARED}[${DATA_REMOTE_COMPONENTS_SHARED}]`
   );
   const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
   remoteSharedEl?.remove();
@@ -1982,7 +2166,7 @@ function extractLinks(doc, component) {
 function extractScripts(doc, component, isRemoteComponent) {
   return Array.from(
     (isRemoteComponent ? component : doc).querySelectorAll(
-      "script[src],script[data-src]"
+      `script[src],script[${DATA_SRC}]`
     )
   );
 }
@@ -1995,15 +2179,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     nextData,
     name
   );
-  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const rsc = doc.querySelector(`#${resolvedName}${ID_SUFFIX_RSC}`);
   const metadata = buildMetadata(
     {
       name: resolvedName,
-      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
-      route: component?.getAttribute("data-route") ?? nextData?.page,
-      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
+      bundle: component?.getAttribute(DATA_BUNDLE) || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute(DATA_ROUTE) ?? nextData?.page,
+      runtime: component?.getAttribute(DATA_RUNTIME) ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
       id: component?.getAttribute("id"),
-      type: component?.getAttribute("data-type")
+      type: component?.getAttribute(DATA_TYPE)
     },
     url
   );
@@ -2031,6 +2215,16 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 
+// src/runtime/loaders/component-loader.ts
+var React = __toESM(require("react"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+init_apply_shared_modules();
+init_next_client_pages_loader();
+init_shared_module_resolver();
+
 // src/runtime/rsc.ts
 var import_web_streams_polyfill = require("web-streams-polyfill");
 function fixPayload(payload) {
@@ -2051,6 +2245,18 @@ function fixPayload(payload) {
     }
   }
 }
+function buildRSCChunks(rscName, data) {
+  const chunks = [];
+  for (const chunk of data) {
+    for (const line of chunk.split("\n")) {
+      const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
+      if (match?.groups?.rsc) {
+        chunks.push(JSON.parse(`"${match.groups.rsc}"`));
+      }
+    }
+  }
+  return chunks;
+}
 function createRSCStream(rscName, data) {
   return new import_web_streams_polyfill.ReadableStream({
     type: "bytes",
@@ -2058,16 +2264,11 @@ function createRSCStream(rscName, data) {
       const encoder = new TextEncoder();
       const self = globalThis;
       if (data.length > 0) {
-        data.forEach((chunk) => {
-          const lines = chunk.split("\n");
-          for (const line of lines) {
-            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
-            if (match?.groups?.rsc) {
-              self[rscName] = self[rscName] ?? [];
-              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
-            }
-          }
-        });
+        const parsed = buildRSCChunks(rscName, data);
+        if (parsed.length > 0) {
+          self[rscName] = self[rscName] ?? [];
+          self[rscName].push(...parsed);
+        }
       }
       const allChunks = (self[rscName] ?? [`0:[null]
 `]).join("");
@@ -2097,6 +2298,75 @@ function createRSCStream(rscName, data) {
   });
 }
 
+// src/runtime/loaders/component-loader.ts
+init_remote_scope_setup();
+init_shared_modules();
+init_error();
+init_logger();
+init_script_loader();
+
+// src/host/shared/pipeline.ts
+init_static_loader();
+init_patterns();
+init_utils();
+init_error();
+function preparePipeline(input) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(input.html, "text/html");
+  const parsed = parseRemoteComponentDocument(doc, input.name, input.url);
+  const remoteShared = input.remoteShared ?? parsed.remoteShared;
+  if ("__remote_components_missing_shared__" in remoteShared) {
+    throw new RemoteComponentsError(
+      remoteShared.__remote_components_missing_shared__
+    );
+  }
+  applyOriginToNodes(doc, input.url, input.resolveClientUrl);
+  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
+  return { doc, parsed, scriptDescriptors };
+}
+function buildScriptDescriptors(scripts, url) {
+  return scripts.map((script) => {
+    const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+    const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
+      prefix: void 0,
+      id: scriptSrc
+    };
+    return {
+      src: new URL(collapseDoubleSlashes(`${prefix ?? ""}${path}`), url).href
+    };
+  });
+}
+
+// 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/host/html/index.tsx
+init_constants2();
+init_namespace();
+
 // src/runtime/url/resolve-client-url.ts
 function withRemoteSrc(resolveClientUrl, remoteSrc) {
   const remoteOrigin = parseOrigin(remoteSrc);
@@ -2251,6 +2521,7 @@ if (typeof HTMLElement !== "undefined") {
     hostState = createHostState();
     root = null;
     reactRoot;
+    emitter = makeEventEmitter(this);
     onRequest;
     onResponse;
     resolveClientUrl;
@@ -2301,13 +2572,6 @@ if (typeof HTMLElement !== "undefined") {
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
-    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.src) {
@@ -2316,7 +2580,7 @@ if (typeof HTMLElement !== "undefined") {
               return;
             }
             logError("HtmlHost", "Error loading remote component.", e);
-            this.dispatchLifecycleEvent("error", { error: e, src: this.src });
+            this.emitter.error(e, this.src);
             this.hostState.stage = "error";
           });
         }
@@ -2333,7 +2597,7 @@ if (typeof HTMLElement !== "undefined") {
             return;
           }
           logError("HtmlHost", "Error reloading remote component.", e);
-          this.dispatchLifecycleEvent("error", { error: e, src: this.src });
+          this.emitter.error(e, this.src);
         });
       }
     }
@@ -2371,7 +2635,7 @@ if (typeof HTMLElement !== "undefined") {
           this.hostState.stage = "idle";
         }
       };
-      this.dispatchLifecycleEvent("beforeload", { src });
+      this.emitter.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');
@@ -2419,13 +2683,14 @@ if (typeof HTMLElement !== "undefined") {
           return abandonLoad();
         }
       }
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, "text/html");
-      const parsed = parseRemoteComponentDocument(
-        doc,
-        this.name,
-        url ?? new URL(window.location.href)
-      );
+      const effectiveUrl = url ?? new URL(window.location.href);
+      const { doc, parsed } = preparePipeline({
+        html,
+        name: this.name,
+        url: effectiveUrl,
+        shared: {},
+        resolveClientUrl
+      });
       const {
         component,
         name: resolvedName,
@@ -2443,11 +2708,7 @@ if (typeof HTMLElement !== "undefined") {
       this.name = resolvedName;
       this.bundle = parsedMetadata.bundle;
       if (url) {
-        const self2 = globalThis;
-        if (!self2.__remote_bundle_url__) {
-          self2.__remote_bundle_url__ = {};
-        }
-        self2.__remote_bundle_url__[this.bundle] = url;
+        getNamespace().bundleUrls[this.bundle] = url;
       }
       const metadataEl = document.createElement("script");
       metadataEl.type = "application/json";
@@ -2463,30 +2724,25 @@ if (typeof HTMLElement !== "undefined") {
         this.previousElementSibling?.remove();
       }
       this.parentElement?.insertBefore(metadataEl, this);
-      if ("__remote_components_missing_shared__" in remoteShared) {
-        throw new RemoteComponentsError(
-          remoteShared.__remote_components_missing_shared__
-        );
-      }
       if (this.hostState.prevIsRemoteComponent) {
         if (this.hostState.prevUrl) {
           const prevUrl = this.hostState.prevUrl;
-          const self2 = globalThis;
-          if (self2.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+          const nsUnmount = getNamespace();
+          if (nsUnmount.unmountFns[prevUrl.href]) {
             await Promise.all(
-              Array.from(
-                self2.__remote_script_entrypoint_unmount__[prevUrl.href] ?? []
-              ).map(async (unmount) => {
-                try {
-                  await unmount(this.root);
-                } catch (e) {
-                  logError(
-                    "HtmlHost",
-                    `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
-                    e
-                  );
+              Array.from(nsUnmount.unmountFns[prevUrl.href] ?? []).map(
+                async (unmount) => {
+                  try {
+                    await unmount(this.root);
+                  } catch (e) {
+                    logError(
+                      "HtmlHost",
+                      `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
+                      e
+                    );
+                  }
                 }
-              })
+              )
             );
             if (!isCurrentLoad()) {
               return abandonLoad();
@@ -2496,14 +2752,14 @@ if (typeof HTMLElement !== "undefined") {
         this.root.innerHTML = "";
       }
       if (this.hostState.prevSrc !== void 0) {
-        this.dispatchLifecycleEvent("change", {
-          previousSrc: this.hostState.prevSrc,
-          nextSrc: src,
+        this.emitter.change({
+          previousSrc: this.hostState.prevSrc ?? null,
+          nextSrc: src ?? null,
           previousName: this.hostState.prevName,
           nextName: this.name
         });
       }
-      this.hostState.prevUrl = url ?? new URL(window.location.href);
+      this.hostState.prevUrl = effectiveUrl;
       this.hostState.prevIsRemoteComponent = isRemoteComponent;
       this.hostState.prevSrc = src;
       this.hostState.prevName = this.name;
@@ -2536,11 +2792,6 @@ if (typeof HTMLElement !== "undefined") {
           return abandonLoad();
         }
       }
-      applyOriginToNodes(
-        doc,
-        url ?? new URL(window.location.href),
-        resolveClientUrl
-      );
       if (!this.reactRoot) {
         Array.from(component.children).forEach((el) => {
           if (!isRemoteComponent && el.tagName.toLowerCase() === "script") {
@@ -2615,7 +2866,7 @@ if (typeof HTMLElement !== "undefined") {
         preloadScripts
       } = await getRuntime(
         metadataObj.runtime,
-        url ?? new URL(window.location.href),
+        effectiveUrl,
         this.bundle,
         {
           react: async () => (await import("react")).default,
@@ -2706,7 +2957,7 @@ if (typeof HTMLElement !== "undefined") {
             if (isCurrentLoad()) {
               this.hostState.stage = "loaded";
             }
-            this.dispatchLifecycleEvent("load", { src: this.src });
+            this.emitter.load(this.src ?? "");
           }, [initial, name]);
           return Component;
         };
@@ -2750,9 +3001,7 @@ if (typeof HTMLElement !== "undefined") {
               if (isCurrentLoad()) {
                 remoteComponent.hostState.stage = "loaded";
               }
-              remoteComponent.dispatchLifecycleEvent("load", {
-                src: remoteComponent.src
-              });
+              remoteComponent.emitter.load(remoteComponent.src ?? "");
             }, [initial, remoteComponent]);
             return NextApp ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextComponent, { ...nextData.props });
           })(App, Component, this);
@@ -2777,25 +3026,25 @@ if (typeof HTMLElement !== "undefined") {
         if (this.fouc) {
           this.root.removeChild(this.fouc);
         }
-      } else if (self.__remote_script_entrypoint_mount__?.[url.href]) {
+      } else if (getNamespace().mountFns[url.href]) {
         await Promise.all(
-          Array.from(
-            self.__remote_script_entrypoint_mount__[url.href] ?? []
-          ).map(async (mount) => {
-            try {
-              await mount(this.root);
-            } catch (e) {
-              logError(
-                "HtmlHost",
-                `Error while calling mount() for Remote Component from ${url.href}.`,
-                e
-              );
+          Array.from(getNamespace().mountFns[url.href] ?? []).map(
+            async (mount) => {
+              try {
+                await mount(this.root);
+              } catch (e) {
+                logError(
+                  "HtmlHost",
+                  `Error while calling mount() for Remote Component from ${url.href}.`,
+                  e
+                );
+              }
             }
-          })
+          )
         );
-        this.dispatchLifecycleEvent("load", { src: this.src });
+        this.emitter.load(this.src ?? "");
       } else {
-        this.dispatchLifecycleEvent("load", { src: this.src });
+        this.emitter.load(this.src ?? "");
       }
       if (isCurrentLoad()) {
         this.hostState.stage = "loaded";
@@ -2805,14 +3054,9 @@ if (typeof HTMLElement !== "undefined") {
   customElements.define("remote-component", RemoteComponent);
 }
 function registerSharedModules(modules = {}) {
-  const self = globalThis;
-  if (!self.__remote_component_host_shared_modules__) {
-    self.__remote_component_host_shared_modules__ = {};
-  }
+  const ns = getNamespace();
   Object.entries(modules).forEach(([key, value]) => {
-    if (self.__remote_component_host_shared_modules__) {
-      self.__remote_component_host_shared_modules__[key] = value;
-    }
+    ns.hostSharedModules[key] = value;
   });
 }
 // Annotate the CommonJS export names for ESM import in node: