create-z3 0.0.11 → 0.0.14

package/dist/index.js

@@ -6,7 +6,7 @@ import { select, input, checkbox, confirm, Separator } from "@inquirer/prompts";
 import chalk2 from "chalk";
 import { readFileSync } from "fs";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { dirname as dirname2, join as join3 } from "path";
+import { dirname as dirname2, join as join4 } from "path";
 
 // src/utils/validation.ts
 import validateNpmPackageName from "validate-npm-package-name";
@@ -72,7 +72,10 @@ async function copyTemplate(framework, targetPath) {
   const __filename2 = fileURLToPath(import.meta.url);
   const __dirname2 = dirname(__filename2);
   const templateDir = framework === "tanstack" ? "tanstack-start" : "nextjs";
-  const templatePath = join(__dirname2, "../templates", templateDir);
+  let templatePath = join(__dirname2, "../../templates", templateDir);
+  if (!fs2.existsSync(templatePath)) {
+    templatePath = join(__dirname2, "../templates", templateDir);
+  }
   await fs2.copy(templatePath, targetPath, {
     overwrite: false,
     errorOnExist: false
@@ -1725,25 +1728,25 @@ function getAdditionalProviders() {
 
 // src/installers/string-utils.ts
 import fs3 from "fs-extra";
-var DEFAULT_THEME = `--background: 0 0% 100%;
---foreground: 240 10% 3.9%;
---card: 0 0% 100%;
---card-foreground: 240 10% 3.9%;
---popover: 0 0% 100%;
---popover-foreground: 240 10% 3.9%;
---primary: 240 5.9% 10%;
---primary-foreground: 0 0% 98%;
---secondary: 240 4.8% 95.9%;
---secondary-foreground: 240 5.9% 10%;
---muted: 240 4.8% 95.9%;
---muted-foreground: 240 3.8% 46.1%;
---accent: 240 4.8% 95.9%;
---accent-foreground: 240 5.9% 10%;
---destructive: 0 84.2% 60.2%;
---destructive-foreground: 0 0% 98%;
---border: 240 5.9% 90%;
---input: 240 5.9% 90%;
---ring: 240 5.9% 10%;
+var DEFAULT_THEME = `--background: 100% 0.000 0;
+--foreground: 3.9% 0.006 240;
+--card: 100% 0.000 0;
+--card-foreground: 3.9% 0.006 240;
+--popover: 100% 0.000 0;
+--popover-foreground: 3.9% 0.006 240;
+--primary: 10% 0.003 240;
+--primary-foreground: 98% 0.000 0;
+--secondary: 95.9% 0.002 240;
+--secondary-foreground: 10% 0.003 240;
+--muted: 95.9% 0.002 240;
+--muted-foreground: 46.1% 0.002 240;
+--accent: 95.9% 0.002 240;
+--accent-foreground: 10% 0.003 240;
+--destructive: 60.2% 0.168 0;
+--destructive-foreground: 98% 0.000 0;
+--border: 90% 0.003 240;
+--input: 90% 0.003 240;
+--ring: 10% 0.003 240;
 --radius: 0.5rem;`;
 function detectIndentation(line) {
   const match = line.match(/^(\s*)/);
@@ -1927,6 +1930,129 @@ import { join as join2 } from "path";
 import { execa } from "execa";
 import ora from "ora";
 import crypto from "crypto";
+
+// src/utils/tweakcn-converter.ts
+import fs4 from "fs-extra";
+import convert from "color-convert";
+async function convertTweakCNToOKLCH(options) {
+  const { source, format = "oklch" } = options;
+  const cssContent = await fetchOrReadCSS(source);
+  const colors = parseColorsFromCSS(cssContent);
+  const convertedColors = colors.map((color) => ({
+    ...color,
+    oklch: convertColorToOKLCH(color.value)
+  }));
+  return generateCSSOutput(convertedColors, format);
+}
+async function fetchOrReadCSS(source) {
+  if (source.startsWith("http://") || source.startsWith("https://")) {
+    try {
+      const response = await fetch(source);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return await response.text();
+    } catch (error) {
+      throw new Error(
+        `Failed to fetch CSS from URL: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+  try {
+    return await fs4.readFile(source, "utf-8");
+  } catch (error) {
+    throw new Error(
+      `Failed to read CSS from file: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
+}
+function parseColorsFromCSS(css) {
+  const colors = [];
+  const cssVarRegex = /--([\w-]+)\s*:\s*([^;]+);/g;
+  let match;
+  while ((match = cssVarRegex.exec(css)) !== null) {
+    const name = `--${match[1]}`;
+    const value = match[2].trim();
+    if (isColorValue(value)) {
+      colors.push({ name, value });
+    }
+  }
+  return colors;
+}
+function isColorValue(value) {
+  if (value.startsWith("#")) {
+    return true;
+  }
+  if (value.startsWith("rgb(") || value.startsWith("rgba(")) {
+    return true;
+  }
+  if (value.startsWith("hsl(") || value.startsWith("hsla(")) {
+    return true;
+  }
+  if (value.startsWith("oklch(")) {
+    return true;
+  }
+  if (/^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(value)) {
+    return true;
+  }
+  return false;
+}
+function convertColorToOKLCH(colorValue) {
+  const trimmed = colorValue.trim();
+  if (trimmed.startsWith("oklch(")) {
+    const match = trimmed.match(/oklch\(([\d.]+%?)\s+([\d.]+)\s+([\d.]+)\)/);
+    if (match) {
+      return `${match[1]} ${match[2]} ${match[3]}`;
+    }
+  }
+  let rgb;
+  try {
+    if (trimmed.startsWith("#")) {
+      rgb = convert.hex.rgb(trimmed.slice(1));
+    } else if (trimmed.startsWith("rgb(") || trimmed.startsWith("rgba(")) {
+      const match = trimmed.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);
+      if (!match) throw new Error("Invalid RGB format");
+      rgb = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+    } else if (trimmed.startsWith("hsl(") || trimmed.startsWith("hsla(")) {
+      const match = trimmed.match(/hsla?\((\d+),?\s*(\d+)%?,?\s*(\d+)%?/);
+      if (!match) throw new Error("Invalid HSL format");
+      const hsl2 = [
+        parseInt(match[1]),
+        parseInt(match[2]),
+        parseInt(match[3])
+      ];
+      rgb = convert.hsl.rgb(hsl2);
+    } else if (/^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(trimmed)) {
+      const parts = trimmed.split(/\s+/);
+      const h2 = parseFloat(parts[0]);
+      const s = parseFloat(parts[1].replace("%", ""));
+      const l2 = parseFloat(parts[2].replace("%", ""));
+      rgb = convert.hsl.rgb([h2, s, l2]);
+    } else {
+      return trimmed;
+    }
+    const hsl = convert.rgb.hsl(rgb);
+    const l = hsl[2];
+    const c = hsl[1] / 100 * 0.4;
+    const h = hsl[0];
+    return `${l}% ${c.toFixed(3)} ${h}`;
+  } catch (error) {
+    console.warn(`Failed to convert color "${colorValue}": ${error instanceof Error ? error.message : "Unknown error"}`);
+    return trimmed;
+  }
+}
+function generateCSSOutput(colors, format) {
+  if (colors.length === 0) {
+    return "";
+  }
+  const declarations = colors.map((color) => {
+    const value = format === "oklch" && color.oklch ? color.oklch : color.value;
+    return `${color.name}: ${value};`;
+  }).join("\n");
+  return declarations;
+}
+
+// src/installers/base.ts
 var FrameworkInstaller = class {
   /**
    * Constructor for FrameworkInstaller
@@ -1947,24 +2073,22 @@ var FrameworkInstaller = class {
   }
   /**
    * Detect the package manager used to invoke the CLI
-   * Checks npm_config_user_agent environment variable
+   * Checks environment variables set by package managers
    *
-   * @returns Detected package manager, defaults to 'npm'
+   * @returns Detected package manager ('npm', 'yarn', 'pnpm', or 'bun')
    */
   detectPackageManager() {
-    const userAgent = process.env.npm_config_user_agent || "";
-    if (userAgent.includes("pnpm")) {
-      return "pnpm";
-    } else if (userAgent.includes("yarn")) {
-      return "yarn";
-    } else if (userAgent.includes("bun")) {
-      return "bun";
+    const userAgent = process.env.npm_config_user_agent;
+    if (userAgent) {
+      if (userAgent.includes("pnpm")) return "pnpm";
+      if (userAgent.includes("yarn")) return "yarn";
+      if (userAgent.includes("bun")) return "bun";
     }
     return "npm";
   }
   /**
    * Install project dependencies using detected package manager
-   * Shows progress with ora spinner
+   * Shows progress spinner during installation
    */
   async installDependencies() {
     const packageManager = this.detectPackageManager();
@@ -1974,21 +2098,21 @@ var FrameworkInstaller = class {
         cwd: this.targetPath,
         stdio: "pipe"
       });
-      spinner.succeed(`Dependencies installed with ${packageManager}`);
+      spinner.succeed("Dependencies installed successfully");
     } catch (error) {
-      spinner.fail(`Failed to install dependencies with ${packageManager}`);
+      spinner.fail("Failed to install dependencies");
       throw new Error(
         `Dependency installation failed: ${error instanceof Error ? error.message : "Unknown error"}`
       );
     }
   }
   /**
-   * Format generated files using the project's format command
-   * Runs after all file modifications to ensure consistent code style
+   * Format code using project's formatter (Prettier via package.json script)
+   * Non-blocking - continues even if formatting fails
    */
   async formatCode() {
     const packageManager = this.detectPackageManager();
-    const spinner = ora("Formatting generated files...").start();
+    const spinner = ora("Formatting code...").start();
     try {
       await execa(packageManager, ["run", "format"], {
         cwd: this.targetPath,
@@ -2072,13 +2196,15 @@ Make sure you are authenticated with GitHub CLI (run "gh auth login")`
     return crypto.randomBytes(32).toString("hex");
   }
   /**
-   * Fetch TweakCN theme CSS from URL
+   * Fetch TweakCN theme CSS from URL and convert to OKLCH format
    * Handles network errors and provides retry suggestions
+   * Optionally converts fetched theme through OKLCH converter for consistent color format
    *
    * @param url - URL to fetch theme from
-   * @returns Theme CSS content
+   * @param convertToOklch - Whether to convert theme colors to OKLCH format (default: true)
+   * @returns Theme CSS content in OKLCH format (if conversion enabled)
    */
-  async fetchThemeFromUrl(url) {
+  async fetchThemeFromUrl(url, convertToOklch = true) {
     const spinner = ora("Fetching TweakCN theme...").start();
     try {
       const response = await fetch(url);
@@ -2087,6 +2213,23 @@ Make sure you are authenticated with GitHub CLI (run "gh auth login")`
       }
       const content = await response.text();
       spinner.succeed("TweakCN theme fetched");
+      if (convertToOklch) {
+        const convertSpinner = ora("Converting theme to OKLCH format...").start();
+        try {
+          const convertedContent = await convertTweakCNToOKLCH({
+            source: url,
+            format: "oklch"
+          });
+          convertSpinner.succeed("Theme converted to OKLCH format");
+          return convertedContent;
+        } catch (convertError) {
+          convertSpinner.warn("OKLCH conversion failed, using raw theme CSS");
+          console.warn(
+            `Warning: Failed to convert theme to OKLCH: ${convertError instanceof Error ? convertError.message : "Unknown error"}`
+          );
+          return content;
+        }
+      }
       return content;
     } catch (error) {
       spinner.fail("Failed to fetch TweakCN theme");
@@ -2111,15 +2254,17 @@ Please check the URL and your internet connection, then try again.`
       copySpinner.fail("Failed to copy template files");
       throw error;
     }
-    if (options.emailPasswordAuth || options.oauthProviders.length > 0) {
-      const authSpinner = ora("Configuring authentication...").start();
-      try {
-        await this.updateOAuthConfig(options.oauthProviders, options.emailPasswordAuth);
+    const authSpinner = ora("Configuring authentication...").start();
+    try {
+      await this.updateOAuthConfig(options.oauthProviders, options.emailPasswordAuth);
+      if (options.emailPasswordAuth || options.oauthProviders.length > 0) {
         authSpinner.succeed("Authentication configuration updated");
-      } catch (error) {
-        authSpinner.fail("Failed to configure authentication");
-        throw error;
+      } else {
+        authSpinner.succeed("Authentication placeholders cleaned up");
       }
+    } catch (error) {
+      authSpinner.fail("Failed to configure authentication");
+      throw error;
     }
     const oauthUISpinner = ora("Configuring OAuth UI...").start();
     try {
@@ -2175,16 +2320,17 @@ Please check the URL and your internet connection, then try again.`
       if (options.tweakcnTheme) {
         if (options.tweakcnTheme.type === "url") {
           themeContent = await this.fetchThemeFromUrl(options.tweakcnTheme.content);
+        } else if (options.tweakcnTheme.type === "css") {
+          themeContent = options.tweakcnTheme.content;
         } else {
           themeContent = options.tweakcnTheme.content;
         }
+        await this.applyTweakCNTheme(themeContent);
+        themeSpinner.succeed("TweakCN theme applied");
       } else {
-        themeContent = DEFAULT_THEME;
+        await this.applyTweakCNTheme(DEFAULT_THEME);
+        themeSpinner.succeed("Default theme applied");
       }
-      await this.applyTweakCNTheme(themeContent);
-      themeSpinner.succeed(
-        options.tweakcnTheme ? "TweakCN theme applied" : "Default theme applied"
-      );
     } catch (error) {
       themeSpinner.fail("Failed to apply theme");
       throw error;
@@ -2194,7 +2340,6 @@ Please check the URL and your internet connection, then try again.`
     }
     if (options.installDependencies) {
       await this.installDependencies();
-      await this.formatCode();
     }
   }
 };
@@ -2328,11 +2473,137 @@ var TanStackInstaller = class extends FrameworkInstaller {
   }
 };
 
+// src/installers/nextjs.ts
+import { join as join3 } from "path";
+var NextJSInstaller = class extends FrameworkInstaller {
+  /**
+   * Framework identifier for Next.js
+   */
+  get frameworkName() {
+    return "nextjs";
+  }
+  /**
+   * Update OAuth configuration in Convex auth file
+   * Target file: convex/auth/index.ts (SAME as TanStack)
+   * Placeholders: // {{EMAIL_PASSWORD_AUTH}} and // {{OAUTH_PROVIDERS}}
+   *
+   * @param selectedProviders - Array of provider IDs to configure
+   * @param emailPasswordEnabled - Whether email/password authentication is enabled
+   */
+  async updateOAuthConfig(selectedProviders, emailPasswordEnabled) {
+    const authFilePath = join3(this.targetPath, "convex/auth/index.ts");
+    const authProvidersBlock = generateAuthProvidersBlock(
+      selectedProviders,
+      emailPasswordEnabled
+    );
+    await replacePlaceholder(
+      authFilePath,
+      "// {{OAUTH_PROVIDERS}}",
+      authProvidersBlock
+    );
+    await replacePlaceholder(
+      authFilePath,
+      "// {{EMAIL_PASSWORD_AUTH}}",
+      "",
+      { graceful: true }
+    );
+  }
+  /**
+   * Update OAuth UI configuration in auth client file
+   * Target file: src/auth/client.tsx (DIFFERENT from TanStack: src/providers.tsx)
+   * Placeholder: // {{OAUTH_UI_PROVIDERS}}
+   *
+   * @param selectedProviders - Array of provider IDs to configure
+   */
+  async updateOAuthUIConfig(selectedProviders) {
+    const providersFilePath = join3(this.targetPath, "src/auth/client.tsx");
+    const uiConfigBlock = generateOAuthUIProvidersBlock(selectedProviders);
+    await replacePlaceholder(
+      providersFilePath,
+      "// {{OAUTH_UI_PROVIDERS}}",
+      uiConfigBlock
+    );
+  }
+  /**
+   * Update .env.example with OAuth environment variables
+   * Target file: .env.example (SAME as TanStack)
+   * Placeholder: # {{ENV_OAUTH_VARS}}
+   * Applies NEXT_PUBLIC_ prefix for client-side variables (DIFFERENT parameter from TanStack)
+   *
+   * @param selectedProviders - Array of provider IDs to configure
+   */
+  async updateEnvExample(selectedProviders) {
+    const envFilePath = join3(this.targetPath, ".env.example");
+    const envVarsBlock = generateEnvVarsBlock(selectedProviders, "nextjs");
+    await replacePlaceholder(
+      envFilePath,
+      "# {{ENV_OAUTH_VARS}}",
+      envVarsBlock
+    );
+  }
+  /**
+   * Update README with OAuth provider setup guides
+   * Target file: README.md (SAME as TanStack)
+   * Placeholder: <!-- {{OAUTH_SETUP_GUIDE}} -->
+   * Handles missing placeholder gracefully with warning
+   *
+   * @param selectedProviders - Array of provider IDs to configure
+   */
+  async updateReadme(selectedProviders) {
+    const readmeFilePath = join3(this.targetPath, "README.md");
+    const readmeSection = generateReadmeSection(selectedProviders);
+    await replacePlaceholder(
+      readmeFilePath,
+      "<!-- {{OAUTH_SETUP_GUIDE}} -->",
+      readmeSection,
+      { graceful: true }
+    );
+  }
+  /**
+   * Apply TweakCN theme to global CSS file
+   * Target file: src/app/(frontend)/globals.css (DIFFERENT from TanStack: src/styles/globals.css)
+   * Placeholder: CSS comment with TWEAKCN_THEME variable
+   *
+   * @param themeContent - CSS content to apply
+   */
+  async applyTweakCNTheme(themeContent) {
+    const cssFilePath = join3(this.targetPath, "src/app/(frontend)/globals.css");
+    await replacePlaceholder(
+      cssFilePath,
+      "/* {{TWEAKCN_THEME}} */",
+      themeContent
+    );
+  }
+  /**
+   * Update env.mjs with OAuth provider environment variables
+   * Target file: src/env.mjs (DIFFERENT from TanStack: src/env.ts - Next.js uses env.mjs)
+   * Placeholders: // {{OAUTH_ENV_SERVER_SCHEMA}} and // {{OAUTH_ENV_RUNTIME_MAPPING}}
+   * Adds zod schema validation and runtime mappings for OAuth credentials
+   *
+   * @param selectedProviders - Array of provider IDs to configure
+   */
+  async updateEnvTs(selectedProviders) {
+    const envFilePath = join3(this.targetPath, "src/env.mjs");
+    const serverSchema = generateEnvTsServerSchema(selectedProviders);
+    await replacePlaceholder(
+      envFilePath,
+      "// {{OAUTH_ENV_SERVER_SCHEMA}}",
+      serverSchema
+    );
+    const runtimeMapping = generateEnvTsRuntimeMapping(selectedProviders);
+    await replacePlaceholder(
+      envFilePath,
+      "// {{OAUTH_ENV_RUNTIME_MAPPING}}",
+      runtimeMapping
+    );
+  }
+};
+
 // src/index.ts
 var __filename = fileURLToPath2(import.meta.url);
 var __dirname = dirname2(__filename);
 var packageJson = JSON.parse(
-  readFileSync(join3(__dirname, "../package.json"), "utf-8")
+  readFileSync(join4(__dirname, "../package.json"), "utf-8")
 );
 var program = new Command();
 async function promptOAuthProviders() {
@@ -2488,7 +2759,7 @@ program.name("create-z3").version(packageJson.version).description("CLI for scaf
     if (framework === "tanstack") {
       installer = new TanStackInstaller(createdPath, projectName);
     } else {
-      throw new Error("Next.js installer not yet implemented. Please use TanStack Start.");
+      installer = new NextJSInstaller(createdPath, projectName);
     }
     try {
       await installer.initProject(projectOptions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-z3",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "type": "module",
   "description": "CLI for scaffolding Z3 Stack applications (TanStack/Next.js + Convex + Better Auth)",
   "bin": {
@@ -25,7 +25,8 @@
     "ora": "^8.1.0",
     "execa": "^9.5.2",
     "sort-package-json": "^2.10.0",
-    "validate-npm-package-name": "^5.0.0"
+    "validate-npm-package-name": "^5.0.0",
+    "color-convert": "^2.0.1"
   },
   "devDependencies": {
     "typescript": "^5.7.0",
@@ -33,6 +34,7 @@
     "@types/node": "^22.0.0",
     "@types/fs-extra": "^11.0.0",
     "@types/validate-npm-package-name": "^4.0.0",
+    "@types/color-convert": "^2.0.3",
     "vitest": "^2.0.0"
   },
   "engines": {