@arcblock/did-connect-react 3.2.19 → 3.3.1

package/docs/core-components-did-connect.ja.md

@@ -54,56 +54,9 @@ export default App;
 
 `DidConnect` コンポーネントは、接続オプションの表示から最終的な成功またはエラー状態の処理まで、ユーザー認証フロー全体を調整します。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application: {
-  label: "React アプリケーション"
-  shape: rectangle
-
-  Login-Button: {
-    label: "ログインボタン"
-  }
-
-  DidConnect-UI: {
-    label: "DidConnect コンポーネント"
-    shape: rectangle
-
-    QR-Code: {
-      label: "QR コード"
-    }
-
-    Login-Methods: {
-      label: "他のログイン方法\n(OAuth、Passkey)"
-    }
-  }
-}
-
-Backend: {
-  label: "バックエンドサーバー"
-  shape: rectangle
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Application.Login-Button: "1. ログインをクリック"
-Application.Login-Button -> Application.DidConnect-UI: "2. UI をレンダリング"
-Application.DidConnect-UI -> Backend: "3. セッションを作成し、checkFn を介してポーリングを開始"
-User -> DID-Wallet: "4a. QR コードをスキャン"
-DID-Wallet -> Backend: "5. 承認を送信"
-User -> Application.DidConnect-UI.Login-Methods: "4b. OAuth/Passkey をクリック"
-Application.DidConnect-UI.Login-Methods -> Backend: "5. 認証"
-Backend -> Application.DidConnect-UI: "6. 成功ステータスを返す"
-Application.DidConnect-UI -> User: "7. onSuccess を呼び出し、UI を閉じる"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![Connection UI (DidConnect)](assets/diagram/did-connect-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## コンポーネントのプロパティ
 

package/docs/core-components-did-connect.md

@@ -52,58 +52,11 @@ In this example, clicking the "Login with DID" button sets the `isConnectOpen` s
 
 ## How It Works
 
-The `DidConnect` component orchestrates the entire user authentication flow, from displaying connection options to handling the final success or error state.
+The `DidConnect` component orchestrates the entire user authentication flow, from displaying connection options to handling the final success or error state. The following diagram illustrates this flow:
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application: {
-  label: "React Application"
-  shape: rectangle
-
-  Login-Button: {
-    label: "Login Button"
-  }
-
-  DidConnect-UI: {
-    label: "DidConnect Component"
-    shape: rectangle
-
-    QR-Code: {
-      label: "QR Code"
-    }
-
-    Login-Methods: {
-      label: "Other Login Methods\n(OAuth, Passkey)"
-    }
-  }
-}
-
-Backend: {
-  label: "Backend Server"
-  shape: rectangle
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Application.Login-Button: "1. Clicks Login"
-Application.Login-Button -> Application.DidConnect-UI: "2. Renders UI"
-Application.DidConnect-UI -> Backend: "3. Creates session, starts polling via checkFn"
-User -> DID-Wallet: "4a. Scans QR Code"
-DID-Wallet -> Backend: "5. Sends approval"
-User -> Application.DidConnect-UI.Login-Methods: "4b. Clicks OAuth/Passkey"
-Application.DidConnect-UI.Login-Methods -> Backend: "5. Authenticates"
-Backend -> Application.DidConnect-UI: "6. Returns success status"
-Application.DidConnect-UI -> User: "7. Calls onSuccess & closes UI"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![Connection UI (DidConnect)](assets/diagram/did-connect-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Component Props
 
@@ -210,4 +163,4 @@ Functions that are called at different stages of the connection lifecycle.
 
 ## Next Steps
 
-With a solid understanding of the `DidConnect` component, you can now build robust authentication experiences. For more programmatic control over the connection UI, explore the [`useConnect` hook](./hooks-use-connect.md), which allows you to open and close the `DidConnect` modal from anywhere in your application.
+With a solid understanding of the `DidConnect` component, you can now build robust authentication experiences. For more programmatic control over the connection UI, explore the [`useConnect` hook](./hooks-use-connect.md), which allows you to open and close the `DidConnect` modal from anywhere in your application.

package/docs/core-components-did-connect.zh-TW.md

@@ -54,56 +54,9 @@ export default App;
 
 `DidConnect` 元件協調了整個使用者驗證流程，從顯示連線選項到處理最終的成功或錯誤狀態。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application: {
-  label: "React 應用程式"
-  shape: rectangle
-
-  Login-Button: {
-    label: "登入按鈕"
-  }
-
-  DidConnect-UI: {
-    label: "DidConnect 元件"
-    shape: rectangle
-
-    QR-Code: {
-      label: "QR Code"
-    }
-
-    Login-Methods: {
-      label: "其他登入方式\n(OAuth, Passkey)"
-    }
-  }
-}
-
-Backend: {
-  label: "後端伺服器"
-  shape: rectangle
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Application.Login-Button: "1. 點擊登入"
-Application.Login-Button -> Application.DidConnect-UI: "2. 渲染 UI"
-Application.DidConnect-UI -> Backend: "3. 建立 session，透過 checkFn 開始輪詢"
-User -> DID-Wallet: "4a. 掃描 QR Code"
-DID-Wallet -> Backend: "5. 發送批准"
-User -> Application.DidConnect-UI.Login-Methods: "4b. 點擊 OAuth/Passkey"
-Application.DidConnect-UI.Login-Methods -> Backend: "5. 進行驗證"
-Backend -> Application.DidConnect-UI: "6. 回傳成功狀態"
-Application.DidConnect-UI -> User: "7. 呼叫 onSuccess 並關閉 UI"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![Connection UI (DidConnect)](assets/diagram/did-connect-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 元件 Props
 

package/docs/core-components-did-connect.zh.md

@@ -54,56 +54,9 @@ export default App;
 
 `DidConnect` 组件协调整个用户认证流程，从显示连接选项到处理最终的成功或错误状态。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application: {
-  label: "React 应用程序"
-  shape: rectangle
-
-  Login-Button: {
-    label: "登录按钮"
-  }
-
-  DidConnect-UI: {
-    label: "DidConnect 组件"
-    shape: rectangle
-
-    QR-Code: {
-      label: "二维码"
-    }
-
-    Login-Methods: {
-      label: "其他登录方式\n(OAuth, Passkey)"
-    }
-  }
-}
-
-Backend: {
-  label: "后端服务器"
-  shape: rectangle
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Application.Login-Button: "1. 点击登录"
-Application.Login-Button -> Application.DidConnect-UI: "2. 渲染 UI"
-Application.DidConnect-UI -> Backend: "3. 创建会话，通过 checkFn 开始轮询"
-User -> DID-Wallet: "4a. 扫描二维码"
-DID-Wallet -> Backend: "5. 发送批准"
-User -> Application.DidConnect-UI.Login-Methods: "4b. 点击 OAuth/Passkey"
-Application.DidConnect-UI.Login-Methods -> Backend: "5. 进行认证"
-Backend -> Application.DidConnect-UI: "6. 返回成功状态"
-Application.DidConnect-UI -> User: "7. 调用 onSuccess 并关闭 UI"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![Connection UI (DidConnect)](assets/diagram/did-connect-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 组件 Props
 

package/docs/core-components-session-provider.ja.md

@@ -10,51 +10,9 @@
 
 以下は、基本的なアーキテクチャを示す図です。
 
-```d2 SessionProvider Architecture icon=mdi:react
-direction: down
-
-SessionProvider: {
-  label: "SessionProvider"
-  shape: rectangle
-  style: {
-    fill: "#f0f9ff"
-    stroke: "#0284c7"
-  }
-
-  Session-Context: {
-    label: "セッションコンテキスト\n{ user, login(), logout() ... }"
-    shape: cylinder
-    style.fill: "#ecfdf5"
-  }
-
-  Your-App: {
-    label: "あなたのアプリケーション"
-    shape: rectangle
-
-    Header: {
-      label: "ヘッダーコンポーネント"
-    }
-
-    ProfilePage: {
-      label: "プロフィールページ"
-    }
-
-    LoginButton: {
-      label: "ログインボタン"
-    }
-  }
-
-  Session-Context -> Your-App: 提供
-}
-
-Your-App.Header: 利用
-Your-App.ProfilePage: 利用
-Your-App.LoginButton: 利用とアクション
-
-Your-App.Header -> Session-Context
-Your-App.ProfilePage -> Session-Context
-Your-App.LoginButton -> Session-Context
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Session Management (SessionProvider)](assets/diagram/core-components-session-provider-01.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## はじめに
 

package/docs/core-components-session-provider.md

@@ -10,51 +10,9 @@ This component handles everything from storing session tokens and managing user
 
 Here is a diagram illustrating the basic architecture:
 
-```d2 SessionProvider Architecture icon=mdi:react
-direction: down
-
-SessionProvider: {
-  label: "SessionProvider"
-  shape: rectangle
-  style: {
-    fill: "#f0f9ff"
-    stroke: "#0284c7"
-  }
-
-  Session-Context: {
-    label: "Session Context\n{ user, login(), logout() ... }"
-    shape: cylinder
-    style.fill: "#ecfdf5"
-  }
-
-  Your-App: {
-    label: "Your Application"
-    shape: rectangle
-
-    Header: {
-      label: "Header Component"
-    }
-
-    ProfilePage: {
-      label: "Profile Page"
-    }
-
-    LoginButton: {
-      label: "Login Button"
-    }
-  }
-
-  Session-Context -> Your-App: Provides
-}
-
-Your-App.Header: Consumes
-Your-App.ProfilePage: Consumes
-Your-App.LoginButton: Consumes & Actions
-
-Your-App.Header -> Session-Context
-Your-App.ProfilePage -> Session-Context
-Your-App.LoginButton -> Session-Context
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Session Management (SessionProvider)](assets/diagram/core-components-session-provider-01.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Getting Started
 

package/docs/core-components-session-provider.zh-TW.md

@@ -10,51 +10,9 @@
 
 這是一個說明基本架構的圖表：
 
-```d2 SessionProvider Architecture icon=mdi:react
-direction: down
-
-SessionProvider: {
-  label: "SessionProvider"
-  shape: rectangle
-  style: {
-    fill: "#f0f9ff"
-    stroke: "#0284c7"
-  }
-
-  Session-Context: {
-    label: "Session Context\n{ user, login(), logout() ... }"
-    shape: cylinder
-    style.fill: "#ecfdf5"
-  }
-
-  Your-App: {
-    label: "您的應用程式"
-    shape: rectangle
-
-    Header: {
-      label: "Header 元件"
-    }
-
-    ProfilePage: {
-      label: "個人資料頁面"
-    }
-
-    LoginButton: {
-      label: "登入按鈕"
-    }
-  }
-
-  Session-Context -> Your-App: 提供
-}
-
-Your-App.Header: 使用
-Your-App.ProfilePage: 使用
-Your-App.LoginButton: 使用與操作
-
-Your-App.Header -> Session-Context
-Your-App.ProfilePage -> Session-Context
-Your-App.LoginButton -> Session-Context
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Session Management (SessionProvider)](assets/diagram/core-components-session-provider-01.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 入門指南
 

package/docs/core-components-session-provider.zh.md

@@ -10,51 +10,9 @@
 
 下图说明了基本架构：
 
-```d2 SessionProvider 架构 icon=mdi:react
-direction: down
-
-SessionProvider: {
-  label: "SessionProvider"
-  shape: rectangle
-  style: {
-    fill: "#f0f9ff"
-    stroke: "#0284c7"
-  }
-
-  Session-Context: {
-    label: "会话上下文\n{ user, login(), logout() ... }"
-    shape: cylinder
-    style.fill: "#ecfdf5"
-  }
-
-  Your-App: {
-    label: "您的应用程序"
-    shape: rectangle
-
-    Header: {
-      label: "Header 组件"
-    }
-
-    ProfilePage: {
-      label: "个人资料页面"
-    }
-
-    LoginButton: {
-      label: "登录按钮"
-    }
-  }
-
-  Session-Context -> Your-App: 提供
-}
-
-Your-App.Header: 消费
-Your-App.ProfilePage: 消费
-Your-App.LoginButton: 消费与操作
-
-Your-App.Header -> Session-Context
-Your-App.ProfilePage -> Session-Context
-Your-App.LoginButton -> Session-Context
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Session Management (SessionProvider)](assets/diagram/core-components-session-provider-01.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 快速入门
 

package/docs/hooks-use-connect.ja.md

@@ -11,45 +11,9 @@
 1.  **`connectHolder`**：コンポーネントツリーにレンダリングする必要があるReact要素です。この要素は、`DidConnect`モーダルがアクティブ化されたときにそれをレンダリングする責任があります。`open`関数が呼び出されるまで非表示のままです。
 2.  **`connectApi`**：モーダルのライフサイクルを制御するために使用する関数（`open`、`close`、`openPopup`、`loginOAuth`）を含むオブジェクトです。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-App: {
-  label: "あなたのアプリケーション"
-  shape: rectangle
-
-  Custom-Button: {
-    label: "カスタムボタン"
-  }
-
-  useConnect-Hook: {
-    label: "useConnect()"
-  }
-  
-  connectHolder: {
-    label: "connectHolder"
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-App.Custom-Button: "1. クリック"
-Your-App.Custom-Button -> Your-App.useConnect-Hook: "2. connectApi.open() を呼び出す"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "3. モーダルを有効化"
-Your-App.connectHolder -> User: "4. DidConnect UI を表示"
-User -> DID-Wallet: "5. QRをスキャンして承認"
-DID-Wallet -> Your-App.connectHolder: "6. レスポンスを送信"
-Your-App.connectHolder -> Your-App.useConnect-Hook: "7. onSuccess コールバックをトリガー"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "8. モーダルを無効化"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![useConnect](assets/diagram/use-connect-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## セットアップ
 

package/docs/hooks-use-connect.md

@@ -11,45 +11,9 @@ The `useConnect` hook returns two main elements:
 1.  **`connectHolder`**: A React element that must be rendered in your component tree. This element is responsible for rendering the `DidConnect` modal when it's activated. It remains invisible until the `open` function is called.
 2.  **`connectApi`**: An object containing the functions (`open`, `close`, `openPopup`, `loginOAuth`) you'll use to control the modal's lifecycle.
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-App: {
-  label: "Your Application"
-  shape: rectangle
-
-  Custom-Button: {
-    label: "Custom Button"
-  }
-
-  useConnect-Hook: {
-    label: "useConnect()"
-  }
-  
-  connectHolder: {
-    label: "connectHolder"
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-App.Custom-Button: "1. Clicks"
-Your-App.Custom-Button -> Your-App.useConnect-Hook: "2. Calls connectApi.open()"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "3. Activates modal"
-Your-App.connectHolder -> User: "4. Displays DidConnect UI"
-User -> DID-Wallet: "5. Scans QR & Approves"
-DID-Wallet -> Your-App.connectHolder: "6. Sends response"
-Your-App.connectHolder -> Your-App.useConnect-Hook: "7. Triggers onSuccess callback"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "8. Deactivates modal"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![useConnect](assets/diagram/use-connect-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Setup
 
@@ -211,4 +175,4 @@ This is a helper function to directly initiate an OAuth login flow. It's a lower
   <x-field data-name="action" data-type="string" data-required="true" data-desc="The action, typically 'login'."></x-field>
   <x-field data-name="extraParams" data-type="object" data-required="false" data-desc="Additional parameters for the OAuth flow."></x-field>
   <x-field data-name="onLogin" data-type="function" data-required="true" data-desc="Callback function executed upon successful login."></x-field>
-</x-field-group>
+</x-field-group>

package/docs/hooks-use-connect.zh-TW.md

@@ -11,45 +11,9 @@
 1.  **`connectHolder`**：一個必須在您的元件樹中渲染的 React 元素。此元素負責在 `DidConnect` 模態框被啟動時進行渲染。在 `open` 函式被呼叫前，它保持不可見。
 2.  **`connectApi`**：一個包含您將用來控制模態框生命週期的函式（`open`、`close`、`openPopup`、`loginOAuth`）的物件。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-App: {
-  label: "您的應用程式"
-  shape: rectangle
-
-  Custom-Button: {
-    label: "自訂按鈕"
-  }
-
-  useConnect-Hook: {
-    label: "useConnect()"
-  }
-  
-  connectHolder: {
-    label: "connectHolder"
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-App.Custom-Button: "1. 點擊"
-Your-App.Custom-Button -> Your-App.useConnect-Hook: "2. 呼叫 connectApi.open()"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "3. 啟動模態框"
-Your-App.connectHolder -> User: "4. 顯示 DidConnect UI"
-User -> DID-Wallet: "5. 掃描 QR 並批准"
-DID-Wallet -> Your-App.connectHolder: "6. 發送回應"
-Your-App.connectHolder -> Your-App.useConnect-Hook: "7. 觸發 onSuccess 回呼"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "8. 關閉模態框"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![useConnect](assets/diagram/use-connect-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 設定