create-interview-cockpit 0.15.0 → 0.17.0

package/template/client/src/reactLab.ts

@@ -342,21 +342,47 @@ This lab uses real webpack 5 + webpack-dev-server + Module Federation.
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
 `,
-  "apps/shared/mfInspector.js": `import React from "react";
+  "apps/host/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/shared/mfInspector.ts": `import React from "react";
 import ReactDOM from "react-dom";
 // NOTE: default import (not namespace import) is intentional — namespace objects
 // are never reference-equal across MF consumers even when the singleton is shared,
 // so comparing the default export is the only way to prove same-instance.
 
+// Webpack DefinePlugin / MF globals injected at build time
+declare const __MF_INSPECTOR_APP__: unknown;
+declare const __MF_INSPECTOR_SANDBOX_ID__: unknown;
+declare const __MF_INSPECTOR_DECLARED_CONFIG__: unknown;
+declare const __webpack_init_sharing__: ((scope: string) => Promise<void>) | undefined;
+declare const __webpack_share_scopes__: Record<string, unknown> | undefined;
+
 const app =
   typeof __MF_INSPECTOR_APP__ === "string" ? __MF_INSPECTOR_APP__ : "unknown";
 const sandboxId =
@@ -374,7 +400,7 @@ const runtimeId =
 
 let attachedRouteListeners = false;
 
-function getRoute() {
+function getRoute(): string {
   if (typeof window === "undefined" || !window.location) return "/";
   const route =
     window.location.pathname +
@@ -383,7 +409,7 @@ function getRoute() {
   return route || "/";
 }
 
-function cloneJsonSafe(value) {
+function cloneJsonSafe(value: unknown): unknown {
   if (value == null) return value;
   try {
     return JSON.parse(JSON.stringify(value));
@@ -392,7 +418,7 @@ function cloneJsonSafe(value) {
   }
 }
 
-export async function ensureShareScopeReady() {
+export async function ensureShareScopeReady(): Promise<void> {
   try {
     if (typeof __webpack_init_sharing__ === "function") {
       await __webpack_init_sharing__("default");
@@ -431,7 +457,7 @@ export function snapshotShareScopes() {
   }
 }
 
-export function emitInspectorEvent(kind, payload) {
+export function emitInspectorEvent(kind: string, payload: unknown): void {
   if (!sandboxId || typeof window === "undefined" || !window.parent) return;
   window.parent.postMessage(
     {
@@ -465,7 +491,7 @@ export function emitDeclaredConfig() {
   });
 }
 
-export async function emitRuntimeBoot(label) {
+export async function emitRuntimeBoot(label?: string): Promise<void> {
   attachRouteListeners();
   await ensureShareScopeReady();
   emitDeclaredConfig();
@@ -481,7 +507,7 @@ export async function emitRuntimeBoot(label) {
   });
 }
 
-export async function emitRouteSnapshot(label) {
+export async function emitRouteSnapshot(label?: string): Promise<void> {
   await ensureShareScopeReady();
   emitInspectorEvent("route-change", {
     label: label || "route",
@@ -501,7 +527,11 @@ export function getRemoteInspectorBridge() {
   };
 }
 
-export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
+export function makeInspectableLazy<T>(
+  remoteKey: string,
+  componentLoad: () => Promise<T>,
+  debugLoad?: (() => Promise<Record<string, unknown>>) | null,
+): () => Promise<T> {
   return async () => {
     await ensureShareScopeReady();
     emitInspectorEvent("remote-load-start", {
@@ -573,7 +603,9 @@ export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
   };
 }
 `,
-  "apps/shared/buildSharedConfig.js": `function createSharedConfig(packageJson) {
+  "apps/shared/buildSharedConfig.js": `
+/** @param {{ dependencies?: Record<string, string> }} packageJson */
+function createSharedConfig(packageJson) {
   const dependencyVersions =
     packageJson && typeof packageJson === "object"
       ? packageJson.dependencies || {}
@@ -611,14 +643,14 @@ export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
 
 module.exports = { createSharedConfig };
 `,
-  "apps/host/src/index.jsx": `import("./bootstrap");
+  "apps/host/src/index.tsx": `import("./bootstrap");
 `,
-  "apps/host/src/bootstrap.jsx": `import React from "react";
+  "apps/host/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { emitRuntimeBoot } from "../../shared/mfInspector";
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
@@ -628,7 +660,7 @@ root.render(
 
 void emitRuntimeBoot("host-bootstrap");
 `,
-  "apps/host/src/App.jsx": `import React, { Suspense } from "react";
+  "apps/host/src/App.tsx": `import React, { Suspense } from "react";
 import { makeInspectableLazy } from "../../shared/mfInspector";
 
 const ProfileCard = React.lazy(
@@ -646,7 +678,7 @@ const CheckoutPanel = React.lazy(
   ),
 );
 
-function RemoteBoundary({ title, children }) {
+function RemoteBoundary({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div
       style={{
@@ -720,6 +752,7 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const hostPort = Number(process.env.HOST_PORT || 3100);
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+// TypeScript support via esbuild-loader
 const sharedConfig = createSharedConfig(packageJson);
 const remoteConfig = {
   profile: "profile@http://localhost:" + profilePort + "/remoteEntry.js",
@@ -733,24 +766,24 @@ const inspectorConfig = {
 
 module.exports = {
   mode: "development",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + hostPort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -808,28 +841,47 @@ module.exports = {
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
 `,
-  "apps/profile/src/inspectorBridge.js": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
+  "apps/profile/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/profile/src/inspectorBridge.ts": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
 
 export { getRemoteInspectorBridge };
 export default getRemoteInspectorBridge;
 `,
-  "apps/profile/src/index.jsx": `import("./bootstrap");
+  "apps/profile/src/index.tsx": `import("./bootstrap");
 `,
-  "apps/profile/src/bootstrap.jsx": `import React from "react";
+  "apps/profile/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { emitRuntimeBoot } from "../../shared/mfInspector";
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
@@ -839,7 +891,7 @@ root.render(
 
 void emitRuntimeBoot("profile-bootstrap");
 `,
-  "apps/profile/src/App.jsx": `import React from "react";
+  "apps/profile/src/App.tsx": `import React from "react";
 import ProfileCard from "./ProfileCard";
 
 export default function App() {
@@ -854,7 +906,7 @@ export default function App() {
   );
 }
 `,
-  "apps/profile/src/ProfileCard.jsx": `import React from "react";
+  "apps/profile/src/ProfileCard.tsx": `import React from "react";
 
 export default function ProfileCard() {
   return (
@@ -883,8 +935,8 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
 const sharedConfig = createSharedConfig(packageJson);
 const exposeConfig = {
-  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
-  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
+  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.tsx"),
+  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.ts"),
 };
 const inspectorConfig = {
   app: "profile",
@@ -894,24 +946,24 @@ const inspectorConfig = {
 
 module.exports = {
   mode: "development",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + profilePort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -970,28 +1022,47 @@ module.exports = {
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
 `,
-  "apps/checkout/src/inspectorBridge.js": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
+  "apps/checkout/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/checkout/src/inspectorBridge.ts": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
 
 export { getRemoteInspectorBridge };
 export default getRemoteInspectorBridge;
 `,
-  "apps/checkout/src/index.jsx": `import("./bootstrap");
+  "apps/checkout/src/index.tsx": `import("./bootstrap");
 `,
-  "apps/checkout/src/bootstrap.jsx": `import React from "react";
+  "apps/checkout/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { emitRuntimeBoot } from "../../shared/mfInspector";
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root")!);
 
 root.render(
   <React.StrictMode>
@@ -1001,7 +1072,7 @@ root.render(
 
 void emitRuntimeBoot("checkout-bootstrap");
 `,
-  "apps/checkout/src/App.jsx": `import React from "react";
+  "apps/checkout/src/App.tsx": `import React from "react";
 import CheckoutPanel from "./CheckoutPanel";
 
 export default function App() {
@@ -1016,7 +1087,7 @@ export default function App() {
   );
 }
 `,
-  "apps/checkout/src/CheckoutPanel.jsx": `import React from "react";
+  "apps/checkout/src/CheckoutPanel.tsx": `import React from "react";
 
 export default function CheckoutPanel() {
   return (
@@ -1053,8 +1124,8 @@ const { createSharedConfig } = require("../shared/buildSharedConfig");
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
 const sharedConfig = createSharedConfig(packageJson);
 const exposeConfig = {
-  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
-  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
+  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.tsx"),
+  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.ts"),
 };
 const inspectorConfig = {
   app: "checkout",
@@ -1064,24 +1135,24 @@ const inspectorConfig = {
 
 module.exports = {
   mode: "development",
-  entry: path.resolve(__dirname, "./src/index.jsx"),
+  entry: path.resolve(__dirname, "./src/index.tsx"),
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + checkoutPort + "/",
     clean: true,
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
           options: {
-            loader: "jsx",
+            loader: "tsx",
             jsx: "automatic",
             target: "es2020",
           },
@@ -1139,7 +1210,7 @@ export const DEFAULT_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "Webpack Module Federation Lab",
   type: "module-federation",
-  activeFile: "apps/host/src/App.jsx",
+  activeFile: "apps/host/src/App.tsx",
   files: MODULE_FEDERATION_DEFAULT_FILES,
 };
 
@@ -1208,14 +1279,33 @@ In this **isolated** pattern:
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
+`,
+  "apps/host/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/host/webpack.config.js": `const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { ModuleFederationPlugin } = require("webpack").container;
@@ -1226,19 +1316,19 @@ const MFE_AUTH_PORT = parseInt(process.env.MFE_AUTH_PORT || "3002");
 
 module.exports = {
   mode: "development",
-  entry: "./src/index.js",
+  entry: "./src/index.ts",
   output: {
     publicPath: "auto",
   },
-  resolve: { extensions: [".js", ".jsx"] },
+  resolve: { extensions: [".js", ".jsx", ".ts", ".tsx"] },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
-          options: { loader: "jsx", jsx: "automatic", target: "es2020" },
+          options: { loader: "tsx", jsx: "automatic", target: "es2020" },
         },
       },
     ],
@@ -1288,16 +1378,16 @@ module.exports = {
   </body>
 </html>
 `,
-  "apps/host/src/index.js": `// Async boundary: required for Module Federation dynamic imports
+  "apps/host/src/index.ts": `// Async boundary: required for Module Federation dynamic imports
 import("./bootstrap");
 `,
-  "apps/host/src/bootstrap.jsx": `import React from "react";
+  "apps/host/src/bootstrap.tsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-createRoot(document.getElementById("root")).render(<App />);
+createRoot(document.getElementById("root")!).render(<App />);
 `,
-  "apps/host/src/App.jsx": `import React from "react";
+  "apps/host/src/App.tsx": `import React from "react";
 import MfeContainer from "./MfeContainer";
 
 export default function App() {
@@ -1316,18 +1406,30 @@ export default function App() {
   );
 }
 `,
-  "apps/host/src/MfeContainer.jsx": `import React, { useRef, useEffect } from "react";
+  "apps/host/src/MfeContainer.tsx": `import React, { useRef, useEffect } from "react";
+
+interface User {
+  name?: string;
+  role?: string;
+}
+
+interface MfeMount {
+  update?: (props: { user: User }) => void;
+  unmount?: () => void;
+}
 
 // Lazy-load the remote's mount/unmount contract — not a React component.
-const mfeAuthMountPromise = import("mfeAuth/mount");
+const mfeAuthMountPromise = import("mfeAuth/mount") as Promise<{
+  mount: (el: HTMLElement, props: { user: User }) => MfeMount;
+}>;
 
-export default function MfeContainer({ user }) {
-  const elRef = useRef(null);
-  const mountedRef = useRef(null); // holds { unmount } returned by remote
+export default function MfeContainer({ user }: { user: User }) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const mountedRef = useRef<MfeMount | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    let cleanup = null;
+    let cleanup: MfeMount | null = null;
 
     mfeAuthMountPromise.then(({ mount }) => {
       if (cancelled || !elRef.current) return;
@@ -1340,7 +1442,7 @@ export default function MfeContainer({ user }) {
     return () => {
       cancelled = true;
       // On cleanup, call the remote's own unmount so it can tear down its root.
-      cleanup?.unmount();
+      cleanup?.unmount?.();
     };
   }, []); // mount once — treat like a portal
 
@@ -1379,14 +1481,33 @@ export default function MfeContainer({ user }) {
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.28.0",
     "esbuild-loader": "^4.4.3",
     "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"
   }
 }
+`,
+  "apps/mfe-auth/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
 `,
   "apps/mfe-auth/webpack.config.js": `const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { ModuleFederationPlugin } = require("webpack").container;
@@ -1396,19 +1517,19 @@ const MFE_AUTH_PORT = parseInt(process.env.MFE_AUTH_PORT || "3002");
 
 module.exports = {
   mode: "development",
-  entry: "./src/index.js",
+  entry: "./src/index.ts",
   output: {
     publicPath: "auto",
   },
-  resolve: { extensions: [".js", ".jsx"] },
+  resolve: { extensions: [".js", ".jsx", ".ts", ".tsx"] },
   module: {
     rules: [
       {
-        test: /\\.(js|jsx)$/,
+        test: /\\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
         use: {
           loader: "esbuild-loader",
-          options: { loader: "jsx", jsx: "automatic", target: "es2020" },
+          options: { loader: "tsx", jsx: "automatic", target: "es2020" },
         },
       },
     ],
@@ -1420,7 +1541,7 @@ module.exports = {
       exposes: {
         // Key difference: we expose the MOUNT MODULE, not a React component.
         // The host never imports a JSX element from us directly.
-        "./mount": "./src/mount.jsx",
+        "./mount": "./src/mount.tsx",
       },
       // This remote brings its OWN React copy.
       // No singleton sharing with the host here.
@@ -1443,21 +1564,26 @@ module.exports = {
   <body><div id="root"></div></body>
 </html>
 `,
-  "apps/mfe-auth/src/index.js": `import("./bootstrap");
+  "apps/mfe-auth/src/index.ts": `import("./bootstrap");
 `,
-  "apps/mfe-auth/src/bootstrap.jsx": `// Standalone entry — only used when running mfe-auth on its own for development.
+  "apps/mfe-auth/src/bootstrap.tsx": `// Standalone entry — only used when running mfe-auth on its own for development.
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-createRoot(document.getElementById("root")).render(
+createRoot(document.getElementById("root")!).render(
   <App user={{ name: "Dev User", role: "developer" }} />
 );
 `,
-  "apps/mfe-auth/src/App.jsx": `import React from "react";
+  "apps/mfe-auth/src/App.tsx": `import React from "react";
+
+interface User {
+  name?: string;
+  role?: string;
+}
 
 // Standalone view — used for local development of the MFE in isolation.
-export default function App({ user = {} }) {
+export default function App({ user = {} }: { user?: User }) {
   return (
     <div style={{ padding: "1rem", fontFamily: "system-ui, sans-serif", background: "#0f172a", color: "#e2e8f0", minHeight: "100vh" }}>
       <h2 style={{ color: "#a78bfa", fontSize: "0.9rem", margin: "0 0 0.5rem" }}>
@@ -1469,7 +1595,7 @@ export default function App({ user = {} }) {
 }
 
 // The actual React component that this MFE renders.
-export function AuthWidget({ user = {} }) {
+export function AuthWidget({ user = {} }: { user?: User }) {
   return (
     <div style={{ padding: "0.75rem 1rem", background: "#1e293b", borderRadius: "6px", border: "1px solid #334155" }}>
       <p style={{ margin: 0, fontSize: "0.8rem", color: "#94a3b8" }}>Auth MFE — isolated React root</p>
@@ -1485,8 +1611,8 @@ export function AuthWidget({ user = {} }) {
   );
 }
 `,
-  "apps/mfe-auth/src/mount.jsx": `// ─────────────────────────────────────────────────────────────
-// mount.jsx — the public contract exposed via Module Federation
+  "apps/mfe-auth/src/mount.tsx": `// ─────────────────────────────────────────────────────────────
+// mount.tsx — the public contract exposed via Module Federation
 //
 // The host imports THIS file, not a React component.
 // It calls mount(domElement, props) to render, unmount(domElement) to tear down.
@@ -1500,17 +1626,23 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { AuthWidget } from "./App";
 
+interface User {
+  name?: string;
+  role?: string;
+}
+
+interface MfeHandle {
+  update: (props: { user?: User }) => void;
+  unmount: () => void;
+}
+
 // Keep track of roots by element so we can update or unmount them.
-const roots = new WeakMap();
+const roots = new WeakMap<HTMLElement, ReturnType<typeof createRoot>>();
 
 /**
  * Mount the MFE into the given DOM element.
- *
- * @param {HTMLElement} el   - the host-provided DOM node
- * @param {object}      props - initial props from the host
- * @returns {{ unmount: () => void, update: (props: object) => void }}
  */
-export function mount(el, props = {}) {
+export function mount(el: HTMLElement, props: { user?: User } = {}): MfeHandle {
   const root = createRoot(el);
   roots.set(el, root);
 
@@ -1518,7 +1650,7 @@ export function mount(el, props = {}) {
 
   return {
     /** Call this to pass updated props from the host without remounting. */
-    update(newProps) {
+    update(newProps: { user?: User }) {
       root.render(<AuthWidget {...newProps} />);
     },
     /** Tear down the React root when the host removes this MFE. */
@@ -1531,9 +1663,8 @@ export function mount(el, props = {}) {
 
 /**
  * Convenience function: unmount using only the element reference.
- * Useful if the host didn't store the return value of mount().
  */
-export function unmount(el) {
+export function unmount(el: HTMLElement): void {
   const root = roots.get(el);
   if (root) {
     root.unmount();
@@ -1547,99 +1678,1396 @@ export const ISOLATED_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "Webpack MF — Isolated Mount/Unmount",
   type: "module-federation",
-  activeFile: "apps/mfe-auth/src/mount.jsx",
+  activeFile: "apps/mfe-auth/src/mount.tsx",
   files: MODULE_FEDERATION_ISOLATED_FILES,
 };
 
-export function defaultForType(type: FrontendLabType): FrontendLabWorkspace {
-  if (type === "nextjs") return DEFAULT_NEXTJS_LAB;
-  if (type === "module-federation") return DEFAULT_MODULE_FEDERATION_LAB;
-  return DEFAULT_REACT_LAB;
+// ─── Next.js MF Option A — @module-federation/nextjs-mf plugin ──────────────
+const NEXTJS_MF_PLUGIN_FILES: Record<string, string> = {
+  "README.md": `# Next.js Module Federation — Option A: built-in webpack ModuleFederationPlugin
+
+## What is this
+
+A minimal Next.js shell that loads a remote Next.js app using webpack's built-in
+\`ModuleFederationPlugin\` — no extra npm packages needed.
+Both shell and remote are Next.js apps that configure the plugin inside their \`next.config.js\`.
+
+## Structure
+
+- \`apps/shell/\` — Next.js shell app
+- \`apps/remote/\` — Next.js remote app that exposes a widget
+
+Ports are assigned automatically by the lab runner (HOST_PORT for shell, REMOTE_PORT for remote).
+
+## Key idea
+
+The shell's \`next.config.js\` registers \`webpack.container.ModuleFederationPlugin\` with no
+static remotes — the remote URL is resolved at runtime via the \`RemoteSlot\` component.
+No \`@module-federation/nextjs-mf\` package is required.
+
+## Things to try
+
+1. Stop the remote and reload the shell — observe the fallback UI.
+2. Add a second exposed component in the remote's \`next.config.js\` and load it from the shell.
+3. Change the entry URL to point to a CDN-hosted remoteEntry.js.
+`,
+  "package.json": `{
+  "name": "nextjs-mf-plugin-lab",
+  "private": true,
+  "workspaces": [
+    "apps/shell",
+    "apps/remote"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -n remote,shell -c magenta,cyan 'npm run dev --workspace=nextjs-mf-remote' 'npm run dev --workspace=nextjs-mf-shell'"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  },
+  "overrides": {
+    "undici": "^7"
+  }
+}
+`,
+  "apps/shell/package.json": `{
+  "name": "nextjs-mf-shell",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p $HOST_PORT",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
 }
+`,
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
+// Use webpack's built-in ModuleFederationPlugin — no extra npm package.
+import { container } from 'webpack';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  webpack(config, { webpack }) {
+    config.plugins.push(
+      new webpack.container.ModuleFederationPlugin({
+        name: 'shell',
+        // Shell exposes nothing, just consumes remotes at runtime.
+        remotes: {},
+        shared: {
+          react: { singleton: true, requiredVersion: false },
+          'react-dom': { singleton: true, requiredVersion: false },
+        },
+      })
+    );
+    return config;
+  },
+};
 
-export function cloneFrontendLabWorkspace(
-  workspace?: FrontendLabWorkspace | null,
-  type?: FrontendLabType,
-): FrontendLabWorkspace {
-  const resolvedType = workspace?.type ?? type ?? "react";
-  const defaults = defaultForType(resolvedType);
-  const source = workspace ?? defaults;
-  const files =
-    source.files && Object.keys(source.files).length > 0
-      ? { ...source.files }
-      : { ...defaults.files };
-  const activeFile = files[source.activeFile]
-    ? source.activeFile
-    : (Object.keys(files)[0] ?? defaults.activeFile);
+export default nextConfig;
+`,
+  "apps/shell/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
 
-  return {
-    version: 1,
-    label: source.label?.trim() || defaults.label,
-    type: resolvedType,
-    activeFile,
-    files,
-  };
+export const metadata: Metadata = { title: 'Shell — Next.js MF' };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
 }
+`,
+  "apps/shell/src/app/page.tsx": `'use client';
 
-export function serializeFrontendLabWorkspace(
-  workspace: FrontendLabWorkspace,
-): string {
-  return JSON.stringify(cloneFrontendLabWorkspace(workspace), null, 2);
+import React from 'react';
+import { RemoteSlot } from '@/components/RemoteSlot';
+
+export default function Home() {
+  return (
+    <main style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+      <h1>Next.js Shell — Option A</h1>
+      <p style={{ color: '#64748b' }}>
+        The widget below is loaded from the Next.js remote at runtime.
+        Shell and remote both use Next.js with webpack's built-in ModuleFederationPlugin.
+      </p>
+
+      {/* NEXT_PUBLIC_REMOTE_URL is injected by the lab runner */}
+      <RemoteSlot
+        scope="myRemote"
+        module="./Widget"
+        remoteUrl={
+          process.env.NEXT_PUBLIC_REMOTE_URL ||
+          'http://localhost:3001/_next/static/chunks/remoteEntry.js'
+        }
+        fallback={<p style={{ color: '#ef4444' }}>Remote unavailable.</p>}
+      />
+    </main>
+  );
 }
+`,
+  "apps/shell/src/components/RemoteSlot.tsx": `'use client';
 
-export function parseFrontendLabWorkspace(
-  raw: string,
-): FrontendLabWorkspace | null {
-  try {
-    const parsed = JSON.parse(raw) as Partial<FrontendLabWorkspace> & {
-      files?: Record<string, unknown>;
-    };
-    if (!parsed || typeof parsed !== "object") return null;
-    if (!parsed.files || typeof parsed.files !== "object") return null;
+import React from 'react';
 
-    const files = Object.fromEntries(
-      Object.entries(parsed.files).filter(
-        (e): e is [string, string] => typeof e[1] === "string",
+type Props = {
+  scope: string;
+  module: string;
+  remoteUrl: string;
+  fallback?: React.ReactNode;
+};
+
+// Webpack federation globals — available because shell's next.config.js
+// registers ModuleFederationPlugin which injects them at runtime.
+declare const __webpack_init_sharing__: (scope: 'default') => Promise<void>;
+declare const __webpack_share_scopes__: { default: unknown };
+
+async function loadRemoteModule(scope: string, module: string, remoteUrl: string) {
+  // 1. Inject the remote's remoteEntry.js once.
+  if (!(window as Record<string, unknown>)[scope]) {
+    await new Promise<void>((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = remoteUrl;
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error(\`Failed to load remote: \${scope}\`));
+      document.head.appendChild(script);
+    });
+  }
+
+  // 2. Init the shared scope so singleton packages (react) are negotiated.
+  await __webpack_init_sharing__('default');
+
+  const container = (window as Record<string, unknown>)[scope] as {
+    init(s: unknown): Promise<void>;
+    get(m: string): Promise<() => unknown>;
+  };
+
+  await container.init(__webpack_share_scopes__.default);
+
+  // 3. Get the exposed module factory and invoke it.
+  const factory = await container.get(module);
+  return factory() as { default: React.ComponentType };
+}
+
+export function RemoteSlot({ scope, module, remoteUrl, fallback }: Props) {
+  const LazyComponent = React.useMemo(
+    () =>
+      React.lazy(() =>
+        loadRemoteModule(scope, module, remoteUrl).then((mod) => ({
+          default: mod.default,
+        }))
       ),
+    [scope, module, remoteUrl]
+  );
+
+  return (
+    <React.Suspense fallback={<p>Loading remote...</p>}>
+      <LazyComponent />
+    </React.Suspense>
+  );
+}
+`,
+  "apps/remote/package.json": `{
+  "name": "nextjs-mf-remote",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p $REMOTE_PORT",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
+`,
+  "apps/remote/next.config.ts": `import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  webpack(config, { webpack }) {
+    config.plugins.push(
+      new webpack.container.ModuleFederationPlugin({
+        name: 'myRemote',
+        filename: 'static/chunks/remoteEntry.js',
+        exposes: {
+          // The shell loads this module at runtime via RemoteSlot.
+          './Widget': './src/exposes/Widget',
+        },
+        shared: {
+          react: { singleton: true, requiredVersion: false },
+          'react-dom': { singleton: true, requiredVersion: false },
+        },
+      })
     );
-    if (Object.keys(files).length === 0) return null;
+    return config;
+  },
+};
 
-    const type: FrontendLabType =
-      parsed.type === "nextjs"
-        ? "nextjs"
-        : parsed.type === "module-federation"
-          ? "module-federation"
-          : "react";
+export default nextConfig;
+`,
+  "apps/remote/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
 
-    return cloneFrontendLabWorkspace({
-      version: 1,
-      type,
-      label:
-        typeof parsed.label === "string" && parsed.label.trim()
-          ? parsed.label.trim()
-          : defaultForType(type).label,
-      activeFile:
-        typeof parsed.activeFile === "string"
-          ? parsed.activeFile
-          : defaultForType(type).activeFile,
-      files,
-    });
-  } catch {
-    return null;
+export const metadata: Metadata = { title: 'Remote — Next.js MF' };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`,
+  "apps/remote/src/app/page.tsx": `export default function Home() {
+  return (
+    <main style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+      <h1>Remote App</h1>
+      <p>
+        This app exposes <code>myRemote/Widget</code> via Module Federation.
+        The shell loads it at runtime — open the shell URL to see it in action.
+      </p>
+    </main>
+  );
+}
+`,
+  "apps/remote/src/exposes/Widget.tsx": `'use client';
+
+// This component is exposed at ./Widget via ModuleFederationPlugin.
+// The shell dynamically loads it at runtime via RemoteSlot — zero build-time coupling.
+export default function Widget() {
+  return (
+    <section
+      style={{
+        padding: '1rem',
+        border: '1px solid #e2e8f0',
+        borderRadius: '8px',
+        background: '#f8fafc',
+        maxWidth: '400px',
+      }}
+    >
+      <h2 style={{ margin: '0 0 0.5rem', fontSize: '1rem', color: '#0f172a' }}>
+        Remote Widget
+      </h2>
+      <p style={{ margin: 0, color: '#475569', fontSize: '0.875rem' }}>
+        Loaded from{' '}
+        <code style={{ background: '#e2e8f0', padding: '0 4px', borderRadius: '4px' }}>
+          myRemote/Widget
+        </code>{' '}
+        at runtime. Both shell and remote are Next.js apps.
+      </p>
+    </section>
+  );
+}
+`,
+};
+
+export const NEXTJS_MF_PLUGIN_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js MF — Plugin (Option A)",
+  type: "module-federation",
+  activeFile: "apps/shell/src/components/RemoteSlot.tsx",
+  files: NEXTJS_MF_PLUGIN_FILES,
+};
+
+// ─── Next.js MF Option B — plain runtime script loading (no plugin) ──────────
+const NEXTJS_MF_RUNTIME_FILES: Record<string, string> = {
+  "README.md": `# Next.js Module Federation — Option B: plain runtime script loading
+
+## What is this
+
+The shell is a plain Next.js app with NO federation webpack plugin.
+The remote is a standard webpack 5 app that produces a \`remoteEntry.js\` federation container.
+The shell loads that container at runtime using plain DOM script injection + webpack federation globals.
+
+## Why this approach
+
+- No Next.js-specific federation plugin required on the shell
+- Full runtime control — manifest URL can come from an API at page-load time
+- Easier to reason about for client-side-only composition
+
+## Structure
+
+- \`apps/shell/\`   — plain Next.js app
+- \`apps/remote/\`  — webpack 5 React app that exposes a widget
+
+Ports are assigned automatically by the lab runner (HOST_PORT for shell, REMOTE_PORT for remote).
+
+## Things to try
+
+1. Change the entry URL to point to a CDN-hosted remoteEntry.js.
+2. Add a second exposed module in apps/remote/webpack.config.js and load it in the shell.
+3. Move the remote URL to an API route (\`/api/remote-config\`) to simulate a manifest service.
+`,
+  "package.json": `{
+  "name": "nextjs-runtime-mf-lab",
+  "private": true,
+  "workspaces": [
+    "apps/shell",
+    "apps/remote"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -n remote,shell -c magenta,cyan 'npm run dev --workspace=nextjs-runtime-remote' 'npm run dev --workspace=nextjs-runtime-shell'"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  },
+  "overrides": {
+    "undici": "^7"
+  }
+}
+`,
+  "apps/shell/package.json": `{
+  "name": "nextjs-runtime-shell",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p $HOST_PORT",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }
+`,
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
+// No federation plugin — the shell loads remotes entirely at runtime.
 
-/** Returns the canonical entry file for "Run" → preview. */
-export function getEntryFile(workspace: FrontendLabWorkspace): string {
-  if (workspace.type === "nextjs") {
-    return workspace.files["app/page.tsx"]
-      ? "app/page.tsx"
-      : Object.keys(workspace.files)[0];
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
+`,
+  "apps/shell/src/lib/loadRemoteModule.ts": `// Utility: load a webpack 5 Module Federation container at runtime.
+// Works in any browser environment — no webpack plugin needed on the shell side.
+
+declare const __webpack_init_sharing__: (scope: 'default') => Promise<void>;
+declare const __webpack_share_scopes__: { default: unknown };
+
+type FederatedContainer = {
+  init(shareScope: unknown): Promise<void>;
+  get(module: string): Promise<() => unknown>;
+};
+
+// Avoid injecting the same script twice.
+const loaded = new Set<string>();
+
+async function injectScript(url: string, scope: string): Promise<void> {
+  if (loaded.has(scope)) return;
+  loaded.add(scope);
+
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.async = true;
+    script.crossOrigin = 'anonymous';
+    script.onload = () => resolve();
+    script.onerror = () => {
+      loaded.delete(scope); // allow retry
+      reject(new Error(\`Failed to load remote entry: \${url}\`));
+    };
+    document.head.appendChild(script);
+  });
+}
+
+export async function loadRemoteModule<T = { default: unknown }>(
+  scope: string,
+  module: string,
+  remoteUrl: string
+): Promise<T> {
+  await injectScript(remoteUrl, scope);
+
+  // Init the shared scope so singleton packages are negotiated.
+  await __webpack_init_sharing__('default');
+
+  const container = (window as Record<string, unknown>)[scope] as
+    | FederatedContainer
+    | undefined;
+
+  if (!container) {
+    throw new Error(\`Remote container "\${scope}" not found on window after script load.\`);
   }
-  if (workspace.type === "module-federation") {
-    return workspace.files["apps/host/src/App.jsx"]
-      ? "apps/host/src/App.jsx"
-      : Object.keys(workspace.files)[0];
+
+  await container.init(__webpack_share_scopes__.default);
+
+  const factory = await container.get(module);
+  return factory() as T;
+}
+`,
+  "apps/shell/src/app/page.tsx": `'use client';
+
+import React from 'react';
+import { loadRemoteModule } from '@/lib/loadRemoteModule';
+
+// The remote URL would normally come from an API call / manifest service.
+const REMOTE_URL =
+  process.env.NEXT_PUBLIC_REMOTE_URL ||
+  'http://localhost:3001/remoteEntry.js';
+
+// React.lazy wraps our runtime loader — Suspense handles the loading state.
+const RemoteWidget = React.lazy(() =>
+  loadRemoteModule<{ default: React.ComponentType }>(
+    'myRemote',
+    './Widget',
+    REMOTE_URL
+  ).then((mod) => ({ default: mod.default }))
+);
+
+export default function Home() {
+  return (
+    <main style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+      <h1>Next.js Shell (runtime loader)</h1>
+      <p style={{ color: '#64748b' }}>
+        No federation plugin on the shell — the widget is loaded via plain
+        script injection and webpack federation globals.
+      </p>
+
+      <React.Suspense fallback={<p>Loading remote widget...</p>}>
+        <RemoteWidget />
+      </React.Suspense>
+    </main>
+  );
+}
+`,
+  "apps/remote/package.json": `{
+  "name": "nextjs-runtime-remote",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "typescript": "^5.6.0",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
+  }
+}
+`,
+  "apps/remote/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/remote/webpack.config.js": `const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+
+const REMOTE_PORT = Number(process.env.REMOTE_PORT || 3001);
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: \`http://localhost:\${REMOTE_PORT}/\`,
+    clean: true,
+  },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'esbuild-loader',
+          options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'myRemote',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Widget': './src/Widget.tsx',
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        'react-dom': { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: './public/index.html' }),
+  ],
+  devServer: {
+    port: REMOTE_PORT,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
+};
+`,
+  "apps/remote/public/index.html": `<!doctype html>
+<html lang="en">
+  <head><meta charset="UTF-8" /><title>Remote (standalone)</title></head>
+  <body><div id="root"></div></body>
+</html>
+`,
+  "apps/remote/src/index.ts": `// Async boundary required for Module Federation
+import('./bootstrap');
+`,
+  "apps/remote/src/bootstrap.tsx": `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Widget from './Widget';
+
+createRoot(document.getElementById('root')!).render(<Widget />);
+`,
+  "apps/remote/src/Widget.tsx": `import React from 'react';
+
+// This component is exposed at ./Widget via ModuleFederationPlugin.
+// The shell loads it with loadRemoteModule('myRemote', './Widget', url).
+export default function Widget(): React.ReactElement {
+  return (
+    <section
+      style={{
+        padding: '1rem',
+        border: '1px solid #e2e8f0',
+        borderRadius: '8px',
+        background: '#f8fafc',
+        maxWidth: '400px',
+      }}
+    >
+      <h2 style={{ margin: '0 0 0.5rem', fontSize: '1rem', color: '#0f172a' }}>
+        Remote Widget
+      </h2>
+      <p style={{ margin: 0, color: '#475569', fontSize: '0.875rem' }}>
+        Built by webpack 5. Loaded by the Next.js shell at runtime via plain
+        script injection — no federation plugin on the shell required.
+      </p>
+    </section>
+  );
+}
+`,
+};
+
+export const NEXTJS_MF_RUNTIME_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js MF — Runtime Loader (Option B)",
+  type: "module-federation",
+  activeFile: "apps/shell/src/lib/loadRemoteModule.ts",
+  files: NEXTJS_MF_RUNTIME_FILES,
+};
+
+// ─── Next.js Multi-Zones ─────────────────────────────────────────────────────
+const NEXTJS_MULTI_ZONES_FILES: Record<string, string> = {
+  "README.md": `# Next.js Multi-Zones
+
+## What this shows
+Two separate Next.js apps served under one domain via URL-path splitting.
+The shell owns \`/\` and proxies \`/store\` to Zone B using Next.js rewrites.
+Each zone deploys independently — the shell never rebuilds when Zone B changes.
+
+## Key files
+- \`apps/shell/next.config.js\` — rewrites \`/store/*\` → Zone B
+- \`apps/zone-b/next.config.js\` — \`basePath: '/store'\` aligns Zone B's routes with the rewrite
+
+## Things to try
+1. Click the Store link — URL stays on the shell's origin but Zone B renders.
+2. Deploy Zone B to a CDN; update only the rewrite destination.
+3. Add a \`/checkout\` zone as a third independent Next.js app.
+`,
+  "package.json": `{
+  "name": "nextjs-multi-zones-lab",
+  "private": true,
+  "workspaces": ["apps/shell", "apps/zone-b"],
+  "scripts": {
+    "dev": "concurrently -k -n zone-b,shell -c magenta,cyan 'npm run dev --workspace=nextjs-zone-b' 'npm run dev --workspace=nextjs-shell'"
+  },
+  "devDependencies": { "concurrently": "^9.2.1" },
+  "overrides": { "undici": "^7" }
+}
+`,
+  "apps/shell/package.json": `{
+  "name": "nextjs-shell",
+  "private": true,
+  "scripts": { "dev": "next dev -p $HOST_PORT" },
+  "dependencies": {
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/node": "latest"
+  }
+}
+`,
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
+// Shell acts as the routing layer.
+// /store and /store/* are proxied to Zone B running at REMOTE_PORT.
+const nextConfig: NextConfig = {
+  async rewrites() {
+    const zoneB = 'http://localhost:' + process.env.REMOTE_PORT;
+    return [
+      { source: '/store', destination: zoneB + '/store' },
+      { source: '/store/:path*', destination: zoneB + '/store/:path*' },
+    ];
+  },
+};
+export default nextConfig;
+`,
+  "apps/shell/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
+
+export const metadata: Metadata = { title: 'Shell \u2014 Multi-Zones' };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, fontFamily: 'system-ui, sans-serif' }}>{children}</body>
+    </html>
+  );
+}
+`,
+  "apps/shell/src/app/page.tsx": `// Cross-zone links must be plain <a> tags — Next.js <Link> routes within
+// the same app via client-side JS, so the server-side rewrite never fires.
+export default function Home() {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Shell App \u2014 Zone A</h1>
+      <p style={{ color: '#64748b' }}>
+        This zone owns <code>/</code>. Clicking Store proxies the request to a
+        separate Next.js app (Zone B) \u2014 transparent to the browser.
+      </p>
+      <nav style={{ display: 'flex', gap: '1rem', marginTop: '1.5rem' }}>
+        <a href="/" style={{ color: '#3b82f6' }}>Home (Zone A)</a>
+        <a href="/store" style={{ color: '#3b82f6' }}>Store (Zone B \u2014 proxied)</a>
+      </nav>
+    </main>
+  );
+}
+`,
+  "apps/zone-b/package.json": `{
+  "name": "nextjs-zone-b",
+  "private": true,
+  "scripts": { "dev": "next dev -p $REMOTE_PORT" },
+  "dependencies": {
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/node": "latest"
+  }
+}
+`,
+  "apps/zone-b/next.config.ts": `import type { NextConfig } from 'next';
+// basePath makes Zone B serve its pages under /store,
+// matching the path prefix the shell forwards here.
+const nextConfig: NextConfig = {
+  basePath: '/store',
+};
+export default nextConfig;
+`,
+  "apps/zone-b/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
+
+export const metadata: Metadata = { title: 'Store \u2014 Zone B' };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, fontFamily: 'system-ui, sans-serif' }}>{children}</body>
+    </html>
+  );
+}
+`,
+  "apps/zone-b/src/app/page.tsx": `// Cross-zone back-link must be a plain <a> — client-side Next.js routing
+// stays within this app and would 404. A full navigation triggers the shell's rewrite.
+export default function StorePage() {
+  return (
+    <main style={{ padding: '2rem', background: '#f0fdf4', minHeight: '100vh' }}>
+      <h1>Store \u2014 Zone B</h1>
+      <p style={{ color: '#64748b' }}>
+        Rendered by a <strong>separate</strong> Next.js app. The shell proxied
+        your request via <code>next.config.js</code> rewrites. No code is shared
+        \u2014 both zones are fully independent.
+      </p>
+      <a href="/" style={{ color: '#3b82f6' }}>\u2190 Back to Shell (Zone A)</a>
+    </main>
+  );
+}
+`,
+};
+
+export const NEXTJS_MULTI_ZONES_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js \u2014 Multi-Zones",
+  type: "module-federation",
+  activeFile: "apps/shell/next.config.ts",
+  files: NEXTJS_MULTI_ZONES_FILES,
+};
+
+// ─── Next.js MF Runtime API ──────────────────────────────────────────────────
+const NEXTJS_MF_RUNTIME_API_FILES: Record<string, string> = {
+  "README.md": `# Next.js \u2014 Module Federation Runtime API
+
+## What this shows
+Consuming a federated remote from Next.js App Router without touching \`next.config.js\`.
+All federation work is isolated inside a \`'use client'\` component using
+\`@module-federation/enhanced/runtime\`'s \`init()\` + \`loadRemote()\` API.
+
+## Key files
+- \`apps/shell/src/components/FederatedWidget.tsx\` \u2014 the only federation code in the shell
+- \`apps/mf-remote/webpack.config.js\` \u2014 webpack remote exposing \`./Widget\`
+
+## Trade-off
+The component is strictly client-side (SPA). There is no SSR for the remote content.
+This is the recommended safe pattern for consuming federation in the App Router.
+`,
+  "package.json": `{
+  "name": "nextjs-mf-runtime-api-lab",
+  "private": true,
+  "workspaces": ["apps/shell", "apps/mf-remote"],
+  "scripts": {
+    "dev": "concurrently -k -n remote,shell -c magenta,cyan 'npm run dev --workspace=mf-runtime-remote' 'npm run dev --workspace=mf-runtime-shell'"
+  },
+  "devDependencies": { "concurrently": "^9.2.1" },
+  "overrides": { "undici": "^7" }
+}
+`,
+  "apps/shell/package.json": `{
+  "name": "mf-runtime-shell",
+  "private": true,
+  "scripts": { "dev": "next dev -p $HOST_PORT" },
+  "dependencies": {
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@module-federation/enhanced": "latest"
+  },
+  "devDependencies": {
+    "typescript": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/node": "latest"
+  }
+}
+`,
+  "apps/shell/next.config.ts": `import type { NextConfig } from 'next';
+// No webpack hooks needed — federation is handled entirely at runtime
+// inside FederatedWidget.tsx via @module-federation/enhanced/runtime.
+const nextConfig: NextConfig = {};
+export default nextConfig;
+`,
+  "apps/shell/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+`,
+  "apps/shell/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
+
+export const metadata: Metadata = { title: 'Shell \u2014 MF Runtime API' };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, fontFamily: 'system-ui, sans-serif' }}>{children}</body>
+    </html>
+  );
+}
+`,
+  "apps/shell/src/app/page.tsx": `import FederatedWidget from '@/components/FederatedWidget';
+
+export default function Home() {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1>Next.js Shell \u2014 MF Runtime API</h1>
+      <p style={{ color: '#64748b' }}>
+        The widget below is loaded at runtime using{' '}
+        <code>@module-federation/enhanced/runtime</code>. No webpack config changes needed.
+      </p>
+      <FederatedWidget />
+    </main>
+  );
+}
+`,
+  "apps/shell/src/components/FederatedWidget.tsx": `'use client';
+
+import { useEffect, useState } from 'react';
+import type { ComponentType } from 'react';
+
+// All federation work is isolated here in a client component.
+// init() + loadRemote() run only in the browser, never on the server.
+export default function FederatedWidget() {
+  const [Component, setComponent] = useState<ComponentType | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      const { init, loadRemote } = await import('@module-federation/enhanced/runtime');
+
+      // NEXT_PUBLIC_REMOTE_URL is injected by the lab runner.
+      const entry =
+        process.env.NEXT_PUBLIC_REMOTE_URL || 'http://localhost:3001/remoteEntry.js';
+
+      // shared tells the runtime which packages to negotiate as singletons.
+      // Without this, both shell and remote load their own React copy → version mismatch crash.
+      init({
+        name: 'shell',
+        remotes: [{ name: 'mfRemote', entry }],
+        shared: {
+          react: { singleton: true, version: '19.0.0', lib: () => require('react') },
+          'react-dom': { singleton: true, version: '19.0.0', lib: () => require('react-dom') },
+        },
+      });
+
+      // loadRemote resolves ./Widget from the remote container at runtime.
+      const mod = await loadRemote<{ default: ComponentType }>('mfRemote/Widget');
+      if (mod) setComponent(() => mod.default);
+    }
+    load().catch((e) => setError(String(e)));
+  }, []);
+
+  if (error) return <p style={{ color: '#ef4444' }}>Remote failed: {error}</p>;
+  if (!Component) return <p>Loading remote widget\u2026</p>;
+  return <Component />;
+}
+`,
+  "apps/mf-remote/package.json": `{
+  "name": "mf-runtime-remote",
+  "private": true,
+  "scripts": { "dev": "webpack serve" },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5",
+    "typescript": "^5.6.0",
+    "webpack": "^5",
+    "webpack-cli": "^5",
+    "webpack-dev-server": "^5"
+  }
+}
+`,
+  "apps/mf-remote/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/mf-remote/webpack.config.js": `const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.ts',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: 'auto',
+  },
+  devServer: {
+    port: parseInt(process.env.REMOTE_PORT, 10) || 3001,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'esbuild-loader',
+          options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' },
+        },
+      },
+    ],
+  },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+  plugins: [
+    new webpack.container.ModuleFederationPlugin({
+      name: 'mfRemote',
+      filename: 'remoteEntry.js',
+      exposes: { './Widget': './src/exposes/Widget.tsx' },
+      shared: {
+        react: { singleton: true, eager: true, requiredVersion: '^19.0.0' },
+        'react-dom': { singleton: true, eager: true, requiredVersion: '^19.0.0' },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: './public/index.html' }),
+  ],
+};
+`,
+  "apps/mf-remote/src/index.ts": `// Remote bootstrap page. MF consumers load ./Widget via remoteEntry.js.
+document.getElementById('root')!.innerHTML =
+  '<div style="padding:2rem;font-family:system-ui">' +
+  '<h2>mfRemote \u2014 running</h2>' +
+  '<p>Exposes <code>mfRemote/Widget</code> via Module Federation.</p>' +
+  '</div>';
+`,
+  "apps/mf-remote/src/exposes/Widget.tsx": `import React from 'react';
+
+// Exposed as mfRemote/Widget via ModuleFederationPlugin.
+// The shell loads this at runtime via @module-federation/enhanced/runtime.
+export default function Widget(): React.ReactElement {
+  return (
+    <section style={{
+      padding: '1rem', border: '1px solid #e2e8f0',
+      borderRadius: '8px', background: '#f8fafc', maxWidth: '400px',
+    }}>
+      <h2 style={{ margin: '0 0 0.5rem', fontSize: '1rem' }}>Remote Widget</h2>
+      <p style={{ margin: 0, color: '#475569', fontSize: '0.875rem' }}>
+        Loaded via <code>@module-federation/enhanced/runtime</code> \u2014 client-side only.
+      </p>
+    </section>
+  );
+}
+`,
+  "apps/mf-remote/public/index.html": `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8" /><title>MF Remote</title></head>
+<body><div id="root"></div></body>
+</html>
+`,
+};
+
+export const NEXTJS_MF_RUNTIME_API_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js \u2014 MF Runtime API",
+  type: "module-federation",
+  activeFile: "apps/shell/src/components/FederatedWidget.tsx",
+  files: NEXTJS_MF_RUNTIME_API_FILES,
+};
+
+// ─── Rspack Shell + Webpack Remote ───────────────────────────────────────────
+const RSPACK_SHELL_FILES: Record<string, string> = {
+  "README.md": `# Rspack Shell \u2014 Native Module Federation 2.0
+
+## What this shows
+An Rspack-bundled React shell consuming a webpack remote using native Module
+Federation support. Rspack mirrors webpack's API and ships MF support out of the
+box \u2014 no extra plugins or workarounds needed.
+
+## Key files
+- \`apps/rspack-shell/rspack.config.js\` \u2014 shell config with MF plugin + built-in SWC loader
+- \`apps/webpack-remote/webpack.config.js\` \u2014 remote exposing \`./Widget\`
+
+## Why Rspack for the shell
+If Module Federation is a hard requirement, the community recommends running the
+host/orchestrator on Rspack (or Modern.js) rather than Next.js. Next.js remotes
+still work \u2014 here a plain webpack remote is used for simplicity.
+`,
+  "package.json": `{
+  "name": "rspack-shell-mf-lab",
+  "private": true,
+  "workspaces": ["apps/rspack-shell", "apps/webpack-remote"],
+  "scripts": {
+    "dev": "concurrently -k -n remote,shell -c magenta,cyan 'npm run dev --workspace=rspack-mf-remote' 'npm run dev --workspace=rspack-mf-shell'"
+  },
+  "devDependencies": { "concurrently": "^9.2.1" }
+}
+`,
+  "apps/rspack-shell/package.json": `{
+  "name": "rspack-mf-shell",
+  "private": true,
+  "scripts": { "dev": "rspack serve" },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@rspack/core": "latest",
+    "@rspack/cli": "latest",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.6.0"
+  }
+}
+`,
+  "apps/rspack-shell/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/rspack-shell/rspack.config.js": `const rspack = require('@rspack/core');
+
+module.exports = {
+  entry: './src/index.tsx',
+  mode: 'development',
+  output: { publicPath: 'auto' },
+  devServer: {
+    // PORT is read from env — injected by the lab runner.
+    port: parseInt(process.env.HOST_PORT, 10) || 3000,
+    hot: true,
+  },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx|ts|tsx)$/,
+        // Rspack ships a built-in SWC loader — no Babel or extra packages needed.
+        // Use 'typescript' syntax to handle .ts/.tsx files.
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: { syntax: 'typescript', tsx: true },
+            transform: { react: { runtime: 'automatic' } },
+          },
+        },
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  plugins: [
+    // Rspack has first-class Module Federation support via rspack.container.
+    new rspack.container.ModuleFederationPlugin({
+      name: 'rspackShell',
+      remotes: {
+        // mfRemote is the webpack remote at REMOTE_PORT.
+        mfRemote:
+          'mfRemote@http://localhost:' +
+          (process.env.REMOTE_PORT || '3001') +
+          '/remoteEntry.js',
+      },
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+    new rspack.HtmlRspackPlugin({ template: './index.html' }),
+  ],
+};
+`,
+  "apps/rspack-shell/index.html": `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Rspack Shell</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
+`,
+  "apps/rspack-shell/src/mf.d.ts": `// Type declarations for Module Federation remotes.
+// Rspack resolves these at runtime — TypeScript needs a fallback declaration.
+declare module 'mfRemote/Widget' {
+  import type { ComponentType } from 'react';
+  const Widget: ComponentType;
+  export default Widget;
+}
+`,
+  "apps/rspack-shell/src/index.tsx": `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+// Rspack's SWC loader handles TSX via builtin:swc-loader (no Babel needed).
+createRoot(document.getElementById('root')!).render(<App />);
+`,
+  "apps/rspack-shell/src/App.tsx": `import React, { Suspense, lazy } from 'react';
+import type { ComponentType } from 'react';
+
+// mfRemote is declared in rspack.config.js under remotes.
+// Rspack resolves this lazy import to the federated container at runtime.
+// The type declaration is in src/mf.d.ts.
+const RemoteWidget = lazy<ComponentType>(() => import('mfRemote/Widget'));
+
+export default function App(): React.ReactElement {
+  return (
+    <main style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+      <h1>Rspack Shell</h1>
+      <p style={{ color: '#64748b' }}>
+        Bundled with Rspack \u2014 native Module Federation, no plugins or workarounds.
+        The widget below is loaded from a separate webpack remote.
+      </p>
+      <Suspense fallback={<p>Loading remote widget\u2026</p>}>
+        <RemoteWidget />
+      </Suspense>
+    </main>
+  );
+}
+`,
+  "apps/webpack-remote/package.json": `{
+  "name": "rspack-mf-remote",
+  "private": true,
+  "scripts": { "dev": "webpack serve" },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5",
+    "typescript": "^5.6.0",
+    "webpack": "^5",
+    "webpack-cli": "^5",
+    "webpack-dev-server": "^5"
+  }
+}
+`,
+  "apps/webpack-remote/tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+  "apps/webpack-remote/webpack.config.js": `const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: 'auto',
+  },
+  devServer: {
+    port: parseInt(process.env.REMOTE_PORT, 10) || 3001,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'esbuild-loader',
+          options: { loader: 'tsx', jsx: 'automatic', target: 'es2020' },
+        },
+      },
+    ],
+  },
+  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+  plugins: [
+    new webpack.container.ModuleFederationPlugin({
+      name: 'mfRemote',
+      filename: 'remoteEntry.js',
+      exposes: { './Widget': './src/exposes/Widget.tsx' },
+      shared: {
+        react: { singleton: true, eager: true, requiredVersion: '^18.0.0' },
+        'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: './public/index.html' }),
+  ],
+};
+`,
+  "apps/webpack-remote/src/index.js": `// Remote bootstrap page. MF consumers load ./Widget via remoteEntry.js.
+document.getElementById('root').innerHTML =
+  '<div style="padding:2rem;font-family:system-ui">' +
+  '<h2>webpack-remote \u2014 running</h2>' +
+  '<p>Exposes <code>mfRemote/Widget</code> via Module Federation.</p>' +
+  '</div>';
+`,
+  "apps/webpack-remote/src/exposes/Widget.tsx": `import React from 'react';
+
+// Exposed as mfRemote/Widget. The Rspack shell loads this via lazy import.
+export default function Widget(): React.ReactElement {
+  return (
+    <section style={{
+      padding: '1rem', border: '1px solid #e2e8f0',
+      borderRadius: '8px', background: '#f8fafc', maxWidth: '400px',
+    }}>
+      <h2 style={{ margin: '0 0 0.5rem', fontSize: '1rem' }}>Remote Widget</h2>
+      <p style={{ margin: 0, color: '#475569', fontSize: '0.875rem' }}>
+        Served by a webpack remote, consumed by the Rspack shell via native MF.
+      </p>
+    </section>
+  );
+}
+`,
+  "apps/webpack-remote/public/index.html": `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8" /><title>Webpack Remote</title></head>
+<body><div id="root"></div></body>
+</html>
+`,
+};
+
+export const RSPACK_SHELL_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Rspack Shell \u2014 Native MF 2.0",
+  type: "module-federation",
+  activeFile: "apps/rspack-shell/rspack.config.js",
+  files: RSPACK_SHELL_FILES,
+};
+
+export function defaultForType(type: FrontendLabType): FrontendLabWorkspace {
+  if (type === "nextjs") return DEFAULT_NEXTJS_LAB;
+  if (type === "module-federation") return DEFAULT_MODULE_FEDERATION_LAB;
+  return DEFAULT_REACT_LAB;
+}
+
+export function cloneFrontendLabWorkspace(
+  workspace?: FrontendLabWorkspace | null,
+  type?: FrontendLabType,
+): FrontendLabWorkspace {
+  const resolvedType = workspace?.type ?? type ?? "react";
+  const defaults = defaultForType(resolvedType);
+  const source = workspace ?? defaults;
+  const files =
+    source.files && Object.keys(source.files).length > 0
+      ? { ...source.files }
+      : { ...defaults.files };
+  const activeFile = files[source.activeFile]
+    ? source.activeFile
+    : (Object.keys(files)[0] ?? defaults.activeFile);
+
+  return {
+    version: 1,
+    label: source.label?.trim() || defaults.label,
+    type: resolvedType,
+    activeFile,
+    files,
+  };
+}
+
+export function serializeFrontendLabWorkspace(
+  workspace: FrontendLabWorkspace,
+): string {
+  return JSON.stringify(cloneFrontendLabWorkspace(workspace), null, 2);
+}
+
+export function parseFrontendLabWorkspace(
+  raw: string,
+): FrontendLabWorkspace | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<FrontendLabWorkspace> & {
+      files?: Record<string, unknown>;
+    };
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.files || typeof parsed.files !== "object") return null;
+
+    const files = Object.fromEntries(
+      Object.entries(parsed.files).filter(
+        (e): e is [string, string] => typeof e[1] === "string",
+      ),
+    );
+    if (Object.keys(files).length === 0) return null;
+
+    const type: FrontendLabType =
+      parsed.type === "nextjs"
+        ? "nextjs"
+        : parsed.type === "module-federation"
+          ? "module-federation"
+          : "react";
+
+    return cloneFrontendLabWorkspace({
+      version: 1,
+      type,
+      label:
+        typeof parsed.label === "string" && parsed.label.trim()
+          ? parsed.label.trim()
+          : defaultForType(type).label,
+      activeFile:
+        typeof parsed.activeFile === "string"
+          ? parsed.activeFile
+          : defaultForType(type).activeFile,
+      files,
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** Returns the canonical entry file for "Run" → preview. */
+export function getEntryFile(workspace: FrontendLabWorkspace): string {
+  if (workspace.type === "nextjs") {
+    return workspace.files["app/page.tsx"]
+      ? "app/page.tsx"
+      : Object.keys(workspace.files)[0];
+  }
+  if (workspace.type === "module-federation") {
+    return workspace.files["apps/host/src/App.tsx"]
+      ? "apps/host/src/App.tsx"
+      : workspace.files["apps/host/src/App.jsx"]
+        ? "apps/host/src/App.jsx"
+        : Object.keys(workspace.files)[0];
   }
   return workspace.files["main.tsx"]
     ? "main.tsx"