@blocklet/ui-react 3.2.19 → 3.3.1

package/docs/components-layout-dashboard.ja.md

@@ -4,55 +4,9 @@
 
 レイアウトは、ナビゲーション用の永続的なサイドバー、グローバルなアクションとユーザー情報用のヘッダー、そしてページ固有のコンテンツがレンダリングされるメインコンテンツエリアの3つの主要なセクションで構成されています。
 
-```d2
-direction: down
-
-Dashboard-Layout: {
-  label: "Dashboard コンポーネント"
-  shape: rectangle
-  grid-columns: 1
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Header: {
-    shape: rectangle
-    Logo: {}
-    HeaderAddons: {
-      label: "ヘッダーアドオン"
-      shape: rectangle
-      grid-columns: 1
-      SessionManager: {}
-      LocaleSelector: {}
-      ThemeToggle: {}
-    }
-  }
-
-  Sidebar: {
-    label: "サイドバー"
-    shape: rectangle
-    Navigation-Links: {
-      label: "ナビゲーションリンク"
-      shape: rectangle
-    }
-  }
-
-  Content-Area: {
-    label: "コンテンツエリア"
-    shape: rectangle
-    "ページ固有のコンテンツ (children)"
-  }
-}
-
-Blocklet-Metadata: {
-  label: "blocklet.yml"
-  shape: cylinder
-}
-
-Blocklet-Metadata -> Dashboard-Layout.Sidebar.Navigation-Links: "生成"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Dashboard](assets/diagram/dashboard-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本的な使用方法
 

package/docs/components-layout-dashboard.md

@@ -4,55 +4,11 @@ The `Dashboard` component provides a pre-built, responsive layout for blocklet a
 
 The layout is composed of three primary sections: a persistent sidebar for navigation, a header for global actions and user information, and a main content area where the page-specific content is rendered.
 
-```d2
-direction: down
-
-Dashboard-Layout: {
-  label: "Dashboard Component"
-  shape: rectangle
-  grid-columns: 1
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Header: {
-    shape: rectangle
-    Logo: {}
-    HeaderAddons: {
-      label: "Header Addons"
-      shape: rectangle
-      grid-columns: 1
-      SessionManager: {}
-      LocaleSelector: {}
-      ThemeToggle: {}
-    }
-  }
-
-  Sidebar: {
-    label: "Sidebar"
-    shape: rectangle
-    Navigation-Links: {
-      label: "Navigation Links"
-      shape: rectangle
-    }
-  }
-
-  Content-Area: {
-    label: "Content Area"
-    shape: rectangle
-    "Page-specific content (children)"
-  }
-}
-
-Blocklet-Metadata: {
-  label: "blocklet.yml"
-  shape: cylinder
-}
+The following diagram illustrates the component's structure and its relationship with the blocklet metadata:
 
-Blocklet-Metadata -> Dashboard-Layout.Sidebar.Navigation-Links: "Generates"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Dashboard](assets/diagram/dashboard-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Basic Usage
 
@@ -228,4 +184,4 @@ export default function DynamicDashboard() {
 
 ## Summary
 
-The `Dashboard` component is a powerful tool for quickly scaffolding application layouts. By leveraging blocklet metadata, it provides a structured, role-aware navigation system out of the box. For more foundational layout components, see the documentation for [Header](./components-layout-header.md) and [Footer](./components-layout-footer.md).
+The `Dashboard` component is a powerful tool for quickly scaffolding application layouts. By leveraging blocklet metadata, it provides a structured, role-aware navigation system out of the box. For more foundational layout components, see the documentation for [Header](./components-layout-header.md) and [Footer](./components-layout-footer.md).

package/docs/components-layout-dashboard.zh-TW.md

@@ -4,55 +4,9 @@
 
 該佈局由三個主要部分組成：一個用於導覽的常駐側邊欄、一個用於全域操作和使用者資訊的頁首，以及一個呈現特定頁面內容的主要內容區域。
 
-```d2
-direction: down
-
-Dashboard-Layout: {
-  label: "Dashboard 元件"
-  shape: rectangle
-  grid-columns: 1
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Header: {
-    shape: rectangle
-    Logo: {}
-    HeaderAddons: {
-      label: "頁首附加元件"
-      shape: rectangle
-      grid-columns: 1
-      SessionManager: {}
-      LocaleSelector: {}
-      ThemeToggle: {}
-    }
-  }
-
-  Sidebar: {
-    label: "側邊欄"
-    shape: rectangle
-    Navigation-Links: {
-      label: "導覽連結"
-      shape: rectangle
-    }
-  }
-
-  Content-Area: {
-    label: "內容區域"
-    shape: rectangle
-    "頁面特定內容 (children)"
-  }
-}
-
-Blocklet-Metadata: {
-  label: "blocklet.yml"
-  shape: cylinder
-}
-
-Blocklet-Metadata -> Dashboard-Layout.Sidebar.Navigation-Links: "生成"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Dashboard](assets/diagram/dashboard-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本用法
 

package/docs/components-layout-dashboard.zh.md

@@ -4,55 +4,9 @@
 
 该布局由三个主要部分组成：一个用于导航的持久侧边栏，一个用于全局操作和用户信息的头部，以及一个渲染特定页面内容的主内容区域。
 
-```d2
-direction: down
-
-Dashboard-Layout: {
-  label: "Dashboard 组件"
-  shape: rectangle
-  grid-columns: 1
-  style: {
-    stroke: "#888"
-    stroke-width: 2
-    stroke-dash: 4
-  }
-
-  Header: {
-    shape: rectangle
-    Logo: {}
-    HeaderAddons: {
-      label: "Header 附加组件"
-      shape: rectangle
-      grid-columns: 1
-      SessionManager: {}
-      LocaleSelector: {}
-      ThemeToggle: {}
-    }
-  }
-
-  Sidebar: {
-    label: "侧边栏"
-    shape: rectangle
-    Navigation-Links: {
-      label: "导航链接"
-      shape: rectangle
-    }
-  }
-
-  Content-Area: {
-    label: "内容区域"
-    shape: rectangle
-    "特定页面的内容 (children)"
-  }
-}
-
-Blocklet-Metadata: {
-  label: "blocklet.yml"
-  shape: cylinder
-}
-
-Blocklet-Metadata -> Dashboard-Layout.Sidebar.Navigation-Links: "生成"
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Dashboard](assets/diagram/dashboard-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本用法
 

package/docs/components-layout-header.ja.md

@@ -18,59 +18,9 @@
 
 以下の図は、`Header` のデータフローとコンポーネント構成を示しています。`blocklet.yml` ファイルから設定を読み込み、それを処理して、ロゴ、ナビゲーションリンク、ユーザーセッションコントロールなど、適切な UI 要素をレンダリングします。
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml"
-  shape: rectangle
-}
-
-Header-Component: {
-  label: "Header コンポーネント"
-  shape: rectangle
-
-  Blocklet-Metadata-Parser: {
-    label: "メタデータパーサー"
-  }
-
-  UI-Renderer: {
-    label: "UI レンダラー"
-    shape: rectangle
-
-    Logo
-    Navigation-Menu: {
-      label: "ナビゲーションメニュー"
-    }
-    Header-Addons: {
-      label: "ヘッダーアドオン"
-      shape: rectangle
-      grid-columns: 2
-      Session-Manager: {
-        label: "セッションマネージャー"
-      }
-      Locale-Selector: {
-        label: "ロケールセレクター"
-      }
-      Theme-Toggle: {
-        label: "テーマ切り替え"
-      }
-      Custom-Addons: {
-        label: "カスタムアドオン"
-      }
-    }
-  }
-
-  Blocklet-Metadata-Parser -> UI-Renderer: "データを提供"
-}
-
-blocklet-yml -> Header-Component.Blocklet-Metadata-Parser: "設定を読み込む"
-
-Header-Component.UI-Renderer.Logo
-Header-Component.UI-Renderer.Navigation-Menu
-Header-Component.UI-Renderer.Header-Addons
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Header](assets/diagram/header-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本的な使用法
 

package/docs/components-layout-header.md

@@ -18,59 +18,9 @@ Key features include:
 
 The diagram below illustrates the data flow and component composition of the `Header`. It reads configuration from the `blocklet.yml` file, processes it, and renders the appropriate UI elements, including the logo, navigation links, and user session controls.
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml"
-  shape: rectangle
-}
-
-Header-Component: {
-  label: "Header Component"
-  shape: rectangle
-
-  Blocklet-Metadata-Parser: {
-    label: "Metadata Parser"
-  }
-
-  UI-Renderer: {
-    label: "UI Renderer"
-    shape: rectangle
-
-    Logo
-    Navigation-Menu: {
-      label: "Navigation Menu"
-    }
-    Header-Addons: {
-      label: "Header Addons"
-      shape: rectangle
-      grid-columns: 2
-      Session-Manager: {
-        label: "Session Manager"
-      }
-      Locale-Selector: {
-        label: "Locale Selector"
-      }
-      Theme-Toggle: {
-        label: "Theme Toggle"
-      }
-      Custom-Addons: {
-        label: "Custom Addons"
-      }
-    }
-  }
-
-  Blocklet-Metadata-Parser -> UI-Renderer: "Provides data"
-}
-
-blocklet-yml -> Header-Component.Blocklet-Metadata-Parser: "Reads config"
-
-Header-Component.UI-Renderer.Logo
-Header-Component.UI-Renderer.Navigation-Menu
-Header-Component.UI-Renderer.Header-Addons
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Header](assets/diagram/header-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Basic Usage
 

package/docs/components-layout-header.zh-TW.md

@@ -18,59 +18,9 @@
 
 下圖說明了 `Header` 的資料流和元件組成。它從 `blocklet.yml` 檔案中讀取設定，進行處理，並渲染相應的 UI 元素，包括標誌、導覽連結和使用者會話控制項。
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml"
-  shape: rectangle
-}
-
-Header-Component: {
-  label: "Header 元件"
-  shape: rectangle
-
-  Blocklet-Metadata-Parser: {
-    label: "元資料解析器"
-  }
-
-  UI-Renderer: {
-    label: "UI 渲染器"
-    shape: rectangle
-
-    Logo
-    Navigation-Menu: {
-      label: "導覽選單"
-    }
-    Header-Addons: {
-      label: "頁首附加元件"
-      shape: rectangle
-      grid-columns: 2
-      Session-Manager: {
-        label: "會話管理器"
-      }
-      Locale-Selector: {
-        label: "語系選擇器"
-      }
-      Theme-Toggle: {
-        label: "主題切換器"
-      }
-      Custom-Addons: {
-        label: "自訂附加元件"
-      }
-    }
-  }
-
-  Blocklet-Metadata-Parser -> UI-Renderer: "提供資料"
-}
-
-blocklet-yml -> Header-Component.Blocklet-Metadata-Parser: "讀取設定"
-
-Header-Component.UI-Renderer.Logo
-Header-Component.UI-Renderer.Navigation-Menu
-Header-Component.UI-Renderer.Header-Addons
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Header](assets/diagram/header-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本用法
 

package/docs/components-layout-header.zh.md

@@ -18,59 +18,9 @@
 
 下图说明了 `Header` 的数据流和组件构成。它从 `blocklet.yml` 文件中读取配置，进行处理，并渲染相应的 UI 元素，包括 logo、导航链接和用户会话控件。
 
-```d2
-direction: down
-
-blocklet-yml: {
-  label: "blocklet.yml"
-  shape: rectangle
-}
-
-Header-Component: {
-  label: "Header 组件"
-  shape: rectangle
-
-  Blocklet-Metadata-Parser: {
-    label: "元数据解析器"
-  }
-
-  UI-Renderer: {
-    label: "UI 渲染器"
-    shape: rectangle
-
-    Logo
-    Navigation-Menu: {
-      label: "导航菜单"
-    }
-    Header-Addons: {
-      label: "Header 插件"
-      shape: rectangle
-      grid-columns: 2
-      Session-Manager: {
-        label: "会话管理器"
-      }
-      Locale-Selector: {
-        label: "语言选择器"
-      }
-      Theme-Toggle: {
-        label: "主题切换器"
-      }
-      Custom-Addons: {
-        label: "自定义插件"
-      }
-    }
-  }
-
-  Blocklet-Metadata-Parser -> UI-Renderer: "提供数据"
-}
-
-blocklet-yml -> Header-Component.Blocklet-Metadata-Parser: "读取配置"
-
-Header-Component.UI-Renderer.Logo
-Header-Component.UI-Renderer.Navigation-Menu
-Header-Component.UI-Renderer.Header-Addons
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Header](assets/diagram/header-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 基本用法
 

package/docs/components-layout.ja.md

@@ -4,28 +4,9 @@
 
 これらのコンポーネントは、以下に示すように、アプリケーションの主要な視覚構造を形成します。
 
-```d2
-direction: down
-
-"アプリケーション UI": {
-  shape: rectangle
-
-  Header: {
-    label: "ヘッダー"
-    shape: rectangle
-  }
-
-  Dashboard: {
-    label: "ダッシュボード / メインコンテンツ"
-    shape: rectangle
-  }
-
-  Footer: {
-    label: "フッター"
-    shape: rectangle
-  }
-}
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Layout](assets/diagram/layout-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 このセクションでは、利用可能な主要なレイアウトコンポーネントの概要を説明します。詳細な実装ガイドと API リファレンスについては、各コンポーネントの特定のドキュメントを参照してください。
 

package/docs/components-layout.md

@@ -4,28 +4,9 @@ Layout components are the foundational building blocks for structuring your bloc
 
 These components form the primary visual structure of an application, as illustrated below:
 
-```d2
-direction: down
-
-"Application UI": {
-  shape: rectangle
-
-  Header: {
-    label: "Header"
-    shape: rectangle
-  }
-
-  Dashboard: {
-    label: "Dashboard / Main Content"
-    shape: rectangle
-  }
-
-  Footer: {
-    label: "Footer"
-    shape: rectangle
-  }
-}
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Layout](assets/diagram/layout-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 This section provides an overview of the primary layout components available. For detailed implementation guides and API references, please refer to the specific documentation for each component.
 

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

@@ -4,28 +4,9 @@
 
 這些元件構成應用程式的主要視覺結構，如下圖所示：
 
-```d2
-direction: down
-
-"應用程式 UI": {
-  shape: rectangle
-
-  Header: {
-    label: "Header"
-    shape: rectangle
-  }
-
-  Dashboard: {
-    label: "Dashboard / 主要內容"
-    shape: rectangle
-  }
-
-  Footer: {
-    label: "Footer"
-    shape: rectangle
-  }
-}
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Layout](assets/diagram/layout-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 本節概述了可用的主要佈局元件。有關詳細的實作指南和 API 參考，請參閱每個元件的具體文件。
 

package/docs/components-layout.zh.md

@@ -4,28 +4,9 @@
 
 这些组件构成了应用的主要视觉结构，如下图所示：
 
-```d2
-direction: down
-
-"应用 UI": {
-  shape: rectangle
-
-  Header: {
-    label: "Header"
-    shape: rectangle
-  }
-
-  Dashboard: {
-    label: "Dashboard / 主内容"
-    shape: rectangle
-  }
-
-  Footer: {
-    label: "Footer"
-    shape: rectangle
-  }
-}
-```
+<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
+![Layout](assets/diagram/layout-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 本节概述了可用的主要布局组件。有关详细的实现指南和 API 参考，请参阅每个组件的具体文档。
 

package/docs/components-notifications.ja.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"
-  }
-}
-
-# Defines the flow of the notification process
-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.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## コアコンポーネント