npm - create-interview-cockpit - Versions diffs - 0.15.0 → 0.16.0 - Mend

create-interview-cockpit 0.15.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/package.json +1 -1
package/template/client/src/App.tsx +3 -0
package/template/client/src/components/CanvasLabModal.tsx +585 -0
package/template/client/src/components/LabsPanel.tsx +63 -0
package/template/client/src/components/Sidebar.tsx +12 -1
package/template/client/src/components/WorkspaceSwitcher.tsx +36 -0
package/template/client/src/reactLab.ts +1206 -0
package/template/client/src/store.ts +24 -1
package/template/client/src/types.ts +3 -1
package/template/client/vite.config.ts +15 -8
package/template/cockpit.json +1 -1
package/template/server/src/google-drive.ts +4 -1
package/template/server/src/index.ts +63 -6
package/template/server/src/storage.ts +1 -0

package/template/client/src/reactLab.ts CHANGED Viewed

@@ -1551,6 +1551,1212 @@ export const ISOLATED_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   files: MODULE_FEDERATION_ISOLATED_FILES,
 };
+// ─── 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.js": `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // Use webpack's built-in ModuleFederationPlugin — no extra npm package needed.
+  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;
+  },
+};
+module.exports = nextConfig;
+`,
+  "apps/shell/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
+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';
+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';
+import React from 'react';
+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.js": `/** @type {import('next').NextConfig} */
+const 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 },
+        },
+      })
+    );
+    return config;
+  },
+};
+module.exports = nextConfig;
+`,
+  "apps/remote/src/app/layout.tsx": `import type { Metadata } from 'next';
+import React from 'react';
+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.js": `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // No federation plugin — the shell loads remotes entirely at runtime.
+};
+module.exports = 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.\`);
+  }
+  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": {
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
+  }
+}
+`,
+  "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.js',
+  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: 'jsx', jsx: 'automatic', target: 'es2020' },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'myRemote',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Widget': './src/Widget.jsx',
+      },
+      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.js": `// Async boundary required for Module Federation
+import('./bootstrap');
+`,
+  "apps/remote/src/bootstrap.jsx": `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Widget from './Widget';
+createRoot(document.getElementById('root')).render(<Widget />);
+`,
+  "apps/remote/src/Widget.jsx": `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() {
+  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.js": `/** @type {import('next').NextConfig} */
+// Shell acts as the routing layer.
+// /store and /store/* are proxied to Zone B running at REMOTE_PORT.
+const nextConfig = {
+  async rewrites() {
+    const zoneB = 'http://localhost:' + process.env.REMOTE_PORT;
+    return [
+      { source: '/store', destination: zoneB + '/store' },
+      { source: '/store/:path*', destination: zoneB + '/store/:path*' },
+    ];
+  },
+};
+module.exports = 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.js": `/** @type {import('next').NextConfig} */
+// basePath makes Zone B serve its pages under /store,
+// matching the path prefix the shell forwards here.
+const nextConfig = {
+  basePath: '/store',
+};
+module.exports = 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.js",
+  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.js": `/** @type {import('next').NextConfig} */
+// No webpack hooks needed — federation is handled entirely at runtime
+// inside FederatedWidget.tsx via @module-federation/enhanced/runtime.
+module.exports = {};
+`,
+  "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": {
+    "webpack": "^5",
+    "webpack-cli": "^5",
+    "webpack-dev-server": "^5",
+    "html-webpack-plugin": "^5",
+    "@babel/core": "^7",
+    "@babel/preset-env": "^7",
+    "@babel/preset-react": "^7",
+    "babel-loader": "^9"
+  }
+}
+`,
+  "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.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)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: { presets: ['@babel/preset-env', '@babel/preset-react'] },
+        },
+      },
+    ],
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  plugins: [
+    new webpack.container.ModuleFederationPlugin({
+      name: 'mfRemote',
+      filename: 'remoteEntry.js',
+      exposes: { './Widget': './src/exposes/Widget' },
+      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.js": `// 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.jsx": `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() {
+  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"
+  }
+}
+`,
+  "apps/rspack-shell/rspack.config.js": `const rspack = require('@rspack/core');
+module.exports = {
+  entry: './src/index.jsx',
+  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'] },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        // Rspack ships a built-in SWC loader — no Babel or extra packages needed.
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: { syntax: 'ecmascript', jsx: 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/index.jsx": `import { createRoot } from 'react-dom/client';
+import App from './App';
+// Rspack's SWC loader handles JSX via builtin:swc-loader (no Babel needed).
+createRoot(document.getElementById('root')).render(<App />);
+`,
+  "apps/rspack-shell/src/App.jsx": `import React, { Suspense, lazy } from 'react';
+// mfRemote is declared in rspack.config.js under remotes.
+// Rspack resolves this lazy import to the federated container at runtime.
+const RemoteWidget = lazy(() => import('mfRemote/Widget'));
+export default function App() {
+  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": {
+    "webpack": "^5",
+    "webpack-cli": "^5",
+    "webpack-dev-server": "^5",
+    "html-webpack-plugin": "^5",
+    "@babel/core": "^7",
+    "@babel/preset-env": "^7",
+    "@babel/preset-react": "^7",
+    "babel-loader": "^9"
+  }
+}
+`,
+  "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)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: { presets: ['@babel/preset-env', '@babel/preset-react'] },
+        },
+      },
+    ],
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  plugins: [
+    new webpack.container.ModuleFederationPlugin({
+      name: 'mfRemote',
+      filename: 'remoteEntry.js',
+      exposes: { './Widget': './src/exposes/Widget' },
+      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.jsx": `import React from 'react';
+// Exposed as mfRemote/Widget. The Rspack shell loads this via lazy import.
+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' }}>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;