drawui-react 0.3.5 → 0.4.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 drawui contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 drawui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,127 +1,484 @@
-# drawui-react
-
-**简体中文** ｜ [English](#english)
-
-基于 [drawui-core](https://www.npmjs.com/package/drawui-core) 的 React 封装，提供开箱即用的画布组件。
-
-## 安装
-
-```bash
-npm install drawui-react   # 自动安装 drawui-core
-```
-
-## 用法
-
-```tsx
-import { CanvasBoard } from 'drawui-react'
-import 'drawui-react/styles.css'
-import type { Editor, EditorData } from 'drawui-core'
-
-export function App() {
-  return (
-    <CanvasBoard
-      themeColor="#3b82f6"
-      language="zh-CN"
-      onChange={(data: EditorData) => console.log(data.shapes.length)}
-      onReady={(editor: Editor) => editor.setShapes([])}
-    />
-  )
-}
-```
-
-> 样式需单独引入：`import 'drawui-react/styles.css'`
-
-## `<CanvasBoard>` 主要属性
-
-| 属性 | 类型 | 说明 |
-| --- | --- | --- |
-| `initialTool` | `ToolType` | 初始工具，默认 `'select'` |
-| `themeColor` | `string` | 主题主色（选中态 / 手柄 / 强调色），默认 `#3b82f6` |
-| `language` | `'zh-CN' \| 'en-US'` | 界面语言，默认 `'zh-CN'` |
-| `data` | `Shape[]` | 初始图形；传入后不读写 localStorage |
-| `onChange` | `(data: EditorData) => void` | 图形 / 相机变化时回调 |
-| `onReady` | `(editor: Editor) => void` | 编辑器实例就绪，可拿到 `Editor` 完全控制 |
-
-## 导出组件
-
-- `CanvasBoard` — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
-- `Toolbar` — 工具栏
-- `ZoomControl` — 缩放控件
-
-## 依赖
-
-- `react` / `react-dom` ^18.3（peerDependencies）
-- `drawui-core`（自动安装）
-
-## 使用 drawui 的项目
-
-- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
-
-## License
-
-MIT
-
----
-
-# English
-
-[简体中文](#drawui-react) ｜ **English**
-
-React wrapper for [drawui-core](https://www.npmjs.com/package/drawui-core), with drop-in canvas components.
-
-## Install
-
-```bash
-npm install drawui-react   # installs drawui-core automatically
-```
-
-## Usage
-
-```tsx
-import { CanvasBoard } from 'drawui-react'
-import 'drawui-react/styles.css'
-import type { Editor, EditorData } from 'drawui-core'
-
-export function App() {
-  return (
-    <CanvasBoard
-      themeColor="#3b82f6"
-      language="en-US"
-      onChange={(data: EditorData) => console.log(data.shapes.length)}
-      onReady={(editor: Editor) => editor.setShapes([])}
-    />
-  )
-}
-```
-
-> The stylesheet must be imported separately: `import 'drawui-react/styles.css'`
-
-## `<CanvasBoard>` props
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `initialTool` | `ToolType` | Initial tool, defaults to `'select'` |
-| `themeColor` | `string` | Theme accent (selection / handles / highlights), defaults to `#3b82f6` |
-| `language` | `'zh-CN' \| 'en-US'` | UI language, defaults to `'zh-CN'` |
-| `data` | `Shape[]` | Initial shapes; when provided, localStorage is not read or written |
-| `onChange` | `(data: EditorData) => void` | Called when shapes / camera change |
-| `onReady` | `(editor: Editor) => void` | Called once the editor is ready (full `Editor` access) |
-
-## Exported components
-
-- `CanvasBoard` — the main board (toolbar / zoom / style panel / mind-map panel, …)
-- `Toolbar` — the toolbar
-- `ZoomControl` — the zoom control
-
-## Dependencies
-
-- `react` / `react-dom` ^18.3 (peerDependencies)
-- `drawui-core` (installed automatically)
-
-## Projects using drawui
-
-- **[myBookEditor](https://github.com/weishell/myBookEditor)** — a rich-text / document editor built on [Slate.js](https://github.com/ianstormtaylor/slate). It embeds drawui boards: insert and edit a board right inside a document to draw diagrams, UML class diagrams and mind maps, and export / download them along with the document.
-
-## License
-
-MIT
+# drawui-react
+
+**简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+基于 [drawui-core](https://www.npmjs.com/package/drawui-core) 的 React 封装，提供开箱即用的画布组件。
+
+## 安装
+
+```bash
+npm install drawui-react   # 自动安装 drawui-core
+```
+
+## 用法
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="zh-CN"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> 样式需单独引入：`import 'drawui-react/styles.css'`
+
+## `<CanvasBoard>` 主要属性
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | 初始工具，默认 `'select'` |
+| `themeColor` | `string` | 主题主色（选中态 / 手柄 / 强调色），默认 `#3b82f6` |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 界面语言，默认 `'zh-CN'` |
+| `data` | `Shape[]` | 初始图形；传入后不读写 localStorage |
+| `onChange` | `(data: EditorData) => void` | 图形 / 相机变化时回调 |
+| `onReady` | `(editor: Editor) => void` | 编辑器实例就绪，可拿到 `Editor` 完全控制 |
+
+## 导出组件
+
+- `CanvasBoard` — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
+- `Toolbar` — 工具栏
+- `ZoomControl` — 缩放控件
+
+## 依赖
+
+- `react` / `react-dom` ^18.3（peerDependencies）
+- `drawui-core`（自动安装）
+
+## 使用 drawui 的项目
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
+
+## 更新日志
+
+### v0.4.0
+
+- 💾 **工具栏新增「导出数据 / 导入数据」**：把完整文档（图形 + 相机 + 版本号）存成 JSON，下次导入即可继续绘制；导入成功提示「已恢复 N 个图形」，导入失败（选错文件 / 格式不对）显示红色 ✕ 提示，不再无声无息（基于 `drawui-core` 的 `exportJSON` / `importJSON`）。
+- 🎛️ **图标库面板大幅扩展**：新增「表情」分类（113 个 Twemoji 表情，CC BY 4.0 可免费商用）与 12 个 Lucide 补充分类（天气 / 交通 / 自然 / 建筑 / 医疗 / 购物 / 科学 / 动物 / 时间 / 编辑 / 食物 / 通讯）；**移除全部商业品牌图标**（商标侵权风险）；工具栏入口图标改为线稿**笑脸**，语义更直观。
+- 📦 依赖的 `drawui-core` 同步升级到 `0.4.0`。
+
+### v0.3.6
+
+- 🌏 `language` 新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种），画布内所有界面文案同步翻译。
+- 📦 依赖的 `drawui-core` 同步升级到 `0.3.6`（新增 `LANGUAGES` 导出，含各语言本族语名称）。
+- ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
+
+> 更早版本的完整记录见仓库根目录 README。
+
+## License
+
+MIT
+
+---
+
+# 繁體中文
+
+[简体中文](#drawui-react) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+以 [drawui-core](https://www.npmjs.com/package/drawui-core) 為基礎的 React 封裝，提供開箱即用的畫布元件。
+
+## 安裝
+
+```bash
+npm install drawui-react   # 會自動安裝 drawui-core
+```
+
+## 用法
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="zh-TW"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> 樣式需單獨引入：`import 'drawui-react/styles.css'`
+
+## `<CanvasBoard>` 主要屬性
+
+| 屬性 | 型別 | 說明 |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | 初始工具，預設 `'select'` |
+| `themeColor` | `string` | 主題主色（選取態／手柄／強調色），預設 `#3b82f6` |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 介面語言，預設 `'zh-CN'` |
+| `data` | `Shape[]` | 初始圖形；傳入後不讀寫 localStorage |
+| `onChange` | `(data: EditorData) => void` | 圖形／相機變化時回呼 |
+| `onReady` | `(editor: Editor) => void` | 編輯器實例就緒，可取得 `Editor` 完全控制 |
+
+## 匯出元件
+
+- `CanvasBoard` — 主畫布（含工具列／縮放／樣式面板／心智圖面板等）
+- `Toolbar` — 工具列
+- `ZoomControl` — 縮放控制項
+
+## 相依
+
+- `react` / `react-dom` ^18.3（peerDependencies）
+- `drawui-core`（自動安裝）
+
+## 使用 drawui 的專案
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
+
+## License
+
+MIT
+
+---
+
+# English
+
+[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+React wrapper for [drawui-core](https://www.npmjs.com/package/drawui-core), with drop-in canvas components.
+
+## Install
+
+```bash
+npm install drawui-react   # installs drawui-core automatically
+```
+
+## Usage
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="en-US"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> The stylesheet must be imported separately: `import 'drawui-react/styles.css'`
+
+## `<CanvasBoard>` props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | Initial tool, defaults to `'select'` |
+| `themeColor` | `string` | Theme accent (selection / handles / highlights), defaults to `#3b82f6` |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI language, defaults to `'zh-CN'` |
+| `data` | `Shape[]` | Initial shapes; when provided, localStorage is not read or written |
+| `onChange` | `(data: EditorData) => void` | Called when shapes / camera change |
+| `onReady` | `(editor: Editor) => void` | Called once the editor is ready (full `Editor` access) |
+
+## Exported components
+
+- `CanvasBoard` — the main board (toolbar / zoom / style panel / mind-map panel, …)
+- `Toolbar` — the toolbar
+- `ZoomControl` — the zoom control
+
+## Dependencies
+
+- `react` / `react-dom` ^18.3 (peerDependencies)
+- `drawui-core` (installed automatically)
+
+## Projects using drawui
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — a rich-text / document editor built on [Slate.js](https://github.com/ianstormtaylor/slate). It embeds drawui boards: insert and edit a board right inside a document to draw diagrams, UML class diagrams and mind maps, and export / download them along with the document.
+
+## Changelog
+
+### v0.4.0
+
+- 💾 **New "Export data / Import data" toolbar actions**: save the full document (shapes + camera + version) as JSON and import it later to keep drawing. Successful import shows "restored N shapes"; a wrong file / bad format shows a red ✕ failure toast — no more silent no-ops (backed by `exportJSON` / `importJSON` from `drawui-core`).
+- 🎛️ **Icon picker greatly extended**: new "Emoji" category (113 Twemoji glyphs, CC BY 4.0 free for commercial use) plus 12 supplemental Lucide categories (weather / transport / nature / building / medical / shopping / science / animal / time / edit / food / communication). **All commercial brand icons removed** (trademark risk). The toolbar entry icon is now a line-art **smiley**, clearer at a glance.
+- 📦 Bundled `drawui-core` is bumped to `0.4.0`.
+
+### v0.3.6
+
+- 🌏 `language` now accepts 5 more languages: `zh-TW`, `ja-JP`, `ko-KR`, `de-DE`, `fr-FR` (7 in total together with Simplified Chinese and English); every UI string inside the board is translated.
+- 📦 The bundled `drawui-core` is bumped to `0.3.6` (adds the `LANGUAGES` export with each language's native name).
+- ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
+
+> The full history lives in the repository root README.
+
+## License
+
+MIT
+
+---
+
+# 日本語
+
+[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+[drawui-core](https://www.npmjs.com/package/drawui-core) の React ラッパー。すぐに使えるキャンバスコンポーネントを提供します。
+
+## インストール
+
+```bash
+npm install drawui-react   # drawui-core も自動でインストールされます
+```
+
+## 使い方
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="ja-JP"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> スタイルは別途インポートが必要です：`import 'drawui-react/styles.css'`
+
+## `<CanvasBoard>` の主な props
+
+| props | 型 | 説明 |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | 初期ツール。既定は `'select'` |
+| `themeColor` | `string` | テーマのメインカラー（選択状態／ハンドル／強調色）。既定は `#3b82f6` |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI の言語。既定は `'zh-CN'` |
+| `data` | `Shape[]` | 初期図形。渡した場合 localStorage の読み書きは行いません |
+| `onChange` | `(data: EditorData) => void` | 図形／カメラの変化時に呼ばれます |
+| `onReady` | `(editor: Editor) => void` | エディタの準備完了時に呼ばれ、`Editor` を完全に操作できます |
+
+## エクスポートされるコンポーネント
+
+- `CanvasBoard` — メインのボード（ツールバー／ズーム／スタイルパネル／マインドマップパネルなど）
+- `Toolbar` — ツールバー
+- `ZoomControl` — ズームコントロール
+
+## 依存関係
+
+- `react` / `react-dom` ^18.3（peerDependencies）
+- `drawui-core`（自動でインストール）
+
+## drawui を利用しているプロジェクト
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
+
+## ライセンス
+
+MIT
+
+---
+
+# 한국어
+
+[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+[drawui-core](https://www.npmjs.com/package/drawui-core) 기반의 React 래퍼로, 바로 쓸 수 있는 캔버스 컴포넌트를 제공합니다.
+
+## 설치
+
+```bash
+npm install drawui-react   # drawui-core도 자동으로 설치됩니다
+```
+
+## 사용법
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="ko-KR"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> 스타일은 별도로 불러와야 합니다: `import 'drawui-react/styles.css'`
+
+## `<CanvasBoard>` 주요 props
+
+| props | 타입 | 설명 |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | 초기 도구, 기본값 `'select'` |
+| `themeColor` | `string` | 테마 기본 색상(선택 상태／핸들／강조색), 기본값 `#3b82f6` |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI 언어, 기본값 `'zh-CN'` |
+| `data` | `Shape[]` | 초기 도형. 넘기면 localStorage를 읽거나 쓰지 않습니다 |
+| `onChange` | `(data: EditorData) => void` | 도형／카메라 변경 시 호출 |
+| `onReady` | `(editor: Editor) => void` | 에디터 준비 완료 시 호출되며 `Editor`를 완전히 제어할 수 있습니다 |
+
+## 내보내는 컴포넌트
+
+- `CanvasBoard` — 메인 보드(툴바／확대·축소／스타일 패널／마인드맵 패널 등)
+- `Toolbar` — 툴바
+- `ZoomControl` — 확대·축소 컨트롤
+
+## 의존성
+
+- `react` / `react-dom` ^18.3 (peerDependencies)
+- `drawui-core` (자동 설치)
+
+## drawui를 사용하는 프로젝트
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
+
+## 라이선스
+
+MIT
+
+---
+
+# Deutsch
+
+[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
+
+React-Wrapper für [drawui-core](https://www.npmjs.com/package/drawui-core) mit sofort einsetzbaren Canvas-Komponenten.
+
+## Installation
+
+```bash
+npm install drawui-react   # installiert drawui-core automatisch
+```
+
+## Verwendung
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="de-DE"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> Das Stylesheet muss separat importiert werden: `import 'drawui-react/styles.css'`
+
+## `<CanvasBoard>`-Props
+
+| Prop | Typ | Beschreibung |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | Startwerkzeug, Standard `'select'` |
+| `themeColor` | `string` | Akzentfarbe des Themes (Auswahl / Griffe / Hervorhebungen), Standard `#3b82f6` |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI-Sprache, Standard `'zh-CN'` |
+| `data` | `Shape[]` | Anfangsformen; wenn gesetzt, wird localStorage nicht gelesen oder geschrieben |
+| `onChange` | `(data: EditorData) => void` | Wird bei Änderungen an Formen / Kamera aufgerufen |
+| `onReady` | `(editor: Editor) => void` | Wird aufgerufen, sobald der Editor bereit ist (voller Zugriff auf `Editor`) |
+
+## Exportierte Komponenten
+
+- `CanvasBoard` — das Hauptboard (Toolbar / Zoom / Stil-Panel / Mindmap-Panel, …)
+- `Toolbar` — die Toolbar
+- `ZoomControl` — die Zoom-Steuerung
+
+## Abhängigkeiten
+
+- `react` / `react-dom` ^18.3 (peerDependencies)
+- `drawui-core` (wird automatisch installiert)
+
+## Projekte, die drawui verwenden
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — ein Rich-Text-/Dokumenteneditor auf Basis von [Slate.js](https://github.com/ianstormtaylor/slate). Er bindet drawui-Boards ein: Boards direkt im Dokument einfügen und bearbeiten, um Diagramme, UML-Klassendiagramme und Mindmaps zu zeichnen und zusammen mit dem Dokument zu exportieren / herunterzuladen.
+
+## Lizenz
+
+MIT
+
+---
+
+# Français
+
+[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
+
+Wrapper React pour [drawui-core](https://www.npmjs.com/package/drawui-core), avec des composants canvas prêts à l'emploi.
+
+## Installation
+
+```bash
+npm install drawui-react   # installe drawui-core automatiquement
+```
+
+## Utilisation
+
+```tsx
+import { CanvasBoard } from 'drawui-react'
+import 'drawui-react/styles.css'
+import type { Editor, EditorData } from 'drawui-core'
+
+export function App() {
+  return (
+    <CanvasBoard
+      themeColor="#3b82f6"
+      language="fr-FR"
+      onChange={(data: EditorData) => console.log(data.shapes.length)}
+      onReady={(editor: Editor) => editor.setShapes([])}
+    />
+  )
+}
+```
+
+> La feuille de style doit être importée séparément : `import 'drawui-react/styles.css'`
+
+## Props de `<CanvasBoard>`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `initialTool` | `ToolType` | Outil initial, `'select'` par défaut |
+| `themeColor` | `string` | Couleur d'accentuation du thème (sélection / poignées / surlignage), `#3b82f6` par défaut |
+| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | Langue de l'interface, `'zh-CN'` par défaut |
+| `data` | `Shape[]` | Formes initiales ; si fourni, localStorage n'est ni lu ni écrit |
+| `onChange` | `(data: EditorData) => void` | Appelé lors des changements de formes / caméra |
+| `onReady` | `(editor: Editor) => void` | Appelé dès que l'éditeur est prêt (accès complet à `Editor`) |
+
+## Composants exportés
+
+- `CanvasBoard` — le tableau principal (barre d'outils / zoom / panneau de style / panneau de carte mentale, …)
+- `Toolbar` — la barre d'outils
+- `ZoomControl` — le contrôle de zoom
+
+## Dépendances
+
+- `react` / `react-dom` ^18.3 (peerDependencies)
+- `drawui-core` (installé automatiquement)
+
+## Projets utilisant drawui
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — un éditeur de texte enrichi / de documents basé sur [Slate.js](https://github.com/ianstormtaylor/slate). Il intègre les tableaux drawui : insérez et modifiez un tableau directement dans le document pour dessiner des schémas, des diagrammes de classes UML et des cartes mentales, puis exportez / téléchargez le tout avec le document.
+
+## Licence
+
+MIT