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

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** or **Next.js** projects (App Router / Pages Router), with a choice of architecture: 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.
 
@@ -14,6 +14,8 @@ cd my-app
 npm run dev
 ```
 
+> The v2 line (React + Vite + Next.js, manifest v2) is available on the `beta` dist-tag while v2 is in prerelease: `npm create lumen@beta my-app`.
+
 ### Non-interactive flags
 
 Quick Setup (TypeScript + Tailwind + Feature-based + Router + ESLint + Prettier + Vitest), no prompts:
@@ -26,14 +28,28 @@ npm create lumen -- -y my-app
 npm create lumen my-app -- --yes
 ```
 
-Scaffold using a template preset (`react-ts`, `react-js`, `react-type-ts`, `react-type-js`):
+Scaffold using a template preset (`react-ts`, `react-js`, `react-type-ts`, `react-type-js`, `next-ts`, `next-js`, `next-pages-ts`, `next-pages-js`):
 
 ```bash
 npm create lumen my-app -- --template react-ts
 # or
-npm create lumen my-app -- -t react-type-js
+npm create lumen my-app -- -t next-ts
 ```
 
+Choose framework and architecture directly:
+
+```bash
+npm create lumen my-app -- --framework react --arch none
+
+# Next.js — the router is asked interactively (App Router recommended):
+npm create lumen my-app -- -f next
+# ...or pin the variant outright:
+npm create lumen my-app -- -f next:app-router
+npm create lumen my-app -- -f next:pages-router
+```
+
+Interactively, the framework is the first prompt (React + Vite / Next.js), followed by a router step when Next.js is selected; every later option gates on that choice.
+
 Drive scaffolding directly from a manifest file or inline JSON (manifest v2):
 
 ```bash
@@ -64,20 +80,25 @@ create-lumen my-app      # after npm link
 
 ## Features
 
-- Architecture choice: feature-based or type-based (with Next.js hybrid/none in v2)
+- **Two frameworks:** React + Vite (SPA) or Next.js (App Router / Pages Router) — selected interactively or via `-f`
+- 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
+- **UI kit: shadcn/ui** (gated to Tailwind; primitives + `cn` helper land in the mapped `paths.ui`)
 - Optional state management: Zustand or Redux Toolkit
-- Optional router (React Router)
-- Optional testing: Vitest or Jest
+- Optional router (React Router — Vite only; Next.js uses filesystem routing)
+- Optional testing: Vitest or Jest (Next.js defaults to none until a Next-native overlay is verified)
+- **Next.js-native overlays:** server/client boundary demos + `no-server-imports-in-client` ESLint rule, `next/font` (Geist), `next/image`, filesystem routing examples, route handlers (`route.ts`) / API routes (`pages/api`)
+- **Next.js options:** `bundler: turbopack|webpack`, `adapter: node|vercel|cloudflare|static` (`next.config` overlays), `reactCompiler`, `linter: biome` — all validated against the capability model
 - Linting: ESLint (default), Oxlint, or Biome
 - Code formatter: Prettier or Oxfmt (chosen after the linter; `eslint-config-prettier` is auto-wired for the ESLint + Prettier combo)
-- Manifest v2: Emits a deterministic `lumen.config.json` (optional but recommended) validated against JSON Schema Draft 2020-12, including architecture validation modes and harness command configuration.
+- Manifest v2: Emits a deterministic `lumen.config.json` validated against JSON Schema Draft 2020-12, including architecture validation modes and harness command configuration.
 - Explicit path mapping: Target directories declared for `lumen-cli` code generation
 - Optional Axios setup and icon libraries
 - Auto `git init`, generated `README` (with a project description reflecting the chosen tooling) and `LICENSE`
 - `.env.example` scaffolded, and the generated `.gitignore` excludes env files (`.env`, `.env.*`) while keeping `.env.example`
 - `@/` path alias configured (`tsconfig`/`jsconfig` + Vite)
+- **Agent docs:** optional `.lumen/` context directory (project, architecture, conventions) via prompt or `--agent-docs`
 
 Your selected options are cached and offered as defaults on subsequent runs.
 
@@ -148,8 +169,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 +198,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 +220,11 @@ The manifest now includes:
 
 ### Ecosystem Documentation & Contracts
 
+- **[Documentation Index](./docs/README.md):** Complete overview of specifications, ADRs, and developer guides.
+- **[Next.js App Router Guide](./docs/next-app-router.md):** App Router scaffold, filesystem routing, route handlers, server/client boundaries, `next/font` and `next/image`.
+- **[Next.js Pages Router Guide](./docs/next-pages-router.md):** Pages Router scaffold, API routes, `_app`/`_document` wiring.
+- **[Deployment Adapters Guide](./docs/next-adapters.md):** Adapter matrix (Node, Vercel, Cloudflare, static), bundler choice and Biome setup for Next.js.
+- **[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

@@ -25,7 +25,7 @@ console.log(
   chalk.bold.cyan("\n  ✦ LUMEN") +
     chalk.gray(` v${version}`) +
     chalk.gray(
-      "\n  Scaffold a React + Vite project with architecture choice\n"
+      "\n  Scaffold a React, Vite, or Next.js project with architecture choice\n"
     )
 );
 
@@ -36,6 +36,8 @@ main({
   projectName: cliArgs.projectName,
   manifest: cliArgs.manifest,
   template: cliArgs.template,
+  framework: cliArgs.framework,
+  arch: cliArgs.arch,
 }).catch((e) => {
   console.error(chalk.red("\nError:"), e.message || e);
   process.exit(1);

package/package.json

@@ -1,14 +1,14 @@
 {
   "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-beta.1",
+  "description": "Scaffold a React + Vite project with architecture choice: feature-based, type-based, hybrid, or none.",
   "type": "module",
   "bin": {
     "create-lumen": "bin/cli.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/LUMEN-SH/create-lumen"
+    "url": "https://github.com/strophix-software/create-lumen"
   },
   "files": [
     "bin/",

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,10 @@ import { readFileSync } from "node:fs";
 import path from "node:path";
 import chalk from "chalk";
 import { parseManifest } from "./manifest/schema.js";
+import {
+  normalizeFramework,
+  isPromptVisible,
+} from "./engine/capabilities.js";
 
 export const PRESETS = {
   "react-ts": {
@@ -141,6 +145,112 @@ 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,
+  },
+  "next-ts": {
+    frameworkName: "next",
+    frameworkVariant: "app-router",
+    architecture: "feature-based",
+    language: "ts",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: false,
+    bundler: "turbopack",
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  },
+  "next-js": {
+    frameworkName: "next",
+    frameworkVariant: "app-router",
+    architecture: "feature-based",
+    language: "js",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: false,
+    bundler: "turbopack",
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  },
+  "next-pages-ts": {
+    frameworkName: "next",
+    frameworkVariant: "pages-router",
+    architecture: "feature-based",
+    language: "ts",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: false,
+    bundler: "turbopack",
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  },
+  "next-pages-js": {
+    frameworkName: "next",
+    frameworkVariant: "pages-router",
+    architecture: "feature-based",
+    language: "js",
+    cssFramework: "tailwind",
+    testing: "vitest",
+    router: false,
+    bundler: "turbopack",
+    stateManagement: "none",
+    iconLibrary: "none",
+    apiClient: "none",
+    linter: "eslint",
+    formatter: "prettier",
+    docsLanguage: "en",
+    gitInit: true,
+    readme: true,
+  },
 };
 
 /**
@@ -151,6 +261,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 +275,16 @@ 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" },
+      bundler: { type: "string", short: "b" },
+      adapter: { type: "string" },
+      "react-compiler": { type: "boolean" },
+      reactCompiler: { type: "boolean" },
+      "agent-docs": { type: "boolean" },
+      agentDocs: { type: "boolean" },
+      linter: { type: "string" },
       help: { type: "boolean", short: "h", default: false },
       version: { type: "boolean", short: "v", default: false },
     },
@@ -172,11 +294,31 @@ 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";
+  }
+
+  const bundler = values.bundler ? values.bundler.trim().toLowerCase() : null;
+  const adapter = values.adapter ? values.adapter.trim().toLowerCase() : null;
+  const reactCompiler = values["react-compiler"] ?? values.reactCompiler ?? null;
+  const agentDocs = values["agent-docs"] ?? values.agentDocs ?? null;
+  const linter = values.linter ? values.linter.trim().toLowerCase() : null;
+
   return {
     projectName,
     quickSetup: Boolean(values.yes),
     manifest: values.manifest || null,
     template: values.template || null,
+    framework: values.framework ? values.framework.trim() : null,
+    arch,
+    bundler,
+    adapter,
+    reactCompiler,
+    agentDocs,
+    linter,
     help: Boolean(values.help),
     version: Boolean(values.version),
     positionals,
@@ -222,14 +364,24 @@ 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");
+  const supportsAdapter = isPromptVisible(framework, "adapter");
+  const supportsCompiler = isPromptVisible(framework, "reactCompiler");
 
   return {
     projectName,
     frameworkName,
     frameworkVariant,
-    bundler: manifest.framework?.bundler,
-    adapter: manifest.framework?.adapter,
+    bundler:
+      supportsBundler && manifest.framework?.bundler
+        ? manifest.framework.bundler
+        : undefined,
+    adapter:
+      supportsAdapter && manifest.framework?.adapter
+        ? manifest.framework.adapter
+        : undefined,
     architecture: manifest.architecture?.type || "feature-based",
     language: manifest.tooling?.language || "ts",
     cssFramework: manifest.styling?.engine || "tailwind",
@@ -237,11 +389,13 @@ export function manifestToResponses(manifest, projectName) {
     formatter: manifest.tooling?.formatter || "prettier",
     uiKit: manifest.ui?.kit || "none",
     docsLanguage: manifest.docs?.language || "en",
-    reactCompiler: manifest.reactCompiler,
+    reactCompiler: supportsCompiler ? manifest.reactCompiler : undefined,
     agentDocs: manifest.agentDocs,
-    // Sensible defaults for scaffolder conditional passes
-    testing: "vitest",
-    router: isNext ? false : true,
+    // Sensible defaults for scaffolder conditional passes (Next.js ships no
+    // verified test-runner overlay yet, so it defaults to none; explicit
+    // vitest/jest selection still applies the standard overlays)
+    testing: frameworkName === "next" ? "none" : "vitest",
+    router: canClientRoute,
     stateManagement: "none",
     iconLibrary: "none",
     apiClient: "none",
@@ -263,8 +417,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 +429,12 @@ ${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.cyan("next-ts")}         Next.js App Router + TypeScript (feature-based)
+  ${chalk.cyan("next-js")}         Next.js App Router + JavaScript (feature-based)
+  ${chalk.cyan("next-pages-ts")}   Next.js Pages Router + TypeScript (feature-based)
+  ${chalk.cyan("next-pages-js")}   Next.js Pages Router + JavaScript (feature-based)
 
 ${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,
@@ -162,12 +166,16 @@ async function configurePackageJson(projectPath, language) {
 
     if (!pkg.scripts) pkg.scripts = {};
 
-    pkg.scripts.dev = "vite";
-    pkg.scripts.build = "vite build";
-    pkg.scripts.preview = "vite preview";
+    // Fill defaults only — never overwrite scripts owned by the base template
+    // (Next.js bases ship next dev/build/start) or merged overlay fragments
+    // (e.g. the bundler-aware dev script). React/Vite bases already carry the
+    // vite commands, so this is a no-op there too.
+    pkg.scripts.dev ??= "vite";
+    pkg.scripts.build ??= "vite build";
+    pkg.scripts.preview ??= "vite preview";
 
     if (language === "ts") {
-      pkg.scripts.typecheck = "tsc -b";
+      pkg.scripts.typecheck ??= "tsc -b";
     }
 
     await fsp.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");

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,23 @@ 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 fwName =
+    typeof responses.framework === "string"
+      ? responses.framework
+      : (responses.framework?.name ?? responses.frameworkName ?? "react");
+  const cssDevDeps = [];
+  const testingDevDeps = [];
+  const linterDevDeps = [];
+  const formatterDevDeps = [];
 
   // CSS framework
   if (responses.cssFramework === "tailwind") {
-    if (responses.framework === "next") {
-      devDeps.push("tailwindcss", "@tailwindcss/postcss", "postcss");
+    if (fwName === "next") {
+      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 +85,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",
@@ -102,30 +107,41 @@ export function computeDeps(responses) {
 
   // Linter
   if (responses.linter === "eslint") {
-    if (responses.framework === "next") {
-      devDeps.push("eslint", "eslint-config-next");
+    if (fwName === "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");
+  } else if (responses.linter === "biome") {
+    linterDevDeps.push("@biomejs/biome");
   }
 
   // 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 };
 }