@multisystemsuite/create-mf-app 1.0.5

package/dist/index.js

@@ -0,0 +1,1774 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/prompts/index.ts
+var import_prompts = require("@inquirer/prompts");
+async function promptCliConfig() {
+  const projectName = await (0, import_prompts.input)({
+    message: "Project Name:",
+    validate: (value) => /^[a-z0-9-]+$/i.test(value) ? true : "Use letters, numbers, and dashes only."
+  });
+  const appType = await (0, import_prompts.select)({
+    message: "Application Type:",
+    choices: [
+      { name: "Parent Container App", value: "parent" },
+      { name: "Child Remote App", value: "child" }
+    ],
+    default: "child"
+  });
+  const children = appType === "parent" ? await (0, import_prompts.checkbox)({
+    message: "Child Applications:",
+    choices: [
+      { name: "admin", value: "admin", checked: true },
+      { name: "qc", value: "qc", checked: true },
+      { name: "inventory", value: "inventory", checked: true },
+      { name: "shopfloor", value: "shopfloor", checked: true }
+    ]
+  }) : [];
+  const sharedRaw = appType === "parent" ? await (0, import_prompts.input)({
+    message: "Shared Applications (comma separated):",
+    default: "sharedlib",
+    validate: (value) => value.trim().length > 0 ? true : "At least one shared application is required in parent mode."
+  }) : "";
+  const template = await (0, import_prompts.select)({
+    message: "Choose Template:",
+    choices: [
+      { name: "React + TypeScript (.tsx)", value: "tsx" },
+      { name: "React + JavaScript (.jsx)", value: "jsx" }
+    ],
+    default: "tsx"
+  });
+  const port = await (0, import_prompts.input)({
+    message: "Port Number:",
+    default: "3001",
+    validate: (value) => /^\d+$/.test(value) ? true : "Port must be numeric."
+  });
+  const federation = await (0, import_prompts.confirm)({
+    message: "Enable Module Federation:",
+    default: true
+  });
+  const docker = await (0, import_prompts.confirm)({
+    message: "Enable Docker:",
+    default: true
+  });
+  return {
+    projectName: projectName.trim(),
+    port: Number(port),
+    docker,
+    federation,
+    template,
+    appType,
+    children,
+    shared: appType === "parent" ? sharedRaw.split(",").map((item) => item.trim()).filter(Boolean) : []
+  };
+}
+
+// src/generators/project.ts
+var import_node_path2 = __toESM(require("path"));
+var import_fs_extra2 = __toESM(require("fs-extra"));
+
+// src/utils/fs.ts
+var import_node_path = __toESM(require("path"));
+var import_fs_extra = __toESM(require("fs-extra"));
+async function assertTargetDirectoryDoesNotExist(config) {
+  const projectRoot = import_node_path.default.join(process.cwd(), config.projectName);
+  const exists = await import_fs_extra.default.pathExists(projectRoot);
+  if (exists) {
+    throw new Error(`Directory already exists: ${config.projectName}`);
+  }
+  return projectRoot;
+}
+async function writeFile(projectRoot, filePath, content) {
+  await import_fs_extra.default.outputFile(import_node_path.default.join(projectRoot, filePath), content);
+}
+
+// src/templates/react-tsx/index.ts
+function getMuiDependenciesForCurrentNode() {
+  const nodeMajor = Number(process.versions.node.split(".")[0] || "0");
+  if (nodeMajor >= 20) {
+    return {
+      "@emotion/react": "^11.14.0",
+      "@emotion/styled": "^11.14.0",
+      "@mui/material": "^7.2.0",
+      "@mui/icons-material": "^7.2.0"
+    };
+  }
+  return {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/material": "^6.4.8",
+    "@mui/icons-material": "^6.4.8"
+  };
+}
+var SHARED_DIRS = [
+  "public",
+  "src/assets",
+  "src/components/layout",
+  "src/entity",
+  "src/hooks",
+  "src/layouts",
+  "src/module-federation",
+  "src/pages/Home",
+  "src/routes",
+  "src/services",
+  "src/store",
+  "src/styles",
+  "src/utils"
+];
+function getTsxDirectories() {
+  return [...SHARED_DIRS, "src/types"];
+}
+function getTsxFiles(config) {
+  const { projectName, port, federation } = config;
+  const muiDependencies = getMuiDependenciesForCurrentNode();
+  return {
+    ".env": `VITE_PORT=${port}
+VITE_APP_NAME=${projectName}
+VITE_REMOTE_ENTRY=http://localhost:${port}/assets/remoteEntry.js
+`,
+    ".gitignore": "node_modules\ndist\n.env.local\n*.log\n",
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+    "package.json": `${JSON.stringify(
+      {
+        name: projectName,
+        private: true,
+        version: "0.1.0",
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "tsc -b && vite build",
+          watch: "vite build --watch --mode localdev",
+          preview: "vite preview",
+          "preview:local": "vite preview --mode localdev"
+        },
+        dependencies: {
+          ...muiDependencies,
+          react: "^19.0.0",
+          "react-dom": "^19.0.0",
+          "react-router-dom": "^7.0.0"
+        },
+        devDependencies: {
+          "@originjs/vite-plugin-federation": "^1.3.9",
+          "@types/node": "^22.13.0",
+          "@types/react": "^19.0.0",
+          "@types/react-dom": "^19.0.0",
+          "@vitejs/plugin-react": "^5.0.0",
+          typescript: "^5.8.0",
+          vite: "^7.0.0"
+        }
+      },
+      null,
+      2
+    )}
+`,
+    "tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["node"],
+    "strict": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
+`,
+    "vite.config.ts": `import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import { buildFederation } from "./src/module-federation/federation.config";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const appPort = Number(env.VITE_PORT || ${port});
+
+  return {
+    server: { host: true, port: appPort, strictPort: true },
+    preview: { port: appPort },
+    plugins: [react()${federation ? ", buildFederation()" : ""}],
+  };
+});
+`,
+    "README.md": `# ${projectName}
+
+Generated by create-mf-app (React + TypeScript).
+`,
+    "src/App.tsx": `import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+
+export default function App() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>${projectName} Microfrontend</h1>
+        <p>Module Federation Working</p>
+      </header>
+      <main className="app-content"><AppRouter /></main>
+      <footer className="app-footer">
+        <span>Template: TSX</span>
+        <span>Port: {import.meta.env.VITE_PORT}</span>
+      </footer>
+    </div>
+  );
+}
+`,
+    "src/main.tsx": `import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <BrowserRouter><App /></BrowserRouter>
+  </React.StrictMode>,
+);
+`,
+    "src/components/layout/Header.tsx": `export function Header() {
+  return <div className="section-card"><strong>${projectName} Header</strong></div>;
+}
+`,
+    "src/pages/Home/HomePage.tsx": `import { Header } from "../../components/layout/Header";
+
+export function HomePage() {
+  return (
+    <section>
+      <Header />
+      <div className="section-card">Enterprise TSX template is ready.</div>
+    </section>
+  );
+}
+`,
+    "src/routes/AppRouter.tsx": `import { Navigate, Route, Routes } from "react-router-dom";
+import { HomePage } from "../pages/Home/HomePage";
+
+export function AppRouter() {
+  return <Routes><Route path="/" element={<HomePage />} /><Route path="*" element={<Navigate to="/" replace />} /></Routes>;
+}
+`,
+    "src/styles/global.css": `:root { font-family: Inter, system-ui, sans-serif; color: #f3f4f6; background: #111827; }
+* { box-sizing: border-box; }
+body { margin: 0; }
+.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
+.app-header,.app-footer { padding: 1rem; background: #0f172a; border-color: #334155; }
+.app-content { padding: 1rem; }
+.section-card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; }
+`,
+    "src/module-federation/remotes.ts": `export const remotes = { self: import.meta.env.VITE_REMOTE_ENTRY };
+`,
+    "src/module-federation/federation.config.ts": `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: "${projectName}",
+    filename: "remoteEntry.js",
+    exposes: { "./App": "./src/App.tsx" },
+    remotes: {},
+    shared: {
+      react: { singleton: true } as any,
+      "react-dom": { singleton: true } as any,
+      "react-router-dom": { singleton: true } as any,
+      "@mui/material": { singleton: true } as any,
+      "@mui/icons-material": { singleton: true } as any,
+      "@emotion/react": { singleton: true } as any,
+      "@emotion/styled": { singleton: true } as any
+    },
+  });
+}
+`,
+    "src/vite-env.d.ts": '/// <reference types="vite/client" />\n'
+  };
+}
+
+// src/templates/react-jsx/index.ts
+function getMuiDependenciesForCurrentNode2() {
+  const nodeMajor = Number(process.versions.node.split(".")[0] || "0");
+  if (nodeMajor >= 20) {
+    return {
+      "@emotion/react": "^11.14.0",
+      "@emotion/styled": "^11.14.0",
+      "@mui/material": "^7.2.0",
+      "@mui/icons-material": "^7.2.0"
+    };
+  }
+  return {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/material": "^6.4.8",
+    "@mui/icons-material": "^6.4.8"
+  };
+}
+var SHARED_DIRS2 = [
+  "public",
+  "src/assets",
+  "src/components/layout",
+  "src/entity",
+  "src/hooks",
+  "src/layouts",
+  "src/module-federation",
+  "src/pages/Home",
+  "src/routes",
+  "src/services",
+  "src/store",
+  "src/styles",
+  "src/utils"
+];
+function getJsxDirectories() {
+  return SHARED_DIRS2;
+}
+function getJsxFiles(config) {
+  const { projectName, port, federation } = config;
+  const muiDependencies = getMuiDependenciesForCurrentNode2();
+  return {
+    ".env": `VITE_PORT=${port}
+VITE_APP_NAME=${projectName}
+VITE_REMOTE_ENTRY=http://localhost:${port}/assets/remoteEntry.js
+`,
+    ".gitignore": "node_modules\ndist\n.env.local\n*.log\n",
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>${projectName}</title></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`,
+    "package.json": `${JSON.stringify(
+      {
+        name: projectName,
+        private: true,
+        version: "0.1.0",
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "vite build",
+          watch: "vite build --watch --mode localdev",
+          preview: "vite preview",
+          "preview:local": "vite preview --mode localdev"
+        },
+        dependencies: {
+          ...muiDependencies,
+          react: "^19.0.0",
+          "react-dom": "^19.0.0",
+          "react-router-dom": "^7.0.0"
+        },
+        devDependencies: {
+          "@originjs/vite-plugin-federation": "^1.3.9",
+          "@vitejs/plugin-react": "^5.0.0",
+          vite: "^7.0.0"
+        }
+      },
+      null,
+      2
+    )}
+`,
+    "jsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "vite.config.js"]
+}
+`,
+    "vite.config.js": `import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import { buildFederation } from "./src/module-federation/federation.config.js";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const appPort = Number(env.VITE_PORT || ${port});
+  return {
+    server: { host: true, port: appPort, strictPort: true },
+    preview: { port: appPort },
+    plugins: [react()${federation ? ", buildFederation()" : ""}],
+  };
+});
+`,
+    "README.md": `# ${projectName}
+
+Generated by create-mf-app (React + JavaScript).
+`,
+    "src/App.jsx": `import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+
+export default function App() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>${projectName} Microfrontend</h1>
+        <p>Module Federation Working</p>
+      </header>
+      <main className="app-content"><AppRouter /></main>
+      <footer className="app-footer">
+        <span>Template: JSX</span>
+        <span>Port: {import.meta.env.VITE_PORT}</span>
+      </footer>
+    </div>
+  );
+}
+`,
+    "src/main.jsx": `import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>,
+);
+`,
+    "src/components/layout/Header.jsx": `export function Header() {
+  return <div className="section-card"><strong>${projectName} Header</strong></div>;
+}
+`,
+    "src/pages/Home/HomePage.jsx": `import { Header } from "../../components/layout/Header";
+
+export function HomePage() {
+  return (
+    <section>
+      <Header />
+      <div className="section-card">Enterprise JSX template is ready.</div>
+    </section>
+  );
+}
+`,
+    "src/routes/AppRouter.jsx": `import { Navigate, Route, Routes } from "react-router-dom";
+import { HomePage } from "../pages/Home/HomePage";
+
+export function AppRouter() {
+  return <Routes><Route path="/" element={<HomePage />} /><Route path="*" element={<Navigate to="/" replace />} /></Routes>;
+}
+`,
+    "src/styles/global.css": `:root { font-family: Inter, system-ui, sans-serif; color: #f3f4f6; background: #111827; }
+* { box-sizing: border-box; }
+body { margin: 0; }
+.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
+.app-header,.app-footer { padding: 1rem; background: #0f172a; border-color: #334155; }
+.app-content { padding: 1rem; }
+.section-card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem; }
+`,
+    "src/module-federation/remotes.js": `export const remotes = { self: import.meta.env.VITE_REMOTE_ENTRY };
+`,
+    "src/module-federation/federation.config.js": `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: "${projectName}",
+    filename: "remoteEntry.js",
+    exposes: { "./App": "./src/App.jsx" },
+    remotes: {},
+    shared: {
+      react: { singleton: true },
+      "react-dom": { singleton: true },
+      "react-router-dom": { singleton: true },
+      "@mui/material": { singleton: true },
+      "@mui/icons-material": { singleton: true },
+      "@emotion/react": { singleton: true },
+      "@emotion/styled": { singleton: true }
+    },
+  });
+}
+`
+  };
+}
+
+// src/generators/project.ts
+function getDockerfile(port) {
+  return `FROM node:22-alpine
+
+WORKDIR /app
+COPY . .
+RUN npm install
+EXPOSE ${port}
+CMD ["npm","run","dev","--","--host"]
+`;
+}
+async function generateProject(config) {
+  const projectRoot = import_node_path2.default.join(process.cwd(), config.projectName);
+  await import_fs_extra2.default.ensureDir(projectRoot);
+  if (config.appType === "parent") {
+    await generateParentWorkspace(projectRoot, config);
+    return;
+  }
+  await generateSingleApp(projectRoot, config.projectName, config.port, config);
+}
+async function generateSingleApp(projectRoot, appName, port, config) {
+  const appConfig = { ...config, projectName: appName, port };
+  const directories = appConfig.template === "tsx" ? getTsxDirectories() : getJsxDirectories();
+  await Promise.all(directories.map((directory) => import_fs_extra2.default.ensureDir(import_node_path2.default.join(projectRoot, directory))));
+  const files = appConfig.template === "tsx" ? getTsxFiles(appConfig) : getJsxFiles(appConfig);
+  await Promise.all(Object.entries(files).map(([filePath, content]) => writeFile(projectRoot, filePath, content)));
+  if (config.template === "tsx") {
+    await writeFile(projectRoot, "src/App.tsx", getAppView(appName, port));
+  } else {
+    await writeFile(projectRoot, "src/App.jsx", getAppView(appName, port));
+  }
+  if (config.docker) {
+    await writeFile(projectRoot, "Dockerfile", getDockerfile(port));
+  }
+}
+async function generateParentWorkspace(projectRoot, config) {
+  const uniqueChildren = Array.from(new Set(config.children));
+  const sharedApps = Array.from(new Set(config.shared.length ? config.shared : ["sharedlib"]));
+  const mainApp = "main";
+  const allApps = [mainApp, ...uniqueChildren, ...sharedApps];
+  const remotes = allApps.filter((name) => name !== mainApp);
+  const portMap = buildPortMap(allApps, 3e3);
+  await Promise.all(["apps", "scripts"].map((directory) => import_fs_extra2.default.ensureDir(import_node_path2.default.join(projectRoot, directory))));
+  await Promise.all(["shared-ui", "shared-utils", "shared-auth"].map((pkg) => import_fs_extra2.default.ensureDir(import_node_path2.default.join(projectRoot, `packages/${pkg}`))));
+  await Promise.all(
+    allApps.map((appName) => generateSingleApp(import_node_path2.default.join(projectRoot, `apps/${appName}`), appName, portMap[appName], config))
+  );
+  if (config.federation) {
+    const remotesMap = Object.fromEntries(remotes.map((name) => [name, portMap[name]]));
+    if (config.template === "tsx") {
+      await writeFile(import_node_path2.default.join(projectRoot, "apps/main"), "src/module-federation/federation.config.ts", getHostFederationTs(remotesMap));
+    } else {
+      await writeFile(import_node_path2.default.join(projectRoot, "apps/main"), "src/module-federation/federation.config.js", getHostFederationJs(remotesMap));
+    }
+  }
+  await wireSharedLibAndMainNavigation(projectRoot, config, uniqueChildren, sharedApps, portMap);
+  await writeFile(projectRoot, "package.json", getWorkspacePackageJson(config.projectName, allApps, remotes));
+  await writeFile(projectRoot, ".npmrc", "install-strategy=nested\n");
+  await writeFile(projectRoot, "README.md", getWorkspaceReadme(config.projectName, portMap));
+  await writeFile(projectRoot, ".env", getRootEnvFile(config.projectName, portMap));
+  await writeFile(projectRoot, "docker-compose.yml", getDockerCompose(allApps, portMap, config.docker));
+  await writeFile(projectRoot, "print-env.js", getPrintEnvScript());
+  await writeFile(projectRoot, "smart-build.js", getSmartBuildScript());
+  await writeFile(projectRoot, "live-reload.js", getLiveReloadScript());
+  await writeFile(projectRoot, "scripts/bump-version.js", getBumpVersionScript());
+}
+async function wireSharedLibAndMainNavigation(projectRoot, config, children, sharedApps, portMap) {
+  const sharedName = sharedApps[0];
+  if (!sharedName) {
+    return;
+  }
+  if (config.template === "tsx") {
+    await writeFile(import_node_path2.default.join(projectRoot, `apps/${sharedName}`), "src/components/layout/SharedBadge.tsx", getSharedBadgeTsx());
+    await Promise.all(
+      Object.entries(getSharedlibFoundationFilesTs()).map(
+        ([filePath, content]) => writeFile(import_node_path2.default.join(projectRoot, `apps/${sharedName}`), filePath, content)
+      )
+    );
+    await writeFile(
+      import_node_path2.default.join(projectRoot, `apps/${sharedName}`),
+      "src/module-federation/federation.config.ts",
+      getSharedlibFederationTs(sharedName)
+    );
+    await writeFile(import_node_path2.default.join(projectRoot, "apps/main"), "src/App.tsx", getMainNavbarAppTsx(children, sharedName));
+    await writeFile(import_node_path2.default.join(projectRoot, "apps/main"), "src/routes/AppRouter.tsx", getMainRouterTsx(children));
+    await Promise.all(
+      children.map(
+        (child) => writeFile(import_node_path2.default.join(projectRoot, `apps/${child}`), "src/App.tsx", getChildAppTsx(child, portMap[child], sharedName))
+      )
+    );
+    await writeFile(
+      import_node_path2.default.join(projectRoot, "apps/main"),
+      "src/types/federation-remotes.d.ts",
+      getMainFederationTypeDeclTs(children, sharedName)
+    );
+    await Promise.all(
+      children.map(
+        (child) => writeFile(
+          import_node_path2.default.join(projectRoot, `apps/${child}`),
+          "src/types/federation-remotes.d.ts",
+          getChildFederationTypeDeclTs(sharedName)
+        )
+      )
+    );
+    await Promise.all(
+      ["main", ...children].map(
+        (app) => writeFile(
+          import_node_path2.default.join(projectRoot, `apps/${app}`),
+          "src/module-federation/federation.config.ts",
+          app === "main" ? getHostFederationTs(Object.fromEntries([...children, ...sharedApps].map((r) => [r, portMap[r]]))) : getChildFederationTs(app, sharedName, portMap[sharedName])
+        )
+      )
+    );
+  } else {
+    await writeFile(import_node_path2.default.join(projectRoot, `apps/${sharedName}`), "src/components/layout/SharedBadge.jsx", getSharedBadgeJsx());
+    await writeFile(
+      import_node_path2.default.join(projectRoot, `apps/${sharedName}`),
+      "src/module-federation/federation.config.js",
+      getSharedlibFederationJs(sharedName)
+    );
+    await writeFile(import_node_path2.default.join(projectRoot, "apps/main"), "src/App.jsx", getMainNavbarAppJsx(children, sharedName));
+    await writeFile(import_node_path2.default.join(projectRoot, "apps/main"), "src/routes/AppRouter.jsx", getMainRouterJsx(children));
+    await Promise.all(
+      children.map(
+        (child) => writeFile(import_node_path2.default.join(projectRoot, `apps/${child}`), "src/App.jsx", getChildAppJsx(child, portMap[child], sharedName))
+      )
+    );
+    await Promise.all(
+      ["main", ...children].map(
+        (app) => writeFile(
+          import_node_path2.default.join(projectRoot, `apps/${app}`),
+          "src/module-federation/federation.config.js",
+          app === "main" ? getHostFederationJs(Object.fromEntries([...children, ...sharedApps].map((r) => [r, portMap[r]]))) : getChildFederationJs(app, sharedName, portMap[sharedName])
+        )
+      )
+    );
+  }
+}
+function buildPortMap(apps, startPort) {
+  const portMap = {};
+  apps.forEach((app, index) => {
+    portMap[app] = startPort + index;
+  });
+  return portMap;
+}
+function getAppView(appName, port) {
+  const appLabel = appName.charAt(0).toUpperCase() + appName.slice(1);
+  return `import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+
+export default function App() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>${appLabel} Microfrontend</h1>
+        <p>Module Federation Working</p>
+      </header>
+      <main className="app-content"><AppRouter /></main>
+      <footer className="app-footer">
+        <span>Environment: {import.meta.env.DEV ? "Development" : "Production"}</span>
+        <span>Port: ${port}</span>
+      </footer>
+    </div>
+  );
+}
+`;
+}
+function getMainNavbarAppTsx(children, sharedName) {
+  const modules = JSON.stringify(children);
+  return `import React from "react";
+import { Link } from "react-router-dom";
+import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+const AppConfigProvider = React.lazy(() => import(${JSON.stringify(`${sharedName}/AppConfigProvider`)}));
+const AppNavbar = React.lazy(() => import(${JSON.stringify(`${sharedName}/AppNavbar`)}));
+
+export default function App() {
+  const modules = ${modules};
+  return (
+    <React.Suspense fallback={<div>Loading configuration provider...</div>}>
+      <AppConfigProvider>
+        <div className="app-shell">
+          <header className="app-header">
+            <h1>Main Microfrontend</h1>
+            <p>Module Federation Working</p>
+            <React.Suspense fallback={<div>Loading navbar...</div>}>
+              <AppNavbar title="Enterprise Platform">
+                <Link to="/">home</Link>
+                {" | "}
+                {modules.map((name) => (
+                  <span key={name}>
+                    <Link to={\`/\${name}\`}>{name}</Link>{" | "}
+                  </span>
+                ))}
+                <Link to="/settings/theme">theme</Link>
+              </AppNavbar>
+            </React.Suspense>
+          </header>
+          <main className="app-content"><AppRouter /></main>
+          <footer className="app-footer"><span>Shared: ${sharedName}</span><span>Port: {import.meta.env.VITE_PORT}</span></footer>
+        </div>
+      </AppConfigProvider>
+    </React.Suspense>
+  );
+}
+`;
+}
+function getMainRouterTsx(children) {
+  const lazyImports = children.map(
+    (child) => `const ${toPascal(child)}Remote = React.lazy(() => import(${JSON.stringify(`${child}/App`)}));`
+  ).join("\n");
+  const routes = children.map((child) => `<Route path="/${child}/*" element={<React.Suspense fallback={<div>Loading ${child}...</div>}><${toPascal(child)}Remote /></React.Suspense>} />`).join("\n      ");
+  return `import React from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+const SettingsPage = React.lazy(() => import("sharedlib/SettingsPage"));
+
+${lazyImports}
+
+export function AppRouter() {
+  return (
+    <Routes>
+      <Route path="/" element={<div>Select a module from navbar.</div>} />
+      <Route path="/settings/theme" element={<React.Suspense fallback={<div>Loading settings...</div>}><SettingsPage section="theme" /></React.Suspense>} />
+      <Route path="/settings/layout" element={<React.Suspense fallback={<div>Loading settings...</div>}><SettingsPage section="layout" /></React.Suspense>} />
+      <Route path="/settings/branding" element={<React.Suspense fallback={<div>Loading settings...</div>}><SettingsPage section="branding" /></React.Suspense>} />
+      ${routes}
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
+`;
+}
+function getChildAppTsx(appName, port, sharedName) {
+  return `import React from "react";
+import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+const SharedBadge = React.lazy(() => import(${JSON.stringify(`${sharedName}/SharedBadge`)}));
+
+export default function App() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>${toPascal(appName)} Microfrontend</h1>
+        <p>Module Federation Working</p>
+      </header>
+      <main className="app-content">
+        <React.Suspense fallback={<div>Loading shared library...</div>}><SharedBadge /></React.Suspense>
+        <AppRouter />
+      </main>
+      <footer className="app-footer"><span>Port: ${port}</span></footer>
+    </div>
+  );
+}
+`;
+}
+function getChildFederationTs(appName, sharedName, sharedPort) {
+  return `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: ${JSON.stringify(appName)},
+    filename: "remoteEntry.js",
+    exposes: { "./App": "./src/App.tsx" },
+    remotes: { ${JSON.stringify(sharedName)}: "http://localhost:${sharedPort}/assets/remoteEntry.js" },
+    shared: {
+      react: { singleton: true } as any,
+      "react-dom": { singleton: true } as any,
+      "react-router-dom": { singleton: true } as any,
+      "@mui/material": { singleton: true } as any,
+      "@mui/icons-material": { singleton: true } as any,
+      "@emotion/react": { singleton: true } as any,
+      "@emotion/styled": { singleton: true } as any
+    },
+  });
+}
+`;
+}
+function getSharedlibFederationTs(sharedName) {
+  return `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: ${JSON.stringify(sharedName)},
+    filename: "remoteEntry.js",
+    exposes: {
+      "./App": "./src/App.tsx",
+      "./SharedBadge": "./src/components/layout/SharedBadge.tsx",
+      "./AppConfigProvider": "./src/config/AppConfigProvider.tsx",
+      "./useAppConfig": "./src/config/useAppConfig.ts",
+      "./SettingsPage": "./src/pages/Settings/SettingsPage.tsx",
+      "./AppNavbar": "./src/shared-ui/AppNavbar/AppNavbar.tsx",
+      "./AppSidebar": "./src/shared-ui/AppSidebar/AppSidebar.tsx"
+    },
+    shared: {
+      react: { singleton: true } as any,
+      "react-dom": { singleton: true } as any,
+      "react-router-dom": { singleton: true } as any,
+      "@mui/material": { singleton: true } as any,
+      "@mui/icons-material": { singleton: true } as any,
+      "@emotion/react": { singleton: true } as any,
+      "@emotion/styled": { singleton: true } as any
+    },
+  });
+}
+`;
+}
+function getSharedBadgeTsx() {
+  return `export default function SharedBadge() {
+  return <div className="section-card"><strong>SharedLib:</strong> SharedBadge loaded from sharedlib remote.</div>;
+}
+`;
+}
+function getMainFederationTypeDeclTs(children, sharedName) {
+  const lines = children.map(
+    (child) => `declare module ${JSON.stringify(`${child}/App`)} {
+  const RemoteApp: React.ComponentType;
+  export default RemoteApp;
+}`
+  ).join("\n\n");
+  return `/// <reference types="react" />
+${lines}
+declare module ${JSON.stringify(`${sharedName}/AppConfigProvider`)} {
+  const AppConfigProvider: React.ComponentType<{ children?: React.ReactNode }>;
+  export default AppConfigProvider;
+}
+declare module ${JSON.stringify(`${sharedName}/SettingsPage`)} {
+  const SettingsPage: React.ComponentType<{ section?: "theme" | "layout" | "branding" }>;
+  export default SettingsPage;
+}
+declare module ${JSON.stringify(`${sharedName}/AppNavbar`)} {
+  const AppNavbar: React.ComponentType<{ title?: string; children?: React.ReactNode }>;
+  export default AppNavbar;
+}
+`;
+}
+function getChildFederationTypeDeclTs(sharedName) {
+  return `/// <reference types="react" />
+declare module ${JSON.stringify(`${sharedName}/SharedBadge`)} {
+  const SharedBadge: React.ComponentType;
+  export default SharedBadge;
+}
+`;
+}
+function getMainNavbarAppJsx(children, sharedName) {
+  const modules = JSON.stringify(children);
+  return `import { Link } from "react-router-dom";
+import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+
+export default function App() {
+  const modules = ${modules};
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>Main Microfrontend</h1>
+        <p>Module Federation Working</p>
+        <nav>
+          <Link to="/">home</Link>
+          {" | "}
+          {modules.map((name) => (
+            <span key={name}>
+              <Link to={\`/\${name}\`}>{name}</Link>{" | "}
+            </span>
+          ))}
+        </nav>
+      </header>
+      <main className="app-content"><AppRouter /></main>
+      <footer className="app-footer"><span>Shared: ${sharedName}</span><span>Port: {import.meta.env.VITE_PORT}</span></footer>
+    </div>
+  );
+}
+`;
+}
+function getMainRouterJsx(children) {
+  const lazyImports = children.map((child) => `const ${toPascal(child)}Remote = React.lazy(() => import(${JSON.stringify(`${child}/App`)}));`).join("\n");
+  const routes = children.map((child) => `<Route path="/${child}/*" element={<React.Suspense fallback={<div>Loading ${child}...</div>}><${toPascal(child)}Remote /></React.Suspense>} />`).join("\n      ");
+  return `import React from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+
+${lazyImports}
+
+export function AppRouter() {
+  return (
+    <Routes>
+      <Route path="/" element={<div>Select a module from navbar.</div>} />
+      ${routes}
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
+`;
+}
+function getChildAppJsx(appName, port, sharedName) {
+  return `import React from "react";
+import { AppRouter } from "./routes/AppRouter";
+import "./styles/global.css";
+const SharedBadge = React.lazy(() => import(${JSON.stringify(`${sharedName}/SharedBadge`)}));
+
+export default function App() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <h1>${toPascal(appName)} Microfrontend</h1>
+        <p>Module Federation Working</p>
+      </header>
+      <main className="app-content">
+        <React.Suspense fallback={<div>Loading shared library...</div>}><SharedBadge /></React.Suspense>
+        <AppRouter />
+      </main>
+      <footer className="app-footer"><span>Port: ${port}</span></footer>
+    </div>
+  );
+}
+`;
+}
+function getChildFederationJs(appName, sharedName, sharedPort) {
+  return `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: ${JSON.stringify(appName)},
+    filename: "remoteEntry.js",
+    exposes: { "./App": "./src/App.jsx" },
+    remotes: { ${JSON.stringify(sharedName)}: "http://localhost:${sharedPort}/assets/remoteEntry.js" },
+    shared: {
+      react: { singleton: true },
+      "react-dom": { singleton: true },
+      "react-router-dom": { singleton: true },
+      "@mui/material": { singleton: true },
+      "@mui/icons-material": { singleton: true },
+      "@emotion/react": { singleton: true },
+      "@emotion/styled": { singleton: true }
+    },
+  });
+}
+`;
+}
+function getSharedlibFederationJs(sharedName) {
+  return `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: ${JSON.stringify(sharedName)},
+    filename: "remoteEntry.js",
+    exposes: {
+      "./App": "./src/App.jsx",
+      "./SharedBadge": "./src/components/layout/SharedBadge.jsx"
+    },
+    shared: {
+      react: { singleton: true },
+      "react-dom": { singleton: true },
+      "react-router-dom": { singleton: true },
+      "@mui/material": { singleton: true },
+      "@mui/icons-material": { singleton: true },
+      "@emotion/react": { singleton: true },
+      "@emotion/styled": { singleton: true }
+    },
+  });
+}
+`;
+}
+function getSharedBadgeJsx() {
+  return `export default function SharedBadge() {
+  return <div className="section-card"><strong>SharedLib:</strong> SharedBadge loaded from sharedlib remote.</div>;
+}
+`;
+}
+function toPascal(value) {
+  return value.split(/[^a-zA-Z0-9]/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function getSharedlibFoundationFilesTs() {
+  return {
+    "src/config/types.ts": `export type ColorMode = "light" | "dark" | "auto";
+
+export interface AppConfig {
+  appName: string;
+  appTitle: string;
+  companyName: string;
+  navbarTitle: string;
+  logoUrl: string;
+  sidebarLogoUrl: string;
+  faviconUrl: string;
+  primaryColor: string;
+  secondaryColor: string;
+  backgroundColor: string;
+  sidebarBackground: string;
+  navbarBackground: string;
+  cardBackground: string;
+  textColor: string;
+  hoverColor: string;
+  borderColor: string;
+  fontFamily: string;
+  fontSize: number;
+  headingWeight: number;
+  bodyWeight: number;
+  sidebarCollapsed: boolean;
+  sidebarWidth: number;
+  sidebarIconSize: number;
+  sidebarTheme: "solid" | "glass" | "floating";
+  compactMode: boolean;
+  floatingSidebar: boolean;
+  glassSidebar: boolean;
+  navbarHeight: number;
+  navbarBlur: boolean;
+  navbarSticky: boolean;
+  navbarTransparent: boolean;
+  showSearch: boolean;
+  showNotifications: boolean;
+  showProfile: boolean;
+  dashboardBackground: string;
+  cardRadius: number;
+  cardShadow: string;
+  widgetSpacing: number;
+  layoutDensity: "comfortable" | "compact";
+  colorMode: ColorMode;
+  roleAccess: Record<string, string[]>;
+  featureFlags: Record<string, boolean>;
+  tenantId: string;
+  locale: string;
+  rtl: boolean;
+}
+`,
+    "src/config/defaultConfig.ts": `import type { AppConfig } from "./types";
+
+export const themePresets: Record<string, Partial<AppConfig>> = {
+  "Corporate Blue": { primaryColor: "#1976d2", secondaryColor: "#1565c0", navbarBackground: "#0f172a" },
+  "Dark Enterprise": { colorMode: "dark", backgroundColor: "#0b1220", textColor: "#f1f5f9" },
+  "Material Purple": { primaryColor: "#7e57c2", secondaryColor: "#9c27b0" },
+  "Minimal Gray": { primaryColor: "#4b5563", secondaryColor: "#6b7280", cardShadow: "none" },
+  "Modern Green": { primaryColor: "#10b981", secondaryColor: "#059669" },
+};
+
+export const defaultConfig: AppConfig = {
+  appName: "DWAT",
+  appTitle: "Enterprise Microfrontend Platform",
+  companyName: "Acme Corp",
+  navbarTitle: "Control Center",
+  logoUrl: "",
+  sidebarLogoUrl: "",
+  faviconUrl: "",
+  primaryColor: "#1976d2",
+  secondaryColor: "#9c27b0",
+  backgroundColor: "#f5f5f5",
+  sidebarBackground: "#111827",
+  navbarBackground: "#0f172a",
+  cardBackground: "#ffffff",
+  textColor: "#111827",
+  hoverColor: "#1d4ed8",
+  borderColor: "#d1d5db",
+  fontFamily: "Inter, system-ui, sans-serif",
+  fontSize: 14,
+  headingWeight: 700,
+  bodyWeight: 400,
+  sidebarCollapsed: false,
+  sidebarWidth: 260,
+  sidebarIconSize: 20,
+  sidebarTheme: "solid",
+  compactMode: false,
+  floatingSidebar: false,
+  glassSidebar: false,
+  navbarHeight: 64,
+  navbarBlur: true,
+  navbarSticky: true,
+  navbarTransparent: false,
+  showSearch: true,
+  showNotifications: true,
+  showProfile: true,
+  dashboardBackground: "#f5f5f5",
+  cardRadius: 12,
+  cardShadow: "0 8px 24px rgba(15,23,42,0.12)",
+  widgetSpacing: 16,
+  layoutDensity: "comfortable",
+  colorMode: "light",
+  roleAccess: { admin: ["theme:write", "branding:write"], viewer: ["theme:read"] },
+  featureFlags: { commandPalette: true, analyticsWidget: true, pluginRegistry: true },
+  tenantId: "default",
+  locale: "en",
+  rtl: false,
+};
+`,
+    "src/config/configStore.ts": `import { defaultConfig, themePresets } from "./defaultConfig";
+import type { AppConfig } from "./types";
+
+const STORAGE_KEY = "mf-enterprise-config";
+
+export function loadConfig(): AppConfig {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return defaultConfig;
+    return { ...defaultConfig, ...(JSON.parse(raw) as Partial<AppConfig>) };
+  } catch {
+    return defaultConfig;
+  }
+}
+
+export function saveConfig(config: AppConfig): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+}
+
+export function resetConfig(): AppConfig {
+  saveConfig(defaultConfig);
+  return defaultConfig;
+}
+
+export function applyPreset(config: AppConfig, presetName: string): AppConfig {
+  const patch = themePresets[presetName] ?? {};
+  const next = { ...config, ...patch };
+  saveConfig(next);
+  return next;
+}
+`,
+    "src/config/themeGenerator.ts": `import { createTheme } from "@mui/material/styles";
+import type { AppConfig } from "./types";
+
+export function buildMuiTheme(config: AppConfig) {
+  return createTheme({
+    direction: config.rtl ? "rtl" : "ltr",
+    palette: {
+      mode: config.colorMode === "dark" ? "dark" : "light",
+      primary: { main: config.primaryColor },
+      secondary: { main: config.secondaryColor },
+      background: { default: config.backgroundColor, paper: config.cardBackground },
+      text: { primary: config.textColor },
+    },
+    typography: {
+      fontFamily: config.fontFamily,
+      fontSize: config.fontSize,
+      h1: { fontWeight: config.headingWeight },
+      body1: { fontWeight: config.bodyWeight },
+    },
+    shape: { borderRadius: config.cardRadius },
+  });
+}
+`,
+    "src/config/AppConfigProvider.tsx": `import React, { createContext, useMemo, useState } from "react";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { applyPreset, loadConfig, resetConfig, saveConfig } from "./configStore";
+import { buildMuiTheme } from "./themeGenerator";
+import type { AppConfig } from "./types";
+
+type AppConfigContextValue = {
+  config: AppConfig;
+  updateConfig: (patch: Partial<AppConfig>) => void;
+  setPreset: (name: string) => void;
+  reset: () => void;
+  exportJson: () => string;
+  importJson: (payload: string) => void;
+};
+
+export const AppConfigContext = createContext<AppConfigContextValue | null>(null);
+
+export default function AppConfigProvider({ children }: { children?: React.ReactNode }) {
+  const [config, setConfig] = useState<AppConfig>(() => loadConfig());
+  const theme = useMemo(() => buildMuiTheme(config), [config]);
+
+  const value = useMemo<AppConfigContextValue>(
+    () => ({
+      config,
+      updateConfig: (patch) =>
+        setConfig((prev) => {
+          const next = { ...prev, ...patch };
+          saveConfig(next);
+          return next;
+        }),
+      setPreset: (name) =>
+        setConfig((prev) => {
+          const next = applyPreset(prev, name);
+          return next;
+        }),
+      reset: () => setConfig(resetConfig()),
+      exportJson: () => JSON.stringify(config, null, 2),
+      importJson: (payload) =>
+        setConfig((prev) => {
+          const parsed = JSON.parse(payload) as Partial<AppConfig>;
+          const next = { ...prev, ...parsed };
+          saveConfig(next);
+          return next;
+        }),
+    }),
+    [config],
+  );
+
+  return (
+    <AppConfigContext.Provider value={value}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </AppConfigContext.Provider>
+  );
+}
+`,
+    "src/config/useAppConfig.ts": `import { useContext } from "react";
+import { AppConfigContext } from "./AppConfigProvider";
+
+export function useAppConfig() {
+  const ctx = useContext(AppConfigContext);
+  if (!ctx) throw new Error("useAppConfig must be used within AppConfigProvider");
+  return ctx;
+}
+`,
+    "src/pages/Settings/SettingsPage.tsx": `import React from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  MenuItem,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { themePresets } from "../../config/defaultConfig";
+import { useAppConfig } from "../../config/useAppConfig";
+
+type Section = "theme" | "layout" | "branding";
+
+export default function SettingsPage({ section = "theme" }: { section?: Section }) {
+  const { config, updateConfig, setPreset, reset, exportJson, importJson } = useAppConfig();
+  const [tab, setTab] = React.useState<Section>(section);
+  const [importPayload, setImportPayload] = React.useState("");
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h5" gutterBottom>Enterprise Settings</Typography>
+        <Tabs value={tab} onChange={(_, v) => setTab(v)}>
+          <Tab value="theme" label="Theme" />
+          <Tab value="layout" label="Layout" />
+          <Tab value="branding" label="Branding" />
+        </Tabs>
+
+        {tab === "branding" && (
+          <Grid container spacing={2} sx={{ mt: 1 }}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField fullWidth label="Application Title" value={config.appTitle} onChange={(e) => updateConfig({ appTitle: e.target.value })} />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField fullWidth label="Company Name" value={config.companyName} onChange={(e) => updateConfig({ companyName: e.target.value })} />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField fullWidth label="Logo URL" value={config.logoUrl} onChange={(e) => updateConfig({ logoUrl: e.target.value })} />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField fullWidth label="Favicon URL" value={config.faviconUrl} onChange={(e) => updateConfig({ faviconUrl: e.target.value })} />
+            </Grid>
+          </Grid>
+        )}
+
+        {tab === "theme" && (
+          <Stack spacing={2} sx={{ mt: 2 }}>
+            <Accordion defaultExpanded>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}><Typography>Color System</Typography></AccordionSummary>
+              <AccordionDetails>
+                <Grid container spacing={2}>
+                  <Grid size={{ xs: 12, md: 4 }}><TextField fullWidth type="color" label="Primary" value={config.primaryColor} onChange={(e) => updateConfig({ primaryColor: e.target.value })} /></Grid>
+                  <Grid size={{ xs: 12, md: 4 }}><TextField fullWidth type="color" label="Secondary" value={config.secondaryColor} onChange={(e) => updateConfig({ secondaryColor: e.target.value })} /></Grid>
+                  <Grid size={{ xs: 12, md: 4 }}><TextField fullWidth type="color" label="Background" value={config.backgroundColor} onChange={(e) => updateConfig({ backgroundColor: e.target.value })} /></Grid>
+                </Grid>
+              </AccordionDetails>
+            </Accordion>
+
+            <TextField select label="Preset Theme" value="" onChange={(e) => setPreset(e.target.value)}>
+              {Object.keys(themePresets).map((preset) => (
+                <MenuItem key={preset} value={preset}>{preset}</MenuItem>
+              ))}
+            </TextField>
+          </Stack>
+        )}
+
+        {tab === "layout" && (
+          <Grid container spacing={2} sx={{ mt: 1 }}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField fullWidth type="number" label="Sidebar Width" value={config.sidebarWidth} onChange={(e) => updateConfig({ sidebarWidth: Number(e.target.value) })} />
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <TextField fullWidth type="number" label="Navbar Height" value={config.navbarHeight} onChange={(e) => updateConfig({ navbarHeight: Number(e.target.value) })} />
+            </Grid>
+          </Grid>
+        )}
+
+        <Box sx={{ mt: 3 }}>
+          <Typography variant="subtitle2">Import / Export Config</Typography>
+          <TextField multiline minRows={5} fullWidth value={importPayload} onChange={(e) => setImportPayload(e.target.value)} />
+          <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+            <Button variant="outlined" onClick={() => setImportPayload(exportJson())}>Export JSON</Button>
+            <Button variant="outlined" onClick={() => importJson(importPayload)}>Import JSON</Button>
+            <Button variant="contained" color="secondary" onClick={reset}>Reset to Default</Button>
+          </Stack>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}
+`,
+    "src/shared-ui/AppNavbar/AppNavbar.tsx": `import { AppBar, Box, Toolbar, Typography } from "@mui/material";
+import { useAppConfig } from "../../config/useAppConfig";
+
+export default function AppNavbar({ title, children }: { title?: string; children?: React.ReactNode }) {
+  const { config } = useAppConfig();
+  return (
+    <AppBar position={config.navbarSticky ? "sticky" : "relative"} sx={{ bgcolor: config.navbarBackground, height: config.navbarHeight }}>
+      <Toolbar sx={{ minHeight: config.navbarHeight }}>
+        <Typography variant="h6" sx={{ mr: 2 }}>{title ?? config.navbarTitle}</Typography>
+        <Box sx={{ display: "flex", gap: 1 }}>{children}</Box>
+      </Toolbar>
+    </AppBar>
+  );
+}
+`,
+    "src/shared-ui/AppSidebar/AppSidebar.tsx": `import { Drawer } from "@mui/material";
+import { useAppConfig } from "../../config/useAppConfig";
+
+export default function AppSidebar({ children }: { children?: React.ReactNode }) {
+  const { config } = useAppConfig();
+  return (
+    <Drawer variant="permanent" sx={{ "& .MuiDrawer-paper": { width: config.sidebarWidth, bgcolor: config.sidebarBackground } }}>
+      {children}
+    </Drawer>
+  );
+}
+`,
+    "src/shared-ui/ThemeProvider/ThemeProvider.tsx": `export { default } from "../../config/AppConfigProvider";
+`,
+    "src/shared-ui/AppButton/AppButton.tsx": `export { Button as default } from "@mui/material";
+`,
+    "src/shared-ui/AppCard/AppCard.tsx": `export { Card as default } from "@mui/material";
+`,
+    "src/shared-ui/AppDialog/AppDialog.tsx": `export { Dialog as default } from "@mui/material";
+`,
+    "src/shared-ui/AppTable/AppTable.tsx": `export { Table as default } from "@mui/material";
+`,
+    "src/shared-ui/AppInput/AppInput.tsx": `export { TextField as default } from "@mui/material";
+`,
+    "src/config/menuConfig.ts": `export const menuConfig = [{ id: "dashboard", label: "Dashboard", path: "/" }, { id: "settings", label: "Settings", path: "/settings/theme" }];
+`,
+    "src/config/permissions.ts": `export const permissions = { admin: ["settings:read", "settings:write"], viewer: ["settings:read"] };
+`,
+    "src/config/featureFlags.ts": `export const featureFlags = { commandPalette: true, analytics: true, auditLogs: true };
+`,
+    "src/config/environment.ts": `export const environment = { apiBaseUrl: import.meta.env.VITE_API_URL || "http://localhost:8080/api" };
+`,
+    "src/config/pluginRegistry.ts": `export const pluginRegistry = [{ name: "audit-log", enabled: true }, { name: "analytics-widget", enabled: true }];
+`,
+    "src/components/Feedback/GlobalSnackbar.tsx": `import { Alert, Snackbar } from "@mui/material";
+import React from "react";
+export default function GlobalSnackbar() {
+  const [open, setOpen] = React.useState(false);
+  return <Snackbar open={open} onClose={() => setOpen(false)}><Alert severity="success">Global toast placeholder</Alert></Snackbar>;
+}
+`,
+    "src/components/Guard/RouteGuard.tsx": `import { Navigate } from "react-router-dom";
+export default function RouteGuard({ allow = true, children }: { allow?: boolean; children: React.ReactNode }) {
+  return allow ? <>{children}</> : <Navigate to="/" replace />;
+}
+`,
+    "src/components/System/ErrorBoundary.tsx": `import React from "react";
+export default class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean }> {
+  constructor(props: { children: React.ReactNode }) { super(props); this.state = { hasError: false }; }
+  static getDerivedStateFromError() { return { hasError: true }; }
+  render() { return this.state.hasError ? <div>Something went wrong.</div> : this.props.children; }
+}
+`,
+    "src/components/System/LoadingScreen.tsx": `export default function LoadingScreen() { return <div style={{ padding: 24 }}>Loading enterprise platform...</div>; }
+`,
+    "src/pages/CommandPalette/CommandPalette.tsx": `export default function CommandPalette() { return <div>Command palette placeholder</div>; }
+`,
+    "src/pages/AuditLogs/AuditLogsPage.tsx": `export default function AuditLogsPage() { return <div>Audit logs UI placeholder</div>; }
+`,
+    "src/pages/Analytics/AnalyticsWidgetPage.tsx": `export default function AnalyticsWidgetPage() { return <div>Analytics widget placeholder</div>; }
+`,
+    "src/pages/Notifications/NotificationCenter.tsx": `export default function NotificationCenter() { return <div>Notification center placeholder</div>; }
+`,
+    "src/pages/Profile/ProfileDropdown.tsx": `export default function ProfileDropdown() { return <div>Profile dropdown placeholder</div>; }
+`,
+    "src/i18n/index.ts": `export const locales = ["en", "ar"]; export const t = (k: string) => k;
+`
+  };
+}
+function getHostFederationTs(remotes) {
+  const remotesBlock = Object.entries(remotes).map(([name, port]) => `      ${JSON.stringify(name)}: "http://localhost:${port}/assets/remoteEntry.js",`).join("\n");
+  return `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: "main",
+    filename: "remoteEntry.js",
+    remotes: {
+${remotesBlock}
+    },
+    shared: {
+      react: { singleton: true } as any,
+      "react-dom": { singleton: true } as any,
+      "react-router-dom": { singleton: true } as any,
+      "@mui/material": { singleton: true } as any,
+      "@mui/icons-material": { singleton: true } as any,
+      "@emotion/react": { singleton: true } as any,
+      "@emotion/styled": { singleton: true } as any
+    },
+  });
+}
+`;
+}
+function getHostFederationJs(remotes) {
+  const remotesBlock = Object.entries(remotes).map(([name, port]) => `      ${JSON.stringify(name)}: "http://localhost:${port}/assets/remoteEntry.js",`).join("\n");
+  return `import federation from "@originjs/vite-plugin-federation";
+
+export function buildFederation() {
+  return federation({
+    name: "main",
+    filename: "remoteEntry.js",
+    remotes: {
+${remotesBlock}
+    },
+    shared: {
+      react: { singleton: true },
+      "react-dom": { singleton: true },
+      "react-router-dom": { singleton: true },
+      "@mui/material": { singleton: true },
+      "@mui/icons-material": { singleton: true },
+      "@emotion/react": { singleton: true },
+      "@emotion/styled": { singleton: true }
+    },
+  });
+}
+`;
+}
+function getWorkspacePackageJson(projectName, allApps, remotes) {
+  const envs = ["dev", "staging", "uat", "production"];
+  const hostApp = allApps[0];
+  const sharedApp = remotes.find((name) => name.includes("shared")) || remotes[0];
+  const scripts = {
+    local: "npm run dev:watch",
+    dev: "node print-env.js && npm-run-all --parallel dev-run:*",
+    "dev:watch": "npm-run-all build:local && npm-run-all --parallel watch preview live-reload",
+    "dev:fast": "npm run build:dev && npm-run-all --parallel preview live-reload",
+    "dev:safe": "npm run build:production && npm-run-all --parallel preview",
+    "live-reload": "node live-reload.js",
+    watch: `npm-run-all --parallel ${allApps.map((a) => `watch:${a}`).join(" ")}`,
+    preview: `npm-run-all --parallel ${allApps.map((a) => `preview:${a}`).join(" ")}`,
+    build: "npm run build:production",
+    release: "node scripts/bump-version.js patch --commit --push && npm run build",
+    "release:minor": "node scripts/bump-version.js minor --commit --push && npm run build",
+    "release:major": "node scripts/bump-version.js major --commit --push && npm run build",
+    "build:local": allApps.map((a) => `npm run build:local:${a}`).join(" && ")
+  };
+  scripts["build:localdev"] = allApps.map((a) => `npm run build:local:${a}`).join(" && ");
+  allApps.forEach((app) => {
+    scripts[`dev-run:${app}`] = `npm --workspace apps/${app} run dev`;
+    scripts[`watch:${app}`] = `npm --workspace apps/${app} run watch`;
+    scripts[`preview:${app}`] = `npm --workspace apps/${app} run preview`;
+  });
+  envs.forEach((env) => {
+    const mode = env === "production" ? "prod" : env;
+    scripts[`build:${env}`] = allApps.map((app) => `npm run build:${env}:${app}`).join(" && ");
+    allApps.forEach((app) => {
+      scripts[`build:${env}:${app}`] = `npm --workspace apps/${app} run build -- --mode ${mode}`;
+    });
+  });
+  allApps.forEach((app) => {
+    scripts[`build:local:${app}`] = `npm --workspace apps/${app} run build -- --mode localdev`;
+  });
+  const scenarioApps = remotes.filter((name) => name !== sharedApp);
+  scenarioApps.forEach((targetApp) => {
+    const buildList = Array.from(/* @__PURE__ */ new Set([sharedApp, ...remotes.filter((name) => name === targetApp), hostApp])).filter(Boolean);
+    const watchList = buildList.map((app) => `watch:local:${app}`).join(" ");
+    const previewList = buildList.map((app) => `preview:local:${app}`).join(" ");
+    scripts[`${targetApp}`] = `npm-run-all build:local:${targetApp}-only && npm-run-all --parallel watch:local:${targetApp}-only ${previewList} live-reload`;
+    scripts[`build:local:${targetApp}-only`] = buildList.map((app) => `npm run build:local:${app}`).join(" && ");
+    scripts[`watch:local:${targetApp}-only`] = `npm-run-all --parallel ${watchList}`;
+  });
+  allApps.forEach((app) => {
+    scripts[`watch:local:${app}`] = `npm --workspace apps/${app} run watch -- --mode localdev`;
+    scripts[`preview:local:${app}`] = `npm --workspace apps/${app} run preview:local`;
+  });
+  const packageJson = {
+    name: projectName,
+    private: true,
+    type: "module",
+    workspaces: ["apps/*"],
+    scripts,
+    devDependencies: {
+      "@originjs/vite-plugin-federation": "^1.4.1",
+      "npm-run-all": "^4.1.5",
+      "vite-plugin-live-reload": "^3.0.5",
+      "vite-plugin-static-copy": "^3.2.0",
+      ws: "^8.19.0"
+    },
+    mfruntime: {
+      host: "main",
+      remotes
+    }
+  };
+  return `${JSON.stringify(packageJson, null, 2)}
+`;
+}
+function getWorkspaceReadme(projectName, portMap) {
+  const appsBlock = Object.entries(portMap).map(([name, port]) => `- ${name}: ${port}`).join("\n");
+  return `# ${projectName}
+
+Enterprise microfrontend monorepo generated by create-mf-app.
+
+## Apps and ports
+${appsBlock}
+
+## Quick start
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+`;
+}
+function getRootEnvFile(projectName, portMap) {
+  const appVars = Object.entries(portMap).map(([app, port]) => {
+    const key = app.toUpperCase().replace(/[^A-Z0-9]/g, "_");
+    return `VITE_${key}_PORT=${port}
+VITE_${key}_REMOTE_ENTRY=http://localhost:${port}/assets/remoteEntry.js`;
+  }).join("\n");
+  return `VITE_WORKSPACE_NAME=${projectName}
+VITE_DEFAULT_MODE=localdev
+${appVars}
+`;
+}
+function getDockerCompose(allApps, portMap, enabled) {
+  if (!enabled) {
+    return "services: {}\n";
+  }
+  const services = allApps.map(
+    (app) => `  ${app}:
+    build: ./apps/${app}
+    ports:
+      - "${portMap[app]}:${portMap[app]}"`
+  ).join("\n\n");
+  return `services:
+${services}
+`;
+}
+function getPrintEnvScript() {
+  return `console.log("Environment:", process.env.MODE || process.env.NODE_ENV || "localdev");
+`;
+}
+function getSmartBuildScript() {
+  return `const mode = process.argv[2] || "dev";
+console.log("Smart build mode:", mode);
+`;
+}
+function getLiveReloadScript() {
+  return `console.log("Live reload bridge started (placeholder).");
+setInterval(() => {}, 1 << 30);
+`;
+}
+function getBumpVersionScript() {
+  return `#!/usr/bin/env node
+const fs = require("node:fs");
+const path = require("node:path");
+const type = process.argv[2] || "patch";
+const file = path.join(process.cwd(), "package.json");
+const pkg = JSON.parse(fs.readFileSync(file, "utf8"));
+const [maj, min, pat] = pkg.version.split(".").map(Number);
+if (type === "major") pkg.version = \`\${maj + 1}.0.0\`;
+else if (type === "minor") pkg.version = \`\${maj}.\${min + 1}.0\`;
+else pkg.version = \`\${maj}.\${min}.\${pat + 1}\`;
+fs.writeFileSync(file, JSON.stringify(pkg, null, 2) + "\\n");
+console.log("Version bumped to", pkg.version);
+`;
+}
+
+// src/utils/args.ts
+function parseArgv(argv) {
+  const positionals = [];
+  const options = {};
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (!arg.startsWith("-")) {
+      positionals.push(arg);
+      continue;
+    }
+    if (arg === "-h" || arg === "--help") {
+      options.help = true;
+      continue;
+    }
+    if (arg === "-y" || arg === "--yes") {
+      options.yes = true;
+      continue;
+    }
+    const normalized = arg.replace(/^--/, "");
+    const eqIndex = normalized.indexOf("=");
+    if (eqIndex >= 0) {
+      const key2 = normalized.slice(0, eqIndex);
+      const value = normalized.slice(eqIndex + 1);
+      options[key2] = value || true;
+      continue;
+    }
+    const key = normalized;
+    const next = argv[i + 1];
+    if (next && !next.startsWith("-")) {
+      const parts = [next];
+      i += 1;
+      while (argv[i + 1] && !argv[i + 1].startsWith("-")) {
+        parts.push(argv[i + 1]);
+        i += 1;
+      }
+      options[key] = parts.join(",");
+      continue;
+    }
+    options[key] = true;
+  }
+  return { positionals, options };
+}
+function toBoolean(value, defaultValue) {
+  if (value === void 0) {
+    return defaultValue;
+  }
+  if (value === true || value === "true" || value === "1") {
+    return true;
+  }
+  if (value === "false" || value === "0") {
+    return false;
+  }
+  return defaultValue;
+}
+function resolveTemplate(options) {
+  const flagTs = options.typescript === true;
+  const flagJs = options.javascript === true;
+  const templateValue = options.template;
+  if (flagTs && flagJs) {
+    throw new Error("Use only one template flag: --typescript or --javascript");
+  }
+  if (typeof templateValue === "string") {
+    if (templateValue === "tsx" || templateValue === "jsx") {
+      return templateValue;
+    }
+    throw new Error("Invalid --template value. Use --template=tsx or --template=jsx");
+  }
+  if (flagTs) {
+    return "tsx";
+  }
+  if (flagJs) {
+    return "jsx";
+  }
+  return "tsx";
+}
+function resolveAppType(options) {
+  return options.type === "parent" ? "parent" : "child";
+}
+function resolveChildren(options) {
+  const value = options.children;
+  if (typeof value !== "string" || !value.trim()) {
+    return [];
+  }
+  return value.split(/[,\s]+/).map((item) => item.trim()).filter(Boolean);
+}
+function resolveShared(options) {
+  const value = options.shared;
+  if (typeof value !== "string" || !value.trim()) {
+    return [];
+  }
+  return value.split(/[,\s]+/).map((item) => item.trim()).filter(Boolean);
+}
+function buildConfigFromArgs(argv) {
+  const { options, positionals } = parseArgv(argv);
+  if (options.help) {
+    return { help: true, interactive: false };
+  }
+  const projectName = positionals[0];
+  const interactive = !projectName && options.yes !== true;
+  if (interactive) {
+    return { help: false, interactive: true };
+  }
+  const resolvedProjectName = projectName || "mf-app";
+  const rawPort = String(options.port ?? "3001");
+  const port = Number(rawPort);
+  if (!Number.isFinite(port) || port <= 0) {
+    throw new Error("Invalid port provided. Example: --port=3001");
+  }
+  return {
+    help: false,
+    interactive: false,
+    config: {
+      projectName: resolvedProjectName,
+      port,
+      docker: toBoolean(options.docker, true),
+      federation: toBoolean(options.federation, true),
+      template: resolveTemplate(options),
+      appType: resolveAppType(options),
+      children: resolveChildren(options),
+      shared: resolveShared(options)
+    }
+  };
+}
+function isValidProjectName(name) {
+  return /^[a-z0-9-]+$/i.test(name);
+}
+
+// src/index.ts
+function printHelp() {
+  console.log("Usage:");
+  console.log("  npx create-mf-app <project-name> [options]");
+  console.log("  npx create-mf-app");
+  console.log("");
+  console.log("Options:");
+  console.log("  --port=3001");
+  console.log("  --template=tsx|jsx");
+  console.log("  --typescript");
+  console.log("  --javascript");
+  console.log("  --type=parent|child");
+  console.log("  --children=admin,qc,inventory");
+  console.log("  --shared=sharedlib");
+  console.log("  --docker=true|false");
+  console.log("  --federation=true|false");
+  console.log("  -y, --yes");
+  console.log("  -h, --help");
+}
+function assertConfig(config) {
+  if (!isValidProjectName(config.projectName)) {
+    throw new Error("Invalid project name. Use letters, numbers, and dashes only.");
+  }
+  if (!Number.isFinite(config.port) || config.port <= 0) {
+    throw new Error("Invalid port. Example: --port=3001");
+  }
+  if (config.appType === "parent" && config.children.length === 0) {
+    throw new Error("Parent mode requires children. Example: --children=admin,qc,inventory");
+  }
+  if (config.appType === "parent" && config.shared.length === 0) {
+    config.shared = ["sharedlib"];
+  }
+  if (config.appType === "parent" && config.children.includes("main")) {
+    throw new Error('"main" is reserved as the mandatory host app. Do not include it in --children.');
+  }
+  if (config.appType === "parent" && config.shared.includes("main")) {
+    throw new Error('"main" is reserved as the mandatory host app. Do not include it in --shared.');
+  }
+}
+async function run() {
+  const parsed = buildConfigFromArgs(process.argv.slice(2));
+  if (parsed.help) {
+    printHelp();
+    return;
+  }
+  const config = parsed.interactive ? await promptCliConfig() : parsed.config;
+  assertConfig(config);
+  await assertTargetDirectoryDoesNotExist(config);
+  await generateProject(config);
+  console.log("\nProject created successfully.");
+  console.log(`
+Next steps:
+  cd ${config.projectName}
+  npm install
+  npm run dev`);
+}
+run().catch((error) => {
+  console.error("\nFailed to create project.");
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exit(1);
+});