@akanjs/cli 0.0.135 → 0.0.137

package/cjs/index.js

@@ -459,6 +459,11 @@ var Logger = class _Logger {
   }
 };
 
+// pkgs/@akanjs/common/lowerlize.ts
+var lowerlize = (str) => {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
 // pkgs/@akanjs/common/sleep.ts
 var sleep = async (ms) => {
   return new Promise((resolve) => {
@@ -1071,7 +1076,7 @@ var Executor = class {
         `${dirname}/${filename}`
       );
       this.logger.verbose(`Apply template ${templatePath} to ${convertedTargetPath}`);
-      this.writeFile(convertedTargetPath, content);
+      this.writeFile(convertedTargetPath, content, { overwrite });
     } else if (targetPath.endsWith(".template")) {
       const content = await import_promises.default.readFile(templatePath, "utf8");
       const convertedTargetPath = Object.entries(dict).reduce(
@@ -1083,7 +1088,7 @@ var Executor = class {
         content
       );
       this.logger.verbose(`Apply template ${templatePath} to ${convertedTargetPath}`);
-      this.writeFile(convertedTargetPath, convertedContent);
+      this.writeFile(convertedTargetPath, convertedContent, { overwrite });
     }
   }
   async applyTemplate({
@@ -2108,6 +2113,9 @@ var getArgumentValue = async (argMeta, value, workspace) => {
     throw new Error(`Invalid system type: ${argMeta.type}`);
 };
 var runCommands = async (...commands) => {
+  process.on("unhandledRejection", (error) => {
+    console.error(import_chalk2.default.red("[fatal]"), error);
+  });
   const hasPackageJson = import_fs7.default.existsSync(`${__dirname}/../package.json`);
   const version = hasPackageJson ? JSON.parse(import_fs7.default.readFileSync(`${__dirname}/../package.json`, "utf8")).version : "0.0.1";
   import_commander.program.version(version).description("Akan CLI");
@@ -2166,6 +2174,7 @@ var runCommands = async (...commands) => {
 
 // pkgs/@akanjs/devkit/src/aiEditor.ts
 var import_prompts4 = require("@inquirer/prompts");
+var import_ora2 = __toESM(require("ora"));
 var import_messages = require("@langchain/core/messages");
 var import_openai2 = require("@langchain/openai");
 var import_chalk3 = __toESM(require("chalk"));
@@ -2239,23 +2248,28 @@ var AiSession = class _AiSession {
       await _AiSession.init();
     if (!_AiSession.#chat)
       throw new Error("Failed to initialize the AI session");
+    const loader = (0, import_ora2.default)(`${_AiSession.#chat.model} is thinking...`).start();
     try {
       const humanMessage = new import_messages.HumanMessage(question);
       this.messageHistory.push(humanMessage);
       const stream = await _AiSession.#chat.stream(this.messageHistory);
-      let fullResponse = "";
+      let fullResponse = "", tokenIdx = 0;
       for await (const chunk of stream) {
+        if (loader.isSpinning)
+          loader.succeed(`${_AiSession.#chat.model} responded`);
         const content = chunk.content;
         if (typeof content === "string") {
           fullResponse += content;
           onChunk(content);
         }
+        tokenIdx++;
       }
       fullResponse += "\n";
       onChunk("\n");
       this.messageHistory.push(new import_messages.AIMessage(fullResponse));
       return { content: fullResponse, messageHistory: this.messageHistory };
     } catch (error) {
+      loader.fail(`${_AiSession.#chat.model} failed to respond`);
       throw new Error("Failed to stream response");
     }
   }
@@ -2509,7 +2523,7 @@ var import_fs9 = __toESM(require("fs"));
 var import_promises2 = __toESM(require("fs/promises"));
 var import_js_yaml2 = __toESM(require("js-yaml"));
 var import_open = __toESM(require("open"));
-var import_ora2 = __toESM(require("ora"));
+var import_ora3 = __toESM(require("ora"));
 var import_path4 = __toESM(require("path"));
 var vite = __toESM(require("vite"));
 var import_vite_plugin_commonjs = __toESM(require("vite-plugin-commonjs"));
@@ -2518,1031 +2532,6 @@ var import_vite_tsconfig_paths = __toESM(require("vite-tsconfig-paths"));
 
 // pkgs/@akanjs/cli/src/module/module.prompt.ts
 var frameworkDescription = `
-	\uB098\uB294 \uC880 \uB354 \uD6A8\uC728\uC801\uC73C\uB85C \uCF54\uB529\uC744 \uD558\uAE30 \uC704\uD574\uC11C \uC790\uCCB4 \uD504\uB808\uC784\uC6CC\uD06C\uB97C \uC81C\uC791\uD588\uC5B4.
-	
-	\uADF8\uB798\uC11C \uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC124\uBA85\uC744 \uD574\uC904\uD14C\uB2C8\uAE4C \uC798 \uC774\uD574\uD558\uB3C4\uB85D \uD574. \uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uB294 next.js 13\uACFC nest.js, capacitor.js, nx, mongoDB \uAE30\uBC18\uC758 \uD504\uB860\uD2B8\uC5D4\uB4DC, \uC571, \uBC31\uC5D4\uB4DC \uD1B5\uD569 \uD504\uB808\uC784\uC6CC\uD06C\uC57C. \uADF8\uB798\uC11C \uBC31\uC5D4\uB4DC, \uD504\uB860\uD2B8\uC5D4\uB4DC, DB Schema\uC5D0 \uB300\uD55C \uCF54\uB4DC\uAC00 \uBAA8\uB450 \uD55C \uD3F4\uB354 \uC548\uC5D0 \uC788\uC5B4. \uADF8\uB798\uC11C \uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8, \uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8, \uADF8\uB9AC\uACE0 \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC774\uD574\uB9CC \uC788\uB2E4\uBA74 \uAD6C\uBD84\uC9D3\uC9C0 \uC54A\uACE0 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4\uB294 \uC7A5\uC810\uC774 \uC788\uC5B4.
-	
-	  
-	
-	\uAC00\uC7A5 \uC678\uBD80\uC758 \uAD6C\uC870\uB294
-	
-	- app
-	
-	- project1
-	
-	- project2
-	
-	- project3
-	
-	- project4
-	
-	- lib
-	
-	- core
-	
-	- external
-	
-	- game
-	
-	- mint
-	
-	- platform
-	
-	- shared
-	
-	- social
-	
-	- util
-	
-	app\uC740 \uAC01 \uD504\uB85C\uC81D\uD2B8\uB97C \uB9CC\uB4DC\uB294 \uACF3\uC774\uC57C
-	
-	lib \uD558\uC704 \uD3F4\uB354\uB4E4\uC740 \uC5EC\uB7EC \uD504\uB85C\uC81D\uD2B8\uC5D0\uC11C \uACF5\uC6A9\uC73C\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uACA0\uB2E4 \uB77C\uACE0 \uD310\uB2E8\uD574\uC11C \uBD84\uB9AC\uD574\uB193\uC740 \uACF3\uC774\uC57C.
-	
-	\uB2E4\uC74C\uC740 app/project \uB0B4\uBD80\uC758 \uAD6C\uC870\uB97C \uC54C\uB824\uC904\uAC8C.
-	
-	  
-	
-	project
-	
-	- app
-	
-	- [lang]
-	
-	- (projectName)
-	
-	- (user)
-	
-	- page.tsx
-	
-	- layout.tsx
-	
-	- (public)
-	
-	- page.tsx
-	
-	- layout.tsx
-	
-	- (admin)
-	
-	- page.tsx
-	
-	- layout.tsx
-	
-	  
-	
-	- lib
-	
-	- dataName1
-	
-	- dataName2
-	
-	- dataName3
-	
-	- dataName4
-	
-	- dataName5
-	
-	- dataName6
-	
-	- dataName7
-	
-	  
-	
-	app\uC740 \uC9C1\uC811\uC801\uC73C\uB85C \uC720\uC800\uAC00 \uBCF4\uB294 \uD398\uC774\uC9C0\uB97C \uC9DC\uB294 \uACF3\uC774\uC57C. \uD3F4\uB354 \uAD6C\uC870\uB294 next 13\uC758 app directory\uB97C \uB530\uB974\uACE0 \uC788\uC5B4.
-	
-	public/page.tsx\uAC00 \uAC00\uC7A5 \uCD5C\uCD08\uB85C \uC811\uADFC\uB418\uB294 Index \uD398\uC774\uC9C0\uAC00 \uB420 \uAC70\uC57C.
-	
-	\uC544\uB798\uB294 public/page.tsx\uC758 \uAE30\uBCF8 \uD15C\uD50C\uB9BF \uC18C\uC2A4\uCF54\uB4DC\uC57C.
-	
-	\`\`\`
-	
-	import {{ Image, Link }} from "@util/ui";
-	
-	import {{ getSelf }} from "@akanjs/client";
-	
-	  
-	
-	export default function Page() {{
-	
-	const self = getSelf();
-	
-	return (
-	
-	<div className="relative w-full h-screen overflow-hidden flex items-center justify-center">
-	
-	<Image
-	
-	className="absolute left-0 right-0 top-0 bottom-0 w-full h-screen -z-50"
-	
-	width={{1920}}
-	
-	height={{1080}}
-	
-	src="/back.jpg"
-	
-	/>
-	
-	<div className="max-w-md bg-base-100/50 shadow-lg rounded-xl backdrop-blur-xs w-full py-8 px-16 flex flex-col items-center justify-center gap-3">
-	
-	<h1 className="text-4xl mt-2"><%= project %></h1>
-	
-	<h2 className="text-lg"><%= project %> description</h2>
-	
-	<Link className="w-full" href={{self ? "/home" : "/signin"}}>
-	
-	<button className="btn w-full btn-primary">Go to dashboard</button>
-	
-	</Link>
-	
-	</div>
-	
-	</div>
-	
-	);
-	
-	}}
-	
-	\`\`\`
-	
-	  
-	
-	lib\uC740 \uC11C\uBE44\uC2A4\uB97C \uB9CC\uB4E4\uB2E4\uBCF4\uBA74 \uD544\uC694\uD55C \uB370\uC774\uD130\uB97C \uC815\uC758\uD558\uB294 \uACF3\uC774\uC57C.
-	
-	\uB530\uB77C\uC11C dataName\uC740 DB\uC774\uB984. \uC989 \uB370\uC774\uD130\uBA85\uC744 \uB530\uB77C. \uB2E4\uB9CC \uD3F4\uB354 \uB0B4\uBD80\uC5D0\uB294 backend, frontend\uC5D0\uC11C \uD1B5\uD569\uC73C\uB85C \uC4F0\uB294 \uC18C\uC2A4\uCF54\uB4DC\uB4E4\uC774 \uC788\uC5B4.
-	
-	  
-	
-	\uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uC758 \uD575\uC2EC\uC740 \uC815\uC758\uD55C \uBA54\uD0C0\uB370\uC774\uD130\uB4E4\uC744 \uC774\uC6A9\uD574\uC11C \uAC01 \uB370\uC774\uD130\uAC04\uC758 \uC5F0\uAD00\uC810\uC774\uB098, \uB370\uC774\uD130 \uD0C0\uC785\uC744 \uBCF4\uACE0 \uBBF8\uB9AC \uC815\uB9AC\uB41C \uACB0\uACFC\uB97C \uB9CC\uB4E4\uC5B4\uC8FC\uACE0 \uD504\uB85C\uC81D\uD2B8\uB97C \uB9CC\uB4E0\uB2E4\uBA74 \uAC70\uC758 \uBAA8\uB450 \uD544\uC694\uD55C \uC791\uC5C5\uB4E4\uC744 \uBBF8\uB9AC \uC815\uB9AC\uD574\uB1A8\uC5B4. \uC608\uB97C \uB4E4\uC5B4 \uB370\uC774\uD130 \uD0C0\uC785\uC5D0 \uC774\uBBF8\uC9C0 \uD30C\uC77C\uC774 \uC788\uB2E4\uACE0 \uD55C\uB2E4\uBA74 \uBC31\uC5D4\uB4DC\uB97C \uD1B5\uD574 \uADF8 \uC774\uBBF8\uC9C0\uB97C \uC11C\uBC84\uC758 \uC2A4\uD1A0\uB9AC\uC9C0\uC5D0 \uC800\uC7A5\uD558\uACE0 \uADF8 \uC800\uC7A5\uB41C \uD30C\uC77C\uC744 \uD2B9\uC815 db\uC5D0 id\uB97C \uCD94\uAC00\uD574\uC8FC\uB294 \uD568\uC218\uB4E4 \uAC19\uC740 \uAC83\uB4E4\uC740 \uC5B4\uB290 \uD504\uB85C\uC81D\uD2B8\uB358 \uAC04\uC5D0 \uBAA8\uB450 \uC0AC\uC6A9\uB418\uB294 \uBC29\uC2DD\uC774\uB77C\uACE0 \uD310\uB2E8\uD588\uC5B4. \uD558\uC9C0\uB9CC \uC6B0\uB9AC\uB294 \uD504\uB85C\uC81D\uD2B8\uB97C \uC791\uC5C5\uD560 \uB54C\uB9C8\uB2E4 \uC774 \uBD88\uD544\uC694\uD55C \uC791\uC5C5\uB4E4\uC744 \uD56D\uC0C1 \uB9CC\uB4E4\uACE0 \uD14C\uC2A4\uD2B8\uB97C \uD558\uB294 \uBD88\uD544\uC694\uD55C \uC77C\uB4E4\uC744 \uD558\uACE0\uC788\uC9C0. \uADF8\uB798\uC11C \uC6B0\uB9AC\uB294 \uAC01 \uD504\uB85C\uC81D\uD2B8\uAC00 \uB9CC\uB4E4 \uB54C\uB9C8\uB2E4 \uD544\uC218\uB85C \uC788\uC5B4\uC57C\uD560 \uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC \uD504\uB85C\uC138\uC2A4\uB97C \uD504\uB808\uC784\uC6CC\uD06C\uB97C \uD1B5\uD574 \uBBF8\uB9AC \uC815\uC758\uB41C \uC0C1\uD0DC\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC5B4.
-	
-	\uACB0\uACFC\uC801\uC73C\uB85C \uC6B0\uB9B0 \uD544\uC694\uD558\uC9C0\uB9CC \uB9E4\uBC88 \uC791\uC5C5\uD558\uAE30\uC5D4 \uC190\uC774 \uB9CE\uC774\uAC00\uB294 \uC791\uC5C5\uB4E4\uC744 \uBBF8\uB9AC \uC815\uC758\uD574\uB1A8\uC5B4.
-	
-	  
-	
-	\uB610\uD55C \uC6B0\uB9B0 CLI\uB97C \uD1B5\uD574\uC11C \uD2B9\uC815 \uD504\uB85C\uC81D\uD2B8 \uD3F4\uB354 \uD15C\uD50C\uB9BF\uC744 \uB9CC\uB4E4\uC5B4\uC8FC\uAC70\uB098, \uD2B9\uC815 \uBAA8\uB378\uC758 \uD544\uB4DC\uB4E4\uC744 \uB9CC\uB4E4 \uC218 \uC788\uB3C4\uB85D \uD574\uB1A8\uC5B4. Model\uC774\uB77C\uB294 \uBCC0\uC218\uC758 \uACB0\uACFC\uAC12\uC744 \uBC1B\uACE0 \uC800 \uD15C\uD50C\uB9BF\uC5D0 \uB9DE\uAC8C\uB054 \uC774\uB984\uC744 \uB123\uC5B4\uC8FC\uB294 \uAC70\uC9C0. \uB9CC\uC57D \uB0B4\uAC00 phone\uC774\uB77C\uB294 \uBCC0\uC218\uB97C \uB123\uC5C8\uB2E4\uBA74 \uC800 \uBAA8\uB378\uC5D0 Phone\uACFC \uAC19\uC740 \uACB0\uACFC\uAC12\uC73C\uB85C \uAC12\uC774 \uB4E4\uC5B4\uAC00\uAC8C \uB428\uC73C\uB85C\uC11C \uD15C\uD50C\uB9BF\uC774 \uC0DD\uC131\uB3FC. \uC774\uB294 \uC6B0\uB9AC\uAC00 \uC774\uBBF8 \uB9CC\uB4E4\uC5B4\uB193\uC740 \uCEE4\uB9E8\uB4DC\uAC00 \uC788\uC5B4.
-	
-	  
-	
-	\uC608\uB97C \uB4E4\uC5B4 \uC5F0\uD544\uC774\uB77C\uB294 \uBAA8\uB378\uC744 \uCEE4\uB9E8\uB4DC\uB97C \uD1B5\uD574 \uC0DD\uC131\uD558\uBA74 \uC544\uB798\uC640 \uAC19\uC740 \uD30C\uC77C\uB4E4\uC774 \uC0DD\uC131\uB3FC.
-	
-	  
-	
-	pencil
-	
-	- pencil.constant.ts ( pencil\uC5D0 \uB300\uD55C db schema, query, sort \uAD6C\uBB38\uC744 \uC815\uC758 )
-	
-	- pencil.document.ts ( model\uC5D0\uC11C \uC790\uC8FC \uC0AC\uC6A9\uD558\uB294 method, static function, middleware\uB85C \uAC04\uB2E8\uD55C db \uAD00\uB9AC \uD568\uC218\uB4F1\uC744 \uAD00\uB9AC\uD568.)
-	
-	- pencil.dictionary.ts (\uB2E4\uAD6D\uC5B4\uB97C \uC704\uD574\uC11C schema field, enum, service name\uC758 \uB2E4\uAD6D\uC5B4 \uC815\uBCF4 \uB4F1\uC744 \uBAA8\uB450 \uAD00\uB9AC. )
-	
-	- pencil.signal.ts (frontend\uC758 fetch\uB97C \uC5F4\uC5B4\uC8FC\uB294 \uC77C\uC885\uC758 \uCC3D\uAD6C, \uAD8C\uD55C\uAD00\uB9AC\uB4F1\uC744 \uD568 nestjs\uC758 resolver\uC640 \uC720\uC0AC )
-	
-	- pencil.service.ts (\uC2E4\uC9C8\uC801\uC778 \uC11C\uBE44\uC2A4 \uCF54\uB4DC\uB97C \uC791\uC131\uD558\uB294 \uACF3. \uAC01\uC885 \uBE44\uC988\uB2C8\uC2A4 \uB85C\uC9C1\uC744 \uCC98\uB9AC\uD568.)
-	
-	- pencil.store.ts (pencil field\uC5D0 \uB300\uD55C \uC0C1\uD0DC\uAD00\uB9AC \uC800\uC7A5\uC18C.)
-	
-	- pencil.Zone.tsx (\uC544\uB798 Templete, Unit, Util, View, Util\uB4F1\uC744 \uC870\uD569\uD574\uC11C \uB2E4\uC74C \uB808\uBCA8 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC791\uC131\uD558\uB294 \uACF3 client component\uB85C \uC815\uC758\uB428. )
-	
-	- pencil.Templete.tsx (\uC8FC\uB85C edit\uC5D0 \uC5F0\uAD00\uB41C \uCEF4\uD3EC\uB10C\uD2B8 \uC815\uC758\uD558\uB294 \uACF3. client component\uB85C \uC815\uC758\uB428. )
-	
-	- pencil.Unit.tsx (list \uCC98\uB7FC \uBCF5\uC218\uAC1C\uC758 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC815\uC758\uD558\uB294 \uACF3. server component\uB85C \uC815\uC758\uB428. )
-	
-	- pencil.Util.tsx (Action \uBC84\uD2BC\uC744 \uC815\uC758\uD558\uB294 \uACF3. client component\uB85C \uC815\uC758\uB428. )
-	
-	- pencil.View.tsx (\uB2E8\uC77C view \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC815\uC758\uD558\uB294 \uACF3. server component\uB85C \uC815\uC758\uB428. )
-	
-	  
-	  
-	
-	\uC5EC\uAE30\uC11C constant\uC5D0 \uC815\uC758 \uB418\uC5B4\uC788\uB294 schema\uB97C \uAE30\uBCF8\uC73C\uB85C \uD574\uC11C \uAC01 document, dictionary, signal, service, store\uB97C \uC0DD\uC131\uD574.
-	
-	  
-	
-	document, signal, service\uB294 \uBC31\uC5D4\uB4DC\uC640 \uC5F0\uAD00\uB418\uC5B4\uC788\uB294 \uC18C\uC2A4\uCF54\uB4DC\uC57C.
-	
-	\uC11C\uB85C\uAC04\uC758 \uAD00\uACC4\uB294 \uC8FC\uB85C signal\uC5D0\uC11C \uAC00\uC7A5 \uBA3C\uC800 \uC694\uCCAD\uC744 \uBC1B\uACE0 \uC774\uD6C4 \uB85C\uC9C1\uC758 \uBCF5\uC7A1\uB3C4\uC5D0 \uB530\uB77C\uC11C service\uB85C \uCC98\uB9AC\uD560 \uC9C0, docuemnt\uB85C \uCC98\uB9AC\uD560 \uC9C0\uB97C \uACB0\uC815\uD574.
-	
-	signal - document
-	
-	signal - service - document
-	
-	  
-	
-	store\uB294 \uD504\uB860\uD2B8\uC5D4\uB4DC\uC5D0\uC11C \uC0C1\uD0DC\uAD00\uB9AC\uB97C \uD560 \uB54C \uC0AC\uC6A9\uB3FC.
-	
-	\uC6B0\uB9AC\uB294 signal\uC758 \uCF54\uB4DC\uB85C \uB098\uC628 \uBA54\uD0C0\uB370\uC774\uD130\uB97C \uC774\uC6A9\uD574\uC11C store\uC5D0\uC11C \uD754\uD788 \uC0AC\uC6A9\uB420\uB9CC\uD55C \uD568\uC218\uB4E4\uC744 \uBBF8\uB9AC \uC815\uC758\uD558\uAC8C\uB054 \uB9CC\uB4E4\uC5C8\uC5B4.
-	
-	  
-	
-	\uC774\uB807\uAC8C 11\uAC1C\uC758 \uD30C\uC77C\uB85C \uAD6C\uBD84\uD574\uC11C \uC815\uC758\uAC00 \uB3FC.
-	
-	\uC9C0\uAE08\uBD80\uD134 \uD55C \uD30C\uC77C\uB4E4\uB9C8\uB2E4 \uC0C1\uC138\uD55C \uC124\uBA85\uC744 \uD574\uC904\uAC8C.
-	
-	  
-	
-	model.constant.ts
-	
-	  
-	
-	constant\uB294 \uAE30\uBCF8 \uC2A4\uD0A4\uB9C8\uAC00 \uAD6C\uC131\uB418\uB294 \uACF3\uC774\uC57C. \uADF8\uB798\uC11C \uC774 \uACF3\uC5D0\uC11C DB \uC2A4\uD0A4\uB9C8, \uCFFC\uB9AC, \uC815\uB82C \uAD6C\uBB38\uC744 \uC815\uC758\uD574.
-	
-	\uC8FC\uC758\uD574\uC57C\uD560 \uAC74 decorator\uC5D0\uC11C \uC815\uC758\uD558\uB294 \uD0C0\uC785\uACFC \uC544\uB798\uC5D0 \uC815\uC758\uD558\uB294 \uD0C0\uC785\uC774 \uC57D\uAC04 \uB2E4\uB97C \uC218 \uC788\uC5B4
-	
-	\uC608\uB97C \uB4E4\uC5B4 decorator\uC5D0\uC11C\uB294 Int\uB85C \uC815\uC758\uD558\uACE0 constant\uC5D0\uC11C\uB294 number\uB85C \uC815\uC758\uD574\uC57C\uD574.
-	
-	\uCD94\uAC00\uB85C createdAt\uACFC updatedAt, status\uB294 \uAE30\uBCF8\uC801\uC73C\uB85C \uC0DD\uC131\uB418\uB294 \uD544\uB4DC\uC774\uB2C8\uAE4C \uB530\uB85C \uC815\uC758\uD558\uC9C0 \uC54A\uC544\uB3C4 \uB3FC.
-	
-	\uC774\uB294 decorator\uC5D0\uC11C\uB294 GraphQL\uC5D0\uC11C \uC0AC\uC6A9\uD560 \uD0C0\uC785\uC744 \uC815\uC758\uD558\uACE0 constant\uC5D0\uC11C\uB294 \uC2E4\uC81C \uD0C0\uC785\uC744 \uC815\uC758\uD558\uB294 \uAC70\uC9C0.
-	
-	  
-	
-	\`\`\`
-	
-	import { enumOf, Int } from "@akanjs/base";
-	
-	import { Field, Filter, Model, sortOf, via } from "@akanjs/constant";
-	
-	  
-	
-	export const \${dict.Model}Statuses = ["active"] as const;
-	
-	export type \${dict.Model}Status = (typeof \${dict.Model}Statuses)[number];
-	
-	  
-	
-	//\uB370\uC774\uD130\uB97C \uB9CC\uB4E4 \uB54C \uD544\uC694\uD55C \uB370\uC774\uD130 \uD0C0\uC785\uC744 \uC815\uC758\uD558\uB294 \uACF3
-	
-	@Model.Input("\${dict.Model}Input")
-	
-	export class \${dict.Model}Input {{
-	
-	@Field.Prop(() => String)
-	
-	field: string;
-	
-	  
-	
-	@Field.Prop(() => Int, {{ nullable: true }})
-	
-	fieldInt: number | null;
-	
-	  
-	
-	@Field.Prop(() => Date, {{default: dayjs()}})
-	
-	fieldInt: Dayjs;
-	
-	}}
-	
-	  
-	
-	//\uB370\uC774\uD130\uAC00 \uB9CC\uB4E4\uC5B4\uC9C4 \uC774\uD6C4 \uC0DD\uC131\uB418\uAC70\uB098 \uC800\uC7A5\uC73C\uB85C \uCD94\uAC00\uD560 \uC218 \uC788\uB294 \uACF3
-	
-	@Model.Object("\${dict.Model}Object")
-	
-	export class \${dict.Model}Object extends via(\${dict.Model}Input) {
-	
-	@Field.Prop(() => String, {{ enum: \${dict.Model}Statuses, default: "active" }})
-	
-	status: \${dict.Model}Status;
-	
-	}}
-	
-	  
-	
-	//\uB370\uC774\uD130\uB97C \uB9AC\uC2A4\uD2B8\uB85C \uBCF4\uC5EC\uC904 \uB54C \uD544\uC694\uD55C \uB370\uC774\uD130\uB9CC \uC81C\uACF5\uD558\uB294 \uACF3
-	
-	@Model.Light("Light\${dict.Model}")
-	
-	export class Light\${dict.Model} extends via(\${dict.Model}Object, [
-	
-	"field",
-	
-	"status",
-	
-	] as const) {}
-	
-	  
-	
-	//\uCD5C\uC885 \uB370\uC774\uD130\uC758 Full \uD0C0\uC785\uC774 \uC815\uC758\uB418\uB294 \uACF3
-	
-	@Model.Full("\${dict.Model}")
-	
-	export class \${dict.Model} extends via(\${dict.Model}Object, Light\${dict.Model}) {}
-	
-	  
-	
-	//\uB370\uC774\uD130\uC758 \uC778\uC0AC\uC774\uD2B8\uB97C \uCE21\uC815\uD558\uAE30 \uC704\uD574\uC11C \uD544\uC694\uD55C \uB370\uC774\uD130\uB97C \uC815\uC758\uD558\uB294 \uACF3
-	
-	@Model.Insight("\${dict.Model}Insight")
-	
-	export class \${dict.Model}Insight {{
-	
-	@Field.Prop(() => Int, {{ default: 0, accumulate: {{ $sum: 1 }} }})
-	
-	count: number;
-	
-	}}
-	
-	  
-	
-	//\uB370\uC774\uD130\uC758 \uD1B5\uACC4\uB97C \uACC4\uC0B0\uD558\uB294 \uACF3
-	
-	@Model.Summary("\${dict.Model}Summary")
-	
-	export class \${dict.Model}Summary {{
-	
-	@Field.Prop(() => Int, {{ min: 0, default: 0, query: {{ status: {{}} }} }})
-	
-	total\${dict.Model}: number;
-	
-	}}
-	
-	  
-	
-	@Model.Filter("\${dict.Model}Filter")
-	
-	export class \${dict.Model}Filter extends sortOf(\${dict.Model}, {}) {}
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.dictonary.ts
-	
-	\`\`\`
-	
-	import {
-	
-	baseTrans,
-	
-	getBaseSignalTrans,
-	
-	ModelDictionary,
-	
-	SignalDictionary,
-	
-	SummaryDictionary,
-	
-	} from "@akanjs/dictionary";
-	
-	  
-	
-	import type { \${dict.Model}, \${dict.Model}Filter, \${dict.Model}Insight, \${dict.Model}Summary } from "./\${dict.model}.constant";
-	
-	import type { \${dict.Model}Signal } from "./\${dict.model}.signal";
-	
-	  
-	
-	const modelDictionary = {{
-	
-	...baseTrans,
-	
-	modelName: ["\${dict.Model}", "\${dict.Model}"],
-	
-	modelDesc: [
-	
-	"\${dict.Model} description",
-	
-	"\${dict.Model} \uC124\uBA85",
-	
-	],
-	
-	  
-	
-	// * ==================== Model ==================== * //
-	
-	field: ["Field", "\uD544\uB4DC"],
-	
-	"desc-field": ["Field", "\uD544\uB4DC"],
-	
-	// * ==================== Model ==================== * //
-	
-	  
-	
-	// * ==================== Insight ==================== * //
-	
-	count: ["Count", "\uAC1C\uC218"],
-	
-	"desc-count": ["\${dict.Model} count in current query settting", "\uD604\uC7AC \uCFFC\uB9AC \uC124\uC815\uC5D0 \uB9DE\uB294 \${dict.Model} \uC218"],
-	
-	// * ==================== Insight ==================== * //
-	
-	  
-	
-	// * ==================== Filter ==================== * //
-	
-	// * ==================== Filter ==================== * //
-	
-	  
-	
-	// * ==================== Etc ==================== * //
-	
-	"enum-status-active": ["Active", "\uD65C\uC131"],
-	
-	"enumdesc-status-active": ["Active status", "\uD65C\uC131 \uC0C1\uD0DC"],
-	
-	// * ==================== Etc ==================== * //
-	
-	}} satisfies ModelDictionary<\${dict.Model}, \${dict.Model}Insight, typeof \${dict.Model}Sort>;
-	
-	  
-	
-	export const \${dict.Model}SummaryDictionary = {{
-	
-	// * ==================== Summary ==================== * //
-	
-	total\${dict.Model}: ["Total \${dict.Model}", "\uCD1D \${dict.Model} \uC218"],
-	
-	"desc-total\${dict.Model}": ["Total \${dict.Model} count in the database", "\uB370\uC774\uD130\uBCA0\uC774\uC2A4\uC5D0 \uC800\uC7A5\uB41C \uCD1D \${dict.Model} \uC218"],
-	
-	// * ==================== Summary ==================== * //
-	
-	}} satisfies SummaryDictionary<\${dict.Model}Summary>;
-	
-	  
-	
-	const signalDictionary = {{
-	
-	...getBaseSignalTrans("\${dict.Model}" as const),
-	
-	// * ==================== Endpoint ==================== * //
-	
-	"api-\${dict.Model}ListInPublic": ["\${dict.Model} List In Public", "\uACF5\uAC1C\uB41C \${dict.Model} \uB9AC\uC2A4\uD2B8"],
-	
-	"apidesc-\${dict.Model}ListInPublic": ["Get a list of public \${dict.Model}", "\uACF5\uAC1C\uB41C \${dict.Model}\uC758 \uB9AC\uC2A4\uD2B8\uB97C \uAC00\uC838\uC635\uB2C8\uB2E4"],
-	
-	"arg-\${dict.Model}ListInPublic-statuses": ["Statuses", "\uC0C1\uD0DC"],
-	
-	"argdesc-\${dict.Model}ListInPublic-statuses": ["Statuses to filter", "\uD544\uD130\uB9C1\uD560 \uC0C1\uD0DC"],
-	
-	"arg-\${dict.Model}ListInPublic-skip": ["Skip", "\uAC74\uB108\uB6F0\uAE30"],
-	
-	"argdesc-\${dict.Model}ListInPublic-skip": ["Number of items to skip", "\uAC74\uB108\uB6F8 \uC544\uC774\uD15C \uC218"],
-	
-	"arg-\${dict.Model}ListInPublic-limit": ["Limit", "\uC81C\uD55C"],
-	
-	"argdesc-\${dict.Model}ListInPublic-limit": ["Maximum number of items to return", "\uBC18\uD658\uD560 \uCD5C\uB300 \uC544\uC774\uD15C \uC218"],
-	
-	"arg-\${dict.Model}ListInPublic-sort": ["Sort", "\uC815\uB82C"],
-	
-	"argdesc-\${dict.Model}ListInPublic-sort": ["Sort order of the items", "\uC544\uC774\uD15C\uC758 \uC815\uB82C \uC21C\uC11C"],
-	
-	  
-	
-	"api-\${dict.Model}InsightInPublic": ["\${dict.Model} Insight In Public", "\uACF5\uAC1C\uB41C \${dict.Model} \uC778\uC0AC\uC774\uD2B8"],
-	
-	"apidesc-\${dict.Model}InsightInPublic": [
-	
-	"Get insight data for public \${dict.Model}",
-	
-	"\uACF5\uAC1C\uB41C \${dict.Model}\uC5D0 \uB300\uD55C \uC778\uC0AC\uC774\uD2B8 \uB370\uC774\uD130\uB97C \uAC00\uC838\uC635\uB2C8\uB2E4",
-	
-	],
-	
-	"arg-\${dict.Model}InsightInPublic-statuses": ["Statuses", "\uC0C1\uD0DC"],
-	
-	"argdesc-\${dict.Model}InsightInPublic-statuses": ["Statuses to filter", "\uD544\uD130\uB9C1\uD560 \uC0C1\uD0DC"],
-	
-	// * ==================== Endpoint ==================== * //
-	
-	}} satisfies SignalDictionary<\${dict.Model}Signal, \${dict.Model}>;
-	
-	\`\`\`
-	
-	export const \${dict.model}Dictionary = {{ ...modelDictionary, ...signalDictionary }};
-	
-	  
-	  
-	  
-	
-	model.document.ts
-	
-	\`\`\`
-	
-	import { beyond, by, Database, into, type SchemaOf } from "@akanjs/document";
-	
-	  
-	
-	import { cnst } from "../cnst";
-	
-	@Database.Input(() => cnst.\${dict.Model}Input)
-	
-	export class \${dict.Model}Input extends by(cnst.\${dict.Model}Input) {}
-	
-	  
-	
-	@Database.Document(() => cnst.\${dict.Model})
-	
-	export class \${dict.Model} extends by(cnst.\${dict.Model}) {}
-	
-	  
-	
-	@Database.Model(() => cnst.\${dict.Model})
-	
-	export class \${dict.Model}Model extends into(\${dict.Model}, cnst.\${dict.Model}Cnst) {
-	
-	async getSummary(): Promise<cnst.\${dict.Model}Summary> {
-	
-	return {
-	
-	...(await this.getDefaultSummary()),
-	
-	};
-	
-	}
-	
-	}
-	
-	  
-	
-	@Database.Middleware(() => cnst.\${dict.Model})
-	
-	export class \${dict.Model}Middleware extends beyond(\${dict.Model}Model, \${dict.Model}) {
-	
-	onSchema(schema: SchemaOf<\${dict.Model}Model, \${dict.Model}>) {
-	
-	// schema.index({ status: 1 })
-	
-	}
-	
-	}
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.signal.ts
-	
-	\`\`\`
-	
-	import { Int } from "@akanjs/base";
-	
-	import { SortOf } from "@akanjs/constant";
-	
-	import { Arg, DbSignal, Mutation, Query, resolve, Signal } from "@akanjs/signal";
-	
-	  
-	
-	import { cnst, Srvs } from "../cnst";
-	
-	  
-	
-	@Signal(() => cnst.\${dict.Model})
-	
-	export class \${dict.Model}Signal extends DbSignal(cnst.\${dict.model}Cnst, Srvs, {
-	
-	guards: { get: Query.Public, cru: Mutation.Public },
-	
-	}) {
-	
-	// * /////////////////////////////////////
-	
-	// * Public Slice
-	
-	@Query.Public(() => [cnst.\${dict.Model}])
-	
-	async \${dict.model}ListInPublic(
-	
-	@Arg.Query("statuses", () => [String], { nullable: true }) statuses: cnst.\${dict.Model}Status[] | null,
-	
-	@Arg.Query("skip", () => Int, { nullable: true }) skip: number | null,
-	
-	@Arg.Query("limit", () => Int, { nullable: true }) limit: number | null,
-	
-	@Arg.Query("sort", () => String, { nullable: true }) sort: SortOf<cnst.\${dict.Model}Filter> | null
-	
-	) {
-	
-	const \${dict.models} = await this.\${dict.model}Service.listByStatuses(statuses, { skip, limit, sort });
-	
-	return resolve<cnst.\${dict.Model}[]>(\${dict.models});
-	
-	}
-	
-	@Query.Public(() => cnst.\${dict.Model}Insight)
-	
-	async \${dict.model}InsightInPublic(
-	
-	@Arg.Query("statuses", () => [String], { nullable: true }) statuses: cnst.\${dict.Model}Status[] | null
-	
-	) {
-	
-	const \${dict.model}Insight = await this.\${dict.model}Service.insightByStatuses(statuses);
-	
-	return resolve<cnst.\${dict.Model}Insight>(\${dict.model}Insight);
-	
-	}
-	
-	// * Public Slice
-	
-	// * /////////////////////////////////////
-	
-	}
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.service.ts
-	
-	\`\`\`
-	
-	import { DbService, Service } from "@akanjs/service";
-	
-	  
-	
-	import { cnst } from "../cnst";
-	
-	import * as db from "../db";
-	
-	  
-	
-	@Service("\${dict.Model}Service")
-	
-	export class \${dict.Model}Service extends DbService(db.\${dict.Model}Db) {
-	
-	async summarize(): Promise<cnst.\${dict.Model}Summary> {
-	
-	return {
-	
-	...(await this.\${dict.Model}Model.getSummary()),
-	
-	};
-	
-	}
-	
-	}
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.store.ts
-	
-	\`\`\`
-	
-	import { stateOf, Store } from "@akanjs/store";
-	
-	  
-	
-	import { cnst } from "../cnst";
-	
-	import { fetch } from "../fetch";
-	
-	  
-	
-	@Store(() => cnst.\${dict.Model})
-	
-	export class \${dict.Model}Store extends stateOf(fetch.\${dict.model}Gql, {
-	
-	// state
-	
-	}) {
-	
-	// action
-	
-	}
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.Zone.tsx
-	
-	\`\`\`
-	
-	"use client";
-	
-	import { Data, Load } from "@shared/ui";
-	
-	import { ModelsProps } from "@akanjs/client";
-	
-	import { cnst, \${dict.Model} } from "@\${dict.appName}/client";
-	
-	import { ClientInit, ClientView, DefaultOf } from "@akanjs/signal";
-	
-	  
-	
-	export const Admin = ({ sliceName = "\${dict.model}", init, query }: ModelsProps<cnst.\${dict.Model}>>) => {
-	
-	return (
-	
-	<Data.ListContainer
-	
-	init={init}
-	
-	query={query}
-	
-	sliceName={sliceName}
-	
-	renderItem={\${dict.Model}.Unit.Card}
-	
-	renderDashboard={\${dict.Model}.Util.Stat}
-	
-	renderInsight={\${dict.Model}.Util.Insight}
-	
-	renderTemplate={\${dict.Model}.Template.General}
-	
-	renderTitle={(\${dict.model}: DefaultOf<cnst.\${dict.Model}>>) => \`\${dict.Model} - \${\${dict.model}.id ? \${dict.model}.id : "New"}\`}
-	
-	renderView={(\${dict.model}: cnst.\${dict.Model}>) => <\${dict.Model}.View.General \${dict.model}={\${dict.model}} />}
-	
-	columns={[
-	
-	"id",
-	
-	"status",
-	
-	"createdAt",
-	
-	"updatedAt",
-	
-	]}
-	
-	actions={(\${dict.model}: cnst.Light\${dict.Model}, idx) => ["remove", "edit", "view"]}
-	
-	/>
-	
-	);
-	
-	};
-	
-	  
-	
-	interface CardProps {
-	
-	className?: string;
-	
-	init: ClientInit<"\${dict.model}", cnst.Light\${dict.Model}>;
-	
-	}
-	
-	export const Card = ({ className, init }: CardProps) => {
-	
-	return (
-	
-	<Load.Units
-	
-	className={className}
-	
-	init={init}
-	
-	renderItem={(\${dict.model}: cnst.Light\${dict.Model}) => (
-	
-	<\${dict.Model}.Unit.Card key={\${dict.model}.id} href={\`/\${dict.model}/\${\${dict.model}.id}\`} \${dict.model}={\${dict.model}} />
-	
-	)}
-	
-	/>
-	
-	);
-	
-	};
-	
-	  
-	
-	interface ViewProps {
-	
-	className?: string;
-	
-	view: ClientView<"\${dict.model}", cnst.\${dict.Model}>;
-	
-	}
-	
-	export const View = ({ view }: ViewProps) => {
-	
-	return <Load.View view={view} renderView={(\${dict.model}) => <\${dict.Model}.View.General \${dict.model}={\${dict.model}} />} />;
-	
-	};
-	
-	\`\`\`
-	
-	  
-	
-	model.Templete.tsx
-	
-	\`\`\`
-	
-	"use client";
-	
-	import { cnst, st, usePage } from "@\${dict.appName}/client";
-	
-	import { Field } from "@shared/ui";
-	
-	import { Layout } from "@util/ui";
-	
-	  
-	
-	interface \${dict.Model}EditProps {
-	
-	\${dict.model}Id?: string | null;
-	
-	}
-	
-	  
-	
-	export const General = ({ \${dict.model}Id = undefined }: \${dict.Model}EditProps) => {
-	
-	const \${dict.model}Form = st.use.\${dict.model}Form();
-	
-	const { l } = usePage();
-	
-	return (
-	
-	<Layout.Template>
-	
-	<Field.Text
-	
-	label={l.field("\${dict.model}", "id")}
-	
-	desc={l.desc("\${dict.model}", "id")}
-	
-	value={\${dict.model}Form.id}
-	
-	onChange={st.do.setIdOn\${dict.Model}}
-	
-	/>
-	
-	</Layout.Template>
-	
-	);
-	
-	};
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.Unit.tsx
-	
-	\`\`\`
-	
-	import { ModelProps } from "@akanjs/client";
-	
-	import { cnst, \${dict.Model} } from "@\${dict.appName}/client";
-	
-	import { Link } from "@util/ui";
-	
-	  
-	
-	export const Card = ({ \${dict.model}, href }: ModelProps<"\${dict.model}", cnst.Light\${dict.Model}>>) => {
-	
-	return (
-	
-	<Link href={href} className="animate-fadeIn w-full h-36 flex rounded-lg shadow-sm hover:shadow-lg duration-300">
-	
-	<div>{\${dict.model}.id}</div>
-	
-	</Link>
-	
-	);
-	
-	};
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.Util.tsx
-	
-	\`\`\`
-	
-	"use client";
-	
-	import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
-	
-	import { getQueryMap } from "@akanjs/constant";
-	
-	import { cnst } from "@\${dict.appName}/client";
-	
-	import { Data } from "@shared/ui";
-	
-	  
-	
-	export const Stat = ({
-	
-	className,
-	
-	summary,
-	
-	sliceName = "\${dict.model}",
-	
-	queryMap = getQueryMap(cnst.\${dict.Model}Summary),
-	
-	hidePresents,
-	
-	}: ModelDashboardProps<cnst.Summary>) => {
-	
-	return (
-	
-	<Data.Dashboard
-	
-	className={className}
-	
-	summary={summary}
-	
-	sliceName={sliceName}
-	
-	queryMap={queryMap}
-	
-	columns={["total\${dict.Model}"]}
-	
-	hidePresents={hidePresents}
-	
-	/>
-	
-	);
-	
-	};
-	
-	  
-	
-	export const Insight = ({
-	
-	className,
-	
-	insight,
-	
-	sliceName = "\${dict.model}",
-	
-	}: ModelInsightProps<cnst.\${dict.Model}Insight>) => {
-	
-	return (
-	
-	<Data.Insight
-	
-	className={className}
-	
-	insight={insight}
-	
-	sliceName={sliceName}
-	
-	columns={["count"]}
-	
-	/>
-	
-	);
-	
-	};
-	
-	\`\`\`
-	
-	  
-	  
-	
-	model.View.tsx
-	
-	\`\`\`
-	
-	import { clsx } from "@akanjs/client";
-	
-	import { cnst } from "@\${dict.appName}/client";
-	
-	import { Image } from "@util/ui";
-	
-	  
-	
-	interface \${dict.Model}ViewProps {
-	
-	className?: string;
-	
-	\${dict.model}: cnst.\${dict.Model};
-	
-	self?: { id?: string } | null;
-	
-	}
-	
-	  
-	
-	export const General = ({ className, \${dict.model}, self }: \${dict.Model}ViewProps) => {
-	
-	return (
-	
-	<div className={clsx(className, "animate-fadeIn w-full")}>
-	
-	<div>{\${dict.model}.id}</div>
-	
-	</div>
-	
-	);
-	
-	};
-	
-	\`\`\`
-	
-	\uC774\uB7F0\uC2DD\uC73C\uB85C \uC6B0\uB9AC\uAC00 \uC9C1\uC811 \uB9CC\uB4E0 \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uAE30\uBC18\uD574\uC11C db\uC640 \uC11C\uBE44\uC2A4 \uC2A4\uD1A0\uC5B4\uAE4C\uC9C0 \uBAA8\uB450 \uC5F0\uB3D9\uD574\uC11C \uD558\uB098\uC758 \uBAA8\uB378\uC5D0 \uB9DE\uAC8C\uB054 \uBAA8\uB4C8\uC744 \uD55C \uD3F4\uB354\uC5D0\uC11C \uC791\uC5C5\uD560 \uC218 \uC788\uAC8C\uB054 \uAD6C\uC870\uB97C \uB9CC\uB4E4\uC5C8\uC5B4.
-	
-	  
-	
-	\uC77C\uB2E8 \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC124\uBA85\uC740 \uC774 \uC815\uB3C4\uB85C \uD558\uACE0 \uC774 \uC815\uBCF4\uB4E4\uC744 \uAE30\uBC18\uC73C\uB85C \uB0B4\uAC00 \uC6D0\uD558\uB294 \uC694\uAD6C\uB97C \uB4E4\uC5B4\uC918.
-	
 	`;
 var moduleDesription = `
 
@@ -3978,6 +2967,767 @@ var utilUiDescription = `
   - Modern React patterns (hooks, context, providers)
   - Error handling and validation systems
   `;
+var shardUiDescription = `
+Shared UI Library Analysis
+
+  Library Overview
+
+  The shared UI library in the akansoft project is a comprehensive React component collection designed for building data-driven
+  applications. It provides a complete toolkit with consistent patterns, extensive customization options, and deep integration with the
+  application's store system.
+
+  Key Characteristics
+
+  - Store-Centric Architecture: Deep integration with standardized store slices and naming conventions
+  - Type-Safe Components: Extensive TypeScript generic usage for compile-time safety
+  - Internationalization Ready: Built-in multi-language support throughout all components
+  - Responsive Design: Mobile-first approach with adaptive breakpoints
+  - Performance Optimized: Memoization, lazy loading, and efficient re-rendering
+  - Accessibility Compliant: Proper ARIA attributes and keyboard navigation
+  - Extensible Architecture: Plugin systems and customizable renderers
+  - Unidirectional Data Flow: Predictable state management patterns
+
+  Component Categories
+
+  1. Field Components (Field.tsx)
+
+Field.tsx is a core form component library for the akansoft project, providing more than 25 specialized input fields.
+
+## Basic Structure and Common Features
+
+### Label Component
+
+\`\`\`typescript
+interface LabelProps {
+  className?: string;
+  label: string;
+  desc?: string;
+  unit?: string;
+  nullable?: boolean;
+  mode?: "view" | "edit";
+}
+\`\`\`
+- Purpose: Consistent label display for all fields
+- Features:
+  - Help tooltip support (desc)
+  - Unit display (unit)
+  - Optional field display (nullable)
+  - Required indicator is commented out (design decision)
+
+## Text Input Components
+
+### 1. Field.Text
+
+\`\`\`typescript
+interface TextProps {
+  label?: string;
+  desc?: string;
+  value: string | null;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  nullable?: boolean;
+  disabled?: boolean;
+  minlength?: number;  // Default: nullable ? 0 : 2
+  maxlength?: number;  // Default: 200
+  transform?: (value: string) => string;
+  validate?: (text: string) => boolean | string;
+  cache?: boolean;     // Form caching support
+  onPressEnter?: () => void;
+  inputStyleType?: "bordered" | "borderless" | "underline";
+}
+\`\`\`
+Key features:
+- Real-time transformation (transform)
+- Automatic cache key generation: \${label}-\${desc}-text
+- Length validation and custom validation
+- Various input styles supported
+
+### 2. Field.TextArea
+
+\`\`\`typescript
+interface TextAreaProps {
+  // Same basic props as Text +
+  rows?: number;       // Default: 3
+  maxlength?: number;  // Default: 1000
+}
+\`\`\`
+Key features:
+- Multi-line text input
+- Adjustable height (rows)
+- Longer maximum length than Text
+
+### 3. Field.Price (to be deprecated)
+
+\`\`\`typescript
+interface PriceProps {
+  // Similar to Text but specialized for prices
+  maxlength?: number;  // Default: 80
+  placeholder?: string; // Default: "~ \${l('shared.priceUnit')}"
+}
+\`\`\`
+Key features:
+- Automatic removal of commas and spaces
+- Automatic price unit placeholder
+- Marked as "delete" in comments - legacy component
+
+## List Management Components
+
+### 4. Field.List
+
+\`\`\`typescript
+interface ListProps<Item> {
+  label?: string;
+  value: Item[];
+  onChange: (value: Item[]) => void;
+  onAdd: () => void;
+  renderItem: (item: Item, idx: number) => ReactNode;
+}
+\`\`\`
+Key features:
+- Generic type supporting all item types
+- Custom rendering for each item
+- Automatic delete button addition
+- Automatic divider insertion
+
+### 5. Field.TextList
+
+\`\`\`typescript
+interface TextListProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  minlength?: number;     // Minimum array length, Default: 0
+  maxlength?: number;     // Maximum array length, Default: 50
+  minTextlength?: number; // Minimum individual text length, Default: 2
+  maxTextlength?: number; // Maximum individual text length, Default: 200
+  transform?: (value: string) => string;
+  validate?: (text: string) => boolean | string;
+  cache?: boolean;
+}
+\`\`\`
+Key features:
+- Drag and drop for order changes
+- Individual text input validation
+- Cache key: \${label}-\${desc}-textList-[\${idx}]
+- Conditional "New" button display based on maximum length limit
+
+### 6. Field.Tags
+
+\`\`\`typescript
+interface TagsProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  minlength?: number;     // Default: 0
+  maxlength?: number;     // Default: 50  
+  minTextlength?: number; // Default: 2
+  maxTextlength?: number; // Default: 10 (tags are shorter)
+  transform?: (value: string) => string;
+  validate?: (text: string) => boolean | string;
+}
+\`\`\`
+Key features:
+- Tag style UI (includes # prefix)
+- Inline editing mode
+- Creates additional input field when clicked
+- Cancel editing with ESC key
+- Complete tag addition with Enter/Blur
+
+## Numeric Input Components
+
+### 7. Field.Number
+
+\`\`\`typescript
+interface NumberProps {
+  value: number | null;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  unit?: string;
+  transform?: (value: number) => number;
+  validate?: (text: number) => boolean | string;
+  formatter?: (value: string) => string;  // Display format
+  parser?: (value: string) => string;     // Parsing format
+  cache?: boolean;
+}
+\`\`\`
+Key features:
+- Automatic number validation and min/max checks
+- Customizable display format with formatter/parser
+- Unit display support
+- Cache key: \${label}-\${desc}-number
+
+### 8. Field.DoubleNumber
+
+\`\`\`typescript
+interface DoubleNumberProps {
+  value: [number, number] | null;
+  onChange: (value: [number, number]) => void;
+  min?: [number, number] | null;
+  max?: [number, number] | null;
+  separator?: ReactNode | string;  // Separator between inputs
+}
+\`\`\`
+Key features:
+- Range input (start-end values)
+- Independent min/max validation for each
+- Custom separator (e.g., "~", "-")
+- Cache keys: \${label}-\${desc}-number-[0], \${label}-\${desc}-number-[1]
+
+## Selection Components
+
+### 9. Field.Switch
+
+\`\`\`typescript
+interface SwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  onDesc?: string;   // Description when true
+  offDesc?: string;  // Description when false
+  disabled?: boolean;
+}
+\`\`\`
+Key features:
+- DaisyUI toggle style
+- State-specific description text
+- Uses toggle-accent class
+
+### 10. Field.ToggleSelect
+
+\`\`\`typescript
+interface ToggleSelectProps<I> {
+  items: { label: string; value: I }[] | readonly I[] | I[] | Enum<I>;
+  value: I | null;
+  onChange: (value: I) => void;
+  model?: string;     // Model name for internationalization
+  field?: string;     // Field name for internationalization
+  validate?: (value: I) => boolean | string;
+  btnClassName?: string;
+}
+\`\`\`
+Key features:
+- Button-style single selection
+- Direct Enum type support
+- Automatic internationalization (l.enum(model, field, item))
+- Custom button styling
+
+### 11. Field.MultiToggleSelect
+
+\`\`\`typescript
+interface MultiToggleSelectProps<I> {
+  items: Enum<I> | { label: string; value: I }[] | readonly I[] | I[];
+  value: I[];
+  onChange: (value: I[]) => void;
+  minlength?: number;
+  maxlength?: number;
+  validate?: (value: I[]) => boolean | string;
+}
+\`\`\`
+Key features:
+- Multiple selection button UI
+- Minimum/maximum selection limit
+- Array length validation
+
+## Relational Data Selection Components
+
+### 12. Field.Parent & Field.ParentId
+
+\`\`\`typescript
+interface ParentProps<T, State, Input, Full, Light, Sort, QueryArgs> {
+  sliceName: string;        // Target slice name
+  value: Light | null;      // Parent returns object
+  onChange: (value?: Light | null) => void;
+  initArgs?: any[];         // Initialization arguments
+  sortOption?: (a: Light, b: Light) => number;
+  renderOption: (model: Light) => ReactNode;    // Option renderer
+  renderSelected?: (value: Light) => ReactNode; // Selected item renderer
+  onSearch?: (text: string) => void;            // Search handler
+}
+
+interface ParentIdProps extends ParentProps {
+  value: string | null;     // ParentId returns only ID
+  onChange: (id?: string | null, model?: Light | null) => void;
+}
+\`\`\`
+Key features:
+- Dynamic store slice integration
+- Automatic naming convention: \${modelName}List, init\${ModelName}, etc.
+- Searchable dropdown
+- Lazy loading (data fetched on onOpen)
+- Parent: returns full object, ParentId: returns only ID
+
+### 13. Field.Children & Field.ChildrenId
+
+\`\`\`typescript
+interface ChildrenProps extends ParentProps {
+  value: Light[];           // Multiple selection
+  onChange: (value?: Light[] | null) => void;
+}
+
+interface ChildrenIdProps extends ChildrenProps {
+  value: string[];          // ID array
+  onChange: (value: string[]) => void;
+}
+\`\`\`
+Key features:
+- Multiple relationship selection
+- Same store integration logic as Parent
+- Automatic initialization (useEffect)
+
+## Date/Time Components
+
+### 14. Field.Date
+
+\`\`\`typescript
+interface DateProps<Nullable extends boolean> {
+  value: Nullable extends true ? Dayjs | null : Dayjs;
+  onChange: (value: Dayjs) => void;
+  min?: Dayjs;
+  max?: Dayjs;
+  showTime?: boolean;       // datetime-local vs date
+  nullable?: boolean;
+}
+\`\`\`
+Key features:
+- Uses Dayjs objects
+- Conditional nullable type (using TypeScript generics)
+- Automatic format change based on showTime
+- Uses HTML5 date/datetime-local inputs
+- Includes comment about DaisyUI max value bug
+
+### 15. Field.DateRange
+
+\`\`\`typescript
+interface DateRangeProps<Nullable extends boolean> {
+  from: Nullable extends true ? Dayjs | null : Dayjs;
+  to: Nullable extends true ? Dayjs | null : Dayjs;
+  onChangeFrom: (value: Dayjs) => void;
+  onChangeTo: (value: Dayjs) => void;
+  onChange?: (from: Dayjs, to: Dayjs) => void;  // Optional unified handler
+  showTime?: boolean;
+}
+\`\`\`
+Key features:
+- Individual management of start/end dates
+- Optional unified change handler
+- Automatic "From"/"To" label display
+- Responsive layout (vertical on mobile)
+
+## File Upload Components
+
+### 16. Field.Img
+
+\`\`\`typescript
+interface ImageProps {
+  sliceName: string;        // Determines file upload API
+  value: cnst.File | null;
+  onChange: (file: cnst.File | null) => void;
+  styleType?: "circle" | "square";  // Default: "circle"
+  aspectRatio?: number[];   // Aspect ratio restriction
+  render?: (file: cnst.File) => ReactNode;
+  disabled?: boolean;
+}
+\`\`\`
+Key features:
+- Dynamic upload API: add\${capitalize(sliceName)}Files
+- Upload status polling (1-second interval)
+- Aspect ratio restriction support
+- Circular/square preview
+
+### 17. Field.Imgs
+
+\`\`\`typescript
+interface ImagesProps {
+  sliceName: string;
+  value: cnst.File[];
+  onChange: (files: cnst.File[]) => void;
+  minlength?: number;       // Default: 1
+  maxlength?: number;       // Default: 30
+  render?: (file: cnst.File) => ReactNode;
+}
+\`\`\`
+Key features:
+- Multiple image upload
+- Batch polling of upload status
+- Minimum/maximum file count limit
+- Fixed square style
+
+### 18. Field.File & Field.Files
+
+\`\`\`typescript
+interface FileProps {
+  sliceName: string;
+  value: cnst.File | null;  // File is single
+  onChange: (file: cnst.File | null) => void;
+  render?: (file: cnst.File) => ReactNode;
+}
+
+interface FilesProps {
+  sliceName: string;
+  value: cnst.File[];       // Files is multiple
+  onChange: (files: cnst.File[]) => void;
+  minlength?: number;       // Default: 1
+  maxlength?: number;       // Default: 30
+}
+\`\`\`
+Key features:
+- Support for all file types (beyond images)
+- Same upload logic as Img/Imgs
+- Custom file renderer support
+
+## Rich Text Editor
+
+### 19. Field.Slate
+
+\`\`\`typescript
+interface SlateProps {
+  sliceName: string;        // Determines file upload API
+  valuePath: string;        // Store path
+  onChange: (value: unknown) => void;
+  addFile: (file: cnst.File | cnst.File[], options?) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  editorHeight?: string;
+}
+\`\`\`
+Key features:
+- Slate.js-based rich text editor
+- File drag and drop support
+- Dynamic store path access
+- Adjustable height
+
+### 20. Field.Yoopta
+
+\`\`\`typescript
+interface YooptaProps {
+  value: JSON;
+  onChange: (value: JSON) => void;
+  readonly?: boolean;
+}
+\`\`\`
+Key features:
+- Yoopta editor integration
+- JSON data format
+- Read-only mode support
+
+## Authentication and Contact Components
+
+### 21. Field.Email
+
+\`\`\`typescript
+interface EmailProps {
+  value: string | null;
+  onChange: (value: string) => void;
+  placeholder?: string;     // Default: "example@email.com"
+  minlength?: number;       // Default: nullable ? 0 : 2
+  maxlength?: number;       // Default: 80
+  inputStyleType?: "bordered" | "borderless" | "underline";
+  cache?: boolean;
+}
+\`\`\`
+Key features:
+- Automatic email format validation
+- Uses Input.Email component
+- Cache key: \${label}-\${desc}-email
+
+### 22. Field.Phone
+
+\`\`\`typescript
+interface PhoneProps {
+  value: string | null;
+  onChange: (value: string) => void;
+  maxlength?: number;       // Default: 13
+  transform?: (value: string) => string;  // Default: formatPhone
+  cache?: boolean;
+}
+\`\`\`
+Key features:
+- Automatic phone number formatting (formatPhone)
+- isPhoneNumber validation
+- Cache key: \${label}-\${desc}-phone
+
+### 23. Field.Password
+
+\`\`\`typescript
+interface PasswordProps {
+  value: string | null;
+  onChange: (value: string) => void;
+  confirmValue?: string | null;      // Confirmation input
+  onChangeConfirm?: (value: string) => void;
+  showConfirm?: boolean;             // Show confirmation input
+  minlength?: number;                // Default: nullable ? 0 : 8
+  maxlength?: number;                // Default: 20
+  cache?: boolean;
+}
+\`\`\`
+Key features:
+- Optional password confirmation input
+- Automatic match validation
+- Secure input (masking)
+- Cache key: \${label}-\${desc}-password
+
+## Geographic Location Components
+
+### 24. Field.Coordinate
+
+\`\`\`typescript
+interface CoordinateProps {
+  coordinate: cnst.util.Coordinate | null;
+  onChange: (coordinate: cnst.util.Coordinate) => void;
+  mapKey: string;           // Google Maps API key
+  mapClassName?: string;
+  disabled?: boolean;
+}
+\`\`\`
+Key features:
+- Google Maps integration
+- Coordinate selection by clicking
+- Automatic marker display (AiTwotoneEnvironment icon)
+- Default zoom level 3
+
+### 25. Field.Postcode
+
+\`\`\`typescript
+interface PostcodeProps {
+  kakaoKey: string;         // Kakao API key
+  address: string | null;
+  onChange: ({
+    address: string;
+    addressEn: string;
+    zipcode: string;
+    coordinate: cnst.util.Coordinate;
+  }) => void;
+}
+\`\`\`
+Key features:
+- Daum postcode service (react-daum-postcode)
+- Coordinate conversion using Kakao Maps API
+- Simultaneous Korean/English address provision
+- Modal address search
+
+### 26. Field.KoreanCityDistrict
+
+\`\`\`typescript
+interface KoreanCityDistrictProps {
+  city: string | null;
+  onChangeCity: (city: string | null) => void;
+  district: string | null;
+  onChangeDistrict: (district: string | null) => void;
+  disabled?: boolean;
+}
+\`\`\`
+Key features:
+- Hardcoded Korean region data
+- Two-level selection (city/province \u2192 district/county)
+- Includes detailed regions: 25 districts in Seoul, 16 in Busan, etc.
+- Linked selection (district activates after city selection)
+
+## Common Patterns and Features
+
+### 1. Caching System
+
+Most input components support form data persistence with the cache prop:
+cacheKey={cache ? \`\${label}-\${desc}-\${componentType}\` : undefined}
+
+### 2. Validation System
+
+All components support multi-layer validation:
+- Basic validation (length, type, format)
+- Custom validation functions
+- Internationalized error messages
+
+### 3. Internationalization
+
+- Labels, placeholders, error messages all use l() function
+- Automatic translation for Enum types
+- Multi-language error message templates
+
+### 4. Store Integration
+
+Relational components automatically connect to the store through naming conventions:
+\`\`\`javascript
+const names = {
+  model: modelName,
+  modelList: \`\${modelName}List\`,
+  initModel: \`init\${ModelName}\`,
+};
+\`\`\`
+
+### 5. Type Safety
+
+- Type safety ensured with TypeScript generics
+- Conditional types for handling nullable properties
+- Strict props interface definitions
+
+This comprehensive field library provides a consistent user experience and developer convenience, designed to make complex form compositions simple and safe.
+  2. Data Components (/Data/)
+
+  Purpose: Complete data visualization and management interfaces
+
+  ListContainer
+
+  - type?: "card" | "list" - Display mode selection
+  - columns?: DataColumn<any>[] - Column configuration
+  - tools?: DataTool[] - Toolbar actions
+  - renderDashboard?: (props) => ReactNode - Dashboard customization
+  - renderItem?: (props) => ReactNode - Item renderer
+
+  CardList
+
+  - sliceName: string - Store slice identifier
+  - columns: DataColumn<any>[] - Data column definitions
+  - actions?: DataAction<Light>[] - Item actions
+  - renderItem: (args) => ReactNode - Card renderer
+  - renderLoading?: () => ReactNode - Loading state
+
+  Dashboard
+
+  - summary: { [key: string]: any } - Statistics data
+  - queryMap: { [key: string]: any } - Filter mappings
+  - columns?: string[] - Clickable statistics
+  - hidePresents?: boolean - Display control
+
+  3. Load Components (/Load/)
+
+  Purpose: Data loading and state management with SSR/CSR support
+
+  Page
+
+  - loader: () => Promise<Return> - Data fetching function
+  - render: (data: Return) => ReactNode - Content renderer
+  - loading?: () => ReactNode - Loading state
+
+  Edit
+
+  - edit: ClientEdit<T, Full> | Partial<Full> - Edit data
+  - type?: "modal" | "form" | "empty" - Display mode
+  - sliceName: string - Store slice
+  - onSubmit?: string | ((model: Full) => void) - Submit handler
+
+  Units
+
+  - init: ClientInit<T, L> - Initial data
+  - filter?: (item: L, idx: number) => boolean - Item filtering
+  - sort?: (a: L, b: L) => number - Sorting function
+  - renderItem?: (item: L, idx: number) => ReactNode - Item renderer
+  - pagination?: boolean - Pagination control
+
+  4. Model Components (/Model/)
+
+  Purpose: CRUD operations with modal and inline editing
+
+  EditModal
+
+  - sliceName: string - Store slice identifier
+  - id?: string - Model ID for editing
+  - renderTitle?: ((model: Full) => ReactNode) | string - Title customization
+  - onSubmit?: string | ((model: Full) => void) - Submit handler
+  - onCancel?: string | ((form?: any) => any) - Cancel handler
+
+  ViewModal
+
+  - id: string - Model identifier
+  - renderView: (model: any) => ReactNode - View content renderer
+  - renderAction?: (model: any) => ReactNode - Action buttons
+
+  NewWrapper
+
+  - sliceName: string - Store slice
+  - partial?: Partial<Full> - Default values
+  - modal?: string | null - Modal type
+
+  5. System Components (/System/)
+
+  Purpose: Application-level providers and system utilities
+
+  Provider (CSR)
+
+  - fonts: ReactFont[] - Font configurations
+  - gaTrackingId?: string - Analytics tracking
+  - layoutStyle?: "mobile" | "web" - Layout mode
+
+  Provider (SSR)
+
+  - fonts?: NextFont[] - Next.js font configurations
+
+  SelectLanguage
+
+  - languages?: string[] - Available languages
+
+  6. Only Components (/Only/)
+
+  Purpose: Conditional rendering based on user state and device
+
+  Admin
+
+  - roles?: cnst.AdminRole[] - Required admin roles
+
+  User
+
+  - roles?: cnst.UserRole[] - Required user roles
+
+  Show
+
+  - show?: boolean | cnst.util.Responsive[] - Show conditions
+
+  Mobile/Web
+
+  - No props - Device-based rendering
+
+  7. Editor Components (/Editor/)
+
+  Purpose: Rich text editing capabilities
+
+  Slate
+
+  - addFilesGql: (fileList: FileList, id?: string) => Promise<File[]> - File upload
+  - addFile: (file: cnst.File | cnst.File[], options?) => void - File management
+  - onChange: (value: unknown) => void - Content change handler
+  - defaultValue?: unknown - Initial content
+  - placeholder?: string - Placeholder text
+  - disabled?: boolean - Read-only mode
+
+  SlateContent
+
+  - content: unknown - Slate content to display
+
+  8. Property Component (Property.tsx)
+
+  Purpose: Metadata-driven property editing
+
+  - prop: string - Property name
+  - slice: StoreOf<any, any> - Store slice
+  - renderTemplate?: (form: any) => ReactNode - Custom edit renderer
+  - renderView?: (model: any) => ReactNode - Custom view renderer
+  - modelPath?: string - Model path in store
+
+  Integration Patterns
+
+  Store Integration
+
+  - Components use standardized naming conventions for store slices
+  - Automatic state management through slice integration
+  - Consistent error handling and loading states
+
+  Validation System
+
+  - Built-in validation for all field types
+  - Custom validation function support
+  - Internationalized error messages
+
+  File Management
+
+  - Integrated file upload system
+  - Progress tracking and status management
+  - Multiple file type support with preview
+
+  Responsive Behavior
+
+  - Mobile-first design approach
+  - Adaptive layouts based on screen size
+  - Touch-friendly interactions
+
+  This comprehensive UI library provides everything needed to build sophisticated data management interfaces with consistent user
+  experience and maintainable code architecture.
+`;
 var frameworkAbstract = `
 Intro
 - Build an all-stack application at once.
@@ -4057,6 +3807,87 @@ Core ESLint Extensions
   This configuration creates a robust linting setup that enforces Next.js App Router best practices, maintains clean code
   organization, and ensures proper server/client code separation.
   `;
+var componentDefaultDescription = ({
+  modelName,
+  ModelName,
+  exampleFiles,
+  constant,
+  properties
+}) => `
+    
+
+1. Akan.js \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uAC1C\uC694
+${frameworkAbstract}
+
+2. Akan.js\uD504\uB808\uC784\uC6CC\uD06C \uB370\uC774\uD130 \uAE30\uBC18 \uBAA8\uB4C8\uC5D0 \uB300\uD55C \uC124\uBA85
+${moduleDesription}
+
+3. Akan.js eslint \uC124\uC815\uC5D0 \uB300\uD55C \uC124\uBA85
+${eslintDescription}
+
+4. util/ui \uB0B4 ui\uD0B7\uC5D0 \uB300\uD55C \uC124\uBA85
+${utilUiDescription}
+
+5. shared/ui \uB0B4 ui\uD0B7\uC5D0 \uB300\uD55C \uC124\uBA85
+${shardUiDescription}
+
+6. ${ModelName}.constant.ts \uD30C\uC77C\uC5D0 \uB300\uD55C \uC815\uBCF4
+${constant}
+
+7. ${modelName}\uC5D0\uC11C \uC885\uC18D\uB418\uB294 \uB2E4\uB978 \uBAA8\uB378\uB4E4\uC758 \uD0C0\uC785 \uC815\uC758
+${properties.map(
+  (property) => `
+  \`\`\`
+  ${property.key}.constant.ts
+  
+
+  ${property.source}
+  \`\`\`
+  `
+).join("\n\n")}
+
+
+8. \uC608\uC2DC \uD30C\uC77C\uB4E4
+${exampleFiles.map(
+  (example) => `
+  Example filename: ${example.filepath}
+  \`\`\`
+  ${example.content}
+  \`\`\`
+`
+).join("\n\n")}
+
+
+
+
+
+
+  \uC5ED\uD560\uBD80\uC5EC 
+  - Akan.js \uC0AC\uB0B4 \uD504\uB808\uC784\uC6CC\uD06C \uAE30\uBC18 Typescript \uC2DC\uB2C8\uC5B4 \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C\uC790.
+
+  \uCF54\uB529 \uADDC\uCE59
+    - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
+    - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
+    - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+    - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
+    - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
+  \uCF54\uB4DC \uC2A4\uD0C0\uC77C
+    - \uC0C9\uC0C1: \uD558\uB4DC\uCF54\uB529(bg-red) \uB300\uC2E0 \uD14C\uB9C8 \uC0C9\uC0C1(bg-primary) \uC0AC\uC6A9
+    - \uC870\uAC74\uBD80 \uB80C\uB354\uB9C1: field && <div>... \uB300\uC2E0 field ? <div>... : null \uC0AC\uC6A9
+    - \uBAA8\uB378 \uC811\uADFC: \uAD6C\uC870\uBD84\uD574\uD560\uB2F9 \uB300\uC2E0 ${modelName}.field \uD615\uC2DD\uC73C\uB85C \uC811\uADFC
+    - \uD0C0\uC785 \uC548\uC804: ${modelName}.constant.ts\uC758 \uC2A4\uD0A4\uB9C8 \uCC38\uC870\uD558\uC5EC \uC5D0\uB7EC \uBC29\uC9C0
+  \uD544\uB4DC \uC811\uADFC \uC804: \uC2A4\uD0A4\uB9C8\uC758 \uC2E4\uC81C \uD544\uB4DC \uB9AC\uC2A4\uD2B8 \uC791\uC131 \uBC0F \uAC80\uD1A0 \uD544\uC218
+  
+  \uC5C4\uACA9\uD55C \uC8FC\uC758\uC0AC\uD56D
+    - UI \uD0B7\uC740 \uBB38\uC11C\uC5D0 \uBA85\uC2DC\uB41C \uCEF4\uD3EC\uB10C\uD2B8\uB9CC \uC0AC\uC6A9
+    - \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 \uC804 \uBB38\uC11C \uD655\uC778 \uBC0F props \uC815\uD655\uD788 \uAC80\uC99D
+    - \uBA85\uC2DC\uB41C \uB8F0 \uC678 \uC784\uC758 \uCD94\uC0C1\uD654 \uAE08\uC9C0
+    - dayjs \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB294 @akanjs/base\uC5D0\uC11C \uB798\uD551\uD558\uC5EC \uC81C\uACF5\uD558\uACE0 \uC788\uC74C.
+
+
+
+
+`;
 var scalarConstantDescription = `
 Purpose and Structure
 
@@ -4440,7 +4271,7 @@ Target filename: ${modelName}.constant.ts
 ${boilerplate}
 \`\`\`
 `;
-var requestView = ({
+var requestTemplate = ({
   sysName,
   modelName,
   ModelName,
@@ -4449,78 +4280,56 @@ var requestView = ({
   properties,
   exampleFiles
 }) => `
-  
-
-1. Akan.js \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uAC1C\uC694
-${frameworkAbstract}
-
-2. Akan.js\uD504\uB808\uC784\uC6CC\uD06C \uB370\uC774\uD130 \uAE30\uBC18 \uBAA8\uB4C8\uC5D0 \uB300\uD55C \uC124\uBA85
-${moduleDesription}
-
-3. Akan.js eslint \uC124\uC815\uC5D0 \uB300\uD55C \uC124\uBA85
-${eslintDescription}
-
-4. util/ui \uB0B4 ui\uD0B7\uC5D0 \uB300\uD55C \uC124\uBA85
-${utilUiDescription}
-
-
-
-5. ${ModelName}.constant.ts \uD30C\uC77C\uC5D0 \uB300\uD55C \uC815\uBCF4
-${constant}
+  ${componentDefaultDescription({
+  sysName,
+  modelName,
+  ModelName,
+  exampleFiles,
+  constant,
+  properties
+})}
+  \uC694\uCCAD\uC0AC\uD56D
+  - \uC544\uB798 \uC81C\uACF5\uD560 \uAE30\uBCF8 \uD15C\uD50C\uB9BF \uCF54\uB4DC\uC5D0 \uCD94\uAC00\uB85C \uCEF4\uD3EC\uB10C\uD2B8 \uAC1C\uBC1C
+  - ${ModelName}.Template.tsx \uCF54\uB4DC \uC791\uC131
+  - \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984\uC740 \uBAA8\uB378 \uC774\uB984\uC740 \uC2A4\uD0A4\uB9C8\uC5D0 \uAE30\uBC18\uD55C \uAE30\uB2A5\uC5D0 \uCD08\uC810\uC744 \uB450\uACE0 \uC791\uC131
+  - \uC544\uB798 \uC81C\uACF5\uD560 \uBCF4\uC77C\uB7EC\uD50C\uB808\uC774\uD2B8\uC5D0 \uC788\uB294 General \uCEF4\uD3EC\uB10C\uD2B8 1\uAC1C\uB97C \uC81C\uC678\uD55C \uB514\uC790\uC778 \uCEF4\uD3EC\uB10C\uD2B8 4\uAC1C \uAC1C\uBC1C 
+  - \uCD94\uC0C1\uD654 \uD574\uC57C\uD558\uB294 \uACBD\uC6B0\uAC00 \uC788\uC744 \uACBD\uC6B0\uC5D4 \uBB38\uC11C\uB97C \uB2E4\uC2DC \uCC38\uACE0\uD558\uACE0 \uC124\uBA85\uB41C \uB0B4\uC5D0\uC11C \uD574\uACB0\uD574\uC57C\uD568.
+  - \uBCF4\uC77C\uB7EC\uD50C\uB808\uC774\uD2B8\uC5D0 \uB9DE\uAC8C \uC815\uB9AC\uD574\uC11C \uC81C\uACF5
+- 
 
-6. ${modelName}\uC5D0\uC11C \uC885\uC18D\uB418\uB294 \uB2E4\uB978 \uBAA8\uB378\uB4E4\uC758 \uD0C0\uC785 \uC815\uC758
-${properties.map(
-  (property) => `
+Application name: ${sysName}
+Model name: ${modelName}
+Target filename: ${ModelName}.Template.tsx
   \`\`\`
-  ${property.key}.constant.ts
   
-
-  ${property.source}
-  \`\`\`
-  `
-).join("\n\n")}
-
-
-7. \uC608\uC2DC \uD30C\uC77C\uB4E4
-${exampleFiles.map(
-  (example) => `
-  Example filename: ${example.filepath}
-  \`\`\`
-  ${example.content}
   \`\`\`
-`
-).join("\n\n")}
-
-
-
-
-
-
-  \uC5ED\uD560\uBD80\uC5EC 
-  - Akan.js \uC0AC\uB0B4 \uD504\uB808\uC784\uC6CC\uD06C \uAE30\uBC18 Typescript \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C
 
-  \uCF54\uB529 \uADDC\uCE59
-    - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-    - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-    - CSS: DaisyUI (btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 \uBD88\uAC00)
-    - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-  \uCF54\uB4DC \uC2A4\uD0C0\uC77C
-    - \uC0C9\uC0C1: \uD558\uB4DC\uCF54\uB529(bg-red) \uB300\uC2E0 \uD14C\uB9C8 \uC0C9\uC0C1(bg-primary) \uC0AC\uC6A9
-    - \uC870\uAC74\uBD80 \uB80C\uB354\uB9C1: field && <div>... \uB300\uC2E0 field ? <div>... : null \uC0AC\uC6A9
-    - \uBAA8\uB378 \uC811\uADFC: \uAD6C\uC870\uBD84\uD574\uD560\uB2F9 \uB300\uC2E0 ${modelName}.field \uD615\uC2DD\uC73C\uB85C \uC811\uADFC
-    - \uD0C0\uC785 \uC548\uC804: ${modelName}.constant.ts\uC758 \uC2A4\uD0A4\uB9C8 \uCC38\uC870\uD558\uC5EC \uC5D0\uB7EC \uBC29\uC9C0
-  \uD544\uB4DC \uC811\uADFC \uC804: \uC2A4\uD0A4\uB9C8\uC758 \uC2E4\uC81C \uD544\uB4DC \uB9AC\uC2A4\uD2B8 \uC791\uC131 \uBC0F \uAC80\uD1A0 \uD544\uC218
-  
-  \uC5C4\uACA9\uD55C \uC8FC\uC758\uC0AC\uD56D
-    - UI \uD0B7\uC740 \uBB38\uC11C\uC5D0 \uBA85\uC2DC\uB41C \uCEF4\uD3EC\uB10C\uD2B8\uB9CC \uC0AC\uC6A9
-    - \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 \uC804 \uBB38\uC11C \uD655\uC778 \uBC0F props \uC815\uD655\uD788 \uAC80\uC99D
-    - \uBA85\uC2DC\uB41C \uB8F0 \uC678 \uC784\uC758 \uCD94\uC0C1\uD654 \uAE08\uC9C0
-  
+ 
+`;
+var requestView = ({
+  sysName,
+  modelName,
+  ModelName,
+  boilerplate,
+  constant,
+  properties,
+  exampleFiles
+}) => `
+ ${componentDefaultDescription({
+  sysName,
+  modelName,
+  ModelName,
+  exampleFiles,
+  constant,
+  properties
+})}
   \uC694\uCCAD\uC0AC\uD56D
-  ${ModelName}.View.tsx \uCF54\uB4DC \uC791\uC131
-  \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984\uC740 \uBAA8\uB378 \uC774\uB984\uC740 \uC81C\uC678\uD55C \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uB514\uC790\uC778\uC5D0 \uCD08\uC810\uC744 \uB450\uACE0 \uC791\uC131
-  \uC77C\uBC18\uC801\uC73C\uB85C \uC0AC\uC6A9 \uAC00\uB2A5\uD55C General \uCEF4\uD3EC\uB10C\uD2B8 1\uAC1C\uB97C \uC81C\uC678\uD55C \uB514\uC790\uC778 \uCEF4\uD3EC\uB10C\uD2B8 4\uAC1C \uAC1C\uBC1C 
-  \uCD94\uC0C1\uD654 \uD574\uC57C\uD558\uB294 \uACBD\uC6B0\uAC00 \uC788\uC744 \uACBD\uC6B0\uC5D4 \uBB38\uC11C\uB97C \uB2E4\uC2DC \uCC38\uACE0\uD558\uACE0 \uC124\uBA85\uB41C \uB0B4\uC5D0\uC11C \uD574\uACB0\uD574\uC57C\uD568.
+  - \uC544\uB798 \uC81C\uACF5\uD560 \uAE30\uBCF8 \uD15C\uD50C\uB9BF \uCF54\uB4DC\uC5D0 \uCD94\uAC00\uB85C \uCEF4\uD3EC\uB10C\uD2B8 \uAC1C\uBC1C
+  - ${ModelName}.View.tsx \uCF54\uB4DC \uC791\uC131
+  - \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984\uC5D0 ${ModelName}\uC740 \uC0DD\uB7B5\uD558\uBA70, \uB514\uC790\uC778 \uC911\uC810\uC758 \uC774\uB984\uC73C\uB85C \uC791\uC131
+  - \uC544\uB798 \uC81C\uACF5\uD560 \uBCF4\uC77C\uB7EC\uD50C\uB808\uC774\uD2B8\uC5D0 \uC788\uB294 General \uCEF4\uD3EC\uB10C\uD2B8 1\uAC1C\uB97C \uC81C\uC678\uD55C \uB514\uC790\uC778 \uCEF4\uD3EC\uB10C\uD2B8 4\uAC1C \uAC1C\uBC1C 
+  - \uCD94\uC0C1\uD654 \uD574\uC57C\uD558\uB294 \uACBD\uC6B0\uAC00 \uC788\uC744 \uACBD\uC6B0\uC5D4 \uBB38\uC11C\uB97C \uB2E4\uC2DC \uCC38\uACE0\uD558\uACE0 \uC124\uBA85\uB41C \uB0B4\uC5D0\uC11C \uD574\uACB0\uD574\uC57C\uD568.
+  - \uBCF4\uC77C\uB7EC\uD50C\uB808\uC774\uD2B8\uC5D0 \uB9DE\uAC8C \uC815\uB9AC\uD574\uC11C \uC81C\uACF5
 
 
 Application name: ${sysName}
@@ -4528,7 +4337,7 @@ Model name: ${modelName}
 
 Target filename: ${ModelName}.View.tsx
   \`\`\`
-  
+  ${boilerplate}
   \`\`\`
 
  
@@ -4539,78 +4348,25 @@ var requestUnit = ({
   ModelName,
   constant,
   properties,
+  boilerplate,
   exampleFiles
 }) => `
-    
-
-1. Akan.js \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uAC1C\uC694
-${frameworkAbstract}
-
-2. Akan.js\uD504\uB808\uC784\uC6CC\uD06C \uB370\uC774\uD130 \uAE30\uBC18 \uBAA8\uB4C8\uC5D0 \uB300\uD55C \uC124\uBA85
-${moduleDesription}
-
-3. Akan.js eslint \uC124\uC815\uC5D0 \uB300\uD55C \uC124\uBA85
-${eslintDescription}
-
-4. util/ui \uB0B4 ui\uD0B7\uC5D0 \uB300\uD55C \uC124\uBA85
-${utilUiDescription}
-
-5. ${ModelName}.constant.ts \uD30C\uC77C\uC5D0 \uB300\uD55C \uC815\uBCF4
-${constant}
-
-6. ${modelName}\uC5D0\uC11C \uC885\uC18D\uB418\uB294 \uB2E4\uB978 \uBAA8\uB378\uB4E4\uC758 \uD0C0\uC785 \uC815\uC758
-${properties.map(
-  (property) => `
-  \`\`\`
-  ${property.key}.constant.ts
-  
-
-  ${property.source}
-  \`\`\`
-  `
-).join("\n\n")}
-
-
-7. \uC608\uC2DC \uD30C\uC77C\uB4E4
-${exampleFiles.map(
-  (example) => `
-  Example filename: ${example.filepath}
-  \`\`\`
-  ${example.content}
-  \`\`\`
-`
-).join("\n\n")}
-
-
-
-
-
-
-  \uC5ED\uD560\uBD80\uC5EC 
-  - Akan.js \uC0AC\uB0B4 \uD504\uB808\uC784\uC6CC\uD06C \uAE30\uBC18 Typescript \uC2DC\uB2C8\uC5B4 \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C\uC790.
+ ${componentDefaultDescription({
+  sysName,
+  modelName,
+  ModelName,
+  exampleFiles,
+  constant,
+  properties
+})}
 
-  \uCF54\uB529 \uADDC\uCE59
-    - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-    - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-    - CSS: DaisyUI (btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 \uBD88\uAC00)
-    - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-  \uCF54\uB4DC \uC2A4\uD0C0\uC77C
-    - \uC0C9\uC0C1: \uD558\uB4DC\uCF54\uB529(bg-red) \uB300\uC2E0 \uD14C\uB9C8 \uC0C9\uC0C1(bg-primary) \uC0AC\uC6A9
-    - \uC870\uAC74\uBD80 \uB80C\uB354\uB9C1: field && <div>... \uB300\uC2E0 field ? <div>... : null \uC0AC\uC6A9
-    - \uBAA8\uB378 \uC811\uADFC: \uAD6C\uC870\uBD84\uD574\uD560\uB2F9 \uB300\uC2E0 ${modelName}.field \uD615\uC2DD\uC73C\uB85C \uC811\uADFC
-    - \uD0C0\uC785 \uC548\uC804: ${modelName}.constant.ts\uC758 \uC2A4\uD0A4\uB9C8 \uCC38\uC870\uD558\uC5EC \uC5D0\uB7EC \uBC29\uC9C0
-  \uD544\uB4DC \uC811\uADFC \uC804: \uC2A4\uD0A4\uB9C8\uC758 \uC2E4\uC81C \uD544\uB4DC \uB9AC\uC2A4\uD2B8 \uC791\uC131 \uBC0F \uAC80\uD1A0 \uD544\uC218
-  
-  \uC5C4\uACA9\uD55C \uC8FC\uC758\uC0AC\uD56D
-    - UI \uD0B7\uC740 \uBB38\uC11C\uC5D0 \uBA85\uC2DC\uB41C \uCEF4\uD3EC\uB10C\uD2B8\uB9CC \uC0AC\uC6A9
-    - \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 \uC804 \uBB38\uC11C \uD655\uC778 \uBC0F props \uC815\uD655\uD788 \uAC80\uC99D
-    - \uBA85\uC2DC\uB41C \uB8F0 \uC678 \uC784\uC758 \uCD94\uC0C1\uD654 \uAE08\uC9C0
-  
   \uC694\uCCAD\uC0AC\uD56D
+  - \uC544\uB798 \uC81C\uACF5\uD560 \uAE30\uBCF8 \uD15C\uD50C\uB9BF \uCF54\uB4DC\uC5D0 \uCD94\uAC00\uB85C \uCEF4\uD3EC\uB10C\uD2B8 \uAC1C\uBC1C
   - ${ModelName}.Unit.tsx \uCF54\uB4DC \uC791\uC131
-  - \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984\uC5D0 ModelName\uC740 \uC0DD\uB7B5\uD558\uBA70, \uC608\uC2DC\uD30C\uC77C\uB4E4\uC758 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uCC38\uACE0\uD558\uC5EC \uC791\uBA85
+  - \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984\uC5D0 ${ModelName}\uC740 \uC0DD\uB7B5\uD558\uBA70, \uB514\uC790\uC778 \uC911\uC810\uC758 \uC774\uB984\uC73C\uB85C \uC791\uC131
   - \uC608\uC2DC\uD30C\uC77C \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAE30\uBC18\uD558\uC5EC \uC77C\uBC18\uC801\uC73C\uB85C \uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uCEF4\uD3EC\uB10C\uD2B8 1\uAC1C\uC640 \uB514\uC790\uC778\uC801 \uC694\uC18C\uAC00 \uD3EC\uD568\uB41C \uCEF4\uD3EC\uB10C\uD2B8 3\uAC1C \uAC1C\uBC1C
   - \uCD94\uC0C1\uD654 \uD574\uC57C\uD558\uB294 \uACBD\uC6B0\uAC00 \uC788\uC744 \uACBD\uC6B0\uC5D4 \uBB38\uC11C\uB97C \uB2E4\uC2DC \uCC38\uACE0\uD558\uACE0 \uC124\uBA85\uB41C \uB0B4\uC5D0\uC11C \uD574\uACB0\uD574\uC57C\uD568.
+  - \uBCF4\uC77C\uB7EC\uD50C\uB808\uC774\uD2B8\uC5D0 \uB9DE\uAC8C \uC815\uB9AC\uD574\uC11C \uC81C\uACF5
 
 
 Application name: ${sysName}
@@ -4618,7 +4374,7 @@ Model name: ${modelName}
 
 Target filename: ${ModelName}.Unit.tsx
   \`\`\`
-  
+  ${boilerplate}
   \`\`\`
 
  
@@ -5110,7 +4866,7 @@ var ApplicationRunner = class {
     const chatModel = new import_openai3.ChatOpenAI({ modelName: "gpt-4o", openAIApiKey });
     const projectName = await (0, import_prompts5.input)({ message: "please enter project name." });
     const projectDesc = await (0, import_prompts5.input)({ message: "please enter project description. (40 ~ 60 characters)" });
-    const spinner = (0, import_ora2.default)("Gerating project files...");
+    const spinner = (0, import_ora3.default)("Gerating project files...");
     const mainPrompt = import_prompts6.PromptTemplate.fromTemplate(requestApplication());
     const chain = import_runnables2.RunnableSequence.from([mainPrompt, chatModel, new import_output_parsers.StringOutputParser()]);
     const resultOne = await chain.invoke({ projectName, projectDesc });
@@ -5286,7 +5042,7 @@ var ApplicationScript = class {
 var ApplicationCommand = class {
   applicationScript = new ApplicationScript();
   async createApplication(name, start, workspace) {
-    await this.applicationScript.createApplication(name, workspace, { start });
+    await this.applicationScript.createApplication(name.toLowerCase().replace(/ /g, "-"), workspace, { start });
   }
   async removeApplication(app) {
     await this.applicationScript.removeApplication(app);
@@ -5785,7 +5541,7 @@ CloudCommand = __decorateClass([
 var LibraryCommand = class {
   libraryScript = new LibraryScript();
   async createLibrary(name, workspace) {
-    await this.libraryScript.createLibrary(name, workspace);
+    await this.libraryScript.createLibrary(name.toLowerCase().replace(/ /g, "-"), workspace);
   }
   async removeLibrary(lib) {
     await this.libraryScript.removeLibrary(lib);
@@ -5854,19 +5610,11 @@ var ModuleRunner = class {
   async createScalarTemplate(sys2, name) {
     const akanConfig = await sys2.getConfig();
     const scanResult = await sys2.scan({ akanConfig });
-    const names = (0, import_pluralize.default)(name);
     await sys2.applyTemplate({
       basePath: "./lib/__scalar",
       template: "__scalar",
       scanResult,
-      dict: {
-        model: name,
-        Model: capitalize(name),
-        models: names,
-        Models: capitalize(names),
-        sysName: sys2.name,
-        SysName: capitalize(sys2.name)
-      }
+      dict: { model: name, Model: capitalize(name), sysName: sys2.name, SysName: capitalize(sys2.name) }
     });
     await sys2.scan({ akanConfig });
     return {
@@ -5877,22 +5625,39 @@ var ModuleRunner = class {
       }
     };
   }
+  async createComponentTemplate(sys2, name, type) {
+    const akanConfig = await sys2.getConfig();
+    const scanResult = await sys2.scan({ akanConfig });
+    await sys2.applyTemplate({
+      basePath: `./lib/${name}__`,
+      template: `module/__Model__.${capitalize(type)}.ts`,
+      scanResult,
+      dict: { model: name, Model: capitalize(name), appName: sys2.name }
+    });
+    await sys2.scan({ akanConfig });
+    return {
+      component: {
+        filename: `${name}.${capitalize(type)}.tsx`,
+        content: sys2.readFile(`lib/${name}__/${capitalize(name)}.${capitalize(type)}.tsx`)
+      }
+      // constant: {
+      //   filename: `${name}.constant.ts`,
+      //   content: sys.readFile(`lib/__scalar/${name}/${name}.constant.ts`),
+      // },
+      // dictionary: {
+      //   filename: `${name}.dictionary.ts`,
+      //   content: sys.readFile(`lib/__scalar/${name}/${name}.dictionary.ts`),
+      // },
+    };
+  }
   async createModuleTemplate(sys2, name) {
     const akanConfig = await sys2.getConfig();
     const scanResult = await sys2.scan({ akanConfig });
-    const names = (0, import_pluralize.default)(name);
     await sys2.applyTemplate({
       basePath: `./lib/${name}`,
       template: "module",
       scanResult,
-      dict: {
-        model: name,
-        Model: capitalize(name),
-        models: names,
-        Models: capitalize(names),
-        sysName: sys2.name,
-        SysName: capitalize(sys2.name)
-      }
+      dict: { model: name, Model: capitalize(name), sysName: sys2.name, SysName: capitalize(sys2.name) }
     });
     await sys2.scan({ akanConfig });
     return {
@@ -5939,64 +5704,6 @@ var ModuleRunner = class {
       }
     };
   }
-  //   async createUnit(sys: App | Lib, modelName: string) {
-  //     const modelFileData = getModelFileData(sys.cwdPath, modelName);
-  //     const { paths } = getRelatedCnsts(modelFileData.constantFilePath);
-  //     const names = { model: modelName, Model: capitalize(modelName), LightModel: `Light${capitalize(modelName)}` };
-  //     const prompt = `
-  // 너는 React, Typescript, TailwindCSS를 기반으로 코딩하는 프론트엔드 개발자야.
-  // ${names.Model}이라는 도메인에 대해서 ${names.LightModel} 스키마를 대상으로 react component를 디자인하려고 해. 아래는 현재 보일러플레이트 형태의 컴포넌트야.
-  // \`\`\`
-  // ${modelFileData.unitFileStr}
-  // \`\`\`
-  // ${names.LightModel}은 다음과 같이 ${names.Model} 스키마에서 일부 필드를 추출해서 lightweight fetch된 형태로 설계되어있어.
-  // \`\`\`
-  // ${modelFileData.constantFileStr}
-  // \`\`\`
-  //   아래는 현재 스키마와 연관된 스키마 파일들이야. 스키마 파일들의 코드들을 보고 서로 어떻게 연계 되어있는지 이해하도록 해.
-  // ${
-  //   paths
-  //     ? new Array(paths.size).fill(0).map((_, index) => {
-  //         //순서대로 paths key 추출
-  //         const key = Array.from(paths.keys())[index];
-  //         const filePath = paths.get(key)?.filePath;
-  //         if (!filePath) throw new Error("filePath is undefined");
-  //         return `${key}\n\`\`\`${fs.readFileSync(filePath, "utf8")}\`\`\`\`\n\n`;
-  //       })
-  //     : ""
-  // }
-  // 추가로, 만약에 아이콘 사용이 필요하면 react-icons/bi 라이브러리에서 사용해줘.
-  // 또, 색상을 사용하려고 하면 하드코딩된 색상(bg-red)이 아닌 테마 색상(bg-primary)을 사용해서 작성해줘.
-  // 그리고 optional한 필드는 field && <div>... 가 아닌, field ? <div>... : null 형태로 작성해줘.
-  // css라이브러리는 DaisyUI를 기반으로 작성해주는데, btn, input, badge와 같은 단순한 기본 css는 사용해도 괜찮아. 그런데 card, hero같이 복잡한 컴포넌트는 사용하면 안돼.
-  // 조건부 className이 필요한 경우에는 clsx 라이브러리를 사용해서 작성해야해.
-  // 모델에 대해서 object destructuring은 하지말고 ${modelName}.field 형태로 접근하게 코드를 작성해야해.
-  // ${names.Model}.Unit.Card의 리액트 컴포넌트를 디자인해서 작성해줘.
-  // `;
-  //     try {
-  //       fs.writeFileSync("./local/prompt.txt", prompt);
-  //       const { content } = await streamAi(prompt, (chunk) => {
-  //         process.stdout.write(chunk);
-  //       });
-  //       fs.writeFileSync("./local/result.txt", content);
-  //     } catch (error) {
-  //       // console.error("Application error:", error);
-  //     }
-  //   }
-  // async createView(sys: App | Lib, modelName: string) {
-  //   const modelFileData = getModelFileData(sys.cwdPath, modelName);
-  //   // const modelFileData = getModelFileData(sys.cwdPath, modelName);
-  //   // const { paths } = getRelatedCnsts(modelFileData.constantFilePath);
-  //   // const names = { model: modelName, Model: capitalize(modelName), LightModel: `Light${capitalize(modelName)}` };
-  //   // const prompt = prompt.requestView({
-  //   //   sysName: sys.name,
-  //   //   modelName,
-  //   //   modelDesc: modelFileData.modelDesc,
-  //   //   modelSchemaDesign: modelFileData.modelSchemaDesign,
-  //   //   boilerplate: modelFileData.viewFileStr,
-  //   //   paths,
-  //   // });
-  // }
 };
 
 // pkgs/@akanjs/cli/src/module/module.script.ts
@@ -6026,6 +5733,7 @@ var ModuleScript = class {
   async removeModule(workspace, name) {
   }
   async createScalar(sys2, name, description, schemaDescription) {
+    await AiSession.init();
     await AiSession.init();
     const scalarConstantExampleFiles = await sys2.workspace.getScalarConstantFiles();
     const { constant, dictionary } = await this.#runner.createScalarTemplate(sys2, name);
@@ -6046,7 +5754,45 @@ var ModuleScript = class {
   }
   async createTest(workspace, name) {
   }
+  async createTemplate(sys2) {
+    await AiSession.init();
+    const libs = await sys2.getModules();
+    const lib = await (0, import_prompts8.select)({
+      message: "Select the lib",
+      choices: libs
+    }).catch((e) => {
+      Logger.error("canceled");
+      return null;
+    });
+    if (!lib)
+      return;
+    const name = lib.split("/").pop();
+    if (!name)
+      return;
+    const { component: template } = await this.#runner.createComponentTemplate(sys2, name, "template");
+    const templateExampleFiles = (await sys2.getTemplatesSourceCode()).filter(
+      (f) => !f.filepath.includes(`${name}.Template.tsx`)
+    );
+    const Name = capitalize(name);
+    const relatedCnsts = getRelatedCnsts(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`);
+    const constant = import_fs10.default.readFileSync(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`, "utf-8");
+    const session = new AiSession();
+    const promptRst = requestTemplate({
+      sysName: sys2.name,
+      modelName: name,
+      ModelName: Name,
+      constant,
+      boilerplate: template.content,
+      properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
+      exampleFiles: randomPicks(templateExampleFiles, Math.min(20, templateExampleFiles.length))
+    });
+    const content = await session.editTypescript(promptRst);
+    import_fs10.default.writeFileSync(`${sys2.cwdPath}/promptTemplate.txt`, promptRst);
+    import_fs10.default.writeFileSync(`${sys2.cwdPath}/resultTemplate.txt`, content);
+    sys2.writeFile(`lib/${name}__/${Name}.Template.tsx`, content);
+  }
   async createUnit(sys2) {
+    await AiSession.init();
     const libs = await sys2.getModules();
     const lib = await (0, import_prompts8.select)({
       message: "Select the lib",
@@ -6060,6 +5806,7 @@ var ModuleScript = class {
     const name = lib.split("/").pop();
     if (!name)
       return;
+    const { component: unit } = await this.#runner.createComponentTemplate(sys2, name, "unit");
     const Name = capitalize(name);
     const unitExampleFiles = (await sys2.getUnitsSourceCode()).filter((f) => !f.filepath.includes(`${name}.Unit.tsx`));
     const relatedCnsts = getRelatedCnsts(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`);
@@ -6071,13 +5818,16 @@ var ModuleScript = class {
       ModelName: Name,
       constant,
       properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
-      exampleFiles: randomPicks(unitExampleFiles, Math.min(10, unitExampleFiles.length))
+      exampleFiles: randomPicks(unitExampleFiles, Math.min(10, unitExampleFiles.length)),
+      boilerplate: unit.content
     });
     const content = await session.editTypescript(promptRst);
     import_fs10.default.writeFileSync(`${sys2.cwdPath}/promptUnit.txt`, promptRst);
     import_fs10.default.writeFileSync(`${sys2.cwdPath}/resultUnit.txt`, content);
+    sys2.writeFile(`lib/${name}__/${Name}.Unit.tsx`, content);
   }
   async createView(sys2) {
+    await AiSession.init();
     const libs = await sys2.getModules();
     const lib = await (0, import_prompts8.select)({
       message: "Select the lib",
@@ -6091,6 +5841,7 @@ var ModuleScript = class {
     const name = lib.split("/").pop();
     if (!name)
       return;
+    const { component: view } = await this.#runner.createComponentTemplate(sys2, name, "view");
     const viewExampleFiles = (await sys2.getViewsSourceCode()).filter((f) => !f.filepath.includes(`${name}.View.tsx`));
     const Name = capitalize(name);
     const relatedCnsts = getRelatedCnsts(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`);
@@ -6101,12 +5852,14 @@ var ModuleScript = class {
       modelName: name,
       ModelName: Name,
       constant,
+      boilerplate: view.content,
       properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
       exampleFiles: randomPicks(viewExampleFiles, Math.min(20, viewExampleFiles.length))
     });
     const content = await session.editTypescript(promptRst);
     import_fs10.default.writeFileSync(`${sys2.cwdPath}/prompt.txt`, promptRst);
     import_fs10.default.writeFileSync(`${sys2.cwdPath}/result.txt`, content);
+    sys2.writeFile(`lib/${name}__/${Name}.View.tsx`, content);
   }
 };
 
@@ -6114,14 +5867,14 @@ var ModuleScript = class {
 var ModuleCommand = class {
   moduleScript = new ModuleScript();
   async createModule(sys2, name, workspace) {
-    await this.moduleScript.createModuleTemplate(sys2, name);
+    await this.moduleScript.createModuleTemplate(sys2, lowerlize(name));
   }
   async removeModule(name, workspace) {
   }
   async scanModule(name, workspace) {
   }
   async createScalar(sys2, name, description, schemaDescription, workspace) {
-    await this.moduleScript.createScalar(sys2, name, description, schemaDescription);
+    await this.moduleScript.createScalar(sys2, lowerlize(name), description, schemaDescription);
   }
   async createService(name, workspace) {
   }
@@ -6133,6 +5886,9 @@ var ModuleCommand = class {
   async createUnit(sys2, workspace) {
     await this.moduleScript.createUnit(sys2);
   }
+  async createTemplate(sys2, workspace) {
+    await this.moduleScript.createTemplate(sys2);
+  }
 };
 __decorateClass([
   Target.Public(),
@@ -6178,6 +5934,11 @@ __decorateClass([
   __decorateParam(0, Sys()),
   __decorateParam(1, Workspace())
 ], ModuleCommand.prototype, "createUnit", 1);
+__decorateClass([
+  Target.Public(),
+  __decorateParam(0, Sys()),
+  __decorateParam(1, Workspace())
+], ModuleCommand.prototype, "createTemplate", 1);
 ModuleCommand = __decorateClass([
   Commands()
 ], ModuleCommand);
@@ -6189,7 +5950,7 @@ var PackageCommand = class {
     await this.packageScript.version(workspace);
   }
   async createPackage(name, workspace) {
-    await this.packageScript.createPackage(workspace, name);
+    await this.packageScript.createPackage(workspace, name.toLowerCase().replace(/ /g, "-"));
   }
   async removePackage(pkg) {
     await this.packageScript.removePackage(pkg);
@@ -6399,7 +6160,7 @@ var WorkspaceScript = class {
 var WorkspaceCommand = class {
   workspaceScript = new WorkspaceScript();
   async createWorkspace(name, app, dir) {
-    await this.workspaceScript.createWorkspace(name, app, dir);
+    await this.workspaceScript.createWorkspace(name, app.toLowerCase().replace(/ /g, "-"), dir);
   }
   async generateMongo(workspace) {
     await this.workspaceScript.generateMongo(workspace);
@@ -6454,5 +6215,5 @@ void runCommands(
 //! 2. csr폴더를 현 위치로 복사 후 압축 후 삭제
 //! execSync를 가져오기 싫으니 일단 2번 방법으로 해보자
 //! add path in tsconfig.json
-//! 파일을 {name}.Unit.tsx에 저장.
 //! 파일을 {name}.View.tsx에 저장.
+//! 파일을 {name}.Unit.tsx에 저장.