@aigne/doc-smith 0.8.5 → 0.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/.aigne/doc-smith/output/structure-plan.json +1 -5
  2. package/CHANGELOG.md +25 -0
  3. package/README.md +3 -3
  4. package/agents/{chat.yaml → chat/index.yaml} +7 -7
  5. package/agents/generate/check-document-structure.yaml +30 -0
  6. package/agents/{check-structure-plan.mjs → generate/check-need-generate-structure.mjs} +21 -21
  7. package/agents/generate/generate-structure.yaml +58 -0
  8. package/agents/{docs-generator.yaml → generate/index.yaml} +15 -16
  9. package/agents/generate/refine-document-structure.yaml +12 -0
  10. package/agents/{input-generator.mjs → init/index.mjs} +34 -27
  11. package/agents/{manage-prefs.mjs → prefs/index.mjs} +16 -16
  12. package/agents/publish/index.yaml +17 -0
  13. package/agents/{publish-docs.mjs → publish/publish-docs.mjs} +15 -16
  14. package/agents/schema/{structure-plan-result.yaml → document-execution-structure.yaml} +3 -3
  15. package/agents/schema/document-structure.yaml +26 -0
  16. package/agents/{language-selector.mjs → translate/choose-language.mjs} +5 -5
  17. package/agents/{retranslate.yaml → translate/index.yaml} +17 -18
  18. package/agents/translate/translate-document.yaml +32 -0
  19. package/agents/{batch-translate.yaml → translate/translate-multilingual.yaml} +5 -5
  20. package/agents/update/batch-generate-document.yaml +19 -0
  21. package/agents/{check-detail.mjs → update/check-document.mjs} +16 -16
  22. package/agents/{detail-generator-and-translate.yaml → update/generate-and-translate-document.yaml} +23 -23
  23. package/agents/update/generate-document.yaml +50 -0
  24. package/agents/{detail-regenerator.yaml → update/index.yaml} +16 -17
  25. package/agents/{action-success.mjs → utils/action-success.mjs} +2 -2
  26. package/agents/{check-detail-result.mjs → utils/check-detail-result.mjs} +3 -3
  27. package/agents/{check-feedback-refiner.mjs → utils/check-feedback-refiner.mjs} +6 -6
  28. package/agents/{find-items-by-paths.mjs → utils/choose-docs.mjs} +25 -10
  29. package/agents/{docs-fs.yaml → utils/docs-fs-actor.yaml} +3 -1
  30. package/agents/utils/feedback-refiner.yaml +50 -0
  31. package/agents/{find-item-by-path.mjs → utils/find-item-by-path.mjs} +17 -7
  32. package/agents/{find-user-preferences-by-path.mjs → utils/find-user-preferences-by-path.mjs} +1 -1
  33. package/agents/utils/format-document-structure.mjs +25 -0
  34. package/agents/{load-sources.mjs → utils/load-sources.mjs} +41 -28
  35. package/agents/{save-docs.mjs → utils/save-docs.mjs} +16 -16
  36. package/agents/{save-single-doc.mjs → utils/save-single-doc.mjs} +2 -2
  37. package/agents/{transform-detail-datasources.mjs → utils/transform-detail-datasources.mjs} +1 -1
  38. package/aigne.yaml +35 -35
  39. package/docs/cli-reference.md +1 -1
  40. package/docs/features-generate-documentation.md +1 -1
  41. package/docs/features-update-and-refine.md +2 -2
  42. package/docs-mcp/analyze-docs-relevance.yaml +10 -10
  43. package/docs-mcp/docs-search.yaml +5 -3
  44. package/package.json +10 -8
  45. package/prompts/{document → detail/custom}/custom-code-block.md +6 -6
  46. package/prompts/detail/custom/custom-components.md +172 -0
  47. package/prompts/{document → detail}/d2-chart/rules.md +95 -1
  48. package/prompts/{document → detail}/detail-example.md +80 -61
  49. package/prompts/{document/detail-generator.md → detail/document-rules.md} +4 -8
  50. package/prompts/{content-detail-generator.md → detail/generate-document.md} +48 -25
  51. package/prompts/{check-structure-planning-result.md → structure/check-document-structure.md} +23 -17
  52. package/prompts/{document/structure-planning.md → structure/document-rules.md} +0 -2
  53. package/prompts/{structure-planning.md → structure/generate-structure.md} +51 -30
  54. package/prompts/{document → structure}/structure-example.md +2 -2
  55. package/prompts/{document → structure}/structure-getting-started.md +2 -2
  56. package/prompts/translate/glossary.md +6 -0
  57. package/prompts/{translator.md → translate/translate-document.md} +29 -10
  58. package/prompts/{feedback-refiner.md → utils/feedback-refiner.md} +8 -8
  59. package/tests/agents/chat/chat.test.mjs +46 -0
  60. package/tests/agents/generate/check-document-structure.test.mjs +51 -0
  61. package/tests/agents/generate/check-need-generate-structure.test.mjs +292 -0
  62. package/tests/agents/generate/generate-structure.test.mjs +51 -0
  63. package/tests/{input-generator.test.mjs → agents/init/init.test.mjs} +19 -17
  64. package/tests/agents/prefs/prefs.test.mjs +431 -0
  65. package/tests/agents/publish/publish-docs.test.mjs +642 -0
  66. package/tests/agents/translate/choose-language.test.mjs +311 -0
  67. package/tests/agents/translate/translate-document.test.mjs +51 -0
  68. package/tests/agents/update/check-document.test.mjs +523 -0
  69. package/tests/agents/update/generate-document.test.mjs +51 -0
  70. package/tests/agents/utils/action-success.test.mjs +54 -0
  71. package/tests/{check-detail-result.test.mjs → agents/utils/check-detail-result.test.mjs} +98 -98
  72. package/tests/agents/utils/check-feedback-refiner.test.mjs +478 -0
  73. package/tests/agents/utils/choose-docs.test.mjs +417 -0
  74. package/tests/agents/utils/exit.test.mjs +70 -0
  75. package/tests/agents/utils/feedback-refiner.test.mjs +51 -0
  76. package/tests/agents/utils/find-item-by-path.test.mjs +526 -0
  77. package/tests/agents/utils/find-user-preferences-by-path.test.mjs +382 -0
  78. package/tests/agents/utils/format-document-structure.test.mjs +264 -0
  79. package/tests/agents/utils/fs.test.mjs +267 -0
  80. package/tests/{load-sources.test.mjs → agents/utils/load-sources.test.mjs} +153 -25
  81. package/tests/{save-docs.test.mjs → agents/utils/save-docs.test.mjs} +11 -5
  82. package/tests/agents/utils/save-output.test.mjs +315 -0
  83. package/tests/agents/utils/save-single-doc.test.mjs +364 -0
  84. package/tests/agents/utils/transform-detail-datasources.test.mjs +363 -0
  85. package/tests/utils/auth-utils.test.mjs +358 -0
  86. package/tests/utils/blocklet.test.mjs +334 -0
  87. package/tests/{conflict-resolution.test.mjs → utils/conflict-detector.test.mjs} +3 -3
  88. package/tests/utils/constants.test.mjs +295 -0
  89. package/tests/utils/d2-utils.test.mjs +423 -0
  90. package/tests/utils/deploy.test.mjs +365 -0
  91. package/tests/utils/docs-finder-utils.test.mjs +625 -0
  92. package/tests/utils/file-utils.test.mjs +213 -0
  93. package/tests/{kroki-utils.test.mjs → utils/kroki-utils.test.mjs} +2 -2
  94. package/tests/utils/load-config.test.mjs +141 -0
  95. package/tests/{mermaid-validation.test.mjs → utils/mermaid-validator.test.mjs} +2 -2
  96. package/tests/utils/mock-chat-model.mjs +12 -0
  97. package/tests/{preferences-utils.test.mjs → utils/preferences-utils.test.mjs} +1 -1
  98. package/tests/{save-value-to-config.test.mjs → utils/save-value-to-config.test.mjs} +61 -4
  99. package/tests/utils/utils.test.mjs +939 -0
  100. package/utils/auth-utils.mjs +1 -1
  101. package/utils/conflict-detector.mjs +1 -1
  102. package/utils/constants.mjs +5 -3
  103. package/utils/d2-utils.mjs +194 -0
  104. package/utils/deploy.mjs +3 -3
  105. package/utils/docs-finder-utils.mjs +26 -26
  106. package/utils/icon-map.mjs +26 -0
  107. package/{agents → utils}/load-config.mjs +2 -18
  108. package/utils/markdown-checker.mjs +5 -5
  109. package/agents/batch-docs-detail-generator.yaml +0 -19
  110. package/agents/check-structure-planning-result.yaml +0 -30
  111. package/agents/content-detail-generator.yaml +0 -50
  112. package/agents/feedback-refiner.yaml +0 -52
  113. package/agents/format-structure-plan.mjs +0 -25
  114. package/agents/reflective-structure-planner.yaml +0 -12
  115. package/agents/schema/structure-plan.yaml +0 -26
  116. package/agents/structure-planning.yaml +0 -58
  117. package/agents/team-publish-docs.yaml +0 -18
  118. package/agents/translate.yaml +0 -31
  119. package/prompts/document/custom-components.md +0 -104
  120. package/tests/README.md +0 -93
  121. package/tests/utils.test.mjs +0 -2067
  122. /package/agents/{exit.mjs → utils/exit.mjs} +0 -0
  123. /package/agents/{fs.mjs → utils/fs.mjs} +0 -0
  124. /package/agents/{save-output.mjs → utils/save-output.mjs} +0 -0
  125. /package/prompts/{document → detail}/d2-chart/official-examples.md +0 -0
  126. /package/prompts/{document → detail}/jsx/rules.md +0 -0
package/aigne.yaml CHANGED
@@ -6,49 +6,49 @@ chat_model:
6
6
  # name: gemini-2.5-flash
7
7
  temperature: 0.8
8
8
  agents:
9
- - ./agents/structure-planning.yaml
10
- - ./agents/batch-docs-detail-generator.yaml
11
- - ./agents/load-sources.mjs
12
- - ./agents/save-docs.mjs
13
- - ./agents/translate.yaml
14
- - ./agents/detail-generator-and-translate.yaml
15
- - ./agents/check-detail.mjs
16
- - ./agents/transform-detail-datasources.mjs
17
- - ./agents/batch-translate.yaml
18
- - ./agents/save-single-doc.mjs
19
- - ./agents/save-output.mjs
20
- - ./agents/check-structure-plan.mjs
21
- - ./agents/content-detail-generator.yaml
22
- - ./agents/reflective-structure-planner.yaml
23
- - ./agents/check-structure-planning-result.yaml
24
- - ./agents/input-generator.mjs
25
- - ./agents/docs-generator.yaml
26
- - ./agents/detail-regenerator.yaml
27
- - ./agents/publish-docs.mjs
28
- - ./agents/format-structure-plan.mjs
29
- - ./agents/load-config.mjs
30
- - ./agents/team-publish-docs.yaml
31
- - ./agents/find-item-by-path.mjs
32
- - ./agents/retranslate.yaml
33
- - ./agents/language-selector.mjs
9
+ - ./agents/generate/generate-structure.yaml
10
+ - ./agents/update/batch-generate-document.yaml
11
+ - ./agents/utils/load-sources.mjs
12
+ - ./agents/utils/save-docs.mjs
13
+ - ./agents/translate/translate-document.yaml
14
+ - ./agents/update/generate-and-translate-document.yaml
15
+ - ./agents/update/check-document.mjs
16
+ - ./agents/utils/transform-detail-datasources.mjs
17
+ - ./agents/translate/translate-multilingual.yaml
18
+ - ./agents/utils/save-single-doc.mjs
19
+ - ./agents/utils/save-output.mjs
20
+ - ./agents/generate/check-need-generate-structure.mjs
21
+ - ./agents/update/generate-document.yaml
22
+ - ./agents/generate/refine-document-structure.yaml
23
+ - ./agents/generate/check-document-structure.yaml
24
+ - ./agents/init/index.mjs
25
+ - ./agents/generate/index.yaml
26
+ - ./agents/update/index.yaml
27
+ - ./agents/publish/publish-docs.mjs
28
+ - ./agents/utils/format-document-structure.mjs
29
+ - ./agents/publish/index.yaml
30
+ - ./agents/utils/find-item-by-path.mjs
31
+ - ./agents/translate/index.yaml
32
+ - ./agents/translate/choose-language.mjs
34
33
  - ./docs-mcp/get-docs-structure.mjs
35
34
  - ./docs-mcp/get-docs-detail.mjs
36
35
  - ./docs-mcp/docs-search.yaml
37
36
  - ./docs-mcp/analyze-docs-relevance.yaml
38
37
  - ./docs-mcp/read-doc-content.mjs
39
38
  - ./docs-mcp/analyze-content-relevance.yaml
40
- - ./agents/check-feedback-refiner.mjs
41
- - ./agents/feedback-refiner.yaml
42
- - ./agents/manage-prefs.mjs
39
+ - ./agents/utils/check-feedback-refiner.mjs
40
+ - ./agents/utils/feedback-refiner.yaml
41
+ - ./agents/prefs/index.mjs
42
+ - ./agents/chat/index.yaml
43
43
  cli:
44
- chat: ./agents/chat.yaml
44
+ chat: ./agents/chat/index.yaml
45
45
  agents:
46
- - ./agents/input-generator.mjs
47
- - ./agents/docs-generator.yaml
48
- - ./agents/detail-regenerator.yaml
49
- - ./agents/team-publish-docs.yaml
50
- - ./agents/retranslate.yaml
51
- - ./agents/manage-prefs.mjs
46
+ - ./agents/init/index.mjs
47
+ - ./agents/generate/index.yaml
48
+ - ./agents/update/index.yaml
49
+ - ./agents/publish/index.yaml
50
+ - ./agents/translate/index.yaml
51
+ - ./agents/prefs/index.mjs
52
52
  mcp_server:
53
53
  agents:
54
54
  - ./docs-mcp/get-docs-structure.mjs
@@ -89,7 +89,7 @@ Analyzes your source code and generates a complete set of documentation based on
89
89
 
90
90
  | Option | Type | Description |
91
91
  |---|---|---|
92
- | `--feedback` | string | Provides feedback to adjust and refine the overall document structure plan. |
92
+ | `--feedback` | string | Provides feedback to adjust and refine the overall documentation structure. |
93
93
  | `--forceRegenerate` | boolean | Discards existing content and regenerates all documentation from scratch. |
94
94
  | `--model` | string | Specifies a particular LLM to use for generation (e.g., `openai:gpt-4o`). Overrides the default model. |
95
95
  | `--glossary` | string | Path to a glossary file for consistent terminology. Use the format `@path/to/glossary.md`. |
@@ -90,7 +90,7 @@ While the default `generate` command is sufficient for most use cases, you can u
90
90
  | Option | Description | Example |
91
91
  |---------------------|------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
92
92
  | `--forceRegenerate` | Deletes all existing documents and regenerates them from scratch. Use this after making significant changes to your source code or configuration. | `aigne doc generate --forceRegenerate` |
93
- | `--feedback` | Provides high-level feedback to refine the overall document structure plan, such as adding, removing, or reorganizing sections. | `aigne doc generate --feedback "Add an API Reference section"` |
93
+ | `--feedback` | Provides high-level feedback to refine the overall documentation structure, such as adding, removing, or reorganizing sections. | `aigne doc generate --feedback "Add an API Reference section"` |
94
94
  | `--model` | Specifies a particular Large Language Model from AIGNE Hub to use for content generation, allowing you to switch between models. | `aigne doc generate --model claude:claude-3-5-sonnet` |
95
95
 
96
96
  ## What's Next?
@@ -123,12 +123,12 @@ Key parameters for the `update` command:
123
123
 
124
124
  ## Optimizing the Overall Structure
125
125
 
126
- Beyond refining the content of individual documents, you can also adjust the overall documentation structure. If a section is missing or the existing organization could be improved, you can provide feedback to the structure planning agent using the `generate` command with the `--feedback` flag.
126
+ Beyond refining the content of individual documents, you can also adjust the overall documentation structure. If a section is missing or the existing organization could be improved, you can provide feedback to improve the documentation structure using the `generate` command with the `--feedback` flag.
127
127
 
128
128
  This command instructs DocSmith to reconsider the entire document plan based on your new input.
129
129
 
130
130
  ```bash
131
- # Regenerate the structure plan with specific feedback
131
+ # Regenerate the documentation structure with specific feedback
132
132
  aigne doc generate --feedback "Remove the 'About' section and add a more detailed 'API Reference'."
133
133
  ```
134
134
 
@@ -1,19 +1,19 @@
1
1
  name: analyze-docs-relevance
2
- description: Analyze which documents in the structure plan are relevant to the user query
2
+ description: Analyze which documents in the document structure are relevant to the user query
3
3
  instructions: |
4
- You are an AI assistant that analyzes the relevance between a user query and documents in a structure plan.
4
+ You are an AI assistant that analyzes the relevance between a user query and documents in a document structure.
5
5
 
6
- <structure-plan>
7
- {{ originalStructurePlan }}
8
- </structure-plan>
6
+ <document_structure>
7
+ {{ originalDocumentStructure }}
8
+ </document_structure>
9
9
 
10
10
  <user-query>
11
11
  {{ query }}
12
12
  </user-query>
13
13
 
14
- Given a user query and a structure plan containing multiple documents, your task is to:
14
+ Given a user query and a document structure containing multiple documents, your task is to:
15
15
  1. Understand the user's search intent from the query
16
- 2. Analyze each document in the structure plan to determine relevance
16
+ 2. Analyze each document in the document structure to determine relevance
17
17
  3. Return a list of relevant documents with their paths, titles, and descriptions
18
18
 
19
19
  Consider the following factors for relevance:
@@ -33,7 +33,7 @@ input_schema:
33
33
  query:
34
34
  type: string
35
35
  description: User search query
36
- originalStructurePlan:
36
+ originalDocumentStructure:
37
37
  type: array
38
38
  items:
39
39
  type: object
@@ -44,7 +44,7 @@ input_schema:
44
44
  type: string
45
45
  description:
46
46
  type: string
47
- description: Structure plan containing all available documents
47
+ description: Document structure containing all available documents
48
48
  output_schema:
49
49
  type: object
50
50
  properties:
@@ -52,7 +52,7 @@ output_schema:
52
52
  type: array
53
53
  items:
54
54
  type: string
55
- description: Must be selected from paths in the structure plan, cannot be other paths
55
+ description: Must be selected from paths in the document structure, cannot be other paths
56
56
  description: List of relevant documents
57
57
  reasoning:
58
58
  type: string
@@ -2,8 +2,10 @@ type: team
2
2
  name: docs-search
3
3
  description: Search relevant documents based on user query
4
4
  skills:
5
- - ../agents/load-config.mjs
6
- - ../agents/load-sources.mjs
5
+ - url: ../agents/init/index.mjs
6
+ default_input:
7
+ skipIfExists: true
8
+ - ../agents/utils/load-sources.mjs
7
9
  - analyze-docs-relevance.yaml
8
10
  - read-doc-content.mjs
9
11
  - analyze-content-relevance.yaml
@@ -36,5 +38,5 @@ output_schema:
36
38
  type: string
37
39
  description:
38
40
  type: string
39
- description: List of relevant documents from structure plan
41
+ description: List of relevant documents from document structure
40
42
  mode: sequential
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aigne/doc-smith",
3
- "version": "0.8.5",
3
+ "version": "0.8.7",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -12,13 +12,14 @@
12
12
  "author": "Arcblock <blocklet@arcblock.io> https://github.com/blocklet",
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@aigne/aigne-hub": "^0.8.10",
16
- "@aigne/anthropic": "^0.12.3",
17
- "@aigne/cli": "^1.44.3",
18
- "@aigne/core": "^1.58.3",
19
- "@aigne/gemini": "^0.12.3",
20
- "@aigne/openai": "^0.14.3",
21
- "@aigne/publish-docs": "^0.9.6",
15
+ "@aigne/aigne-hub": "^0.9.3",
16
+ "@aigne/anthropic": "^0.13.3",
17
+ "@aigne/cli": "^1.46.2",
18
+ "@aigne/core": "^1.60.2",
19
+ "@aigne/gemini": "^0.13.3",
20
+ "@aigne/openai": "^0.15.3",
21
+ "@aigne/publish-docs": "^0.10.0",
22
+ "@terrastruct/d2": "^0.1.33",
22
23
  "chalk": "^5.5.0",
23
24
  "debug": "^4.4.1",
24
25
  "dompurify": "^3.2.6",
@@ -43,6 +44,7 @@
43
44
  },
44
45
  "scripts": {
45
46
  "test": "bun test",
47
+ "test:coverage2": "bun test --coverage",
46
48
  "test:coverage": "bun test --coverage --coverage-reporter=lcov --coverage-reporter=text",
47
49
  "test:watch": "bun test --watch",
48
50
  "lint": "biome check",
@@ -1,4 +1,4 @@
1
- <custom_code_block>
1
+ <enhanced_code_block_rules>
2
2
  ## Enhanced Attributes for Markdown Code Blocks
3
3
 
4
4
  When generating Markdown, you can add enhanced attributes to code blocks to provide richer functionality and better display effects. These attributes allow you to specify **titles**, **icons**, and more for code blocks.
@@ -20,7 +20,7 @@ The following are the available enhanced attributes and their descriptions:
20
20
 
21
21
  ### Examples
22
22
 
23
- <good_example>
23
+ <code_block_good_examples>
24
24
  The following are some examples of Markdown code blocks using enhanced attributes:
25
25
 
26
26
  **Example 1: Code block with title and icon**
@@ -70,9 +70,9 @@ class ShoppingCart {
70
70
  }
71
71
  }
72
72
  ```
73
- </good_example>
73
+ </code_block_good_examples>
74
74
 
75
- <bad_example>
75
+ <code_block_bad_examples>
76
76
  **Example 1**
77
77
 
78
78
  There are two errors in this example:
@@ -97,5 +97,5 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
97
97
  }
98
98
  ```
99
99
 
100
- </bad_example>
101
- </custom_code_block>
100
+ </code_block_bad_examples>
101
+ </enhanced_code_block_rules>
@@ -0,0 +1,172 @@
1
+ <custom_components_usage>
2
+ When generating document details, you can use the following custom components at appropriate locations based on their descriptions and functionality to enhance document presentation:
3
+ - `<x-card>`
4
+ - `<x-cards>`
5
+ - `<x-field>`
6
+
7
+
8
+ ### 1. <x-card> Single Card Component
9
+ Suitable for displaying individual links with a richer and more visually appealing presentation format.
10
+
11
+ Example:
12
+
13
+ ```
14
+ <x-card data-title="Required Title" data-image="Image URL" data-icon="Icon identifier (e.g., lucide:rocket or material-symbols:rocket-outline)" data-href="Navigation link URL" data-horizontal="true/false" data-cta="Button text" >
15
+ Card body content
16
+ </x-card>
17
+ ```
18
+
19
+ Attribute Rules:
20
+
21
+ - data-title (required): Card title.
22
+ - data-icon / data-image (choose one, at least one must be provided):
23
+ - It's recommended to always provide data-icon.
24
+ - Icons should prioritize Lucide (lucide:icon-name). If not available in Lucide, use Iconify (collection:icon-name, e.g., material-symbols:rocket-outline).
25
+ - data-image (optional): Image URL, can coexist with icon.
26
+ - data-href (optional): Navigation link for clicking the card or button.
27
+ - data-horizontal (optional): Whether to use horizontal layout.
28
+ - data-cta (optional): Button text (call to action).
29
+ - Body content:
30
+ - Must be written within <x-card>...</x-card> children.
31
+ - **Markdown format rendering is not supported**
32
+ - **Code block rendering is not supported**
33
+ - Only supports plain text format without styling
34
+
35
+
36
+ ### 2. `<x-field>` Structured Field Component
37
+
38
+ Suitable for displaying API parameters, return values, context data, and any structured data with metadata in a clean, organized format. Supports nested structures for complex data types.
39
+
40
+ Syntax:
41
+
42
+ ```
43
+ <x-field data-name="field_name" data-type="string" data-default="default_value" data-required="true" data-deprecated="false" data-desc="Field description">
44
+ <!-- For complex types, children can only be other x-field elements -->
45
+ <x-field data-name="nested_field" data-type="string" data-desc="Nested field description"></x-field>
46
+ </x-field>
47
+ ```
48
+
49
+ Attribute Rules:
50
+
51
+ - `data-name` (required): The name of the field/parameter
52
+ - `data-type` (required): The data type of the field (e.g., "string", "number", "boolean", "object", "array")
53
+ - `data-default` (optional): Default value for the field
54
+ - `data-required` (optional): Whether the field is required ("true" or "false")
55
+ - `data-deprecated` (optional): Whether the field is deprecated ("true" or "false")
56
+ - `data-desc` (optional): Description of the field (replaces previous body content)
57
+ - Children: For complex types (object, array), children can only be other `<x-field>` elements. For simple types, children can be empty.
58
+
59
+ Nesting Rules:
60
+
61
+ - Maximum nesting depth: 5 levels (to avoid overly complex structures)
62
+ - Children elements must only be `<x-field>` components
63
+ - Use `data-desc` attribute for field descriptions instead of body content
64
+ - **Always use opening/closing tags format**: `<x-field ...></x-field>` for all types
65
+ - For simple types (string, number, boolean), children can be empty: `<x-field ...></x-field>`
66
+ - For complex types (object, array), children contain nested `<x-field>` elements
67
+
68
+ **Usage Rules:**
69
+
70
+ - **Context types must use `<x-field>` instead of tables** for consistent formatting
71
+
72
+ Example:
73
+
74
+ ```
75
+ <!-- Single field -->
76
+ <x-field data-name="user_id" data-type="string" data-default="u0911" data-required="true" data-deprecated="true" data-desc="Unique identifier for the user. Must be a valid UUID v4 format."></x-field>
77
+
78
+ <!-- Multiple related fields (Props, Parameters, Returns, Context) -->
79
+ <x-field data-name="name" data-type="string" data-required="true" data-desc="The name of the product."></x-field>
80
+ <x-field data-name="description" data-type="string" data-required="false" data-desc="An optional description for the product."></x-field>
81
+ <x-field data-name="type" data-type="string" data-required="false" data-desc="The type of product (e.g., 'service', 'good')."></x-field>
82
+
83
+ <!-- Complex nested object -->
84
+ <x-field data-name="session" data-type="object" data-required="true" data-desc="User session information containing authentication and permission data">
85
+ <x-field data-name="auth" data-type="object" data-required="true" data-desc="User authentication information">
86
+ <x-field data-name="token" data-type="object" data-required="true" data-desc="Access token information">
87
+ <x-field data-name="access_token" data-type="string" data-required="true" data-default="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." data-desc="JWT access token for API authentication"></x-field>
88
+ <x-field data-name="refresh_token" data-type="string" data-required="false" data-default="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." data-desc="Refresh token for obtaining new access tokens"></x-field>
89
+ <x-field data-name="expires_at" data-type="number" data-required="true" data-default="1704067200" data-desc="Token expiration timestamp (Unix timestamp)"></x-field>
90
+ </x-field>
91
+ <x-field data-name="user" data-type="object" data-required="true" data-desc="User basic information">
92
+ <x-field data-name="profile" data-type="object" data-required="true" data-desc="User profile information">
93
+ <x-field data-name="name" data-type="string" data-required="true" data-default="John Doe" data-desc="User name"></x-field>
94
+ <x-field data-name="email" data-type="string" data-required="true" data-default="john.doe@example.com" data-desc="User email address"></x-field>
95
+ <x-field data-name="avatar" data-type="string" data-required="false" data-default="https://example.com/avatars/john-doe.jpg" data-desc="User avatar URL"></x-field>
96
+ </x-field>
97
+ <x-field data-name="permissions" data-type="array" data-required="true" data-default='["read", "write", "admin"]' data-desc="User permissions list"></x-field>
98
+ </x-field>
99
+ </x-field>
100
+ </x-field>
101
+ ```
102
+
103
+ ### 3. `<x-cards>` Card List Component
104
+
105
+ Suitable for displaying multiple links using a card list format, providing a richer and more visually appealing presentation.
106
+
107
+ Syntax:
108
+
109
+ ```
110
+ <x-cards data-columns="Number of columns">
111
+ <x-card data-title="Title 1" data-icon="lucide:rocket">Content 1</x-card>
112
+ <x-card data-title="Title 2" data-icon="lucide:bolt">Content 2</x-card>
113
+ <x-card data-title="Title 3" data-icon="material-symbols:rocket-outline">Content 3</x-card>
114
+ </x-cards>
115
+ ```
116
+
117
+ Attribute Rules:
118
+ - data-columns (optional): Number of columns, integer (e.g., 2, 3). Default is 2.
119
+ - Must contain multiple <x-card> elements internally.
120
+ - Consistency requirement: All <x-card> elements within the same <x-cards> must maintain visual consistency:
121
+ - Recommended to always provide data-icon for each card.
122
+ - Or all cards should have data-image.
123
+ - Avoid mixing (some with icons, some with only images).
124
+
125
+ <custom_components_good_example>
126
+ Use plain text without any styling
127
+ <x-card data-title="alarm()" data-icon="lucide:alarm-clock"> SIGALRM: Sent when a real-time timer has expired. </x-card>
128
+
129
+ Single card:
130
+ <x-card data-title="Horizontal card" data-icon="lucide:atom" data-horizontal="true">
131
+ This is an example of a horizontal card.
132
+ </x-card>
133
+
134
+ Card list (all using icons, recommended approach):
135
+ <x-cards data-columns="3">
136
+ <x-card data-title="Feature 1" data-icon="lucide:rocket">Description of Feature 1.</x-card>
137
+ <x-card data-title="Feature 2" data-icon="lucide:bolt">Description of Feature 2.</x-card>
138
+ <x-card data-title="Feature 3" data-icon="material-symbols:rocket-outline">Description of Feature 3.</x-card>
139
+ </x-cards>
140
+
141
+ Card list (all using images):
142
+ <x-cards data-columns="2">
143
+ <x-card data-title="Card A" data-image="https://picsum.photos/id/10/300/300">Content A</x-card>
144
+ <x-card data-title="Card B" data-image="https://picsum.photos/id/11/300/300">Content B</x-card>
145
+ </x-cards>
146
+ </custom_components_good_example>
147
+
148
+ <custom_components_bad_example>
149
+
150
+ `x-card` component body does not support markdown formatting inline code block
151
+ <x-card data-title="alarm()" data-icon="lucide:alarm-clock"> `SIGALRM`: Sent when a real-time timer has expired. </x-card>
152
+
153
+
154
+ `x-card` component body does not support code blocks
155
+ <x-card data-title="ctrl_break()" data-icon="lucide:keyboard">
156
+ Creates a listener for "ctrl-break" events.
157
+ ```rust,no_run
158
+ use tokio::signal::windows::ctrl_break;
159
+
160
+ #[tokio::main]
161
+ async fn main() -> std::io::Result<()> {
162
+ let mut stream = ctrl_break()?;
163
+ stream.recv().await;
164
+ println!("got ctrl-break");
165
+ Ok(())
166
+ }
167
+ ```
168
+ </x-card>
169
+
170
+ </custom_components_bad_example>
171
+
172
+ </custom_components_usage>
@@ -613,6 +613,101 @@ Ensure that the shape names used in connections are accurate and match the actua
613
613
  Frontend.Uploader-Component -> Backend.Local-Storage-Middleware: "6. Upload file"
614
614
  ```
615
615
 
616
+ #### Remove redundant connection text
617
+ > If the connection text is redundant with the shape labels, it should be removed to reduce visual clutter.
618
+
619
+ - **Bad Practice:**
620
+ ```d2
621
+ direction: down
622
+
623
+ User: {
624
+ shape: c4-person
625
+ }
626
+
627
+ PaymentProvider-Context: {
628
+ label: "PaymentProvider Context"
629
+ shape: rectangle
630
+ style: {
631
+ stroke: "#888"
632
+ stroke-width: 2
633
+ stroke-dash: 4
634
+ }
635
+
636
+ Entry-Points: {
637
+ label: "High-Level Components"
638
+ shape: rectangle
639
+
640
+ CheckoutTable: {
641
+ label: "CheckoutTable"
642
+ }
643
+
644
+ CheckoutDonate: {
645
+ label: "CheckoutDonate"
646
+ }
647
+ }
648
+
649
+ Core-Processor: {
650
+ label: "Core Payment Processor"
651
+ shape: rectangle
652
+
653
+ CheckoutForm: {
654
+ label: "CheckoutForm"
655
+ }
656
+ }
657
+ }
658
+
659
+ User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "Selects a plan"
660
+ User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "Makes a donation"
661
+ PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm: "Initiates checkout"
662
+ PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm: "Initiates checkout"
663
+ ```
664
+ - **Good Practice:**
665
+ ```d2
666
+ direction: down
667
+
668
+ User: {
669
+ shape: c4-person
670
+ }
671
+
672
+ PaymentProvider-Context: {
673
+ label: "PaymentProvider Context"
674
+ shape: rectangle
675
+ style: {
676
+ stroke: "#888"
677
+ stroke-width: 2
678
+ stroke-dash: 4
679
+ }
680
+
681
+ Entry-Points: {
682
+ label: "High-Level Components"
683
+ shape: rectangle
684
+
685
+ CheckoutTable: {
686
+ label: "CheckoutTable"
687
+ }
688
+
689
+ CheckoutDonate: {
690
+ label: "CheckoutDonate"
691
+ }
692
+ }
693
+
694
+ Core-Processor: {
695
+ label: "Core Payment Processor"
696
+ shape: rectangle
697
+
698
+ CheckoutForm: {
699
+ label: "CheckoutForm"
700
+ }
701
+ }
702
+ }
703
+
704
+ User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "Selects a plan"
705
+ User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "Makes a donation"
706
+ PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm
707
+ PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm
708
+ ```
709
+
710
+
616
711
  #### Remove unnecessary grid-columns
617
712
  - **Bad Practice:**
618
713
  ```d2
@@ -780,7 +875,6 @@ Ensure that the shape names used in connections are accurate and match the actua
780
875
  Payment-API -> App.ResumeSubscription.t1: "10. Return latest subscription"
781
876
  App.ResumeSubscription.t1 -> App.ResumeSubscription: "11. Call onResumed() & close dialog"
782
877
  }
783
-
784
878
  ```
785
879
  - **Good Practice:**
786
880
  ```d2