remote-components 0.0.33 → 0.0.35

package/dist/next/host/client/index.cjs

@@ -40,1187 +40,1287 @@ var Image = __toESM(require("next/image"), 1);
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 
-// src/shared/client/component-loader.ts
-var React = __toESM(require("react"), 1);
-var ReactDOM = __toESM(require("react-dom"), 1);
-var ReactDOMClient = __toESM(require("react-dom/client"), 1);
-var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
-var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
-
-// src/shared/webpack/shared-modules.ts
-function applySharedModules(bundle, 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 ?? {}
+// src/shared/client/apply-origin.ts
+var tagNames = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+function applyOriginToNodes(doc, url) {
+  if (url.origin !== location.origin) {
+    const nodes = doc.querySelectorAll(
+      tagNames.map(
+        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
+      ).join(",")
     );
-    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));
+    nodes.forEach((node) => {
+      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
+        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
       }
-      for (let id of ids) {
-        const webpackBundle = self.__remote_webpack_require__[bundle];
-        if (webpackBundle.m) {
-          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
-            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
-          }
-          webpackBundle.m[id] = (module2) => {
-            module2.exports = value;
-          };
+      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        node.setAttribute(
+          "href",
+          new URL(node.getAttribute("href") ?? "/", url).href
+        );
+      }
+      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;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("srcset", srcSet);
         }
       }
-    }
-  }
-}
-
-// src/shared/error.ts
-var RemoteComponentsError = class extends Error {
-  constructor(message, options) {
-    super(message, options);
-    this.code = "REMOTE_COMPONENTS_ERROR";
-    this.name = "RemoteComponentsError";
-  }
-};
-function multipleRemoteComponentsError(url) {
-  return new Error(
-    `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.`
-  );
-}
-function failedToFetchRemoteComponentError(url, error) {
-  return new RemoteComponentsError(
-    `Failed to fetch Remote Component from "${url}". Is the URL correct and accessible?`,
-    { cause: error instanceof Error ? error : new Error(String(error)) }
-  );
-}
-
-// src/shared/webpack/next-client-pages-loader.ts
-function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
-  const self = globalThis;
-  const nextCssOriginal = document.querySelector(
-    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
-  );
-  if (nextCssOriginal) {
-    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
-  }
-  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);
+      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;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("imagesrcset", srcSet);
         }
-      });
-      const elements = [];
-      let node = nextCss.previousSibling;
-      while (node && node !== nextCssEnd) {
-        elements.push(node);
-        node.remove();
-        node = nextCss.previousSibling;
       }
-      self.__remote_next_css__[bundle] = elements;
-    }
-    if (styleContainer) {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        styleContainer.appendChild(el.cloneNode(true));
-      });
-    } else {
-      const elements = self.__remote_next_css__[bundle];
-      elements.forEach((el) => {
-        document.head.appendChild(el);
-      });
-    }
-    delete self.__NEXT_P;
-    self.__NEXT_P = __NEXT_P_ORIGINAL;
-    if (nextCssOriginal) {
-      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
-    }
-    nextCss.remove();
-    nextCssEnd.remove();
-    return { Component, App };
+    });
   }
-  return { Component: null, App: null };
-}
-
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var attrToProp = {
-  fetchpriority: "fetchPriority",
-  crossorigin: "crossOrigin",
-  imagesrcset: "imageSrcSet",
-  imagesizes: "imageSizes",
-  srcset: "srcSet"
-};
-
-// src/shared/client/const.ts
-var DEFAULT_ROUTE = "/";
-var RUNTIME_WEBPACK = "webpack";
-var RUNTIME_TURBOPACK = "turbopack";
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-function getBundleKey(bundle) {
-  return escapeString(bundle);
 }
 
-// src/shared/client/webpack-adapter.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
+// src/shared/client/polyfill.tsx
+var import_jsx_runtime = (
+  // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+  require("react/jsx-runtime")
+);
+function applyBundleUrlToSrc(bundle, src) {
   const self = globalThis;
-  if (!self.__remote_bundle_url__) {
-    self.__remote_bundle_url__ = {};
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return src;
   }
-  self.__remote_bundle_url__[bundle ?? "default"] = url;
-  self.__webpack_get_script_filename__ = () => null;
-  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
-    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
-      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
-      self.__original_webpack_require__ = self.__webpack_require__;
-    }
-    self.__webpack_chunk_load__ = createChunkLoader(runtime);
-    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 { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
   }
-  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);
-      })
-    );
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
+}
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
   }
-  await initializeSharedModules(
-    bundle ?? "default",
-    // include all core modules as shared
-    {
-      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
-    },
-    remoteShared
-  );
+  const propSrc = src;
+  return applyBundleUrlToSrc(bundle, propSrc.src);
 }
-function createChunkLoader(runtime) {
-  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
-    const self = globalThis;
-    const {
-      bundle,
-      id: path,
-      prefix
-    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
-      bundle: scriptBundle ?? "",
-      id: chunkId
-    };
-    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
-    if (remoteRuntime === RUNTIME_WEBPACK) {
-      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")) {
-      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];
+var imageImpl = (bundle) => function RemoteImage({
+  fill: _fill,
+  loader: _loader,
+  quality: _quality,
+  priority: _priority,
+  loading: _loading,
+  placeholder: _placeholder,
+  blurDataURL: _blurDataURL,
+  unoptimized: _unoptimized,
+  overrideSrc: _overrideSrc,
+  src,
+  ...props
+}) {
+  const newSrc = applyBundleUrlToImagePropsSrc(
+    bundle,
+    typeof src === "string" ? src : src.src
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      decoding: "async",
+      style: { color: "transparent" },
+      ...props,
+      src: newSrc,
+      suppressHydrationWarning: true
     }
-    self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
-      fetch(url).then((res) => res.text()).then((code) => {
-        if (code.includes("globalThis.TURBOPACK")) {
-          return handleTurbopackChunk(code, bundle ?? "", url);
+  );
+};
+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) {
+          console.warn(
+            "Next.js Link prefetch is not supported in remote components"
+          );
         }
-      }).then(resolve).catch(reject);
-    });
-    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+      default: () => {
+        throw new Error("Next.js <Form> component not implemented");
+      },
+      __esModule: true
+    })),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+      // TODO: implement <Script> component for non-Next.js host applications
+      // do not throw an error for now
+      default: () => null,
+      __esModule: true
+    })),
+    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
+          };
+        },
+        __esModule: true
+      })
+    )),
+    "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;
 }
-async function handleTurbopackChunk(code, bundle, url) {
-  if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
-    const preloadLinks = document.querySelectorAll(
-      `link[rel="preload"][href="${new URL(url).pathname}"]`
-    );
-    preloadLinks.forEach((preloadLink) => preloadLink.remove());
-    return;
+
+// src/shared/error.ts
+var RemoteComponentsError = class extends Error {
+  code = "REMOTE_COMPONENTS_ERROR";
+  constructor(message, options) {
+    super(message, options);
+    this.name = "RemoteComponentsError";
   }
-  const self = globalThis;
-  const bundleKey = getBundleKey(bundle);
-  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
-    /TURBOPACK_WORKER_LOCATION/g,
-    `TURBOPACK_WORKER_LOCATION_${bundleKey}`
-  ).replace(
-    /TURBOPACK_NEXT_CHUNK_URLS/g,
-    `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`
-  ).replace(
-    /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
-    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
-  ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
-    /\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
-    `//# sourceMappingURL=${new URL(
-      ".",
-      new URL(
-        url,
-        self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin)
-      )
-    ).href}$1$2.js.map`
+};
+function multipleRemoteComponentsError(url) {
+  return new Error(
+    `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.`
   );
-  await new Promise((scriptResolve, scriptReject) => {
-    const blob = new Blob([transformedCode], {
-      type: "application/javascript; charset=UTF-8"
-    });
-    const scriptUrl = URL.createObjectURL(blob);
-    const script = document.createElement("script");
-    script.setAttribute("data-turbopack-src", url);
-    script.src = scriptUrl;
-    script.async = true;
-    script.onload = () => {
-      URL.revokeObjectURL(scriptUrl);
-      scriptResolve(void 0);
-      script.remove();
-    };
-    script.onerror = () => {
-      URL.revokeObjectURL(scriptUrl);
-      scriptReject(
-        new RemoteComponentsError(
-          `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
-        )
-      );
-      script.remove();
-    };
-    document.head.appendChild(script);
-  });
-  const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
-  const loadChunkLists = [];
-  while (chunkLists?.length) {
-    const { chunks } = chunkLists.shift() ?? { chunks: [] };
-    if (chunks.length > 0) {
-      chunks.forEach((id) => {
-        const chunkLoadResult = self.__webpack_chunk_load__?.(
-          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
-        );
-        if (chunkLoadResult) {
-          loadChunkLists.push(chunkLoadResult);
+}
+function failedToFetchRemoteComponentError(url, error) {
+  return new RemoteComponentsError(
+    `Failed to fetch Remote Component from "${url}". Is the URL correct and accessible?`,
+    { cause: error instanceof Error ? error : new Error(String(error)) }
+  );
+}
+
+// src/shared/client/component-loader.ts
+var React = __toESM(require("react"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+
+// src/shared/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
+    );
+  }
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(
+    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+  );
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(
+      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
+    );
+  }
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    if (!self.__remote_next_css__) {
+      self.__remote_next_css__ = {};
+    }
+    if (!self.__remote_next_css__[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
         }
       });
+      const elements = [];
+      let node = nextCss.previousSibling;
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
+        node = nextCss.previousSibling;
+      }
+      self.__remote_next_css__[bundle] = elements;
     }
+    if (styleContainer) {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
   }
-  if (loadChunkLists.length > 0) {
-    await Promise.all(loadChunkLists);
-  }
+  return { Component: null, App: null };
 }
-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;
-    try {
-      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
-        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
-      }
-      const sharedModule = getSharedModule(bundle ?? "default", moduleId ?? id);
-      if (sharedModule) {
-        return sharedModule;
-      }
-      if (bundle && moduleId) {
-        return handleTurbopackModule(bundle, moduleId, id);
+
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, 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 ?? {}
+    );
+    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));
       }
-      throw new Error(`Module "${id}" not found.`);
-    } catch (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
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
           }
-        );
-      }
-      try {
-        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 }
-        );
+          webpackBundle.m[id] = (module2) => {
+            module2.exports = value;
+          };
+        }
       }
     }
-  };
-}
-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);
-  const modules = self[`TURBOPACK_${bundleKey}`];
-  let sharedModuleInitializer = null;
-  if (modules && Array.isArray(modules)) {
-    const allModules = modules.flat();
-    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
-      if (typeof idOrFunc !== "function") {
-        return false;
+}
+
+// src/shared/client/rsc.ts
+var import_web_streams_polyfill = require("web-streams-polyfill");
+function fixPayload(payload) {
+  if (Array.isArray(payload)) {
+    if (payload[0] === "$") {
+      fixPayload(payload[3]);
+      if (payload.length === 4) {
+        payload.push(null, null, 1);
       }
-      const funcCode = idOrFunc.toString();
-      return /[a-z]\.TURBOPACK_REMOTE_SHARED/.test(funcCode);
-    });
-    if (sharedModuleInitializerIndex > 0) {
-      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
-      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
-      const { sharedModuleId } = /\.TURBOPACK_REMOTE_SHARED=await e\.A\((?<sharedModuleId>[0-9]+)\)/.exec(
-        sharedModuleInitializerCode
-      )?.groups ?? {};
-      if (sharedModuleId) {
-        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
-          bundle,
-          sharedModuleId,
-          `[${bundle}] ${sharedModuleInitializerId}`
-        );
-        sharedModuleInitializer = sharedModuleInitializerInstance;
+    } else {
+      for (const item of payload) {
+        fixPayload(item);
       }
     }
-    if (sharedModuleInitializer) {
-      const { shared } = await sharedModuleInitializer;
-      const sharedModuleIds = Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
-        const { asyncSharedModuleId } = /e\.A\((?<asyncSharedModuleId>[0-9]+)\)/.exec(value.toString())?.groups ?? {};
-        if (asyncSharedModuleId) {
-          const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
-          let asyncSharedModule;
-          const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
-          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 } = /e=>{e\.v\(e=>Promise\.resolve\(\)\.then\(\(\)=>e\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
-              asyncSharedModuleCode
-            )?.groups ?? /e=>{e\.v\(t=>Promise\.all\(\["[^"]+"\].map\(t=>e\.l\(t\)\)\)\.then\(\(\)=>t\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
-              asyncSharedModuleCode
-            )?.groups ?? {};
-            acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
-              "__remote_shared_module_",
-              ""
-            );
-          }
-        }
-        return acc;
-      }, {});
-      return Promise.all(
-        Object.entries(sharedModuleIds).map(async ([id, module2]) => {
-          if (self.__remote_shared_modules__?.[bundle]) {
-            if (hostShared[module2]) {
-              self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
-            }
-          }
-        })
-      );
+  } else if (typeof payload === "object" && payload !== null) {
+    for (const key in payload) {
+      fixPayload(payload[key]);
     }
   }
-  return Promise.all(
-    Object.entries(remoteShared).map(async ([id, module2]) => {
-      if (self.__remote_shared_modules__?.[bundle]) {
-        if (hostShared[module2]) {
-          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module2](bundle);
+}
+function createRSCStream(rscName, data) {
+  return new import_web_streams_polyfill.ReadableStream({
+    type: "bytes",
+    start(controller) {
+      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 allChunks = (self[rscName] ?? [`0:[null]
+`]).join("");
+      self[rscName] = null;
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
+            controller.enqueue(encoder.encode(`${reconstruct}
+`));
+          } else {
+            controller.enqueue(encoder.encode(`${chunk}
+`));
+          }
         } else {
-          console.error(`Shared module "${module2}" not found for "${bundle}".`);
+          controller.enqueue(encoder.encode(`${chunk}
+`));
         }
-      }
+      });
+      controller.close();
+    }
+  });
+}
+
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  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\/\[.+\](?<whitespace>%20| )/, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new RemoteComponentsError(
+              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
     })
   );
 }
-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;
+
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
 }
-function handleTurbopackModule(bundle, moduleId, id) {
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/shared/client/const.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
   const self = globalThis;
-  const bundleKey = getBundleKey(bundle);
-  const modules = self[`TURBOPACK_${bundleKey}`];
-  let moduleInit;
-  const allModules = modules?.flat() ?? [];
-  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
-    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
-    let moduleIdIndex = allModules.indexOf(normalizedId);
-    if (moduleIdIndex === -1) {
-      moduleIdIndex = allModules.findIndex(
-        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
-      );
+  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__;
     }
-    if (moduleIdIndex !== -1) {
-      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
-        moduleIdIndex++;
-      }
-      moduleInit = allModules[moduleIdIndex];
+    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    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";
     }
-  } else {
-    moduleInit = allModules.find(
-      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
-    )?.[moduleId];
-  }
-  const exports = {};
-  const moduleExports = { exports };
-  if (!self.__remote_components_turbopack_modules__) {
-    self.__remote_components_turbopack_modules__ = {};
   }
-  if (!self.__remote_components_turbopack_modules__[bundle]) {
-    self.__remote_components_turbopack_modules__[bundle] = {};
-  }
-  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
-    return self.__remote_components_turbopack_modules__[bundle][moduleId];
-  }
-  if (typeof moduleInit !== "function") {
-    throw new Error(
-      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+  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);
+      })
     );
   }
-  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
-  if (!self.__remote_components_turbopack_global__) {
-    self.__remote_components_turbopack_global__ = {};
-  }
-  if (!self.__remote_components_turbopack_global__[bundle]) {
-    self.__remote_components_turbopack_global__[bundle] = {};
-  }
-  moduleInit(
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
     {
-      // HMR not implemented for Remote Components
-      k: {
-        register() {
-        },
-        registerExports() {
-        },
-        signature() {
-          return (fn) => {
-            return fn;
-          };
-        }
-      },
-      // esm
-      s(bindings, esmId) {
-        let mod = exports;
-        if (typeof esmId === "string" || typeof esmId === "number") {
-          if (!self.__remote_components_turbopack_modules__) {
-            self.__remote_components_turbopack_modules__ = {};
-          }
-          if (!self.__remote_components_turbopack_modules__[bundle]) {
-            self.__remote_components_turbopack_modules__[bundle] = {};
-          }
-          if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
-            self.__remote_components_turbopack_modules__[bundle][esmId] = {};
-          }
-          mod = self.__remote_components_turbopack_modules__[bundle][esmId];
-        }
-        Object.defineProperty(mod, "__esModule", { value: true });
-        if (Array.isArray(bindings)) {
-          let i = 0;
-          while (i < bindings.length) {
-            const propName = bindings[i++];
-            const tagOrFunc = bindings[i++];
-            if (typeof tagOrFunc === "number") {
-              Object.defineProperty(mod, propName, {
-                value: bindings[i++],
-                enumerable: true,
-                writable: false
-              });
-            } else {
-              const getterFn = tagOrFunc;
-              if (typeof bindings[i] === "function") {
-                const setterFn = bindings[i++];
-                Object.defineProperty(mod, propName, {
-                  get: getterFn,
-                  set: setterFn,
-                  enumerable: true
-                });
-              } else {
-                Object.defineProperty(mod, propName, {
-                  get: getterFn,
-                  enumerable: true
-                });
-              }
-            }
-          }
-        }
-      },
-      // import
-      i(importId) {
-        let mod;
-        if (typeof importId === "string") {
-          const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
-            importId
-          )?.groups ?? {};
-          const normalizedId = importId.replace(
-            /\s+<export(?<specifier>.*)>$/,
-            ""
-          );
-          mod = self.__webpack_require__?.(
-            `[${bundle}] ${normalizedId}`
-          );
-          if (exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
-            if (exportSource === "*") {
-              mod[exportName] = mod;
-            } else {
-              mod[exportName] = mod[exportSource];
-            }
-          }
-        } else {
-          mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
-        }
-        if (typeof mod !== "object") {
-          mod = { default: mod };
-        } else if (!("default" in mod) && // eslint-disable-next-line @typescript-eslint/no-base-to-string
-        mod.toString() !== "[object Module]") {
-          try {
-            mod.default = mod;
-          } catch {
-          }
-        }
-        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;
+      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
+    },
+    remoteShared
+  );
+}
+function createChunkLoader(runtime) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    const self = globalThis;
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    if (remoteRuntime === RUNTIME_WEBPACK) {
+      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")) {
+      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];
+    }
+    self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
+      fetch(url).then((res) => res.text()).then((code) => {
+        if (code.includes("globalThis.TURBOPACK")) {
+          return handleTurbopackChunk(code, bundle ?? "", url);
         }
-      },
-      // 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}`)
+      }).then(resolve).catch(reject);
+    });
+    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  };
+}
+async function handleTurbopackChunk(code, bundle, url) {
+  if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
+    const preloadLinks = document.querySelectorAll(
+      `link[rel="preload"][href="${new URL(url).pathname}"]`
+    );
+    preloadLinks.forEach((preloadLink) => preloadLink.remove());
+    return;
+  }
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
+    /TURBOPACK_WORKER_LOCATION/g,
+    `TURBOPACK_WORKER_LOCATION_${bundleKey}`
+  ).replace(
+    /TURBOPACK_NEXT_CHUNK_URLS/g,
+    `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`
+  ).replace(
+    /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
+    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
+  ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
+    /\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
+    `//# sourceMappingURL=${new URL(
+      ".",
+      new URL(
+        url,
+        self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin)
+      )
+    ).href}$1$2.js.map`
+  );
+  await new Promise((scriptResolve, scriptReject) => {
+    const blob = new Blob([transformedCode], {
+      type: "application/javascript; charset=UTF-8"
+    });
+    const scriptUrl = URL.createObjectURL(blob);
+    const script = document.createElement("script");
+    script.setAttribute("data-turbopack-src", url);
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptResolve(void 0);
+      script.remove();
+    };
+    script.onerror = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptReject(
+        new RemoteComponentsError(
+          `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
+        )
+      );
+      script.remove();
+    };
+    document.head.appendChild(script);
+  });
+  const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
+  const loadChunkLists = [];
+  while (chunkLists?.length) {
+    const { chunks } = chunkLists.shift() ?? { chunks: [] };
+    if (chunks.length > 0) {
+      chunks.forEach((id) => {
+        const chunkLoadResult = self.__webpack_chunk_load__?.(
+          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
         );
-      },
-      // chunk loader
-      l(url) {
-        const moduleInitIndex = allModules.indexOf(moduleInit);
-        if (moduleInitIndex !== -1) {
-          const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
-          if (scriptIndex !== -1) {
-            const script = allModules[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);
-          }
+        if (chunkLoadResult) {
+          loadChunkLists.push(chunkLoadResult);
         }
-        throw new Error(
-          `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
-        );
-      },
-      // global
-      g: self.__remote_components_turbopack_global__[bundle],
-      m: moduleExports,
-      e: exports
-    },
-    moduleExports,
-    exports
-  );
-  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
-    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
-  }
-  return moduleExports.exports;
-}
-
-// src/shared/client/script-loader.ts
-async function loadScripts(scripts) {
-  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\/\[.+\](?<whitespace>%20| )/, "/_next/"),
-          location.origin
-        ).href;
-        const newScript = document.createElement("script");
-        newScript.onload = () => {
-          resolve();
-        };
-        newScript.onerror = () => {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
-            )
-          );
-        };
-        newScript.src = newSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
       });
-    })
-  );
-}
-
-// src/shared/client/rsc.ts
-var import_web_streams_polyfill = require("web-streams-polyfill");
-function fixPayload(payload) {
-  if (Array.isArray(payload)) {
-    if (payload[0] === "$") {
-      fixPayload(payload[3]);
-      if (payload.length === 4) {
-        payload.push(null, null, 1);
-      }
-    } else {
-      for (const item of payload) {
-        fixPayload(item);
-      }
-    }
-  } else if (typeof payload === "object" && payload !== null) {
-    for (const key in payload) {
-      fixPayload(payload[key]);
     }
   }
+  if (loadChunkLists.length > 0) {
+    await Promise.all(loadChunkLists);
+  }
 }
-function createRSCStream(rscName, data) {
-  return new import_web_streams_polyfill.ReadableStream({
-    type: "bytes",
-    start(controller) {
-      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}"`));
-            }
-          }
-        });
+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;
+    try {
+      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
       }
-      const allChunks = (self[rscName] ?? [`0:[null]
-`]).join("");
-      self[rscName] = null;
-      allChunks.split("\n").forEach((chunk) => {
-        if (chunk.length > 0) {
-          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
-            chunk
-          )?.groups ?? {};
-          if (payload) {
-            const jsonPayload = JSON.parse(payload);
-            fixPayload(jsonPayload);
-            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
-            controller.enqueue(encoder.encode(`${reconstruct}
-`));
-          } else {
-            controller.enqueue(encoder.encode(`${chunk}
-`));
+      const sharedModule = getSharedModule(bundle ?? "default", moduleId ?? id);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module "${id}" not found.`);
+    } catch (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
           }
-        } else {
-          controller.enqueue(encoder.encode(`${chunk}
-`));
-        }
-      });
-      controller.close();
+        );
+      }
+      try {
+        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 }
+        );
+      }
     }
-  });
+  };
 }
-
-// src/shared/client/component-loader.ts
-async function loadRemoteComponent({
-  url,
-  name,
-  rscName,
-  bundle,
-  route = "/",
-  runtime = "webpack",
-  data,
-  nextData,
-  scripts = [],
-  shared = Promise.resolve({}),
-  remoteShared = {},
-  container
-}) {
-  try {
-    if (runtime === "webpack") {
-      const self = globalThis;
-      if (!self.__DISABLE_WEBPACK_EXEC__) {
-        self.__DISABLE_WEBPACK_EXEC__ = {};
+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);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  let sharedModuleInitializer = null;
+  if (modules && Array.isArray(modules)) {
+    const allModules = modules.flat();
+    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
+      if (typeof idOrFunc !== "function") {
+        return false;
+      }
+      const funcCode = idOrFunc.toString();
+      return /[a-z]\.TURBOPACK_REMOTE_SHARED/.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = /\.TURBOPACK_REMOTE_SHARED=await e\.A\((?<sharedModuleId>[0-9]+)\)/.exec(
+        sharedModuleInitializerCode
+      )?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          bundle,
+          sharedModuleId,
+          `[${bundle}] ${sharedModuleInitializerId}`
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
       }
-      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
-      await loadScripts(scripts);
     }
-    const hostShared = await shared;
-    await setupWebpackRuntime(
-      runtime,
-      scripts,
-      url,
-      bundle,
-      hostShared,
-      remoteShared
-    );
-    if (bundle) {
-      const resolve = {
-        "/react/index.js": React,
-        "/react/jsx-dev-runtime.js": JSXDevRuntime,
-        "/react/jsx-runtime.js": JSXRuntime,
-        "/react-dom/index.js": ReactDOM,
-        "/react-dom/client.js": ReactDOMClient,
-        ...Object.entries(remoteShared).reduce(
-          (acc, [key, value]) => {
-            if (typeof hostShared[value] !== "undefined") {
-              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+        const { asyncSharedModuleId } = /e\.A\((?<asyncSharedModuleId>[0-9]+)\)/.exec(value.toString())?.groups ?? {};
+        if (asyncSharedModuleId) {
+          const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+          let asyncSharedModule;
+          const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
+          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 } = /e=>{e\.v\(e=>Promise\.resolve\(\)\.then\(\(\)=>e\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
+              asyncSharedModuleCode
+            )?.groups ?? /e=>{e\.v\(t=>Promise\.all\(\["[^"]+"\].map\(t=>e\.l\(t\)\)\)\.then\(\(\)=>t\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
+              asyncSharedModuleCode
+            )?.groups ?? {};
+            acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+              "__remote_shared_module_",
+              ""
+            );
+          }
+        }
+        return acc;
+      }, {});
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module2]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module2]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
             }
-            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);
         })
       );
-      applySharedModules(bundle, resolve);
-    }
-    if (data.length > 0) {
-      return await loadRSCComponent(rscName ?? name, data);
-    } else if (nextData) {
-      return loadNextPagesComponent(bundle, route, nextData, name, container);
     }
-    return loadRSCComponent(rscName ?? name, [`0:[null]
-`]);
-  } catch (error) {
-    return {
-      component: null,
-      error: new RemoteComponentsError(
-        `Failed to load remote component "${name}".`,
-        { cause: error instanceof Error ? error : new Error(String(error)) }
-      )
-    };
-  }
-}
-async function loadRSCComponent(rscName, data) {
-  let createFromReadableStream;
-  try {
-    const { createFromReadableStream: _createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
-    createFromReadableStream = _createFromReadableStream;
-  } catch {
-    const {
-      default: { createFromReadableStream: _createFromReadableStream }
-    } = await import("react-server-dom-webpack/client.browser");
-    createFromReadableStream = _createFromReadableStream;
-  }
-  if (typeof createFromReadableStream !== "function") {
-    throw new RemoteComponentsError(
-      'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
-    );
   }
-  const stream = createRSCStream(rscName, data);
-  const component = createFromReadableStream(stream);
-  return { component };
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module2]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        if (hostShared[module2]) {
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module2](bundle);
+        } else {
+          console.error(`Shared module "${module2}" not found for "${bundle}".`);
+        }
+      }
+    })
+  );
 }
-function loadNextPagesComponent(bundle, route, nextData, name, container) {
-  const { Component, App } = nextClientPagesLoader(bundle, route, container);
-  if (!Component) {
-    throw new RemoteComponentsError(
-      `Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
-    );
+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;
+    }
   }
-  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
-  return { component };
-}
-
-// src/shared/client/set-attributes-from-props.ts
-var DOMAttributeNames = {
-  acceptCharset: "accept-charset",
-  className: "class",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  noModule: "noModule"
-};
-var ignoreProps = [
-  "onLoad",
-  "onReady",
-  "dangerouslySetInnerHTML",
-  "children",
-  "onError",
-  "strategy",
-  "stylesheets"
-];
-function isBooleanScriptAttribute(attr) {
-  return ["async", "defer", "noModule"].includes(attr);
+  return null;
 }
-function setAttributesFromProps(el, props) {
-  for (const [p, value] of Object.entries(props)) {
-    if (!Object.prototype.hasOwnProperty.call(props, p))
-      continue;
-    if (ignoreProps.includes(p))
-      continue;
-    if (value === void 0) {
-      continue;
-    }
-    const attr = DOMAttributeNames[p] || p.toLowerCase();
-    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
-      el[attr] = Boolean(value);
-    } else {
-      el.setAttribute(attr, String(value));
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  let moduleInit;
+  const allModules = modules?.flat() ?? [];
+  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
+    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
+    let moduleIdIndex = allModules.indexOf(normalizedId);
+    if (moduleIdIndex === -1) {
+      moduleIdIndex = allModules.findIndex(
+        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
+      );
     }
-    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
-      el.setAttribute(attr, "");
-      el.removeAttribute(attr);
+    if (moduleIdIndex !== -1) {
+      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
+        moduleIdIndex++;
+      }
+      moduleInit = allModules[moduleIdIndex];
     }
+  } else {
+    moduleInit = allModules.find(
+      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
+    )?.[moduleId];
   }
-}
-
-// src/shared/client/polyfill.tsx
-var import_jsx_runtime = (
-  // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
-  require("react/jsx-runtime")
-);
-function applyBundleUrlToSrc(bundle, src) {
-  const self = globalThis;
-  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
-    return src;
+  const exports = {};
+  const moduleExports = { exports };
+  if (!self.__remote_components_turbopack_modules__) {
+    self.__remote_components_turbopack_modules__ = {};
   }
-  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
-  if (!path) {
-    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
+  if (!self.__remote_components_turbopack_modules__[bundle]) {
+    self.__remote_components_turbopack_modules__[bundle] = {};
   }
-  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
-}
-function applyBundleUrlToImagePropsSrc(bundle, src) {
-  if (typeof src === "string") {
-    return applyBundleUrlToSrc(bundle, src);
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
+    return self.__remote_components_turbopack_modules__[bundle][moduleId];
   }
-  const propSrc = src;
-  return applyBundleUrlToSrc(bundle, propSrc.src);
-}
-var imageImpl = (bundle) => function RemoteImage({
-  fill: _fill,
-  loader: _loader,
-  quality: _quality,
-  priority: _priority,
-  loading: _loading,
-  placeholder: _placeholder,
-  blurDataURL: _blurDataURL,
-  unoptimized: _unoptimized,
-  overrideSrc: _overrideSrc,
-  src,
-  ...props
-}) {
-  const newSrc = applyBundleUrlToImagePropsSrc(
-    bundle,
-    typeof src === "string" ? src : src.src
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "img",
+  if (typeof moduleInit !== "function") {
+    throw new Error(
+      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+    );
+  }
+  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  if (!self.__remote_components_turbopack_global__) {
+    self.__remote_components_turbopack_global__ = {};
+  }
+  if (!self.__remote_components_turbopack_global__[bundle]) {
+    self.__remote_components_turbopack_global__[bundle] = {};
+  }
+  moduleInit(
     {
-      decoding: "async",
-      style: { color: "transparent" },
-      ...props,
-      src: newSrc,
-      suppressHydrationWarning: true
-    }
-  );
-};
-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 [];
+      // HMR not implemented for Remote Components
+      k: {
+        register() {
+        },
+        registerExports() {
+        },
+        signature() {
+          return (fn) => {
+            return fn;
+          };
+        }
       },
-      __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) {
-          console.warn(
-            "Next.js Link prefetch is not supported in remote components"
-          );
+      // esm
+      s(bindings, esmId) {
+        let mod = exports;
+        if (typeof esmId === "string" || typeof esmId === "number") {
+          if (!self.__remote_components_turbopack_modules__) {
+            self.__remote_components_turbopack_modules__ = {};
+          }
+          if (!self.__remote_components_turbopack_modules__[bundle]) {
+            self.__remote_components_turbopack_modules__[bundle] = {};
+          }
+          if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
+            self.__remote_components_turbopack_modules__[bundle][esmId] = {};
+          }
+          mod = self.__remote_components_turbopack_modules__[bundle][esmId];
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "a",
-          {
-            ...props,
-            href: props.href,
-            onClick: (e) => {
-              e.preventDefault();
-              let preventDefaulted = false;
-              e.preventDefault = () => {
-                preventDefaulted = true;
-                e.defaultPrevented = true;
-              };
-              if (typeof props.onClick === "function") {
-                props.onClick(e);
-              }
-              onNavigate?.(e);
-              if (preventDefaulted) {
-                return;
-              }
-              if (replace) {
-                history.replaceState({}, "", props.href);
+        Object.defineProperty(mod, "__esModule", { value: true });
+        if (Array.isArray(bindings)) {
+          let i = 0;
+          while (i < bindings.length) {
+            const propName = bindings[i++];
+            const tagOrFunc = bindings[i++];
+            if (typeof tagOrFunc === "number") {
+              Object.defineProperty(mod, propName, {
+                value: bindings[i++],
+                enumerable: true,
+                writable: false
+              });
+            } else {
+              const getterFn = tagOrFunc;
+              if (typeof bindings[i] === "function") {
+                const setterFn = bindings[i++];
+                Object.defineProperty(mod, propName, {
+                  get: getterFn,
+                  set: setterFn,
+                  enumerable: true
+                });
               } else {
-                history.pushState({}, "", props.href);
+                Object.defineProperty(mod, propName, {
+                  get: getterFn,
+                  enumerable: true
+                });
               }
-            },
-            suppressHydrationWarning: true,
-            children: children ?? null
+            }
           }
-        );
+        }
       },
-      useLinkStatus() {
-        return { pending: false };
+      // import
+      i(importId) {
+        let mod;
+        if (typeof importId === "string") {
+          const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
+            importId
+          )?.groups ?? {};
+          const normalizedId = importId.replace(
+            /\s+<export(?<specifier>.*)>$/,
+            ""
+          );
+          mod = self.__webpack_require__?.(
+            `[${bundle}] ${normalizedId}`
+          );
+          if (exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
+            if (exportSource === "*") {
+              mod[exportName] = mod;
+            } else {
+              mod[exportName] = mod[exportSource];
+            }
+          }
+        } else {
+          mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
+        }
+        if (typeof mod !== "object") {
+          mod = { default: mod };
+        } else if (!("default" in mod) && // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        mod.toString() !== "[object Module]") {
+          try {
+            mod.default = mod;
+          } catch {
+          }
+        }
+        return mod;
       },
-      __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");
+      // require
+      r(requireId) {
+        return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
       },
-      __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) => {
+      // 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}`)
+        );
+      },
+      // chunk loader
+      l(url) {
+        const moduleInitIndex = allModules.indexOf(moduleInit);
+        if (moduleInitIndex !== -1) {
+          const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+          if (scriptIndex !== -1) {
+            const script = allModules[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(
-          "Next.js getImageProps() is not implemented in remote components"
+          `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
         );
       },
-      __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();
+      // global
+      g: self.__remote_components_turbopack_global__[bundle],
+      m: moduleExports,
+      e: exports
+    },
+    moduleExports,
+    exports
+  );
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
+    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  }
+  return moduleExports.exports;
+}
+
+// src/shared/client/component-loader.ts
+async function loadRemoteComponent({
+  url,
+  name,
+  rscName,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = Promise.resolve({}),
+  remoteShared = {},
+  container
+}) {
+  try {
+    if (runtime === "webpack") {
+      const self = globalThis;
+      if (!self.__DISABLE_WEBPACK_EXEC__) {
+        self.__DISABLE_WEBPACK_EXEC__ = {};
+      }
+      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+      await loadScripts(scripts);
+    }
+    const hostShared = await shared;
+    await setupWebpackRuntime(
+      runtime,
+      scripts,
+      url,
+      bundle,
+      hostShared,
+      remoteShared
+    );
+    if (bundle) {
+      const resolve = {
+        "/react/index.js": React,
+        "/react/jsx-dev-runtime.js": JSXDevRuntime,
+        "/react/jsx-runtime.js": JSXRuntime,
+        "/react-dom/index.js": ReactDOM,
+        "/react-dom/client.js": ReactDOMClient,
+        ...Object.entries(remoteShared).reduce(
+          (acc, [key, value]) => {
+            if (typeof hostShared[value] !== "undefined") {
+              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
             }
-          };
-        },
-        __esModule: true
-      })
-    )),
-    "next/dist/build/polyfills/process": () => Promise.resolve({
-      default: {
-        env: {
-          NODE_ENV: "production"
+            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);
+        })
+      );
+      applySharedModules(bundle, resolve);
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(rscName ?? name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name, container);
+    }
+    return loadRSCComponent(rscName ?? name, [`0:[null]
+`]);
+  } catch (error) {
+    return {
+      component: null,
+      error: new RemoteComponentsError(
+        `Failed to load remote component "${name}".`,
+        {
+          cause: error instanceof Error ? error : new Error(String(error))
         }
-      },
-      __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;
+      )
+    };
+  }
+}
+async function loadRSCComponent(rscName, data) {
+  let createFromReadableStream;
+  try {
+    const { createFromReadableStream: _createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+    createFromReadableStream = _createFromReadableStream;
+  } catch {
+    const {
+      default: { createFromReadableStream: _createFromReadableStream }
+    } = await import("react-server-dom-webpack/client.browser");
+    createFromReadableStream = _createFromReadableStream;
+  }
+  if (typeof createFromReadableStream !== "function") {
+    throw new RemoteComponentsError(
+      'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
+    );
+  }
+  const stream = createRSCStream(rscName, data);
+  const component = createFromReadableStream(stream);
+  return { component };
+}
+function loadNextPagesComponent(bundle, route, nextData, name, container) {
+  const { Component, App } = nextClientPagesLoader(bundle, route, container);
+  if (!Component) {
+    throw new RemoteComponentsError(
+      `Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
+    );
+  }
+  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
+  return { component };
 }
 
-// src/shared/client/apply-origin.ts
-var tagNames = [
-  "img",
-  "source",
-  "video",
-  "audio",
-  "track",
-  "iframe",
-  "embed",
-  "script",
-  "link"
+// src/shared/client/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
 ];
-function applyOriginToNodes(doc, url) {
-  if (url.origin !== location.origin) {
-    const nodes = doc.querySelectorAll(
-      tagNames.map(
-        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
-      ).join(",")
-    );
-    nodes.forEach((node) => {
-      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
-        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
-      }
-      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
-        node.setAttribute(
-          "href",
-          new URL(node.getAttribute("href") ?? "/", url).href
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
+// src/shared/client/static-loader.ts
+async function loadStaticRemoteComponent(scripts, url) {
+  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 {
+        let src = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
+        if (!src && script.textContent) {
+          const blob = new Blob(
+            [
+              script.textContent.replace(
+                /import\.meta\.url/g,
+                JSON.stringify(url)
+              )
+            ],
+            {
+              type: "text/javascript"
+            }
+          );
+          src = URL.createObjectURL(blob);
+        }
+        const mod = await import(
+          /* @vite-ignore */
+          /* webpackIgnore: true */
+          new URL(src, url).href
         );
-      }
-      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;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("srcset", srcSet);
+        if (src.startsWith("blob:")) {
+          URL.revokeObjectURL(src);
         }
-      }
-      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;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("imagesrcset", srcSet);
+        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) {
+        console.error(
+          new RemoteComponentsError(
+            `Error loading remote component script from "${script.src || url.href}".`,
+            { cause: 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()
+    }
+  );
 }
 
 // src/shared/ssr/fetch-headers.ts
@@ -1242,7 +1342,10 @@ function remoteFetchHeaders(additionalHeaders) {
 }
 
 // src/react/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime2 = (
+  // TODO: remove wrapper div by converting HTML to RSC or React tree
+  require("react/jsx-runtime")
+);
 var import_react2 = require("react");
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -1256,7 +1359,7 @@ function getRemoteComponentHtml(html) {
     return ssrRemoteComponentContainer.innerHTML;
   }
   const remoteComponentContainer = temp.querySelectorAll(
-    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next`
+    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next,remote-component:not([src])`
   );
   if (remoteComponentContainer.length > 0) {
     return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
@@ -1321,6 +1424,10 @@ function RemoteComponent({
   );
   const prevSrcRef = (0, import_react.useRef)(null);
   const componentHydrationHtml = (0, import_react.useRef)(null);
+  const prevIsRemoteComponentRef = (0, import_react.useRef)(false);
+  const prevUrlRef = (0, import_react.useRef)(null);
+  const prevRemoteComponentContainerRef = (0, import_react.useRef)(null);
+  const unmountRef = (0, import_react.useRef)(null);
   (0, import_react.useLayoutEffect)(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -1433,34 +1540,58 @@ function RemoteComponent({
           }
           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^="${name}"]`)) {
+          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.href);
           }
           const component = doc.querySelector(`div[data-bundle][data-route][id^="${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");
+          doc.querySelector("div#__next") ?? // fallback to the remote-component web component
+          doc.querySelector(`remote-component[name="${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 remoteName = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : name);
           const rsc = doc.querySelector(`#${remoteName}_rsc`);
           const bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default";
+          const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
           const metadata = {
             name: remoteName,
             bundle,
-            route: component?.getAttribute("data-route") ?? nextData?.page ?? DEFAULT_ROUTE,
-            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_WEBPACK)
+            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
           };
           const remoteSharedEl = doc.querySelector(
             `#${remoteName}_shared[data-remote-components-shared]`
           );
           const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
           remoteSharedEl?.remove();
-          if (!component || !(rsc || nextData)) {
+          if (!component || !(rsc || nextData || isRemoteComponent)) {
             throw new RemoteComponentsError(
               `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
             );
           }
+          if (prevIsRemoteComponentRef.current) {
+            if (shadowRoot) {
+              shadowRoot.innerHTML = "";
+            }
+            const self = globalThis;
+            const prevUrl = prevUrlRef.current;
+            if (prevUrl && self.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+              const unmountPromises = Promise.all(
+                Array.from(unmountRef.current ?? []).map(
+                  async (unmount) => unmount(
+                    shadowRoot ?? prevRemoteComponentContainerRef.current
+                  )
+                )
+              );
+              unmountRef.current = null;
+              await unmountPromises;
+            }
+          }
+          prevIsRemoteComponentRef.current = isRemoteComponent;
+          prevUrlRef.current = url;
           applyOriginToNodes(doc, url);
           const links = Array.from(
             doc.querySelectorAll("link[href]")
@@ -1475,64 +1606,64 @@ function RemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = doc.querySelectorAll(
-            "script[src],script[data-src]"
-          );
-          const inlineScripts = doc.querySelectorAll(
+          const scripts = (isRemoteComponent ? component : doc).querySelectorAll("script[src],script[data-src]");
+          const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
-          const self = globalThis;
-          const prevNextScripts = self.__next_s;
-          const nextScripts = [];
-          self.__next_s = nextScripts;
-          await Promise.all(
-            Array.from(inlineScripts).filter(
-              (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
-                "data-remote-components-shared"
-              ) === "string")
-            ).map((script) => {
-              return new Promise((resolve) => {
-                if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
-                  if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
-                    const newScript = document.createElement("script");
-                    const blob = new Blob([script.textContent], {
-                      type: "application/javascript"
-                    });
-                    const blobUrl = URL.createObjectURL(blob);
-                    newScript.onload = () => {
+          if (!isRemoteComponent) {
+            const self = globalThis;
+            const prevNextScripts = self.__next_s;
+            const nextScripts = [];
+            self.__next_s = nextScripts;
+            await Promise.all(
+              Array.from(inlineScripts).filter(
+                (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
+                  "data-remote-components-shared"
+                ) === "string")
+              ).map((script) => {
+                return new Promise((resolve) => {
+                  if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
+                    if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
+                      const newScript = document.createElement("script");
+                      const blob = new Blob([script.textContent], {
+                        type: "application/javascript"
+                      });
+                      const blobUrl = URL.createObjectURL(blob);
+                      newScript.onload = () => {
+                        resolve(void 0);
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                      };
+                      newScript.onerror = () => {
+                        URL.revokeObjectURL(blobUrl);
+                        newScript.remove();
+                        resolve(void 0);
+                      };
+                      newScript.src = blobUrl;
+                      document.body.appendChild(newScript);
+                    } else {
                       resolve(void 0);
-                      URL.revokeObjectURL(blobUrl);
-                      newScript.remove();
-                    };
-                    newScript.onerror = () => {
-                      URL.revokeObjectURL(blobUrl);
-                      newScript.remove();
-                      resolve(void 0);
-                    };
-                    newScript.src = blobUrl;
-                    document.body.appendChild(newScript);
+                      document.body.appendChild(script);
+                    }
                   } else {
                     resolve(void 0);
-                    document.body.appendChild(script);
                   }
-                } else {
-                  resolve(void 0);
-                }
-              });
-            })
-          );
-          nextScripts.forEach(([scriptSrc, props]) => {
-            const script = document.createElement("script");
-            if (scriptSrc) {
-              script.src = scriptSrc;
-            }
-            if (typeof props.children === "string") {
-              script.textContent = props.children;
-            }
-            setAttributesFromProps(script, props);
-            document.head.appendChild(script);
-          });
-          self.__next_s = prevNextScripts;
+                });
+              })
+            );
+            nextScripts.forEach(([scriptSrc, props]) => {
+              const script = document.createElement("script");
+              if (scriptSrc) {
+                script.src = scriptSrc;
+              }
+              if (typeof props.children === "string") {
+                script.textContent = props.children;
+              }
+              setAttributesFromProps(script, props);
+              document.head.appendChild(script);
+            });
+            self.__next_s = prevNextScripts;
+          }
           let rscName;
           if (rsc) {
             rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;
@@ -1549,7 +1680,11 @@ function RemoteComponent({
             url: url.href,
             data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
           };
-          componentHydrationHtml.current = Array.from(doc.querySelectorAll("link,style")).map((link) => link.outerHTML).join("") + component.innerHTML;
+          componentHydrationHtml.current = `${Array.from(
+            doc.querySelectorAll("link,style")
+          ).map((link) => link.outerHTML).join(
+            ""
+          )}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
           const userShared = await shared;
           if ("__remote_components_missing_shared__" in userShared) {
             userShared.__remote_components_missing_shared__().catch((e) => {
@@ -1560,48 +1695,88 @@ function RemoteComponent({
               remoteShared.__remote_components_missing_shared__
             );
           }
-          const result = await loadRemoteComponent({
-            url: new URL(url, location.origin),
-            name: remoteName,
-            rscName,
-            bundle,
-            route: metadata.route,
-            runtime: metadata.runtime,
-            data: newData.data,
-            nextData,
-            scripts: Array.from(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(
-                  `${prefix ?? ""}${path}`.replace(
-                    /(?<char>[^:])(?<double>\/\/)/g,
-                    "$1/"
-                  ),
-                  url
-                ).href
-              };
-            }),
-            shared: {
-              ...sharedPolyfills(userShared),
-              ...userShared
-            },
-            remoteShared,
-            container: shadowRoot
-          });
-          if (rsc) {
-            rsc.remove();
-          }
-          setData(newData);
-          if (result.error) {
-            setRemoteComponent(result.error);
+          if (isRemoteComponent) {
+            setData(newData);
+            if (shadowRoot) {
+              let shadowRootHtml = component.innerHTML;
+              if (reset) {
+                shadowRootHtml = `<style data-remote-components-reset="">:host { all: initial; }</style>${shadowRootHtml}`;
+              }
+              shadowRoot.innerHTML = shadowRootHtml;
+              setRemoteComponent(null);
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(shadowRoot.querySelectorAll("script")),
+                url
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+              );
+            } else if (isolate === false) {
+              setRemoteComponent(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: { __html: component.innerHTML },
+                    ref: prevRemoteComponentContainerRef
+                  }
+                )
+              );
+              const { mount, unmount } = await loadStaticRemoteComponent(
+                Array.from(component.querySelectorAll("script")),
+                url
+              );
+              unmountRef.current = unmount;
+              await Promise.all(
+                Array.from(mount).map(
+                  (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
+                )
+              );
+            }
           } else {
-            setRemoteComponent(result.component);
+            const result = await loadRemoteComponent({
+              url: new URL(url, location.origin),
+              name: remoteName,
+              rscName,
+              bundle,
+              route: metadata.route,
+              runtime: metadata.runtime,
+              data: newData.data,
+              nextData,
+              scripts: Array.from(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(
+                    `${prefix ?? ""}${path}`.replace(
+                      /(?<char>[^:])(?<double>\/\/)/g,
+                      "$1/"
+                    ),
+                    url
+                  ).href
+                };
+              }),
+              shared: {
+                ...sharedPolyfills(userShared),
+                ...userShared
+              },
+              remoteShared,
+              container: shadowRoot
+            });
+            if (rsc) {
+              rsc.remove();
+            }
+            setData(newData);
+            if (result.error) {
+              setRemoteComponent(result.error);
+            } else {
+              setRemoteComponent(result.component);
+            }
           }
         } catch (error) {
           setRemoteComponent(error);
@@ -1616,7 +1791,8 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders
+    additionalHeaders,
+    reset
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -1625,7 +1801,7 @@ function RemoteComponent({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
-    runtime: data?.runtime || RUNTIME_WEBPACK
+    runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react2.createElement)(
@@ -1644,6 +1820,24 @@ function RemoteComponent({
   if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
     shadowRoot.innerHTML = componentHydrationHtml.current;
     componentHydrationHtml.current = null;
+    if (prevIsRemoteComponentRef.current) {
+      loadStaticRemoteComponent(
+        Array.from(shadowRoot.querySelectorAll("script")),
+        url
+      ).then(({ mount }) => {
+        return Promise.all(
+          Array.from(mount).map((mountFn) => mountFn(shadowRoot))
+        );
+      }).catch((e) => {
+        const error = new RemoteComponentsError(
+          `Error mounting remote component from "${url.href}"`,
+          {
+            cause: e
+          }
+        );
+        setRemoteComponent(error);
+      });
+    }
   }
   if (isolate !== false) {
     const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");