@blocklet/ui-react 3.2.19 → 3.3.1

package/docs/components-user-management.md

@@ -2,38 +2,13 @@
 
 The User Management suite provides a collection of pre-built React components designed to handle essential user-related functionalities. These components simplify the implementation of user profiles, session management, and organization switching within your application, ensuring a consistent and reliable user experience.
 
-This section provides an overview of the main components available in the suite. For detailed implementation guides and API references, please refer to the specific component documentation linked below.
+This section provides an overview of the main components available in the suite. The following diagram illustrates how a user interacts with the different components of the application:
 
-```d2
-direction: down
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![User Management](assets/diagram/user-management-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
-User: {
-  shape: c4-person
-}
-
-Application: {
-  label: "Blocklet Application"
-  shape: rectangle
-  grid-columns: 1
-  grid-gap: 100
-
-  UserCenter: {
-    label: "UserCenter\n(Profile & Settings)"
-  }
-
-  UserSessions: {
-    label: "UserSessions\n(Login Activity)"
-  }
-
-  OrgsSwitch: {
-    label: "OrgsSwitch\n(Team Context)"
-  }
-}
-
-User -> Application.UserCenter: "Manages profile"
-User -> Application.UserSessions: "Reviews sessions"
-User -> Application.OrgsSwitch: "Switches organization"
-```
+For detailed implementation guides and API references, please refer to the specific component documentation linked below.
 
 ## Core Components
 
@@ -73,4 +48,4 @@ This suite of components provides the necessary building blocks for robust user
 For detailed implementation guides, please proceed to the specific component documentation.
 
 *   **Next:** [UserCenter](./components-user-management-user-center.md)
-*   **See Also:** [UserSessions](./components-user-management-user-sessions.md)
+*   **See Also:** [UserSessions](./components-user-management-user-sessions.md)

package/docs/components-user-management.zh-TW.md

@@ -4,36 +4,9 @@
 
 本節概述了此套件中可用的主要元件。有關詳細的實作指南和 API 參考，請參閱下方連結的特定元件文件。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Application: {
-  label: "Blocklet 應用程式"
-  shape: rectangle
-  grid-columns: 1
-  grid-gap: 100
-
-  UserCenter: {
-    label: "UserCenter\n(個人資料與設定)"
-  }
-
-  UserSessions: {
-    label: "UserSessions\n(登入活動)"
-  }
-
-  OrgsSwitch: {
-    label: "OrgsSwitch\n(團隊情境)"
-  }
-}
-
-User -> Application.UserCenter: "管理個人資料"
-User -> Application.UserSessions: "檢視會話"
-User -> Application.OrgsSwitch: "切換組織"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![User Management](assets/diagram/user-management-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 核心元件
 

package/docs/components-user-management.zh.md

@@ -4,36 +4,9 @@
 
 本节概述了该套件中可用的主要组件。有关详细的实现指南和 API 参考，请参阅下方链接的特定组件文档。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Application: {
-  label: "Blocklet 应用"
-  shape: rectangle
-  grid-columns: 1
-  grid-gap: 100
-
-  UserCenter: {
-    label: "UserCenter\n（个人资料与设置）"
-  }
-
-  UserSessions: {
-    label: "UserSessions\n（登录活动）"
-  }
-
-  OrgsSwitch: {
-    label: "OrgsSwitch\n（团队上下文）"
-  }
-}
-
-User -> Application.UserCenter: "管理个人资料"
-User -> Application.UserSessions: "查看会话"
-User -> Application.OrgsSwitch: "切换组织"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![User Management](assets/diagram/user-management-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 核心组件
 

package/docs/core-concepts.ja.md

@@ -8,39 +8,9 @@
 
 ライブラリの動作は、単純なデータフローとして視覚化できます。blocklet のメタデータがライブラリへの入力として提供され、ライブラリはそれをパイプラインを通じて処理し、完全にレンダリングされた UI コンポーネントを生成します。これにより、開発者がアプリケーションごとに共通のレイアウト要素を手動で構築・設定する必要がなくなります。
 
-```d2
-direction: down
-
-blocklet-metadata: {
-  label: "Blocklet メタデータ\n(blocklet.yml から)"
-  shape: rectangle
-}
-
-blocklet-ui-library: {
-  label: "Blocklet UI ライブラリ\n(データ処理パイプライン)"
-  shape: rectangle
-
-  parse: { label: "1. パースとセクション分割" }
-  localize: { label: "2. ローカライズ (i18n)" }
-  filter: { label: "3. ロールによるフィルタリング" }
-
-  parse -> localize
-  localize -> filter
-}
-
-rendered-components: {
-  label: "自動レンダリングされるコンポーネント"
-  shape: rectangle
-  grid-columns: 3
-
-  Header: {}
-  Footer: {}
-  Dashboard: {}
-}
-
-blocklet-metadata -> blocklet-ui-library: "入力"
-blocklet-ui-library -> rendered-components: "出力"
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9:1765962229 -->
+![Core Concepts](assets/diagram/core-concepts-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 この自動化されたプロセスは、明確に定義されたメタデータ構造に依存しており、それについては次のセクションで詳しく説明します。
 

package/docs/core-concepts.md

@@ -8,39 +8,10 @@ The central idea is that a single configuration file, typically `blocklet.yml`,
 
 The library's operation can be visualized as a simple data flow: the blocklet metadata is provided as input to the library, which then processes it through a pipeline to produce fully rendered UI components. This eliminates the need for developers to manually build and configure common layout elements for each application.
 
-```d2
-direction: down
-
-blocklet-metadata: {
-  label: "Blocklet Metadata\n(from blocklet.yml)"
-  shape: rectangle
-}
-
-blocklet-ui-library: {
-  label: "Blocklet UI Library\n(Data Processing Pipeline)"
-  shape: rectangle
-
-  parse: { label: "1. Parse & Section" }
-  localize: { label: "2. Localize (i18n)" }
-  filter: { label: "3. Filter by Role" }
-
-  parse -> localize
-  localize -> filter
-}
-
-rendered-components: {
-  label: "Automatically Rendered Components"
-  shape: rectangle
-  grid-columns: 3
-
-  Header: {}
-  Footer: {}
-  Dashboard: {}
-}
-
-blocklet-metadata -> blocklet-ui-library: "Input"
-blocklet-ui-library -> rendered-components: "Output"
-```
+The following diagram illustrates this data flow:
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9:1765962229 -->
+![Core Concepts](assets/diagram/core-concepts-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 This automated process relies on a well-defined metadata structure, which is detailed in the following section.
 

package/docs/core-concepts.zh-TW.md

@@ -8,39 +8,9 @@
 
 該函式庫的運作可以視覺化為一個簡單的資料流：blocklet 元數據作為輸入提供給函式庫，函式庫接著透過一個管線對其進行處理，以產生完全渲染的 UI 元件。這免去了開發人員為每個應用程式手動建構和設定通用佈局元素的需要。
 
-```d2
-direction: down
-
-blocklet-metadata: {
-  label: "Blocklet 元數據\n(來自 blocklet.yml)"
-  shape: rectangle
-}
-
-blocklet-ui-library: {
-  label: "Blocklet UI 函式庫\n(資料處理管線)"
-  shape: rectangle
-
-  parse: { label: "1. 解析與分區" }
-  localize: { label: "2. 本地化 (i18n)" }
-  filter: { label: "3. 依角色篩選" }
-
-  parse -> localize
-  localize -> filter
-}
-
-rendered-components: {
-  label: "自動渲染的元件"
-  shape: rectangle
-  grid-columns: 3
-
-  Header: {}
-  Footer: {}
-  Dashboard: {}
-}
-
-blocklet-metadata -> blocklet-ui-library: "輸入"
-blocklet-ui-library -> rendered-components: "輸出"
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9:1765962229 -->
+![Core Concepts](assets/diagram/core-concepts-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 這個自動化過程依賴於一個定義良好的元數據結構，下一節將對此進行詳細說明。
 

package/docs/core-concepts.zh.md

@@ -8,39 +8,9 @@
 
 该库的运作可以看作一个简单的数据流：blocklet 元数据作为输入提供给库，库通过一个管道处理它，最终生成完全渲染的 UI 组件。这免去了开发者为每个应用程序手动构建和配置通用布局元素的需求。
 
-```d2
-direction: down
-
-blocklet-metadata: {
-  label: "Blocklet 元数据\n(来自 blocklet.yml)"
-  shape: rectangle
-}
-
-blocklet-ui-library: {
-  label: "Blocklet UI 库\n(数据处理管道)"
-  shape: rectangle
-
-  parse: { label: "1. 解析与分段" }
-  localize: { label: "2. 本地化 (i18n)" }
-  filter: { label: "3. 按角色过滤" }
-
-  parse -> localize
-  localize -> filter
-}
-
-rendered-components: {
-  label: "自动渲染的组件"
-  shape: rectangle
-  grid-columns: 3
-
-  Header: {}
-  Footer: {}
-  Dashboard: {}
-}
-
-blocklet-metadata -> blocklet-ui-library: "输入"
-blocklet-ui-library -> rendered-components: "输出"
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9:1765962229 -->
+![Core Concepts](assets/diagram/core-concepts-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 这个自动化过程依赖于一个明确定义的元数据结构，下一节将详细介绍。
 

package/docs/overview.ja.md

@@ -14,49 +14,9 @@
 
 このライブラリのアーキテクチャは、シンプルさと自動化を目的として設計されています。`Header`や`Footer`のようなコンポーネントがレンダリングされると、`window.blocklet`オブジェクトから設定データを読み取ります。このオブジェクトは、Blocklet Serverによって`blocklet.yml`ファイルから読み込まれます。これにより、UIの構造とブランディングを中央の設定ファイルで定義でき、コンポーネントはそれに応じて適応します。
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml\n(メタデータソース)"
-  shape: rectangle
-}
-
-blocklet-server: {
-  label: "Blocklet Server"
-  shape: rectangle
-}
-
-window-blocklet: {
-  label: "window.blocklet\n(ランタイム設定)"
-  shape: rectangle
-}
-
-your-app: {
-  label: "あなたのアプリケーション"
-  shape: rectangle
-  
-  Header: {
-    label: "<Header />"
-    shape: rectangle
-  }
-  
-  Footer: {
-    label: "<Footer />"
-    shape: rectangle
-  }
-}
-
-rendered-ui: {
-  label: "レンダリングされたUI"
-  shape: rectangle
-}
-
-blocklet-yml -> blocklet-server: "1. メタデータを定義"
-blocklet-server -> window-blocklet: "2. ランタイムに投入"
-window-blocklet -> your-app: "3. コンポーネントが設定を読み取り"
-your-app -> rendered-ui: "4. 設定されたUIをレンダリング"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 主な機能
 

package/docs/overview.md

@@ -14,49 +14,9 @@ This metadata-driven approach means that elements like your application's name,
 
 The library's architecture is designed for simplicity and automation. When a component like `Header` or `Footer` is rendered, it reads configuration data from the `window.blocklet` object, which is populated by the Blocklet Server from your `blocklet.yml` file. This allows you to define your UI's structure and branding in a central configuration file, and the components adapt accordingly.
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml\n(Metadata Source)"
-  shape: rectangle
-}
-
-blocklet-server: {
-  label: "Blocklet Server"
-  shape: rectangle
-}
-
-window-blocklet: {
-  label: "window.blocklet\n(Runtime Configuration)"
-  shape: rectangle
-}
-
-your-app: {
-  label: "Your Application"
-  shape: rectangle
-  
-  Header: {
-    label: "<Header />"
-    shape: rectangle
-  }
-  
-  Footer: {
-    label: "<Footer />"
-    shape: rectangle
-  }
-}
-
-rendered-ui: {
-  label: "Rendered UI"
-  shape: rectangle
-}
-
-blocklet-yml -> blocklet-server: "1. Defines metadata"
-blocklet-server -> window-blocklet: "2. Populates at runtime"
-window-blocklet -> your-app: "3. Components read config"
-your-app -> rendered-ui: "4. Renders configured UI"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Key Features
 

package/docs/overview.zh-TW.md

@@ -14,49 +14,9 @@
 
 此程式庫的架構設計旨在簡潔與自動化。當 `Header` 或 `Footer` 等元件被渲染時，它會從 `window.blocklet` 物件中讀取設定資料，該物件由 Blocklet Server 從您的 `blocklet.yml` 檔案中填入。這讓您可以在一個中央設定檔中定義 UI 的結構和品牌，而元件會相應地進行調整。
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml\n（元資料來源）"
-  shape: rectangle
-}
-
-blocklet-server: {
-  label: "Blocklet Server"
-  shape: rectangle
-}
-
-window-blocklet: {
-  label: "window.blocklet\n（執行期設定）"
-  shape: rectangle
-}
-
-your-app: {
-  label: "您的應用程式"
-  shape: rectangle
-  
-  Header: {
-    label: "<Header />"
-    shape: rectangle
-  }
-  
-  Footer: {
-    label: "<Footer />"
-    shape: rectangle
-  }
-}
-
-rendered-ui: {
-  label: "渲染後的 UI"
-  shape: rectangle
-}
-
-blocklet-yml -> blocklet-server: "1. 定義元資料"
-blocklet-server -> window-blocklet: "2. 在執行期填入"
-window-blocklet -> your-app: "3. 元件讀取設定"
-your-app -> rendered-ui: "4. 渲染已設定的 UI"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 主要特色
 

package/docs/overview.zh.md

@@ -14,49 +14,9 @@
 
 该库的架构设计旨在实现简洁和自动化。当渲染 `Header` 或 `Footer` 等组件时，它会从 `window.blocklet` 对象中读取配置数据，该对象由 Blocklet Server 从您的 `blocklet.yml` 文件中填充。这使您能够在一个中央配置文件中定义 UI 的结构和品牌，而组件会相应地进行调整。
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml\n（元数据源）"
-  shape: rectangle
-}
-
-blocklet-server: {
-  label: "Blocklet Server"
-  shape: rectangle
-}
-
-window-blocklet: {
-  label: "window.blocklet\n（运行时配置）"
-  shape: rectangle
-}
-
-your-app: {
-  label: "您的应用程序"
-  shape: rectangle
-  
-  Header: {
-    label: "<Header />"
-    shape: rectangle
-  }
-  
-  Footer: {
-    label: "<Footer />"
-    shape: rectangle
-  }
-}
-
-rendered-ui: {
-  label: "渲染后的 UI"
-  shape: rectangle
-}
-
-blocklet-yml -> blocklet-server: "1. 定义元数据"
-blocklet-server -> window-blocklet: "2. 在运行时填充"
-window-blocklet -> your-app: "3. 组件读取配置"
-your-app -> rendered-ui: "4. 渲染配置好的 UI"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 主要特性
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.2.19",
+  "version": "3.3.1",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,13 +33,13 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@abtnode/constant": "^1.17.5",
-    "@abtnode/util": "^1.17.5",
-    "@arcblock/bridge": "3.2.19",
-    "@arcblock/icons": "3.2.19",
-    "@arcblock/react-hooks": "3.2.19",
-    "@arcblock/ws": "^1.27.15",
-    "@blocklet/did-space-react": "^1.2.10",
+    "@abtnode/constant": "^1.17.6",
+    "@abtnode/util": "^1.17.6",
+    "@arcblock/bridge": "3.3.1",
+    "@arcblock/icons": "3.3.1",
+    "@arcblock/react-hooks": "3.3.1",
+    "@arcblock/ws": "^1.27.16",
+    "@blocklet/did-space-react": "^1.2.11",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -82,7 +82,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.2.19",
+    "@arcblock/did-connect-react": "3.3.1",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -96,5 +96,5 @@
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "8439c6a0c022c3fab219191ff035d737c422f3ff"
+  "gitHead": "39aec3e1aef080ae289918120dc12629940a75b4"
 }