@blocklet/ui-react 3.2.18 → 3.3.0

package/docs/components-notifications.md

@@ -8,57 +8,9 @@ The core of the notification system is built around a WebSocket connection, enab
 
 The notification system follows a straightforward, event-driven architecture. When a notable event occurs in the backend, a notification is generated and broadcasted through a WebSocket channel. The frontend client listens on this channel, receives the notification, and updates the UI accordingly.
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Backend: {
-  label: "Blocklet Backend"
-  shape: rectangle
-
-  Event-Trigger: {
-    label: "Event Occurs"
-    shape: oval
-  }
-
-  Notification-Service: {
-    label: "Notification Service"
-  }
-}
-
-WebSocket-Server: {
-  label: "WebSocket Server"
-}
-
-Frontend: {
-  label: "Frontend Application"
-  shape: rectangle
-
-  WebSocket-Client: {
-    label: "WebSocket Client"
-  }
-
-  NotificationAddon: {
-    label: "NotificationAddon"
-  }
-
-  SnackbarProvider: {
-    label: "SnackbarProvider"
-  }
-}
-
-# Defines the flow of the notification process
-Backend.Event-Trigger -> Backend.Notification-Service: "1. Triggers notification"
-Backend.Notification-Service -> WebSocket-Server: "2. Pushes message"
-WebSocket-Server -> Frontend.WebSocket-Client: "3. Broadcasts to client"
-Frontend.WebSocket-Client -> Frontend.NotificationAddon: "4. Forwards message"
-Frontend.NotificationAddon -> Frontend.NotificationAddon: "5a. Updates unread count"
-Frontend.NotificationAddon -> Frontend.SnackbarProvider: "5b. Shows toast notification"
-Frontend.SnackbarProvider -> User: "6. Displays to user"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Notifications](assets/diagram/notifications-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Core Components
 

package/docs/components-notifications.zh-TW.md

@@ -8,58 +8,9 @@
 
 通知系統遵循一個直接的、事件驅動的架構。當後端發生值得注意的事件時，會產生一則通知並透過 WebSocket 通道廣播。前端用戶端會監聽此通道，接收通知，並相應地更新 UI。
 
-```d2
-direction: down
-
-User: {
-  label: "使用者"
-  shape: c4-person
-}
-
-Backend: {
-  label: "Blocklet 後端"
-  shape: rectangle
-
-  Event-Trigger: {
-    label: "事件發生"
-    shape: oval
-  }
-
-  Notification-Service: {
-    label: "通知服務"
-  }
-}
-
-WebSocket-Server: {
-  label: "WebSocket 伺服器"
-}
-
-Frontend: {
-  label: "前端應用程式"
-  shape: rectangle
-
-  WebSocket-Client: {
-    label: "WebSocket 客戶端"
-  }
-
-  NotificationAddon: {
-    label: "NotificationAddon"
-  }
-
-  SnackbarProvider: {
-    label: "SnackbarProvider"
-  }
-}
-
-# 定義通知流程
-Backend.Event-Trigger -> Backend.Notification-Service: "1. 觸發通知"
-Backend.Notification-Service -> WebSocket-Server: "2. 推送訊息"
-WebSocket-Server -> Frontend.WebSocket-Client: "3. 廣播至客戶端"
-Frontend.WebSocket-Client -> Frontend.NotificationAddon: "4. 轉發訊息"
-Frontend.NotificationAddon -> Frontend.NotificationAddon: "5a. 更新未讀計數"
-Frontend.NotificationAddon -> Frontend.SnackbarProvider: "5b. 顯示快顯通知"
-Frontend.SnackbarProvider -> User: "6. 向使用者顯示"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Notifications](assets/diagram/notifications-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 核心元件
 

package/docs/components-notifications.zh.md

@@ -8,57 +8,9 @@
 
 通知系统遵循一个简单、事件驱动的架构。当后端发生值得注意的事件时，会生成一个通知并通过 WebSocket 通道广播。前端客户端监听此通道，接收通知，并相应地更新 UI。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Backend: {
-  label: "Blocklet 后端"
-  shape: rectangle
-
-  Event-Trigger: {
-    label: "事件发生"
-    shape: oval
-  }
-
-  Notification-Service: {
-    label: "通知服务"
-  }
-}
-
-WebSocket-Server: {
-  label: "WebSocket 服务器"
-}
-
-Frontend: {
-  label: "前端应用"
-  shape: rectangle
-
-  WebSocket-Client: {
-    label: "WebSocket 客户端"
-  }
-
-  NotificationAddon: {
-    label: "NotificationAddon"
-  }
-
-  SnackbarProvider: {
-    label: "SnackbarProvider"
-  }
-}
-
-# 定义通知流程
-Backend.Event-Trigger -> Backend.Notification-Service: "1. 触发通知"
-Backend.Notification-Service -> WebSocket-Server: "2. 推送消息"
-WebSocket-Server -> Frontend.WebSocket-Client: "3. 广播到客户端"
-Frontend.WebSocket-Client -> Frontend.NotificationAddon: "4. 转发消息"
-Frontend.NotificationAddon -> Frontend.NotificationAddon: "5a. 更新未读计数"
-Frontend.NotificationAddon -> Frontend.SnackbarProvider: "5b. 显示浮动提示通知"
-Frontend.SnackbarProvider -> User: "6. 显示给用户"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Notifications](assets/diagram/notifications-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 核心组件
 

package/docs/components-user-management-user-center.ja.md

@@ -4,44 +4,9 @@
 
 このコンポーネントは高度に拡張可能に設計されており、開発者はブロックレットのメタデータを通じてカスタムタブやコンテンツを追加でき、異なるアプリケーション間で一貫したユーザーエクスペリエンスを保証します。
 
-```d2
-direction: down
-
-UserCenter: {
-  label: "UserCenter コンポーネントのレイアウト"
-  shape: rectangle
-
-  Header: { shape: rectangle }
-
-  Main: {
-    direction: right
-    shape: rectangle
-
-    Sidebar: {
-      label: "UserBasicInfo\n(プロファイルサイドバー)"
-      shape: rectangle
-    }
-
-    Content: {
-      label: "コンテンツエリア"
-      shape: rectangle
-
-      Tabs: {
-        label: "タブナビゲーション"
-        shape: rectangle
-      }
-      TabPanel: {
-        label: "アクティブなタブのコンテンツ"
-        shape: rectangle
-      }
-    }
-  }
-
-  Footer: { shape: rectangle }
-}
-
-UserCenter.Main.Content.Tabs -> UserCenter.Main.Content.TabPanel: "コンテンツを制御"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![UserCenter](assets/diagram/user-center-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本的な使用法
 

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

@@ -4,44 +4,9 @@ The `UserCenter` component is a comprehensive, pre-built interface that provides
 
 This component is designed to be highly extensible, allowing developers to add custom tabs and content through the blocklet's metadata, ensuring a consistent user experience across different applications.
 
-```d2
-direction: down
-
-UserCenter: {
-  label: "UserCenter Component Layout"
-  shape: rectangle
-
-  Header: { shape: rectangle }
-
-  Main: {
-    direction: right
-    shape: rectangle
-
-    Sidebar: {
-      label: "UserBasicInfo\n(Profile Sidebar)"
-      shape: rectangle
-    }
-
-    Content: {
-      label: "Content Area"
-      shape: rectangle
-
-      Tabs: {
-        label: "Tabs Navigation"
-        shape: rectangle
-      }
-      TabPanel: {
-        label: "Active Tab Content"
-        shape: rectangle
-      }
-    }
-  }
-
-  Footer: { shape: rectangle }
-}
-
-UserCenter.Main.Content.Tabs -> UserCenter.Main.Content.TabPanel: "Controls Content"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![UserCenter](assets/diagram/user-center-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Basic Usage
 
@@ -105,16 +70,17 @@ The `UserCenter` is composed of several key sections and components that provide
 
 By default, the `UserCenter` includes the following tabs for every user:
 
-| Tab                 | Description                                                                    | Visibility      |
-| ------------------- | ------------------------------------------------------------------------------ | --------------- |
-| **NFTs**            | Displays the user's NFT collections.                                           | Public          |
-| **Social Activity** | Shows the user's followers and following lists if social features are enabled. | Public          |
-| **Settings**        | Access to profile, privacy, notification, and session management.              | Owner Only      |
-| **Storage**         | Interface for managing connections to DID Spaces for decentralized storage.    | Owner Only      |
+| Tab                 | Description                                                                    | Visibility |
+| ------------------- | ------------------------------------------------------------------------------ | ---------- |
+| **NFTs**            | Displays the user's NFT collections.                                           | Public     |
+| **Social Activity** | Shows the user's followers and following lists if social features are enabled. | Public     |
+| **Settings**        | Access to profile, privacy, notification, and session management.              | Owner Only |
+| **Storage**         | Interface for managing connections to DID Spaces for decentralized storage.    | Owner Only |
 
 ### User Profile (`UserBasicInfo`)
 
 The `UserBasicInfo` component is a dedicated section (typically a sidebar on desktop) that displays essential user details:
+
 - **Avatar and Name**: Shows the user's profile picture and full name. The owner can click the avatar to open the profile switcher.
 - **DID**: Displays the user's Decentralized Identifier, with options to copy it or view its QR code.
 - **Social Actions**: For public profiles, it shows "Follow" or "Unfollow" buttons.
@@ -173,11 +139,9 @@ You can extend the `UserCenter` by adding new tabs through your blocklet's confi
       const currentTab = '/profile/activity';
 
       return (
-        <UserCenter currentTab={currentTab}>
-          {currentTab === '/profile/activity' && <MyActivityComponent />}
-        </UserCenter>
+        <UserCenter currentTab={currentTab}>{currentTab === '/profile/activity' && <MyActivityComponent />}</UserCenter>
       );
     }
     ```
 
-This approach allows you to seamlessly integrate application-specific pages into the standard `UserCenter` layout.
+This approach allows you to seamlessly integrate application-specific pages into the standard `UserCenter` layout.

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

@@ -4,44 +4,9 @@
 
 此元件設計為高度可擴展，允許開發者透過 blocklet 的元資料新增自訂分頁和內容，確保在不同應用程式中提供一致的使用者體驗。
 
-```d2
-direction: down
-
-UserCenter: {
-  label: "UserCenter 元件佈局"
-  shape: rectangle
-
-  Header: { shape: rectangle }
-
-  Main: {
-    direction: right
-    shape: rectangle
-
-    Sidebar: {
-      label: "UserBasicInfo\n(個人檔案側邊欄)"
-      shape: rectangle
-    }
-
-    Content: {
-      label: "內容區域"
-      shape: rectangle
-
-      Tabs: {
-        label: "分頁導覽"
-        shape: rectangle
-      }
-      TabPanel: {
-        label: "當前分頁內容"
-        shape: rectangle
-      }
-    }
-  }
-
-  Footer: { shape: rectangle }
-}
-
-UserCenter.Main.Content.Tabs -> UserCenter.Main.Content.TabPanel: "控制內容"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![UserCenter](assets/diagram/user-center-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本用法
 

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

@@ -4,44 +4,9 @@
 
 该组件被设计为高度可扩展，允许开发者通过 blocklet 的元数据添加自定义标签页和内容，从而确保在不同应用中提供一致的用户体验。
 
-```d2
-direction: down
-
-UserCenter: {
-  label: "UserCenter 组件布局"
-  shape: rectangle
-
-  Header: { shape: rectangle }
-
-  Main: {
-    direction: right
-    shape: rectangle
-
-    Sidebar: {
-      label: "UserBasicInfo\n（个人资料侧边栏）"
-      shape: rectangle
-    }
-
-    Content: {
-      label: "内容区域"
-      shape: rectangle
-
-      Tabs: {
-        label: "标签页导航"
-        shape: rectangle
-      }
-      TabPanel: {
-        label: "当前标签页内容"
-        shape: rectangle
-      }
-    }
-  }
-
-  Footer: { shape: rectangle }
-}
-
-UserCenter.Main.Content.Tabs -> UserCenter.Main.Content.TabPanel: "控制内容"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![UserCenter](assets/diagram/user-center-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本用法
 

package/docs/components-user-management-user-sessions.ja.md

@@ -17,52 +17,9 @@
 
 `UserSessions` コンポーネントは、開発者が提供する関数からセッションデータを要求することによって動作します。この設計により、コンポーネントは特定のバックエンド実装から切り離され、より大きな柔軟性が提供されます。
 
-```d2
-direction: down
-
-User-Interaction: {
-  shape: c4-person
-  label: "ユーザー"
-}
-
-UserSessions-Component: {
-  label: "UserSessions コンポーネント"
-  shape: rectangle
-
-  Datatable: {
-    label: "データテーブル"
-  }
-
-  Actions: {
-    label: "ログアウト / すべてログアウト"
-  }
-}
-
-Application-Backend: {
-  label: "アプリケーションバックエンド"
-  shape: rectangle
-
-  API-Endpoint: {
-    label: "API エンドポイント\n(例: /api/sessions)"
-  }
-
-  Database: {
-    shape: cylinder
-    label: "セッションストレージ"
-  }
-}
-
-User-Interaction -> UserSessions-Component.Datatable: "1. セッションを表示"
-UserSessions-Component -> Application-Backend.API-Endpoint: "2. getUserSessions prop を呼び出し"
-Application-Backend.API-Endpoint -> Database: "3. セッションデータを取得"
-Database -> Application-Backend.API-Endpoint: "4. データを返す"
-Application-Backend.API-Endpoint -> UserSessions-Component: "5. list と paging で promise を解決"
-UserSessions-Component.Datatable -> User-Interaction: "6. セッションをレンダリング"
-User-Interaction -> UserSessions-Component.Actions: "7. 「ログアウト」をクリック"
-UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. ログアウトリクエストを送信"
-Application-Backend.API-Endpoint -> Database: "9. セッションを削除"
-UserSessions-Component -> Application-Backend.API-Endpoint: "10. データを更新"
-```
+<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
+![UserSessions](assets/diagram/user-sessions-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 使用方法
 

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

@@ -17,52 +17,11 @@ The component is designed to be a plug-and-play solution for developers needing
 
 The `UserSessions` component operates by requesting session data from a developer-provided function. This design decouples the component from any specific backend implementation, offering greater flexibility.
 
-```d2
-direction: down
+The following diagram illustrates the interaction between the user, the component, and the application backend:
 
-User-Interaction: {
-  shape: c4-person
-  label: "User"
-}
-
-UserSessions-Component: {
-  label: "UserSessions Component"
-  shape: rectangle
-
-  Datatable: {
-    label: "Datatable"
-  }
-
-  Actions: {
-    label: "Logout / Logout All"
-  }
-}
-
-Application-Backend: {
-  label: "Application Backend"
-  shape: rectangle
-
-  API-Endpoint: {
-    label: "API Endpoint\n(e.g., /api/sessions)"
-  }
-
-  Database: {
-    shape: cylinder
-    label: "Session Storage"
-  }
-}
-
-User-Interaction -> UserSessions-Component.Datatable: "1. Views sessions"
-UserSessions-Component -> Application-Backend.API-Endpoint: "2. Calls `getUserSessions` prop"
-Application-Backend.API-Endpoint -> Database: "3. Fetches session data"
-Database -> Application-Backend.API-Endpoint: "4. Returns data"
-Application-Backend.API-Endpoint -> UserSessions-Component: "5. Resolves promise with list and paging"
-UserSessions-Component.Datatable -> User-Interaction: "6. Renders sessions"
-User-Interaction -> UserSessions-Component.Actions: "7. Clicks 'Logout'"
-UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. Sends logout request"
-Application-Backend.API-Endpoint -> Database: "9. Deletes session"
-UserSessions-Component -> Application-Backend.API-Endpoint: "10. Refreshes data"
-```
+<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
+![UserSessions](assets/diagram/user-sessions-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Usage
 

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

@@ -17,52 +17,9 @@
 
 `UserSessions` 元件透過向開發人員提供的函式請求會話資料來運作。這種設計將元件與任何特定的後端實作解耦，提供了更大的靈活性。
 
-```d2
-direction: down
-
-User-Interaction: {
-  shape: c4-person
-  label: "使用者"
-}
-
-UserSessions-Component: {
-  label: "UserSessions 元件"
-  shape: rectangle
-
-  Datatable: {
-    label: "資料表"
-  }
-
-  Actions: {
-    label: "登出 / 全部登出"
-  }
-}
-
-Application-Backend: {
-  label: "應用程式後端"
-  shape: rectangle
-
-  API-Endpoint: {
-    label: "API 端點\n(例如 /api/sessions)"
-  }
-
-  Database: {
-    shape: cylinder
-    label: "會話儲存"
-  }
-}
-
-User-Interaction -> UserSessions-Component.Datatable: "1. 查看會話"
-UserSessions-Component -> Application-Backend.API-Endpoint: "2. 呼叫 `getUserSessions` 屬性"
-Application-Backend.API-Endpoint -> Database: "3. 擷取會話資料"
-Database -> Application-Backend.API-Endpoint: "4. 回傳資料"
-Application-Backend.API-Endpoint -> UserSessions-Component: "5. 以列表和分頁解析 promise"
-UserSessions-Component.Datatable -> User-Interaction: "6. 渲染會話"
-User-Interaction -> UserSessions-Component.Actions: "7. 點擊「登出」"
-UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. 發送登出請求"
-Application-Backend.API-Endpoint -> Database: "9. 刪除會話"
-UserSessions-Component -> Application-Backend.API-Endpoint: "10. 重新整理資料"
-```
+<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
+![UserSessions](assets/diagram/user-sessions-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 使用方式
 

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

@@ -17,52 +17,9 @@
 
 `UserSessions` 组件通过调用开发者提供的函数来请求会话数据。这种设计将组件与任何特定的后端实现解耦，从而提供了更大的灵活性。
 
-```d2
-direction: down
-
-User-Interaction: {
-  shape: c4-person
-  label: "用户"
-}
-
-UserSessions-Component: {
-  label: "UserSessions 组件"
-  shape: rectangle
-
-  Datatable: {
-    label: "数据表格"
-  }
-
-  Actions: {
-    label: "登出 / 全部登出"
-  }
-}
-
-Application-Backend: {
-  label: "应用后端"
-  shape: rectangle
-
-  API-Endpoint: {
-    label: "API 端点\n(例如, /api/sessions)"
-  }
-
-  Database: {
-    shape: cylinder
-    label: "会话存储"
-  }
-}
-
-User-Interaction -> UserSessions-Component.Datatable: "1. 查看会话"
-UserSessions-Component -> Application-Backend.API-Endpoint: "2. 调用 `getUserSessions` 属性"
-Application-Backend.API-Endpoint -> Database: "3. 获取会话数据"
-Database -> Application-Backend.API-Endpoint: "4. 返回数据"
-Application-Backend.API-Endpoint -> UserSessions-Component: "5. 以列表和分页信息解析 Promise"
-UserSessions-Component.Datatable -> User-Interaction: "6. 渲染会话"
-User-Interaction -> UserSessions-Component.Actions: "7. 点击'登出'"
-UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. 发送登出请求"
-Application-Backend.API-Endpoint -> Database: "9. 删除会话"
-UserSessions-Component -> Application-Backend.API-Endpoint: "10. 刷新数据"
-```
+<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
+![UserSessions](assets/diagram/user-sessions-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 用法
 

package/docs/components-user-management.ja.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.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## コアコンポーネント