From ff6e1ebeda9a6073ee89551b253721c905921be4 Mon Sep 17 00:00:00 2001
From: SysVis AI <ai@kv-graph.com>
Date: Sun, 28 Dec 2025 19:41:34 +0700
Subject: [PATCH] fix: build errors and update readme

---
 README.md            | 51 +++++++++++++++++---------------------------
 src/pages/Editor.tsx |  5 ++---
 2 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 12e926e..ad9b524 100644
--- a/README.md
+++ b/README.md
@@ -7,12 +7,14 @@
 ## ✨ Features
 
 - **🤖 AI-Powered Generation** — Generates complex diagrams from text prompts using **Llama 3** (local browser) or Cloud AI.
-- **�️ Vision-to-Diagram** — **Florence-2** powered analysis converts screenshots and sketches into editable layouts entirely in the browser.
-- **�️ Unified Toolkit** — A clean, consolidated toolbar for critical actions (Zoom, Layout, Pan/Select) keeps the canvas "void-like".
+- **👁️ Vision-to-Diagram** — **Florence-2** powered analysis converts screenshots and sketches into editable layouts entirely in the browser.
+- **🖌️ Unified Toolkit** — A clean, consolidated toolbar for critical actions (Zoom, Layout, Pan/Select) keeps the canvas "void-like".
 - **🗺️ MiniMap Overlay** — Navigational aid for large diagrams, unobtrusively positioned in the bottom-right.
 - **💡 Smart Guidance** — Context-aware tips and rotation suggestions when looking at empty space.
-- **� Theme-Aware Code Editor** — Monaco editor that automatically syncs with your Light/Dark aesthetic.
+- **📝 Theme-Aware Code Editor** — Monaco editor that automatically syncs with your Light/Dark aesthetic.
 - **🎨 "Void" Aesthetic** — Premium glassmorphism design with deep blur effects and cinematic transitions.
+- **⏪ Undo/Redo** — Full history support with time-travel capabilities for safe editing.
+- **📐 Optimized Layout** — Enhanced Dagre layout engine with smart spacing to prevent overlapping text.
 
 ## 🚀 Quick Start
 
@@ -38,7 +40,7 @@ npm run dev
 
 Open [http://localhost:5173](http://localhost:5173) in your browser.
 
-## � AI Configuration
+## 🧠 AI Configuration
 
 KV-Graph supports a **Local-First** AI architecture, running powerful models directly in your browser via WebGPU.
 
@@ -63,6 +65,16 @@ Connect to external providers for enhanced capabilities.
 
 Configure your AI provider in **Settings** (⚙️ icon).
 
+## 🐳 Docker Support
+
+Run KV-Graph locally using Docker:
+
+```bash
+docker-compose up -d
+```
+
+Open [http://localhost:8338](http://localhost:8338) in your browser.
+
 ## 📁 Project Structure
 
 ```
@@ -108,7 +120,7 @@ kv-graph/
 |--------|-------------|
 | **PNG** | High-resolution raster image (3x pixel ratio) |
 | **JPG** | Compressed image format |
-| **SVG** | Vector graphics (scalable) |
+| **SVG** | Vector graphics (scalable, high-fidelity) |
 | **JSON** | Full diagram data (nodes, edges, metadata) |
 | **Mermaid** | Mermaid.js code for use elsewhere |
 | **React** | Complete React component with React Flow |
@@ -124,37 +136,14 @@ kv-graph/
 | `Delete/Backspace` | Delete selected node |
 | `Escape` | Deselect / Close panel |
 
-## 🎨 Theming
-
-KV-Graph features a premium glassmorphism design with:
-
-- **Dark Mode** — Deep void backgrounds with subtle gradients
-- **Light Mode** — Clean, minimal aesthetics
-- **Glass Panels** — Frosted glass effects with blur
-- **Smooth Animations** — Cinematic transitions
-
-## 📜 Scripts
-
-```bash
-# Development
-npm run dev          # Start dev server with HMR
-
-# Production
-npm run build        # Build for production
-npm run preview      # Preview production build
-
-# Code Quality
-npm run lint         # Run ESLint
-```
-
 ## 🗺️ Roadmap
 
-- [ ] Undo/Redo history
+- [x] Undo/Redo history
+- [x] API for programmatic generation
+- [x] Plugin system (Foundation)
 - [ ] Real-time collaboration
 - [ ] Custom node shapes
 - [ ] Template library
-- [ ] API for programmatic diagram generation
-- [ ] Plugin system
 
 ## 📄 License
 
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index 30afc11..e352119 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -4,10 +4,10 @@ import { FlowCanvas } from '../components/FlowCanvas';
 import { NodeDetailsPanel } from '../components/NodeDetailsPanel';
 import InteractiveLegend from '../components/InteractiveLegend';
 import OnboardingTour from '../components/OnboardingTour';
-import { useFlowStore, useSettingsStore } from '../store';
+import { useFlowStore } from '../store';
 import { useMobileDetect } from '../hooks/useMobileDetect';
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { PanelLeft, PanelRight, Zap, Sparkles, Minimize2, X, Cpu, Cloud, Server } from 'lucide-react';
+import { PanelLeft, PanelRight, Zap, Sparkles, Minimize2, X } from 'lucide-react';
 import { OrchestratorLoader } from '../components/ui/OrchestratorLoader';
 import { EditorHeader } from '../components/editor/EditorHeader';
 import { VisualOrganizerFAB } from '../components/VisualOrganizerFAB';
@@ -18,7 +18,6 @@ export function Editor() {
     useDiagramAPI();
 
     const { nodes, isLoading, leftPanelOpen, setLeftPanelOpen, rightPanelOpen, setRightPanelOpen, focusMode, setFocusMode, mobileEditorOpen, setMobileEditorOpen } = useFlowStore();
-    const { aiMode, onlineProvider } = useSettingsStore();
     const { isMobile } = useMobileDetect();
     const [sidebarWidth, setSidebarWidth] = useState(384); // Default w-96
     const isResizing = useRef(false);