@ecopages/react 0.2.0-alpha.25 → 0.2.0-alpha.27

package/CHANGELOG.md

@@ -10,11 +10,11 @@ All notable changes to `@ecopages/react` are documented here.
 
 - Fixed router-managed React HMR page entries to reload the active route with a cleared persisted-layout cache so shared layout edits apply while the current page stays mounted.
 - Fixed router-managed React HMR handlers to forward the active page HMR entry when reloading the current route through React Router.
-- Fixed React route hydration bundles to resolve the router through the published import-map key and keep rerun navigation on the shared runtime graph.
+- Fixed production React route hydration bundles to inline React runtime dependencies and import the router through the emitted page browser graph instead of a published import-map key.
 - Removed the redundant React page props bootstrap script so route hydration relies on the canonical `__ECO_PAGE_DATA__` payload.
-- Fixed React hydration, Fast Refresh, module loading, doctype handling, island asset reuse, and mixed-renderer boundary resolution across Bun, Vite, and Nitro flows.
+- Fixed React hydration, Fast Refresh, module loading, doctype handling, island asset reuse, and mixed-renderer foreign-subtree resolution across Bun, Vite, and Nitro flows.
 - Restored direct `ReactPlugin` construction so the exported class still accepts the public plugin options shape.
-- Fixed React boundary payload compatibility coverage and removed the plugin/renderer integration-name import cycle.
+- Fixed React foreign-subtree payload compatibility coverage and removed the plugin/renderer integration-name import cycle.
 
 ### Features
 
@@ -23,6 +23,9 @@ All notable changes to `@ecopages/react` are documented here.
 ### Refactoring
 
 - Collapsed React route hydration into one page-owned entry module that re-exports the page component and bundles runtime dependencies in production.
+- Removed the router adapter `importMapKey` contract so both development and production route hydration follow the router bundle import path instead of split import-map and bundle-path models.
+- Replaced the positional `ReactHmrStrategy` constructor with an options object so React HMR wiring can evolve without argument-order churn.
+- Renamed the remaining React runtime alias internals away from `specifierMap` terminology now that import-map-era core seams are gone.
 - Consolidated React bundling, hydration, and runtime state behind shared service boundaries and `window.__ECO_PAGES__`.
 - Moved React plugin option/default resolution into the factory and replaced renderer static config with instance-owned runtime wiring.
 - Extracted React page-payload and locals serialization into a dedicated service to keep the renderer focused on orchestration.
@@ -34,7 +37,7 @@ All notable changes to `@ecopages/react` are documented here.
 
 - Added Vitest browser coverage for the React `dynamic()` utility using React Testing Library.
 - Added browser execution coverage for the generated React hydration bootstrap, including router ownership registration and page-root cleanup.
-- Added renderer-level coverage for the boundary payload compatibility contract, including non-attachable fragment roots.
+- Added renderer-level coverage for the foreign-subtree payload compatibility contract, including non-attachable fragment roots.
 
 ### Documentation
 

package/README.md

@@ -5,7 +5,8 @@ First-class integration for [React 19](https://react.dev/) in Ecopages. This plu
 ## Installation
 
 ```bash
-bun add @ecopages/react
+bun add @ecopages/react react react-dom
+bun add -d @types/react @types/react-dom
 ```
 
 ## Usage
@@ -26,15 +27,15 @@ export default config;
 
 ## Component-Level Islands
 
-By default, Ecopages React acts in island mode:
+For component-level islands, Ecopages React uses this contract:
 
 - SSR output preserves the authored DOM structure (no unnecessary wrapper elements).
 - A stable `data-eco-component-id` attribute is attached to the component SSR root.
-- The client bootstrap mounts the component via `createRoot()` strictly within that root boundary.
+- The island runtime replaces the SSR host with a dedicated client-owned container and mounts it with `createRoot()`. Full-page hydration paths use `hydrateRoot()`.
 
 > [!TIP]
 > **Full React SPA Routing:**
-> If you are building full React pages and want client-side navigation (SPA), use [@ecopages/react-router](../react-router/README.md) and pass it to the react plugin: `reactPlugin({ router: ecoRouter() })`.
+> If you are building full React pages and want client-side navigation (SPA), use [@ecopages/react-router](../../react-router/README.md) and pass it to the react plugin: `reactPlugin({ router: ecoRouter() })`.
 
 ## MDX Support
 
@@ -65,15 +66,15 @@ export default config;
 The React integration can participate in mixed-renderer apps in three ways:
 
 - React can own the page or view directly.
-- React can render nested component boundaries inside pages owned by another integration.
+- React can render nested foreign subtrees inside pages owned by another integration.
 - React can render through non-React page, layout, or document shells when those shell components return strings.
 
-When a non-React render pass enters a React-owned boundary, Ecopages hands that boundary back to the React renderer. When React renders through a non-React shell, that shell must serialize to HTML so React can insert the result into the final response without escaping it.
+When a non-React render pass reaches a React-owned foreign child, Ecopages hands that foreign subtree back to the React renderer. When React renders through a non-React shell, that shell must serialize to HTML so React can insert the result into the final response without escaping it.
 
 Important:
 
 - Components that may render foreign children must declare those children in `config.dependencies.components`.
-- Ecopages validates mixed-renderer ownership from declared dependencies during render preparation. It does not infer every foreign boundary from rendered HTML alone.
+- Ecopages validates mixed-renderer ownership from declared dependencies during render preparation. It does not infer every foreign subtree from rendered HTML alone.
 - React still keeps its own child transport and hydration rules for React-owned subtrees.
 
 ## Server and Client Graph Contract
@@ -115,7 +116,7 @@ The client bundle keeps:
 - The page component render path.
 - Client-safe component dependencies reachable from render.
 - Layout wiring needed for hydration.
-- Router runtime state needed by [@ecopages/react-router](../react-router/README.md) when SPA mode is enabled.
+- Router runtime state needed by [@ecopages/react-router](../../react-router/README.md) when SPA mode is enabled.
 
 The client bundle removes or excludes:
 
@@ -130,7 +131,7 @@ Important:
 
 ### AST Pipeline Order
 
-The browser-bound transform in [packages/integrations/react/src/utils/client-graph-boundary-plugin.ts](packages/integrations/react/src/utils/client-graph-boundary-plugin.ts) follows this order:
+The browser-bound transform in [src/utils/client-graph-boundary-plugin.ts](src/utils/client-graph-boundary-plugin.ts) follows this order:
 
 1. Parse the module and build a reachability view of the client render graph.
 2. Remove imports that are not allowed or not reachable from the client graph.
@@ -165,7 +166,7 @@ The fix is to strip server-only `eco.page(...)` options after import pruning, wh
 
 The browser must not receive arbitrary request-scoped data.
 
-The React renderer in [packages/integrations/react/src/react-renderer.ts](packages/integrations/react/src/react-renderer.ts) serializes only the top-level `locals` keys explicitly declared by `Page.requires`. If a page does not declare `requires`, no `locals` are serialized for hydration.
+The React renderer in [src/react-renderer.ts](src/react-renderer.ts) serializes only the top-level `locals` keys explicitly declared by `Page.requires`. If a page does not declare `requires`, no `locals` are serialized for hydration.
 
 Example:
 
@@ -190,8 +191,8 @@ Hydration must rebuild the same tree the server rendered.
 
 That applies to both:
 
-- non-router hydration scripts in [packages/integrations/react/src/utils/hydration-scripts.ts](packages/integrations/react/src/utils/hydration-scripts.ts)
-- router-backed hydration in [packages/react-router/src/router.ts](packages/react-router/src/router.ts)
+- non-router hydration scripts in [src/utils/hydration-scripts.ts](src/utils/hydration-scripts.ts)
+- router-backed hydration in [../../react-router/src/router.ts](../../react-router/src/router.ts)
 
 If the page render receives `locals` on the server and the layout also depends on those values, the client must pass the same serialized `locals` into the layout during hydration. Otherwise React will detect a mismatch.
 
@@ -199,9 +200,9 @@ If the page render receives `locals` on the server and the layout also depends o
 
 The main regression coverage lives in:
 
-- [packages/integrations/react/src/utils/client-graph-boundary-plugin.test.ts](packages/integrations/react/src/utils/client-graph-boundary-plugin.test.ts): verifies server-only `eco.page(...)` options are stripped from browser bundles.
-- [packages/integrations/react/src/react-renderer.locals.test.ts](packages/integrations/react/src/react-renderer.locals.test.ts): verifies only declared `requires` keys are serialized into hydration payloads.
-- [packages/integrations/react/src/utils/hydration-scripts.test.ts](packages/integrations/react/src/utils/hydration-scripts.test.ts): verifies non-router hydration passes serialized `locals` into layouts.
-- [packages/react-router/test/hmr-reload.test.browser.ts](packages/react-router/test/hmr-reload.test.browser.ts): verifies router-backed layout hydration receives `locals` with `persistLayouts` both enabled and disabled.
+- [src/utils/client-graph-boundary-plugin.test.ts](src/utils/client-graph-boundary-plugin.test.ts): verifies server-only `eco.page(...)` options are stripped from browser bundles.
+- [src/react-renderer.locals.test.ts](src/react-renderer.locals.test.ts): verifies only declared `requires` keys are serialized into hydration payloads.
+- [src/utils/hydration-scripts.test.ts](src/utils/hydration-scripts.test.ts): verifies non-router hydration passes serialized `locals` into layouts.
+- [../../react-router/test/hmr-reload.test.browser.ts](../../react-router/test/hmr-reload.test.browser.ts): verifies router-backed layout hydration receives `locals` with `persistLayouts` both enabled and disabled.
 
 If you change the AST transform or hydration flow, update the corresponding tests in the same change.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.25",
+  "version": "0.2.0-alpha.27",
   "description": "React integration for Ecopages",
   "keywords": [
     "ecopages",
@@ -53,14 +53,14 @@
     "directory": "packages/integrations/react"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.25",
+    "@ecopages/core": "0.2.0-alpha.27",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-alpha.25",
+    "@ecopages/file-system": "0.2.0-alpha.27",
     "@ecopages/logger": "^0.2.3",
     "@mdx-js/esbuild": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",

package/src/react-hmr-strategy.d.ts

@@ -10,6 +10,15 @@ import { HmrStrategy, type HmrAction } from '@ecopages/core/hmr/hmr-strategy';
 import type { DefaultHmrContext } from '@ecopages/core';
 import type { CompileOptions } from '@mdx-js/mdx';
 import type { ReactHmrPageMetadataCache } from './services/react-hmr-page-metadata-cache.js';
+export interface ReactHmrStrategyOptions {
+    context: DefaultHmrContext;
+    pageMetadataCache: ReactHmrPageMetadataCache;
+    runtimeAliasMap: ReadonlyMap<string, string>;
+    mdxCompilerOptions?: CompileOptions;
+    ownedTemplateExtensions?: string[];
+    allTemplateExtensions?: string[];
+    explicitGraphEnabled?: boolean;
+}
 /**
  * Strategy for handling React component HMR updates.
  *
@@ -39,13 +48,16 @@ import type { ReactHmrPageMetadataCache } from './services/react-hmr-page-metada
  * ```typescript
  * const context = {
  *   getWatchedFiles: () => watchedFilesMap,
- *   getSpecifierMap: () => specifierMap,
  *   getDistDir: () => '/path/to/dist/_hmr',
  *   getPlugins: () => [],
  *   getSrcDir: () => '/path/to/src',
  *   getLayoutsDir: () => '/path/to/src/layouts'
  * };
- * const strategy = new ReactHmrStrategy(context);
+ * const strategy = new ReactHmrStrategy({
+ *   context,
+ *   pageMetadataCache,
+ *   runtimeAliasMap
+ * });
  * ```
  */
 export declare class ReactHmrStrategy extends HmrStrategy {
@@ -57,20 +69,13 @@ export declare class ReactHmrStrategy extends HmrStrategy {
     /**
      * Creates a new React HMR strategy instance.
      *
-     * @param context - The HMR context providing access to watched files, plugins, build directories,
-     *                  and the layouts directory for detecting layout file changes that require full
-     *                  page reloads instead of module-level HMR updates.
-     * @param pageMetadataCache - React-only cache of declared browser modules discovered during
-     *                            server rendering. This avoids re-importing unchanged page modules
-     *                            during save-time Fast Refresh rebuilds.
-     * @param mdxCompilerOptions - Optional MDX compiler options for processing .mdx files
-     * @param explicitGraphEnabled - Enables explicit graph mode for React HMR bundling.
-     * In explicit mode, HMR builds omit AST server-only stripping plugins in React paths.
+     * @param options - React HMR runtime services and behavior flags.
      */
     private context;
     private pageMetadataCache;
     private explicitGraphEnabled;
-    constructor(context: DefaultHmrContext, pageMetadataCache: ReactHmrPageMetadataCache, mdxCompilerOptions?: CompileOptions, ownedTemplateExtensions?: string[], allTemplateExtensions?: string[], explicitGraphEnabled?: boolean);
+    private readonly runtimeAliasMap;
+    constructor(options: ReactHmrStrategyOptions);
     /**
      * Returns build plugins for React HMR bundling.
      *

package/src/react-hmr-strategy.js

@@ -7,7 +7,7 @@ import { Logger } from "@ecopages/logger";
 import { injectHmrHandler } from "./utils/hmr-scripts.js";
 import { createClientGraphBoundaryPlugin } from "./utils/client-graph-boundary-plugin.js";
 import { collectPageDeclaredModules, collectPageDeclaredModulesFromModule } from "./utils/declared-modules.js";
-import { getReactClientGraphAllowSpecifiers } from "./utils/react-runtime-specifier-map.js";
+import { getReactClientGraphAllowSpecifiers } from "./utils/react-runtime-alias-map.js";
 import { createUseSyncExternalStoreShimPlugin } from "./utils/use-sync-external-store-shim-plugin.js";
 const appLogger = new Logger("[ReactHmrStrategy]");
 class ReactHmrStrategy extends HmrStrategy {
@@ -21,27 +21,23 @@ class ReactHmrStrategy extends HmrStrategy {
   /**
    * Creates a new React HMR strategy instance.
    *
-   * @param context - The HMR context providing access to watched files, plugins, build directories,
-   *                  and the layouts directory for detecting layout file changes that require full
-   *                  page reloads instead of module-level HMR updates.
-   * @param pageMetadataCache - React-only cache of declared browser modules discovered during
-   *                            server rendering. This avoids re-importing unchanged page modules
-   *                            during save-time Fast Refresh rebuilds.
-   * @param mdxCompilerOptions - Optional MDX compiler options for processing .mdx files
-   * @param explicitGraphEnabled - Enables explicit graph mode for React HMR bundling.
-   * In explicit mode, HMR builds omit AST server-only stripping plugins in React paths.
+   * @param options - React HMR runtime services and behavior flags.
    */
   context;
   pageMetadataCache;
   explicitGraphEnabled;
-  constructor(context, pageMetadataCache, mdxCompilerOptions, ownedTemplateExtensions = [".tsx"], allTemplateExtensions = [".tsx"], explicitGraphEnabled = false) {
+  runtimeAliasMap;
+  constructor(options) {
     super();
-    this.context = context;
-    this.pageMetadataCache = pageMetadataCache;
-    this.explicitGraphEnabled = explicitGraphEnabled;
-    this.mdxCompilerOptions = mdxCompilerOptions;
-    this.ownedTemplateExtensions = new Set(ownedTemplateExtensions);
-    this.allTemplateExtensions = [...allTemplateExtensions].sort((a, b) => b.length - a.length);
+    this.context = options.context;
+    this.pageMetadataCache = options.pageMetadataCache;
+    this.runtimeAliasMap = options.runtimeAliasMap;
+    this.explicitGraphEnabled = options.explicitGraphEnabled ?? false;
+    this.mdxCompilerOptions = options.mdxCompilerOptions;
+    this.ownedTemplateExtensions = new Set(options.ownedTemplateExtensions ?? [".tsx"]);
+    this.allTemplateExtensions = [...options.allTemplateExtensions ?? [".tsx"]].sort(
+      (a, b) => b.length - a.length
+    );
   }
   /**
    * Returns build plugins for React HMR bundling.
@@ -50,9 +46,8 @@ class ReactHmrStrategy extends HmrStrategy {
    * (including `node:*`) from breaking the browser bundle.
    */
   getBuildPlugins(declaredModules) {
-    const runtimeSpecifierMap = this.context.getSpecifierMap();
-    const allowSpecifiers = getReactClientGraphAllowSpecifiers(runtimeSpecifierMap.keys());
-    const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(runtimeSpecifierMap, {
+    const allowSpecifiers = getReactClientGraphAllowSpecifiers(this.runtimeAliasMap.keys());
+    const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(this.runtimeAliasMap, {
       name: "react-hmr-runtime-specifier-alias"
     });
     return [
@@ -287,7 +282,7 @@ class ReactHmrStrategy extends HmrStrategy {
     }
     try {
       let code = await fileSystem.readFile(tempPath);
-      code = rewriteRuntimeSpecifierAliases(code, this.context.getSpecifierMap());
+      code = rewriteRuntimeSpecifierAliases(code, this.runtimeAliasMap);
       code = injectHmrHandler(code);
       await fileSystem.writeAsync(finalPath, code);
       await fileSystem.removeAsync(tempPath).catch(() => {

package/src/react-renderer.d.ts

@@ -115,15 +115,15 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      */
     private renderNonReactShellComponent;
     /**
-     * Renders one React component boundary while preserving already-resolved child HTML.
+     * Renders one React component while preserving already-resolved child HTML.
      *
-     * When nested boundary resolution has already produced child HTML for this
-     * boundary, the child payload must remain raw SSR output rather than a React
+     * When nested foreign-subtree resolution has already produced child HTML for this
+     * component, the child payload must remain raw SSR output rather than a React
      * string child, otherwise React would escape it. This helper renders a unique
      * token through React and swaps that token back to the resolved HTML
      * afterward.
      *
-     * @param input Component render input for the current boundary.
+     * @param input Component render input for the current render step.
      * @param context React-specific render context for stable token generation.
      * @returns Serialized component HTML with resolved child markup preserved.
      */
@@ -131,31 +131,31 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
     /**
      * Restores raw child HTML that was temporarily replaced by a token during React SSR.
      *
-     * Queued boundary resolution may render children through a fragment path before all
+     * Queued foreign-subtree resolution may render children through a fragment path before all
      * nested integration tokens are resolved. When that happens, React must never see
      * the resolved child HTML as a normal string child or it would escape it. The
      * runtime context stores the placeholder token and the raw child HTML so the
-     * fragment render path can reinsert it before foreign boundary tokens are handled.
+     * fragment render path can reinsert it before foreign-subtree tokens are handled.
      */
     private restoreRuntimeChildHtml;
     /**
-     * Renders queued child content through React and then resolves nested boundary tokens.
+     * Renders queued child content through React and then resolves nested foreign-subtree tokens.
      *
      * This path is only used for children that were deferred while React rendered the
-     * parent boundary. It first restores any raw child HTML placeholders owned by the
-     * current runtime context, then asks the shared queued-boundary resolver to swap
+     * parent component. It first restores any raw child HTML placeholders owned by the
+     * current runtime context, then asks the shared queued foreign-subtree resolver to swap
      * foreign integration tokens with their resolved HTML.
      */
     private renderQueuedChildrenToHtml;
     /**
-     * Resolves queued renderer-owned boundary tokens produced during React component rendering.
+     * Resolves queued renderer-owned foreign-subtree tokens produced during React component rendering.
      *
-     * React components can enqueue nested boundaries while the parent HTML is being
+     * React components can enqueue nested foreign subtrees while the parent HTML is being
      * rendered. This delegates to the shared renderer-owned queue resolver but keeps
      * the React-specific child rendering behavior local so raw child HTML and React's
      * fragment rendering semantics stay coordinated.
      */
-    private resolveQueuedBoundaryHtml;
+    private resolveQueuedForeignSubtreeHtml;
     private buildHydrationProps;
     /**
      * Builds the extra document props needed when React renders through a non-React HTML shell.
@@ -165,21 +165,21 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      */
     private buildNonReactDocumentProps;
     /**
-     * Renders a foreign integration component boundary that participates in React composition.
+     * Renders a foreign integration component that participates in React composition.
      *
      * Non-React components must resolve to serialized HTML so React can embed them as
-     * mixed-shell boundaries. Any component-owned dependencies still need to flow
-     * through the shared dependency resolver before queued boundary tokens are finalized.
+     * mixed-shell children. Any component-owned dependencies still need to flow
+     * through the shared dependency resolver before queued foreign-subtree tokens are finalized.
      */
-    private renderForeignComponentBoundary;
+    private renderForeignComponentWithSerializedHtml;
     /**
-     * Renders a React-owned component boundary and attaches island hydration metadata when possible.
+     * Renders a React-owned component and attaches island hydration metadata when possible.
      *
-     * This path keeps React-owned SSR, queued boundary resolution, and optional
+     * This path keeps React-owned SSR, queued foreign-subtree resolution, and optional
      * island hydration wiring together so the public `renderComponent()` method can
      * read as orchestration rather than implementation detail.
      */
-    private renderReactComponentBoundary;
+    private renderReactManagedComponent;
     /**
      * Renders a React component for component-level orchestration.
      *
@@ -188,17 +188,17 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * - When an explicit component instance id is provided, a stable
      *   `data-eco-component-id` attribute is attached so island hydration can target it.
      * - Without an explicit instance id, component renders remain plain SSR output.
-     * - When resolved child HTML is provided, that boundary is treated as a pure SSR
+     * - When resolved child HTML is provided, that foreign subtree is treated as a pure SSR
      *   composition step and does not emit hydration assets for the parent wrapper.
      *
      * This preserves DOM shape for global CSS/layout selectors while keeping a
      * deterministic mount target per component instance.
      */
     renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult>;
-    protected createComponentBoundaryRuntime(options: {
-        boundaryInput: ComponentRenderInput;
+    protected createForeignChildRuntime(options: {
+        renderInput: ComponentRenderInput;
         rendererCache: Map<string, IntegrationRenderer<any>>;
-    }): import("@ecopages/core").ComponentBoundaryRuntime;
+    }): import("@ecopages/core").ForeignChildRuntime;
     /**
      * Checks if the given file path corresponds to an MDX file based on configured extensions.
      * @param filePath - The file path to check
@@ -208,7 +208,9 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
     protected usesIntegrationPageImporter(file: string): boolean;
     protected importIntegrationPageFile(file: string, options?: RouteModuleLoadOptions): Promise<EcoPageFile>;
     protected normalizeImportedPageFile<TPageModule extends EcoPageFile>(file: string, pageModule: TPageModule): TPageModule;
-    buildRouteRenderAssets(pagePath: string): Promise<ProcessedAsset[]>;
+    buildPageBrowserGraph(pagePath: string): Promise<{
+        assets: ProcessedAsset[];
+    }>;
     /**
      * Renders a full route response for the filesystem page pipeline.
      *

package/src/react-renderer.js

@@ -178,8 +178,8 @@ class ReactRenderer extends IntegrationRenderer {
     if (!filePath) {
       return;
     }
-    const hydrationAssets = await this.buildRouteRenderAssets(filePath);
-    this.appendProcessedDependencies(hydrationAssets);
+    const pageBrowserGraph = await this.buildPageBrowserGraph(filePath);
+    this.appendProcessedDependencies(pageBrowserGraph.assets);
   }
   /**
    * Renders a non-React layout or HTML template and enforces that mixed shells
@@ -196,22 +196,22 @@ class ReactRenderer extends IntegrationRenderer {
     throw new ReactRenderError(`${label} must return a string when used as a mixed shell for React pages.`);
   }
   /**
-   * Renders one React component boundary while preserving already-resolved child HTML.
+   * Renders one React component while preserving already-resolved child HTML.
    *
-   * When nested boundary resolution has already produced child HTML for this
-   * boundary, the child payload must remain raw SSR output rather than a React
+   * When nested foreign-subtree resolution has already produced child HTML for this
+   * component, the child payload must remain raw SSR output rather than a React
    * string child, otherwise React would escape it. This helper renders a unique
    * token through React and swaps that token back to the resolved HTML
    * afterward.
    *
-   * @param input Component render input for the current boundary.
+   * @param input Component render input for the current render step.
    * @param context React-specific render context for stable token generation.
    * @returns Serialized component HTML with resolved child markup preserved.
    */
   renderComponentHtml(input, context, runtimeContext) {
     const { react, reactDomServer } = this.getReactRuntimeModules();
     if (input.children === void 0) {
-      return this.normalizeBoundaryArtifactHtml(
+      return this.normalizeUnresolvedMarkerArtifactHtml(
         reactDomServer.renderToString(react.createElement(this.asReactComponent(input.component), input.props))
       );
     }
@@ -224,16 +224,16 @@ class ReactRenderer extends IntegrationRenderer {
     const html = reactDomServer.renderToString(
       react.createElement(this.asReactComponent(input.component), input.props, rawChildrenToken)
     );
-    return this.normalizeBoundaryArtifactHtml(html.split(rawChildrenToken).join(resolvedChildHtml));
+    return this.normalizeUnresolvedMarkerArtifactHtml(html.split(rawChildrenToken).join(resolvedChildHtml));
   }
   /**
    * Restores raw child HTML that was temporarily replaced by a token during React SSR.
    *
-   * Queued boundary resolution may render children through a fragment path before all
+   * Queued foreign-subtree resolution may render children through a fragment path before all
    * nested integration tokens are resolved. When that happens, React must never see
    * the resolved child HTML as a normal string child or it would escape it. The
    * runtime context stores the placeholder token and the raw child HTML so the
-   * fragment render path can reinsert it before foreign boundary tokens are handled.
+   * fragment render path can reinsert it before foreign-subtree tokens are handled.
    */
   restoreRuntimeChildHtml(html, runtimeContext) {
     if (!runtimeContext?.rawChildrenToken || runtimeContext.rawChildrenHtml === void 0) {
@@ -242,11 +242,11 @@ class ReactRenderer extends IntegrationRenderer {
     return html.split(runtimeContext.rawChildrenToken).join(runtimeContext.rawChildrenHtml);
   }
   /**
-   * Renders queued child content through React and then resolves nested boundary tokens.
+   * Renders queued child content through React and then resolves nested foreign-subtree tokens.
    *
    * This path is only used for children that were deferred while React rendered the
-   * parent boundary. It first restores any raw child HTML placeholders owned by the
-   * current runtime context, then asks the shared queued-boundary resolver to swap
+   * parent component. It first restores any raw child HTML placeholders owned by the
+   * current runtime context, then asks the shared queued foreign-subtree resolver to swap
    * foreign integration tokens with their resolved HTML.
    */
   async renderQueuedChildrenToHtml(children, runtimeContext, queuedResolutionsByToken, resolveToken) {
@@ -254,26 +254,34 @@ class ReactRenderer extends IntegrationRenderer {
       return void 0;
     }
     const { react, reactDomServer } = this.getReactRuntimeModules();
-    let html = this.normalizeBoundaryArtifactHtml(
+    let html = this.normalizeUnresolvedMarkerArtifactHtml(
       reactDomServer.renderToString(react.createElement(react.Fragment, null, children))
     );
     html = this.restoreRuntimeChildHtml(html, runtimeContext);
-    html = await this.resolveQueuedBoundaryTokens(html, queuedResolutionsByToken, resolveToken);
+    html = await this.foreignSubtreeExecutionService.resolveQueuedTokens(
+      html,
+      queuedResolutionsByToken,
+      resolveToken
+    );
     return html;
   }
   /**
-   * Resolves queued renderer-owned boundary tokens produced during React component rendering.
+   * Resolves queued renderer-owned foreign-subtree tokens produced during React component rendering.
    *
-   * React components can enqueue nested boundaries while the parent HTML is being
+   * React components can enqueue nested foreign subtrees while the parent HTML is being
    * rendered. This delegates to the shared renderer-owned queue resolver but keeps
    * the React-specific child rendering behavior local so raw child HTML and React's
    * fragment rendering semantics stay coordinated.
    */
-  async resolveQueuedBoundaryHtml(html, runtimeContext) {
-    return this.resolveRendererOwnedQueuedBoundaryHtml({
+  async resolveQueuedForeignSubtreeHtml(html, runtimeContext) {
+    return this.foreignSubtreeExecutionService.resolveQueuedHtml({
+      currentIntegrationName: this.name,
       html,
       runtimeContext,
       queueLabel: "React",
+      getOwningRenderer: (integrationName, rendererCache) => this.getIntegrationRendererForName(integrationName, rendererCache),
+      applyAttributesToFirstElement: (resolvedHtml, attributes) => this.htmlTransformer.applyAttributesToFirstElement(resolvedHtml, attributes),
+      dedupeProcessedAssets: (assets) => this.htmlTransformer.dedupeProcessedAssets(assets),
       renderQueuedChildren: async (children, currentRuntimeContext, queuedResolutionsByToken, resolveToken) => {
         const renderedHtml = await this.renderQueuedChildrenToHtml(
           children,
@@ -310,13 +318,13 @@ class ReactRenderer extends IntegrationRenderer {
     };
   }
   /**
-   * Renders a foreign integration component boundary that participates in React composition.
+   * Renders a foreign integration component that participates in React composition.
    *
    * Non-React components must resolve to serialized HTML so React can embed them as
-   * mixed-shell boundaries. Any component-owned dependencies still need to flow
-   * through the shared dependency resolver before queued boundary tokens are finalized.
+   * mixed-shell children. Any component-owned dependencies still need to flow
+   * through the shared dependency resolver before queued foreign-subtree tokens are finalized.
    */
-  async renderForeignComponentBoundary(input, runtimeContext) {
+  async renderForeignComponentWithSerializedHtml(input, runtimeContext) {
     let props = input.props;
     if (input.children !== void 0) {
       props = {
@@ -332,35 +340,35 @@ class ReactRenderer extends IntegrationRenderer {
     const hasDependencies = Boolean(input.component.config?.dependencies);
     const canResolveAssets = typeof this.assetProcessingService?.processDependencies === "function";
     const assets = hasDependencies && canResolveAssets ? await this.processComponentDependencies([input.component]) : void 0;
-    const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(html, runtimeContext);
+    const queuedForeignSubtreeResolution = await this.resolveQueuedForeignSubtreeHtml(html, runtimeContext);
     const mergedAssets = this.htmlTransformer.dedupeProcessedAssets([
       ...assets ?? [],
-      ...queuedBoundaryResolution.assets
+      ...queuedForeignSubtreeResolution.assets
     ]);
     return {
-      html: queuedBoundaryResolution.html,
+      html: queuedForeignSubtreeResolution.html,
       canAttachAttributes: true,
-      rootTag: this.getRootTagName(queuedBoundaryResolution.html),
+      rootTag: this.getRootTagName(queuedForeignSubtreeResolution.html),
       integrationName: this.name,
       assets: mergedAssets.length > 0 ? mergedAssets : void 0
     };
   }
   /**
-   * Renders a React-owned component boundary and attaches island hydration metadata when possible.
+   * Renders a React-owned component and attaches island hydration metadata when possible.
    *
-   * This path keeps React-owned SSR, queued boundary resolution, and optional
+   * This path keeps React-owned SSR, queued foreign-subtree resolution, and optional
    * island hydration wiring together so the public `renderComponent()` method can
    * read as orchestration rather than implementation detail.
    */
-  async renderReactComponentBoundary(input, runtimeContext) {
+  async renderReactManagedComponent(input, runtimeContext) {
     const componentConfig = input.component.config;
     const context = {
       componentInstanceId: input.integrationContext?.componentInstanceId
     };
     const hasResolvedChildHtml = input.children !== void 0;
     let html = this.renderComponentHtml(input, context, runtimeContext);
-    const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(html, runtimeContext);
-    html = queuedBoundaryResolution.html;
+    const queuedForeignSubtreeResolution = await this.resolveQueuedForeignSubtreeHtml(html, runtimeContext);
+    html = queuedForeignSubtreeResolution.html;
     const canAttachAttributes = hasSingleRootElement(html);
     const rootTag = this.getRootTagName(html);
     const componentFile = componentConfig?.__eco?.file;
@@ -377,7 +385,7 @@ class ReactRenderer extends IntegrationRenderer {
     }
     const mergedAssets = this.htmlTransformer.dedupeProcessedAssets([
       ...assets ?? [],
-      ...queuedBoundaryResolution.assets
+      ...queuedForeignSubtreeResolution.assets
     ]);
     return {
       html,
@@ -396,27 +404,27 @@ class ReactRenderer extends IntegrationRenderer {
    * - When an explicit component instance id is provided, a stable
    *   `data-eco-component-id` attribute is attached so island hydration can target it.
    * - Without an explicit instance id, component renders remain plain SSR output.
-   * - When resolved child HTML is provided, that boundary is treated as a pure SSR
+   * - When resolved child HTML is provided, that foreign subtree is treated as a pure SSR
    *   composition step and does not emit hydration assets for the parent wrapper.
    *
    * This preserves DOM shape for global CSS/layout selectors while keeping a
    * deterministic mount target per component instance.
    */
   async renderComponent(input) {
-    const runtimeContext = this.getQueuedBoundaryRuntime(input);
+    const runtimeContext = this.getQueuedForeignSubtreeResolutionContext(input);
     if (!this.isReactManagedComponent(input.component)) {
-      return this.renderForeignComponentBoundary(input, runtimeContext);
+      return this.renderForeignComponentWithSerializedHtml(input, runtimeContext);
     }
-    return this.renderReactComponentBoundary(input, runtimeContext);
+    return this.renderReactManagedComponent(input, runtimeContext);
   }
-  createComponentBoundaryRuntime(options) {
-    return this.createQueuedBoundaryRuntime({
-      boundaryInput: options.boundaryInput,
+  createForeignChildRuntime(options) {
+    return this.createQueuedForeignSubtreeExecutionRuntime({
+      renderInput: options.renderInput,
       rendererCache: options.rendererCache,
       createRuntimeContext: (integrationContext, rendererCache) => ({
         rendererCache,
         componentInstanceScope: integrationContext.componentInstanceId,
-        nextBoundaryId: 0,
+        nextForeignSubtreeId: 0,
         queuedResolutions: [],
         rawChildrenToken: void 0,
         rawChildrenHtml: void 0
@@ -450,16 +458,16 @@ class ReactRenderer extends IntegrationRenderer {
       config
     };
   }
-  async buildRouteRenderAssets(pagePath) {
+  async buildPageBrowserGraph(pagePath) {
     try {
       const pageModule = await this.importPageFile(pagePath);
       const shouldHydrate = this.explicitGraphEnabled ? true : this.pageModuleService.shouldHydratePage(pageModule);
       if (!shouldHydrate) {
-        return [];
+        return { assets: [] };
       }
       const isMdx = this.pageModuleService.isMdxFile(pagePath);
       const declaredModules = this.pageModuleService.collectPageDeclaredModules(pageModule);
-      const processedAssets = await this.hydrationAssetService.buildRouteRenderAssets(
+      const processedAssets = await this.hydrationAssetService.buildPageBrowserGraphAssets(
         pagePath,
         isMdx,
         declaredModules
@@ -470,9 +478,9 @@ class ReactRenderer extends IntegrationRenderer {
           config: pageModule.config,
           processComponentDependencies: async (components) => await this.processComponentDependencies(components)
         });
-        return [...processedAssets, ...mdxConfigAssets];
+        return { assets: [...processedAssets, ...mdxConfigAssets] };
       }
-      return processedAssets;
+      return { assets: processedAssets };
     } catch (error) {
       if (error instanceof BundleError) {
         console.error("[ecopages] Bundle errors:", error.logs);
@@ -560,16 +568,16 @@ class ReactRenderer extends IntegrationRenderer {
       const metadata = await this.resolveViewMetadata(view, props);
       await this.prepareViewDependencies(view, Layout);
       await this.appendHydrationAssetsForFile(viewConfig?.__eco?.file);
-      const viewRender = await this.renderComponentBoundary({
+      const viewRender = await this.renderComponentWithForeignChildren({
         component: view,
         props: normalizedProps
       });
-      const layoutRender = Layout ? await this.renderComponentBoundary({
+      const layoutRender = Layout ? await this.renderComponentWithForeignChildren({
         component: Layout,
         props: {},
         children: viewRender.html
       }) : void 0;
-      const documentRender = await this.renderComponentBoundary({
+      const documentRender = await this.renderComponentWithForeignChildren({
         component: HtmlTemplate,
         props: {
           metadata,

package/src/react.plugin.d.ts

@@ -1,5 +1,4 @@
-import { IntegrationPlugin } from '@ecopages/core/plugins/integration-plugin';
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import { IntegrationPlugin, type EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import type { HmrStrategy } from '@ecopages/core/hmr/hmr-strategy';
 import type React from 'react';
 import { ReactRenderer } from './react-renderer.js';
@@ -13,7 +12,7 @@ export declare const PLUGIN_NAME = "react";
  * The React plugin class
  * This plugin provides support for React components in Ecopages
  */
-export declare class ReactPlugin extends IntegrationPlugin<React.JSX.Element> {
+export declare class ReactPlugin extends IntegrationPlugin<React.ReactNode> {
     renderer: typeof ReactRenderer;
     private readonly routerAdapter;
     private readonly mdxEnabled;
@@ -66,7 +65,6 @@ export declare class ReactPlugin extends IntegrationPlugin<React.JSX.Element> {
      * @returns ReactHmrStrategy instance for handling React component updates
      */
     getHmrStrategy(): HmrStrategy | undefined;
-    getRuntimeSpecifierMap(): Record<string, string>;
 }
 /**
  * Factory function to create a React plugin instance

package/src/react.plugin.js

@@ -1,4 +1,6 @@
-import { IntegrationPlugin } from "@ecopages/core/plugins/integration-plugin";
+import {
+  IntegrationPlugin
+} from "@ecopages/core/plugins/integration-plugin";
 import { Logger } from "@ecopages/logger";
 import { REACT_PLUGIN_NAME } from "./react.constants.js";
 import { ReactRenderer } from "./react-renderer.js";
@@ -174,17 +176,15 @@ class ReactPlugin extends IntegrationPlugin {
       return void 0;
     }
     const context = this.hmrManager.getDefaultContext();
-    return new ReactHmrStrategy(
+    return new ReactHmrStrategy({
       context,
-      this.hmrPageMetadataCache,
-      this.mdxCompilerOptions,
-      this.extensions,
-      this.appConfig.templatesExt,
-      this.explicitGraphEnabled
-    );
-  }
-  getRuntimeSpecifierMap() {
-    return this.runtimeBundleService.getSpecifierMap();
+      pageMetadataCache: this.hmrPageMetadataCache,
+      runtimeAliasMap: new Map(Object.entries(this.runtimeBundleService.getRuntimeAliasMap("development"))),
+      mdxCompilerOptions: this.mdxCompilerOptions,
+      ownedTemplateExtensions: this.extensions,
+      allTemplateExtensions: this.appConfig.templatesExt,
+      explicitGraphEnabled: this.explicitGraphEnabled
+    });
   }
 }
 function reactPlugin(options) {

package/src/router-adapter.d.ts

@@ -12,11 +12,10 @@
  * const myRouter: ReactRouterAdapter = {
  *   name: 'my-router',
  *   bundle: {
- *     importPath: '@my/router/browser.ts',
+ *     importPath: '@my/router/browser',
  *     outputName: 'my-router',
  *     externals: ['react', 'react-dom'],
  *   },
- *   importMapKey: '@my/router',
  *   components: {
  *     router: 'MyRouter',
  *     pageContent: 'PageOutlet',
@@ -36,39 +35,33 @@ export interface ReactRouterAdapter {
     bundle: {
         /**
          * Node module import path for the browser-compatible entry.
-         * @example '@ecopages/react-router/browser.ts'
+         * @example '@ecopages/react-router/browser'
          */
         importPath: string;
         /**
          * Output filename (without extension).
-         * @example 'react-router-esm'
+         * @example 'my-router'
          */
         outputName: string;
         /**
          * Packages to externalize when bundling.
-         * These should be available through the runtime bare-specifier map.
-         * @example ['react', 'react-dom', 'react/jsx-runtime']
+         * These should stay as bare runtime dependencies for the router bundle.
+         * @example ['react', 'react-dom']
          */
         externals: string[];
     };
-    /**
-     * Bare specifier for the runtime mapping entry.
-     * This is what the hydration script will import from.
-     * @example '@ecopages/react-router'
-     */
-    importMapKey: string;
     /**
      * Component names to import from the router package.
      */
     components: {
         /**
          * The router component that wraps the layout.
-         * @example 'EcoRouter'
+         * @example 'MyRouter'
          */
         router: string;
         /**
          * The component that renders the current page content.
-         * @example 'PageContent'
+         * @example 'PageOutlet'
          */
         pageContent: string;
     };

package/src/services/react-bundle.service.d.ts

@@ -53,5 +53,5 @@ export declare class ReactBundleService {
      * Creates the esbuild plugin that rewrites bare React specifiers
      * to their runtime asset URLs.
      */
-    createRuntimeAliasPlugin(runtimeSpecifierMap: Record<string, string>): import("@ecopages/core/build/build-types").EcoBuildPlugin | null;
+    createRuntimeAliasPlugin(runtimeAliasMap: Record<string, string>): import("@ecopages/core/build/build-types").EcoBuildPlugin | null;
 }

package/src/services/react-bundle.service.js

@@ -1,9 +1,9 @@
 import { createClientGraphBoundaryPlugin } from "../utils/client-graph-boundary-plugin.js";
 import {
-  buildReactRuntimeSpecifierMap,
+  buildReactRuntimeAliasMap,
   getReactClientGraphAllowSpecifiers,
   getReactRuntimeExternalSpecifiers
-} from "../utils/react-runtime-specifier-map.js";
+} from "../utils/react-runtime-alias-map.js";
 import { createUseSyncExternalStoreShimPlugin } from "../utils/use-sync-external-store-shim-plugin.js";
 import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
 import { createForeignJsxOverridePlugin } from "@ecopages/core/plugins/foreign-jsx-override-plugin";
@@ -33,6 +33,7 @@ class ReactBundleService {
    * @returns Bundle options object for the build adapter
    */
   async createBundleOptions(componentName, isMdx, declaredModules, bundleOptions = {}) {
+    const runtimeImports = this.getRuntimeImports();
     const options = {
       mainFields: ["module", "browser", "main"],
       naming: `${componentName}.[ext]`,
@@ -43,7 +44,10 @@ class ReactBundleService {
       }
     };
     if (!bundleOptions.includeRuntime) {
-      options.external = getReactRuntimeExternalSpecifiers();
+      options.external = [
+        ...getReactRuntimeExternalSpecifiers(),
+        ...Object.values(runtimeImports).filter((specifier) => Boolean(specifier))
+      ];
     }
     const graphBoundaryPlugin = createClientGraphBoundaryPlugin({
       absWorkingDir: this.config.rootDir,
@@ -59,11 +63,7 @@ class ReactBundleService {
       name: "react-renderer-use-sync-external-store-shim",
       namespace: "ecopages-react-renderer-shim"
     });
-    const runtimePlugins = bundleOptions.includeRuntime ? [] : [
-      this.createRuntimeAliasPlugin(
-        buildReactRuntimeSpecifierMap(this.getRuntimeImports(), this.config.routerAdapter)
-      )
-    ];
+    const runtimePlugins = bundleOptions.includeRuntime ? [] : [this.createRuntimeAliasPlugin(buildReactRuntimeAliasMap(runtimeImports))];
     if (isMdx && this.config.mdxCompilerOptions) {
       const { createReactMdxLoaderPlugin } = await import("../utils/react-mdx-loader-plugin.js");
       const mdxPlugin = createReactMdxLoaderPlugin(this.config.mdxCompilerOptions);
@@ -88,8 +88,8 @@ class ReactBundleService {
    * Creates the esbuild plugin that rewrites bare React specifiers
    * to their runtime asset URLs.
    */
-  createRuntimeAliasPlugin(runtimeSpecifierMap) {
-    return createRuntimeSpecifierAliasPlugin(runtimeSpecifierMap, { name: "react-runtime-import-alias" });
+  createRuntimeAliasPlugin(runtimeAliasMap) {
+    return createRuntimeSpecifierAliasPlugin(runtimeAliasMap, { name: "react-runtime-import-alias" });
   }
 }
 export {

package/src/services/react-hydration-asset.service.d.ts

@@ -51,7 +51,7 @@ export declare class ReactHydrationAssetService {
      * @param isMdx - Whether the source file is an MDX file
      * @returns One page-owned asset definition for processing
      */
-    createPageDependencies(pagePath: string, componentName: string, importPath: string, bundleOptions: Record<string, unknown>, isDevelopment: boolean, isMdx: boolean): AssetDefinition[];
+    createPageDependencies(pagePath: string, componentName: string, importPath: string, pageModuleUrlExpression: string, bundleOptions: Record<string, unknown>, isDevelopment: boolean, useBrowserRuntimeImports: boolean, isMdx: boolean): AssetDefinition[];
     /**
      * Builds client-side assets for a React component island.
      *
@@ -63,12 +63,12 @@ export declare class ReactHydrationAssetService {
      */
     buildComponentRenderAssets(componentFile: string, config?: EcoComponentConfig): Promise<ProcessedAsset[]>;
     /**
-     * Builds all client-side route assets for a page.
+     * Builds the Page Browser Graph assets for a React page.
      *
      * @param pagePath - Absolute file path of the page
      * @param isMdx - Whether the page is an MDX file
      * @param declaredModules - Explicitly declared browser module specifiers
      * @returns Processed assets for the route
      */
-    buildRouteRenderAssets(pagePath: string, isMdx: boolean, declaredModules: string[]): Promise<ProcessedAsset[]>;
+    buildPageBrowserGraphAssets(pagePath: string, isMdx: boolean, declaredModules: string[]): Promise<ProcessedAsset[]>;
 }

package/src/services/react-hydration-asset.service.js

@@ -46,16 +46,17 @@ class ReactHydrationAssetService {
    * @param isMdx - Whether the source file is an MDX file
    * @returns One page-owned asset definition for processing
    */
-  createPageDependencies(pagePath, componentName, importPath, bundleOptions, isDevelopment, isMdx) {
+  createPageDependencies(pagePath, componentName, importPath, pageModuleUrlExpression, bundleOptions, isDevelopment, useBrowserRuntimeImports, isMdx) {
     const runtimeImports = this.config.bundleService.getRuntimeImports();
     return [
       AssetFactory.createContentScript({
         position: "head",
         content: createHydrationScript({
           importPath: isDevelopment ? importPath : pagePath,
-          reactImportPath: isDevelopment ? runtimeImports.react : "react",
-          reactDomClientImportPath: isDevelopment ? runtimeImports.reactDomClient : "react-dom/client",
-          routerImportPath: isDevelopment ? runtimeImports.router : this.config.routerAdapter?.importMapKey,
+          pageModuleUrlExpression,
+          reactImportPath: useBrowserRuntimeImports ? runtimeImports.react : "react",
+          reactDomClientImportPath: useBrowserRuntimeImports ? runtimeImports.reactDomClient : "react-dom/client",
+          routerImportPath: useBrowserRuntimeImports ? runtimeImports.router : this.config.routerAdapter?.bundle.importPath,
           isDevelopment,
           isMdx,
           router: this.config.routerAdapter,
@@ -145,32 +146,38 @@ class ReactHydrationAssetService {
     return this.config.assetProcessingService.processDependencies(dependencies, componentName);
   }
   /**
-   * Builds all client-side route assets for a page.
+   * Builds the Page Browser Graph assets for a React page.
    *
    * @param pagePath - Absolute file path of the page
    * @param isMdx - Whether the page is an MDX file
    * @param declaredModules - Explicitly declared browser module specifiers
    * @returns Processed assets for the route
    */
-  async buildRouteRenderAssets(pagePath, isMdx, declaredModules) {
+  async buildPageBrowserGraphAssets(pagePath, isMdx, declaredModules) {
     const componentName = `ecopages-react-${rapidhash(pagePath)}`;
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     const isDevelopment = hmrManager?.isEnabled() ?? false;
+    const isHostedDevelopment = !isDevelopment && process.env.NODE_ENV !== "production";
+    const useBrowserRuntimeImports = isDevelopment || isHostedDevelopment;
     if (isDevelopment) {
       this.config.hmrPageMetadataCache?.setDeclaredModules(pagePath, declaredModules);
     }
     const importPath = await this.resolveAssetImportPath(pagePath, componentName);
+    const pageModuleUrlExpression = "import.meta.url";
     const bundleOptions = await this.config.bundleService.createBundleOptions(
       componentName,
       isMdx,
-      declaredModules
+      declaredModules,
+      { includeRuntime: !useBrowserRuntimeImports }
     );
     const dependencies = this.createPageDependencies(
       pagePath,
       componentName,
       importPath,
+      pageModuleUrlExpression,
       bundleOptions,
       isDevelopment,
+      useBrowserRuntimeImports,
       isMdx
     );
     if (!this.config.assetProcessingService) {

package/src/services/react-page-payload.service.js

@@ -1,4 +1,4 @@
-import { LocalsAccessError } from "@ecopages/core/errors/locals-access-error";
+import { LocalsAccessError } from "@ecopages/core/errors";
 class ReactPagePayloadService {
   /**
    * Creates the canonical page-props payload used by router hydration.

package/src/services/react-runtime-bundle.service.d.ts

@@ -6,7 +6,7 @@
  *
  * @module
  */
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import { type AssetDefinition } from '@ecopages/core/services/asset-processing-service';
 import type { ReactRouterAdapter } from '../router-adapter.js';
 export type ReactRuntimeImports = {
@@ -33,7 +33,7 @@ export declare class ReactRuntimeBundleService {
     private getReactDomVendorFileName;
     private getRouterVendorFileName;
     getRuntimeImports(mode?: RuntimeMode): ReactRuntimeImports;
-    getSpecifierMap(mode?: RuntimeMode): Record<string, string>;
+    getRuntimeAliasMap(mode?: RuntimeMode): Record<string, string>;
     getDependencies(): AssetDefinition[];
     createRuntimeAliasPlugin(mode?: RuntimeMode): EcoBuildPlugin;
 }

package/src/services/react-runtime-bundle.service.js

@@ -5,7 +5,7 @@ import {
   createBrowserRuntimeScriptAsset
 } from "@ecopages/core/services/asset-processing-service";
 import { createReactDomRuntimeInteropPlugin } from "../utils/react-dom-runtime-interop-plugin.js";
-import { buildReactRuntimeSpecifierMap } from "../utils/react-runtime-specifier-map.js";
+import { buildReactRuntimeAliasMap } from "../utils/react-runtime-alias-map.js";
 class ReactRuntimeBundleService {
   config;
   constructor(config) {
@@ -54,8 +54,8 @@ class ReactRuntimeBundleService {
     }
     return runtimeImports;
   }
-  getSpecifierMap(mode = this.getCurrentRuntimeMode()) {
-    return buildReactRuntimeSpecifierMap(this.getRuntimeImports(mode), this.config.routerAdapter);
+  getRuntimeAliasMap(mode = this.getCurrentRuntimeMode()) {
+    return buildReactRuntimeAliasMap(this.getRuntimeImports(mode));
   }
   getDependencies() {
     const reactDomRuntimeInteropPlugin = createReactDomRuntimeInteropPlugin();
@@ -71,7 +71,7 @@ class ReactRuntimeBundleService {
         (plugin) => plugin !== null
       );
       const runtimeAliasPlugin = this.createRuntimeAliasPlugin(mode);
-      const mappedSpecifiers = new Set(Object.keys(this.getSpecifierMap(mode)));
+      const mappedSpecifiers = new Set(Object.keys(this.getRuntimeAliasMap(mode)));
       dependencies.push(
         createBrowserRuntimeModuleAsset({
           modules: [
@@ -120,7 +120,7 @@ class ReactRuntimeBundleService {
     return dependencies;
   }
   createRuntimeAliasPlugin(mode = this.getCurrentRuntimeMode()) {
-    return createRuntimeSpecifierAliasPlugin(this.getSpecifierMap(mode), {
+    return createRuntimeSpecifierAliasPlugin(this.getRuntimeAliasMap(mode), {
       name: `react-plugin-runtime-alias-${mode}`
     });
   }

package/src/utils/client-graph-boundary-plugin.d.ts

@@ -14,7 +14,7 @@
  * Additionally, this plugin provides a build-time transform that statically resolves and
  * inlines `fs.readFileSync(path.resolve(...))` calls to prevent server/client data mismatches.
  */
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 /**
  * Configuration options for the Client Graph Boundary esbuild plugin.
  *

package/src/utils/hydration-scripts.d.ts

@@ -10,6 +10,8 @@ import type { ReactRouterAdapter } from '../router-adapter.js';
 export type HydrationScriptOptions = {
     /** The module path imported by the page entry module. */
     importPath: string;
+    /** Browser expression that resolves to the page module URL the router should import. */
+    pageModuleUrlExpression?: string;
     /** Stable id of the page entry script tag in the document. */
     scriptId: string;
     /** Direct import path for React runtime module */

package/src/utils/hydration-scripts.js

@@ -60,6 +60,7 @@ function getProdReuseExistingRouterRootScript() {
 }
 function createDevScriptWithRouter(options) {
   const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   const { components, getRouterProps } = router;
   if (!routerImportPath) {
     throw new Error("routerImportPath is required when router adapter is configured");
@@ -69,7 +70,7 @@ import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 import { ${components.router}, ${components.pageContent} } from "${routerImportPath}";
 ${getImportStatement(importPath, isMdx)}
-const pageModuleUrl = import.meta.url;
+const pageModuleUrl = ${pageModuleUrlExpression};
 export default Page;
 export const config = Page.config;
 const isActivePageEntry = Boolean(document.querySelector('script[data-eco-script-id="${scriptId}"]'));
@@ -157,11 +158,12 @@ if (document.readyState === "loading") {
 }
 function createDevScriptWithoutRouter(options) {
   const { importPath, isMdx, reactImportPath, reactDomClientImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   return `
 import { hydrateRoot } from "${reactDomClientImportPath}";
 import { createElement } from "${reactImportPath}";
 ${getImportStatement(importPath, isMdx)}
-const pageModuleUrl = import.meta.url;
+const pageModuleUrl = ${pageModuleUrlExpression};
 export default Page;
 export const config = Page.config;
 const isActivePageEntry = Boolean(document.querySelector('script[data-eco-script-id="${scriptId}"]'));
@@ -229,21 +231,23 @@ if (document.readyState === "loading") {
 }
 function createProdScriptWithRouter(options) {
   const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   const { components, getRouterProps } = router;
   if (!routerImportPath) {
     throw new Error("routerImportPath is required when router adapter is configured");
   }
   if (isMdx) {
-    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}${getProdReuseExistingRouterRootScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
+    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;const u=${pageModuleUrlExpression};export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}${getProdReuseExistingRouterRootScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
   }
-  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import P from"${importPath}";const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}${getProdReuseExistingRouterRootScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
+  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import{${components.router} as R,${components.pageContent} as PC}from"${routerImportPath}";import P from"${importPath}";const u=${pageModuleUrlExpression};export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}${getProdRouterBootstrapRegistrationScript()}${getProdReuseExistingRouterRootScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>ce(R,${getRouterProps("C", "p")},ce(PC));const m=()=>{if(sr()){root=window.__ECO_PAGES__.react.pageRoot;return}if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
 }
 function createProdScriptWithoutRouter(options) {
   const { importPath, isMdx, reactImportPath, reactDomClientImportPath, scriptId } = options;
+  const pageModuleUrlExpression = options.pageModuleUrlExpression ?? "import.meta.url";
   if (isMdx) {
-    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
+    return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import*as M from"${importPath}";const P=M.default;if(M.config)P.config=M.config;const u=${pageModuleUrlExpression};export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
   }
-  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import P from"${importPath}";const u=import.meta.url;export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
+  return `import{hydrateRoot as hr}from"${reactDomClientImportPath}";import{createElement as ce}from"${reactImportPath}";import P from"${importPath}";const u=${pageModuleUrlExpression};export default P;export const config=P.config;const a=!!document.querySelector('script[data-eco-script-id="${scriptId}"]');if(a){window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.pageRoot=window.__ECO_PAGES__.react.pageRoot||null;let root=window.__ECO_PAGES__.react.pageRoot;${getProdPageRootCleanupScript()}const gd=()=>{const e=document.getElementById("__ECO_PAGE_DATA__");if(e?.textContent){try{return JSON.parse(e.textContent)}catch{}}return{}};const pr=gd();window.__ECO_PAGES__.page={module:u,props:pr};const ct=(C,p)=>{const L=C.config?.layout;const pe=ce(C,p);const lp=p?.locals?{locals:p.locals}:null;return L?ce(L,lp,pe):pe};const m=()=>{if(window.__ECO_PAGES__.react?.pageRoot){root=window.__ECO_PAGES__.react.pageRoot;root.render(ct(P,pr));return}root=hr(document.body,ct(P,pr),{onRecoverableError:(e)=>console.warn("[ecopages] Hydration error:",e)});window.__ECO_PAGES__.react.pageRoot=root};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m()}`;
 }
 function createHydrationScript(options) {
   const { isDevelopment, router } = options;

package/src/utils/hydration-scripts.test.browser.js

@@ -7,7 +7,6 @@ const routerAdapter = {
     outputName: "router",
     externals: []
   },
-  importMapKey: "@ecopages/react-router",
   components: {
     router: "EcoRouter",
     pageContent: "PageContent"

package/src/utils/react-dom-runtime-interop-plugin.d.ts

@@ -1,4 +1,4 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 export declare function createReactDomRuntimeInteropPlugin(options?: {
     name?: string;
     reactSpecifier?: string;

package/src/utils/react-mdx-loader-plugin.d.ts

@@ -1,3 +1,3 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import { type CompileOptions } from '@mdx-js/mdx';
 export declare function createReactMdxLoaderPlugin(compilerOptions?: CompileOptions): EcoBuildPlugin;

package/src/utils/{react-runtime-specifier-map.d.ts → react-runtime-alias-map.d.ts}

@@ -1,6 +1,6 @@
 import type { ReactRouterAdapter } from '../router-adapter.js';
 import type { ReactRuntimeImports } from '../services/react-runtime-bundle.service.js';
 export declare const REACT_RUNTIME_SPECIFIERS: readonly ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom/client"];
-export declare function buildReactRuntimeSpecifierMap(runtimeImports: ReactRuntimeImports, routerAdapter?: ReactRouterAdapter): Record<string, string>;
+export declare function buildReactRuntimeAliasMap(runtimeImports: ReactRuntimeImports): Record<string, string>;
 export declare function getReactRuntimeExternalSpecifiers(): string[];
 export declare function getReactClientGraphAllowSpecifiers(runtimeSpecifiers: Iterable<string>, routerAdapter?: ReactRouterAdapter): string[];

package/src/utils/{react-runtime-specifier-map.js → react-runtime-alias-map.js}

@@ -5,18 +5,14 @@ const REACT_RUNTIME_SPECIFIERS = [
   "react/jsx-dev-runtime",
   "react-dom/client"
 ];
-function buildReactRuntimeSpecifierMap(runtimeImports, routerAdapter) {
-  const map = {
+function buildReactRuntimeAliasMap(runtimeImports) {
+  return {
     react: runtimeImports.react,
     "react/jsx-runtime": runtimeImports.reactJsxRuntime,
     "react/jsx-dev-runtime": runtimeImports.reactJsxDevRuntime,
     "react-dom": runtimeImports.reactDom,
     "react-dom/client": runtimeImports.reactDomClient
   };
-  if (routerAdapter && runtimeImports.router) {
-    map[routerAdapter.importMapKey] = runtimeImports.router;
-  }
-  return map;
 }
 function getReactRuntimeExternalSpecifiers() {
   return [...REACT_RUNTIME_SPECIFIERS];
@@ -25,13 +21,13 @@ function getReactClientGraphAllowSpecifiers(runtimeSpecifiers, routerAdapter) {
   return [
     "@ecopages/core",
     ...REACT_RUNTIME_SPECIFIERS,
-    ...routerAdapter ? [routerAdapter.importMapKey] : [],
+    ...routerAdapter ? [routerAdapter.bundle.importPath] : [],
     ...Array.from(runtimeSpecifiers)
   ];
 }
 export {
   REACT_RUNTIME_SPECIFIERS,
-  buildReactRuntimeSpecifierMap,
+  buildReactRuntimeAliasMap,
   getReactClientGraphAllowSpecifiers,
   getReactRuntimeExternalSpecifiers
 };

package/src/utils/use-sync-external-store-shim-plugin.d.ts

@@ -1,4 +1,4 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 export declare function createUseSyncExternalStoreShimPlugin(options?: {
     name?: string;
     namespace?: string;