@xiangfa/mindmap 0.3.0 → 0.5.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright [2026] [U14App Team]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -2,26 +2,29 @@
 
 # Open MindMap
 
+[![npm version](https://img.shields.io/npm/v/@xiangfa/mindmap)](https://www.npmjs.com/package/@xiangfa/mindmap)
+[![npm downloads](https://img.shields.io/npm/dm/@xiangfa/mindmap)](https://www.npmjs.com/package/@xiangfa/mindmap)
+[![license](https://img.shields.io/npm/l/@xiangfa/mindmap)](./LICENSE)
+[![react](https://img.shields.io/badge/react-%E2%89%A518-blue)](https://react.dev)
+
 A beautiful, interactive mind map component for React.
 
 **Natively supports AI stream output** with Markdown list syntax and **iOS-style UI**.
 
 Zero dependencies. SVG-based. Keyboard-first. Dark mode ready.
 
-[![npm version](https://img.shields.io/npm/v/@xiangfa/mindmap.svg?style=flat-square)](https://www.npmjs.com/package/@xiangfa/mindmap)
-[![npm downloads](https://img.shields.io/npm/dm/@xiangfa/mindmap.svg?style=flat-square)](https://www.npmjs.com/package/@xiangfa/mindmap)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/@xiangfa/mindmap?style=flat-square)](https://bundlephobia.com/package/@xiangfa/mindmap)
-[![license](https://img.shields.io/github/license/u14app/mindmap?style=flat-square)](https://github.com/u14app/mindmap/blob/main/LICENSE)
-
 English | [中文](README.zh-CN.md)
 
 </div>
 
 ---
 
+![Open MindMap](/public/screenshot.png)
+
 ## Features
 
 - **AI stream ready** — natively supports AI streaming output; feed a markdown list in, get a real-time mind map out
+- **Built-in AI generation** — connect any OpenAI-compatible API to generate mind maps from natural language; supports text, image, and PDF attachments
 - **Pure SVG rendering** — no canvas, no external layout engines, razor-sharp at any zoom level
 - **iOS-style UI** — frosted glass controls, rounded corners, smooth animations, clean and polished design
 - **Plugin system** — 7 built-in plugins for extended syntax (dotted lines, folding, multi-line, tags, cross-links, LaTeX, frontmatter); fully extensible
@@ -137,6 +140,38 @@ In readonly mode, users can still pan, zoom, and select nodes, but cannot create
 <MindMap data={data} theme="light" /> {/* always light */}
 ```
 
+### Custom Styling
+
+Override CSS custom properties on the container to customize colors, fonts, and more:
+
+```css
+/* Override theme variables */
+.mindmap-container {
+  --mindmap-root-bg: #1a73e8;
+  --mindmap-canvas-bg: #f0f4f8;
+  --mindmap-node-text: #1a1a2e;
+}
+```
+
+Target specific elements with semantic CSS classes:
+
+```css
+/* Style all edges */
+.mindmap-edge { stroke-width: 3; }
+
+/* Style root node background */
+.mindmap-node-root .mindmap-node-bg { fill: #6c5ce7; }
+```
+
+Customize individual branch colors via `data-branch-index`:
+
+```css
+.mindmap-edge[data-branch-index="0"] { stroke: #e74c3c; }
+.mindmap-edge[data-branch-index="1"] { stroke: #2ecc71; }
+```
+
+> See [Custom Styling Guide](docs/Custom%20Styling.md) for the full list of 30+ CSS variables, class selectors, and examples.
+
 ### Layout Direction
 
 ```tsx
@@ -237,6 +272,48 @@ function App() {
 }
 ```
 
+### AI Generation
+
+Add a built-in AI input bar to generate mind maps from natural language. Connects to any OpenAI-compatible API with streaming support:
+
+```tsx
+<MindMap
+  ai={{
+    apiUrl: "https://api.openai.com/v1/chat/completions",
+    apiKey: "sk-...",
+    model: "gpt-5",
+  }}
+/>
+```
+
+Enable file attachments (text, image, PDF):
+
+```tsx
+<MindMap
+  ai={{
+    apiUrl: "https://api.openai.com/v1/chat/completions",
+    apiKey: "sk-...",
+    model: "gpt-5",
+    attachments: ["text", "image", "pdf"],
+  }}
+/>
+```
+
+Customize the system prompt:
+
+```tsx
+<MindMap
+  ai={{
+    apiUrl: "https://api.openai.com/v1/chat/completions",
+    apiKey: "sk-...",
+    model: "gpt-5",
+    systemPrompt: "Generate a mind map about the given topic...",
+  }}
+/>
+```
+
+> **Security Note:** The API key is sent from the browser. For production, use a proxy endpoint to keep your key server-side.
+
 ### Listening for Changes
 
 ```tsx
@@ -405,6 +482,7 @@ Render mathematical formulas (requires [KaTeX](https://katex.org/)):
 | `messages`         | `Partial<MindMapMessages>`      | -            | Override any UI text string                                               |
 | `readonly`         | `boolean`                       | `false`      | Display-only mode (no editing, no creating)                               |
 | `toolbar`          | `boolean \| ToolbarConfig`      | `true`       | Show/hide zoom controls                                                   |
+| `ai`               | `MindMapAIConfig`               | -            | AI generation configuration (API endpoint, key, model, attachments)       |
 | `plugins`          | `MindMapPlugin[]`               | `allPlugins` | Plugins to enable for extended syntax                                     |
 | `onDataChange`     | `(data: MindMapData[]) => void` | -            | Called when the tree is modified by user interaction                      |
 
@@ -416,6 +494,28 @@ interface ToolbarConfig {
 }
 ```
 
+### MindMapAIConfig
+
+```ts
+type AIAttachmentType = "text" | "image" | "pdf";
+
+interface MindMapAIConfig {
+  apiUrl: string; // OpenAI-compatible API endpoint
+  apiKey: string; // API key (Bearer token)
+  model: string; // Model name (e.g., "gpt-5")
+  systemPrompt?: string; // Custom system prompt (has a built-in default)
+  attachments?: AIAttachmentType[]; // Allowed attachment types (default: [])
+}
+```
+
+| Field          | Type                 | Required | Description                                                                              |
+| -------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `apiUrl`       | `string`             | Yes      | OpenAI-compatible chat completions endpoint                                              |
+| `apiKey`       | `string`             | Yes      | API key sent as `Bearer` token                                                           |
+| `model`        | `string`             | Yes      | Model identifier (e.g., `gpt-5`, `deepseek-chat`)                                        |
+| `systemPrompt` | `string`             | No       | Override the built-in mind map generation prompt                                         |
+| `attachments`  | `AIAttachmentType[]` | No       | Enable file uploads: `"text"` (text/\*), `"image"` (image/\*), `"pdf"` (application/pdf) |
+
 ### Ref Methods
 
 | Method              | Returns         | Description                            |
@@ -531,4 +631,4 @@ Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md)
 
 ## License
 
-[MIT](LICENSE)
+[Apache-2.0](LICENSE)

package/README.zh-CN.md

@@ -2,26 +2,29 @@
 
 # Open MindMap
 
+[![npm version](https://img.shields.io/npm/v/@xiangfa/mindmap)](https://www.npmjs.com/package/@xiangfa/mindmap)
+[![npm downloads](https://img.shields.io/npm/dm/@xiangfa/mindmap)](https://www.npmjs.com/package/@xiangfa/mindmap)
+[![license](https://img.shields.io/npm/l/@xiangfa/mindmap)](./LICENSE)
+[![react](https://img.shields.io/badge/react-%E2%89%A518-blue)](https://react.dev)
+
 一个精美的 React 交互式思维导图组件。
 
 **原生支持 AI 流式输出**，使用 Markdown 列表语法，搭配 **iOS 风格 UI**。
 
 零依赖。基于 SVG。键盘优先。支持暗色模式。
 
-[![npm version](https://img.shields.io/npm/v/@xiangfa/mindmap.svg?style=flat-square)](https://www.npmjs.com/package/@xiangfa/mindmap)
-[![npm downloads](https://img.shields.io/npm/dm/@xiangfa/mindmap.svg?style=flat-square)](https://www.npmjs.com/package/@xiangfa/mindmap)
-[![bundle size](https://img.shields.io/bundlephobia/minzip/@xiangfa/mindmap?style=flat-square)](https://bundlephobia.com/package/@xiangfa/mindmap)
-[![license](https://img.shields.io/github/license/u14app/mindmap?style=flat-square)](https://github.com/u14app/mindmap/blob/main/LICENSE)
-
 [English](README.md) | 中文
 
 </div>
 
 ---
 
+![Open MindMap](/public/screenshot.png)
+
 ## 特性
 
 - **AI 流式输出** — 原生支持 AI 流式输出；输入 Markdown 列表，实时生成思维导图
+- **内置 AI 生成** — 连接任意 OpenAI 兼容 API，通过自然语言生成思维导图；支持文本、图片和 PDF 附件上传
 - **纯 SVG 渲染** — 无 Canvas、无外部布局引擎，任意缩放级别下都清晰锐利
 - **iOS 风格 UI** — 毛玻璃控件、圆角设计、流畅动画，简洁精致
 - **插件系统** — 7 个内置插件扩展语法（虚线、折叠、多行、标签、跨链接、LaTeX、frontmatter）；完全可扩展
@@ -137,6 +140,38 @@ const markdown = `
 <MindMap data={data} theme="light" /> {/* 始终亮色 */}
 ```
 
+### 自定义样式
+
+通过覆盖容器上的 CSS 自定义属性来定制颜色、字体等：
+
+```css
+/* 覆盖主题变量 */
+.mindmap-container {
+  --mindmap-root-bg: #1a73e8;
+  --mindmap-canvas-bg: #f0f4f8;
+  --mindmap-node-text: #1a1a2e;
+}
+```
+
+通过语义化 CSS 类选择器定制特定元素：
+
+```css
+/* 定制所有连线 */
+.mindmap-edge { stroke-width: 3; }
+
+/* 定制根节点背景 */
+.mindmap-node-root .mindmap-node-bg { fill: #6c5ce7; }
+```
+
+通过 `data-branch-index` 定制各分支颜色：
+
+```css
+.mindmap-edge[data-branch-index="0"] { stroke: #e74c3c; }
+.mindmap-edge[data-branch-index="1"] { stroke: #2ecc71; }
+```
+
+> 完整的 30+ CSS 变量、class 选择器和示例请参阅 [自定义样式指南](docs/Custom%20Styling.md)。
+
 ### 布局方向
 
 ```tsx
@@ -237,6 +272,48 @@ function App() {
 }
 ```
 
+### AI 生成
+
+添加内置 AI 输入栏，通过自然语言生成思维导图。支持连接任意 OpenAI 兼容 API 并流式输出：
+
+```tsx
+<MindMap
+  ai={{
+    apiUrl: "https://api.openai.com/v1/chat/completions",
+    apiKey: "sk-...",
+    model: "gpt-5",
+  }}
+/>
+```
+
+启用附件上传（文本、图片、PDF）：
+
+```tsx
+<MindMap
+  ai={{
+    apiUrl: "https://api.openai.com/v1/chat/completions",
+    apiKey: "sk-...",
+    model: "gpt-5",
+    attachments: ["text", "image", "pdf"],
+  }}
+/>
+```
+
+自定义系统提示词：
+
+```tsx
+<MindMap
+  ai={{
+    apiUrl: "https://api.openai.com/v1/chat/completions",
+    apiKey: "sk-...",
+    model: "gpt-5",
+    systemPrompt: "根据给定的主题生成思维导图...",
+  }}
+/>
+```
+
+> **安全提示：** API 密钥会从浏览器发送。生产环境中建议使用代理端点来保护密钥安全。
+
 ### 监听变更
 
 ```tsx
@@ -405,6 +482,7 @@ theme: dark
 | `messages`         | `Partial<MindMapMessages>`      | -            | 覆盖任意 UI 文本字符串                               |
 | `readonly`         | `boolean`                       | `false`      | 仅显示模式（不可编辑、不可创建）                     |
 | `toolbar`          | `boolean \| ToolbarConfig`      | `true`       | 显示/隐藏缩放控件                                    |
+| `ai`               | `MindMapAIConfig`               | -            | AI 生成配置（API 地址、密钥、模型、附件类型）        |
 | `plugins`          | `MindMapPlugin[]`               | `allPlugins` | 启用的扩展语法插件                                   |
 | `onDataChange`     | `(data: MindMapData[]) => void` | -            | 用户交互修改树时调用                                 |
 
@@ -416,6 +494,28 @@ interface ToolbarConfig {
 }
 ```
 
+### MindMapAIConfig
+
+```ts
+type AIAttachmentType = "text" | "image" | "pdf";
+
+interface MindMapAIConfig {
+  apiUrl: string; // OpenAI 兼容 API 端点
+  apiKey: string; // API 密钥（Bearer token）
+  model: string; // 模型名称（如 "gpt-5"）
+  systemPrompt?: string; // 自定义系统提示词（内置默认值）
+  attachments?: AIAttachmentType[]; // 允许的附件类型（默认：[]）
+}
+```
+
+| 字段           | 类型                 | 必填 | 说明                                                                                 |
+| -------------- | -------------------- | ---- | ------------------------------------------------------------------------------------ |
+| `apiUrl`       | `string`             | 是   | OpenAI 兼容的 chat completions 端点                                                  |
+| `apiKey`       | `string`             | 是   | API 密钥，作为 `Bearer` token 发送                                                   |
+| `model`        | `string`             | 是   | 模型标识符（如 `gpt-5`、`deepseek-chat`）                                            |
+| `systemPrompt` | `string`             | 否   | 覆盖内置的思维导图生成提示词                                                         |
+| `attachments`  | `AIAttachmentType[]` | 否   | 启用文件上传：`"text"`（text/\*）、`"image"`（image/\*）、`"pdf"`（application/pdf） |
+
 ### Ref 方法
 
 | 方法                | 返回值          | 说明                         |
@@ -531,4 +631,4 @@ pnpm lint       # 运行代码检查
 
 ## 许可证
 
-[MIT](LICENSE)
+[Apache-2.0](LICENSE)

package/dist/components/MindMapAIInput.d.ts

@@ -0,0 +1,13 @@
+import type { MindMapAIConfig } from "../types";
+import type { ThemeColors } from "../utils/theme";
+import type { MindMapMessages } from "../utils/i18n";
+export interface MindMapAIInputProps {
+    config: MindMapAIConfig;
+    theme: ThemeColors;
+    messages: MindMapMessages;
+    currentMarkdown?: string;
+    onMarkdownStream: (markdown: string) => void;
+    onComplete: () => void;
+    onError: (error: string) => void;
+}
+export declare function MindMapAIInput({ config, theme, messages, currentMarkdown, onMarkdownStream, onComplete, onError, }: MindMapAIInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MindMapContextMenu.d.ts

@@ -17,4 +17,4 @@ export interface MindMapContextMenuProps {
     onDirectionChange: (dir: LayoutDirection) => void;
     onClose: () => void;
 }
-export declare function MindMapContextMenu({ position, theme, messages, readonly: readonlyProp, onNewRootNode, onExportSVG, onExportPNG, onExportMarkdown, onDirectionChange, onClose, }: MindMapContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MindMapContextMenu({ position, messages, readonly: readonlyProp, onNewRootNode, onExportSVG, onExportPNG, onExportMarkdown, onDirectionChange, onClose, }: MindMapContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MindMapControls.d.ts

@@ -13,4 +13,4 @@ export interface MindMapControlsProps {
     onModeToggle: () => void;
     onFullscreenToggle: () => void;
 }
-export declare function MindMapControls({ zoom, theme, messages, showZoom, mode, isFullscreen, onZoomIn, onZoomOut, onAutoFit, onModeToggle, onFullscreenToggle, }: MindMapControlsProps): import("react/jsx-runtime").JSX.Element;
+export declare function MindMapControls({ zoom, messages, showZoom, mode, isFullscreen, onZoomIn, onZoomOut, onAutoFit, onModeToggle, onFullscreenToggle, }: MindMapControlsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons.d.ts

@@ -5,4 +5,8 @@ interface IconProps {
 export declare function IconPlus({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function IconMinus({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function IconClose({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconLightning({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconPaperclip({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconStop({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconLoaderCircle({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};