create-next-imagicma 0.0.1 → 0.0.3

package/README.md

@@ -6,7 +6,7 @@
 
 ```bash
 npm install -g create-next-imagicma
-create-next-imagicma <project-dir> [--port <1-65535>]
+create-next-imagicma <project-dir> [--port <1-65535>] [--theme <name>]
 ```
 
 本地（未发布）使用示例：
@@ -19,6 +19,7 @@ node ./create-next-imagicma/bin/create-next-imagicma.mjs demo-5001 --port 5001
 ## 参数
 
 - `--port <number>`：设置新项目 `dev/start` 的默认端口（写入 `next ... -p <port>`）。
+- `--theme <name>`：设置新项目默认主题（可选：`quadratic`、`nomad`、`honey`、`zen-garden`、`highlighter`）。
 - 运行时仍可覆盖，例如：`pnpm dev -- -p 6001` 或 `PORT=6001 pnpm start`
 
 ## 依赖安装策略

package/bin/create-next-imagicma.mjs

@@ -8,12 +8,20 @@ import { fileURLToPath } from "node:url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const TEMPLATE_DIR = path.resolve(__dirname, "..", "template");
+const THEME_STYLES = [
+  "quadratic",
+  "nomad",
+  "honey",
+  "zen-garden",
+  "highlighter",
+];
 
 function printHelp() {
-  console.log(`create-next-imagicma <project-dir> [--port <1-65535>]
+  console.log(`create-next-imagicma <project-dir> [--port <1-65535>] [--theme <name>]
 
 参数：
   --port <number>  设置新项目 dev/start 的默认端口（next ... -p）
+  --theme <name>   设置默认主题（可选：${THEME_STYLES.join(", ")}）
   -h, --help       显示帮助
 `);
 }
@@ -28,6 +36,25 @@ function parsePort(raw) {
   return port;
 }
 
+function parseTheme(raw) {
+  const normalized = String(raw ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/[_\s]+/gu, "-");
+
+  if (!normalized) {
+    throw new Error("--theme 缺少值：请使用 --theme <name>");
+  }
+
+  if (!THEME_STYLES.includes(normalized)) {
+    throw new Error(
+      `--theme 参数不合法：${JSON.stringify(raw)}（可选：${THEME_STYLES.join(", ")}）`,
+    );
+  }
+
+  return normalized;
+}
+
 function sanitizePackageName(raw) {
   const normalized = raw
     .toLowerCase()
@@ -39,6 +66,7 @@ function sanitizePackageName(raw) {
 function parseArgs(argv) {
   let projectDir;
   let port;
+  let theme;
 
   for (let i = 0; i < argv.length; i += 1) {
     const arg = argv[i];
@@ -62,6 +90,21 @@ function parseArgs(argv) {
       continue;
     }
 
+    if (arg === "--theme") {
+      const value = argv[i + 1];
+      if (!value) {
+        throw new Error("--theme 缺少值：请使用 --theme <name>");
+      }
+      theme = parseTheme(value);
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith("--theme=")) {
+      theme = parseTheme(arg.slice("--theme=".length));
+      continue;
+    }
+
     if (arg.startsWith("-")) {
       throw new Error(`未知参数：${arg}`);
     }
@@ -78,21 +121,18 @@ function parseArgs(argv) {
     throw new Error("缺少 <project-dir>：请指定要创建的项目目录名/路径");
   }
 
-  return { projectDir, port, help: false };
+  return { projectDir, port, theme, help: false };
 }
 
-async function ensureTargetDirEmpty(targetDir) {
+async function ensureTargetDirReady(targetDir) {
   try {
     const stat = await fs.stat(targetDir);
     if (!stat.isDirectory()) {
       throw new Error(`目标路径已存在且不是目录：${targetDir}`);
     }
-    const entries = await fs.readdir(targetDir);
-    if (entries.length > 0) {
-      throw new Error(`目标目录已存在且非空：${targetDir}`);
-    }
   } catch (error) {
     if (error && typeof error === "object" && error.code === "ENOENT") {
+      await fs.mkdir(targetDir, { recursive: true });
       return;
     }
     throw error;
@@ -116,6 +156,45 @@ async function updatePackageName(targetDir, port) {
   await fs.writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
 }
 
+async function updateProcessComposePort(targetDir, port) {
+  if (port === undefined) return;
+
+  const filePath = path.join(targetDir, "process-compose.yaml");
+
+  let raw;
+  try {
+    raw = await fs.readFile(filePath, "utf8");
+  } catch (error) {
+    if (error && typeof error === "object" && error.code === "ENOENT") {
+      return;
+    }
+    throw error;
+  }
+
+  const next = raw.replace(
+    /^(\s*-\s*["']?PORT=)\d+(["']?\s*)$/m,
+    `$1${port}$2`,
+  );
+  await fs.writeFile(filePath, next);
+}
+
+async function updateDefaultTheme(targetDir, theme) {
+  if (theme === undefined) return;
+
+  const filePath = path.join(targetDir, "lib", "theme", "default-theme.ts");
+  const raw = await fs.readFile(filePath, "utf8");
+  const next = raw.replace(
+    /(export const DEFAULT_THEME_STYLE:\s*ThemeStyle\s*=\s*")[^"]+(";\s*)/u,
+    `$1${theme}$2`,
+  );
+
+  if (next === raw) {
+    throw new Error(`未能更新默认主题，请检查文件：${filePath}`);
+  }
+
+  await fs.writeFile(filePath, next);
+}
+
 function runCommand(command, args, options) {
   return new Promise((resolve, reject) => {
     const child = spawn(command, args, { stdio: "inherit", ...options });
@@ -133,6 +212,36 @@ function isCommandMissingError(error) {
   );
 }
 
+const INITIAL_COMMIT_MESSAGE = "Initial commit";
+
+async function initGit(targetDir) {
+  try {
+    const initCode = await runCommand("git", ["init"], { cwd: targetDir });
+    if (initCode !== 0) return false;
+
+    const addCode = await runCommand("git", ["add", "."], { cwd: targetDir });
+    if (addCode !== 0) {
+      console.log("git add 未成功，跳过 git commit\n");
+      return true;
+    }
+
+    const commitCode = await runCommand(
+      "git",
+      ["commit", "-m", INITIAL_COMMIT_MESSAGE],
+      { cwd: targetDir },
+    );
+    if (commitCode === 0) {
+      console.log("已执行 git init、git add、git commit\n");
+    } else {
+      console.log("git commit 未成功（如未配置 user.name/user.email 可稍后手动提交）\n");
+    }
+    return true;
+  } catch (_error) {
+    // 不存在 git 或其它异常时静默跳过，不报错
+    return false;
+  }
+}
+
 async function installDependencies(targetDir) {
   console.log("\n正在安装依赖（优先 pnpm）...\n");
 
@@ -178,14 +287,21 @@ async function main() {
     return;
   }
 
-  const { projectDir, port } = parsed;
+  const { projectDir, port, theme } = parsed;
   const targetDir = path.resolve(process.cwd(), projectDir);
 
-  await ensureTargetDirEmpty(targetDir);
-  await fs.mkdir(targetDir, { recursive: true });
+  await ensureTargetDirReady(targetDir);
 
-  await fs.cp(TEMPLATE_DIR, targetDir, { recursive: true });
+  await fs.cp(TEMPLATE_DIR, targetDir, {
+    recursive: true,
+    force: true,
+    errorOnExist: false,
+  });
   await updatePackageName(targetDir, port);
+  await updateProcessComposePort(targetDir, port);
+  await updateDefaultTheme(targetDir, theme);
+
+  await initGit(targetDir);
 
   const installResult = await installDependencies(targetDir);
   if (!installResult.ok) {
@@ -204,6 +320,9 @@ async function main() {
   if (port !== undefined) {
     console.log(`已设置默认端口：${port}（写入 dev/start 启动命令）`);
   }
+  if (theme !== undefined) {
+    console.log(`已设置默认主题：${theme}`);
+  }
   console.log("\n下一步：");
   console.log(`  cd ${projectDir}`);
   if (installResult.installer === "npm") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-imagicma",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "bin": {
     "create-next-imagicma": "./bin/create-next-imagicma.mjs"

package/template/AGENTS.md

@@ -41,7 +41,7 @@
 
 ## 3) 常用命令（pnpm）
 
-本项目**仅允许使用 pnpm** 安装依赖（见 `package.json` 的 `packageManager` / `engines` / `preinstall`）。
+本项目默认**优先使用 pnpm** 安装依赖；若环境受限可使用 npm 作为回退方案（见 `package.json` 的 `packageManager` / `engines`）。
 
 以仓库根目录为工作目录：
 
@@ -144,3 +144,82 @@
   - 确认 `tailwind.config.mjs` 的 `content` 覆盖到了 `components/ui` 等目录
 - 构建报 Turbopack/受限环境问题
   - 当前 `pnpm build` 已固定使用 `next build --webpack`（见 `package.json`）
+
+## 13) Docs-First 工作流（强约束，模板默认）
+
+本模板默认与 `ibuild + idesigner + igen-*` agents 配合。以下规则是**必须执行**，不是建议。
+
+- 状态真相源只有一个：`docs/project_state.json`。
+- `docs/index.md` 仅作导航与摘要，允许滞后，不能作为阶段判定依据。
+- 所有实现必须可回溯到 docs；禁止“先写代码、后补文档”的反向流程。
+
+### 13.1 文档缺失处理（必须）
+
+- 若用户请求“生成项目/落地开发”，但 `docs/` 不完整：
+  1. 先补齐 docs，再进入代码实现。
+  2. 补齐顺序固定：`igen-prd -> igen-persona -> igen-feature-modules -> igen-style-guide -> igen-db-schema`。
+  3. 完成后更新 `docs/project_state.json`（`docs_ready=true`）再进入实现。
+
+### 13.2 实现前必读清单（按范围）
+
+- 前端改动（页面/交互/样式）前，必须读取：
+  - `docs/prd/prd.md`
+  - `docs/feature_plan/feature_modules.md` + 对应 `feature_module_*.md`
+  - `docs/style_guide/*.style-guide.md`
+  - `docs/implementation/frontend_mock_scope.md`
+  - `docs/codegen_contract.md`
+- 后端改动（API/DB/数据流）前，必须读取：
+  - `docs/prd/prd.md`
+  - `docs/feature_plan/feature_modules.md` + 对应 `feature_module_*.md`
+  - `docs/db/db_schema.md` + `docs/db/db_schema_core.md`
+  - `docs/db/mock_data_mapping.md`
+  - `docs/implementation/backend_core_scope.md`
+  - `docs/codegen_contract.md`
+
+### 13.3 冲突处理规则（docs vs 当前代码/需求）
+
+- 默认优先级：`docs/project_state.json` + docs 契约 > 现有实现细节 > 记忆/猜测。
+- 若用户明确要求偏离 docs：先更新 docs，再改代码；禁止只改代码不更新 docs。
+- 若 docs 内部自相矛盾：先修 docs 再实现；不能在矛盾状态下继续大规模开发。
+
+### 13.4 阶段推进规则（禁止“建议即停止”）
+
+- `docs_ready=true` 后，默认连续推进 Stage B -> Stage C。
+- 仅在真实阻塞（密钥/权限/外部依赖缺失）时停止并向用户提问。
+- 禁止以“立即启动开发/推荐阅读顺序/命令清单”替代实际执行。
+- 若应用未运行，必须主动启动（优先 `restart_workflow(name="web")`），而不是让用户手动执行 `pnpm dev`。
+
+## 14) 文档一致性门禁（完成前必须全部通过）
+
+### 14.1 路由与模块一致性
+
+- 页面路由需与 `docs/feature_plan/feature_module_*.md` 的页面清单一致。
+- API 路径需与 docs 规划和 `shared/routes.ts` 契约一致。
+- 禁止新增 docs 未定义的核心页面/API（除非先更新 docs）。
+
+### 14.2 数据契约一致性
+
+- Stage B Mock 字段必须与 `docs/db/mock_data_mapping.md` 对齐。
+- Stage C API/DB 字段必须与 `docs/db/*.md` 对齐。
+- 返回数据需按 `shared/routes.ts` 对应 zod schema 解析/校验。
+
+### 14.3 运行与重定向安全
+
+- 禁止自重定向或重定向环（例如 `/` -> `/`）。
+- 验证关键路由时，重定向链长度必须有界（建议 <= 3）。
+- `/`, `/spots`, `/catches`, `/community`, `/profile`, `/hello` 不得出现 500 或循环跳转。
+
+### 14.4 质量门禁
+
+- `pnpm check` 通过。
+- `app/api` 与 `server` 不允许残留阻塞性占位实现（如 `TODO: Implement`）。
+- 未通过门禁前，`docs/project_state.json` 不能标记对应阶段为 `completed`。
+
+## 15) 交付与同步要求（模板仓库）
+
+- 每次阶段状态变更后，同步更新：
+  - `docs/project_state.json`（真相源）
+  - `docs/index.md`（派生状态展示）
+- 输出总结时必须给出“文档溯源”：
+  - 本次实现对应了哪些 docs 文件（至少列出路径）。
+  - 若有偏差，说明已更新的 docs 路径。

package/template/README.md

@@ -14,8 +14,6 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

package/template/app/_components/DevPreviewShield.tsx

@@ -309,7 +309,7 @@ export function DevPreviewShield({ children }: { children: React.ReactNode }) {
   }, [clearTimer]);
 
   const handleBuildOk = useCallback(() => {
-    const hadPendingShow = showTimerRef.current != null;
+    const hadVisibleOverlay = overlayRef.current !== "none";
 
     clearTimer(showTimerRef);
     clearTimer(hideTimerRef);
@@ -317,15 +317,15 @@ export function DevPreviewShield({ children }: { children: React.ReactNode }) {
     setDebugMode(false);
     setResetKey((k) => k + 1);
 
-    if (hadPendingShow && !debugModeRef.current) {
-      showToast();
-    }
-
-    if (overlayRef.current === "none") {
+    if (!hadVisibleOverlay) {
       setErrorInfo(null);
       return;
     }
 
+    if (!debugModeRef.current) {
+      showToast();
+    }
+
     hideOverlayWithMinVisible();
   }, [clearTimer, hideOverlayWithMinVisible, showToast]);
 

package/template/app/globals.css

@@ -113,6 +113,297 @@
   --badge-outline: hsl(var(--border));
 }
 
+/* Theme style presets (used by html[data-theme-style="<preset>"]) */
+:root[data-theme-style="quadratic"] {
+  --background: 240 8.3% 95.3%;
+  --foreground: 225 14.3% 5.5%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 225 14.3% 5.5%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 225 14.3% 5.5%;
+
+  --primary: 240 8.6% 93.1%;
+  --primary-foreground: 225 14.3% 5.5%;
+  --secondary: 240 7% 86.1%;
+  --secondary-foreground: 225 14.3% 5.5%;
+  --muted: 240 8.6% 93.1%;
+  --muted-foreground: 225 7% 35%;
+  --accent: 240 7% 86.1%;
+  --accent-foreground: 225 14.3% 5.5%;
+
+  --border: 240 7% 82%;
+  --input: 240 7% 82%;
+  --ring: 225 14.3% 5.5%;
+
+  --chart-1: 225 14.3% 35%;
+  --chart-2: 240 8% 55%;
+  --chart-3: 220 40% 55%;
+  --chart-4: 270 20% 62%;
+  --chart-5: 190 30% 52%;
+}
+
+.dark[data-theme-style="quadratic"] {
+  --background: 225 14.3% 5.5%;
+  --foreground: 240 8.3% 95.3%;
+
+  --card: 225 12% 9%;
+  --card-foreground: 240 8.3% 95.3%;
+  --popover: 225 12% 9%;
+  --popover-foreground: 240 8.3% 95.3%;
+
+  --primary: 240 8.6% 93.1%;
+  --primary-foreground: 225 14.3% 5.5%;
+  --secondary: 225 8% 15%;
+  --secondary-foreground: 240 8.3% 95.3%;
+  --muted: 225 8% 12%;
+  --muted-foreground: 240 7% 70%;
+  --accent: 225 8% 12%;
+  --accent-foreground: 240 8.3% 95.3%;
+
+  --border: 225 8% 22%;
+  --input: 225 8% 22%;
+  --ring: 240 8.6% 93.1%;
+
+  --chart-1: 240 8.6% 70%;
+  --chart-2: 220 30% 65%;
+  --chart-3: 190 30% 60%;
+  --chart-4: 270 20% 65%;
+  --chart-5: 45 20% 62%;
+}
+
+:root[data-theme-style="nomad"] {
+  --background: 240 9.1% 95.7%;
+  --foreground: 220 12.5% 9.4%;
+
+  --card: 240 12% 98%;
+  --card-foreground: 220 12.5% 9.4%;
+  --popover: 240 12% 98%;
+  --popover-foreground: 220 12.5% 9.4%;
+
+  --primary: 339 89.8% 53.9%;
+  --primary-foreground: 220 12.5% 9.4%;
+  --secondary: 231 10.4% 86.9%;
+  --secondary-foreground: 220 12.5% 9.4%;
+  --muted: 240 9% 92%;
+  --muted-foreground: 220 8% 35%;
+  --accent: 231 10.4% 86.9%;
+  --accent-foreground: 220 12.5% 9.4%;
+
+  --border: 231 10% 82%;
+  --input: 231 10% 82%;
+  --ring: 339 89.8% 53.9%;
+
+  --chart-1: 339 89.8% 53.9%;
+  --chart-2: 220 28% 40%;
+  --chart-3: 40 72% 60%;
+  --chart-4: 173 25% 45%;
+  --chart-5: 280 45% 60%;
+}
+
+.dark[data-theme-style="nomad"] {
+  --background: 220 12.5% 9.4%;
+  --foreground: 240 9.1% 95.7%;
+
+  --card: 220 12% 12%;
+  --card-foreground: 240 9.1% 95.7%;
+  --popover: 220 12% 12%;
+  --popover-foreground: 240 9.1% 95.7%;
+
+  --primary: 339 90% 62%;
+  --primary-foreground: 220 12.5% 9.4%;
+  --secondary: 220 10% 17%;
+  --secondary-foreground: 240 9.1% 95.7%;
+  --muted: 220 9% 14%;
+  --muted-foreground: 240 7% 70%;
+  --accent: 220 9% 14%;
+  --accent-foreground: 240 9.1% 95.7%;
+
+  --border: 220 8% 22%;
+  --input: 220 8% 22%;
+  --ring: 339 90% 62%;
+
+  --chart-1: 339 90% 66%;
+  --chart-2: 40 72% 65%;
+  --chart-3: 173 30% 58%;
+  --chart-4: 280 50% 72%;
+  --chart-5: 220 18% 72%;
+}
+
+:root[data-theme-style="honey"] {
+  --background: 49 38.1% 91.8%;
+  --foreground: 40 52.9% 27.5%;
+
+  --card: 49 42% 95%;
+  --card-foreground: 40 52.9% 27.5%;
+  --popover: 49 42% 95%;
+  --popover-foreground: 40 52.9% 27.5%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 40 52.9% 18%;
+  --secondary: 63 20.8% 79.2%;
+  --secondary-foreground: 40 52.9% 27.5%;
+  --muted: 49 30% 88%;
+  --muted-foreground: 40 24% 38%;
+  --accent: 63 20.8% 79.2%;
+  --accent-foreground: 40 52.9% 27.5%;
+
+  --border: 52 22% 74%;
+  --input: 52 22% 74%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 55%;
+  --chart-2: 63 30% 45%;
+  --chart-3: 173 25% 42%;
+  --chart-4: 18 56% 50%;
+  --chart-5: 240 16% 52%;
+}
+
+.dark[data-theme-style="honey"] {
+  --background: 36 38% 10%;
+  --foreground: 49 30% 88%;
+
+  --card: 34 30% 14%;
+  --card-foreground: 49 30% 88%;
+  --popover: 34 30% 14%;
+  --popover-foreground: 49 30% 88%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 36 38% 10%;
+  --secondary: 38 20% 20%;
+  --secondary-foreground: 49 30% 88%;
+  --muted: 38 18% 18%;
+  --muted-foreground: 49 18% 70%;
+  --accent: 38 18% 18%;
+  --accent-foreground: 49 30% 88%;
+
+  --border: 38 18% 26%;
+  --input: 38 18% 26%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 68.2%;
+  --chart-2: 63 35% 58%;
+  --chart-3: 173 30% 56%;
+  --chart-4: 20 56% 64%;
+  --chart-5: 240 22% 70%;
+}
+
+:root[data-theme-style="zen-garden"] {
+  --background: 84 9.8% 90%;
+  --foreground: 225 18.2% 8.6%;
+
+  --card: 84 12% 94%;
+  --card-foreground: 225 18.2% 8.6%;
+  --popover: 84 12% 94%;
+  --popover-foreground: 225 18.2% 8.6%;
+
+  --primary: 173 24.7% 62%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 289 32.9% 72%;
+  --secondary-foreground: 225 18.2% 8.6%;
+  --muted: 84 10% 86%;
+  --muted-foreground: 225 10% 36%;
+  --accent: 289 32.9% 72%;
+  --accent-foreground: 225 18.2% 8.6%;
+
+  --border: 84 8% 78%;
+  --input: 84 8% 78%;
+  --ring: 173 24.7% 62%;
+
+  --chart-1: 173 24.7% 48%;
+  --chart-2: 289 32.9% 58%;
+  --chart-3: 40 68% 56%;
+  --chart-4: 220 26% 50%;
+  --chart-5: 0 55% 58%;
+}
+
+.dark[data-theme-style="zen-garden"] {
+  --background: 225 18.2% 8.6%;
+  --foreground: 84 9.8% 90%;
+
+  --card: 225 16% 12%;
+  --card-foreground: 84 9.8% 90%;
+  --popover: 225 16% 12%;
+  --popover-foreground: 84 9.8% 90%;
+
+  --primary: 173 30% 66%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 225 12% 18%;
+  --secondary-foreground: 84 9.8% 90%;
+  --muted: 225 10% 15%;
+  --muted-foreground: 84 8% 72%;
+  --accent: 225 10% 15%;
+  --accent-foreground: 84 9.8% 90%;
+
+  --border: 225 10% 24%;
+  --input: 225 10% 24%;
+  --ring: 173 30% 66%;
+
+  --chart-1: 173 30% 66%;
+  --chart-2: 289 36% 70%;
+  --chart-3: 40 68% 64%;
+  --chart-4: 220 30% 70%;
+  --chart-5: 355 65% 68%;
+}
+
+:root[data-theme-style="highlighter"] {
+  --background: 228 23.8% 95.9%;
+  --foreground: 223 18.9% 7.3%;
+
+  --card: 228 24% 98%;
+  --card-foreground: 223 18.9% 7.3%;
+  --popover: 228 24% 98%;
+  --popover-foreground: 223 18.9% 7.3%;
+
+  --primary: 97 70.5% 64.1%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 249 35.6% 88.4%;
+  --secondary-foreground: 223 18.9% 7.3%;
+  --muted: 228 20% 92%;
+  --muted-foreground: 223 10% 35%;
+  --accent: 249 35.6% 88.4%;
+  --accent-foreground: 223 18.9% 7.3%;
+
+  --border: 238 20% 84%;
+  --input: 238 20% 84%;
+  --ring: 97 70.5% 64.1%;
+
+  --chart-1: 97 70.5% 48%;
+  --chart-2: 249 45% 56%;
+  --chart-3: 202 72% 54%;
+  --chart-4: 339 78% 58%;
+  --chart-5: 40 78% 58%;
+}
+
+.dark[data-theme-style="highlighter"] {
+  --background: 223 18.9% 7.3%;
+  --foreground: 228 23.8% 95.9%;
+
+  --card: 223 16% 11%;
+  --card-foreground: 228 23.8% 95.9%;
+  --popover: 223 16% 11%;
+  --popover-foreground: 228 23.8% 95.9%;
+
+  --primary: 97 74% 66%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 223 12% 18%;
+  --secondary-foreground: 228 23.8% 95.9%;
+  --muted: 223 10% 15%;
+  --muted-foreground: 228 14% 72%;
+  --accent: 223 10% 15%;
+  --accent-foreground: 228 23.8% 95.9%;
+
+  --border: 223 10% 24%;
+  --input: 223 10% 24%;
+  --ring: 97 74% 66%;
+
+  --chart-1: 97 74% 66%;
+  --chart-2: 249 50% 72%;
+  --chart-3: 202 78% 70%;
+  --chart-4: 339 80% 70%;
+  --chart-5: 40 78% 68%;
+}
+
 @layer base {
   * {
     border-color: hsl(var(--border));

package/template/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { DevPreviewShield } from "./_components/DevPreviewShield";
 import { Providers } from "./providers";
+import { DEFAULT_THEME_STYLE } from "@/lib/theme/default-theme";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -14,7 +15,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh-CN" suppressHydrationWarning>
+    <html
+      lang="zh-CN"
+      suppressHydrationWarning
+      data-theme-style={DEFAULT_THEME_STYLE}
+    >
       <body className="antialiased">
         <Providers>
           {process.env.NODE_ENV === "development" ? (

package/template/lib/theme/default-theme.ts

@@ -0,0 +1,11 @@
+export const THEME_STYLES = [
+  "quadratic",
+  "nomad",
+  "honey",
+  "zen-garden",
+  "highlighter",
+] as const;
+
+export type ThemeStyle = (typeof THEME_STYLES)[number];
+
+export const DEFAULT_THEME_STYLE: ThemeStyle = "quadratic";

package/template/package.json

@@ -2,14 +2,9 @@
   "name": "nextjs-app",
   "version": "0.1.0",
   "private": true,
-  "packageManager": "pnpm@9",
-  "engines": {
-    "packageManager": "pnpm@>=9"
-  },
   "scripts": {
-    "preinstall": "npx only-allow pnpm",
     "dev": "next dev",
-    "build": "next build --webpack",
+    "build": "next build",
     "start": "next start",
     "check": "tsc -p tsconfig.json --noEmit",
     "db:push": "drizzle-kit push",

package/template/process-compose.yaml

@@ -0,0 +1,13 @@
+version: "0.5"
+log_location: ".opencode/logs/process-compose.log"
+
+processes:
+  web:
+    command: "pnpm dev"
+    working_dir: "."
+    environment:
+      - "PORT=5000"
+    availability:
+      restart: "always"
+      backoff_seconds: 5
+      max_restarts: 20