@flowgram.ai/cli 0.1.8 → 0.4.11

package/dist/index.js

@@ -10,16 +10,20 @@ import { Command } from "commander";
 
 // src/materials/index.ts
 import inquirer from "inquirer";
-import chalk2 from "chalk";
+import chalk3 from "chalk";
 
 // src/materials/materials.ts
-import { fileURLToPath as fileURLToPath2 } from "url";
+import path4 from "path";
+import fs3 from "fs";
+
+// src/utils/ts-file.ts
 import path3 from "path";
 import fs2 from "fs";
 
-// src/utils/traverse-file.ts
+// src/utils/file.ts
 import path2 from "path";
 import fs from "fs";
+import ignore from "ignore";
 var File = class {
   constructor(filePath, root = "/") {
     this.root = root;
@@ -45,18 +49,120 @@ var File = class {
     this.content = updater(this.content);
     fs.writeFileSync(this.path, this.content, "utf-8");
   }
+  write(nextContent) {
+    this.content = nextContent;
+    fs.writeFileSync(this.path, this.content, "utf-8");
+  }
 };
-function* traverseRecursiveFiles(folder) {
+function* traverseRecursiveFilePaths(folder, ig = ignore().add(".git"), root = folder) {
   const files = fs.readdirSync(folder);
+  if (fs.existsSync(path2.join(folder, ".gitignore"))) {
+    ig.add(fs.readFileSync(path2.join(folder, ".gitignore"), "utf-8"));
+  }
   for (const file of files) {
     const filePath = path2.join(folder, file);
+    if (ig.ignores(path2.relative(root, filePath))) {
+      continue;
+    }
     if (fs.statSync(filePath).isDirectory()) {
-      yield* traverseRecursiveFiles(filePath);
+      yield* traverseRecursiveFilePaths(filePath, ig, root);
     } else {
-      yield new File(filePath);
+      yield filePath;
     }
   }
 }
+function* traverseRecursiveFiles(folder) {
+  for (const filePath of traverseRecursiveFilePaths(folder)) {
+    yield new File(filePath);
+  }
+}
+
+// src/utils/export.ts
+function extractNamedExports(content) {
+  const valueExports = [];
+  const typeExports = [];
+  const typeDefinitions = /* @__PURE__ */ new Set();
+  const typePatterns = [
+    /\b(?:type|interface)\s+(\w+)/g,
+    /\bexport\s+(?:type|interface)\s+(\w+)/g
+  ];
+  let match;
+  for (const pattern of typePatterns) {
+    while ((match = pattern.exec(content)) !== null) {
+      typeDefinitions.add(match[1]);
+    }
+  }
+  const exportPatterns = [
+    // export const/var/let/function/class/type/interface
+    /\bexport\s+(const|var|let|function|class|type|interface)\s+(\w+)/g,
+    // export { name1, name2 }
+    /\bexport\s*\{([^}]+)\}/g,
+    // export { name as alias }
+    /\bexport\s*\{[^}]*\b(\w+)\s+as\s+(\w+)[^}]*\}/g,
+    // export default function name()
+    /\bexport\s+default\s+(?:function|class)\s+(\w+)/g,
+    // export type { Type1, Type2 }
+    /\bexport\s+type\s*\{([^}]+)\}/g,
+    // export type { Original as Alias }
+    /\bexport\s+type\s*\{[^}]*\b(\w+)\s+as\s+(\w+)[^}]*\}/g
+  ];
+  exportPatterns[0].lastIndex = 0;
+  while ((match = exportPatterns[0].exec(content)) !== null) {
+    const [, kind, name] = match;
+    if (kind === "type" || kind === "interface" || typeDefinitions.has(name)) {
+      typeExports.push(name);
+    } else {
+      valueExports.push(name);
+    }
+  }
+  exportPatterns[1].lastIndex = 0;
+  while ((match = exportPatterns[1].exec(content)) !== null) {
+    const exportsList = match[1].split(",").map((item) => item.trim()).filter((item) => item && !item.includes(" as "));
+    for (const name of exportsList) {
+      if (name.startsWith("type ")) {
+        typeExports.push(name.replace("type ", "").trim());
+      } else if (typeDefinitions.has(name)) {
+        typeExports.push(name);
+      } else {
+        valueExports.push(name);
+      }
+    }
+  }
+  exportPatterns[2].lastIndex = 0;
+  while ((match = exportPatterns[2].exec(content)) !== null) {
+    const [, original, alias] = match;
+    if (typeDefinitions.has(original)) {
+      typeExports.push(alias);
+    } else {
+      valueExports.push(alias);
+    }
+  }
+  exportPatterns[3].lastIndex = 0;
+  while ((match = exportPatterns[3].exec(content)) !== null) {
+    const name = match[1];
+    if (typeDefinitions.has(name)) {
+      typeExports.push(name);
+    } else {
+      valueExports.push(name);
+    }
+  }
+  exportPatterns[4].lastIndex = 0;
+  while ((match = exportPatterns[4].exec(content)) !== null) {
+    const exportsList = match[1].split(",").map((item) => item.trim()).filter((item) => item && !item.includes(" as "));
+    for (const name of exportsList) {
+      typeExports.push(name);
+    }
+  }
+  exportPatterns[5].lastIndex = 0;
+  while ((match = exportPatterns[5].exec(content)) !== null) {
+    const [, original, alias] = match;
+    typeExports.push(alias);
+  }
+  return {
+    values: [...new Set(valueExports)].sort(),
+    types: [...new Set(typeExports)].sort()
+  };
+}
 
 // src/utils/import.ts
 function assembleImport(declaration) {
@@ -75,14 +181,10 @@ function assembleImport(declaration) {
   if (namespaceImport) {
     importClauses.push(`* as ${namespaceImport}`);
   }
-  return `import ${importClauses.join(", ")} from '${source}'`;
-}
-function replaceImport(fileContent, origin, replaceTo) {
-  const replaceImportStatements = replaceTo.map(assembleImport);
-  return fileContent.replace(origin.statement, replaceImportStatements.join("\n"));
+  return `import ${importClauses.join(", ")} from '${source}';`;
 }
 function* traverseFileImports(fileContent) {
-  const importRegex = /import\s+([^{}*,]*?)?(?:\s*\*\s*as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?(?:\s*\{([^}]*)\}\s*,?)?(?:\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?\s*from\s*['"`]([^'"`]+)['"`]/g;
+  const importRegex = /import\s+([^{}*,]*?)?(?:\s*\*\s*as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?(?:\s*\{([^}]*)\}\s*,?)?(?:\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,?)?\s*from\s*['"`]([^'"`]+)['"`]\;?/g;
   let match;
   while ((match = importRegex.exec(fileContent)) !== null) {
     const [fullMatch, defaultPart, namespacePart, namedPart, defaultPart2, source] = match;
@@ -127,9 +229,107 @@ function* traverseFileImports(fileContent) {
   }
 }
 
+// src/utils/ts-file.ts
+var TsFile = class extends File {
+  constructor(filePath) {
+    super(filePath);
+    this.exports = {
+      values: [],
+      types: []
+    };
+    this.imports = [];
+    this.exports = extractNamedExports(fs2.readFileSync(filePath, "utf-8"));
+    this.imports = Array.from(
+      traverseFileImports(fs2.readFileSync(filePath, "utf-8"))
+    );
+  }
+  get allExportNames() {
+    return [...this.exports.values, ...this.exports.types];
+  }
+  addImport(importDeclarations) {
+    importDeclarations.forEach((importDeclaration) => {
+      importDeclaration.statement = assembleImport(importDeclaration);
+    });
+    this.replace((content) => {
+      const lastImportStatement = this.imports[this.imports.length - 1];
+      return content.replace(
+        lastImportStatement.statement,
+        `${lastImportStatement?.statement}
+${importDeclarations.map(
+          (item) => item.statement
+        )}
+`
+      );
+    });
+    this.imports.push(...importDeclarations);
+  }
+  removeImport(importDeclarations) {
+    this.replace(
+      (content) => importDeclarations.reduce(
+        (prev, cur) => prev.replace(cur.statement, ""),
+        content
+      )
+    );
+    this.imports = this.imports.filter(
+      (item) => !importDeclarations.includes(item)
+    );
+  }
+  replaceImport(oldImports, newImports) {
+    newImports.forEach((importDeclaration) => {
+      importDeclaration.statement = assembleImport(importDeclaration);
+    });
+    this.replace((content) => {
+      oldImports.forEach((oldImport, idx) => {
+        const replaceTo = newImports[idx];
+        if (replaceTo) {
+          content = content.replace(oldImport.statement, replaceTo.statement);
+          this.imports.map((_import) => {
+            if (_import.statement === oldImport.statement) {
+              _import = replaceTo;
+            }
+          });
+        } else {
+          content = content.replace(oldImport.statement, "");
+          this.imports = this.imports.filter(
+            (_import) => _import.statement !== oldImport.statement
+          );
+        }
+      });
+      const restNewImports = newImports.slice(oldImports.length);
+      if (restNewImports.length > 0) {
+        const lastImportStatement = newImports[oldImports.length - 1].statement;
+        content = content.replace(
+          lastImportStatement,
+          `${lastImportStatement}
+${restNewImports.map(
+            (item) => item.statement
+          )}
+`
+        );
+      }
+      this.imports.push(...restNewImports);
+      return content;
+    });
+  }
+};
+function* traverseRecursiveTsFiles(folder) {
+  for (const filePath of traverseRecursiveFilePaths(folder)) {
+    if (filePath.endsWith(".ts") || filePath.endsWith(".tsx")) {
+      yield new TsFile(filePath);
+    }
+  }
+}
+function getIndexTsFile(folder) {
+  const files = fs2.readdirSync(folder);
+  for (const file of files) {
+    if (file === "index.ts" || file === "index.tsx") {
+      return new TsFile(path3.join(folder, file));
+    }
+  }
+  return void 0;
+}
+
 // src/materials/materials.ts
-var __filename2 = fileURLToPath2(import.meta.url);
-var __dirname2 = path3.dirname(__filename2);
 var _types = [
   "components",
   "effects",
@@ -143,9 +343,9 @@ var _types = [
 function listAllMaterials(formMaterialSrc) {
   const _materials = [];
   for (const _type of _types) {
-    const materialsPath = path3.join(formMaterialSrc, _type);
+    const materialsPath = path4.join(formMaterialSrc, _type);
     _materials.push(
-      ...fs2.readdirSync(materialsPath).map((_path) => {
+      ...fs3.readdirSync(materialsPath).map((_path) => {
         if (_path === "index.ts") {
           return null;
         }
@@ -153,7 +353,7 @@ function listAllMaterials(formMaterialSrc) {
           name: _path,
           // Assuming the folder name is the material name
           type: _type,
-          path: path3.join(materialsPath, _path)
+          path: path4.join(materialsPath, _path)
         };
       }).filter((material) => material !== null)
     );
@@ -161,50 +361,47 @@ function listAllMaterials(formMaterialSrc) {
   return _materials;
 }
 var getFormMaterialDependencies = (formMaterialPath) => {
-  const packageJsonPath = path3.join(formMaterialPath, "package.json");
-  const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf8"));
+  const packageJsonPath = path4.join(formMaterialPath, "package.json");
+  const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf8"));
   return packageJson.dependencies;
 };
 var copyMaterial = (material, project, formMaterialPath) => {
   const formMaterialDependencies = getFormMaterialDependencies(formMaterialPath);
   const sourceDir = material.path;
-  const materialRoot = path3.join(
+  const materialRoot = path4.join(
     project.projectPath,
     "src",
     "form-materials",
     `${material.type}`
   );
-  const targetDir = path3.join(materialRoot, material.name);
+  const targetDir = path4.join(materialRoot, material.name);
   const packagesToInstall = /* @__PURE__ */ new Set();
-  fs2.cpSync(sourceDir, targetDir, { recursive: true });
-  for (const file of traverseRecursiveFiles(targetDir)) {
-    if ([".ts", ".tsx"].includes(file.suffix)) {
-      for (const importDeclaration of traverseFileImports(file.content)) {
-        const { source } = importDeclaration;
-        if (source.startsWith("@/")) {
-          console.log(
-            `Replace Import from ${source} to @flowgram.ai/form-materials`
-          );
-          file.replace(
-            (content) => replaceImport(content, importDeclaration, [
-              { ...importDeclaration, source: "@flowgram.ai/form-materials" }
-            ])
-          );
-          packagesToInstall.add(
-            `@flowgram.ai/form-materials@${project.flowgramVersion}`
-          );
-        } else if (!source.startsWith(".") && !source.startsWith("react")) {
-          const [dep, version] = Object.entries(formMaterialDependencies).find(
-            ([_key]) => source.startsWith(_key)
-          ) || [];
-          if (!dep) {
-            continue;
-          }
-          if (dep.startsWith("@flowgram.ai/")) {
-            packagesToInstall.add(`${dep}@${project.flowgramVersion}`);
-          } else {
-            packagesToInstall.add(`${dep}@${version}`);
-          }
+  fs3.cpSync(sourceDir, targetDir, { recursive: true });
+  for (const file of traverseRecursiveTsFiles(targetDir)) {
+    for (const importDeclaration of file.imports) {
+      const { source } = importDeclaration;
+      if (source.startsWith("@/")) {
+        console.log(
+          `Replace Import from ${source} to @flowgram.ai/form-materials`
+        );
+        file.replaceImport(
+          [importDeclaration],
+          [{ ...importDeclaration, source: "@flowgram.ai/form-materials" }]
+        );
+        packagesToInstall.add(
+          `@flowgram.ai/form-materials@${project.flowgramVersion}`
+        );
+      } else if (!source.startsWith(".") && !source.startsWith("react")) {
+        const [dep, version] = Object.entries(formMaterialDependencies).find(
+          ([_key]) => source.startsWith(_key)
+        ) || [];
+        if (!dep) {
+          continue;
+        }
+        if (dep.startsWith("@flowgram.ai/")) {
+          packagesToInstall.add(`${dep}@${project.flowgramVersion}`);
+        } else {
+          packagesToInstall.add(`${dep}@${version}`);
         }
       }
     }
@@ -217,14 +414,14 @@ var copyMaterial = (material, project, formMaterialPath) => {
 // src/utils/npm.ts
 import { execSync } from "child_process";
 import { existsSync } from "fs";
-import path4 from "path";
+import path5 from "path";
 import download from "download";
 async function getLatestVersion(packageName) {
   return execSync(`npm view ${packageName} version --tag=latest`).toString().trim();
 }
 async function loadNpm(packageName) {
   const packageLatestVersion = await getLatestVersion(packageName);
-  const packagePath = path4.join(
+  const packagePath = path5.join(
     __dirname,
     `./.download/${packageName}-${packageLatestVersion}`
   );
@@ -244,25 +441,26 @@ async function loadNpm(packageName) {
 }
 
 // src/materials/index.ts
-import path6 from "path";
+import path7 from "path";
 
 // src/utils/project.ts
 import { existsSync as existsSync2, readFileSync, writeFileSync } from "fs";
-import path5 from "path";
+import path6 from "path";
 import chalk from "chalk";
 var Project = class _Project {
   constructor() {
   }
   async init() {
     let projectPath = process.cwd();
-    while (projectPath !== "/" && !existsSync2(path5.join(projectPath, "package.json"))) {
-      projectPath = path5.join(projectPath, "..");
+    while (projectPath !== "/" && !existsSync2(path6.join(projectPath, "package.json"))) {
+      projectPath = path6.join(projectPath, "..");
     }
     if (projectPath === "/") {
       throw new Error("Please run this command in a valid project");
     }
     this.projectPath = projectPath;
-    this.packageJsonPath = path5.join(projectPath, "package.json");
+    this.srcPath = path6.join(projectPath, "src");
+    this.packageJsonPath = path6.join(projectPath, "package.json");
     this.packageJson = JSON.parse(readFileSync(this.packageJsonPath, "utf8"));
     this.flowgramVersion = this.packageJson.dependencies["@flowgram.ai/fixed-layout-editor"] || this.packageJson.dependencies["@flowgram.ai/free-layout-editor"] || this.packageJson.dependencies["@flowgram.ai/editor"];
   }
@@ -291,6 +489,12 @@ var Project = class _Project {
       await this.addDependency(dependency);
     }
   }
+  writeToPackageJsonFile() {
+    writeFileSync(
+      this.packageJsonPath,
+      JSON.stringify(this.packageJson, null, 2)
+    );
+  }
   printInfo() {
     console.log(chalk.bold("Project Info:"));
     console.log(chalk.black(`  - Flowgram Version: ${this.flowgramVersion}`));
@@ -303,18 +507,70 @@ var Project = class _Project {
   }
 };
 
+// src/materials/refresh-project-import.ts
+import chalk2 from "chalk";
+function executeRefreshProjectImport(project, material) {
+  const materialFile = getIndexTsFile(material.path);
+  if (!materialFile) {
+    console.warn(`Material ${material.name} not found`);
+    return;
+  }
+  const targetDir = `@/form-materials/${material.type}/${material.name}`;
+  const exportNames = materialFile.allExportNames;
+  console.log(`\u{1F440} The exports of ${material.name} is ${exportNames.join(",")}`);
+  for (const tsFile of traverseRecursiveTsFiles(project.srcPath)) {
+    for (const importDeclaration of tsFile.imports) {
+      if (importDeclaration.source === "@flowgram.ai/form-materials") {
+        const currentMaterialImports = importDeclaration.namedImports?.filter(
+          (item) => exportNames.includes(item.imported)
+        );
+        if (!currentMaterialImports?.length) {
+          continue;
+        }
+        const nextImports = [
+          {
+            ...importDeclaration,
+            namedImports: currentMaterialImports,
+            source: targetDir
+          }
+        ];
+        const keepImportNames = importDeclaration.namedImports?.filter(
+          (item) => !exportNames.includes(item.imported)
+        );
+        if (keepImportNames?.length) {
+          nextImports.unshift({
+            ...importDeclaration,
+            namedImports: keepImportNames
+          });
+        }
+        tsFile.replaceImport([importDeclaration], nextImports);
+        console.log(chalk2.green(`\u{1F504} Refresh Imports In: ${tsFile.path}`));
+        console.log(
+          `From:
+${importDeclaration.statement}
+To:
+${nextImports.map((item) => item.statement).join("\n")}`
+        );
+      }
+    }
+  }
+}
+
 // src/materials/index.ts
-async function syncMaterial(materialName) {
-  console.log(chalk2.bgGreenBright("Welcome to @flowgram.ai form-materials!"));
+async function syncMaterial(opts) {
+  const { materialName, refreshProjectImports } = opts;
+  console.log(chalk3.bold("\u{1F680} Welcome to @flowgram.ai form-materials!"));
   const project = await Project.getSingleton();
   project.printInfo();
   if (!project.flowgramVersion) {
     throw new Error(
-      "Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor"
+      chalk3.red(
+        "\u274C Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor"
+      )
     );
   }
   const formMaterialPath = await loadNpm("@flowgram.ai/form-materials");
-  const formMaterialSrc = path6.join(formMaterialPath, "src");
+  const formMaterialSrc = path7.join(formMaterialPath, "src");
   const materials = listAllMaterials(formMaterialSrc);
   let material;
   if (materialName) {
@@ -323,10 +579,10 @@ async function syncMaterial(materialName) {
     );
     if (selectedMaterial) {
       material = selectedMaterial;
-      console.log(chalk2.green(`Using material: ${materialName}`));
+      console.log(chalk3.green(`Using material: ${materialName}`));
     } else {
       console.log(
-        chalk2.yellow(
+        chalk3.yellow(
           `Material "${materialName}" not found. Please select from the list:`
         )
       );
@@ -349,30 +605,34 @@ async function syncMaterial(materialName) {
     material = result.material;
   }
   if (!material) {
-    console.error(chalk2.red("No material selected. Exiting."));
+    console.error(chalk3.red("No material selected. Exiting."));
     process.exit(1);
   }
+  if (refreshProjectImports) {
+    console.log(chalk3.bold("\u{1F680} Refresh imports in your project"));
+    executeRefreshProjectImport(project, material);
+  }
   console.log(
-    chalk2.bold("The following materials will be added to your project")
+    chalk3.bold("\u{1F680} The following materials will be added to your project")
   );
   console.log(material);
   let { packagesToInstall } = copyMaterial(material, project, formMaterialPath);
   await project.addDependencies(packagesToInstall);
   console.log(
-    chalk2.bold("These npm dependencies is added to your package.json")
+    chalk3.bold("\u2705 These npm dependencies is added to your package.json")
   );
   packagesToInstall.forEach((_package) => {
     console.log(`- ${_package}`);
   });
-  console.log(chalk2.bold("\nPlease run npm install to install dependencies"));
+  console.log(chalk3.bold("\n\u27A1\uFE0F Please run npm install to install dependencies\n"));
 }
 
 // src/create-app/index.ts
-import path7 from "path";
+import path8 from "path";
 import { execSync as execSync2 } from "child_process";
 import inquirer2 from "inquirer";
-import fs3 from "fs-extra";
-import chalk3 from "chalk";
+import fs4 from "fs-extra";
+import chalk4 from "chalk";
 import download2 from "download";
 import * as tar from "tar";
 var args = process.argv.slice(2);
@@ -384,7 +644,7 @@ var updateFlowGramVersions = (dependencies, latestVersion) => {
   }
 };
 var createApp = async (projectName) => {
-  console.log(chalk3.green("Welcome to @flowgram.ai/create-app CLI!"));
+  console.log(chalk4.green("Welcome to @flowgram.ai/create-app CLI!"));
   const latest = execSync2("npm view @flowgram.ai/demo-fixed-layout version --tag=latest latest").toString().trim();
   let folderName = "";
   if (!projectName) {
@@ -414,19 +674,19 @@ var createApp = async (projectName) => {
     }
   }
   try {
-    const targetDir = path7.join(process.cwd());
+    const targetDir = path8.join(process.cwd());
     const downloadPackage = async () => {
       try {
         const tarballBuffer = await download2(`https://registry.npmjs.org/@flowgram.ai/${folderName}/-/${folderName}-${latest}.tgz`);
-        fs3.ensureDirSync(targetDir);
-        const tempTarballPath = path7.join(process.cwd(), `${folderName}.tgz`);
-        fs3.writeFileSync(tempTarballPath, tarballBuffer);
+        fs4.ensureDirSync(targetDir);
+        const tempTarballPath = path8.join(process.cwd(), `${folderName}.tgz`);
+        fs4.writeFileSync(tempTarballPath, tarballBuffer);
         await tar.x({
           file: tempTarballPath,
           C: targetDir
         });
-        fs3.renameSync(path7.join(targetDir, "package"), path7.join(targetDir, folderName));
-        fs3.unlinkSync(tempTarballPath);
+        fs4.renameSync(path8.join(targetDir, "package"), path8.join(targetDir, folderName));
+        fs4.unlinkSync(tempTarballPath);
         return true;
       } catch (error) {
         console.error(`Error downloading or extracting package: ${error}`);
@@ -434,8 +694,8 @@ var createApp = async (projectName) => {
       }
     };
     const res = await downloadPackage();
-    const pkgJsonPath = path7.join(targetDir, folderName, "package.json");
-    const data = fs3.readFileSync(pkgJsonPath, "utf-8");
+    const pkgJsonPath = path8.join(targetDir, folderName, "package.json");
+    const data = fs4.readFileSync(pkgJsonPath, "utf-8");
     const packageLatestVersion = execSync2("npm view @flowgram.ai/core version --tag=latest latest").toString().trim();
     const jsonData = JSON.parse(data);
     if (jsonData.dependencies) {
@@ -444,15 +704,15 @@ var createApp = async (projectName) => {
     if (jsonData.devDependencies) {
       updateFlowGramVersions(jsonData.devDependencies, packageLatestVersion);
     }
-    fs3.writeFileSync(pkgJsonPath, JSON.stringify(jsonData, null, 2), "utf-8");
+    fs4.writeFileSync(pkgJsonPath, JSON.stringify(jsonData, null, 2), "utf-8");
     if (res) {
-      console.log(chalk3.green(`${folderName} Demo project created successfully!`));
-      console.log(chalk3.yellow("Run the following commands to start:"));
-      console.log(chalk3.cyan(`  cd ${folderName}`));
-      console.log(chalk3.cyan("  npm install"));
-      console.log(chalk3.cyan("  npm start"));
+      console.log(chalk4.green(`${folderName} Demo project created successfully!`));
+      console.log(chalk4.yellow("Run the following commands to start:"));
+      console.log(chalk4.cyan(`  cd ${folderName}`));
+      console.log(chalk4.cyan("  npm install"));
+      console.log(chalk4.cyan("  npm start"));
     } else {
-      console.log(chalk3.red("Download failed"));
+      console.log(chalk4.red("Download failed"));
     }
   } catch (error) {
     console.error("Error downloading repo:", error);
@@ -460,13 +720,63 @@ var createApp = async (projectName) => {
   }
 };
 
+// src/update-version/index.ts
+import chalk5 from "chalk";
+async function updateFlowgramVersion(inputVersion) {
+  console.log(chalk5.bold("\u{1F680} Welcome to @flowgram.ai update-version helper"));
+  const latestVersion = await getLatestVersion("@flowgram.ai/editor");
+  const currentPath = process.cwd();
+  console.log("- Latest flowgram version: ", latestVersion);
+  console.log("- Current Path: ", currentPath);
+  const flowgramVersion = inputVersion || latestVersion;
+  for (const file of traverseRecursiveFiles(currentPath)) {
+    if (file.path.endsWith("package.json")) {
+      console.log("\u{1F440} Find package.json: ", file.path);
+      let updated = false;
+      const json = JSON.parse(file.content);
+      if (json.dependencies) {
+        for (const key in json.dependencies) {
+          if (key.startsWith("@flowgram.ai/")) {
+            updated = true;
+            json.dependencies[key] = flowgramVersion;
+            console.log(`- Update ${key} to ${flowgramVersion}`);
+          }
+        }
+      }
+      if (json.devDependencies) {
+        for (const key in json.devDependencies) {
+          if (key.startsWith("@flowgram.ai/")) {
+            updated = true;
+            json.devDependencies[key] = flowgramVersion;
+            console.log(`- Update ${key} to ${flowgramVersion}`);
+          }
+        }
+      }
+      if (updated) {
+        file.write(JSON.stringify(json, null, 2));
+        console.log(`\u2705 ${file.path} Updated`);
+      }
+    }
+  }
+}
+
 // src/index.ts
 var program = new Command();
 program.name("flowgram-cli").version("1.0.0").description("Flowgram CLI");
 program.command("create-app").description("Create a new flowgram project").argument("[string]", "Project name").action(async (projectName) => {
   await createApp(projectName);
 });
-program.command("materials").description("Sync materials to the project").argument("[string]", "Material name").action(async (materialName) => {
-  await syncMaterial(materialName);
+program.command("materials").description("Sync materials to the project").argument("[string]", "Material name").option(
+  "--refresh-project-imports",
+  "Refresh project imports to copied materials",
+  false
+).action(async (materialName, options) => {
+  await syncMaterial({
+    materialName,
+    refreshProjectImports: options.refreshProjectImports
+  });
+});
+program.command("update-version").description("Update flowgram version in the project").argument("[string]", "Flowgram version").action(async (version) => {
+  await updateFlowgramVersion(version);
 });
 program.parse(process.argv);