@flowgram.ai/cli 0.1.8 → 0.4.10

package/dist/index.cjs

@@ -22,23 +22,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../common/temp/node_modules/.pnpm/tsup@8.3.5_typescript@5.8.3/node_modules/tsup/assets/cjs_shims.js
-var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
-var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
-
 // src/index.ts
 var import_commander = require("commander");
 
 // src/materials/index.ts
 var import_inquirer = __toESM(require("inquirer"), 1);
-var import_chalk2 = __toESM(require("chalk"), 1);
+var import_chalk3 = __toESM(require("chalk"), 1);
 
 // src/materials/materials.ts
-var import_url = require("url");
+var import_path3 = __toESM(require("path"), 1);
+var import_fs3 = __toESM(require("fs"), 1);
+
+// src/utils/ts-file.ts
 var import_path2 = __toESM(require("path"), 1);
 var import_fs2 = __toESM(require("fs"), 1);
 
-// src/utils/traverse-file.ts
+// src/utils/file.ts
 var import_path = __toESM(require("path"), 1);
 var import_fs = __toESM(require("fs"), 1);
 var File = class {
@@ -67,16 +66,92 @@ var File = class {
     import_fs.default.writeFileSync(this.path, this.content, "utf-8");
   }
 };
-function* traverseRecursiveFiles(folder) {
-  const files = import_fs.default.readdirSync(folder);
-  for (const file of files) {
-    const filePath = import_path.default.join(folder, file);
-    if (import_fs.default.statSync(filePath).isDirectory()) {
-      yield* traverseRecursiveFiles(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 {
-      yield new File(filePath);
+      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
@@ -96,14 +171,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;
@@ -148,9 +219,113 @@ 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(import_fs2.default.readFileSync(filePath, "utf-8"));
+    this.imports = Array.from(
+      traverseFileImports(import_fs2.default.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) {
+  const files = import_fs2.default.readdirSync(folder);
+  for (const file of files) {
+    const filePath = import_path2.default.join(folder, file);
+    if (import_fs2.default.statSync(filePath).isDirectory()) {
+      yield* traverseRecursiveTsFiles(filePath);
+    } else {
+      if (file.endsWith(".ts") || file.endsWith(".tsx")) {
+        yield new TsFile(filePath);
+      }
+    }
+  }
+}
+function getIndexTsFile(folder) {
+  const files = import_fs2.default.readdirSync(folder);
+  for (const file of files) {
+    if (file === "index.ts" || file === "index.tsx") {
+      return new TsFile(import_path2.default.join(folder, file));
+    }
+  }
+  return void 0;
+}
+
 // src/materials/materials.ts
-var __filename2 = (0, import_url.fileURLToPath)(importMetaUrl);
-var __dirname2 = import_path2.default.dirname(__filename2);
 var _types = [
   "components",
   "effects",
@@ -164,9 +339,9 @@ var _types = [
 function listAllMaterials(formMaterialSrc) {
   const _materials = [];
   for (const _type of _types) {
-    const materialsPath = import_path2.default.join(formMaterialSrc, _type);
+    const materialsPath = import_path3.default.join(formMaterialSrc, _type);
     _materials.push(
-      ...import_fs2.default.readdirSync(materialsPath).map((_path) => {
+      ...import_fs3.default.readdirSync(materialsPath).map((_path) => {
         if (_path === "index.ts") {
           return null;
         }
@@ -174,7 +349,7 @@ function listAllMaterials(formMaterialSrc) {
           name: _path,
           // Assuming the folder name is the material name
           type: _type,
-          path: import_path2.default.join(materialsPath, _path)
+          path: import_path3.default.join(materialsPath, _path)
         };
       }).filter((material) => material !== null)
     );
@@ -182,50 +357,47 @@ function listAllMaterials(formMaterialSrc) {
   return _materials;
 }
 var getFormMaterialDependencies = (formMaterialPath) => {
-  const packageJsonPath = import_path2.default.join(formMaterialPath, "package.json");
-  const packageJson = JSON.parse(import_fs2.default.readFileSync(packageJsonPath, "utf8"));
+  const packageJsonPath = import_path3.default.join(formMaterialPath, "package.json");
+  const packageJson = JSON.parse(import_fs3.default.readFileSync(packageJsonPath, "utf8"));
   return packageJson.dependencies;
 };
 var copyMaterial = (material, project, formMaterialPath) => {
   const formMaterialDependencies = getFormMaterialDependencies(formMaterialPath);
   const sourceDir = material.path;
-  const materialRoot = import_path2.default.join(
+  const materialRoot = import_path3.default.join(
     project.projectPath,
     "src",
     "form-materials",
     `${material.type}`
   );
-  const targetDir = import_path2.default.join(materialRoot, material.name);
+  const targetDir = import_path3.default.join(materialRoot, material.name);
   const packagesToInstall = /* @__PURE__ */ new Set();
-  import_fs2.default.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}`);
-          }
+  import_fs3.default.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}`);
         }
       }
     }
@@ -237,19 +409,19 @@ var copyMaterial = (material, project, formMaterialPath) => {
 
 // src/utils/npm.ts
 var import_child_process = require("child_process");
-var import_fs3 = require("fs");
-var import_path3 = __toESM(require("path"), 1);
+var import_fs4 = require("fs");
+var import_path4 = __toESM(require("path"), 1);
 var import_download = __toESM(require("download"), 1);
 async function getLatestVersion(packageName) {
   return (0, import_child_process.execSync)(`npm view ${packageName} version --tag=latest`).toString().trim();
 }
 async function loadNpm(packageName) {
   const packageLatestVersion = await getLatestVersion(packageName);
-  const packagePath = import_path3.default.join(
+  const packagePath = import_path4.default.join(
     __dirname,
     `./.download/${packageName}-${packageLatestVersion}`
   );
-  if ((0, import_fs3.existsSync)(packagePath)) {
+  if ((0, import_fs4.existsSync)(packagePath)) {
     return packagePath;
   }
   try {
@@ -265,26 +437,27 @@ async function loadNpm(packageName) {
 }
 
 // src/materials/index.ts
-var import_path5 = __toESM(require("path"), 1);
+var import_path6 = __toESM(require("path"), 1);
 
 // src/utils/project.ts
-var import_fs4 = require("fs");
-var import_path4 = __toESM(require("path"), 1);
+var import_fs5 = require("fs");
+var import_path5 = __toESM(require("path"), 1);
 var import_chalk = __toESM(require("chalk"), 1);
 var Project = class _Project {
   constructor() {
   }
   async init() {
     let projectPath = process.cwd();
-    while (projectPath !== "/" && !(0, import_fs4.existsSync)(import_path4.default.join(projectPath, "package.json"))) {
-      projectPath = import_path4.default.join(projectPath, "..");
+    while (projectPath !== "/" && !(0, import_fs5.existsSync)(import_path5.default.join(projectPath, "package.json"))) {
+      projectPath = import_path5.default.join(projectPath, "..");
     }
     if (projectPath === "/") {
       throw new Error("Please run this command in a valid project");
     }
     this.projectPath = projectPath;
-    this.packageJsonPath = import_path4.default.join(projectPath, "package.json");
-    this.packageJson = JSON.parse((0, import_fs4.readFileSync)(this.packageJsonPath, "utf8"));
+    this.srcPath = import_path5.default.join(projectPath, "src");
+    this.packageJsonPath = import_path5.default.join(projectPath, "package.json");
+    this.packageJson = JSON.parse((0, import_fs5.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"];
   }
   async addDependency(dependency) {
@@ -302,7 +475,7 @@ var Project = class _Project {
       }
     }
     this.packageJson.dependencies[name] = version;
-    (0, import_fs4.writeFileSync)(
+    (0, import_fs5.writeFileSync)(
       this.packageJsonPath,
       JSON.stringify(this.packageJson, null, 2)
     );
@@ -324,18 +497,70 @@ var Project = class _Project {
   }
 };
 
+// src/materials/refresh-project-import.ts
+var import_chalk2 = __toESM(require("chalk"), 1);
+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(import_chalk2.default.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(import_chalk2.default.bgGreenBright("Welcome to @flowgram.ai form-materials!"));
+async function syncMaterial(opts) {
+  const { materialName, refreshProjectImports } = opts;
+  console.log(import_chalk3.default.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"
+      import_chalk3.default.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 = import_path5.default.join(formMaterialPath, "src");
+  const formMaterialSrc = import_path6.default.join(formMaterialPath, "src");
   const materials = listAllMaterials(formMaterialSrc);
   let material;
   if (materialName) {
@@ -344,10 +569,10 @@ async function syncMaterial(materialName) {
     );
     if (selectedMaterial) {
       material = selectedMaterial;
-      console.log(import_chalk2.default.green(`Using material: ${materialName}`));
+      console.log(import_chalk3.default.green(`Using material: ${materialName}`));
     } else {
       console.log(
-        import_chalk2.default.yellow(
+        import_chalk3.default.yellow(
           `Material "${materialName}" not found. Please select from the list:`
         )
       );
@@ -370,30 +595,34 @@ async function syncMaterial(materialName) {
     material = result.material;
   }
   if (!material) {
-    console.error(import_chalk2.default.red("No material selected. Exiting."));
+    console.error(import_chalk3.default.red("No material selected. Exiting."));
     process.exit(1);
   }
+  if (refreshProjectImports) {
+    console.log(import_chalk3.default.bold("\u{1F680} Refresh imports in your project"));
+    executeRefreshProjectImport(project, material);
+  }
   console.log(
-    import_chalk2.default.bold("The following materials will be added to your project")
+    import_chalk3.default.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(
-    import_chalk2.default.bold("These npm dependencies is added to your package.json")
+    import_chalk3.default.bold("\u2705 These npm dependencies is added to your package.json")
   );
   packagesToInstall.forEach((_package) => {
     console.log(`- ${_package}`);
   });
-  console.log(import_chalk2.default.bold("\nPlease run npm install to install dependencies"));
+  console.log(import_chalk3.default.bold("\n\u27A1\uFE0F Please run npm install to install dependencies\n"));
 }
 
 // src/create-app/index.ts
-var import_path6 = __toESM(require("path"), 1);
+var import_path7 = __toESM(require("path"), 1);
 var import_child_process2 = require("child_process");
 var import_inquirer2 = __toESM(require("inquirer"), 1);
 var import_fs_extra = __toESM(require("fs-extra"), 1);
-var import_chalk3 = __toESM(require("chalk"), 1);
+var import_chalk4 = __toESM(require("chalk"), 1);
 var import_download2 = __toESM(require("download"), 1);
 var tar = __toESM(require("tar"), 1);
 var args = process.argv.slice(2);
@@ -405,7 +634,7 @@ var updateFlowGramVersions = (dependencies, latestVersion) => {
   }
 };
 var createApp = async (projectName) => {
-  console.log(import_chalk3.default.green("Welcome to @flowgram.ai/create-app CLI!"));
+  console.log(import_chalk4.default.green("Welcome to @flowgram.ai/create-app CLI!"));
   const latest = (0, import_child_process2.execSync)("npm view @flowgram.ai/demo-fixed-layout version --tag=latest latest").toString().trim();
   let folderName = "";
   if (!projectName) {
@@ -435,18 +664,18 @@ var createApp = async (projectName) => {
     }
   }
   try {
-    const targetDir = import_path6.default.join(process.cwd());
+    const targetDir = import_path7.default.join(process.cwd());
     const downloadPackage = async () => {
       try {
         const tarballBuffer = await (0, import_download2.default)(`https://registry.npmjs.org/@flowgram.ai/${folderName}/-/${folderName}-${latest}.tgz`);
         import_fs_extra.default.ensureDirSync(targetDir);
-        const tempTarballPath = import_path6.default.join(process.cwd(), `${folderName}.tgz`);
+        const tempTarballPath = import_path7.default.join(process.cwd(), `${folderName}.tgz`);
         import_fs_extra.default.writeFileSync(tempTarballPath, tarballBuffer);
         await tar.x({
           file: tempTarballPath,
           C: targetDir
         });
-        import_fs_extra.default.renameSync(import_path6.default.join(targetDir, "package"), import_path6.default.join(targetDir, folderName));
+        import_fs_extra.default.renameSync(import_path7.default.join(targetDir, "package"), import_path7.default.join(targetDir, folderName));
         import_fs_extra.default.unlinkSync(tempTarballPath);
         return true;
       } catch (error) {
@@ -455,7 +684,7 @@ var createApp = async (projectName) => {
       }
     };
     const res = await downloadPackage();
-    const pkgJsonPath = import_path6.default.join(targetDir, folderName, "package.json");
+    const pkgJsonPath = import_path7.default.join(targetDir, folderName, "package.json");
     const data = import_fs_extra.default.readFileSync(pkgJsonPath, "utf-8");
     const packageLatestVersion = (0, import_child_process2.execSync)("npm view @flowgram.ai/core version --tag=latest latest").toString().trim();
     const jsonData = JSON.parse(data);
@@ -467,13 +696,13 @@ var createApp = async (projectName) => {
     }
     import_fs_extra.default.writeFileSync(pkgJsonPath, JSON.stringify(jsonData, null, 2), "utf-8");
     if (res) {
-      console.log(import_chalk3.default.green(`${folderName} Demo project created successfully!`));
-      console.log(import_chalk3.default.yellow("Run the following commands to start:"));
-      console.log(import_chalk3.default.cyan(`  cd ${folderName}`));
-      console.log(import_chalk3.default.cyan("  npm install"));
-      console.log(import_chalk3.default.cyan("  npm start"));
+      console.log(import_chalk4.default.green(`${folderName} Demo project created successfully!`));
+      console.log(import_chalk4.default.yellow("Run the following commands to start:"));
+      console.log(import_chalk4.default.cyan(`  cd ${folderName}`));
+      console.log(import_chalk4.default.cyan("  npm install"));
+      console.log(import_chalk4.default.cyan("  npm start"));
     } else {
-      console.log(import_chalk3.default.red("Download failed"));
+      console.log(import_chalk4.default.red("Download failed"));
     }
   } catch (error) {
     console.error("Error downloading repo:", error);
@@ -487,7 +716,7 @@ 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.parse(process.argv);