@akanjs/cli 0.0.146 → 0.0.147

package/esm/index.js

@@ -1238,7 +1238,10 @@ ${errorMessages}`);
     ];
     const errors = diagnostics.filter((diagnostic) => diagnostic.category === ts3.DiagnosticCategory.Error);
     const warnings = diagnostics.filter((diagnostic) => diagnostic.category === ts3.DiagnosticCategory.Warning);
-    return { diagnostics, errors, warnings };
+    const fileDiagnostics = diagnostics.filter((diagnostic) => diagnostic.file?.fileName === filePath);
+    const fileErrors = fileDiagnostics.filter((diagnostic) => diagnostic.category === ts3.DiagnosticCategory.Error);
+    const fileWarnings = fileDiagnostics.filter((diagnostic) => diagnostic.category === ts3.DiagnosticCategory.Warning);
+    return { diagnostics, errors, warnings, fileDiagnostics, fileErrors, fileWarnings };
   }
   /**
    * Format diagnostics for console output
@@ -1665,9 +1668,9 @@ var Executor = class _Executor {
   typeCheck(filePath) {
     const path9 = this.getPath(filePath);
     const typeChecker = this.getTypeChecker();
-    const { diagnostics, errors, warnings } = typeChecker.check(path9);
-    const message = typeChecker.formatDiagnostics(diagnostics);
-    return { diagnostics, errors, warnings, message };
+    const { fileDiagnostics, fileErrors, fileWarnings } = typeChecker.check(path9);
+    const message = typeChecker.formatDiagnostics(fileDiagnostics);
+    return { fileDiagnostics, fileErrors, fileWarnings, message };
   }
   getLinter() {
     this.linter ??= new Linter(this.cwdPath);
@@ -3097,7 +3100,7 @@ ${validate.map((v) => `- ${v}`).join("\n")}`;
         writes.map(async ({ filePath }) => {
           const typeCheckResult = executor.typeCheck(filePath);
           const lintResult = await executor.lint(filePath);
-          const needFix2 = !!typeCheckResult.errors.length || !!lintResult.errors.length;
+          const needFix2 = !!typeCheckResult.fileErrors.length || !!lintResult.errors.length;
           return { filePath, typeCheckResult, lintResult, needFix: needFix2 };
         })
       );
@@ -3131,7 +3134,7 @@ ${fileCheck.lintResult.message}`
     throw new Error("Failed to create scalar");
   }
   #getTypescriptCodes(text) {
-    const codes = text.match(/```typescript([\s\S]*?)```/g);
+    const codes = text.match(/```(typescript|tsx)([\s\S]*?)```/g);
     if (!codes)
       return [];
     const result = codes.map((code) => {
@@ -3239,7 +3242,7 @@ var Builder = class {
 };
 
 // pkgs/@akanjs/devkit/src/prompter.ts
-import { select as select4 } from "@inquirer/prompts";
+import { input as input3, select as select4 } from "@inquirer/prompts";
 import fsPromise2 from "fs/promises";
 var Prompter = class {
   static async selectGuideline() {
@@ -3256,6 +3259,9 @@ var Prompter = class {
     const content = await fsPromise2.readFile(filePath, "utf-8");
     return content;
   }
+  static async getUpdateRequest(guideName) {
+    return await input3({ message: `What do you want to update in ${guideName}?` });
+  }
   async makeTsFileUpdatePrompt({ context: context2, request }) {
     return `You are a senior developer writing TypeScript-based programs using Akan.js, an in-house framework. Here's an overview of the Akan.js framework:
 ${await this.getDocumentation("framework")}
@@ -3417,7 +3423,7 @@ var LibraryScript = class {
 };
 
 // pkgs/@akanjs/cli/src/application/application.runner.ts
-import { confirm as confirm2, input as input3 } from "@inquirer/prompts";
+import { confirm as confirm2, input as input4 } from "@inquirer/prompts";
 import { StringOutputParser } from "@langchain/core/output_parsers";
 import { PromptTemplate as PromptTemplate2 } from "@langchain/core/prompts";
 import { RunnableSequence as RunnableSequence2 } from "@langchain/core/runnables";
@@ -3877,8 +3883,8 @@ var ApplicationRunner = class {
     if (!openAIApiKey)
       throw new Error("OPENAI_API_KEY is not set");
     const chatModel = new ChatOpenAI3({ modelName: "gpt-4o", openAIApiKey });
-    const projectName = await input3({ message: "please enter project name." });
-    const projectDesc = await input3({ message: "please enter project description. (40 ~ 60 characters)" });
+    const projectName = await input4({ message: "please enter project name." });
+    const projectDesc = await input4({ message: "please enter project description. (40 ~ 60 characters)" });
     const spinner = ora3("Gerating project files...");
     const mainPrompt = PromptTemplate2.fromTemplate(`prompt.requestApplication()`);
     const chain = RunnableSequence2.from([mainPrompt, chatModel, new StringOutputParser()]);
@@ -5486,7 +5492,9 @@ var GuidelinePrompt = class extends Prompter {
     });
     const paths = [];
     for await (const path9 of matchingPaths) {
-      if (filterText && !fs16.readFileSync(path9, "utf-8").includes(filterText))
+      const fileContent = fs16.readFileSync(path9, "utf-8");
+      const textFilter = filterText ? new RegExp(filterText) : null;
+      if (filterText && !textFilter?.test(fileContent))
         continue;
       paths.push(path9);
     }
@@ -5539,10 +5547,39 @@ ${guideJson.update.rules.map((rule) => `- ${rule}`).join("\n")}
 
 => Now, you need to write the file content here. Let's go.
 `;
-    return { request, writePath };
+    return { guideJson, request, writePath };
+  }
+  async requestUpdateInstruction(updateRequest) {
+    const guideJson = await Prompter.getGuideJson(this.name);
+    const resultPath = `${__dirname}/src/guidelines/${this.name}/${guideJson.update.filePath}`;
+    const writePath = `${this.workspace.workspaceRoot}/pkgs/@akanjs/cli/src/guidelines/${this.name}/${guideJson.update.filePath}`;
+    const isResultExists = this.workspace.exists(writePath);
+    if (!isResultExists)
+      throw new Error(`${guideJson.update.filePath} file does not exist. Please create it first.`);
+    const existingResult = this.workspace.readFile(resultPath);
+    const request = `
+I am a developer of akanjs framework, a full-stack framework for building web applications.
+I want to update a ${guideJson.update.filePath} file for ${guideJson.description}.
+This file is a programming guideline for Akan.js framwork users.
+
+# ${guideJson.title} Workflow
+- 1. Read already-written ${guideJson.update.filePath} file.
+- 2. Write the updated file content of the ${guideJson.update.filePath} with the update request.
+
+## 1. Read already-written ${guideJson.update.filePath} file.
+\`\`\`markdown
+${existingResult}
+\`\`\`
+
+## 2. Write the updated file content of the ${guideJson.update.filePath} with the update request.
+Request: ${updateRequest}
+
+=> Now, you need to write the file content here. Let's go.
+`;
+    return { guideJson, request, writePath };
   }
-  async requestUpdateDocumentPage(page) {
-    const writePath = `apps/angelo/app/${page}`;
+  async requestCreateDocumentPage(page) {
+    const writePath = `apps/angelo/app${page}`;
     if (!this.workspace.exists(writePath))
       this.workspace.writeFile(
         writePath,
@@ -5584,6 +5621,69 @@ Please return only the file result in the following format for easy parsing.
 // File: ${writePath}
 ...pageContent
 \`\`\`
+`;
+    return { request, writePath };
+  }
+  async requestUpdateDocumentPage(page, updateRequest) {
+    const writePath = `apps/angelo/app${page}`;
+    if (!this.workspace.exists(writePath))
+      this.workspace.writeFile(
+        writePath,
+        `export default function Page() {
+  return <div>No Content</div>;
+}
+`
+      );
+    const instruction = await Prompter.getInstruction(this.name);
+    const pageContent = this.workspace.getLocalFile(writePath);
+    const request = `
+I'm updating a documentation website for the Akan.js framework.
+
+I want to update the Next.js server-side page located at ${writePath}.
+Below is the content of the currently written page. You should update stale infos and preserve the existing content.
+\`\`\`tsx
+// File: ${writePath}
+${pageContent.content}
+\`\`\`
+
+The existing instruction is below.
+\`\`\`markdown
+${instruction}
+\`\`\`
+
+Please update this page with the request below.
+${updateRequest}
+
+Please return only the file result in the following format for easy parsing.
+\`\`\`tsx
+// File: ${writePath}
+...pageContent
+\`\`\`
+`;
+    return { request, writePath };
+  }
+  async requestReapplyInstruction(filePath) {
+    const guideJson = await Prompter.getGuideJson(this.name);
+    const writePath = `${this.workspace.workspaceRoot}/pkgs/@akanjs/cli/src/guidelines/${this.name}/${guideJson.update.filePath}`;
+    if (!guideJson.page)
+      throw new Error(`${this.name} does not have a page.`);
+    const pagePath = `apps/angelo/app${guideJson.page}`;
+    const pageFile = this.workspace.getLocalFile(pagePath);
+    const request = `
+I want to apply information in the Next.js page to markdown instruction file.
+
+Here's the newest information in the Next.js page.
+\`\`\`tsx
+// File: ${pagePath}
+${pageFile.content}
+\`\`\`
+
+Here's the existing instruction file.
+\`\`\`markdown
+${await Prompter.getInstruction(this.name)}
+\`\`\`
+
+Please update the instruction file with the information in the Next.js page.
 `;
     return { request, writePath };
   }
@@ -5594,19 +5694,45 @@ var GuidelineRunner = class {
   async generateInstruction(workspace, guideName) {
     const session = new AiSession("generateInstruction", { workspace, cacheKey: guideName });
     const prompt = new GuidelinePrompt(workspace, guideName);
-    const { request, writePath } = await prompt.requestCreateInstruction();
+    const { guideJson, request, writePath } = await prompt.requestCreateInstruction();
+    const guidelineContent = await session.editMarkdown(request);
+    workspace.writeFile(writePath, guidelineContent);
+    return { guideJson, session };
+  }
+  async updateInstruction(workspace, guideName, { updateRequest }) {
+    const session = new AiSession("updateInstruction", { workspace, cacheKey: guideName });
+    const prompt = new GuidelinePrompt(workspace, guideName);
+    const { guideJson, request, writePath } = await prompt.requestUpdateInstruction(updateRequest);
     const guidelineContent = await session.editMarkdown(request);
     workspace.writeFile(writePath, guidelineContent);
+    return { guideJson, session };
   }
-  async deployDocPage(workspace, guideName) {
+  async generateDocument(workspace, guideName) {
     const session = new AiSession("deployDocPages", { workspace, cacheKey: guideName });
     const guideJson = await Prompter.getGuideJson(guideName);
     const prompt = new GuidelinePrompt(workspace, guideName);
     if (!guideJson.page)
       return Promise.resolve({});
-    const { request } = await prompt.requestUpdateDocumentPage(guideJson.page);
+    const { request } = await prompt.requestCreateDocumentPage(guideJson.page);
     await session.writeTypescripts(request, workspace);
   }
+  async updateDocument(workspace, guideName, { updateRequest, session }) {
+    const guideJson = await Prompter.getGuideJson(guideName);
+    if (!guideJson.page)
+      throw new Error(`${guideName} does not have a page.`);
+    const prompt = new GuidelinePrompt(workspace, guideName);
+    const { request, writePath } = await prompt.requestUpdateDocumentPage(guideJson.page, updateRequest);
+    const guidelineContent = await session.editMarkdown(request);
+    workspace.writeFile(writePath, guidelineContent);
+  }
+  async reapplyInstruction(workspace, guideName) {
+    const session = new AiSession("reapplyInstruction", { workspace, cacheKey: guideName });
+    const guideJson = await Prompter.getGuideJson(guideName);
+    const prompt = new GuidelinePrompt(workspace, guideName);
+    const { request, writePath } = await prompt.requestReapplyInstruction(guideJson.update.filePath);
+    const guidelineContent = await session.editMarkdown(request);
+    workspace.writeFile(writePath, guidelineContent);
+  }
 };
 
 // pkgs/@akanjs/cli/src/guideline/guideline.script.ts
@@ -5616,9 +5742,23 @@ var GuidelineScript = class {
     const guideName = name ?? await Prompter.selectGuideline();
     await this.#runner.generateInstruction(workspace, guideName);
   }
-  async deployDocPage(workspace, name = null) {
+  async updateInstruction(workspace, name = null, updateRequest) {
+    const guideName = name ?? await Prompter.selectGuideline();
+    const { guideJson, session } = await this.#runner.updateInstruction(workspace, guideName, { updateRequest });
+    if (guideJson.page)
+      await this.updateDocument(workspace, guideName, { updateRequest, session });
+  }
+  async generateDocument(workspace, name = null) {
+    const guideName = name ?? await Prompter.selectGuideline();
+    await this.#runner.generateDocument(workspace, guideName);
+  }
+  async updateDocument(workspace, name = null, { updateRequest, session }) {
     const guideName = name ?? await Prompter.selectGuideline();
-    await this.#runner.deployDocPage(workspace, guideName);
+    await this.#runner.updateDocument(workspace, guideName, { updateRequest, session });
+  }
+  async reapplyInstruction(workspace, name = null) {
+    const guideName = name ?? await Prompter.selectGuideline();
+    await this.#runner.reapplyInstruction(workspace, guideName);
   }
 };
 
@@ -5628,8 +5768,14 @@ var GuidelineCommand = class {
   async generateInstruction(name, workspace) {
     await this.guidelineScript.generateInstruction(workspace, name);
   }
-  async deployDoc(name, workspace) {
-    await this.guidelineScript.deployDocPage(workspace, name);
+  async updateInstruction(name, request, workspace) {
+    await this.guidelineScript.updateInstruction(workspace, name, request);
+  }
+  async generateDocument(name, workspace) {
+    await this.guidelineScript.generateDocument(workspace, name);
+  }
+  async reapplyInstruction(name, workspace) {
+    await this.guidelineScript.reapplyInstruction(workspace, name);
   }
 };
 __decorateClass([
@@ -5637,11 +5783,22 @@ __decorateClass([
   __decorateParam(0, Argument("name", { ask: "name of the instruction", nullable: true })),
   __decorateParam(1, Workspace())
 ], GuidelineCommand.prototype, "generateInstruction", 1);
+__decorateClass([
+  Target.Public(),
+  __decorateParam(0, Argument("name", { ask: "name of the instruction", nullable: true })),
+  __decorateParam(1, Option("request", { ask: "What do you want to update?" })),
+  __decorateParam(2, Workspace())
+], GuidelineCommand.prototype, "updateInstruction", 1);
+__decorateClass([
+  Target.Public(),
+  __decorateParam(0, Argument("name", { ask: "name of the instruction", nullable: true })),
+  __decorateParam(1, Workspace())
+], GuidelineCommand.prototype, "generateDocument", 1);
 __decorateClass([
   Target.Public(),
   __decorateParam(0, Argument("name", { ask: "name of the instruction", nullable: true })),
   __decorateParam(1, Workspace())
-], GuidelineCommand.prototype, "deployDoc", 1);
+], GuidelineCommand.prototype, "reapplyInstruction", 1);
 GuidelineCommand = __decorateClass([
   Commands()
 ], GuidelineCommand);
@@ -5650,7 +5807,7 @@ GuidelineCommand = __decorateClass([
 import pluralize2 from "pluralize";
 
 // pkgs/@akanjs/cli/src/scalar/scalar.prompt.ts
-import { input as input4 } from "@inquirer/prompts";
+import { input as input5 } from "@inquirer/prompts";
 var ScalarPrompt = class extends Prompter {
   constructor(sys3, name) {
     super();
@@ -5658,13 +5815,13 @@ var ScalarPrompt = class extends Prompter {
     this.name = name;
   }
   async requestUpdateConstant() {
-    const request = await input4({ message: `What do you want to change?` });
+    const request = await input5({ message: `What do you want to change?` });
     return { request, validate: void 0 };
   }
   async requestCreateConstant() {
     const constantFiles = await this.sys.getConstantFilesWithLibs();
-    const description = await input4({ message: "description of scalar scalar" });
-    const schemaDescription = await input4({ message: "schema description of scalar scalar" });
+    const description = await input5({ message: "description of scalar scalar" });
+    const schemaDescription = await input5({ message: "schema description of scalar scalar" });
     await this.sys.applyTemplate({
       basePath: "./lib/__scalar",
       template: "__scalar",

package/esm/src/guidelines/cssRule/cssRule.instruction.md

@@ -180,7 +180,7 @@ export const Card = ({ className, project, href }: ModelProps<"project", cnst.Li
       className={clsx(
         "border-base-300 bg-base-100 flex flex-col gap-3 rounded-lg border-2 p-4",
         "hover:border-primary transition-all hover:shadow-md",
-        "focus:ring-primary focus:outline-hidden focus:ring-2",
+        "focus:ring-primary focus:ring-2 focus:outline-hidden",
         className
       )}
     >

package/esm/src/guidelines/docPageRule/docPageRule.instruction.md

@@ -3,6 +3,7 @@
 ## Purpose of Documentation Pages in Akan.js
 
 Documentation pages serve as the comprehensive knowledge base for Akan.js framework developers. They:
+
 - Provide clear explanations of framework concepts, architecture, and components
 - Offer technical reference for APIs, modules, and system functionalities
 - Present implementation examples with real-world code snippets
@@ -16,11 +17,13 @@ Documentation pages serve as the comprehensive knowledge base for Akan.js framew
 ### 1. File Location and Structure
 
 Documentation pages should be created in the following location:
+
 ```
 apps/angelo/app/[lang]/akanjs/(docs)/docs/[category]/[pageName]/page.tsx
 ```
 
 Where:
+
 - `[lang]`: Language code (e.g., `en`, `ko`)
 - `[category]`: Main documentation category (e.g., `systemArch`, `module`, `api`)
 - `[pageName]`: Specific page name (e.g., `frontend`, `signal`, `authentication`)
@@ -34,43 +37,43 @@ Each documentation page follows this basic structure:
 
 ```tsx
 import { usePage } from "@angelo/client";
-import { Docs } from "@/ui/Docs";
+import { Docs } from "@angelo/ui";
 
 export default function Page() {
   const { l } = usePage(); // For internationalization
-  
+
   return (
     <>
       <Docs.Title>
         {l.trans({
           en: "Main Page Title",
-          ko: "메인 페이지 제목"
+          ko: "메인 페이지 제목",
         })}
       </Docs.Title>
-      
+
       <Docs.Description>
         {l.trans({
           en: "Introduction paragraph that explains the concept...",
-          ko: "개념을 설명하는 소개 문단..."
+          ko: "개념을 설명하는 소개 문단...",
         })}
       </Docs.Description>
-      
+
       <div className="divider"></div>
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "Section Title",
-          ko: "섹션 제목"
+          ko: "섹션 제목",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.Description>
         {l.trans({
           en: "Detailed explanation of this section...",
-          ko: "이 섹션에 대한 자세한 설명..."
+          ko: "이 섹션에 대한 자세한 설명...",
         })}
       </Docs.Description>
-      
+
       <Docs.CodeSnippet
         language="typescript"
         code={`
@@ -78,7 +81,7 @@ export default function Page() {
 const example = "Hello Akan.js";
 `}
       />
-      
+
       {/* Additional sections and components */}
     </>
   );
@@ -109,10 +112,10 @@ const { l } = usePage();
 <Docs.Title>
   {l.trans({
     en: "English Title",
-    ko: "한국어 제목"
+    ko: "한국어 제목",
     // Add other languages as needed
   })}
-</Docs.Title>
+</Docs.Title>;
 ```
 
 ## Utility Components
@@ -120,8 +123,8 @@ const { l } = usePage();
 The `Docs` namespace provides specialized components for creating consistent documentation pages. Always import and use them with the `Docs` prefix:
 
 ```tsx
-import { Docs } from "@/ui/Docs";
-// Correct usage: <Docs.Title>, NOT import { Title } from "@/ui/Docs";
+import { Docs } from "@angelo/ui";
+// Correct usage: <Docs.Title>, NOT import { Title } from "@angelo/ui";
 ```
 
 ### 1. Title Components
@@ -135,17 +138,16 @@ import { Docs } from "@/ui/Docs";
 ### 2. Content Components
 
 **Description Block:**
+
 ```tsx
 <Docs.Description>
-  Detailed explanatory text that supports:
-  - Markdown-style formatting
-  - Multi-paragraph content
-  - HTML elements
-  - Internationalization via l.trans()
+  Detailed explanatory text that supports: - Markdown-style formatting - Multi-paragraph content - HTML elements -
+  Internationalization via l.trans()
 </Docs.Description>
 ```
 
 **Code Snippet:**
+
 ```tsx
 <Docs.CodeSnippet
   language="typescript" // Supported: typescript, bash, and others
@@ -162,15 +164,16 @@ import { Docs } from "@/ui/Docs";
 ### 3. Table Components
 
 **Option Table:** For displaying configuration options, parameters, or properties
+
 ```tsx
 <Docs.OptionTable
   items={[
     {
-      key: "optionName",     // Option identifier
-      type: "string",        // Data type
+      key: "optionName", // Option identifier
+      type: "string", // Data type
       default: "defaultVal", // Default value
-      desc: "Description",   // Explanation (can use l.trans())
-      example: "example()"   // Usage example
+      desc: "Description", // Explanation (can use l.trans())
+      example: "example()", // Usage example
     },
     // Additional items...
   ]}
@@ -178,14 +181,15 @@ import { Docs } from "@/ui/Docs";
 ```
 
 **Introduction Table:** For listing and describing related items
+
 ```tsx
 <Docs.IntroTable
-  type="conceptName"  // Table category identifier
+  type="conceptName" // Table category identifier
   items={[
     {
-      name: "itemName",    // Item name
+      name: "itemName", // Item name
       desc: "Description", // Explanation (can use l.trans())
-      example: "example()" // Usage example
+      example: "example()", // Usage example
     },
     // Additional items...
   ]}
@@ -195,11 +199,13 @@ import { Docs } from "@/ui/Docs";
 ### 4. Code Display Components
 
 **Inline Code:**
+
 ```tsx
 <Docs.Code language="typescript">inlineCodeExample</Docs.Code>
 ```
 
 **Custom Code Block:**
+
 ```tsx
 <Docs.CodeView>
   <Docs.Code prefix="1">// First line with line number</Docs.Code>
@@ -212,6 +218,7 @@ import { Docs } from "@/ui/Docs";
 The document layout is automatically applied through the parent layout.tsx file, so you don't need to use `<Docs.Layout>` in your page component.
 
 **Header and Footer:**
+
 ```tsx
 <Docs.Header>Header content</Docs.Header>
 <Docs.Footer>Footer content</Docs.Footer>
@@ -264,11 +271,11 @@ The document layout is automatically applied through the parent layout.tsx file,
 
 ```tsx
 import { usePage } from "@angelo/client";
-import { Docs, type IntroItem, type OptionItem } from "@/ui/Docs";
+import { Docs, type IntroItem, type OptionItem } from "@angelo/ui";
 
 export default function SignalDocsPage() {
   const { l } = usePage();
-  
+
   // Define configuration options
   const signalOptions: OptionItem[] = [
     {
@@ -277,22 +284,22 @@ export default function SignalDocsPage() {
       default: "undefined",
       desc: l.trans({
         en: "Initial value of the signal",
-        ko: "시그널의 초기값"
+        ko: "시그널의 초기값",
       }),
-      example: "signal(0)"
+      example: "signal(0)",
     },
     // Additional options...
   ];
-  
+
   // Define feature list
   const signalFeatures: IntroItem[] = [
     {
       name: "createSignal",
       desc: l.trans({
         en: "Creates a new reactive signal",
-        ko: "새로운 반응형 시그널을 생성"
+        ko: "새로운 반응형 시그널을 생성",
       }),
-      example: "const [value, setValue] = createSignal(0)"
+      example: "const [value, setValue] = createSignal(0)",
     },
     // Additional features...
   ];
@@ -302,33 +309,33 @@ export default function SignalDocsPage() {
       <Docs.Title>
         {l.trans({
           en: "Signal Module",
-          ko: "시그널 모듈"
+          ko: "시그널 모듈",
         })}
       </Docs.Title>
-      
+
       <Docs.Description>
         {l.trans({
           en: "The Signal module provides reactive state management capabilities for Akan.js applications. Signals allow components to efficiently respond to state changes without unnecessary re-renders.",
-          ko: "시그널 모듈은 Akan.js 애플리케이션을 위한 반응형 상태 관리 기능을 제공합니다. 시그널을 통해 컴포넌트는 불필요한 재렌더링 없이 상태 변화에 효율적으로 반응할 수 있습니다."
+          ko: "시그널 모듈은 Akan.js 애플리케이션을 위한 반응형 상태 관리 기능을 제공합니다. 시그널을 통해 컴포넌트는 불필요한 재렌더링 없이 상태 변화에 효율적으로 반응할 수 있습니다.",
         })}
       </Docs.Description>
-      
+
       <div className="divider"></div>
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "Basic Usage",
-          ko: "기본 사용법"
+          ko: "기본 사용법",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.Description>
         {l.trans({
           en: "Creating and using signals is straightforward:",
-          ko: "시그널 생성 및 사용은 간단합니다:"
+          ko: "시그널 생성 및 사용은 간단합니다:",
         })}
       </Docs.Description>
-      
+
       <Docs.CodeSnippet
         language="typescript"
         code={`
@@ -347,23 +354,23 @@ function Counter() {
   return <div>{count()}</div>;
 }`}
       />
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "Configuration Options",
-          ko: "설정 옵션"
+          ko: "설정 옵션",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.OptionTable items={signalOptions} />
-      
+
       <Docs.SubTitle>
         {l.trans({
           en: "API Reference",
-          ko: "API 참조"
+          ko: "API 참조",
         })}
       </Docs.SubTitle>
-      
+
       <Docs.IntroTable type="function" items={signalFeatures} />
     </>
   );
@@ -373,10 +380,10 @@ function Counter() {
 ## Troubleshooting
 
 1. **Layout Issues**: Do not manually add `<Docs.Layout>` as it's automatically applied at the layout level
-2. **Component Import**: Always use the namespace import `import { Docs } from "@/ui/Docs"` and reference components as `<Docs.ComponentName>`
+2. **Component Import**: Always use the namespace import `import { Docs } from "@angelo/ui"` and reference components as `<Docs.ComponentName>`
 3. **Translation Issues**: Ensure all user-facing text uses `l.trans()` with complete translations for all supported languages
 4. **Code Highlighting**: Verify the correct language is specified for `<Docs.CodeSnippet>` and `<Docs.Code>` components
 5. **Style Consistency**: If your documentation looks different from others, compare with existing pages to identify styling discrepancies
 6. **Navigation Anchors**: For long pages, include anchor links by adding hidden divs with IDs
 
-For additional assistance, refer to existing documentation pages or contact the framework documentation team.
+For additional assistance, refer to existing documentation pages or contact the framework documentation team.