create-lumen 2.0.0-alpha.1 → 2.0.0-alpha.2

package/README.md

@@ -1,6 +1,6 @@
 # create-lumen
 
-A scaffolder that generates production-ready React + Vite projects (feature-based or type-based).
+A scaffolder that generates production-ready React + Vite projects (feature-based, type-based, hybrid, or none).
 
 Note: this repository is the CLI scaffolder itself, not a generated app. Generated projects live in the target folder you create.
 
@@ -34,6 +34,12 @@ npm create lumen my-app -- --template react-ts
 npm create lumen my-app -- -t react-type-js
 ```
 
+Choose framework and architecture directly:
+
+```bash
+npm create lumen my-app -- --framework react --arch none
+```
+
 Drive scaffolding directly from a manifest file or inline JSON (manifest v2):
 
 ```bash
@@ -64,9 +70,9 @@ create-lumen my-app      # after npm link
 
 ## Features
 
-- Architecture choice: feature-based or type-based (with Next.js hybrid/none in v2)
+- Architecture choice: feature-based, type-based, hybrid, or none (per-framework availability)
 - TypeScript or JavaScript output
-- CSS frameworks: Tailwind CSS v4 (CSS-first `@theme`, v3 dropped), Bootstrap 5.3+, or none
+- CSS frameworks: Tailwind CSS v4 (CSS-first `@theme`, v3 dropped) or none
 - Optional state management: Zustand or Redux Toolkit
 - Optional router (React Router)
 - Optional testing: Vitest or Jest
@@ -148,8 +154,8 @@ src/
     ├── layouts
     ├── stores
     ├── styles
-    │   ├── globals.css      # Tailwind/Bootstrap directives (or main.css for vanilla)
-    │   └── themes.css       # Theme tokens (Tailwind @theme / Bootstrap data-bs-theme / CSS vars)
+    │   ├── globals.css      # Tailwind directives (or main.css for vanilla)
+    │   └── themes.css       # Theme tokens (Tailwind @theme / CSS vars)
     ├── types
     └── utils
 ```
@@ -177,8 +183,8 @@ src/
 ├── services
 ├── store
 ├── styles
-│   ├── globals.css      # Tailwind/Bootstrap directives (or main.css for vanilla)
-│   └── themes.css       # Theme tokens (Tailwind @theme / Bootstrap data-bs-theme / CSS vars)
+│   ├── globals.css      # Tailwind directives (or main.css for vanilla)
+│   └── themes.css       # Theme tokens (Tailwind @theme / CSS vars)
 ├── test
 └── utils
 ```
@@ -199,6 +205,8 @@ The manifest now includes:
 
 ### Ecosystem Documentation & Contracts
 
+- **[Documentation Index](./docs/README.md):** Complete overview of specifications, ADRs, and developer guides.
+- **[Generator Engine & Capabilities Guide (M2)](./docs/engine-capabilities.md):** Capability model, template composition, shadcn/ui on Tailwind v4, architecture presets, and Bootstrap removal.
 - **[Manifest v2 Overview](./docs/manifest-v2.md):** Specification of the nested schema, validation behavior, and the new harness and architecture validation fields.
 - **[Shared Contract: `create-lumen` ↔ `lumen-cli`](./docs/contracts/manifest-v2-contract.md):** The agreed contract for path mapping, barrel conventions, version negotiation, and the harness/configuration interface.
 - **[v1 to v2 Migration Guide](./docs/migration/v1-to-v2.md):** Complete guide for migrating generated projects and legacy flat configs to v2.

package/bin/cli.js

@@ -36,6 +36,7 @@ main({
   projectName: cliArgs.projectName,
   manifest: cliArgs.manifest,
   template: cliArgs.template,
+  arch: cliArgs.arch,
 }).catch((e) => {
   console.error(chalk.red("\nError:"), e.message || e);
   process.exit(1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-lumen",
-  "version": "2.0.0-alpha.1",
-  "description": "Scaffold a React + Vite project with architecture choice: feature-based or type-based.",
+  "version": "2.0.0-alpha.2",
+  "description": "Scaffold a React + Vite project with architecture choice: feature-based, type-based, hybrid, or none.",
   "type": "module",
   "bin": {
     "create-lumen": "bin/cli.js"

package/schema/fixtures/v2/invalid/shadcn-without-tailwind.json

@@ -6,7 +6,7 @@
     "variant": "vite"
   },
   "styling": {
-    "engine": "bootstrap"
+    "engine": "none"
   },
   "architecture": {
     "type": "feature-based"

package/schema/fixtures/v2/valid/react-vite-type-based.json

@@ -6,7 +6,7 @@
     "variant": "vite"
   },
   "styling": {
-    "engine": "bootstrap"
+    "engine": "none"
   },
   "architecture": {
     "type": "type-based"

package/schema/lumen.config.v2.json

@@ -62,7 +62,6 @@
           "type": "string",
           "enum": [
             "tailwind",
-            "bootstrap",
             "none"
           ]
         }

package/src/cli-args.js

@@ -3,6 +3,11 @@ import { readFileSync } from "node:fs";
 import path from "node:path";
 import chalk from "chalk";
 import { parseManifest } from "./manifest/schema.js";
+import {
+  normalizeFramework,
+  isPromptVisible,
+  getDefaultResponses,
+} from "./engine/capabilities.js";
 
 export const PRESETS = {
   "react-ts": {
@@ -141,6 +146,40 @@ export const PRESETS = {
     gitInit: true,
     readme: true,
   },
+  "react-none-ts": {
+    frameworkName: "react",
+    frameworkVariant: "vite",
+    architecture: "none",
+    language: "ts",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: false,
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  },
+  "react-none-js": {
+    frameworkName: "react",
+    frameworkVariant: "vite",
+    architecture: "none",
+    language: "js",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: false,
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  },
 };
 
 /**
@@ -151,6 +190,8 @@ export const PRESETS = {
  *   quickSetup: boolean,
  *   manifest: string | null,
  *   template: string | null,
+ *   framework: string | null,
+ *   arch: string | null,
  *   help: boolean,
  *   version: boolean,
  *   positionals: string[]
@@ -163,6 +204,9 @@ export function parseCliArgs(argv = process.argv.slice(2)) {
       yes: { type: "boolean", short: "y", default: false },
       manifest: { type: "string", short: "m" },
       template: { type: "string", short: "t" },
+      framework: { type: "string", short: "f" },
+      arch: { type: "string", short: "a" },
+      architecture: { type: "string" },
       help: { type: "boolean", short: "h", default: false },
       version: { type: "boolean", short: "v", default: false },
     },
@@ -172,11 +216,20 @@ export function parseCliArgs(argv = process.argv.slice(2)) {
 
   const projectName = positionals[0] ? positionals[0].trim() : null;
 
+  let arch = values.arch || values.architecture || null;
+  if (arch) {
+    arch = arch.trim().toLowerCase();
+    if (arch === "feature") arch = "feature-based";
+    else if (arch === "component" || arch === "component-based" || arch === "type") arch = "type-based";
+  }
+
   return {
     projectName,
     quickSetup: Boolean(values.yes),
     manifest: values.manifest || null,
     template: values.template || null,
+    framework: values.framework ? values.framework.trim() : null,
+    arch,
     help: Boolean(values.help),
     version: Boolean(values.version),
     positionals,
@@ -222,13 +275,18 @@ export function loadManifestSource(source, cwd = process.cwd()) {
 export function manifestToResponses(manifest, projectName) {
   const frameworkName = manifest.framework?.name || "react";
   const frameworkVariant = manifest.framework?.variant || "vite";
-  const isNext = frameworkName === "next";
+  const framework = normalizeFramework({ name: frameworkName, variant: frameworkVariant });
+  const canClientRoute = isPromptVisible(framework, "router");
+  const supportsBundler = isPromptVisible(framework, "bundler");
 
   return {
     projectName,
     frameworkName,
     frameworkVariant,
-    bundler: manifest.framework?.bundler,
+    bundler:
+      supportsBundler && manifest.framework?.bundler
+        ? manifest.framework.bundler
+        : undefined,
     adapter: manifest.framework?.adapter,
     architecture: manifest.architecture?.type || "feature-based",
     language: manifest.tooling?.language || "ts",
@@ -241,7 +299,7 @@ export function manifestToResponses(manifest, projectName) {
     agentDocs: manifest.agentDocs,
     // Sensible defaults for scaffolder conditional passes
     testing: "vitest",
-    router: isNext ? false : true,
+    router: canClientRoute,
     stateManagement: "none",
     iconLibrary: "none",
     apiClient: "none",
@@ -263,8 +321,10 @@ ${chalk.bold("USAGE")}
 
 ${chalk.bold("OPTIONS")}
   ${chalk.yellow("-y, --yes")}              Quick setup with recommended defaults (TS + Tailwind + Router + ESLint + Prettier)
+  ${chalk.yellow("-a, --arch")} <name>      Architecture preset (feature-based, type-based, none, hybrid)
   ${chalk.yellow("-m, --manifest")} <path>  Drive scaffolding from a lumen.config.json or inline JSON
   ${chalk.yellow("-t, --template")} <name>  Scaffold using a preset (${Object.keys(PRESETS).join(", ")})
+  ${chalk.yellow("-f, --framework")} <name> Target framework (react, next, react:vite, next:app-router, etc.)
   ${chalk.yellow("-h, --help")}             Show this help message
   ${chalk.yellow("-v, --version")}          Show version number
 
@@ -273,6 +333,8 @@ ${chalk.bold("PRESETS")}
   ${chalk.cyan("react-js")}       React + Vite + JavaScript (feature-based)
   ${chalk.cyan("react-type-ts")}  React + Vite + TypeScript (type-based)
   ${chalk.cyan("react-type-js")}  React + Vite + JavaScript (type-based)
+  ${chalk.cyan("react-none-ts")}  React + Vite + TypeScript (none)
+  ${chalk.cyan("react-none-js")}  React + Vite + JavaScript (none)
 
 ${chalk.bold("EXAMPLES")}
   ${chalk.gray("# Interactive setup")}

package/src/configure.js

@@ -88,6 +88,10 @@ async function configureTsconfig(projectPath) {
   const rootTsconfig = {
     files: [],
     references,
+    compilerOptions: {
+      baseUrl: ".",
+      paths,
+    },
   };
   await fsp.writeFile(
     rootTsconfigPath,

package/src/css.js

@@ -1,6 +1,11 @@
 import { promises as fsp } from "fs";
 import path from "path";
 import { deleteIfExists } from "@/utils/fs.js";
+import {
+  normalizeFramework,
+  hasCapability,
+  CAPABILITIES,
+} from "@/engine/capabilities.js";
 
 export async function setupCssFramework({
   projectPath,
@@ -13,18 +18,20 @@ export async function setupCssFramework({
   framework = "vite",
 }) {
   process.chdir(projectPath);
+  const fw = normalizeFramework(framework);
+  const isFilesystemRouted = hasCapability(fw, CAPABILITIES.FILESYSTEM_ROUTING);
   const cssDir = path.join(templatesDir, "css");
   // Feature-based main.* imports ./shared/styles/globals.css (or main.css when
   // framework is "none"); type-based imports ./styles/globals.css (or
   // main.css). The chosen framework's styles land in the file the architecture
   // actually imports.
   const stylesDir =
-    architecture === "feature-based"
+    architecture === "feature-based" || architecture === "hybrid"
       ? path.join(projectPath, "src", "shared", "styles")
       : path.join(projectPath, "src", "styles");
 
-  // Vanilla CSS gets a stylesheet named main.css; tailwind/bootstrap keep
-  // globals.css (their idiomatic name — they inject framework directives).
+  // Vanilla CSS gets a stylesheet named main.css; tailwind keeps
+  // globals.css (its idiomatic name — it injects framework directives).
   const mainFileName = cssFramework === "none" ? "main.css" : "globals.css";
 
   async function writeCss(content, fileName) {
@@ -32,7 +39,7 @@ export async function setupCssFramework({
   }
 
   if (cssFramework === "tailwind") {
-    if (framework === "next") {
+    if (isFilesystemRouted || fw.name === "next") {
       const postcssConfigFile = "postcss.config.mjs";
       const postcssConfigTarget = path.join(projectPath, postcssConfigFile);
       const postcssConfigContent = await fsp.readFile(
@@ -60,29 +67,6 @@ export async function setupCssFramework({
     );
     await writeCss(globalsContent, "globals.css");
     await writeCss(themesContent, "themes.css");
-  } else if (cssFramework === "bootstrap") {
-    const mainFile = path.join(projectPath, "src", `main.${ext}`);
-    try {
-      let mainContent = await fsp.readFile(mainFile, "utf8");
-      if (
-        !mainContent.includes("bootstrap/dist/css/bootstrap.min.css")
-      ) {
-        mainContent =
-          "import 'bootstrap/dist/css/bootstrap.min.css';\n" + mainContent;
-        await fsp.writeFile(mainFile, mainContent, "utf8");
-      }
-    } catch {}
-
-    const globalsContent = await fsp.readFile(
-      path.join(cssDir, "bootstrap", "src", "globals.css"),
-      "utf8"
-    );
-    const themesContent = await fsp.readFile(
-      path.join(cssDir, "bootstrap", "src", "themes.css"),
-      "utf8"
-    );
-    await writeCss(globalsContent, "globals.css");
-    await writeCss(themesContent, "themes.css");
   } else {
     const mainContent = await fsp.readFile(
       path.join(cssDir, "none", "src", "main.css"),
@@ -110,17 +94,17 @@ export async function setupCssFramework({
 }
 
 // Rewrite the CSS import in main.{ext} so it matches the file the framework
-// actually wrote (main.css for "none", globals.css for tailwind/bootstrap).
+// actually wrote (main.css for "none", globals.css for tailwind).
 async function syncMainCssImport(projectPath, ext, architecture, mainFileName) {
   const mainPath = path.join(projectPath, "src", `main.${ext}`);
   try {
     let content = await fsp.readFile(mainPath, "utf8");
     const expected =
-      architecture === "feature-based"
+      architecture === "feature-based" || architecture === "hybrid"
         ? `./shared/styles/${mainFileName}`
         : `./styles/${mainFileName}`;
     const wrong =
-      architecture === "feature-based"
+      architecture === "feature-based" || architecture === "hybrid"
         ? /import ['"]\.\/shared\/styles\/(globals|main)\.css['"]/
         : /import ['"]\.\/styles\/(globals|main)\.css['"]/;
     content = content.replace(wrong, `import '${expected}'`);

package/src/dependencies.js

@@ -25,13 +25,13 @@ export async function installDeps(pkgManager, dev, packages, cwd) {
 }
 
 export async function installAllDeps(responses, pkg, cwd) {
-  const { deps, devDeps } = computeDeps(responses);
+  const { deps, devDepBatches } = computeDeps(responses);
 
   if (deps.length > 0) {
     await installDeps(pkg, false, deps, cwd);
   }
-  if (devDeps.length > 0) {
-    await installDeps(pkg, true, devDeps, cwd);
+  for (const batch of devDepBatches) {
+    await installDeps(pkg, true, batch, cwd);
   }
 }
 
@@ -40,18 +40,19 @@ export async function installAllDeps(responses, pkg, cwd) {
 // the conditional wiring stays verifiable without a network install.
 export function computeDeps(responses) {
   const deps = [];
-  const devDeps = [];
+  const cssDevDeps = [];
+  const testingDevDeps = [];
+  const linterDevDeps = [];
+  const formatterDevDeps = [];
 
   // CSS framework
   if (responses.cssFramework === "tailwind") {
     if (responses.framework === "next") {
-      devDeps.push("tailwindcss", "@tailwindcss/postcss", "postcss");
+      cssDevDeps.push("tailwindcss", "@tailwindcss/postcss", "postcss");
     } else {
-      devDeps.push("tailwindcss", "@tailwindcss/vite");
+      cssDevDeps.push("tailwindcss", "@tailwindcss/vite");
     }
     deps.push("clsx", "tailwind-merge");
-  } else if (responses.cssFramework === "bootstrap") {
-    deps.push("bootstrap", "react-bootstrap");
   }
 
   // State management
@@ -80,14 +81,14 @@ export function computeDeps(responses) {
 
   // Testing
   if (responses.testing === "vitest") {
-    devDeps.push(
+    testingDevDeps.push(
       "vitest",
       "@testing-library/react",
       "@testing-library/jest-dom",
       "jsdom"
     );
   } else if (responses.testing === "jest") {
-    devDeps.push(
+    testingDevDeps.push(
       "jest",
       "jest-environment-jsdom",
       "@testing-library/react",
@@ -103,29 +104,38 @@ export function computeDeps(responses) {
   // Linter
   if (responses.linter === "eslint") {
     if (responses.framework === "next") {
-      devDeps.push("eslint", "eslint-config-next");
+      linterDevDeps.push("eslint", "eslint-config-next");
     } else {
-      devDeps.push("eslint", "@eslint/js", "eslint-plugin-react-hooks", "eslint-plugin-react-refresh", "globals");
+      linterDevDeps.push("eslint", "@eslint/js", "eslint-plugin-react-hooks", "eslint-plugin-react-refresh", "globals");
       if (responses.language === "ts") {
-        devDeps.push("typescript-eslint", "jiti");
+        linterDevDeps.push("typescript-eslint", "jiti");
       }
     }
   } else if (responses.linter === "oxlint") {
-    devDeps.push("oxlint");
+    linterDevDeps.push("oxlint");
   }
 
   // Formatter
   if (responses.formatter === "prettier") {
-    devDeps.push("prettier");
+    formatterDevDeps.push("prettier");
     if (responses.linter === "eslint") {
-      devDeps.push("eslint-config-prettier");
+      formatterDevDeps.push("eslint-config-prettier");
     }
   } else if (responses.formatter === "oxfmt") {
-    devDeps.push("oxfmt");
+    formatterDevDeps.push("oxfmt");
   }
 
   // Always re-install react + react-dom for consistency
   deps.push("react", "react-dom");
 
-  return { deps, devDeps };
+  const devDepBatches = [
+    cssDevDeps,
+    testingDevDeps,
+    linterDevDeps,
+    formatterDevDeps,
+  ].filter((batch) => batch.length > 0);
+
+  const devDeps = devDepBatches.flat();
+
+  return { deps, devDeps, devDepBatches };
 }

package/src/engine/capabilities.js

@@ -30,7 +30,7 @@ export const FRAMEWORK_CAPABILITIES = {
       CAPABILITIES.AGENT_DOCS,
     ],
     allowedArchitectures: ["feature-based", "type-based", "none"],
-    allowedStyling: ["tailwind", "bootstrap", "none"],
+    allowedStyling: ["tailwind", "none"],
     allowedUiKits: ["shadcn", "none"],
     allowedLanguages: ["ts", "js"],
     allowedLinters: ["eslint", "oxlint", "biome", "none"],
@@ -76,7 +76,7 @@ export const FRAMEWORK_CAPABILITIES = {
       CAPABILITIES.AGENT_DOCS,
     ],
     allowedArchitectures: ["feature-based", "hybrid", "none"],
-    allowedStyling: ["tailwind", "bootstrap", "none"],
+    allowedStyling: ["tailwind", "none"],
     allowedUiKits: ["shadcn", "none"],
     allowedLanguages: ["ts", "js"],
     allowedLinters: ["eslint", "biome", "none"],
@@ -132,8 +132,12 @@ export function isOptionCompatible(framework, optionKey, optionValue) {
   if (!desc) return false;
 
   switch (optionKey) {
-    case "architecture":
-      return desc.allowedArchitectures.includes(optionValue);
+    case "architecture": {
+      let val = optionValue;
+      if (val === "component" || val === "component-based") val = "type-based";
+      if (val === "feature") val = "feature-based";
+      return desc.allowedArchitectures.includes(val);
+    }
     case "styling":
     case "cssFramework":
       return desc.allowedStyling.includes(optionValue);
@@ -216,3 +220,169 @@ export function validateCompatibility(framework, options = {}) {
     errors,
   };
 }
+
+/**
+ * Normalize framework input into a standard { name, variant } descriptor.
+ * @param {string | { name?: string, variant?: string } | null | undefined} framework
+ * @returns {{ name: string, variant: string }}
+ */
+export function normalizeFramework(framework) {
+  if (!framework) {
+    return { name: "react", variant: "vite" };
+  }
+
+  if (typeof framework === "string") {
+    const trimmed = framework.trim();
+    if (!trimmed) {
+      return { name: "react", variant: "vite" };
+    }
+    if (trimmed.includes(":")) {
+      const [name, ...rest] = trimmed.split(":");
+      return { name, variant: rest.join(":") };
+    }
+    if (trimmed === "next") {
+      return { name: "next", variant: "app-router" };
+    }
+    if (trimmed === "react") {
+      return { name: "react", variant: "vite" };
+    }
+    return { name: trimmed, variant: "vite" };
+  }
+
+  if (typeof framework === "object") {
+    const name = framework.name || "react";
+    const variant =
+      framework.variant || (framework.name === "next" ? "app-router" : "vite");
+    return { name, variant };
+  }
+
+  return { name: "react", variant: "vite" };
+}
+
+/**
+ * Determine whether a prompt should be presented to the user based on framework capabilities.
+ * @param {string | object} framework
+ * @param {string} promptName
+ * @returns {boolean}
+ */
+export function isPromptVisible(framework, promptName) {
+  const fw = normalizeFramework(framework);
+  const desc = getFrameworkDescriptor(fw);
+
+  switch (promptName) {
+    case "router":
+      return (
+        hasCapability(fw, CAPABILITIES.CLIENT_ROUTING) &&
+        Boolean(desc?.supportsRouterPrompt)
+      );
+    case "bundler":
+      return hasCapability(fw, CAPABILITIES.BUNDLER_SELECTION);
+    case "adapter":
+      return hasCapability(fw, CAPABILITIES.ADAPTERS);
+    case "reactCompiler":
+      return hasCapability(fw, CAPABILITIES.REACT_COMPILER);
+    default:
+      return true;
+  }
+}
+
+/**
+ * Filter an array of choice objects or values based on framework compatibility.
+ * @param {string | object} framework
+ * @param {string} optionKey
+ * @param {Array<object | string>} choices
+ * @returns {Array<object | string>}
+ */
+export function filterCompatibleChoices(framework, optionKey, choices = []) {
+  const fw = normalizeFramework(framework);
+  if (!Array.isArray(choices)) return [];
+  return choices.filter((choice) =>
+    isOptionCompatible(fw, optionKey, choice?.value ?? choice)
+  );
+}
+
+/**
+ * Get canonical default prompt responses for a given framework.
+ * @param {string | object} framework
+ * @param {{ projectName?: string }} [options]
+ * @returns {object}
+ */
+export function getDefaultResponses(framework, { projectName = "my-app" } = {}) {
+  const fw = normalizeFramework(framework);
+
+  if (fw.name === "next") {
+    return {
+      projectName,
+      frameworkName: fw.name,
+      frameworkVariant: fw.variant,
+      architecture: "feature-based",
+      language: "ts",
+      cssFramework: "tailwind",
+      testing: "vitest",
+      router: false,
+      bundler: "turbopack",
+      adapter: "none",
+      stateManagement: "none",
+      iconLibrary: "none",
+      apiClient: "none",
+      linter: "eslint",
+      formatter: "prettier",
+      docsLanguage: "en",
+      gitInit: true,
+      readme: true,
+    };
+  }
+
+  return {
+    projectName,
+    frameworkName: "react",
+    frameworkVariant: "vite",
+    architecture: "feature-based",
+    language: "ts",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: true,
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  };
+}
+
+/**
+ * Sanitize prompt responses for a framework by adjusting or resetting incompatible options.
+ * @param {string | object} framework
+ * @param {object} [responses]
+ * @returns {object}
+ */
+export function sanitizeResponsesForFramework(framework, responses = {}) {
+  const fw = normalizeFramework(framework);
+  const sanitized = { ...(responses || {}) };
+  const defaults = getDefaultResponses(fw, {
+    projectName: sanitized.projectName || "my-app",
+  });
+
+  if (!isPromptVisible(fw, "router")) {
+    sanitized.router = false;
+  }
+
+  for (const [key, val] of Object.entries(sanitized)) {
+    if (val === undefined || val === null) continue;
+    if (!isOptionCompatible(fw, key, val)) {
+      if (key in defaults) {
+        sanitized[key] = defaults[key];
+      } else if (key === "styling" && "cssFramework" in defaults) {
+        sanitized[key] = defaults.cssFramework;
+      } else {
+        sanitized[key] = defaults[key];
+      }
+    }
+  }
+
+  return sanitized;
+}
+