remote-components 0.0.42 → 0.0.44

package/dist/react/index.js

@@ -1,33 +1,1517 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createElement } from "react";
+// src/react/index.tsx
 import {
   startTransition,
   useEffect,
-  useLayoutEffect,
+  useId,
+  useLayoutEffect as useLayoutEffect2,
   useMemo,
-  useRef,
-  useState
+  useRef as useRef2,
+  useState as useState2
 } from "react";
 import { createPortal } from "react-dom";
-import { applyOriginToNodes } from "#internal/shared/client/apply-origin";
-import { sharedPolyfills } from "#internal/shared/client/polyfill";
-import {
-  DEFAULT_ROUTE,
-  loadRemoteComponent,
-  loadStaticRemoteComponent,
-  REMOTE_COMPONENT_REGEX,
-  RemoteComponentsError,
-  RUNTIME_SCRIPT,
-  RUNTIME_WEBPACK,
-  setAttributesFromProps
-} from "#internal/shared/client/remote-component";
-import {
-  failedToFetchRemoteComponentError,
-  multipleRemoteComponentsError
-} from "#internal/shared/error";
-import { remoteFetchHeaders } from "#internal/shared/ssr/fetch-headers";
-import { getClientOrServerUrl } from "#internal/shared/ssr/get-client-or-server-url";
-import { attrToProp, escapeString } from "#internal/shared/utils";
+
+// 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(",")
+    );
+    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
+        );
+      }
+      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 (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);
+        }
+      }
+    });
+  }
+}
+
+// src/shared/client/polyfill.tsx
+import { jsx } from "react/jsx-runtime";
+function applyBundleUrlToSrc(bundle, src) {
+  const self = globalThis;
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return src;
+  }
+  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
+  }
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
+}
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
+  }
+  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 (
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        decoding: "async",
+        style: { color: "transparent" },
+        ...props,
+        src: newSrc,
+        suppressHydrationWarning: true
+      }
+    )
+  );
+};
+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"
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+      default: () => {
+        throw new Error("Next.js <Form> component not implemented");
+      },
+      __esModule: true
+    })),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+      // TODO: implement <Script> component for non-Next.js host applications
+      // do not throw an error for now
+      default: () => null,
+      __esModule: true
+    })),
+    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared?.["next/router"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
+          };
+        },
+        __esModule: true
+      })
+    )),
+    "next/dist/build/polyfills/process": () => Promise.resolve({
+      default: {
+        env: {
+          NODE_ENV: "production"
+        }
+      },
+      __esModule: true
+    })
+  };
+  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
+  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
+  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
+  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/script"] = polyfill["next/dist/client/script"];
+  return polyfill;
+}
+
+// src/shared/error.ts
+var RemoteComponentsError = class extends Error {
+  code = "REMOTE_COMPONENTS_ERROR";
+  constructor(message, options) {
+    super(message, options);
+    this.name = "RemoteComponentsError";
+  }
+};
+function multipleRemoteComponentsError(url) {
+  return new RemoteComponentsError(
+    `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
+  );
+}
+function failedToFetchRemoteComponentError(url, { status, statusText }, help = "Is the URL correct and accessible?") {
+  return new RemoteComponentsError(
+    `Failed to fetch Remote Component from "${url}". ${help}`,
+    { cause: new Error(`${status} ${statusText}`) }
+  );
+}
+
+// src/shared/client/component-loader.ts
+import * as React from "react";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
+import * as JSXRuntime from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+
+// src/shared/utils/logger.ts
+var PREFIX = "remote-components";
+var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
+function logDebug(location2, message) {
+  if (DEBUG) {
+    console.debug(`[${PREFIX}:${location2}]: ${message}`);
+  }
+}
+function logWarn(location2, message) {
+  console.warn(`[${PREFIX}:${location2}]: ${message}`);
+}
+
+// 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 };
+  }
+  return { Component: null, App: null };
+}
+
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  logDebug(
+    "SharedModules",
+    `applySharedModules called for bundle: "${bundle}"`
+  );
+  logDebug(
+    "SharedModules",
+    `Shared modules to resolve: ${Object.keys(resolve)}`
+  );
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    logDebug(
+      "SharedModules",
+      `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      let ids = modulePaths.filter((p) => p === key);
+      if (ids.length === 0) {
+        ids = modulePaths.filter((p) => p.includes(key));
+      }
+      if (ids.length === 0) {
+        logDebug(
+          "SharedModules",
+          `No matching module path found for shared module "${key}"`
+        );
+      }
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            const mappedId = `${self.__remote_webpack_module_map__[bundle][id]}`;
+            logDebug(
+              "SharedModules",
+              `Mapped module id: "${id}" -> "${mappedId}"`
+            );
+            id = mappedId;
+          }
+          webpackBundle.m[id] = (module) => {
+            module.exports = value;
+          };
+        } else {
+          logWarn(
+            "SharedModules",
+            `webpackBundle.m is not available for bundle "${bundle}"`
+          );
+        }
+      }
+    }
+  } else {
+    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
+    );
+  }
+}
+
+// src/shared/client/rsc.ts
+import { ReadableStream } from "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]);
+    }
+  }
+}
+function createRSCStream(rscName, data) {
+  return new 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 {
+          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);
+      });
+    })
+  );
+}
+
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/shared/client/const.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/shared/client/chunk-loader.ts
+function createChunkLoader(runtime) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
+    const self = globalThis;
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    logDebug(
+      "ChunkLoader",
+      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
+    );
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
+    if (remoteRuntime === RUNTIME_WEBPACK) {
+      logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
+      return Promise.resolve(void 0);
+    }
+    const url = new URL(
+      path ? `${prefix ?? ""}${path}`.replace(
+        /(?<char>[^:])(?<double>\/\/)/g,
+        "$1/"
+      ) : "/",
+      self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
+    ).href;
+    if (url.endsWith(".css")) {
+      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
+      return;
+    }
+    if (!self.__remote_components_turbopack_chunk_loader_promise__) {
+      self.__remote_components_turbopack_chunk_loader_promise__ = {};
+    }
+    if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
+      logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
+      return self.__remote_components_turbopack_chunk_loader_promise__[url];
+    }
+    logDebug("ChunkLoader", `Fetching chunk from: "${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);
+        }
+      }).then(resolve).catch(reject);
+    });
+    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  };
+}
+async function handleTurbopackChunk(code, bundle, url) {
+  logDebug(
+    "ChunkLoader",
+    `Handling Turbopack chunk - bundle: "${bundle}", url: "${url}"`
+  );
+  if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
+    logDebug("ChunkLoader", `Skipping worker chunk: "${url}"`);
+    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);
+  logDebug("ChunkLoader", `Bundle key: "${bundleKey}"`);
+  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`
+  );
+  logDebug("ChunkLoader", `Creating blob script for: "${url}"`);
+  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`];
+  logDebug(
+    "ChunkLoader",
+    `Processing chunk lists for bundle "${bundle}": ${chunkLists?.length ?? 0} lists`
+  );
+  const loadChunkLists = [];
+  while (chunkLists?.length) {
+    const { chunks } = chunkLists.shift() ?? { chunks: [] };
+    if (chunks.length > 0) {
+      logDebug(
+        "ChunkLoader",
+        `Loading ${chunks.length} additional chunks for bundle "${bundle}": [${chunks.join(", ")}]`
+      );
+      chunks.forEach((id) => {
+        const chunkLoadResult = self.__webpack_chunk_load__?.(
+          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
+        );
+        if (chunkLoadResult) {
+          loadChunkLists.push(chunkLoadResult);
+        }
+      });
+    }
+  }
+  if (loadChunkLists.length > 0) {
+    logDebug(
+      "ChunkLoader",
+      `Waiting for ${loadChunkLists.length} additional chunks to load`
+    );
+    await Promise.all(loadChunkLists);
+  }
+}
+
+// src/shared/client/turbopack-module.ts
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  const moduleInit = findModuleInit(modules, 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}`
+    );
+  }
+  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] = {};
+  }
+  const allModules = modules?.flat() ?? [];
+  moduleInit(
+    createTurbopackContext(
+      bundle,
+      exports,
+      moduleExports,
+      allModules,
+      moduleInit,
+      id,
+      self
+    ),
+    moduleExports,
+    exports
+  );
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
+    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  }
+  return moduleExports.exports;
+}
+function findModuleInit(modules, moduleId) {
+  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 (moduleIdIndex !== -1) {
+      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
+        moduleIdIndex++;
+      }
+      return allModules[moduleIdIndex];
+    }
+  } else {
+    return allModules.find(
+      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
+    )?.[moduleId];
+  }
+  return void 0;
+}
+function createTurbopackContext(bundle, exports, moduleExports, allModules, moduleInit, id, self) {
+  return {
+    // HMR not implemented for Remote Components
+    k: {
+      register() {
+      },
+      registerExports() {
+      },
+      signature() {
+        return (fn) => fn;
+      }
+    },
+    // ESM exports setup
+    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 (mod && 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 === null) {
+        mod = { default: mod };
+      } else if (!("default" in mod) && 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;
+      }
+    },
+    // 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(
+        `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
+      );
+    },
+    // global object for this bundle
+    g: self.__remote_components_turbopack_global__?.[bundle],
+    m: moduleExports,
+    e: exports
+  };
+}
+
+// src/shared/client/turbopack-patterns.ts
+var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
+var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+
+// src/shared/client/shared-modules.ts
+async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
+  if (!self.__remote_shared_modules__[bundle]) {
+    self.__remote_shared_modules__[bundle] = {};
+  }
+  const bundleKey = getBundleKey(bundle);
+  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 REMOTE_SHARED_MARKER_RE.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          bundle,
+          sharedModuleId,
+          `[${bundle}] ${sharedModuleInitializerId}`
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = extractSharedModuleIds(
+        shared,
+        bundleKey,
+        self
+      );
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module](bundle);
+            }
+          }
+        })
+      );
+    }
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        if (hostShared[module]) {
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module](bundle);
+        } else {
+          console.error(`Shared module "${module}" not found for "${bundle}".`);
+        }
+      }
+    })
+  );
+}
+function extractSharedModuleIds(shared, bundleKey, self) {
+  return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
+    if (asyncSharedModuleId) {
+      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+      let asyncSharedModule;
+      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 } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
+        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+          "__remote_shared_module_",
+          ""
+        );
+      }
+    }
+    return acc;
+  }, {});
+}
+function getSharedModule(bundle, id) {
+  const self = globalThis;
+  for (const [key, value] of Object.entries(
+    self.__remote_shared_modules__?.[bundle] ?? {}
+  )) {
+    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
+      return value;
+    }
+  }
+  return null;
+}
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  if (!self.__remote_bundle_url__) {
+    self.__remote_bundle_url__ = {};
+  }
+  self.__remote_bundle_url__[bundle ?? "default"] = url;
+  self.__webpack_get_script_filename__ = () => null;
+  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
+    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
+      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
+      self.__original_webpack_require__ = self.__webpack_require__;
+    }
+    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_require_type__ = runtime;
+    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+    }
+  }
+  if (runtime === RUNTIME_TURBOPACK) {
+    await Promise.all(
+      scripts.map((script) => {
+        if (script.src) {
+          return self.__webpack_chunk_load__?.(script.src, bundle);
+        }
+        return Promise.resolve(void 0);
+      })
+    );
+  }
+  const coreShared = {
+    react: async () => (await import("react")).default,
+    "react-dom": async () => (await import("react-dom")).default,
+    "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
+    "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
+    "react-dom/client": async () => (await import("react-dom/client")).default,
+    ...shared
+  };
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
+    coreShared,
+    remoteShared
+  );
+}
+function createModuleRequire(runtime) {
+  return (id) => {
+    const self = globalThis;
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
+      bundle: "default",
+      id
+    };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("WebpackAdapter", `remoteRuntime: "${remoteRuntime}"`);
+    try {
+      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+      }
+      const sharedModuleId = moduleId ?? id;
+      const sharedModule = getSharedModule(bundle ?? "default", sharedModuleId);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module "${id}" not found.`);
+    } catch (requireError) {
+      logWarn(
+        "WebpackAdapter",
+        `Module require failed: ${String(requireError)}`
+      );
+      if (typeof self.__original_webpack_require__ !== "function") {
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          {
+            cause: requireError instanceof Error ? requireError : void 0
+          }
+        );
+      }
+      try {
+        logDebug("WebpackAdapter", "Falling back to original webpack require");
+        return self.__original_webpack_require__(id);
+      } catch (originalError) {
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          { cause: originalError instanceof Error ? originalError : void 0 }
+        );
+      }
+    }
+  };
+}
+
+// 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;
+    logDebug(
+      "ComponentLoader",
+      `loadRemoteComponent: bundle="${bundle}", name="${name}"`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Host shared modules available: ${Object.keys(hostShared)}`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
+    );
+    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];
+            } else {
+              logDebug(
+                "ComponentLoader",
+                `Remote requests "${value}" but host doesn't provide it`
+              );
+            }
+            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);
+    } else {
+      logWarn(
+        "ComponentLoader",
+        "No bundle specified, skipping shared module setup"
+      );
+    }
+    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 };
+}
+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/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
+// src/shared/client/static-loader.ts
+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 (src.startsWith("blob:")) {
+          URL.revokeObjectURL(src);
+        }
+        if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
+          if (!self.__remote_script_entrypoint_mount__) {
+            self.__remote_script_entrypoint_mount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_mount__[url.href]) {
+            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_mount__[url.href]?.add(
+            mod.mount || mod.default?.mount || (() => {
+            })
+          );
+        }
+        if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
+          if (!self.__remote_script_entrypoint_unmount__) {
+            self.__remote_script_entrypoint_unmount__ = {};
+          }
+          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
+            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+          }
+          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+            mod.unmount || mod.default?.unmount || (() => {
+            })
+          );
+        }
+        return {
+          mount: mod.mount || mod.default?.mount,
+          unmount: mod.unmount || mod.default?.unmount
+        };
+      } catch (e) {
+        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
+function remoteFetchHeaders() {
+  return {
+    /**
+     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
+     * If the remote component uses vercel deployment protection, ensure the host and remote vercel
+     * projects share a common automation bypass secret, and the shared secret is used as the
+     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.
+     */
+    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
+      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+    } : {},
+    Accept: "text/html"
+  };
+}
+
+// src/shared/ssr/fetch-with-hooks.ts
+async function fetchWithHooks(url, init, options = {}) {
+  const { onRequest, onResponse } = options;
+  let res = await onRequest?.(url, init);
+  if (!res) {
+    res = await fetch(url, init);
+  }
+  const transformedRes = await onResponse?.(url, res);
+  if (transformedRes) {
+    res = transformedRes;
+  }
+  return res;
+}
+
+// src/shared/ssr/get-client-or-server-url.ts
+function getClientOrServerUrl(src, serverFallback) {
+  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
+  if (!src) {
+    return new URL(fallback);
+  }
+  return typeof src === "string" ? new URL(src, fallback) : src;
+}
+
+// src/react/hooks/use-shadow-root.ts
+import { useLayoutEffect, useRef, useState } from "react";
+function useShadowRoot({
+  isolate,
+  mode,
+  keySuffix
+}) {
+  const shadowRootContainerRef = useRef(null);
+  const [shadowRoot, setShadowRoot] = useState(() => {
+    const self = globalThis;
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${keySuffix}"]`
+    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
+    self[shadowRootKey] = null;
+    return ssrShadowRoot;
+  });
+  useLayoutEffect(() => {
+    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+      let shadowRootElement = null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${keySuffix}"]`
+      );
+      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          self[shadowRootKey] = shadowRootElement;
+        } catch {
+        }
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    } else if (isolate === false && shadowRoot) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+      self[shadowRootKey] = null;
+      setShadowRoot(null);
+    }
+  }, [isolate, shadowRoot, mode, keySuffix]);
+  return { shadowRoot, shadowRootContainerRef };
+}
+
+// src/react/utils/parse-remote-html.ts
+var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
     return html;
@@ -47,7 +1531,10 @@ function getRemoteComponentHtml(html) {
   }
   return "";
 }
-const DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
+
+// src/react/index.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
 function RemoteComponent({
   src,
   isolate,
@@ -56,13 +1543,15 @@ function RemoteComponent({
   credentials = "same-origin",
   name: nameProp = "__vercel_remote_component",
   shared = {},
-  additionalHeaders,
   children,
   onBeforeLoad,
   onLoad,
   onError,
-  onChange
+  onChange,
+  onRequest,
+  onResponse
 }) {
+  const instanceId = useId();
   const name = useMemo(() => {
     if (typeof src === "string") {
       const url2 = new URL(
@@ -77,28 +1566,23 @@ function RemoteComponent({
     }
     return nameProp;
   }, [src, nameProp]);
-  const [data, setData] = useState(null);
+  const [data, setData] = useState2(null);
   const url = useMemo(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
-  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}`;
-  const [remoteComponent, setRemoteComponent] = useState(null);
-  const shadowRootContainerRef = useRef(null);
-  const [shadowRoot, setShadowRoot] = useState(() => {
-    const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
-      `[data-remote-component-id="shadowroot_${keySuffix}"]`
-    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
-    self[shadowRootKey] = null;
-    return ssrShadowRoot;
+  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}_${escapeString(instanceId)}`;
+  const [remoteComponent, setRemoteComponent] = useState2(null);
+  const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
+    isolate,
+    mode,
+    keySuffix
   });
-  const htmlRef = useRef(
+  const htmlRef = useRef2(
     typeof document !== "undefined" ? document.querySelector(
       `[data-remote-component-id="shadowroot_${keySuffix}"]`
     )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
   );
-  const endTemplateRef = useRef(null);
-  const childrenRef = useRef(
+  const endTemplateRef = useRef2(null);
+  const childrenRef = useRef2(
     typeof document !== "undefined" ? (() => {
       let el = document.querySelector(`template[id="${name}_start"]`);
       const elements = [];
@@ -111,44 +1595,28 @@ function RemoteComponent({
       return elements;
     })() : []
   );
-  const prevSrcRef = useRef(null);
-  const componentHydrationHtml = useRef(null);
-  const prevIsRemoteComponentRef = useRef(false);
-  const prevUrlRef = useRef(null);
-  const prevRemoteComponentContainerRef = useRef(null);
-  const unmountRef = useRef(null);
-  const prevNameRef = useRef(void 0);
-  useLayoutEffect(() => {
+  const prevSrcRef = useRef2(null);
+  const componentHydrationHtml = useRef2(null);
+  const prevIsRemoteComponentRef = useRef2(false);
+  const prevUrlRef = useRef2(null);
+  const prevRemoteComponentContainerRef = useRef2(null);
+  const unmountRef = useRef2(null);
+  const prevNameRef = useRef2(void 0);
+  useLayoutEffect2(() => {
+    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    return () => {
+      delete globalThis[shadowRootKey];
+    };
+  }, [keySuffix]);
+  useLayoutEffect2(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
         el.remove();
       });
       childrenRef.current = [];
     }
-    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
-      const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-      let shadowRootElement = null;
-      const element = document.querySelector(
-        `[data-remote-component-id="shadowroot_${keySuffix}"]`
-      );
-      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
-      if (!shadowRootElement && element) {
-        try {
-          shadowRootElement = element.attachShadow({ mode });
-          self[shadowRootKey] = shadowRootElement;
-        } catch {
-        }
-      }
-      if (shadowRootElement) {
-        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
-          node.remove();
-        });
-        setShadowRoot(shadowRootElement);
-      }
-    }
-  }, [isolate, shadowRoot, remoteComponent, mode, keySuffix]);
-  useLayoutEffect(() => {
+  }, [remoteComponent]);
+  useLayoutEffect2(() => {
     if (shadowRoot && remoteComponent) {
       const resetStyles = shadowRoot.querySelectorAll(
         "style[data-remote-components-reset]"
@@ -185,10 +1653,13 @@ function RemoteComponent({
           if (!html && src) {
             const fetchInit = {
               method: "GET",
-              headers: remoteFetchHeaders(additionalHeaders),
+              headers: remoteFetchHeaders(),
               credentials
             };
-            const res = await fetch(url, fetchInit);
+            const res = await fetchWithHooks(url, fetchInit, {
+              onRequest,
+              onResponse
+            });
             if (!res.ok) {
               let error = failedToFetchRemoteComponentError(
                 url.href,
@@ -409,7 +1880,7 @@ function RemoteComponent({
             } else if (isolate === false) {
               setRemoteComponent(
                 // TODO: remove wrapper div by converting HTML to RSC or React tree
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2(
                   "div",
                   {
                     dangerouslySetInnerHTML: { __html: component.innerHTML },
@@ -498,25 +1969,26 @@ function RemoteComponent({
     name,
     shared,
     shadowRoot,
-    additionalHeaders,
     reset,
     id,
     onBeforeLoad,
     onLoad,
     onError,
-    onChange
+    onChange,
+    onRequest,
+    onResponse
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
   }
-  const metadataJson = /* @__PURE__ */ jsx("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+  const metadataJson = /* @__PURE__ */ jsx2("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
     runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
-  const resetStyle = reset ? /* @__PURE__ */ jsx("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
-  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement(
+  const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
     "link",
     {
       ...link,
@@ -573,7 +2045,7 @@ function RemoteComponent({
             typeof document === "undefined" ? (
               // eslint-disable-next-line react/no-unknown-property
               /* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
-                typeof document === "undefined" ? /* @__PURE__ */ jsx(
+                typeof document === "undefined" ? /* @__PURE__ */ jsx2(
                   "div",
                   {
                     dangerouslySetInnerHTML: {
@@ -596,11 +2068,11 @@ function RemoteComponent({
             ) : null,
             shadowRoot && remoteComponent ? createPortal(
               /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("template", { id: `${name}_start` }),
+                /* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
                 resetStyle,
                 linksToRender,
                 remoteComponent,
-                /* @__PURE__ */ jsx("template", { id: `${name}_end`, ref: endTemplateRef })
+                /* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
               ] }),
               shadowRoot
             ) : null
@@ -611,10 +2083,10 @@ function RemoteComponent({
   }
   htmlRef.current = null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("template", { id: `${name}_start` }),
+    /* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
     metadataJson,
     componentToRender,
-    /* @__PURE__ */ jsx("template", { id: `${name}_end`, ref: endTemplateRef })
+    /* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
   ] });
 }
 export {