@blocklet/payment-react 1.22.27 → 1.22.28

package/docs/components-business-auto-topup.ja.md

@@ -6,42 +6,9 @@
 
 以下の図は、自動チャージ機能設定の典型的なユーザーフローを示しています。ユーザーは`AutoTopup`表示コンポーネントを操作し、それが変更を行うための`AutoTopupModal`を起動します。その後、モーダルはバックエンドAPIと通信して設定を保存します。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application-UI: {
-  label: "アプリケーションUI"
-  shape: rectangle
-
-  AutoTopup-Card: {
-    label: "AutoTopupコンポーネント"
-    shape: rectangle
-  }
-
-  AutoTopup-Modal: {
-    label: "AutoTopupModal"
-    shape: rectangle
-  }
-}
-
-Payment-API: {
-  label: "支払いAPI"
-  shape: cylinder
-}
-
-User -> Application-UI.AutoTopup-Card: "1. 自動チャージのステータスを表示"
-Application-UI.AutoTopup-Card -> Application-UI.AutoTopup-Modal: "2. '設定'をクリックしてモーダルを開く"
-User -> Application-UI.AutoTopup-Modal: "3. 設定を調整して保存"
-Application-UI.AutoTopup-Modal -> Payment-API: "4. 設定を送信" 
-Payment-API -> Payment-API: "5. 設定を保存"
-Payment-API -> Application-UI.AutoTopup-Modal: "6. 成功を返す"
-Application-UI.AutoTopup-Modal -> Application-UI.AutoTopup-Card: "7. onSuccessを呼び出し、UIを更新"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9 -->
+![Auto-Topup Components](assets/diagram/auto-topup-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## AutoTopup
 

package/docs/components-business-auto-topup.md

@@ -6,42 +6,9 @@ The auto-topup feature ensures uninterrupted service by automatically recharging
 
 The diagram below illustrates the typical user flow for configuring the auto-topup feature. The user interacts with the `AutoTopup` display component, which launches the `AutoTopupModal` for making changes. The modal then communicates with the backend API to save the configuration.
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application-UI: {
-  label: "Application UI"
-  shape: rectangle
-
-  AutoTopup-Card: {
-    label: "AutoTopup Component"
-    shape: rectangle
-  }
-
-  AutoTopup-Modal: {
-    label: "AutoTopupModal"
-    shape: rectangle
-  }
-}
-
-Payment-API: {
-  label: "Payment API"
-  shape: cylinder
-}
-
-User -> Application-UI.AutoTopup-Card: "1. Views auto-topup status"
-Application-UI.AutoTopup-Card -> Application-UI.AutoTopup-Modal: "2. Clicks 'Configure' to open modal"
-User -> Application-UI.AutoTopup-Modal: "3. Adjusts settings & saves"
-Application-UI.AutoTopup-Modal -> Payment-API: "4. Submit configuration" 
-Payment-API -> Payment-API: "5. Save configuration"
-Payment-API -> Application-UI.AutoTopup-Modal: "6. Return success"
-Application-UI.AutoTopup-Modal -> Application-UI.AutoTopup-Card: "7. Calls onSuccess, UI updates"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9 -->
+![Auto-Topup Components](assets/diagram/auto-topup-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## AutoTopup
 

package/docs/components-business-auto-topup.zh-TW.md

@@ -6,42 +6,9 @@
 
 下圖說明了使用者設定自動儲值功能的典型流程。使用者與 `AutoTopup` 顯示元件互動，該元件會啟動 `AutoTopupModal` 以進行變更。然後，彈出視窗會與後端 API 通訊以儲存設定。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application-UI: {
-  label: "應用程式 UI"
-  shape: rectangle
-
-  AutoTopup-Card: {
-    label: "AutoTopup 元件"
-    shape: rectangle
-  }
-
-  AutoTopup-Modal: {
-    label: "AutoTopupModal"
-    shape: rectangle
-  }
-}
-
-Payment-API: {
-  label: "支付 API"
-  shape: cylinder
-}
-
-User -> Application-UI.AutoTopup-Card: "1. 查看自動儲值狀態"
-Application-UI.AutoTopup-Card -> Application-UI.AutoTopup-Modal: "2. 點擊「設定」開啟彈出視窗"
-User -> Application-UI.AutoTopup-Modal: "3. 調整設定並儲存"
-Application-UI.AutoTopup-Modal -> Payment-API: "4. 提交設定" 
-Payment-API -> Payment-API: "5. 儲存設定"
-Payment-API -> Application-UI.AutoTopup-Modal: "6. 回傳成功"
-Application-UI.AutoTopup-Modal -> Application-UI.AutoTopup-Card: "7. 呼叫 onSuccess，UI 更新"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9 -->
+![Auto-Topup Components](assets/diagram/auto-topup-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## AutoTopup
 

package/docs/components-business-auto-topup.zh.md

@@ -6,42 +6,9 @@
 
 下图展示了配置自动充值功能的典型用户流程。用户与 `AutoTopup` 显示组件交互，该组件会启动 `AutoTopupModal` 以进行更改。然后，该模态框与后端 API 通信以保存配置。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Application-UI: {
-  label: "应用程序 UI"
-  shape: rectangle
-
-  AutoTopup-Card: {
-    label: "AutoTopup 组件"
-    shape: rectangle
-  }
-
-  AutoTopup-Modal: {
-    label: "AutoTopupModal"
-    shape: rectangle
-  }
-}
-
-Payment-API: {
-  label: "支付 API"
-  shape: cylinder
-}
-
-User -> Application-UI.AutoTopup-Card: "1. 查看自动充值状态"
-Application-UI.AutoTopup-Card -> Application-UI.AutoTopup-Modal: "2. 点击“配置”打开模态框"
-User -> Application-UI.AutoTopup-Modal: "3. 调整设置并保存"
-Application-UI.AutoTopup-Modal -> Payment-API: "4. 提交配置" 
-Payment-API -> Payment-API: "5. 保存配置"
-Payment-API -> Application-UI.AutoTopup-Modal: "6. 返回成功"
-Application-UI.AutoTopup-Modal -> Application-UI.AutoTopup-Card: "7. 调用 onSuccess，UI 更新"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:16:9 -->
+![Auto-Topup Components](assets/diagram/auto-topup-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## AutoTopup
 

package/docs/components-business-resume-subscription.ja.md

@@ -8,37 +8,9 @@
 
 以下の図は、ユーザーがサブスクリプションを再開する際のプロセスフローを示したもので、再ステーキングの条件分岐ロジックも含まれています。
 
-```d2
-shape: sequence_diagram
-
-User: { label: "ユーザー"; shape: c4-person }
-ResumeSubscription: { label: "ResumeSubscription コンポーネント" }
-PaymentAPI: { label: "決済API" }
-DIDWallet: { label: "DID Wallet" }
-
-User -> ResumeSubscription: "1. 再開をトリガー"
-ResumeSubscription -> PaymentAPI: "2. GET /recover-info"
-PaymentAPI -> ResumeSubscription: "3. ステータスを返す\n(例: needStake: true)"
-
-ResumeSubscription.t1 -> User: "4. 確認ダイアログを表示"
-User -> ResumeSubscription.t1: "5. 確認"
-
-alt "再ステーキングが必要" {
-  ResumeSubscription.t1 -> DIDWallet: "6a. 再ステークセッションを開く"
-  User -> DIDWallet: "7a. 承認"
-  DIDWallet -> ResumeSubscription.t1: "8a. 成功コールバック"
-}
-
-alt "ステーキング不要" {
-  ResumeSubscription.t1 -> PaymentAPI: "6b. PUT /recover"
-  PaymentAPI -> ResumeSubscription.t1: "7b. 成功"
-}
-
-ResumeSubscription.t1 -> PaymentAPI: "9. 更新されたサブスクリプションを取得"
-PaymentAPI -> ResumeSubscription.t1: "10. サブスクリプションを返す"
-ResumeSubscription.t1 -> User: "11. onResumed()を呼び出し、ダイアログを閉じる"
-
-```
+<!-- DIAGRAM_IMAGE_START:sequence:4:3 -->
+![ResumeSubscription](assets/diagram/resume-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 
 ## Props

package/docs/components-business-resume-subscription.md

@@ -8,37 +8,9 @@ This component must be used within a `PaymentProvider` to access the necessary c
 
 The following diagram illustrates the process flow when a user resumes a subscription, including the conditional logic for re-staking.
 
-```d2
-shape: sequence_diagram
-
-User: { shape: c4-person }
-ResumeSubscription: { label: "ResumeSubscription Component" }
-PaymentAPI: { label: "Payment API" }
-DIDWallet: { label: "DID Wallet" }
-
-User -> ResumeSubscription: "1. Triggers resume"
-ResumeSubscription -> PaymentAPI: "2. GET /recover-info"
-PaymentAPI -> ResumeSubscription: "3. Return status\n(e.g., needStake: true)"
-
-ResumeSubscription.t1 -> User: "4. Show confirmation dialog"
-User -> ResumeSubscription.t1: "5. Confirm"
-
-alt "Re-Staking Required" {
-  ResumeSubscription.t1 -> DIDWallet: "6a. Open re-stake session"
-  User -> DIDWallet: "7a. Approve"
-  DIDWallet -> ResumeSubscription.t1: "8a. Success callback"
-}
-
-alt "No Staking Required" {
-  ResumeSubscription.t1 -> PaymentAPI: "6b. PUT /recover"
-  PaymentAPI -> ResumeSubscription.t1: "7b. Success"
-}
-
-ResumeSubscription.t1 -> PaymentAPI: "9. Fetch updated subscription"
-PaymentAPI -> ResumeSubscription.t1: "10. Return subscription"
-ResumeSubscription.t1 -> User: "11. Call onResumed() & close dialog"
-
-```
+<!-- DIAGRAM_IMAGE_START:sequence:4:3 -->
+![ResumeSubscription](assets/diagram/resume-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 
 ## Props

package/docs/components-business-resume-subscription.zh-TW.md

@@ -8,37 +8,9 @@
 
 下圖說明了使用者恢復訂閱時的流程，包括重新質押的條件邏輯。
 
-```d2
-shape: sequence_diagram
-
-User: { shape: c4-person }
-ResumeSubscription: { label: "ResumeSubscription 元件" }
-PaymentAPI: { label: "Payment API" }
-DIDWallet: { label: "DID 錢包" }
-
-User -> ResumeSubscription: "1. 觸發恢復"
-ResumeSubscription -> PaymentAPI: "2. GET /recover-info"
-PaymentAPI -> ResumeSubscription: "3. 返回狀態\n(例如：needStake: true)"
-
-ResumeSubscription.t1 -> User: "4. 顯示確認對話方塊"
-User -> ResumeSubscription.t1: "5. 確認"
-
-alt "需要重新質押" {
-  ResumeSubscription.t1 -> DIDWallet: "6a. 開啟重新質押會話"
-  User -> DIDWallet: "7a. 批准"
-  DIDWallet -> ResumeSubscription.t1: "8a. 成功回呼"
-}
-
-alt "無需質押" {
-  ResumeSubscription.t1 -> PaymentAPI: "6b. PUT /recover"
-  PaymentAPI -> ResumeSubscription.t1: "7b. 成功"
-}
-
-ResumeSubscription.t1 -> PaymentAPI: "9. 取得更新後的訂閱"
-PaymentAPI -> ResumeSubscription.t1: "10. 返回訂閱"
-ResumeSubscription.t1 -> User: "11. 呼叫 onResumed() 並關閉對話方塊"
-
-```
+<!-- DIAGRAM_IMAGE_START:sequence:4:3 -->
+![ResumeSubscription](assets/diagram/resume-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 
 ## Props

package/docs/components-business-resume-subscription.zh.md

@@ -8,37 +8,9 @@
 
 下图说明了用户恢复订阅时的流程，包括重新质押的条件逻辑。
 
-```d2
-shape: sequence_diagram
-
-User: { shape: c4-person }
-ResumeSubscription: { label: "ResumeSubscription 组件" }
-PaymentAPI: { label: "Payment API" }
-DIDWallet: { label: "DID Wallet" }
-
-User -> ResumeSubscription: "1. 触发恢复"
-ResumeSubscription -> PaymentAPI: "2. GET /recover-info"
-PaymentAPI -> ResumeSubscription: "3. 返回状态\n(例如，needStake: true)"
-
-ResumeSubscription.t1 -> User: "4. 显示确认对话框"
-User -> ResumeSubscription.t1: "5. 确认"
-
-alt "需要重新质押" {
-  ResumeSubscription.t1 -> DIDWallet: "6a. 打开重新质押会话"
-  User -> DIDWallet: "7a. 批准"
-  DIDWallet -> ResumeSubscription.t1: "8a. 成功回调"
-}
-
-alt "无需质押" {
-  ResumeSubscription.t1 -> PaymentAPI: "6b. PUT /recover"
-  PaymentAPI -> ResumeSubscription.t1: "7b. 成功"
-}
-
-ResumeSubscription.t1 -> PaymentAPI: "9. 获取更新后的订阅"
-PaymentAPI -> ResumeSubscription.t1: "10. 返回订阅"
-ResumeSubscription.t1 -> User: "11. 调用 onResumed() 并关闭对话框"
-
-```
+<!-- DIAGRAM_IMAGE_START:sequence:4:3 -->
+![ResumeSubscription](assets/diagram/resume-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 
 ## Props

package/docs/components-ui-form-elements-phone-input.ja.md

@@ -8,38 +8,9 @@
 
 このコンポーネントは、`react-international-phone`ライブラリをコア機能として活用し、それをラップして`react-hook-form`およびMaterial-UIとの深い統合を提供します。ユーザーが国を選択したり番号を入力したりすると、コンポーネントはフォームの状態にある対応するフィールドを更新します。また、他のコンポーネントがフォーム内のリンクされた国フィールドを変更すると、自動的に国選択を更新します。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Form-State: {
-  label: "React Hook Form の状態"
-  shape: cylinder
-}
-
-PhoneInput-Component: {
-  label: "PhoneInput コンポーネント"
-
-  CountrySelect: {
-    label: "CountrySelect"
-  }
-
-  Phone-Field: {
-    label: "電話番号テキストフィールド"
-  }
-}
-
-User -> PhoneInput-Component.CountrySelect: "1. 国を選択"
-PhoneInput-Component.CountrySelect -> Form-State: "2. 'countryFieldName' の値を更新"
-
-User -> PhoneInput-Component.Phone-Field: "3. 電話番号を入力"
-PhoneInput-Component.Phone-Field -> Form-State: "4. 'name' の値（電話番号）を更新"
-
-Form-State -> PhoneInput-Component: "5. 状態を同期"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PhoneInput](assets/diagram/phone-input-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Props
 

package/docs/components-ui-form-elements-phone-input.md

@@ -8,38 +8,9 @@ This component is designed to work in tandem with other form elements, such as t
 
 The component leverages the `react-international-phone` library for its core functionality and wraps it to provide deep integration with `react-hook-form` and Material-UI. When a user selects a country or types a number, the component updates the corresponding fields in the form state. It also automatically updates its country selection when another component modifies the linked country field in the form.
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Form-State: {
-  label: "React Hook Form State"
-  shape: cylinder
-}
-
-PhoneInput-Component: {
-  label: "PhoneInput Component"
-
-  CountrySelect: {
-    label: "CountrySelect"
-  }
-
-  Phone-Field: {
-    label: "Phone Text Field"
-  }
-}
-
-User -> PhoneInput-Component.CountrySelect: "1. Selects a country"
-PhoneInput-Component.CountrySelect -> Form-State: "2. Updates 'countryFieldName' value"
-
-User -> PhoneInput-Component.Phone-Field: "3. Enters phone number"
-PhoneInput-Component.Phone-Field -> Form-State: "4. Updates 'name' value (phone number)"
-
-Form-State -> PhoneInput-Component: "5. Synchronizes state"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PhoneInput](assets/diagram/phone-input-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Props
 
@@ -135,4 +106,4 @@ export default function MyPaymentForm() {
 
 The true power of `PhoneInput` is revealed when used alongside an `AddressForm`. Since both components can be linked to the same country field (`billing_address.country` by default), changing the country in the `AddressForm` will automatically update the flag and dial code in the `PhoneInput`.
 
-For a complete example of this integration, please see the documentation for [`AddressForm`](./components-ui-form-elements-address-form.md).
+For a complete example of this integration, please see the documentation for [`AddressForm`](./components-ui-form-elements-address-form.md).

package/docs/components-ui-form-elements-phone-input.zh-TW.md

@@ -8,38 +8,9 @@
 
 該元件利用 `react-international-phone` 函式庫實現其核心功能，並將其包裝以提供與 `react-hook-form` 和 Material-UI 的深度整合。當使用者選擇一個國家或輸入號碼時，該元件會更新表單狀態中對應的欄位。當另一個元件修改表單中連結的國家欄位時，它也會自動更新其國家選擇。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-Form-State: {
-  label: "React Hook Form 狀態"
-  shape: cylinder
-}
-
-PhoneInput-Component: {
-  label: "PhoneInput 元件"
-
-  CountrySelect: {
-    label: "CountrySelect"
-  }
-
-  Phone-Field: {
-    label: "電話文字欄位"
-  }
-}
-
-User -> PhoneInput-Component.CountrySelect: "1. 選擇一個國家"
-PhoneInput-Component.CountrySelect -> Form-State: "2. 更新 'countryFieldName' 的值"
-
-User -> PhoneInput-Component.Phone-Field: "3. 輸入電話號碼"
-PhoneInput-Component.Phone-Field -> Form-State: "4. 更新 'name' 的值（電話號碼）"
-
-Form-State -> PhoneInput-Component: "5. 同步狀態"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PhoneInput](assets/diagram/phone-input-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 屬性
 

package/docs/components-ui-form-elements-phone-input.zh.md

@@ -8,39 +8,9 @@
 
 该组件利用 `react-international-phone` 库实现其核心功能，并对其进行包装，以提供与 `react-hook-form` 和 Material-UI 的深度集成。当用户选择一个国家或输入一个号码时，该组件会更新表单状态中相应的字段。当另一个组件修改表单中链接的国家字段时，它也会自动更新其国家选择。
 
-```d2
-direction: down
-
-User: {
-  label: "用户"
-  shape: c4-person
-}
-
-Form-State: {
-  label: "React Hook Form 状态"
-  shape: cylinder
-}
-
-PhoneInput-Component: {
-  label: "PhoneInput 组件"
-
-  CountrySelect: {
-    label: "CountrySelect"
-  }
-
-  Phone-Field: {
-    label: "电话文本字段"
-  }
-}
-
-User -> PhoneInput-Component.CountrySelect: "1. 选择一个国家"
-PhoneInput-Component.CountrySelect -> Form-State: "2. 更新 'countryFieldName' 的值"
-
-User -> PhoneInput-Component.Phone-Field: "3. 输入电话号码"
-PhoneInput-Component.Phone-Field -> Form-State: "4. 更新 'name' 的值（电话号码）"
-
-Form-State -> PhoneInput-Component: "5. 同步状态"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PhoneInput](assets/diagram/phone-input-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Props
 

package/docs/components.ja.md

@@ -8,50 +8,9 @@
 
 次の図は、高レベルのコンポーネントが通常どのように相互作用するかを示しています。`CheckoutTable` や `CheckoutDonate` のようなユーザー向けのコンポーネントがエントリーポイントとして機能し、その後、コアの `CheckoutForm` を利用して最終的な支払い処理を行います。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-PaymentProvider-Context: {
-  label: "PaymentProviderコンテキスト"
-  shape: rectangle
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Entry-Points: {
-    label: "高レベルコンポーネント"
-    shape: rectangle
-
-    CheckoutTable: {
-      label: "CheckoutTable"
-    }
-
-    CheckoutDonate: {
-      label: "CheckoutDonate"
-    }
-  }
-
-  Core-Processor: {
-    label: "コア支払いプロセッサ"
-    shape: rectangle
-
-    CheckoutForm: {
-      label: "CheckoutForm"
-    }
-  }
-}
-
-User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "プランを選択"
-User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "寄付を行う"
-PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm: "チェックアウトを開始"
-PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm: "チェックアウトを開始"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![Components](assets/diagram/components-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## コンポーネントカテゴリ
 

package/docs/components.md

@@ -8,50 +8,9 @@ All components are designed to work seamlessly within the `PaymentProvider` cont
 
 The following diagram illustrates how the high-level components typically interact. User-facing components like `CheckoutTable` or `CheckoutDonate` act as entry points, which then utilize the core `CheckoutForm` to handle the final payment processing.
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-PaymentProvider-Context: {
-  label: "PaymentProvider Context"
-  shape: rectangle
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Entry-Points: {
-    label: "High-Level Components"
-    shape: rectangle
-
-    CheckoutTable: {
-      label: "CheckoutTable"
-    }
-
-    CheckoutDonate: {
-      label: "CheckoutDonate"
-    }
-  }
-
-  Core-Processor: {
-    label: "Core Payment Processor"
-    shape: rectangle
-
-    CheckoutForm: {
-      label: "CheckoutForm"
-    }
-  }
-}
-
-User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "Selects a plan"
-User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "Makes a donation"
-PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm: "Initiates checkout"
-PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm: "Initiates checkout"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![Components](assets/diagram/components-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Component Categories
 
@@ -119,4 +78,4 @@ Display historical payment and credit data to your users. These components make
   <x-card data-title="CreditGrantsList" data-icon="lucide:award" data-href="/components/history/credit-grants-list">
     Show a list of credit grants, including status and remaining amounts.
   </x-card>
-</x-cards>
+</x-cards>

package/docs/components.zh-TW.md

@@ -8,50 +8,9 @@
 
 下圖說明了高階元件通常如何互動。面向使用者的元件，如 `CheckoutTable` 或 `CheckoutDonate`，作為入口點，然後利用核心的 `CheckoutForm` 來處理最終的支付處理。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-PaymentProvider-Context: {
-  label: "PaymentProvider 上下文"
-  shape: rectangle
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Entry-Points: {
-    label: "高階元件"
-    shape: rectangle
-
-    CheckoutTable: {
-      label: "CheckoutTable"
-    }
-
-    CheckoutDonate: {
-      label: "CheckoutDonate"
-    }
-  }
-
-  Core-Processor: {
-    label: "核心支付處理器"
-    shape: rectangle
-
-    CheckoutForm: {
-      label: "CheckoutForm"
-    }
-  }
-}
-
-User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "選擇一個方案"
-User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "進行一次捐贈"
-PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm: "啟動結帳"
-PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm: "啟動結帳"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![Components](assets/diagram/components-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 元件類別
 

package/docs/components.zh.md

@@ -8,50 +8,9 @@
 
 下图说明了高级组件通常如何交互。面向用户的组件（如 `CheckoutTable` 或 `CheckoutDonate`）作为入口点，然后利用核心的 `CheckoutForm` 来处理最终的支付流程。
 
-```d2
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-PaymentProvider-Context: {
-  label: "PaymentProvider 上下文"
-  shape: rectangle
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Entry-Points: {
-    label: "高级组件"
-    shape: rectangle
-
-    CheckoutTable: {
-      label: "CheckoutTable"
-    }
-
-    CheckoutDonate: {
-      label: "CheckoutDonate"
-    }
-  }
-
-  Core-Processor: {
-    label: "核心支付处理器"
-    shape: rectangle
-
-    CheckoutForm: {
-      label: "CheckoutForm"
-    }
-  }
-}
-
-User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "选择一个计划"
-User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "进行捐赠"
-PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm: "发起结账"
-PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm: "发起结账"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![Components](assets/diagram/components-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 组件分类
 

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

@@ -10,36 +10,9 @@
 
 バックエンドサービスがそのチャネルにイベントを公開すると、フックのサブスクリプションオブジェクトがイベントを発行し、コンポーネントはそれをリッスンできます。
 
-```d2
-direction: down
-
-react-component: {
-  label: "React コンポーネント"
-  shape: rectangle
-}
-
-use-subscription-hook: {
-  label: "useSubscription フック"
-  shape: rectangle
-}
-
-websocket-server: {
-  label: "WebSocket サーバー"
-  shape: rectangle
-}
-
-backend-service: {
-  label: "バックエンドサービス"
-  shape: rectangle
-}
-
-react-component -> use-subscription-hook: "1. チャネルIDで呼び出し"
-use-subscription-hook -> websocket-server: "2. 接続＆名前空間付きチャネルを購読"
-backend-service -> websocket-server: "3. イベントを公開（例：'invoice.paid'）"
-websocket-server -> use-subscription-hook: "4. イベントをクライアントにプッシュ"
-use-subscription-hook -> react-component: "5. イベントをリスナーに発行"
-react-component -> react-component: "6. UIを更新"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![useSubscription](assets/diagram/use-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## パラメータ
 

package/docs/hooks-use-subscription.md

@@ -10,36 +10,11 @@ The hook abstracts the complexity of managing a WebSocket connection. When a com
 
 When the backend service publishes an event to that channel, the hook's subscription object emits the event, which your component can listen for.
 
-```d2
-direction: down
+The following diagram illustrates this data flow:
 
-react-component: {
-  label: "React Component"
-  shape: rectangle
-}
-
-use-subscription-hook: {
-  label: "useSubscription Hook"
-  shape: rectangle
-}
-
-websocket-server: {
-  label: "WebSocket Server"
-  shape: rectangle
-}
-
-backend-service: {
-  label: "Backend Service"
-  shape: rectangle
-}
-
-react-component -> use-subscription-hook: "1. Call with channel ID"
-use-subscription-hook -> websocket-server: "2. Connect & Subscribe to namespaced channel"
-backend-service -> websocket-server: "3. Publish event (e.g., 'invoice.paid')"
-websocket-server -> use-subscription-hook: "4. Push event to client"
-use-subscription-hook -> react-component: "5. Emit event to listener"
-react-component -> react-component: "6. Update UI"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![useSubscription](assets/diagram/use-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Parameters
 

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

@@ -10,36 +10,9 @@
 
 當後端服務向該頻道發布事件時，此 hook 的訂閱物件會發出該事件，您的元件可以監聽該事件。
 
-```d2
-direction: down
-
-react-component: {
-  label: "React Component"
-  shape: rectangle
-}
-
-use-subscription-hook: {
-  label: "useSubscription Hook"
-  shape: rectangle
-}
-
-websocket-server: {
-  label: "WebSocket Server"
-  shape: rectangle
-}
-
-backend-service: {
-  label: "Backend Service"
-  shape: rectangle
-}
-
-react-component -> use-subscription-hook: "1. Call with channel ID"
-use-subscription-hook -> websocket-server: "2. Connect & Subscribe to namespaced channel"
-backend-service -> websocket-server: "3. Publish event (e.g., 'invoice.paid')"
-websocket-server -> use-subscription-hook: "4. Push event to client"
-use-subscription-hook -> react-component: "5. Emit event to listener"
-react-component -> react-component: "6. Update UI"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![useSubscription](assets/diagram/use-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 參數
 

package/docs/hooks-use-subscription.zh.md

@@ -10,36 +10,9 @@
 
 当后端服务向该通道发布事件时，Hook 的订阅对象会发出该事件，您的组件可以监听该事件。
 
-```d2
-direction: down
-
-react-component: {
-  label: "React 组件"
-  shape: rectangle
-}
-
-use-subscription-hook: {
-  label: "useSubscription Hook"
-  shape: rectangle
-}
-
-websocket-server: {
-  label: "WebSocket 服务器"
-  shape: rectangle
-}
-
-backend-service: {
-  label: "后端服务"
-  shape: rectangle
-}
-
-react-component -> use-subscription-hook: "1. 使用 channel ID 调用"
-use-subscription-hook -> websocket-server: "2. 连接并订阅命名空间化的 channel"
-backend-service -> websocket-server: "3. 发布事件（例如 'invoice.paid'）"
-websocket-server -> use-subscription-hook: "4. 将事件推送至客户端"
-use-subscription-hook -> react-component: "5. 向监听器发出事件"
-react-component -> react-component: "6. 更新 UI"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![useSubscription](assets/diagram/use-subscription-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 参数
 

package/docs/providers-payment-provider.ja.md

@@ -8,35 +8,9 @@
 
 このプロバイダーは、マウント時にPayment Kitのバックエンドから設定データを初期化して取得します。このデータは、ユーザーのセッションやその他のユーティリティとともに、`usePaymentContext`フックを介してすべての子孫コンポーネントで利用可能になります。このパターンにより、支払いコンポーネントはプロップのバケツリレー（prop drilling）なしで、常に必要なコンテキストにアクセスできるようになります。
 
-```d2
-direction: down
-
-Your-Application: {
-  label: "あなたのアプリケーション"
-  shape: rectangle
-
-  PaymentProvider: {
-    label: "PaymentProvider"
-    style.fill: "#d1e7dd"
-  }
-
-  Payment-Components: {
-    label: "支払いコンポーネント\n(例: CheckoutForm)"
-    shape: rectangle
-    style.fill: "#cfe2ff"
-  }
-}
-
-Payment-Kit-API: {
-  label: "Payment Kit API"
-  shape: cylinder
-}
-
-Your-Application.PaymentProvider -> Payment-Kit-API: "1. 設定とメソッドを取得"
-Your-Application.PaymentProvider -> Your-Application.Payment-Components: "2. コンテキストを提供 (セッション、設定、APIクライアント)"
-Your-Application.Payment-Components -> Payment-Kit-API: "3. APIコールを作成 (例: チェックアウト作成)"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PaymentProvider](assets/diagram/payment-provider-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## セットアップと使用法
 

package/docs/providers-payment-provider.md

@@ -8,35 +8,11 @@ Nearly every component and hook in this library requires being nested within a `
 
 The provider initializes and fetches configuration data from the Payment Kit backend when it mounts. This data, along with the user's session and other utilities, is then made available to any descendant component via the `usePaymentContext` hook. This pattern ensures that your payment components always have access to the necessary context without prop drilling.
 
-```d2
-direction: down
-
-Your-Application: {
-  label: "Your Application"
-  shape: rectangle
-
-  PaymentProvider: {
-    label: "PaymentProvider"
-    style.fill: "#d1e7dd"
-  }
-
-  Payment-Components: {
-    label: "Payment Components\n(e.g., CheckoutForm)"
-    shape: rectangle
-    style.fill: "#cfe2ff"
-  }
-}
-
-Payment-Kit-API: {
-  label: "Payment Kit API"
-  shape: cylinder
-}
+The following diagram illustrates this flow:
 
-Your-Application.PaymentProvider -> Payment-Kit-API: "1. Fetches settings & methods"
-Your-Application.PaymentProvider -> Your-Application.Payment-Components: "2. Provides context (session, settings, API client)"
-Your-Application.Payment-Components -> Payment-Kit-API: "3. Makes API calls (e.g., create checkout)"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PaymentProvider](assets/diagram/payment-provider-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Setup and Usage
 

package/docs/providers-payment-provider.zh-TW.md

@@ -8,35 +8,9 @@
 
 該提供者在掛載時會初始化並從 Payment Kit 後端取得設定資料。這些資料，連同使用者的 session 和其他工具，會透過 `usePaymentContext` 掛鉤提供給任何後代元件。這種模式確保您的支付元件始終能夠存取必要的上下文，而無需透過屬性傳遞。
 
-```d2
-direction: down
-
-Your-Application: {
-  label: "您的應用程式"
-  shape: rectangle
-
-  PaymentProvider: {
-    label: "PaymentProvider"
-    style.fill: "#d1e7dd"
-  }
-
-  Payment-Components: {
-    label: "支付元件\n(例如 CheckoutForm)"
-    shape: rectangle
-    style.fill: "#cfe2ff"
-  }
-}
-
-Payment-Kit-API: {
-  label: "Payment Kit API"
-  shape: cylinder
-}
-
-Your-Application.PaymentProvider -> Payment-Kit-API: "1. 取得設定與方法"
-Your-Application.PaymentProvider -> Your-Application.Payment-Components: "2. 提供上下文 (session、設定、API 客戶端)"
-Your-Application.Payment-Components -> Payment-Kit-API: "3. 發起 API 呼叫 (例如建立結帳)"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PaymentProvider](assets/diagram/payment-provider-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 設定與使用
 

package/docs/providers-payment-provider.zh.md

@@ -8,35 +8,9 @@
 
 提供者在挂载时会初始化并从 Payment Kit 后端获取配置数据。这些数据连同用户会话和其他实用工具，通过 `usePaymentContext` 钩子提供给任何后代组件。这种模式确保您的支付组件始终能够访问必要的上下文，而无需进行属性钻取（prop drilling）。
 
-```d2
-direction: down
-
-Your-Application: {
-  label: "你的应用程序"
-  shape: rectangle
-
-  PaymentProvider: {
-    label: "PaymentProvider"
-    style.fill: "#d1e7dd"
-  }
-
-  Payment-Components: {
-    label: "支付组件\n（例如，CheckoutForm）"
-    shape: rectangle
-    style.fill: "#cfe2ff"
-  }
-}
-
-Payment-Kit-API: {
-  label: "Payment Kit API"
-  shape: cylinder
-}
-
-Your-Application.PaymentProvider -> Payment-Kit-API: "1. 获取设置和方法"
-Your-Application.PaymentProvider -> Your-Application.Payment-Components: "2. 提供上下文（会话、设置、API 客户端）"
-Your-Application.Payment-Components -> Payment-Kit-API: "3. 发起 API 调用（例如，创建结账）"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9 -->
+![PaymentProvider](assets/diagram/payment-provider-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 设置和使用
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.22.27",
+  "version": "1.22.28",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.22.27",
+    "@blocklet/payment-types": "1.22.28",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "7a75205c37accdd4146b29729ca81f8bbc2be38e"
+  "gitHead": "b3c8797e5ffe68ae3a0de1962b1d076a9d2fef33"
 }